@zonos/elements 1.0.16

package/dist/types/components/common/zonos-notification/zonos-notification.d.ts

@@ -0,0 +1,35 @@
+export type NotificationInit = {
+  message: string;
+  /**
+   * Time in milliseconds
+   * @default 4000
+   */
+  timeout?: number;
+  /**
+   * Type of notification
+   * @default 'success'
+   */
+  type?: 'error' | 'success' | 'warning';
+};
+type NotificationItem = NotificationInit & {
+  id: string;
+  transitionClass: 'show' | '';
+};
+export declare class ZonosNotification {
+  /**
+   * Custom class to add to the notification
+   */
+  class: string;
+  notificationArray: NotificationItem[];
+  /**
+   * Show a notification
+   */
+  showNotification(notification: NotificationInit): Promise<void>;
+  private updateTransitionClass;
+  /**
+   * Remove a notification
+   */
+  private removeNotification;
+  render(): any;
+}
+export {};

package/dist/types/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.d.ts

@@ -0,0 +1,41 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+import type { Color, ElementsUiStyle, ElementsUiTheme } from "../../../types/index";
+export type ShippingRichRadioItem = {
+  caption?: string;
+  label: string;
+  price: string;
+  sublabel?: string;
+  value: string | number;
+};
+export declare class ZonosShippingRichRadio {
+  /**
+   * List of items to display
+   */
+  items: ShippingRichRadioItem[];
+  /**
+   * Override border color of the radio item
+   */
+  borderColor?: Color | (string & {
+    _placeholder?: never;
+  });
+  /**
+   * Override border color of the radio item
+   */
+  borderStyle?: ElementsUiStyle;
+  /**
+   * Theme of the radio item
+   */
+  theme?: ElementsUiTheme;
+  /**
+   * Selected item
+   * @default {null|firstItem}
+   */
+  selectedItem: ShippingRichRadioItem | null;
+  /**
+   * Event emitted when an item is selected
+   */
+  radioSelected?: EventEmitter<ShippingRichRadioItem>;
+  private handleRichRadioSelect;
+  private getRadioItemStyleVariables;
+  render(): any;
+}

package/dist/types/components/common/zonos-spinner/zonos-spinner.d.ts

@@ -0,0 +1,14 @@
+export type SpinnerColor = 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'black' | 'white';
+export declare class ZonosSpinner {
+  /**
+   * The size of the spinner
+   * @default 32
+   */
+  size: number;
+  /**
+   * Color of the spinner
+   */
+  color?: SpinnerColor;
+  el: HTMLZonosSpinnerElement;
+  render(): any;
+}

package/dist/types/components/common/zonos-text/zonos-text.d.ts

@@ -0,0 +1,34 @@
+import type { Color } from "../../../types/styles/Color";
+import { type FontWeight, type Size, type Type } from "../../../types/styles/Text";
+export declare class ZonosText {
+  /**
+   * css class for the component
+   */
+  class: string;
+  /**
+   * The icon element to display
+   */
+  color: Color;
+  /**
+   * The size of the text
+   */
+  size?: Size;
+  /**
+   * Type of the text to display
+   */
+  type: Type;
+  /**
+   * The weight of the text
+   */
+  weight?: FontWeight;
+  /**
+   * The tag to use for the text
+   */
+  content?: string;
+  /**
+   * Whether or not the component is ready
+   */
+  ready: boolean;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/common/zonos-v-stack/zonos-v-stack.d.ts

@@ -0,0 +1,13 @@
+import type { GridSpacing } from "../../../types/styles/GridSpacing";
+export declare class VStack {
+  /**
+   * The spacing between elements in the stack
+   * @default 24
+   */
+  spacing: GridSpacing;
+  /**
+   * The CSS class to apply to the stack element
+   */
+  class: string;
+  render(): any;
+}

package/dist/types/components/component-template/zonos-component/zonos-component.d.ts

@@ -0,0 +1,16 @@
+export declare class ZonosComponent {
+  /**
+   * The first name
+   */
+  first: string;
+  /**
+   * The middle name
+   */
+  middle: string;
+  /**
+   * The last name
+   */
+  last: string;
+  private getText;
+  render(): any;
+}

package/dist/types/components/hello/zonos-hello/zonos-hello.d.ts

@@ -0,0 +1,50 @@
+import { type AppearanceConfig } from "../../store/zonosStore";
+import type { HelloMobileLocation } from "../../../types/generated/graphql.customer.types";
+export declare class ZonosHello {
+  private helloRef?;
+  /**
+   * Force mobile styling instead of media query and use the passed location value
+   * @default false
+   */
+  mobileLocationOverride?: HelloMobileLocation;
+  /**
+   * Force left animation instead of detecting which side has more space
+   * @default false
+   */
+  animateFromLeftOverride?: boolean;
+  /**
+   * Override the appearance settings
+   */
+  appearanceSettingsOverride?: Partial<AppearanceConfig>;
+  showPeekMessage: boolean;
+  zonosStoreHelloSettings: import("../../..").HelloConfig;
+  showDialog: boolean;
+  peekMessage: string | null;
+  private getHelloPeekMessage;
+  private enableShowPeekMessage;
+  componentDidLoad(): void;
+  /**
+   * This method will trigger the currency conversion and display the converted value
+   * @returns void
+   */
+  displayCurrency(): Promise<void>;
+  /**
+   * This method will call convert and format, and return the converted and formatted string
+   * @returns string
+   */
+  convertAndFormat(value: number): Promise<void>;
+  /**
+   * This method will convert the currency and return the converted value
+   * @returns number
+   */
+  convert(value: number): Promise<void>;
+  /**
+   * This method will format the currency and return the formatted string
+   * @returns number
+   */
+  format(value: number): Promise<void>;
+  private changeShowDialog;
+  private shouldAnimateLeftDesktop;
+  handleResize(): void;
+  render(): any;
+}

package/dist/types/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.d.ts

@@ -0,0 +1,13 @@
+import type { AppearanceConfig } from "../../../../components";
+export declare class ZonosHelloDialogFooter {
+  /**
+   * Appearance settings
+   */
+  appearanceSettings?: Partial<AppearanceConfig>;
+  /**
+   * Whether or not the country select dialog is open
+   * @default false
+   */
+  setShowCountrySelect: (value: boolean) => void;
+  render(): any;
+}

package/dist/types/components/hello/zonos-hello-dialog/zonos-hello-dialog.d.ts

@@ -0,0 +1,40 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+import type { AppearanceConfig, HelloMobileLocation } from "../../../types/index";
+export declare class ZonosHelloDialog {
+  /**
+   * Whether or not the dialog is open
+   */
+  isOpen: boolean;
+  /**
+   * The function to set the open state
+   * @default () => {}
+   */
+  setIsOpen: (isOpen: boolean) => void;
+  /**
+   * Force mobile styling instead of media query and use the passed location value
+   * @default false
+   */
+  mobileLocationOverride?: HelloMobileLocation;
+  /**
+   * Force left animation instead of detecting which side has more space
+   * @default false
+   */
+  animateFromLeftOverride?: boolean;
+  /**
+   * Override the appearance settings
+   */
+  appearanceSettings?: Partial<AppearanceConfig>;
+  welcomeMessage: string;
+  showCountrySelect: boolean;
+  /**
+   * Close dialog button click
+   */
+  closeDialog: EventEmitter<void>;
+  private dialogRef;
+  private clickOutsideDialogHandler;
+  private getCurrentPageEnum;
+  private setShowCountrySelect;
+  globalClickHandler(e: MouseEvent): void;
+  isOpenHandler(isOpen: boolean): void;
+  render(): any;
+}

package/dist/types/components/main/zonos-controller.d.ts

@@ -0,0 +1,44 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import type { Stripe } from '@stripe/stripe-js';
+import type { NotificationInit } from "../common/zonos-notification/zonos-notification";
+import type { LoadZonosParamsConfig } from "../../scripts/zonos";
+import type { CountryCode } from "../../types/generated/graphql.customer.types";
+export declare class ZonosController {
+  /**
+   * The zonos config object
+   */
+  config: LoadZonosParamsConfig;
+  /**
+   * The zonos api key
+   */
+  zonosApiKey: string;
+  /**
+   * Event emitted when stripe is initialized
+   */
+  stripeInitEvent?: EventEmitter<{
+    publishableKey: string;
+  }>;
+  /**
+   * Method to initialize checkout element
+   */
+  initCheckoutElement(stripe: Stripe): Promise<void>;
+  /**
+   * Init zonos notification
+   */
+  private initZonosNotification;
+  componentWillLoad(): Promise<void>;
+  /**
+   * Show notification
+   */
+  showNotification(notification: NotificationInit): Promise<void>;
+  /**
+   * Override the setting
+   * @param config config that need to override the default setting
+   */
+  overrideConfig(config: LoadZonosParamsConfig): Promise<void>;
+  /**
+   * Override country code for storybook
+   */
+  overrideCountry(countryCode: CountryCode): Promise<void>;
+  render(): any;
+}

package/dist/types/components/store/checkout/cart.d.ts

@@ -0,0 +1,68 @@
+import { stripeStoreUpdateCheckoutSession } from "./stripe";
+import type { CheckoutPresentmentFragment, CurrencyCode, ShipmentRatingFragment } from "../../../types/generated/graphql.customer.types";
+export type CartItem = {
+  amount: number;
+  countryOfOrigin?: string;
+  currencyCode: string;
+  description?: string;
+  hsCode?: string;
+  imageUrl?: string;
+  name: string;
+  productId?: string;
+  quantity: number;
+};
+type CartStore = {
+  checkoutSessionId: string | null;
+  currency: CurrencyCode;
+  dutiesTaxFees: number;
+  error: {
+    messages: string[];
+    title: string;
+  } | null;
+  isSelectedShippingAboveDeminimis: boolean;
+  isSelectedShippingGuarantee: boolean;
+  items: CartItem[];
+  landedCostData: CheckoutPresentmentFragment[] | null;
+  selectedLandedCost: CheckoutPresentmentFragment | null;
+  selectedShippingOption: ShipmentRatingFragment | null;
+  selectedShippingOptionExpectedDate: string;
+  selectedShippingOptionTransitTime: string;
+  shipping: number;
+  shippingData: ShipmentRatingFragment[] | null;
+  step: 'customer-info' | 'shipping' | 'payment' | 'finish' | 'error';
+  subtotal: number;
+  total: number;
+};
+declare const cartStore: CartStore;
+/**
+ * Format shipping transit info to be displayed on UI
+ * @returns
+ * - expectedDate: Thursday, Aug 12
+ * - maxTransit: 5
+ * - minTransit: 3
+ */
+declare const cartStoreGetShippingTransitInfo: (item: ShipmentRatingFragment) => {
+  expectedDate: string;
+  maxTransit: string | number;
+  minTransit: string | number;
+};
+declare const cartStoreReset: () => void;
+declare const cartStoreUpdateToErrorState: ({ messages, title, }: {
+  messages: string[];
+  title: string;
+}) => void;
+type CartSubtotals = {
+  items: number;
+  landedCostTotal: number;
+  presentmentCurrencyCode: CurrencyCode;
+  shipping: number;
+  total: number;
+};
+declare const cartStoreApplySubtotals: (subtotals: CartSubtotals) => void;
+type CartStoreRecalculateTotalParams = Omit<Parameters<typeof stripeStoreUpdateCheckoutSession>[0], 'id' | 'presentmentCountryCode'>;
+declare const cartStoreReCalculateTotal: ({ currency, itemsAmount, landedCostId, }: CartStoreRecalculateTotalParams) => Promise<boolean>;
+declare const cartStoreUpdateSelectedShippingOption: (selectedShippingOption: ShipmentRatingFragment) => Promise<boolean>;
+declare const cartStoreUpdateItems: (items: CartItem[]) => Promise<void>;
+declare const cartStoreNextStep: () => void;
+declare const cartStorePreviousStep: () => void;
+export { cartStore, cartStoreApplySubtotals, cartStoreGetShippingTransitInfo, cartStoreNextStep, cartStorePreviousStep, cartStoreReCalculateTotal, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, };

package/dist/types/components/store/checkout/stripe.d.ts

@@ -0,0 +1,71 @@
+import type { PaymentIntent, Stripe, StripeAddressElement, StripeAddressElementChangeEvent, StripeElements, StripeLinkAuthenticationElement, StripeLinkAuthenticationElementChangeEvent, StripePaymentElement, StripePaymentElementChangeEvent } from '@stripe/stripe-js';
+import type { CheckoutSessionUpdateMutation, CountryCode, ElementsUiStyle, ElementsUiTheme } from "../../../types/generated/graphql.customer.types";
+export type ContactOption = {
+  address: {
+    city: string;
+    country: string;
+    line1: string;
+    line2?: string;
+    postal_code: string;
+    state: string;
+  };
+  name: string;
+  phone?: string;
+};
+type StripeStore = {
+  clientSecret: string | null;
+  fetchingLandedCostAbordController: AbortController | null;
+  isFetchingLandedCost: boolean;
+  isFetchingSession: boolean;
+  stripe: Stripe | null;
+  stripeAddressElement: StripeAddressElement | null;
+  stripeAddressEventData: StripeAddressElementChangeEvent | null;
+  stripeAddressUsedWhenFetchingLC: StripeAddressElementChangeEvent | null;
+  stripeElements: StripeElements | null;
+  stripeLinkElement: StripeLinkAuthenticationElement | null;
+  stripeLinkEventData: StripeLinkAuthenticationElementChangeEvent | null;
+  stripeLinkUsedWhenFetchingLC: StripeLinkAuthenticationElementChangeEvent | null;
+  stripePaymentElement: StripePaymentElement | null;
+  stripePaymentEventData: StripePaymentElementChangeEvent | null;
+};
+declare const stripeStore: StripeStore;
+declare const initStripeElements: (props?: {
+  overrideBorderRaidus?: ElementsUiStyle;
+  overridePrimaryColor?: string;
+  overrideTheme?: ElementsUiTheme;
+}) => Promise<void>;
+declare const stripeStoreReset: () => void;
+declare const stripeStorePrefetchLandedCost: () => Promise<void>;
+declare const stripeStoreRetrievePayment: ({ clientSecret: _clientSecret, storybookForceStatus, }: {
+  clientSecret?: string | undefined;
+  storybookForceStatus?: PaymentIntent.Status | undefined;
+}) => Promise<{
+  error: boolean;
+  messages: string[];
+  message?: undefined;
+} | {
+  error: boolean;
+  message: string[];
+  messages?: undefined;
+}>;
+declare const stripeStoreConfirmPayment: () => Promise<void>;
+/**
+ * Init checkout session
+ * @returns {boolean} whether or not the checkout session is successfully created
+ */
+declare const stripeStoreInitCheckoutSession: () => Promise<boolean>;
+type CheckoutSessionUpdateRequest = {
+  currency?: string;
+  id: string;
+  itemsAmount?: number;
+  landedCostId?: string;
+  presentmentCountryCode: CountryCode | null;
+};
+/**
+ * Update checkout session. Use for updating amount with landed cost id, or update session when cart items change
+ */
+declare const stripeStoreUpdateCheckoutSession: ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }: CheckoutSessionUpdateRequest) => Promise<{
+  errors: import("../../..").JsonError[];
+  json: CheckoutSessionUpdateMutation | null;
+}>;
+export { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSession, };

package/dist/types/components/store/hello/localization.d.ts

@@ -0,0 +1,30 @@
+import { type CountryLandedCost } from "../../utils/api/getCountryLandedCost";
+import { type TargetFormat } from "../../utils/api/getExchangeRate";
+import type { CountryCode } from "../../../types/index";
+import type { CurrencyCode } from "../../../types/generated/graphql.customer.types";
+import type { Locale_ElementsSupportedLocationCode_Enum, Locale_PageName_Enum } from "../../../types/generated/graphql.frontend.types";
+import type { ICountryJson } from "../../../types/ICountryJson";
+export type ExchangeRateForUse = {
+  rate: number;
+  targetFormat: TargetFormat;
+};
+type LocalizationStore = {
+  countryLandedCost: CountryLandedCost | null;
+  customMessages: ILocaleMessageForUse[];
+  exchangeRate: ExchangeRateForUse | null;
+  isShippableCountry: boolean;
+  localizationLoaded: boolean;
+  selectedCountryCode: CountryCode | null;
+  selectedLocale: Locale_ElementsSupportedLocationCode_Enum;
+  shippingZoneCountries: ICountryJson | null;
+  targetCurrency: CurrencyCode;
+};
+type ILocaleMessageForUse = {
+  countryCode: string | null;
+  message?: string;
+  pageName: Locale_PageName_Enum;
+};
+declare const localizationStore: LocalizationStore;
+declare const localizationStoreUpdateSelectedCountryCode: (newSelectedCountryCode: CountryCode | null) => Promise<void>;
+declare const initLocalizationStore: () => Promise<void>;
+export { initLocalizationStore, localizationStore, localizationStoreUpdateSelectedCountryCode, };

package/dist/types/components/store/translationStore/strings.arabic.d.ts

@@ -0,0 +1,140 @@
+export declare const stringsArabic: {
+  'Above de minimis threshold for': {
+    value: string;
+  };
+  Address: {
+    value: string;
+  };
+  Back: {
+    value: string;
+  };
+  'Cart subtotal': {
+    value: string;
+  };
+  Contact: {
+    value: string;
+  };
+  'Continue to shipping': {
+    value: string;
+  };
+  'Customer information': {
+    value: string;
+  };
+  'Duties and taxes will be applied to items and shipping.': {
+    value: string;
+  };
+  'Duties will apply to all orders': {
+    value: string;
+  };
+  'Duties, taxes, and fees': {
+    value: string;
+  };
+  'Error creating Checkout': {
+    value: string;
+  };
+  'Error updating Checkout': {
+    value: string;
+  };
+  'Expected delivery': {
+    value: string;
+  };
+  'Go to payment': {
+    value: string;
+  };
+  Guaranteed: {
+    value: string;
+  };
+  'Keep shopping': {
+    value: string;
+  };
+  'Know about duties and taxes before you buy. Shop with confidence!': {
+    value: string;
+  };
+  'No shipping method selected': {
+    value: string;
+  };
+  'No shipping methods found - try editing your address or contacting support if the error persists': {
+    value: string;
+  };
+  'Order is over the de minimis threshold for both duty and tax': {
+    value: string;
+  };
+  'Order total': {
+    value: string;
+  };
+  Pay: {
+    value: string;
+  };
+  'Payment failed': {
+    value: string;
+  };
+  'Payment failed. Please try another payment method.': {
+    value: string;
+  };
+  'Payment method': {
+    value: string;
+  };
+  "Payment processing. We'll update you when payment is received.": {
+    value: string;
+  };
+  'Powered by': {
+    value: string;
+  };
+  'Prepay duties and taxes at checkout': {
+    value: string;
+  };
+  'See duty and tax thresholds': {
+    value: string;
+  };
+  Shipping: {
+    value: string;
+  };
+  'Shipping information': {
+    value: string;
+  };
+  'Shipping method': {
+    value: string;
+  };
+  'Something went wrong.': {
+    value: string;
+  };
+  Spend: {
+    value: string;
+  };
+  'Taxes will apply to all orders': {
+    value: string;
+  };
+  "There's been an error creating your checkout session. Please reload and try again or contact support if the error persists": {
+    value: string;
+  };
+  "There's been an error updating your checkout session. Please reload and try again or contact support if the error persists": {
+    value: string;
+  };
+  "We couldn't complete your payment. Please verify the payment details and try again.": {
+    value: string;
+  };
+  "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
+    value: string;
+  };
+  'Welcome to': {
+    value: string;
+  };
+  'Welcome!': {
+    value: string;
+  };
+  "You're all set!": {
+    value: string;
+  };
+  'Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.': {
+    value: string;
+  };
+  'business days': {
+    value: string;
+  };
+  'duty free': {
+    value: string;
+  };
+  'tax free': {
+    value: string;
+  };
+};