@foxy.io/elements 1.25.0-beta.2 → 1.25.0-beta.4

package/dist/elements/public/Transaction/internal/InternalTransactionCustomerControl/InternalTransactionCustomerControl.js

@@ -1,36 +1,93 @@
-import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
 import { InternalControl } from "../../../../internal/InternalControl/InternalControl.js";
+import { getResourceId } from '@foxy.io/sdk/core';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
+import { classMap } from "../../../../../utils/class-map.js";
 export class InternalTransactionCustomerControl extends InternalControl {
+    constructor() {
+        super(...arguments);
+        this.__copyEmailState = 'idle';
+        this.__copyIdState = 'idle';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __copyEmailState: { attribute: false },
+            __copyIdState: { attribute: false },
+        };
+    }
     renderControl() {
         var _a, _b, _c, _d;
+        const host = this.nucleon;
+        const customerHref = (_a = host === null || host === void 0 ? void 0 : host.data) === null || _a === void 0 ? void 0 : _a._links['fx:customer'].href;
+        const customerPageHref = customerHref ? (_b = host === null || host === void 0 ? void 0 : host.getCustomerPageHref) === null || _b === void 0 ? void 0 : _b.call(host, customerHref) : void 0;
         return html `
-      <foxy-internal-details summary="customer" infer="" open>
-        <foxy-form-dialog
-          header="header"
-          infer="dialog"
-          form="foxy-customer"
-          href=${ifDefined((_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._links['fx:customer'].href)}
-          id="dialog"
+      <foxy-i18n infer="" class="block text-s font-medium leading-xs mb-xs" key="label">
+      </foxy-i18n>
+
+      <foxy-swipe-actions>
+        <a
+          class=${classMap({
+            'block ring-inset rounded transition-colors': true,
+            'ring-1 ring-contrast-10': !customerPageHref,
+            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !!customerPageHref,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': !!customerPageHref,
+        })}
+          style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+          href=${ifDefined(customerPageHref)}
         >
-        </foxy-form-dialog>
+          <foxy-customer-card infer="" href=${ifDefined(customerHref)}></foxy-customer-card>
+        </a>
 
-        <button
-          class="w-full text-left block rounded-b-l transition-colors hover-bg-contrast-5 focus-outline-none focus-ring-2 focus-ring-primary-50"
-          @click=${(evt) => {
-            const dialog = this.renderRoot.querySelector('#dialog');
-            dialog.show(evt.currentTarget);
-        }}
+        <div class="h-full grid grid-cols-2 gap-s ml-s" slot="action">
+          ${this.__renderCopyAction(svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2rem; height: 1.2rem"><path fill-rule="evenodd" d="M9.493 2.852a.75.75 0 0 0-1.486-.204L7.545 6H4.198a.75.75 0 0 0 0 1.5h3.14l-.69 5H3.302a.75.75 0 0 0 0 1.5h3.14l-.435 3.148a.75.75 0 0 0 1.486.204L7.955 14h2.986l-.434 3.148a.75.75 0 0 0 1.486.204L12.456 14h3.346a.75.75 0 0 0 0-1.5h-3.14l.69-5h3.346a.75.75 0 0 0 0-1.5h-3.14l.435-3.148a.75.75 0 0 0-1.486-.204L12.045 6H9.059l.434-3.148ZM8.852 7.5l-.69 5h2.986l.69-5H8.852Z" clip-rule="evenodd" /></svg>`, 'copy_id_caption', '__copyIdState', customerHref ? String(getResourceId(customerHref)) : '')}
+          ${this.__renderCopyAction(svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2rem; height: 1.2rem"><path fill-rule="evenodd" d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z" clip-rule="evenodd" /></svg>`, 'copy_email_caption', '__copyEmailState', (_d = (_c = host === null || host === void 0 ? void 0 : host.data) === null || _c === void 0 ? void 0 : _c.customer_email) !== null && _d !== void 0 ? _d : '')}
+        </div>
+      </foxy-swipe-actions>
+    `;
+    }
+    __renderCopyAction(icon, caption, stateKey, textToCopy) {
+        const state = this[stateKey];
+        const spinnerState = state === 'fail' ? 'error' : state === 'done' ? 'end' : 'busy';
+        return html `
+      <button
+        class="relative transition-colors bg-contrast-5 text-body hover-bg-contrast-10 rounded h-full py-0 px-m focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50"
+        ?disabled=${state !== 'idle'}
+        @click=${() => state === 'idle' && this.__copy(textToCopy, stateKey)}
+        @focusout=${(evt) => state !== 'idle' && evt.stopPropagation()}
+        @mouseout=${(evt) => state !== 'idle' && evt.stopPropagation()}
+      >
+        <div
+          class=${classMap({
+            'relative flex flex-col items-center justify-center transition-opacity': true,
+            'opacity-0': state !== 'idle',
+        })}
         >
-          <foxy-customer-card
-            infer="card"
-            class="p-m"
-            href=${ifDefined((_d = (_c = this.nucleon) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d._links['fx:customer'].href)}
-          >
-          </foxy-customer-card>
-        </button>
-      </foxy-internal-details>
+          ${icon}
+          <foxy-i18n class="mt-xs text-s font-medium leading-none" infer="" key=${caption}>
+          </foxy-i18n>
+        </div>
+        <div
+          class=${classMap({
+            'absolute inset-0 flex items-center justify-center transition-opacity': true,
+            'opacity-0': state === 'idle',
+        })}
+        >
+          <foxy-spinner layout="no-label" state=${spinnerState} infer="spinner"> </foxy-spinner>
+        </div>
+      </button>
     `;
     }
+    async __copy(text, stateKey) {
+        this[stateKey] = 'busy';
+        try {
+            await navigator.clipboard.writeText(text);
+            this[stateKey] = 'done';
+        }
+        catch (_a) {
+            this[stateKey] = 'fail';
+        }
+        setTimeout(() => (this[stateKey] = 'idle'), 3000);
+    }
 }
 //# sourceMappingURL=InternalTransactionCustomerControl.js.map

package/dist/elements/public/Transaction/internal/InternalTransactionCustomerControl/InternalTransactionCustomerControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTransactionCustomerControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionCustomerControl/InternalTransactionCustomerControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,gEAA6D;AAGvF,MAAM,OAAO,kCAAmC,SAAQ,eAAe;IACrE,aAAa;;QACX,OAAO,IAAI,CAAA;;;;;;iBAME,SAAS,aAAC,IAAI,CAAC,OAAO,0CAAE,IAAI,0CAAE,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC;;;;;;;mBAOvD,CAAC,GAAU,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAe,CAAC;YACtE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,aAAkC,CAAC,CAAC;QACtD,CAAC;;;;;mBAKQ,SAAS,aAAC,IAAI,CAAC,OAAO,0CAAE,IAAI,0CAAE,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC;;;;;KAKvE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { FormDialog } from '../../../FormDialog/FormDialog';\n\nexport class InternalTransactionCustomerControl extends InternalControl {\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-internal-details summary=\"customer\" infer=\"\" open>\n        <foxy-form-dialog\n          header=\"header\"\n          infer=\"dialog\"\n          form=\"foxy-customer\"\n          href=${ifDefined(this.nucleon?.data?._links['fx:customer'].href)}\n          id=\"dialog\"\n        >\n        </foxy-form-dialog>\n\n        <button\n          class=\"w-full text-left block rounded-b-l transition-colors hover-bg-contrast-5 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n          @click=${(evt: Event) => {\n            const dialog = this.renderRoot.querySelector('#dialog') as FormDialog;\n            dialog.show(evt.currentTarget as HTMLButtonElement);\n          }}\n        >\n          <foxy-customer-card\n            infer=\"card\"\n            class=\"p-m\"\n            href=${ifDefined(this.nucleon?.data?._links['fx:customer'].href)}\n          >\n          </foxy-customer-card>\n        </button>\n      </foxy-internal-details>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalTransactionCustomerControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionCustomerControl/InternalTransactionCustomerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { SVGTemplateResult, TemplateResult } from 'lit-html';\nimport type { Transaction } from '../../Transaction';\n\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../../../utils/class-map';\n\nexport class InternalTransactionCustomerControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __copyEmailState: { attribute: false },\n      __copyIdState: { attribute: false },\n    };\n  }\n\n  private __copyEmailState: 'idle' | 'busy' | 'done' | 'fail' = 'idle';\n\n  private __copyIdState: 'idle' | 'busy' | 'done' | 'fail' = 'idle';\n\n  renderControl(): TemplateResult {\n    const host = this.nucleon as Transaction | null;\n    const customerHref = host?.data?._links['fx:customer'].href;\n    const customerPageHref = customerHref ? host?.getCustomerPageHref?.(customerHref) : void 0;\n\n    return html`\n      <foxy-i18n infer=\"\" class=\"block text-s font-medium leading-xs mb-xs\" key=\"label\">\n      </foxy-i18n>\n\n      <foxy-swipe-actions>\n        <a\n          class=${classMap({\n            'block ring-inset rounded transition-colors': true,\n            'ring-1 ring-contrast-10': !customerPageHref,\n            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !!customerPageHref,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': !!customerPageHref,\n          })}\n          style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          href=${ifDefined(customerPageHref)}\n        >\n          <foxy-customer-card infer=\"\" href=${ifDefined(customerHref)}></foxy-customer-card>\n        </a>\n\n        <div class=\"h-full grid grid-cols-2 gap-s ml-s\" slot=\"action\">\n          ${this.__renderCopyAction(\n            svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2rem; height: 1.2rem\"><path fill-rule=\"evenodd\" d=\"M9.493 2.852a.75.75 0 0 0-1.486-.204L7.545 6H4.198a.75.75 0 0 0 0 1.5h3.14l-.69 5H3.302a.75.75 0 0 0 0 1.5h3.14l-.435 3.148a.75.75 0 0 0 1.486.204L7.955 14h2.986l-.434 3.148a.75.75 0 0 0 1.486.204L12.456 14h3.346a.75.75 0 0 0 0-1.5h-3.14l.69-5h3.346a.75.75 0 0 0 0-1.5h-3.14l.435-3.148a.75.75 0 0 0-1.486-.204L12.045 6H9.059l.434-3.148ZM8.852 7.5l-.69 5h2.986l.69-5H8.852Z\" clip-rule=\"evenodd\" /></svg>`,\n            'copy_id_caption',\n            '__copyIdState',\n            customerHref ? String(getResourceId(customerHref)) : ''\n          )}\n          ${this.__renderCopyAction(\n            svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2rem; height: 1.2rem\"><path fill-rule=\"evenodd\" d=\"M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z\" clip-rule=\"evenodd\" /></svg>`,\n            'copy_email_caption',\n            '__copyEmailState',\n            host?.data?.customer_email ?? ''\n          )}\n        </div>\n      </foxy-swipe-actions>\n    `;\n  }\n\n  private __renderCopyAction(\n    icon: SVGTemplateResult,\n    caption: string,\n    stateKey: '__copyIdState' | '__copyEmailState',\n    textToCopy: string\n  ) {\n    const state = this[stateKey];\n    const spinnerState = state === 'fail' ? 'error' : state === 'done' ? 'end' : 'busy';\n\n    return html`\n      <button\n        class=\"relative transition-colors bg-contrast-5 text-body hover-bg-contrast-10 rounded h-full py-0 px-m focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50\"\n        ?disabled=${state !== 'idle'}\n        @click=${() => state === 'idle' && this.__copy(textToCopy, stateKey)}\n        @focusout=${(evt: Event) => state !== 'idle' && evt.stopPropagation()}\n        @mouseout=${(evt: Event) => state !== 'idle' && evt.stopPropagation()}\n      >\n        <div\n          class=${classMap({\n            'relative flex flex-col items-center justify-center transition-opacity': true,\n            'opacity-0': state !== 'idle',\n          })}\n        >\n          ${icon}\n          <foxy-i18n class=\"mt-xs text-s font-medium leading-none\" infer=\"\" key=${caption}>\n          </foxy-i18n>\n        </div>\n        <div\n          class=${classMap({\n            'absolute inset-0 flex items-center justify-center transition-opacity': true,\n            'opacity-0': state === 'idle',\n          })}\n        >\n          <foxy-spinner layout=\"no-label\" state=${spinnerState} infer=\"spinner\"> </foxy-spinner>\n        </div>\n      </button>\n    `;\n  }\n\n  private async __copy(text: string, stateKey: '__copyIdState' | '__copyEmailState') {\n    this[stateKey] = 'busy';\n\n    try {\n      await navigator.clipboard.writeText(text);\n      this[stateKey] = 'done';\n    } catch {\n      this[stateKey] = 'fail';\n    }\n\n    setTimeout(() => (this[stateKey] = 'idle'), 3000);\n  }\n}\n"]}

package/dist/elements/public/Transaction/internal/InternalTransactionCustomerControl/index.d.ts

@@ -1,7 +1,7 @@
-import '../../../../internal/InternalDetails/index';
 import '../../../../internal/InternalControl/index';
 import '../../../CustomerCard/index';
-import '../../../FormDialog/index';
-import '../../../Customer/index';
+import '../../../SwipeActions/index';
+import '../../../Spinner/index';
+import '../../../I18n/index';
 import { InternalTransactionCustomerControl as Control } from './InternalTransactionCustomerControl';
 export { Control as InternalTransactionCustomerControl };

package/dist/elements/public/Transaction/internal/InternalTransactionCustomerControl/index.js

@@ -1,8 +1,8 @@
-import "../../../../internal/InternalDetails/index.js";
 import "../../../../internal/InternalControl/index.js";
 import "../../../CustomerCard/index.js";
-import "../../../FormDialog/index.js";
-import "../../../Customer/index.js";
+import "../../../SwipeActions/index.js";
+import "../../../Spinner/index.js";
+import "../../../I18n/index.js";
 import { InternalTransactionCustomerControl as Control } from "./InternalTransactionCustomerControl.js";
 customElements.define('foxy-internal-transaction-customer-control', Control);
 export { Control as InternalTransactionCustomerControl };

package/dist/elements/public/Transaction/internal/InternalTransactionCustomerControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionCustomerControl/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,uDAAoD;AAEpD,wCAAqC;AACrC,sCAAmC;AACnC,oCAAiC;AAEjC,OAAO,EAAE,kCAAkC,IAAI,OAAO,EAAE,gDAA6C;AAErG,cAAc,CAAC,MAAM,CAAC,4CAA4C,EAAE,OAAO,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,kCAAkC,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalDetails/index';\nimport '../../../../internal/InternalControl/index';\n\nimport '../../../CustomerCard/index';\nimport '../../../FormDialog/index';\nimport '../../../Customer/index';\n\nimport { InternalTransactionCustomerControl as Control } from './InternalTransactionCustomerControl';\n\ncustomElements.define('foxy-internal-transaction-customer-control', Control);\n\nexport { Control as InternalTransactionCustomerControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionCustomerControl/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,wCAAqC;AACrC,wCAAqC;AACrC,mCAAgC;AAChC,gCAA6B;AAE7B,OAAO,EAAE,kCAAkC,IAAI,OAAO,EAAE,gDAA6C;AAErG,cAAc,CAAC,MAAM,CAAC,4CAA4C,EAAE,OAAO,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,kCAAkC,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalControl/index';\nimport '../../../CustomerCard/index';\nimport '../../../SwipeActions/index';\nimport '../../../Spinner/index';\nimport '../../../I18n/index';\n\nimport { InternalTransactionCustomerControl as Control } from './InternalTransactionCustomerControl';\n\ncustomElements.define('foxy-internal-transaction-customer-control', Control);\n\nexport { Control as InternalTransactionCustomerControl };\n"]}

package/dist/elements/public/Transaction/internal/InternalTransactionPostActionControl/InternalTransactionPostActionControl.js

@@ -30,7 +30,7 @@ export class InternalTransactionPostActionControl extends InternalControl {
 
       <vaadin-button
         class="w-full"
-        theme="${theme} tertiary"
+        theme="${theme} tertiary-inline"
         ?disabled=${state === 'busy' || this.disabled}
         @click=${(evt) => {
             const confirm = this.renderRoot.querySelector('#confirm');

package/dist/elements/public/Transaction/internal/InternalTransactionPostActionControl/InternalTransactionPostActionControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTransactionPostActionControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionPostActionControl/InternalTransactionPostActionControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,IAAI,EAAkB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AAEvF,OAAO,EAAE,cAAc,EAAE,kDAA+C;AAGxE,MAAM,OAAO,oCAAqC,SAAQ,eAAe;IAAzE;;QAUE,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAkB,IAAI,CAAC;QAEnB,YAAO,GAAG,MAAM,CAAC;IA4C3B,CAAC;IAzDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAQD,aAAa;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9E,OAAO,IAAI,CAAA;;;;;gBAKC,CAAC,GAAoB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;;;;;;iBAMjE,KAAK;oBACF,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ;iBACpC,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;YACnF,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,aAA8B,CAAC,CAAC;QACnD,CAAC;;yBAEgB,KAAK;;KAEzB,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,QAAQ;;QACpB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QAEpC,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;YAEtB,MAAM,GAAG,GAAG,IAAI,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,KAAK,OAAC,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YAEtE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC7C,IAAI,QAAQ,CAAC,EAAE;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;SAC9D;QAAC,WAAM;YACN,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;SACvB;IACH,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, html, TemplateResult } from 'lit-element';\nimport { InternalConfirmDialog } from '../../../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { DialogHideEvent } from '../../../../private/Dialog/DialogHideEvent';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { ButtonElement } from '@vaadin/vaadin-button';\n\nexport class InternalTransactionPostActionControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __state: { type: String },\n      theme: { type: String },\n      href: { type: String },\n    };\n  }\n\n  theme: string | null = null;\n\n  href: string | null = null;\n\n  private __state = 'idle';\n\n  renderControl(): TemplateResult {\n    const state = this.__state;\n    const theme = state === 'fail' ? 'error' : state === 'idle' ? this.theme : '';\n\n    return html`\n      <foxy-internal-confirm-dialog\n        header=\"header\"\n        infer=\"confirm\"\n        id=\"confirm\"\n        @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && this.__submit()}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <vaadin-button\n        class=\"w-full\"\n        theme=\"${theme} tertiary\"\n        ?disabled=${state === 'busy' || this.disabled}\n        @click=${(evt: CustomEvent) => {\n          const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n          confirm.show(evt.currentTarget as ButtonElement);\n        }}\n      >\n        <foxy-i18n key=${state} infer=\"\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n\n  private async __submit(): Promise<void> {\n    if (this.__state === 'busy') return;\n\n    try {\n      this.__state = 'busy';\n\n      const api = new NucleonElement.API(this);\n      const response = await api.fetch(this.href ?? '', { method: 'POST' });\n\n      this.__state = response.ok ? 'idle' : 'fail';\n      if (response.ok) this.dispatchEvent(new CustomEvent('done'));\n    } catch {\n      this.__state = 'fail';\n    }\n  }\n}\n"]}
+{"version":3,"file":"InternalTransactionPostActionControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionPostActionControl/InternalTransactionPostActionControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,IAAI,EAAkB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,eAAe,EAAE,gEAA6D;AAEvF,OAAO,EAAE,cAAc,EAAE,kDAA+C;AAGxE,MAAM,OAAO,oCAAqC,SAAQ,eAAe;IAAzE;;QAUE,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAkB,IAAI,CAAC;QAEnB,YAAO,GAAG,MAAM,CAAC;IA4C3B,CAAC;IAzDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAQD,aAAa;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9E,OAAO,IAAI,CAAA;;;;;gBAKC,CAAC,GAAoB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;;;;;;iBAMjE,KAAK;oBACF,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ;iBACpC,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;YACnF,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,aAA8B,CAAC,CAAC;QACnD,CAAC;;yBAEgB,KAAK;;KAEzB,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,QAAQ;;QACpB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QAEpC,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;YAEtB,MAAM,GAAG,GAAG,IAAI,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,KAAK,OAAC,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YAEtE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC7C,IAAI,QAAQ,CAAC,EAAE;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;SAC9D;QAAC,WAAM;YACN,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;SACvB;IACH,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, html, TemplateResult } from 'lit-element';\nimport { InternalConfirmDialog } from '../../../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { DialogHideEvent } from '../../../../private/Dialog/DialogHideEvent';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { ButtonElement } from '@vaadin/vaadin-button';\n\nexport class InternalTransactionPostActionControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __state: { type: String },\n      theme: { type: String },\n      href: { type: String },\n    };\n  }\n\n  theme: string | null = null;\n\n  href: string | null = null;\n\n  private __state = 'idle';\n\n  renderControl(): TemplateResult {\n    const state = this.__state;\n    const theme = state === 'fail' ? 'error' : state === 'idle' ? this.theme : '';\n\n    return html`\n      <foxy-internal-confirm-dialog\n        header=\"header\"\n        infer=\"confirm\"\n        id=\"confirm\"\n        @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && this.__submit()}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <vaadin-button\n        class=\"w-full\"\n        theme=\"${theme} tertiary-inline\"\n        ?disabled=${state === 'busy' || this.disabled}\n        @click=${(evt: CustomEvent) => {\n          const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n          confirm.show(evt.currentTarget as ButtonElement);\n        }}\n      >\n        <foxy-i18n key=${state} infer=\"\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n\n  private async __submit(): Promise<void> {\n    if (this.__state === 'busy') return;\n\n    try {\n      this.__state = 'busy';\n\n      const api = new NucleonElement.API(this);\n      const response = await api.fetch(this.href ?? '', { method: 'POST' });\n\n      this.__state = response.ok ? 'idle' : 'fail';\n      if (response.ok) this.dispatchEvent(new CustomEvent('done'));\n    } catch {\n      this.__state = 'fail';\n    }\n  }\n}\n"]}

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.d.ts

@@ -1,8 +1,10 @@
-import { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit-html';
 import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
 export declare class InternalTransactionSummaryControl extends InternalControl {
+    private readonly __storeLoaderId;
     renderControl(): TemplateResult;
-    private __renderStatus;
+    private get __storeHref();
+    private get __store();
     private __renderPrice;
-    private __renderTotals;
+    private __renderStatus;
 }

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.js

@@ -1,82 +1,131 @@
-import { html } from 'lit-html';
 import { InternalControl } from "../../../../internal/InternalControl/InternalControl.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
 export class InternalTransactionSummaryControl extends InternalControl {
+    constructor() {
+        super(...arguments);
+        this.__storeLoaderId = 'storeLoader';
+    }
     renderControl() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const data = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data;
+        if (!data)
+            return html ``;
+        const taxes = (_c = (_b = data === null || data === void 0 ? void 0 : data._embedded) === null || _b === void 0 ? void 0 : _b['fx:applied_taxes']) !== null && _c !== void 0 ? _c : [];
+        const shipments = (_e = (_d = data._embedded) === null || _d === void 0 ? void 0 : _d['fx:shipments']) !== null && _e !== void 0 ? _e : [];
         return html `
-      <div class="border-t border-transparent">
-        <div class="h-m flex items-center justify-between">
-          <div class="text-xl font-medium">${this.__renderPrice()}</div>
-          <div>${((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data) ? this.__renderStatus() : ''}</div>
-        </div>
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <p
+        class="grid gap-x-s text-right text-s leading-m border-dashed border rounded border-contrast-20 whitespace-nowrap overflow-auto"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 2px); grid-template-columns: 1fr min-content"
+      >
+        <span><foxy-i18n key="subtotal" infer=""></foxy-i18n>&colon;</span>
+        <span>${this.__renderPrice(data.total_item_price)}</span>
+
+        ${shipments.length === 0 || data.total_shipping === 0
+            ? html `
+              <span><foxy-i18n infer="" key="total_shipping"></foxy-i18n>&colon;</span>
+              <span>${this.__renderPrice(data.total_shipping, true)} </span>
+            `
+            : shipments.map(shipment => {
+                return html `
+                <span>${shipment.shipping_service_description}&colon;</span>
+                <span>${this.__renderPrice(shipment.total_shipping, true)}</span>
+              `;
+            })}
+        ${taxes.length === 0 || data.total_tax === 0
+            ? html `
+              <span><foxy-i18n infer="" key="total_tax"></foxy-i18n>&colon;</span>
+              <span>${this.__renderPrice(data.total_tax, true)}</span>
+            `
+            : taxes.map(tax => {
+                return html `
+                <span>${tax.name}&colon;</span>
+                <span>${this.__renderPrice(tax.amount, true)}</span>
+              `;
+            })}
+        ${(_g = (_f = data === null || data === void 0 ? void 0 : data._embedded) === null || _f === void 0 ? void 0 : _f['fx:applied_gift_card_codes']) === null || _g === void 0 ? void 0 : _g.map(code => {
+            var _a;
+            return html `
+            <span>${code._embedded['fx:gift_card'].name}&colon;</span>
+            <span>${this.__renderPrice((_a = code.balance_adjustment) !== null && _a !== void 0 ? _a : 0, true)}</span>
+          `;
+        })}
+        ${(_j = (_h = data === null || data === void 0 ? void 0 : data._embedded) === null || _h === void 0 ? void 0 : _h['fx:discounts']) === null || _j === void 0 ? void 0 : _j.map(discount => {
+            return html `
+            <span data-testclass="discount">${discount.name}&colon;</span>
+            <span>${this.__renderPrice(discount.amount, true)}</span>
+          `;
+        })}
 
-        <div class="border-t border-contrast-10 mb-s"></div>
+        <span class="col-span-2 border-t border-dashed border-contrast-20 my-s"></span>
 
-        ${this.__renderTotals()}
-      </div>
+        <span class="col-span-2 flex gap-s justify-between items-center">
+          ${this.__renderStatus()}
+          <span class="text-xl font-medium leading-xs">
+            <foxy-i18n infer="" key="total"></foxy-i18n>&colon;
+            ${this.__renderPrice(data.total_order)}
+          </span>
+        </span>
+      </p>
     `;
     }
-    __renderStatus() {
+    get __storeHref() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._links['fx:store']) === null || _c === void 0 ? void 0 : _c.href;
+    }
+    get __store() {
         var _a, _b;
-        const colors = {
-            authorized: 'bg-success text-success-contrast',
-            completed: 'bg-success text-success-contrast',
-            declined: 'bg-error text-error-contrast',
-            rejected: 'bg-error text-error-contrast',
-        };
-        const status = ((_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.status) || 'completed';
-        const defaultColor = 'bg-contrast-5 text-contrast';
-        const color = status in colors ? colors[status] : defaultColor;
+        const selector = `#${this.__storeLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    __renderPrice(amount, isAdditive = false) {
+        var _a, _b, _c;
+        const currencyDisplay = ((_a = this.__store) === null || _a === void 0 ? void 0 : _a.use_international_currency_symbol) ? 'code' : 'symbol';
+        const currencyCode = (_c = (_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.currency_code;
         return html `
       <foxy-i18n
-        class="flex items-center h-xs px-s text-s font-medium rounded ${color}"
+        class=${isAdditive && amount !== 0 ? (amount > 0 ? 'text-success' : 'text-error') : ''}
         infer=""
-        key="transaction_${status}"
+        key="price"
+        .options=${{
+            currencyDisplay,
+            signDisplay: isAdditive ? 'exceptZero' : 'auto',
+            amount: `${amount} ${currencyCode}`,
+        }}
       >
       </foxy-i18n>
     `;
     }
-    __renderPrice() {
-        var _a;
-        const data = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data;
-        const currency = data === null || data === void 0 ? void 0 : data.currency_code;
-        if (!data)
-            return html `--`;
-        const options = { amount: `${data.total_order} ${currency}` };
-        return html `<foxy-i18n infer="" key="price" .options=${options}></foxy-i18n>`;
-    }
-    __renderTotals() {
+    __renderStatus() {
         var _a, _b;
-        const keys = ['total_item_price', 'total_shipping', 'total_tax'];
-        const data = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data;
-        const discounts = (_b = data === null || data === void 0 ? void 0 : data._embedded) === null || _b === void 0 ? void 0 : _b['fx:discounts'];
-        const discount = discounts === null || discounts === void 0 ? void 0 : discounts.reduce((p, c) => p + c.amount, 0);
-        const currency = data === null || data === void 0 ? void 0 : data.currency_code;
+        const status = ((_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.status) || 'completed';
+        let color = '';
+        if (['capturing', 'captured', 'approved', 'authorized', 'pending'].includes(status)) {
+            color = 'text-success bg-success-10';
+        }
+        else if (!status || status === 'completed') {
+            color = 'text-success-contrast bg-success';
+        }
+        else if (['problem', 'pending_fraud_review', 'rejected', 'declined'].includes(status)) {
+            color = 'text-error-contrast bg-error';
+        }
+        else {
+            color = 'bg-contrast-5 text-body';
+        }
         return html `
-      ${keys.map(key => {
-            const options = { amount: `${data === null || data === void 0 ? void 0 : data[key]} ${currency}` };
-            return html `
-          <div class="flex justify-between text-m text-secondary">
-            <foxy-i18n key=${key} infer=""></foxy-i18n>
-            ${data
-                ? html `<foxy-i18n infer="" key="price" .options=${options}></foxy-i18n>`
-                : html `<span>--</span>`}
-          </div>
-        `;
-        })}
-      ${discount
-            ? html `
-            <div class="flex justify-between text-m text-secondary">
-              <foxy-i18n key="total_discount" infer=""></foxy-i18n>
-              <foxy-i18n
-                infer=""
-                key=${(discounts === null || discounts === void 0 ? void 0 : discounts.length) === 20 ? 'total_discount_see_below' : 'price'}
-                .options=${{ amount: `${discount} ${currency}` }}
-              >
-              </foxy-i18n>
-            </div>
-          `
-            : ''}
+      <foxy-i18n
+        infer=""
+        class="${color} rounded-s py-xs px-s font-medium text-s leading-xs"
+        key="status_${status}"
+      ></foxy-i18n>
     `;
     }
 }

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTransactionSummaryControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { Data } from '../../types';\n\nexport class InternalTransactionSummaryControl extends InternalControl {\n  renderControl(): TemplateResult {\n    return html`\n      <div class=\"border-t border-transparent\">\n        <div class=\"h-m flex items-center justify-between\">\n          <div class=\"text-xl font-medium\">${this.__renderPrice()}</div>\n          <div>${this.nucleon?.data ? this.__renderStatus() : ''}</div>\n        </div>\n\n        <div class=\"border-t border-contrast-10 mb-s\"></div>\n\n        ${this.__renderTotals()}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const colors = {\n      authorized: 'bg-success text-success-contrast',\n      completed: 'bg-success text-success-contrast',\n      declined: 'bg-error text-error-contrast',\n      rejected: 'bg-error text-error-contrast',\n    };\n\n    const status = this.nucleon?.data?.status || 'completed';\n    const defaultColor = 'bg-contrast-5 text-contrast';\n    const color = status in colors ? colors[status as keyof typeof colors] : defaultColor;\n\n    return html`\n      <foxy-i18n\n        class=\"flex items-center h-xs px-s text-s font-medium rounded ${color}\"\n        infer=\"\"\n        key=\"transaction_${status}\"\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderPrice() {\n    const data = this.nucleon?.data;\n    const currency = data?.currency_code;\n\n    if (!data) return html`--`;\n\n    const options = { amount: `${data.total_order} ${currency}` };\n    return html`<foxy-i18n infer=\"\" key=\"price\" .options=${options}></foxy-i18n>`;\n  }\n\n  private __renderTotals() {\n    const keys = ['total_item_price', 'total_shipping', 'total_tax'] as const;\n    const data = this.nucleon?.data as Data | undefined;\n    const discounts = data?._embedded?.['fx:discounts'];\n    const discount = discounts?.reduce((p, c) => p + c.amount, 0);\n    const currency = data?.currency_code;\n\n    return html`\n      ${keys.map(key => {\n        const options = { amount: `${data?.[key]} ${currency}` };\n\n        return html`\n          <div class=\"flex justify-between text-m text-secondary\">\n            <foxy-i18n key=${key} infer=\"\"></foxy-i18n>\n            ${data\n              ? html`<foxy-i18n infer=\"\" key=\"price\" .options=${options}></foxy-i18n>`\n              : html`<span>--</span>`}\n          </div>\n        `;\n      })}\n      ${discount\n        ? html`\n            <div class=\"flex justify-between text-m text-secondary\">\n              <foxy-i18n key=\"total_discount\" infer=\"\"></foxy-i18n>\n              <foxy-i18n\n                infer=\"\"\n                key=${discounts?.length === 20 ? 'total_discount_see_below' : 'price'}\n                .options=${{ amount: `${discount} ${currency}` }}\n              >\n              </foxy-i18n>\n            </div>\n          `\n        : ''}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalTransactionSummaryControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionSummaryControl/InternalTransactionSummaryControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Data } from '../../types';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nexport class InternalTransactionSummaryControl extends InternalControl {\n  private readonly __storeLoaderId = 'storeLoader';\n\n  renderControl(): TemplateResult {\n    const data = this.nucleon?.data as Data | undefined;\n    if (!data) return html``;\n\n    const taxes = data?._embedded?.['fx:applied_taxes'] ?? [];\n    const shipments = data._embedded?.['fx:shipments'] ?? [];\n\n    return html`\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <p\n        class=\"grid gap-x-s text-right text-s leading-m border-dashed border rounded border-contrast-20 whitespace-nowrap overflow-auto\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 2px); grid-template-columns: 1fr min-content\"\n      >\n        <span><foxy-i18n key=\"subtotal\" infer=\"\"></foxy-i18n>&colon;</span>\n        <span>${this.__renderPrice(data.total_item_price as unknown as number)}</span>\n\n        ${shipments.length === 0 || (data.total_shipping as unknown as number) === 0\n          ? html`\n              <span><foxy-i18n infer=\"\" key=\"total_shipping\"></foxy-i18n>&colon;</span>\n              <span>${this.__renderPrice(data.total_shipping as unknown as number, true)} </span>\n            `\n          : shipments.map(shipment => {\n              return html`\n                <span>${shipment.shipping_service_description}&colon;</span>\n                <span>${this.__renderPrice(shipment.total_shipping, true)}</span>\n              `;\n            })}\n        ${taxes.length === 0 || (data.total_tax as unknown as number) === 0\n          ? html`\n              <span><foxy-i18n infer=\"\" key=\"total_tax\"></foxy-i18n>&colon;</span>\n              <span>${this.__renderPrice(data.total_tax as unknown as number, true)}</span>\n            `\n          : taxes.map(tax => {\n              return html`\n                <span>${tax.name}&colon;</span>\n                <span>${this.__renderPrice(tax.amount, true)}</span>\n              `;\n            })}\n        ${data?._embedded?.['fx:applied_gift_card_codes']?.map(code => {\n          return html`\n            <span>${code._embedded['fx:gift_card'].name}&colon;</span>\n            <span>${this.__renderPrice(code.balance_adjustment ?? 0, true)}</span>\n          `;\n        })}\n        ${data?._embedded?.['fx:discounts']?.map(discount => {\n          return html`\n            <span data-testclass=\"discount\">${discount.name}&colon;</span>\n            <span>${this.__renderPrice(discount.amount, true)}</span>\n          `;\n        })}\n\n        <span class=\"col-span-2 border-t border-dashed border-contrast-20 my-s\"></span>\n\n        <span class=\"col-span-2 flex gap-s justify-between items-center\">\n          ${this.__renderStatus()}\n          <span class=\"text-xl font-medium leading-xs\">\n            <foxy-i18n infer=\"\" key=\"total\"></foxy-i18n>&colon;\n            ${this.__renderPrice(data.total_order)}\n          </span>\n        </span>\n      </p>\n    `;\n  }\n\n  private get __storeHref() {\n    return this.nucleon?.data?._links['fx:store']?.href as string | undefined;\n  }\n\n  private get __store() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    const selector = `#${this.__storeLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private __renderPrice(amount: number, isAdditive = false) {\n    const currencyDisplay = this.__store?.use_international_currency_symbol ? 'code' : 'symbol';\n    const currencyCode = this.nucleon?.data?.currency_code as string | undefined;\n\n    return html`\n      <foxy-i18n\n        class=${isAdditive && amount !== 0 ? (amount > 0 ? 'text-success' : 'text-error') : ''}\n        infer=\"\"\n        key=\"price\"\n        .options=${{\n          currencyDisplay,\n          signDisplay: isAdditive ? 'exceptZero' : 'auto',\n          amount: `${amount} ${currencyCode}`,\n        }}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus() {\n    const status = this.nucleon?.data?.status || 'completed';\n    let color = '';\n\n    if (['capturing', 'captured', 'approved', 'authorized', 'pending'].includes(status)) {\n      color = 'text-success bg-success-10';\n    } else if (!status || status === 'completed') {\n      color = 'text-success-contrast bg-success';\n    } else if (['problem', 'pending_fraud_review', 'rejected', 'declined'].includes(status)) {\n      color = 'text-error-contrast bg-error';\n    } else {\n      color = 'bg-contrast-5 text-body';\n    }\n\n    return html`\n      <foxy-i18n\n        infer=\"\"\n        class=\"${color} rounded-s py-xs px-s font-medium text-s leading-xs\"\n        key=\"status_${status}\"\n      ></foxy-i18n>\n    `;\n  }\n}\n"]}

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/index.d.ts

@@ -1,4 +1,5 @@
 import '../../../../internal/InternalControl/index';
+import '../../../NucleonElement/index';
 import '../../../I18n/index';
 import { InternalTransactionSummaryControl as Control } from './InternalTransactionSummaryControl';
 export { Control as InternalTransactionSummaryControl };

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/index.js

@@ -1,4 +1,5 @@
 import "../../../../internal/InternalControl/index.js";
+import "../../../NucleonElement/index.js";
 import "../../../I18n/index.js";
 import { InternalTransactionSummaryControl as Control } from "./InternalTransactionSummaryControl.js";
 customElements.define('foxy-internal-transaction-summary-control', Control);

package/dist/elements/public/Transaction/internal/InternalTransactionSummaryControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionSummaryControl/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,gCAA6B;AAE7B,OAAO,EAAE,iCAAiC,IAAI,OAAO,EAAE,+CAA4C;AAEnG,cAAc,CAAC,MAAM,CAAC,2CAA2C,EAAE,OAAO,CAAC,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,iCAAiC,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalControl/index';\nimport '../../../I18n/index';\n\nimport { InternalTransactionSummaryControl as Control } from './InternalTransactionSummaryControl';\n\ncustomElements.define('foxy-internal-transaction-summary-control', Control);\n\nexport { Control as InternalTransactionSummaryControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/Transaction/internal/InternalTransactionSummaryControl/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,0CAAuC;AACvC,gCAA6B;AAE7B,OAAO,EAAE,iCAAiC,IAAI,OAAO,EAAE,+CAA4C;AAEnG,cAAc,CAAC,MAAM,CAAC,2CAA2C,EAAE,OAAO,CAAC,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,iCAAiC,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalControl/index';\nimport '../../../NucleonElement/index';\nimport '../../../I18n/index';\n\nimport { InternalTransactionSummaryControl as Control } from './InternalTransactionSummaryControl';\n\ncustomElements.define('foxy-internal-transaction-summary-control', Control);\n\nexport { Control as InternalTransactionSummaryControl };\n"]}

package/dist/elements/public/Transaction/types.d.ts

@@ -1,7 +1,21 @@
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
-export declare type Data = Resource<Rels.Transaction> & {
+export declare type Data = Omit<Resource<Rels.Transaction, {
+    zoom: ['applied_taxes', 'shipments'];
+}>, 'type'> & {
     _embedded?: {
+        'fx:applied_gift_card_codes': Resource<Rels.GiftCardCodeLogs['child'], {
+            zoom: 'gift_card';
+        }>[];
         'fx:discounts'?: Resource<Rels.Discount>[];
     };
+    _links?: {
+        'fx:subscription'?: {
+            href: string;
+        };
+    };
+    user_agent: string;
+    display_id: string | number;
+    source: string;
+    type: Rels.Transaction['props']['type'] | '';
 };

package/dist/elements/public/Transaction/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/Transaction/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.Transaction> & {\n  _embedded?: { 'fx:discounts'?: Resource<Rels.Discount>[] };\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/Transaction/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\n// TODO: simplify once SDK types are fixed\n\nexport type Data = Omit<\n  Resource<Rels.Transaction, { zoom: ['applied_taxes', 'shipments'] }>,\n  'type'\n> & {\n  _embedded?: {\n    'fx:applied_gift_card_codes': Resource<Rels.GiftCardCodeLogs['child'], { zoom: 'gift_card' }>[];\n    'fx:discounts'?: Resource<Rels.Discount>[];\n  };\n  _links?: {\n    'fx:subscription'?: { href: string };\n  };\n  user_agent: string;\n  display_id: string | number;\n  source: string;\n  type: Rels.Transaction['props']['type'] | '';\n};\n"]}

package/dist/elements/public/TransactionCard/TransactionCard.d.ts

@@ -1,11 +1,9 @@
-import { Data, Templates } from './types';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
-};
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 /**
  * Basic card displaying a transaction.
  *
@@ -24,11 +22,11 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 declare class TransactionCard extends Base<Data> {
     templates: Templates;
     private __currencyDisplay;
-    render(): TemplateResult;
+    renderBody(): TemplateResult;
     protected _sendGet(): Promise<Data>;
-    private __renderTotal;
+    private __renderIdAndTotal;
     private __renderStatus;
-    private __renderDescription;
+    private __renderSummary;
     private __renderCustomer;
 }
 export { TransactionCard };