@zonos/elements 1.2.2 → 1.2.4-alpha.1

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

@@ -9,171 +9,171 @@ import RemoveIcon from "./assets/RemoveIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import SuccessIcon from "./assets/SuccessIcon.svg";
 export class ZonosCheckoutFinish {
-  constructor() {
-    this.checkPaymentStatus = async () => {
-      this.isLoading = true;
-      const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
-      if (clientSecret || this.storybookForceStatus) {
-        const { error, messages } = await stripeStoreRetrievePayment({
-          clientSecret,
-          storybookForceStatus: this.storybookForceStatus,
-        });
-        this.notificationType = error ? 'error' : 'success';
-        this.notificationMessages = messages || [];
-        this.notificationTitle = error
-          ? translate('Payment failed')
-          : translate("You're all set!");
-        if (error) {
-          submitGtag('zonos-checkout-payment-fail');
-        }
-        else {
-          submitGtag('zonos-checkout-success');
-          const successEvent = new CustomEvent('zonos-checkout-success', {
-            detail: {
-              message: 'Zonos Checkout successfully processed order',
-            },
-          });
-          document.dispatchEvent(successEvent);
+    constructor() {
+        this.checkPaymentStatus = async () => {
+            this.isLoading = true;
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages } = await stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                this.notificationType = error ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = error
+                    ? translate('Payment failed')
+                    : translate("You're all set!");
+                if (error) {
+                    submitGtag('zonos-checkout-payment-fail');
+                }
+                else {
+                    submitGtag('zonos-checkout-success');
+                    const successEvent = new CustomEvent('zonos-checkout-success', {
+                        detail: {
+                            message: 'Zonos Checkout successfully processed order',
+                        },
+                    });
+                    document.dispatchEvent(successEvent);
+                }
+            }
+            stripeStoreReset();
+            this.isLoading = false;
+        };
+        this.closeClickHandler = () => {
+            this.closeClick.emit();
+        };
+        this.borderRadius = 'ROUNDED';
+        this.storybookForceStatus = undefined;
+        this.overrideNotification = undefined;
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+    }
+    componentDidLoad() {
+        if (this.overrideNotification) {
+            // just show the notification and don't check any of the payment status
+            this.notificationType = this.overrideNotification.type;
+            this.notificationTitle = this.overrideNotification.title;
+            this.notificationMessages = this.overrideNotification.messages;
+            this.isLoading = false;
+            return;
         }
-      }
-      stripeStoreReset();
-      this.isLoading = false;
-    };
-    this.closeClickHandler = () => {
-      this.closeClick.emit();
-    };
-    this.borderRadius = 'ROUNDED';
-    this.storybookForceStatus = undefined;
-    this.overrideNotification = undefined;
-    this.isLoading = true;
-    this.notificationType = 'success';
-    this.notificationTitle = '';
-    this.notificationMessages = [];
-  }
-  componentDidLoad() {
-    if (this.overrideNotification) {
-      // just show the notification and don't check any of the payment status
-      this.notificationType = this.overrideNotification.type;
-      this.notificationTitle = this.overrideNotification.title;
-      this.notificationMessages = this.overrideNotification.messages;
-      this.isLoading = false;
-      return;
+        void this.checkPaymentStatus();
     }
-    void this.checkPaymentStatus();
-  }
-  render() {
-    return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
-        '--border-radius': getBorderRadius(this.borderRadius),
-      } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
-  }
-  static get is() { return "zonos-checkout-finish"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-checkout-finish.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-checkout-finish.css"]
-    };
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() {
-    return {
-      "borderRadius": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ElementsUiStyle",
-          "resolved": "\"ROUNDED\" | \"SHARP\"",
-          "references": {
-            "ElementsUiStyle": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::ElementsUiStyle"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The border radius style of the dialog"
-        },
-        "attribute": "border-radius",
-        "reflect": false,
-        "defaultValue": "'ROUNDED'"
-      },
-      "storybookForceStatus": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PaymentIntent['status']",
-          "resolved": "\"canceled\" | \"processing\" | \"requires_action\" | \"requires_capture\" | \"requires_confirmation\" | \"requires_payment_method\" | \"succeeded\" | undefined",
-          "references": {
-            "PaymentIntent": {
-              "location": "import",
-              "path": "@stripe/stripe-js",
-              "id": ""
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Force status to test the UI for storybook"
-        },
-        "attribute": "storybook-force-status",
-        "reflect": false
-      },
-      "overrideNotification": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "OverrideNotification",
-          "resolved": "undefined | { messages: string[]; title: string; type: \"error\" | \"success\"; }",
-          "references": {
-            "OverrideNotification": {
-              "location": "global",
-              "id": "global::OverrideNotification"
+    render() {
+        return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius(this.borderRadius),
+            } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
+    }
+    static get is() { return "zonos-checkout-finish"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkout-finish.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkout-finish.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\"",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The border radius style of the dialog"
+                },
+                "attribute": "border-radius",
+                "reflect": false,
+                "defaultValue": "'ROUNDED'"
+            },
+            "storybookForceStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentIntent['status']",
+                    "resolved": "\"canceled\" | \"processing\" | \"requires_action\" | \"requires_capture\" | \"requires_confirmation\" | \"requires_payment_method\" | \"succeeded\" | undefined",
+                    "references": {
+                        "PaymentIntent": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Force status to test the UI for storybook"
+                },
+                "attribute": "storybook-force-status",
+                "reflect": false
+            },
+            "overrideNotification": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverrideNotification",
+                    "resolved": "undefined | { messages: string[]; title: string; type: \"error\" | \"success\"; }",
+                    "references": {
+                        "OverrideNotification": {
+                            "location": "global",
+                            "id": "global::OverrideNotification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the notification message and title, bypass checking stripe payment status"
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Override the notification message and title, bypass checking stripe payment status"
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {},
-      "notificationType": {},
-      "notificationTitle": {},
-      "notificationMessages": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "closeClick",
-        "name": "closeClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event to emit when the continue button is clicked"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "notificationType": {},
+            "notificationTitle": {},
+            "notificationMessages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the continue button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

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

@@ -5,156 +5,156 @@ import { translate } from "../../../store/translationStore";
 import { formatCurrency } from "../../../utils/formatCurrency";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosCheckoutPayment {
-  constructor() {
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.paymentError = false;
-    this.submitBtnType = undefined;
-    this.continueLoading = false;
-    this.submitBtnColor = undefined;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag('zonos-checkout-payment-info');
+    constructor() {
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.paymentError = false;
+        this.submitBtnType = undefined;
+        this.continueLoading = false;
+        this.submitBtnColor = undefined;
+        this.disabled = true;
     }
-  }
-  render() {
-    var _a;
-    if (!stripeStore.stripeElements) {
-      return null;
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-payment-info');
+        }
     }
-    this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-    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')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
-      // use primary type when on mobile mode
-      variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
-      amount: cartStore.total,
-      currency: cartStore.currency,
-    })))));
-  }
-  static get is() { return "zonos-checkout-payment"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-checkout-payment.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-checkout-payment.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "paymentError": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Error occurred during payment"
-        },
-        "attribute": "payment-error",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-        },
-        "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"
-        },
-        "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"
-        },
-        "attribute": "submit-btn-color",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "disabled": {}
-    };
-  }
-  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": {}
+    render() {
+        var _a;
+        if (!stripeStore.stripeElements) {
+            return null;
         }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "watchFormComplete"
-      }];
-  }
+        this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        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')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            // use primary type when on mobile mode
+            variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+            amount: cartStore.total,
+            currency: cartStore.currency,
+        })))));
+    }
+    static get is() { return "zonos-checkout-payment"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkout-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkout-payment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "paymentError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error occurred during payment"
+                },
+                "attribute": "payment-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+                },
+                "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"
+                },
+                "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"
+                },
+                "attribute": "submit-btn-color",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {}
+        };
+    }
+    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": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchFormComplete"
+            }];
+    }
 }