@zonos/elements 1.3.143 → 1.3.145

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

@@ -129,6 +129,8 @@ export class ZonosCartSubtotal {
                     "tags": [],
                     "text": "Button type of the submit button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-type",
                 "reflect": false
             },
@@ -146,6 +148,8 @@ export class ZonosCartSubtotal {
                     "tags": [],
                     "text": "Button color of the submit button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-color",
                 "reflect": false
             }

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

@@ -274,6 +274,20 @@ export class ZonosCheckoutFinish {
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = translate("You're all set!");
+            this.notificationMessages =
+                stripeStoreMessageBasedOnStatus('succeeded').messages;
+            // override title if notification type is success
+            this.useOverrideSuccessNotification();
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            cartStore.checkoutSessionId = null;
+        };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
             if (paypalStore.paypalErrorMessage) {
@@ -340,7 +354,10 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             return;
         }
-        if (paypalStore.orderIdCreated) {
+        if (cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
         else {
@@ -349,17 +366,22 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7e1b8c53a085ae60d8189aef087a9c458c3dccd0', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '6ad050e91df2b56c55e142cc69d0b582c0c8469a', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'b31bed34ca67255cdc6ef6b546f5d6a880e4b309', class: "zonos--finish-details" }, h("div", { key: 'e3cb21607b8f1256b3096fe4f21a806a74174f66', 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: 'fac1d2134f1c032cefeb9d36c5c4677767ed0972', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '94b8da1ca6a391295c22d285e65530f5dfe97a41', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '4ebf2bb81ceb0d27b4fd582400606b238a3dfbae',
+            } }, !this.isLoading && (h("div", { key: '8e47016dc83cbe1af79f384285c606fcb737e475', class: "zonos--finish-details" }, h("div", { key: 'd1c14e8db7aa70d04b77b10bb0d8b1e3de5529e3', 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: 'd26717fe5d844f2fe6a87b05a566ef0da2d740f7', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '7845c4ff7872884d8e5b8b275eb8a76efa855e52', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '891901ad2c4fb7c2025ad47417425cd239e36cf1',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '6548724f163ad59fc3cb502c24d82ae7585c6b7f', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '550bd94f93b842d71c23bd158362b711797dd4a1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: 'f9aeb5d59dc4b0f163868e5a2358a69a0884bb56', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '98ae907d33624e54f84f88519abacd1ea178554c', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '506eeb9eabe16fed59b98b9eef49552542272233', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            this.notificationType === 'success' && (h("div", { key: '8fdaa205f4517e0a9a6c5482e80d6dbccba6a585', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '41b524fc8dea752a6f4745191970ac665e7b9fa8', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '70297a07cc8d3c11545776d600d8a1a2a3c2a744', onClick: () => {
+                const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
+                this.redirectToUrl(isZonosDashboard
+                    ? '/orders/all'
+                    : 'https://dashboard.zonos.com/orders/all');
+            }, size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -396,6 +418,8 @@ export class ZonosCheckoutFinish {
                     "tags": [],
                     "text": "The border radius style of the dialog"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "border-radius",
                 "reflect": false,
                 "defaultValue": "'ROUNDED'"
@@ -420,6 +444,8 @@ export class ZonosCheckoutFinish {
                     "tags": [],
                     "text": "Force status to test the UI for storybook"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "storybook-force-status",
                 "reflect": false
             },
@@ -436,7 +462,9 @@ export class ZonosCheckoutFinish {
                 "docs": {
                     "tags": [],
                     "text": "Override the notification message and title, bypass checking stripe payment status"
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

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

@@ -66,6 +66,8 @@ export class ZonosCheckoutFooter {
                     "tags": [],
                     "text": "Override mobile mode"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "false"
@@ -90,6 +92,8 @@ export class ZonosCheckoutFooter {
                     "tags": [],
                     "text": "Theme to change the color of the logo"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "data-theme",
                 "reflect": false
             }

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

@@ -1,10 +1,14 @@
-import { h, Host, } from "@stencil/core";
-import { cartStore } from "../../../store/checkout/cart";
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { 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 { isDarkColor } from "../../../utils/isDarkColor";
 import { submitGtag } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
@@ -36,11 +40,31 @@ export class ZonosCheckoutPayment {
                 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();
+        };
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.overridePrimaryColor = undefined;
         this.showErrorBanner = false;
         this.hasStripePaymentError = false;
+        this.stagingOrderCreateErrorMessage = '';
+        this.internalContinueLoading = this.continueLoading;
+    }
+    continueLoadingWatcher() {
+        this.internalContinueLoading = this.continueLoading;
     }
     stripePaymentErrorWatcher() {
         if (this.hasStripePaymentError) {
@@ -64,22 +88,39 @@ export class ZonosCheckoutPayment {
             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';
-        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.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("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
-                this.continueClickHandler();
-            }, size: "lg",
-            // use primary type when on mobile mode
-            variant: this.submitBtnType }, translate('Pay [orderTotal]', {
-            orderTotal: renderCheckoutCurrency({
-                amount: cartStore.total,
-                isForeign: true,
-            }),
-        }))), 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))))));
+        const renderPayment = () => {
+            if (isStagingMode) {
+                const { colorPrimary } = zonosStore.appearance;
+                const themeBasedColor = colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';
+                // If in mobile, use the theme from the store since the UI is solely by theme
+                const theme = this.isMobile
+                    ? zonosStore.appearance.theme
+                    : themeBasedColor;
+                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')))));
+            }
+            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("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                    this.continueClickHandler();
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: cartStore.total,
+                    isForeign: true,
+                }),
+            }))), 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-checkout-payment"; }
     static get encapsulation() { return "scoped"; }
@@ -114,6 +155,8 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Whether or not the checkout is in mobile mode"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-type",
                 "reflect": false
             },
@@ -131,6 +174,8 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Whether or not the continue button is loading"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "continue-loading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -149,15 +194,58 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Submit button main color"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-color",
                 "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkout is in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "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": {}
+            "hasStripePaymentError": {},
+            "stagingOrderCreateErrorMessage": {},
+            "internalContinueLoading": {}
         };
     }
     static get events() {
@@ -211,6 +299,9 @@ export class ZonosCheckoutPayment {
     static get elementRef() { return "ele"; }
     static get watchers() {
         return [{
+                "propName": "continueLoading",
+                "methodName": "continueLoadingWatcher"
+            }, {
                 "propName": "hasStripePaymentError",
                 "methodName": "stripePaymentErrorWatcher"
             }];

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/assets/PaymentEmptyStateDarkIcon.svg

@@ -0,0 +1,22 @@
+<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3739_19124" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="200">
+<rect width="536" height="200" fill="url(#paint0_radial_3739_19124)"/>
+</mask>
+<g mask="url(#mask0_3739_19124)">
+<rect x="0.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="126.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="252.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="378.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="504.5" y="0.5" width="31" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect y="96" width="124" height="8" rx="4" fill="white" fill-opacity="0.08"/>
+<rect x="0.5" y="112.5" width="535" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="0.5" y="160.5" width="263" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="272.5" y="160.5" width="263" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_3739_19124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(268 100) rotate(90) scale(100 268)">
+<stop offset="0.25" stop-color="white" stop-opacity="0"/>
+<stop offset="0.75" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/assets/PaymentEmptyStateLightIcon.svg

@@ -0,0 +1,22 @@
+<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3739_19125" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="200">
+<rect width="536" height="200" fill="url(#paint0_radial_3739_19125)"/>
+</mask>
+<g mask="url(#mask0_3739_19125)">
+<rect x="0.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="126.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="252.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="378.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="504.5" y="0.5" width="31" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect y="96" width="124" height="8" rx="4" fill="black" fill-opacity="0.08"/>
+<rect x="0.5" y="112.5" width="535" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="0.5" y="160.5" width="263" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="272.5" y="160.5" width="263" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_3739_19125" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(268 100) rotate(90) scale(100 268)">
+<stop offset="0.25" stop-color="white" stop-opacity="0"/>
+<stop offset="0.75" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,51 @@
+: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 {
+  display: inline-flex;
+  position: relative;
+}
+:host zonos-text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host svg {
+  width: var(--zonos--width);
+  height: var(--zonos--height);
+}

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

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../../../store/zonosStore";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import PaymentEmptyStateDarkIcon from "./assets/PaymentEmptyStateDarkIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import PaymentEmptyStateLightIcon from "./assets/PaymentEmptyStateLightIcon.svg";
+export class ZonosEmptyStatePayment {
+    constructor() {
+        this.emptyStateText = undefined;
+        this.theme = 'LIGHT';
+    }
+    render() {
+        if (!this.el.shadowRoot) {
+            return null;
+        }
+        if (this.theme === 'DARK') {
+            this.el.shadowRoot.innerHTML = PaymentEmptyStateDarkIcon;
+        }
+        else {
+            this.el.shadowRoot.innerHTML = PaymentEmptyStateLightIcon;
+        }
+        return (h(Host, { class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': `100%`,
+                '--zonos--width': `100%`,
+            } }, h("zonos-text", { type: "semiBoldLabel" }, this.emptyStateText)));
+    }
+    static get is() { return "zonos-empty-state-payment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-empty-state-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-empty-state-payment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "emptyStateText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display in the empty state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "empty-state-text",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\"",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme color of the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'LIGHT'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}