@zonos/elements 1.3.233 → 1.3.234

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

@@ -0,0 +1,368 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore, cartStoreNextStep, cartStoreOnChange, } from "../../../store/checkout/cart";
+import { invoiceStore } from "../../../store/checkout/invoice";
+import { paypalInitScript, paypalStore, } from "../../../store/checkout/paypal";
+import { stripeStore } from "../../../store/checkout/stripe";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { placeTestOrder } from "../../../utils/api/placeTestOrder";
+import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
+import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { log } from "../../../utils/logging/log";
+import { submitGtag } from "../../../utils/submitGtag";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
+export class ZonosInvoicePayment {
+    constructor() {
+        this.storeUnsubscribeList = [];
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Show error banner when the form is not complete, and user clicks on `Submit` button
+         * @default false
+         */
+        this.showErrorBanner = false;
+        /**
+         * Show payment error banner when the payment is failed
+         */
+        this.hasStripePaymentError = false;
+        /**
+         * Error message when the staging order creation is failed
+         */
+        this.stagingOrderCreateErrorMessage = '';
+        /**
+         * Internal state to handle continue loading
+         */
+        this.internalContinueLoading = this.continueLoading;
+        this.handleValidate = () => {
+            var _a;
+            return !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async ({ currencyCode, }) => {
+            var _a, _b;
+            if (!this.handleValidate()) {
+                // Attempt to get the value of the billing address element to validate the form
+                void ((_a = stripeStore.stripeBillingAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
+                this.showErrorBanner = true;
+                // Attempt to submit the form so the missing input error will be shown in Stripe
+                void ((_b = stripeStore.stripeElements) === null || _b === void 0 ? void 0 : _b.submit());
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.ele.querySelector('zonos-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                    });
+                }, 10);
+                return;
+            }
+            stripeStore.checkoutSettlementCurrency = currencyCode;
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-payment-info');
+            this.continueClicked.emit();
+        };
+        this.copyCardToClipboard = async (cardNumber) => {
+            try {
+                await navigator.clipboard.writeText(cardNumber);
+            }
+            catch (_a) {
+                // Copy happens in the iframe and it's not allowed to copy to the clipboard
+                const hiddenTextarea = document.createElement('textarea');
+                hiddenTextarea.style.position = 'fixed';
+                hiddenTextarea.style.left = '-1000px';
+                hiddenTextarea.style.top = '-1000px';
+                hiddenTextarea.style.width = '1px';
+                hiddenTextarea.style.height = '1px';
+                hiddenTextarea.value = cardNumber;
+                hiddenTextarea.id = 'zonos-copy-card-number';
+                document.body.appendChild(hiddenTextarea);
+                hiddenTextarea.select();
+                // Have to use deprecated method execCommand because it's the only way to copy to the clipboard in the iframe
+                // eslint-disable-next-line deprecation/deprecation
+                document.execCommand('copy');
+                document.body.removeChild(hiddenTextarea);
+            }
+            window.Zonos.showNotification({
+                message: translate('Card number copied to clipboard'),
+                timeout: 4000,
+                type: 'success',
+            });
+        };
+        this.placeTestOrder = async () => {
+            this.internalContinueLoading = true;
+            const { errors } = await placeTestOrder();
+            if (errors.length) {
+                this.stagingOrderCreateErrorMessage =
+                    errors[0] || 'Failed to create staging order. Please try again.';
+                this.internalContinueLoading = false;
+                return;
+            }
+            this.internalContinueLoading = false;
+            // continue to the next step
+            cartStoreNextStep();
+        };
+    }
+    continueLoadingWatcher() {
+        this.internalContinueLoading = this.continueLoading;
+    }
+    stripePaymentErrorWatcher() {
+        if (this.hasStripePaymentError) {
+            setTimeout(() => {
+                var _a;
+                // scroll to the top of the page when the payment error is shown
+                (_a = this.ele.querySelector('zonos-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    behavior: 'smooth',
+                });
+            }, 50);
+        }
+    }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            cartStoreOnChange('currency', () => {
+                // start init paypal with the presentment currency when landed cost is fetched
+                void paypalInitScript({
+                    currency: cartStore.currency,
+                });
+            }),
+        ];
+        // start init paypal with the presentment currency when landed cost is fetched
+        void paypalInitScript({
+            currency: cartStore.currency,
+        });
+    }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        var _a;
+        this.hasStripePaymentError = stripeStore.hasPaymentError;
+        if (!stripeStore.stripeElements) {
+            return null;
+        }
+        if (!stripeStore.clientSecret) {
+            return null;
+        }
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        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 renderPayment = () => {
+            if (isStagingMode) {
+                // If in mobile, use the theme from the store since the UI is solely by theme
+                const theme = zonosStore.appearance.theme;
+                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
+                        void this.placeTestOrder();
+                    }, size: "lg",
+                    // use primary type when on mobile mode
+                    variant: this.submitBtnType }, translate('Place test order')))));
+            }
+            if (stripeStore.isFetchingSession || invoiceStore.isFetchingPayorInfo) {
+                return null;
+            }
+            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 &&
+                    stripeStore.checkoutSettlementCurrency === 'USD', loading: this.continueLoading &&
+                    stripeStore.checkoutSettlementCurrency !== 'USD', onClick: async () => {
+                    if (!cartStore.checkoutSession) {
+                        log('Checkout session is not found');
+                        return;
+                    }
+                    await this.continueClickHandler({
+                        currencyCode: cartStore.checkoutSession.subtotals
+                            .presentmentCurrencyCode,
+                    });
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: invoiceStore.amountTotalDue || 0,
+                    isForeign: true,
+                }),
+            })), 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 } }) => {
+                    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)))));
+        };
+        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())));
+    }
+    static get is() { return "zonos-invoice-payment"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-payment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "submitBtnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosButtonElement['variant']",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "HTMLZonosButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkout is in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "submit-btn-type",
+                "reflect": false
+            },
+            "continueLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the continue button is loading"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "continue-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submit button main color"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "submit-btn-color",
+                "reflect": false
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color to override primary color from appearance primary color in setting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-primary-color",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showErrorBanner": {},
+            "hasStripePaymentError": {},
+            "stagingOrderCreateErrorMessage": {},
+            "internalContinueLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "continueClicked",
+                "name": "continueClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the continue button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionFailed",
+                "name": "paypalSessionFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session failed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionDone",
+                "name": "paypalSessionDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is done"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "ele"; }
+    static get watchers() {
+        return [{
+                "propName": "continueLoading",
+                "methodName": "continueLoadingWatcher"
+            }, {
+                "propName": "hasStripePaymentError",
+                "methodName": "stripePaymentErrorWatcher"
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-review/zonos-invoice-review.css

@@ -0,0 +1,71 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  position: sticky;
+  top: 0;
+  background-color: var(--zonos-elements-gray-0);
+  z-index: 1;
+}
+:host .zonos--total-pay {
+  margin: 8px 0 24px;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 48px;
+}
+:host .zonos--total-pay zonos-text {
+  flex-shrink: 0;
+}
+:host .zonos--total-pay::after {
+  content: "";
+  position: relative;
+  height: 1px;
+  width: 100%;
+  background: var(--zonos-elements-gray-200);
+}
+
+:host(.mobile),
+:host(.tablet) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0;
+  background-color: transparent;
+  position: relative;
+}
+:host(.mobile) .zonos--total-pay,
+:host(.tablet) .zonos--total-pay {
+  margin: 0;
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-review/zonos-invoice-review.js

@@ -0,0 +1,151 @@
+import { h, Host } from "@stencil/core";
+import { invoiceStore } from "../../../store/checkout/invoice";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { isInvoiceMobile, isInvoiceTablet, } from "../../../utils/checkout/isInvoiceMobileTablet";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
+import { renderFallback } from "../../../utils/renderFallback";
+export class ZonosInvoiceReview {
+    constructor() {
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
+        this.mobile = false;
+        /**
+         * Whether or not the component is being rendered with tablet styles
+         */
+        this.tablet = false;
+        /**
+         * Whether or not to show the collapse icon
+         * This is controled from the collapsed state of the zonos-collapse component
+         * to show the collapse icon
+         */
+        this.collapsed = false;
+        this.isMobile = false;
+        this.isTablet = false;
+        this.isLoading = true;
+    }
+    handleWindowResize() {
+        this.isMobile = isInvoiceMobile(this.mobile);
+        this.isTablet = isInvoiceTablet(this.tablet);
+    }
+    componentWillLoad() {
+        this.handleWindowResize();
+        // Wait for the data to load
+        setTimeout(() => {
+            this.isLoading = false;
+        }, 1000);
+    }
+    render() {
+        const titleTextColor = this.isMobile ? 'gray-1000' : 'gray-800';
+        return (h(Host, { key: '60da23c47f39a94478f1eb83e003b788aab3b98c', class: classes([
+                'zonos--invoice-review zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]) }, h("div", { key: '70bbb1973ec1c7197da666ba30be6dc6a20bd386', class: "zonos--title" }, h("zonos-text", { key: '35ffffa411ccde7c702b5d5ac3f11d7a8d62916f', textColor: titleTextColor, type: 'semiBoldLabel' }, translate('Pay [organizationName]', {
+            organizationName: zonosStore.organizationName,
+        }))), h("div", { key: 'c965e47314d1c3178b1dd2e54e835c0b91966a81', class: "zonos--total-pay" }, renderFallback({
+            content: (h("zonos-text", { type: 'secondaryPageHeader' }, renderCheckoutCurrency({
+                amount: invoiceStore.amountTotalDue || 0,
+                isForeign: true,
+            }))),
+            isLoading: invoiceStore.isFetchingPayorInfo,
+            skeletonHeight: '36px',
+            skeletonWidth: '150px',
+        }))));
+    }
+    static get is() { return "zonos-invoice-review"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-review.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-review.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component is being rendered with mobile styles"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tablet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component is being rendered with tablet styles"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tablet",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the collapse icon\nThis is controled from the collapsed state of the zonos-collapse component\nto show the collapse icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "isTablet": {},
+            "isLoading": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-subtotal/zonos-invoice-subtotal.css

@@ -0,0 +1,83 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  position: sticky;
+  bottom: 60px;
+}
+:host .zonos--invoice-table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--invoice-table .zonos--column {
+  padding: 8px 8px;
+  vertical-align: top;
+}
+:host .zonos--invoice-table .zonos--column:last-child {
+  text-align: right;
+  padding-right: 0;
+}
+:host .zonos--invoice-table .zonos--column:first-child {
+  width: 60px;
+  max-width: 100px;
+}
+:host .zonos--title-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:host .zonos--invoice-subtotal-price {
+  text-align: right;
+}
+:host .zonos--invoice-subtotal-price zonos-text {
+  white-space: nowrap;
+}
+:host .zonos--invoice-total .zonos--column {
+  padding: 16px 0;
+}
+:host .zonos--invoice-total .zonos--invoice-subtotal-title,
+:host .zonos--invoice-total .zonos--invoice-subtotal-price {
+  border-top: 1px solid var(--zonos-elements-gray-200);
+}
+:host .zonos--invoice-subtotal-price zonos-text,
+:host .zonos--invoice-pay-total zonos-text {
+  white-space: nowrap;
+}
+
+:host(.mobile) {
+  position: relative;
+  bottom: 0;
+}