@zonos/elements 1.3.248 → 1.3.250

package/dist/cjs/zonos-store-credit.cjs.entry.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b1f95d96.js');
+const cart = require('./cart-fcd1359c.js');
+const localization = require('./localization-523b793a.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-94b6e51d.js');
+const getBorderRadius = require('./getBorderRadius-27a74844.js');
+require('./VarianceTest-bec00ea8.js');
+require('./handleFetch-954f30e1.js');
+require('./isDarkColor-a68abf7a.js');
+
+const StoreCreditIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path fill="currentColor" fill-rule="evenodd" d="M4 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H4Zm16 2H4a1 1 0 0 0-1 1v1h18V8a1 1 0 0 0-1-1ZM2 11h20v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3Zm6 4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H9a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+</svg>
+`;
+
+const zonosStoreCreditCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:block;margin-bottom:var(--zonos-elements-font-size-xl)}:host .zonos--store-credit-container{background:-webkit-gradient(linear, left top, left bottom, from(var(--zonos-elements-gray-0)), to(var(--zonos-elements-gray-50)));background:linear-gradient(180deg, var(--zonos-elements-gray-0) 0%, var(--zonos-elements-gray-50) 100%);border:1px solid var(--zonos-elements-gray-200);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-8));-webkit-box-shadow:var(--zonos-elements-v3-shadow-base);box-shadow:var(--zonos-elements-v3-shadow-base);overflow:hidden;padding:0;position:relative}:host .zonos--store-credit-container::before{background:var(--zonos--primary-color, var(--zonos-elements-gray-400));content:\"\";height:3px;left:0;position:absolute;right:0;top:0}:host .zonos--store-credit-header{padding:var(--zonos-elements-radius-12) var(--zonos-elements-font-size-l) 0}:host .zonos--store-credit-title-row{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .zonos--store-credit-title-left{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--zonos-elements-font-size-s)}:host .zonos--store-credit-title-icon{-ms-flex-align:center;align-items:center;background:color-mix(in srgb, var(--zonos--primary-color, var(--zonos-elements-gray-400)) 14%, transparent);border-radius:calc(var(--zonos--border-radius, var(--zonos-elements-radius-8)) * 0.75);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:22px;-ms-flex-pack:center;justify-content:center;width:22px}:host .zonos--store-credit-balance-badge{background:color-mix(in srgb, var(--zonos--primary-color, var(--zonos-elements-gray-400)) 8%, var(--zonos-elements-gray-50));border:1px solid color-mix(in srgb, var(--zonos--primary-color, var(--zonos-elements-gray-400)) 22%, var(--zonos-elements-gray-200));border-radius:calc(var(--zonos--border-radius, var(--zonos-elements-radius-8)) * 0.65);padding:2px var(--zonos-elements-font-size-s)}:host .zonos--store-credit-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--zonos-elements-font-size-s);padding:var(--zonos-elements-font-size-s) var(--zonos-elements-font-size-l) var(--zonos-elements-radius-12)}:host .zonos--store-credit-checkbox{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}:host .zonos--store-credit-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--zonos-elements-font-size-s)}:host .zonos--store-credit-toggle-row{display:-ms-flexbox;display:flex}:host .zonos--store-credit-custom-amount{max-width:240px}:host .zonos--store-credit-custom-amount-row{-ms-flex-align:end;align-items:flex-end;display:-ms-flexbox;display:flex;gap:var(--zonos-elements-font-size-s)}:host .zonos--store-credit-custom-amount-row zonos-input{-ms-flex:1;flex:1}:host .zonos--store-credit-error{margin-top:2px}:host .zonos--store-credit-summary{background:color-mix(in srgb, var(--zonos--primary-color, var(--zonos-elements-gray-400)) 6%, var(--zonos-elements-gray-50));border-radius:calc(var(--zonos--border-radius, var(--zonos-elements-radius-8)) * 0.65);padding:var(--zonos-elements-radius-10) var(--zonos-elements-font-size-s)}:host .zonos--store-credit-empty{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--zonos-elements-font-size-s);padding:var(--zonos-elements-font-size-xl) var(--zonos-elements-font-size-l) 22px;text-align:center}:host .zonos--store-credit-empty-icon{-ms-flex-align:center;align-items:center;background:var(--zonos-elements-gray-100);border-radius:50%;display:-ms-flexbox;display:flex;height:52px;-ms-flex-pack:center;justify-content:center;opacity:0.95;width:52px}";
+const ZonosStoreCreditStyle0 = zonosStoreCreditCss;
+
+const AMOUNT_MODE_FULL = 'full';
+const AMOUNT_MODE_CUSTOM = 'custom';
+const ZonosStoreCredit = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether the component is enabled
+         */
+        this.enabled = true;
+        /**
+         * Local state for custom amount input
+         */
+        this.customAmountInput = '';
+        this.handleUseStoreCreditChange = (checked) => {
+            cart.storeCreditStoreSetEnabled(checked);
+            if (checked) {
+                // Enable store credit usage with full balance by default
+                cart.storeCreditStoreSetUseFullBalance(true);
+            }
+            void cart.cartStoreUpdateStoreCredit();
+        };
+        this.handleAmountModeChange = (mode) => {
+            const isFullBalance = mode === AMOUNT_MODE_FULL;
+            cart.storeCreditStoreSetUseFullBalance(isFullBalance);
+            if (!isFullBalance) {
+                this.customAmountInput = '';
+            }
+            void cart.cartStoreUpdateStoreCredit();
+        };
+        this.handleCustomAmountChange = (value) => {
+            this.customAmountInput = value;
+            // Clear error when user types
+            cart.storeCreditStore.error = null;
+        };
+        this.handleApplyCustomAmount = () => {
+            const amount = parseFloat(this.customAmountInput);
+            if (!isNaN(amount) && amount > 0) {
+                cart.storeCreditStoreSetAmount(amount);
+            }
+            else {
+                cart.storeCreditStoreSetAmount(null);
+            }
+            if (!cart.storeCreditStore.error) {
+                void cart.cartStoreUpdateStoreCredit();
+            }
+        };
+    }
+    async componentWillLoad() {
+        await cart.storeCreditStoreRefreshBalance();
+    }
+    render() {
+        if (!this.enabled) {
+            return null;
+        }
+        const { colorPrimary } = zonosStore.zonosStore.appearance;
+        const borderRadius = getBorderRadius.getBorderRadius({});
+        const availableBalance = cart.storeCreditStore.availableBalance;
+        const hasBalance = availableBalance !== null && availableBalance > 0;
+        const isUsingStoreCredit = cart.storeCreditStore.isEnabled;
+        const useFullBalance = cart.storeCreditStore.useFullBalance;
+        const error = cart.storeCreditStore.error;
+        const effectiveAmount = cart.storeCreditStoreGetEffectiveAmount();
+        const formattedBalance = renderCheckoutCurrency.renderCheckoutCurrency({
+            amount: availableBalance !== null && availableBalance !== void 0 ? availableBalance : 0,
+            isForeign: true,
+        });
+        return (index.h(index.Host, { class: "zonos--elements zonos--store-credit", style: {
+                '--zonos--border-radius': borderRadius,
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+                '--zonos--primary-color': colorPrimary,
+            } }, index.h("div", { class: "zonos--store-credit-container" }, index.h("div", { class: "zonos--store-credit-header" }, index.h("div", { class: "zonos--store-credit-title-row" }, index.h("div", { class: "zonos--store-credit-title-left" }, index.h("div", { "aria-hidden": "true", class: "zonos--store-credit-title-icon" }, index.h("zonos-icon", { content: StoreCreditIcon, iconColor: 'gray-500', size: 22 })), index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Store credit'))), hasBalance && (index.h("div", { class: "zonos--store-credit-balance-badge" }, index.h("zonos-text", { textColor: "gray-600", type: "caption" }, formattedBalance))))), index.h(index.Fragment, null, hasBalance ? (index.h("div", { class: "zonos--store-credit-content" }, index.h("div", { class: "zonos--store-credit-checkbox" }, index.h("zonos-checkbox", { isChecked: isUsingStoreCredit, label: localization.translate('Use store credit'), onCheckboxSelected: e => this.handleUseStoreCreditChange(e.detail), size: 16 })), isUsingStoreCredit && (index.h("div", { class: "zonos--store-credit-options" }, index.h("div", { class: "zonos--store-credit-toggle-row" }, index.h("zonos-toggle", { onToggleChanged: e => this.handleAmountModeChange(e.detail), options: [
+                {
+                    label: localization.translate('Apply full balance'),
+                    value: AMOUNT_MODE_FULL,
+                },
+                {
+                    label: localization.translate('Enter amount'),
+                    value: AMOUNT_MODE_CUSTOM,
+                },
+            ], value: useFullBalance ? AMOUNT_MODE_FULL : AMOUNT_MODE_CUSTOM })), !useFullBalance && (index.h("div", { class: "zonos--store-credit-custom-amount" }, index.h("div", { class: "zonos--store-credit-custom-amount-row" }, index.h("zonos-input", { inputLabel: localization.translate('Enter amount'), inputValue: this.customAmountInput, isError: !!error, onInputChange: e => this.handleCustomAmountChange(e.detail) }), index.h("zonos-button", { onClick: this.handleApplyCustomAmount, size: "sm", variant: "primary" }, localization.translate('Apply'))))), error && (index.h("div", { class: "zonos--store-credit-error" }, index.h("zonos-text", { textColor: "red-600", type: "caption" }, error))), index.h("div", { class: "zonos--store-credit-summary" }, index.h("zonos-text", { textColor: "gray-800", type: "semiBoldLabel" }, localization.translate('Amount to apply: [amount]', {
+            amount: renderCheckoutCurrency.renderCheckoutCurrency({
+                amount: effectiveAmount,
+                isForeign: true,
+            }),
+        }))))))) : (index.h("div", { class: "zonos--store-credit-empty" }, index.h("div", { "aria-hidden": "true", class: "zonos--store-credit-empty-icon" }, index.h("zonos-icon", { content: StoreCreditIcon, iconColor: "gray-500", size: 28 })), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, localization.translate('No store credit available'))))))));
+    }
+    get el() { return index.getElement(this); }
+};
+ZonosStoreCredit.style = ZonosStoreCreditStyle0;
+
+exports.zonos_store_credit = ZonosStoreCredit;

package/dist/cjs/zonos-stripe-input.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
 const helpers = require('./helpers-5bdbb68c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-const isDarkColor = require('./isDarkColor-878e600e.js');
+const getBorderRadius = require('./getBorderRadius-27a74844.js');
+const isDarkColor = require('./isDarkColor-a68abf7a.js');
 require('./VarianceTest-bec00ea8.js');
 
 const zonosStripeInputCss = ".sc-zonos-stripe-input-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-stripe-input-h *.sc-zonos-stripe-input{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-stripe-input-h img.sc-zonos-stripe-input{max-width:100%}.sc-zonos-stripe-input-h dl.sc-zonos-stripe-input,.sc-zonos-stripe-input-h dd.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h1.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h2.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h3.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h4.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h5.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h6.sc-zonos-stripe-input,.sc-zonos-stripe-input-h hr.sc-zonos-stripe-input,.sc-zonos-stripe-input-h figure.sc-zonos-stripe-input,.sc-zonos-stripe-input-h p.sc-zonos-stripe-input,.sc-zonos-stripe-input-h pre.sc-zonos-stripe-input{margin:0}.sc-zonos-stripe-input-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-stripe-input-h{--zonos--background-color:#f1f1f1;--zonos--local-glowing-color:0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 0 0 1px var(--zonos--primary-color);--zonos--border:1px solid #e8e8e8}.dark.sc-zonos-stripe-input-h{color-scheme:dark;--zonos--background-color:#30313d;--zonos--local-glowing-color:0px 2px 4px rgba(0, 0, 0, 0.5),\n    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 1px 1px 0 rgba(255, 255, 255, 0.12);--zonos--border:1px solid var(--zonos--primary-color)}.sc-zonos-stripe-input-h{margin:1px}.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;background:var(--zonos--background-color);border-radius:var(--zonos--border-radius);border:var(--zonos--border);outline-offset:0;outline-width:2px;height:calc(var(--zonos-elements-size-xl) - 2px)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--zonos--border-radius);background:var(--zonos--background-color);border:var(--zonos--border);-ms-flex-order:2;order:2;font-weight:400;font-size:var(--zonos--font-size);color:var(--zonos-elements-text-color);height:auto}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected+label.sc-zonos-stripe-input+div.sc-zonos-stripe-input{background-color:#e8f0fe}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.sc-zonos-stripe-input{padding:24px 4px 2px 16px}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input{padding-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{margin-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus{outline:none;border:var(--zonos--border)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color));box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color))}.sc-zonos-stripe-input-h .zonos--floated-input.has-error.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:0 0 0 2px #df1b41;box-shadow:0 0 0 2px #df1b41}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-webkit-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-moz-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input:-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-webkit-autofill,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{color:var(--zonos-elements-gray-800);position:absolute;font-size:16px;line-height:16px;display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - 8px);z-index:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--zonos--border-radius)}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input{pointer-events:inherit}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input::after{cursor:not-allowed;z-index:1}.dark.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{background:#30313d}";

package/dist/cjs/zonos-text.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const styles = require('./styles-d1e64fb9.js');

package/dist/cjs/zonos-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
+const index = require('./index-b1f95d96.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69fa8852.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 

package/dist/cjs/{zonosStore-37a4b4f4.js → zonosStore-f5a61112.js}

@@ -1,15 +1,16 @@
 'use strict';
 
-const index = require('./index-69fa8852.js');
+const index = require('./index-b1f95d96.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 
 const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
     }
-    else if (!items.includes(value)) {
-        items.push(value);
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
     }
 };
 const debounce = (fn, ms) => {
@@ -37,33 +38,54 @@ const debounce = (fn, ms) => {
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
     }
 }, 2_000);
+const core = index.StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof index.getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = index.getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
         },
         set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
             cleanupElements(elmsToUpdate);
         },
     };
@@ -71,18 +93,26 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
         set: [],
         reset: [],
     };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -99,12 +129,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -124,7 +156,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -132,17 +168,24 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         };
     };
     const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
+        const setHandler = (key, newValue) => {
             if (key === propName) {
                 cb(newValue);
             }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        };
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
         return () => {
             unSet();
             unReset();
+            changeListeners.delete(cb);
         };
     };
     const use = (...subscriptions) => {
@@ -167,6 +210,47 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
     };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -177,6 +261,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {

package/dist/collection/collection-manifest.json

@@ -15,6 +15,7 @@
     "components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.js",
     "components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js",
     "components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/zonos-empty-state-payment.js",
+    "components/checkout/zonos-checkout/zonos-checkout-payment/zonos-store-credit/zonos-store-credit.js",
     "components/checkout/zonos-checkout/zonos-currency-toggle/zonos-currency-toggle.js",
     "components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js",
     "components/checkout/zonos-checkout/zonos-review/zonos-review.js",

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.js

@@ -155,6 +155,9 @@ export class ZonosCartSubtotal {
             } }), h("zonos-button", { loading: this.loading, onClick: () => applyPromoCode(), variant: "primary" }, translate('Apply'))))))), !!cartStore.adjustmentTotal && (h("tr", { class: "zonos--row zonos--cart-discount" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Discounts')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency({
             amount: cartStore.adjustmentTotal,
             isForeign: true,
+        }))))), !!cartStore.storeCredit && (h("tr", { class: "zonos--row zonos--cart-store-credit" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Store credit'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { textColor: "green-600", type: "semiBoldLabel" }, "-", renderCheckoutCurrency({
+            amount: cartStore.storeCredit,
+            isForeign: true,
         }))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column zonos--cart-total-price" }, h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency({
             amount: total,
             isForeign: true,

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
+import { storeCreditStore, storeCreditStoreReset, } from "../../../store/checkout/storeCredit";
 import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
@@ -431,6 +432,47 @@ export class ZonosCheckoutFinish {
             paypalStoreReset();
             storageStore.checkoutSessionId = null;
         };
+        this.checkStoreCreditOrderStatus = async () => {
+            // show success message right away when order id is already created
+            this.isLoading = false;
+            if (storeCreditStore.orderIdCreated) {
+                const checkoutSessionId = storageStore.checkoutSessionId;
+                submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: checkoutSessionId || '',
+                    }),
+                });
+                submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: checkoutSessionId || '',
+                    }),
+                });
+                void trackConversionEvent({
+                    checkoutSessionId,
+                    eventName: 'checkout_orderCompleted',
+                });
+                this.notificationType = 'success';
+                this.notificationTitle = translate("You're all set!");
+                this.notificationMessages =
+                    stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // override title if notification type is success
+                this.useOverrideSuccessNotification();
+                const successEvent = createCustomEvent('zonos-checkout-success', {
+                    message: 'Zonos Checkout successfully processed order',
+                });
+                document.dispatchEvent(successEvent);
+                // wait this to finish before resetting store and checkout session id
+                await this.handleSuccessBehavior();
+            }
+            // reset stores when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            storeCreditStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
         this.closeClickHandler = () => {
             this.closeClick.emit();
         };
@@ -463,6 +505,9 @@ export class ZonosCheckoutFinish {
         if (cartStore.isStagingMode) {
             void this.checkStagingOrderStatus();
         }
+        else if (storeCreditStore.orderIdCreated) {
+            void this.checkStoreCreditOrderStatus();
+        }
         else if (paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
@@ -472,11 +517,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'c74f250bac797f8c000bac4892bc5ab56c0867bb', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
+            } }, !this.isLoading && (h("div", { key: '5ee705381b0246f5035f512c9d19beba6dc33d4f', class: "zonos--finish-details" }, h("div", { key: '1d1a54d8f73535aaada32601c5e771c9fd381104', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '68c898ee87166d08bd52702ae8f9bfe51c393076', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '98b6eaff782fe34a8dbd258e4c7d0c81c3577bcc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'ccc5e7973b2e962e22ac56dcad6e33b048621036',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -488,9 +533,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: 'cd30bc010f2a3e935d9b80e56389581a9150b021', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '458809f316ac5129efbc7fe90d1549c042d477af', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'dcf0c595cb119a731c34c1aff09960db8a1fb251', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '76d55870370b4906970b3e2109617ba2230eee7e', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { paypalStore } from "../../../store/checkout/paypal";
+import { storeCreditStore, storeCreditStoreCoversFullAmount, } from "../../../store/checkout/storeCredit";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
@@ -52,7 +53,8 @@ export class ZonosCheckoutPayment {
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
             var _a, _b;
-            if (!this.handleValidate()) {
+            // Skip Stripe payment validation when store credit covers the full order
+            if (!storeCreditStoreCoversFullAmount() && !this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
                 void ((_a = stripeStore.stripeElements) === null || _a === void 0 ? void 0 : _a.submit());
@@ -143,6 +145,7 @@ export class ZonosCheckoutPayment {
         const isTestMode = getIsTestMode();
         const isStagingMode = cartStore.isStagingMode || getIsStagingMode();
         const isPaypalTabSelected = ((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        const storeCreditCoversFullOrder = storeCreditStoreCoversFullAmount();
         const renderPayment = () => {
             if (isStagingMode) {
                 const { colorPrimary } = zonosStore.appearance;
@@ -158,7 +161,9 @@ export class ZonosCheckoutPayment {
                     variant: this.submitBtnType }, translate('Place test order')))));
             }
             return (h(Fragment, null, this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
-                translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h(Fragment, null, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
+                translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), cartStore.customerAuthenticationToken &&
+                storeCreditStore.availableBalance != null &&
+                storeCreditStore.availableBalance > 0 && (h("zonos-store-credit", null)), storeCreditCoversFullOrder ? (h("zonos-banner", { intent: "info" }, translate('Store credit covers your full order'))) : (h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, (!isPaypalTabSelected || storeCreditCoversFullOrder) && (h(Fragment, null, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency === 'USD', loading: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency !== 'USD', onClick: async () => {
                     if (!cartStore.checkoutSession) {
@@ -171,22 +176,25 @@ export class ZonosCheckoutPayment {
                     });
                 }, size: "lg",
                 // use primary type when on mobile mode
-                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
-                orderTotal: renderCheckoutCurrency({
-                    amount: cartStore.total,
-                    isForeign: true,
-                }),
-            })), stripeStore.shouldRenderPayInUsdButton && (h("zonos-button", { class: "zonos--pay-in-base-currency-btn", isDisabled: this.continueLoading &&
+                variant: this.submitBtnType }, storeCreditCoversFullOrder
+                ? translate('Place order')
+                : translate('Pay [orderTotal]', {
+                    orderTotal: renderCheckoutCurrency({
+                        amount: cartStore.total,
+                        isForeign: true,
+                    }),
+                })), !storeCreditCoversFullOrder &&
+                stripeStore.shouldRenderPayInUsdButton && (h("zonos-button", { class: "zonos--pay-in-base-currency-btn", isDisabled: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency !== 'USD', loading: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency === 'USD', onClick: async () => {
                     await this.continueClickHandler({
                         currencyCode: 'USD',
                     });
-                }, size: "lg", variant: "subtle" }, translate('Click to pay in USD'))))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                }, size: "lg", variant: "subtle" }, translate('Click to pay in USD'))))), !storeCreditCoversFullOrder && (h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                     this.paypalSessionDone.emit(orderId);
                 }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
                     display: isPaypalTabSelected ? 'block' : 'none',
-                } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
+                } }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
         };
         return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
     }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-store-credit/assets/StoreCreditIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path fill="currentColor" fill-rule="evenodd" d="M4 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H4Zm16 2H4a1 1 0 0 0-1 1v1h18V8a1 1 0 0 0-1-1ZM2 11h20v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3Zm6 4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H9a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+</svg>