feat(foxy-transaction): add support for transaction folders

Author: pheekus

src/elements/public/Transaction/Transaction.stories.ts

@@ -5,7 +5,7 @@ import { getMeta } from '../../../storygen/getMeta';
 import { getStory } from '../../../storygen/getStory';
 
 const summary: Summary = {
-  href: 'https://demo.api/hapi/transactions/0?zoom=applied_taxes,discounts,shipments,gift_card_code_logs:gift_card,gift_card_code_logs:gift_card_code',
+  href: 'https://demo.api/hapi/transactions/0?zoom=folder,applied_taxes,discounts,shipments,gift_card_code_logs:gift_card,gift_card_code_logs:gift_card_code',
   parent: 'https://demo.api/hapi/transactions',
   nucleon: true,
   localName: 'foxy-transaction',
@@ -22,7 +22,7 @@ export const Error = getStory(summary);
 export const Busy = getStory(summary);
 
 Readonly.args.href =
-  'https://demo.api/hapi/transactions/1?zoom=applied_taxes,discounts,shipments,applied_gift_card_codes:gift_card';
+  'https://demo.api/hapi/transactions/1?zoom=folder,applied_taxes,discounts,shipments,gift_card_code_logs:gift_card,gift_card_code_logs:gift_card_code';
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';

src/elements/public/Transaction/Transaction.test.ts

@@ -624,6 +624,20 @@ describe('Transaction', () => {
     expect(element.headerSubtitleBadges).to.not.deep.include({ key: 'archived' });
   });
 
+  it('renders folder badge in subtitle if assigned', async () => {
+    const router = createRouter();
+    const element = await fixture<Transaction>(html`
+      <foxy-transaction
+        href="https://demo.api/hapi/transactions/0?zoom=folder,applied_taxes,discounts,shipments,applied_gift_card_codes:gift_card"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-transaction>
+    `);
+
+    await waitUntil(() => element.in({ idle: 'snapshot' }));
+    expect(element.headerSubtitleBadges[0]).to.have.property('text', 'Pending');
+  });
+
   it('uses display_id as ID copied by Copy ID button', async () => {
     const router = createRouter();
     const element = await fixture<Transaction>(html`

src/elements/public/Transaction/Transaction.ts

@@ -1,6 +1,7 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { Resource } from '@foxy.io/sdk/core';
+import type { Badge } from '../../internal/InternalForm/types';
 import type { Data } from './types';
 import type { Rels } from '@foxy.io/sdk/backend';
 
@@ -9,7 +10,7 @@ import { TranslatableMixin } from '../../../mixins/translatable';
 import { ResponsiveMixin } from '../../../mixins/responsive';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { html, svg } from 'lit-element';
 
 const NS = 'transaction';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
@@ -189,10 +190,36 @@ export class Transaction extends Base<Data> {
     };
   }
 
-  get headerSubtitleBadges(): { key: string }[] {
+  get headerSubtitleBadges(): Badge[] {
     const badges = super.headerSubtitleBadges;
-    if (this.data?.is_test) badges.push({ key: 'test' });
+    const folder = this.data?._embedded?.['fx:folder'];
+
+    if (folder?.name) {
+      const folderColor = folder.color ?? '';
+      const colors: Record<string, string> = {
+        'red': 'bg-folder-red text-white',
+        'red_pale': 'bg-folder-red-pale text-black',
+        'green': 'bg-folder-green text-white',
+        'green_pale': 'bg-folder-green-pale text-black',
+        'blue': 'bg-folder-blue text-white',
+        'blue_pale': 'bg-folder-blue-pale text-black',
+        'orange': 'bg-folder-orange text-white',
+        'orange_pale': 'bg-folder-orange-pale text-black',
+        'violet': 'bg-folder-violet text-white',
+        'violet_pale': 'bg-folder-violet-pale text-black',
+        '': 'bg-contrast-5 text-body',
+      };
+
+      badges.push({
+        class: colors[folderColor in colors ? folderColor : ''],
+        icon: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em;"><path d="M3.75 3A1.75 1.75 0 0 0 2 4.75v3.26a3.235 3.235 0 0 1 1.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0 0 16.25 5h-4.836a.25.25 0 0 1-.177-.073L9.823 3.513A1.75 1.75 0 0 0 8.586 3H3.75ZM3.75 9A1.75 1.75 0 0 0 2 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0 0 18 15.25v-4.5A1.75 1.75 0 0 0 16.25 9H3.75Z" /></svg>`,
+        text: folder.name,
+      });
+    }
+
     if (this.data?.hide_transaction) badges.push({ key: 'archived' });
+    if (this.data?.is_test) badges.push({ key: 'test' });
+
     return badges;
   }
 
@@ -201,8 +228,10 @@ export class Transaction extends Base<Data> {
   }
 
   renderHeaderActions(): TemplateResult {
+    const foldersHref = this.__storeLoader?.data?._links['fx:transaction_folders'].href;
+
     return html`
-      <foxy-internal-transaction-actions-control infer="actions">
+      <foxy-internal-transaction-actions-control folders=${ifDefined(foldersHref)} infer="actions">
       </foxy-internal-transaction-actions-control>
     `;
   }

src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts

@@ -1,3 +1,5 @@
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+
 import '../../../NucleonElement/index';
 
 import { expect, fixture, waitUntil } from '@open-wc/testing';
@@ -7,12 +9,23 @@ import { Transaction } from '../../Transaction';
 import { html } from 'lit-html';
 import { createRouter } from '../../../../../server/index';
 import { FetchEvent } from '../../../NucleonElement/FetchEvent';
-import { stub } from 'sinon';
+import { spy, stub } from 'sinon';
 
 import unset from 'lodash-es/unset';
 import set from 'lodash-es/set';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 
+async function waitForIdle(element: InternalTransactionActionsControl) {
+  await waitUntil(
+    () => {
+      const loaders = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+      return [...loaders].every(loader => loader.in('idle'));
+    },
+    '',
+    { timeout: 5000 }
+  );
+}
+
 describe('Transaction', () => {
   describe('InternalTransactionActionsControl', () => {
     it('imports and defines foxy-internal-control', () => {
@@ -353,5 +366,119 @@ describe('Transaction', () => {
       await control.requestUpdate();
       expect(button).to.have.attribute('disabled');
     });
+
+    it('renders folder selector', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<Transaction>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-transaction-actions-control
+            infer="actions"
+            folders="https://demo.api/hapi/transaction_folders"
+          >
+          </foxy-internal-transaction-actions-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+      const control = wrapper.firstElementChild as InternalTransactionActionsControl;
+      await waitForIdle(control);
+
+      const labelText = control.renderRoot.querySelector(
+        'foxy-i18n[infer="folder"][key="caption"]'
+      );
+
+      const label = labelText?.closest('label');
+      const select = label?.querySelector('select');
+
+      expect(labelText).to.exist;
+      expect(label).to.exist;
+      expect(select).to.exist;
+
+      expect(select?.options).to.have.lengthOf(3);
+      expect(select?.options[0].value).to.equal('');
+      expect(select?.options[0]).to.include.text('folder.option_none');
+      expect(select?.options[0]).to.not.have.attribute('selected');
+
+      expect(select?.options[1].value).to.equal('https://demo.api/hapi/transaction_folders/0');
+      expect(select?.options[1]).to.include.text('Pending');
+      expect(select?.options[1]).to.have.attribute('selected');
+
+      expect(select?.options[2].value).to.equal('https://demo.api/hapi/transaction_folders/1');
+      expect(select?.options[2]).to.include.text('Shipped');
+      expect(select?.options[2]).to.not.have.attribute('selected');
+
+      const editMethod = spy(wrapper, 'edit');
+      const submitMethod = spy(wrapper, 'submit');
+
+      select!.options[2].selected = true;
+      select!.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+      expect(editMethod).to.have.been.calledOnceWith({ folder_uri: select!.options[2].value });
+      expect(submitMethod).to.have.been.calledOnceWith(false);
+    });
+
+    it('disables folder selector when control is disabled', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<Transaction>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-transaction-actions-control
+            infer="actions"
+            folders="https://demo.api/hapi/transaction_folders"
+          >
+          </foxy-internal-transaction-actions-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+      const control = wrapper.firstElementChild as InternalTransactionActionsControl;
+
+      await waitForIdle(control);
+      const select = control.renderRoot
+        .querySelector('foxy-i18n[infer="folder"][key="caption"]')
+        ?.closest('label')
+        ?.querySelector('select');
+
+      expect(select).to.not.have.attribute('disabled');
+
+      control.disabled = true;
+      await control.requestUpdate();
+      expect(select).to.have.attribute('disabled');
+    });
+
+    it('makes folder selector readonly when control is readonly', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<Transaction>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-transaction-actions-control
+            infer="actions"
+            folders="https://demo.api/hapi/transaction_folders"
+          >
+          </foxy-internal-transaction-actions-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+      const control = wrapper.firstElementChild as InternalTransactionActionsControl;
+
+      await waitForIdle(control);
+      const select = control.renderRoot
+        .querySelector('foxy-i18n[infer="folder"][key="caption"]')
+        ?.closest('label')
+        ?.querySelector('select');
+
+      expect(select).to.not.have.attribute('readonly');
+
+      control.readonly = true;
+      await control.requestUpdate();
+      expect(select).to.have.attribute('readonly');
+    });
   });
 });

src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts

@@ -1,12 +1,24 @@
-import { html, TemplateResult } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+import type { Transaction } from '../../Transaction';
+import type { Resource } from '@foxy.io/sdk/core';
+
 import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
-import { Transaction } from '../../Transaction';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
+import { Rels } from '@foxy.io/sdk/backend';
 
 export class InternalTransactionActionsControl extends InternalControl {
-  renderControl(): TemplateResult {
-    const host = this.nucleon as Transaction | null;
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      folders: {},
+    };
+  }
+
+  folders: string | null = null;
 
+  renderControl(): TemplateResult {
     return html`
       <div class="flex flex-wrap gap-x-m gap-y-xs">
         ${this.nucleon?.data?._links['fx:capture'] ? this.__renderCaptureAction() : ''}
@@ -15,21 +27,8 @@ export class InternalTransactionActionsControl extends InternalControl {
         ${this.nucleon?.data?._links['fx:send_emails'] ? this.__renderSendEmailsAction() : ''}
         ${this.nucleon?.data?._links['fx:subscription'] ? this.__renderSubscriptionAction() : ''}
         ${this.nucleon?.data?._links['fx:receipt'] ? this.__renderReceiptAction() : ''}
-
-        <vaadin-button
-          theme="tertiary-inline"
-          ?disabled=${this.disabledSelector.matches('archive', true)}
-          @click=${() => {
-            host?.edit({ hide_transaction: !host?.form.hide_transaction });
-            host?.submit();
-          }}
-        >
-          <foxy-i18n
-            infer="archive"
-            key="caption_${host?.form.hide_transaction ? 'unarchive' : 'archive'}"
-          >
-          </foxy-i18n>
-        </vaadin-button>
+        ${this.__renderArchiveAction()}
+        ${this.folders ? this.__renderFolderSelector(this.folders) : ''}
       </div>
     `;
   }
@@ -110,4 +109,82 @@ export class InternalTransactionActionsControl extends InternalControl {
       </a>
     `;
   }
+
+  private __renderArchiveAction() {
+    const host = this.nucleon as Transaction | null;
+
+    return html`
+      <vaadin-button
+        theme="tertiary-inline"
+        ?disabled=${this.disabledSelector.matches('archive', true)}
+        @click=${() => {
+          host?.edit({ hide_transaction: !host?.form.hide_transaction });
+          host?.submit();
+        }}
+      >
+        <foxy-i18n
+          infer="archive"
+          key="caption_${host?.form.hide_transaction ? 'unarchive' : 'archive'}"
+        >
+        </foxy-i18n>
+      </vaadin-button>
+    `;
+  }
+
+  private __renderFolderSelector(foldersHref: string) {
+    type FoldersLoader = NucleonElement<Resource<Rels.StoreTransactionFolders>>;
+
+    const foldersLoader = this.renderRoot.querySelector<FoldersLoader>('#foldersLoader');
+    const folders = Array.from(foldersLoader?.data?._embedded?.['fx:transaction_folders'] ?? []);
+    const host = this.nucleon as Transaction | null;
+
+    return html`
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${foldersHref}
+        id="foldersLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <label
+        class="group relative rounded focus-within-ring-2 focus-within-ring-primary-50"
+        ?hidden=${folders.length === 0}
+      >
+        <span
+          class="inline-flex items-center gap-xs relative transition-opacity group-hover-opacity-80"
+        >
+          <foxy-i18n class="font-medium text-primary" infer="folder" key="caption"></foxy-i18n>
+          ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="text-primary transform scale-125" style="width: 1em; height: 1em"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+        </span>
+
+        <select
+          class="absolute inset-0 opacity-0 cursor-pointer"
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @change=${(evt: Event) => {
+            host?.edit({ folder_uri: (evt.currentTarget as HTMLSelectElement).value });
+            host?.submit(false);
+          }}
+        >
+          <option value="" ?selected=${!host?.form.folder_uri} ?disabled=${!host?.form.folder_uri}>
+            ${this.t('folder.option_none')}
+          </option>
+
+          ${folders
+            .sort((a, b) => a.sort_order - b.sort_order)
+            .map(folder => {
+              const folderHref = folder._links.self.href;
+              const isSelected = host?.form.folder_uri === folderHref;
+              return html`
+                <option value=${folderHref} ?selected=${isSelected} ?disabled=${isSelected}>
+                  ${folder.name}
+                </option>
+              `;
+            })}
+        </select>
+      </label>
+    `;
+  }
 }