@zonos/elements 1.2.3 → 1.2.4-alpha.10

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

@@ -2,178 +2,224 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { getBorderRadius } from "../../../utils/getBorderRadius";
+import { handleFetch } from "../../../utils/handleFetch";
+import { logError } from "../../../utils/logging/logError";
 import { submitGtag } from "../../../utils/submitGtag";
+import { cartStore } from "../../../../types/index";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
 /* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
 // 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);
-        }
-      }
-      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();
-  }
-  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"
+    constructor() {
+        this.pullOrder = async () => {
+            var _a, _b;
+            const baseUrl = process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL;
+            const checkoutSessionId = cartStore.checkoutSessionId;
+            const { errors, json } = await handleFetch(`${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`);
+            if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
+                return null;
             }
-          }
-        },
-        "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": ""
+            // TODO: This method of triggering /success for BigCommerce is for MVP. Remove when eventRegistry is fixed to handle by webhooks
+            if (window.Zonos.isBigCommerce) {
+                const orderId = json === null || json === void 0 ? void 0 : json.id;
+                const storeHash = (_b = (_a = json === null || json === void 0 ? void 0 : json.metadata) === null || _a === void 0 ? void 0 : _a.find(x => (x === null || x === void 0 ? void 0 : x.key) === 'storeHash')) === null || _b === void 0 ? void 0 : _b.value;
+                if (!orderId || !storeHash) {
+                    return logError('Unable to trigger BigCommerce /success: Missing orderId or storeHash');
+                }
+                void handleFetch(`${baseUrl}/api/bigcommerce/success?orderId=${orderId}&storeHash=${storeHash}`);
             }
-          }
-        },
-        "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"
+            return json;
+        };
+        this.getPullOrder = async (attempts = 0) => {
+            const order = await this.pullOrder();
+            if (order) {
+                this.order = order;
             }
-          }
-        },
-        "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": {}
+            else if (!order && attempts < 5) {
+                // Wait for 1 second before the next attempt
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await this.getPullOrder(attempts + 1);
+            }
+        };
+        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);
+                }
+                // Attempt to pull the order details from the graph every second on 5 attempts
+                if (this.notificationType === 'success') {
+                    void this.getPullOrder();
+                }
+            }
+            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 = [];
+        this.order = null;
+    }
+    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();
+    }
+    render() {
+        // TODO: Keeping this code for when we have a UI for order details
+        // const orderTotal = this.order?.amountSubtotals
+        //   ? Object.values(this.order.amountSubtotals).reduce((a, b) => a + b, 0)
+        //   : 0;
+        // const totalItems = this.order?.items?.reduce((acc, item) => {
+        //   return acc + item.quantity;
+        // }, 0);
+        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(Fragment, null, 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"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "notificationType": {},
+            "notificationTitle": {},
+            "notificationMessages": {},
+            "order": {}
+        };
+    }
+    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,6 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;