@zonos/elements 1.3.204 → 1.3.205

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

@@ -17,6 +17,31 @@ import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
 import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosCheckoutPayment {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the checkout is in mobile mode
+         */
+        this.isMobile = 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);
@@ -83,15 +108,6 @@ export class ZonosCheckoutPayment {
             // 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;

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

@@ -6,7 +6,9 @@ import PaymentEmptyStateDarkIcon from "./assets/PaymentEmptyStateDarkIcon.svg";
 import PaymentEmptyStateLightIcon from "./assets/PaymentEmptyStateLightIcon.svg";
 export class ZonosEmptyStatePayment {
     constructor() {
-        this.emptyStateText = undefined;
+        /**
+         * Theme color of the icon
+         */
         this.theme = 'LIGHT';
     }
     render() {

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

@@ -57,6 +57,89 @@ export class ZonosCheckout {
          */
         this.onChangeLocaleListener = () => { };
         this.isRedirectAfterOrder = false;
+        /**
+         * Preview checkout without needing to click on the button. This would be useful for demo purpose
+         */
+        this.preview = false;
+        /**
+         * Hidden mode to hide the checkout modal in preview mode
+         */
+        this.hiddenMode = false;
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Default address to use for the checkout (preview mode)
+         */
+        this.defaultAddress = [];
+        /**
+         * Force dialog to be open
+         */
+        this.forceDialogOpen = false;
+        this.defaultAddressParams = [];
+        /**
+         * List of addresses from authenticated checkout customer
+         */
+        this.defaultCustomerProfileAddress = [];
+        /**
+         * Customer profile of the authenticated checkout user
+         */
+        this.customerProfile = null;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.open = this.forceDialogOpen;
+        /**
+         * Whether or not the overlay is loading (for waiting for fetching test variance)
+         */
+        this.isOverlayLoading = false;
+        /**
+         * The stripe instance
+         */
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Whether or not the submit button is loading in `step` component
+         */
+        this.submitLoading = false;
+        // default to collapse the review on mobile
+        this.collapseReviewMobile = true;
+        /**
+         * Determine if we should skip and not hijack the Checkout button click event
+         * Sometimes stripe or our api has error, we don't want to hijack the click event.
+         */
+        this.isAttachError = false;
+        this.isMobile = false;
+        this.isIframed = false;
+        this.isLegacyCheckout = window.Zonos.isLegacyCheckout;
+        /**
+         * Confirm dialog open state
+         */
+        this.confirmDialogOpen = false;
+        /**
+         * Cart expired state to show the cart expired dialog
+         */
+        this.isCartExpired = false;
+        /**
+         * Pay in USD confirm dialog open state
+         */
+        this.payInUsdConfirmDialogOpen = false;
+        /**
+         * Error message from onInventoryCheck callback
+         */
+        this.inventoryCheckErrorMessage = null;
+        /**
+         * Placed order info to show the confirm dialog to the user
+         */
+        this.placedOrderInfo = null;
+        /**
+         * Client secret value
+         */
+        this.clientSecret = stripeStore.clientSecret;
+        /**
+         * Client secret value of customer session (use to load saved payment method and render saved consent)
+         */
+        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
         this.applyStripeTheme = async () => {
             var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
@@ -358,34 +441,6 @@ export class ZonosCheckout {
             url.searchParams.delete('zonosVariantTest');
             window.history.replaceState({}, '', url.toString());
         };
-        this.appearanceSettingsOverride = undefined;
-        this.preview = false;
-        this.hiddenMode = false;
-        this.mobile = false;
-        this.overrideStagingMode = undefined;
-        this.defaultAddress = [];
-        this.forceDialogOpen = false;
-        this.defaultAddressParams = [];
-        this.defaultCustomerProfileAddress = [];
-        this.customerProfile = null;
-        this.open = this.forceDialogOpen;
-        this.isOverlayLoading = false;
-        this.stripe = window.Zonos.stripe;
-        this.submitLoading = false;
-        this.collapseReviewMobile = true;
-        this.isAttachError = false;
-        this.isMobile = false;
-        this.isIframed = false;
-        this.zonosReviewRef = undefined;
-        this.storybookPaymentStatusOverride = undefined;
-        this.isLegacyCheckout = window.Zonos.isLegacyCheckout;
-        this.confirmDialogOpen = false;
-        this.isCartExpired = false;
-        this.payInUsdConfirmDialogOpen = false;
-        this.inventoryCheckErrorMessage = null;
-        this.placedOrderInfo = null;
-        this.clientSecret = stripeStore.clientSecret;
-        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
     }
     /**
      * Init cart info handler event

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -11,6 +11,60 @@ import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
 import { taxIdValidationResult } from "../../../utils/taxIdValidationResult";
 export class ZonosCustomerInfo {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isMobile = false;
+        /**
+         * Default address to use for the checkout (preview mode)
+         */
+        this.defaultAddress = [];
+        /**
+         * Whether to override custom address form to be always visible
+         */
+        this.shouldUseCustomAddressFormOverride = false;
+        /**
+         * Due to Stripe's validation difficulties, we need to show a banner when users hasn't filled out the form correctly but clicked continue
+         */
+        this.showErrorBanner = false;
+        this.shippingCountry = '';
+        this.isCheckingForRestrictedItems = false;
+        /**
+         * Whether or not the address is being validated
+         */
+        this.isValidatingAddress = false;
+        /**
+         * Whether or not the tax id input is invalid
+         */
+        this.taxIdErrorMessage = '';
+        /**
+         * Whether or not the shipping address contains invalid characters
+         */
+        this.invalidShippingCharacterList = null;
+        /**
+         * Whether or not the shipping address contains invalid characters
+         */
+        this.invalidBillingCharacterList = null;
+        /**
+         * Handler for the dialog close button
+         */
+        this.openAddressValidationDialog = false;
+        /**
+         * Whether or not the custom address form is enabled
+         */
+        this.shouldEnabledCustomAddress = false;
+        /**
+         * Handler for the email error state
+         */
+        this.isEmailError = false;
+        /**
+         * Whether or not the custom address form is used
+         */
+        this.recordedFormTypeUsed = false;
         /**
          * Handler for invalid characters in the address
          */
@@ -241,23 +295,6 @@ export class ZonosCustomerInfo {
             // Render Stripe address component by default
             return (h("zonos-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }));
         };
-        this.continueLoading = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.defaultAddress = [];
-        this.shouldUseCustomAddressFormOverride = false;
-        this.showErrorBanner = false;
-        this.shippingCountry = '';
-        this.isCheckingForRestrictedItems = false;
-        this.isValidatingAddress = false;
-        this.taxIdErrorMessage = '';
-        this.invalidShippingCharacterList = null;
-        this.invalidBillingCharacterList = null;
-        this.openAddressValidationDialog = false;
-        this.shouldEnabledCustomAddress = false;
-        this.isEmailError = false;
-        this.recordedFormTypeUsed = false;
     }
     watchShowErrorBanner() {
         // start validate on typing after error banner is shown, and hide it if the form is complete

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

@@ -12,7 +12,15 @@ import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosReview {
     constructor() {
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
         this.mobile = 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;
     }

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

@@ -12,6 +12,26 @@ import { submitGtag } from "../../../utils/submitGtag";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosShipping {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        this.selectedShippingMethod = null;
+        this.collapsedDAPOptions = true;
+        /**
+         * Whether or not the user is selecting a shipping method
+         */
+        this.isSelecting = false;
+        /**
+         * Show error banner when the form is not complete, and user clicks on `Submit` button
+         * @default false
+         */
+        this.showErrorBanner = false;
+        this.serviceLevelsDDP = [];
+        this.serviceLevelsDAP = [];
+        this.serviceLevelsOther = [];
+        this.serviceLevelsAll = [];
+        this.displayBaseCurrency = false;
         this.handleRadioSelected = async (e) => {
             var _a;
             this.selectedShippingMethod = e.detail;
@@ -150,18 +170,6 @@ export class ZonosShipping {
                 });
             }
         };
-        this.continueLoading = false;
-        this.submitBtnColor = undefined;
-        this.submitBtnType = undefined;
-        this.selectedShippingMethod = null;
-        this.collapsedDAPOptions = true;
-        this.isSelecting = false;
-        this.showErrorBanner = false;
-        this.serviceLevelsDDP = [];
-        this.serviceLevelsDAP = [];
-        this.serviceLevelsOther = [];
-        this.serviceLevelsAll = [];
-        this.displayBaseCurrency = false;
     }
     componentWillLoad() {
         this.preselectFirstShippingMethod();

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -5,14 +5,36 @@ import { classes } from "../../utils/classes";
 import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosBadge {
     constructor() {
+        /**
+         * Whether or not the badge is bold
+         * @default false
+         */
         this.bold = false;
+        /**
+         * The color of the badge
+         * @default 24
+         */
         this.badgeColor = 'gray';
-        this.icon = undefined;
+        /**
+         * Position the icon to the right when icon is specified
+         * @default false
+         */
         this.iconRight = false;
+        /**
+         * The size of the badge
+         * @default 'default'
+         */
         this.size = 'default';
+        /**
+         * Whether or not the badge is rounded
+         * @default false
+         */
         this.rounded = false;
+        /**
+         * Whether or not the badge is loading
+         * @default false
+         */
         this.loading = false;
-        this.dismissHandler = undefined;
     }
     render() {
         return (h(Host, { key: 'd8a6a11f10c36a272ecdb52c54919f9ad45e1a9a', class: classes(['zonos--elements zonos--badge']), style: {

package/dist/collection/components/common/zonos-banner/zonos-banner.js

@@ -3,15 +3,16 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosBanner {
     constructor() {
+        /**
+         * Whether or not the button has content
+         */
+        this.hasContent = false;
         /**
          * Detect if the button has an content
          */
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.bannerTitle = undefined;
-        this.intent = undefined;
-        this.hasContent = false;
     }
     render() {
         const renderContent = ({ color }) => {

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -14,6 +14,75 @@ export class ZonosButton {
          * Inherited attributes from the host element
          */
         this.inheritedAttributes = {};
+        /**
+         * Whether or not the button is disabled
+         * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.
+         * The issue is the component has internal disabled @prop(). @prop decorator is to watch the update of the attribute of the component in the dom.
+         * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.
+         * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.
+         *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.
+         * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.
+         */
+        this.isDisabled = false;
+        /**
+         * The icon element to display
+         * @default null
+         */
+        this.icon = null;
+        /**
+         * Whether or not the icon is on the right
+         * @default false
+         */
+        this.iconRight = false;
+        /**
+         * The size of the button
+         * @default 'sm'
+         */
+        this.size = 'sm';
+        /**
+         * The variance of the button
+         * @note If the button `variant` is set to 'standard', backgroundColor will be disregarded
+         * @default standard
+         */
+        this.variant = 'standard';
+        /**
+         * Whether or not the button has a background
+         * @default false
+         */
+        this.noBackground = false;
+        /**
+         * Whether or not the button has a box shadow
+         */
+        this.withBoxShadow = false;
+        /**
+         * Whether or not the button has a left padding
+         */
+        this.noPaddingLeft = false;
+        /**
+         * Whether or not the button has a right padding
+         */
+        this.noPaddingRight = false;
+        /**
+         * Whether or not the button is loading
+         */
+        this.loading = false;
+        /**
+         * The content alignment within the button
+         * @default 'center'
+         */
+        this.justifyContent = 'center';
+        /**
+         * Whether or not the button text color is bold
+         */
+        this.bold = false;
+        /**
+         * Whether or not the button has an icon
+         */
+        this.hasIcon = !!this.icon;
+        /**
+         * Whether or not the button has content
+         */
+        this.hasContent = false;
         /**
          * Detect if the button has an content
          */
@@ -84,24 +153,6 @@ export class ZonosButton {
                 }
             }
         };
-        this.buttonColor = undefined;
-        this.backgroundColor = undefined;
-        this.borderStyle = undefined;
-        this.isDisabled = false;
-        this.icon = null;
-        this.iconRight = false;
-        this.size = 'sm';
-        this.variant = 'standard';
-        this.noBackground = false;
-        this.withBoxShadow = false;
-        this.noPaddingLeft = false;
-        this.noPaddingRight = false;
-        this.loading = false;
-        this.justifyContent = 'center';
-        this.bold = false;
-        this.theme = undefined;
-        this.hasIcon = !!this.icon;
-        this.hasContent = false;
     }
     /**
      * Detect if the icon changes and update the state accordingly

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -5,13 +5,14 @@ import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 export class ZonosCard {
     constructor() {
-        this.actions = undefined;
-        this.backgroundColor = undefined;
+        /**
+         * The border radius of the card
+         * @default 6
+         */
         this.borderRadius = 6;
-        this.footerActions = undefined;
-        this.footerContent = undefined;
-        this.footerHeight = undefined;
-        this.label = undefined;
+        /**
+         * The spacing to apply between elements in the card
+         */
         this.spacing = '24px';
     }
     render() {

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -8,13 +8,26 @@ let inputId = 0;
 export class ZonosCheckbox {
     constructor() {
         this.inputId = `zonos--checkbox-${++inputId}`;
+        /**
+         * background color of the checkbox
+         */
         this.backgroundColor = 'blue';
-        this.label = undefined;
+        /**
+         * Whether or not the checkbox is checked
+         */
         this.isChecked = false;
+        /**
+         * Whether or not the checkbox is disabled
+         */
         this.isDisabled = false;
+        /**
+         * Size of the checkbox
+         */
         this.size = 12;
+        /**
+         * Font size of the checkbox text
+         */
         this.fontSize = 'base';
-        this.borderStyle = undefined;
     }
     onClick() {
         if (this.isDisabled) {

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -10,6 +10,14 @@ import { resetToSelectedTab } from "../../utils/resetToSelectedTab";
 import TabCheckmark from "./assets/TabCheckmark.svg";
 export class ZonosCheckoutProgressTabs {
     constructor() {
+        /**
+         * Color of the tab progress bar and label, override the secondary color of the appearance settings
+         */
+        this.tabColor = null;
+        /**
+         * Background color of the parent that's wrapped around the tab progress bar
+         */
+        this.backgroundColor = null;
         /**
          * The total number of steps that's done
          */
@@ -33,8 +41,6 @@ export class ZonosCheckoutProgressTabs {
                 .slice(0, currentTab.index - 1)
                 .every(tab => tab.isDone);
         };
-        this.tabColor = null;
-        this.backgroundColor = null;
     }
     /**
      * Set the tab items data. This is to be used in storybook

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -3,7 +3,13 @@ import { Host } from "@stencil/core/internal";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 export class ZonosCollapse {
     constructor() {
+        /**
+         * Collapsed state of the element
+         */
         this.collapsed = false;
+        /**
+         * Collapsed size when collapsed
+         */
         this.collapseSize = 0;
         this.height = this.el.scrollHeight;
         this.iframe = null;

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -11,22 +11,47 @@ import HelpDuotoneIcon from "./assets/HelpDuotoneIcon.svg";
 import WarningDuotoneIcon from "./assets/WarningDuotoneIcon.svg";
 export class ZonosConfirmDialog {
     constructor() {
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialogHandler();
-            }
-        };
+        /**
+         * Dialog title text
+         * @default "Are you sure?"
+         */
         this.dialogTitle = translate('Are you sure?');
+        /**
+         * Dialog intent (for icon and button color)
+         * @default "info"
+         */
         this.dialogIntent = 'info';
+        /**
+         * Dialog subtitle text
+         * @default null No subtitle
+         */
         this.dialogSubtitle = null;
-        this.submitBtnColor = undefined;
-        this.dialogConfirmBtnText = undefined;
+        /**
+         * Dialog width
+         * @default 350 px
+         */
         this.dialogWidth = 350;
-        this.dialogCancelBtnText = undefined;
+        /**
+         * Type of dialog
+         * - "alert" - Only confirm button
+         * - "confirm" - Both Confirm and cancel buttons
+         * @default "confirm"
+         */
         this.dialogType = 'confirm';
+        /**
+         * Whether or not the dialog is open
+         */
         this.isMobile = false;
-        this.dialogOpen = undefined;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
         this.noClickOutside = false;
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js

@@ -5,8 +5,12 @@ import { classes } from "../../utils/classes";
 const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
 export class ZonosCountryFlag {
     constructor() {
+        /**
+         * The country code for the flag
+         * @default localizationStore.selectedCountryCode
+         * @example 'US'
+         */
         this.countryCode = localizationStore.selectedCountryCode;
-        this.size = undefined;
     }
     render() {
         if (!this.el.shadowRoot || !this.countryCode) {

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -7,6 +7,12 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
 export class ZonosCountrySelect {
     constructor() {
+        /**
+         * Function to close the country select
+         * @default () => {}
+         */
+        this.handleOnClose = () => { };
+        this.inputValue = '';
         this.countrySelected = (countryCode) => {
             // mutate the selected country code in store
             void localizationStoreUpdateSelectedCountryCode(countryCode);
@@ -23,8 +29,6 @@ export class ZonosCountrySelect {
                 countryListSelector.scrollTop = 0;
             }
         };
-        this.handleOnClose = () => { };
-        this.inputValue = '';
     }
     componentDidRender() {
         var _a, _b;