@occluze/tether 0.6.6 → 0.6.8

package/src/variant-render.js

@@ -0,0 +1,165 @@
+/**
+ * The DOM writes of a product scope that follow the visitor's choice, on every change: `product-state.js`'s view as
+ * text, selected and unavailable states, `tether-show` conditions and the add-to-cart buttons.
+ */
+import { attr, sel, get, qsa, formatMoney, formatPercent, setText, setImage, setSelected, show } from './dom.js';
+import { STATUS_KEYS, ownedBy } from './status.js';
+import { allocationFor } from './selling-plans.js';
+import { isValueAvailable, planBindTexts, variantBindTexts } from './product-state.js';
+import { isSelect, selectsIn } from './product-render.js';
+/** @import { Formatters, ProductView } from './product-state.js' */
+/** @import { RenderScope } from './product-render.js' */
+
+/** @type {Formatters} */
+const FORMAT = { money: formatMoney, percent: formatPercent };
+
+/**
+ * @param {Element} el
+ * @returns {el is HTMLInputElement}
+ */
+const isInput = (el) => el.tagName === 'INPUT';
+
+/**
+ * The element of an add-to-cart button that holds its label, with the label as written kept in
+ * `data-tether-label`, so mode-dependent texts (`tether-subscribe-text`, `tether-soldout-text`) can be undone.
+ *
+ * @param {HTMLElement} button
+ * @returns {{ label: HTMLElement, original: string }}
+ */
+export function addButtonLabel(button) {
+  const label = qsa(button, sel('add-label'))[0] ?? button;
+  const original = label.dataset['tetherLabel'] ?? (isInput(label) ? label.value : label.textContent);
+  label.dataset['tetherLabel'] = original;
+  return { label, original };
+}
+
+/**
+ * @param {RenderScope} scope
+ * @param {ProductView} view
+ */
+function renderOptionStates(scope, view) {
+  const { product } = scope;
+  const selectedValue = (/** @type {string | null} */ authored) => view.selected[scope.optName(authored)] ?? '';
+  scope.$(sel('option-selected')).forEach((el) => {
+    setText(el, selectedValue(get(el, 'option-selected')));
+  });
+  scope.$(sel('option-list')).forEach((container) => {
+    const name = scope.optName(get(container, 'option-list'));
+    qsa(container, sel('option-value')).forEach((node) => {
+      const value = get(node, 'option-value') ?? '';
+      setSelected(node, view.selected[name] === value);
+      const unavailable = !isValueAvailable(product, view.selected, name, value);
+      node.classList.toggle('is-unavailable', unavailable);
+      node.setAttribute('data-unavailable', unavailable ? 'true' : 'false');
+    });
+  });
+  selectsIn(scope, sel('option')).forEach((select) => {
+    select.value = selectedValue(get(select, 'option'));
+  });
+  selectsIn(scope, sel('variant-select')).forEach((select) => {
+    select.value = view.variant.id;
+  });
+}
+
+/**
+ * The purchase toggles and the plan list and select.
+ *
+ * @param {RenderScope} scope
+ * @param {ProductView} view
+ */
+function renderPurchaseStates(scope, view) {
+  const { variant, purchase, isSubscription } = view;
+  scope.$(sel('purchase')).forEach((el) => {
+    if (isSelect(el)) {
+      el.value = purchase.kind;
+      return;
+    }
+    const mode = get(el, 'purchase');
+    setSelected(el, mode === purchase.kind);
+    const unavailable = mode === 'subscription' ? !view.subscriptionAvailable : scope.product.requiresSellingPlan;
+    el.classList.toggle('is-unavailable', unavailable);
+  });
+  scope.$(sel('plan-value')).forEach((node) => {
+    const planId = get(node, 'plan-value') ?? '';
+    setSelected(node, isSubscription && planId === purchase.planId);
+    node.classList.toggle('is-unavailable', !allocationFor(variant, planId));
+    const plan = scope.plans.find((candidate) => candidate.id === planId);
+    const texts = planBindTexts(variant, planId, plan, FORMAT);
+    qsa(node, sel('plan-bind')).forEach((el) => {
+      const text = texts.get(get(el, 'plan-bind') ?? '');
+      if (text) setText(el, text());
+    });
+  });
+  selectsIn(scope, sel('plan')).forEach((select) => {
+    select.value = isSubscription ? (purchase.planId ?? '') : '';
+  });
+}
+
+/**
+ * The `tether-show` conditions, with the scope's own status: a product scope that renders is ready.
+ *
+ * @param {RenderScope} scope
+ * @param {ProductView} view
+ */
+function renderConditions(scope, view) {
+  /** @type {Map<string, boolean>} */
+  const conditions = new Map(Object.entries(view.show));
+  STATUS_KEYS.forEach((status) => conditions.set(status, status === 'ready'));
+  scope.$(sel('show')).forEach((el) => {
+    const key = get(el, 'show') ?? '';
+    const visible = conditions.get(key);
+    if (visible === undefined) return;
+    // State blocks of a list nested in this product belong to that list.
+    if (STATUS_KEYS.some((status) => status === key) && !ownedBy(el, scope.root)) return;
+    show(el, visible);
+  });
+}
+
+/**
+ * @param {RenderScope} scope
+ * @param {ProductView} view
+ */
+function renderAddButtons(scope, view) {
+  const disabled = !view.variant.availableForSale;
+  scope.$(sel('add-to-cart')).forEach((button) => {
+    button.classList.toggle('is-disabled', disabled);
+    button.setAttribute('aria-disabled', String(disabled));
+    // A <button> or <input> is disabled; a link or div carries only aria-disabled.
+    if ('disabled' in button) button.disabled = disabled;
+    const soldOutText = get(button, 'soldout-text');
+    const subscribeText = get(button, 'subscribe-text');
+    if (!soldOutText && !subscribeText) return;
+    const { label, original } = addButtonLabel(button);
+    let text = original;
+    if (view.isSubscription && subscribeText) text = subscribeText;
+    if (disabled && soldOutText) text = soldOutText;
+    if (button.getAttribute('aria-busy') !== 'true') setText(label, text);
+  });
+}
+
+/**
+ * Writes what follows the variant and purchase.
+ *
+ * @param {RenderScope} scope
+ * @param {ProductView} view
+ */
+export function writeVariant(scope, view) {
+  const { variant } = view;
+  const { product } = scope;
+  const texts = variantBindTexts(view, FORMAT);
+  scope.$(sel('bind')).forEach((el) => {
+    const key = get(el, 'bind') ?? '';
+    if (key === 'variant-image') {
+      setImage(el, variant.image?.url || product.featuredImage?.url, variant.image?.altText || product.title);
+      return;
+    }
+    const text = texts.get(key);
+    if (text) setText(el, text());
+  });
+  renderOptionStates(scope, view);
+  renderPurchaseStates(scope, view);
+  renderConditions(scope, view);
+  scope.root.classList.toggle('is-subscription', view.isSubscription);
+  scope.root.setAttribute(attr('purchase-mode'), view.isSubscription ? 'subscription' : 'one-time');
+  renderAddButtons(scope, view);
+}

package/types/astro.d.ts

@@ -1,6 +1,14 @@
 import type { TetherConfig } from './index.js';
 
-type Serializable<T> = { [K in keyof T as T[K] extends ((...args: any[]) => any) | null | undefined ? (Exclude<T[K], null | undefined> extends (...args: any[]) => any ? never : K) : K]: T[K] };
+type Serializable<T> = {
+  [
+    K in keyof T as T[K] extends ((...args: any[]) => any) | null | undefined
+      ? Exclude<T[K], null | undefined> extends (...args: any[]) => any
+        ? never
+        : K
+      : K
+  ]: T[K];
+};
 
 export interface TetherAstroOptions extends Partial<Serializable<TetherConfig>> {
   /** Add the Tether script to every page (default true). False: import and init it yourself. */
@@ -14,4 +22,7 @@ export interface TetherAstroOptions extends Partial<Serializable<TetherConfig>>
  * (PUBLIC_SHOPIFY_DOMAIN, PUBLIC_SHOPIFY_STOREFRONT_TOKEN). Functions (onError, hooks) go in
  * window.TETHER_CONFIG in your layout.
  */
-export default function tether(options?: TetherAstroOptions): { name: string; hooks: Record<string, (...args: any[]) => unknown> };
+export default function tether(options?: TetherAstroOptions): {
+  name: string;
+  hooks: Record<string, (...args: any[]) => unknown>;
+};

package/types/index.d.ts

@@ -2,8 +2,16 @@
 // Shopify Storefront API objects are typed loosely (`ShopifyProduct` etc.): Tether passes them
 // through as Shopify returns them. See https://shopify.dev/docs/api/storefront for the full shape.
 
-export interface Money { amount: string; currencyCode: string }
-export interface ShopifyImage { url: string; altText?: string | null; width?: number; height?: number }
+export interface Money {
+  amount: string;
+  currencyCode: string;
+}
+export interface ShopifyImage {
+  url: string;
+  altText?: string | null;
+  width?: number;
+  height?: number;
+}
 
 export interface ShopifySellingPlan {
   id: string;
@@ -62,7 +70,12 @@ export interface ShopifyCartLine {
   merchandise: ShopifyVariant & { product: Pick<ShopifyProduct, 'id' | 'handle' | 'title'> & Record<string, unknown> };
   sellingPlanAllocation?: { sellingPlan: { id: string; name: string } } | null;
   attributes?: { key: string; value: string }[];
-  cost: { totalAmount: Money; subtotalAmount: Money; amountPerQuantity: Money; compareAtAmountPerQuantity?: Money | null };
+  cost: {
+    totalAmount: Money;
+    subtotalAmount: Money;
+    amountPerQuantity: Money;
+    compareAtAmountPerQuantity?: Money | null;
+  };
   [k: string]: unknown;
 }
 
@@ -152,9 +165,13 @@ export interface TetherConfig {
     /** The *.myshopify.com domain, if domain is something else. */
     shopDomain?: string;
     locale?: string;
+    /** Replaces location.assign for the login redirect (popups, tests). */
+    navigate?: (url: string) => void;
   } | null;
   /** tether-show="low-stock" at this many or fewer (default 5). */
   lowStock?: number;
+  /** Milliseconds the search part waits after the last keystroke (default 150). */
+  searchDelay?: number;
   /** true: ?variant= (and selling_plan=) follow the visitor's choice on the page's main product. */
   variantUrl?: boolean;
   /** Your text for Shopify's cart warnings (stock, codes), e.g. translated by code. Return nothing to keep Shopify's. */
@@ -186,7 +203,8 @@ export interface TetherConfig {
   debug?: boolean;
 }
 
-export type TetherErrorCode = 'NOT_FOUND' | 'NETWORK' | 'NOT_CONFIGURED' | 'INVALID_COUNTRY' | 'ERROR' | `HTTP_${number}`;
+export type TetherErrorCode =
+  'NOT_FOUND' | 'NETWORK' | 'NOT_CONFIGURED' | 'INVALID_COUNTRY' | 'ERROR' | `HTTP_${number}`;
 
 export declare class TetherError extends Error {
   name: 'TetherError';
@@ -208,9 +226,32 @@ export interface LineInput {
 }
 
 /** Shopify's note on the last cart change; target is the cart line id it's about. */
-export interface CartWarning { code: string; message: string; target?: string }
+export interface CartWarning {
+  code: string;
+  message: string;
+  target?: string;
+}
+
+/**
+ * What the cart is known to be: `unknown` until the saved cart has loaded, `empty` without a cart, `error` after a
+ * failed load or change (with the cart as Shopify last sent it).
+ */
+export type CartStatus =
+  | { kind: 'unknown' }
+  | { kind: 'empty' }
+  | { kind: 'ready'; cart: ShopifyCart }
+  | { kind: 'error'; error: unknown; cart: ShopifyCart | null };
+
+/** The logged-in customer the cart belongs to (set by the account part). */
+export interface CustomerLink {
+  /** The Customer Account API token: carts created from now on belong to the customer. */
+  accessToken: string | null;
+  /** The account's own checkout URL; null from it, or no function, uses the cart's. */
+  beforeCheckout: (() => Promise<string | null>) | null;
+}
 
 export interface Cart {
+  readonly status: CartStatus;
   readonly state: ShopifyCart | null;
   readonly lines: ShopifyCartLine[];
   readonly count: number;
@@ -219,10 +260,16 @@ export interface Cart {
   readonly warnings: CartWarning[];
   /** true once the saved cart (or the absence of one) is known. */
   readonly loaded: boolean;
+  /** Links the cart to a logged-in customer, or unlinks it with nulls. Fields left out keep their value. */
+  setCustomer(link: Partial<CustomerLink>): void;
   id(): string | null;
   init(): Promise<ShopifyCart | null>;
   /** add(variantId, qty) · add({ variantId, quantity, sellingPlanId, attributes }) · add([line, line]) */
-  add(input: string | LineInput | LineInput[], quantity?: number, opts?: Omit<LineInput, 'variantId' | 'quantity'>): Promise<ShopifyCart>;
+  add(
+    input: string | LineInput | LineInput[],
+    quantity?: number,
+    opts?: Omit<LineInput, 'variantId' | 'quantity'>,
+  ): Promise<ShopifyCart>;
   /** updateLine(id, 3) · updateLine(id, { sellingPlanId: null }) switches to one-time. */
   updateLine(lineId: string, patch: number | (LineInput & { quantity?: number })): Promise<ShopifyCart>;
   removeLine(lineIds: string | string[]): Promise<ShopifyCart>;
@@ -237,7 +284,10 @@ export interface Cart {
   /** Rejects with code INVALID_DISCOUNT (and doesn't keep the code) when Shopify doesn't accept it. */
   applyDiscount(code: string): Promise<ShopifyCart>;
   removeDiscount(code: string): Promise<ShopifyCart>;
-  setBuyerIdentity(identity: { countryCode?: string; email?: string; phone?: string }, opts?: { create?: boolean }): Promise<ShopifyCart | null>;
+  setBuyerIdentity(
+    identity: { countryCode?: string; email?: string; phone?: string },
+    opts?: { create?: boolean },
+  ): Promise<ShopifyCart | null>;
   checkout(target?: '_self' | '_blank'): Promise<void>;
   open(): void;
   close(): void;
@@ -246,7 +296,12 @@ export interface Cart {
   drawers(): HTMLElement[];
   render(): void;
   /** For framework islands: fn(cart, meta) now, when the saved cart has loaded and after every change. Returns unsubscribe. */
-  subscribe(fn: (cart: ShopifyCart | null, meta: { open: boolean; count: number; loaded: boolean; warnings: CartWarning[] }) => void): () => void;
+  subscribe(
+    fn: (
+      cart: ShopifyCart | null,
+      meta: { open: boolean; count: number; loaded: boolean; warnings: CartWarning[] },
+    ) => void,
+  ): () => void;
 }
 
 export interface ProductScope {
@@ -279,10 +334,16 @@ export interface SellingPlanHelpers {
   planPrice(variant: ShopifyVariant, planId: string): Money | null;
   planCheckoutCharge(variant: ShopifyVariant, planId: string): Money | null;
   planSavings(variant: ShopifyVariant, planId: string): { amount: Money | null; percentage: number };
-  planAdjustment(plan: ShopifySellingPlan | null | undefined): { type: 'percentage' | 'amount' | 'price'; value: number | Money } | null;
+  planAdjustment(
+    plan: ShopifySellingPlan | null | undefined,
+  ): { type: 'percentage' | 'amount' | 'price'; value: number | Money } | null;
   findPlan(product: ShopifyProduct, ref: string | null | undefined): ShopifySellingPlan | null;
   toGid(value: string | number, type: string): string | null;
-  GID: { product(v: string | number): string | null; variant(v: string | number): string | null; sellingPlan(v: string | number): string | null };
+  GID: {
+    product(v: string | number): string | null;
+    variant(v: string | number): string | null;
+    sellingPlan(v: string | number): string | null;
+  };
 }
 
 export interface ProductPage {
@@ -294,18 +355,41 @@ export interface ProductPage {
 export interface Localization {
   country?: { isoCode: string; name: string; currency?: { isoCode: string; symbol: string } };
   language?: { isoCode: string; name: string };
-  availableCountries: { isoCode: string; name: string; currency?: { isoCode: string; symbol: string }; availableLanguages?: { isoCode: string; name: string }[] }[];
+  availableCountries: {
+    isoCode: string;
+    name: string;
+    currency?: { isoCode: string; symbol: string };
+    availableLanguages?: { isoCode: string; name: string }[];
+  }[];
+}
+
+export type MarketSource = 'saved' | 'server' | 'webflow';
+
+/** The market fields detection found, and the source each came from (no sources with detect: false). */
+export interface DetectedMarket {
+  country?: string;
+  language?: string;
+  locale?: string;
+  sources?: Partial<Record<'country' | 'language' | 'locale', MarketSource>>;
 }
 
 export interface DiagnoseReport {
   version: string;
   config: Record<string, unknown>;
   apiVersion: { version: string; ok: boolean; monthsLeft?: number; next?: string; note: string };
-  market: { country?: string; language?: string; locale?: string; sources: Record<string, string> } | null;
+  /** The market in use (a visitor's choice included), and what detection would pick (null without markets.detect). */
+  market: { country: string | null; language: string | null; locale: string | null; detected: DetectedMarket | null };
   reachable: boolean;
   shop: { name?: string; url?: string; currency?: string } | null;
   latencyMs: number | null;
-  products: { key: string; handle?: string; title?: string; plans?: number; error?: string }[];
+  products: {
+    key: string;
+    handle?: string;
+    title?: string;
+    plans?: number;
+    requiresSellingPlan?: boolean;
+    error?: string;
+  }[];
   sellingPlans: { product: string; group?: string; plan: string; id: string }[];
   problems: { level: 'error' | 'warn'; message: string; element?: string }[];
 }
@@ -316,7 +400,13 @@ export interface TetherEvents {
   'product-ready': { product: ShopifyProduct; scope: ProductScope };
   'product-updated': { product: ShopifyProduct; scope: ProductScope };
   'product-not-found': { key: string | null; source: string };
-  'variant-changed': { product: ShopifyProduct; variant: ShopifyVariant; selected: Record<string, string>; purchase: 'one-time' | 'subscription'; sellingPlanId: string | null };
+  'variant-changed': {
+    product: ShopifyProduct;
+    variant: ShopifyVariant;
+    selected: Record<string, string>;
+    purchase: 'one-time' | 'subscription';
+    sellingPlanId: string | null;
+  };
   'product-added': { product: ShopifyProduct; variant: ShopifyVariant; line: LineInput };
   added: { cart: ShopifyCart; lines: LineInput[] };
   'group-added': { group: string | null; lines: LineInput[] };
@@ -348,27 +438,74 @@ export interface Tether {
   withContext(query: string, ctx?: { country?: string; language?: string }): string;
   cart: Cart;
   getProduct(handleOrId: string): Promise<ShopifyProduct>;
-  getProducts(opts?: { collection?: string; query?: string; first?: number; after?: string | null; sortKey?: string; reverse?: boolean; filters?: unknown[] }): Promise<ProductPage>;
-  getRecommendations(product: string | Pick<ShopifyProduct, 'id'>, intent?: 'RELATED' | 'COMPLEMENTARY'): Promise<ShopifyProduct[]>;
+  getProducts(opts?: {
+    collection?: string;
+    query?: string;
+    first?: number;
+    after?: string | null;
+    sortKey?: string;
+    reverse?: boolean;
+    filters?: unknown[];
+  }): Promise<ProductPage>;
+  getRecommendations(
+    product: string | Pick<ShopifyProduct, 'id'>,
+    intent?: 'RELATED' | 'COMPLEMENTARY',
+  ): Promise<ShopifyProduct[]>;
   getScope(el: Element | null | undefined): ProductScope | null;
   addGroup(button: Element): Promise<ShopifyCart | null>;
   /** Customer accounts (loads the account part): login(), logout(), customer(), orders(), query(gql, vars), getToken(). */
   account: {
     login(opts?: { returnTo?: string; locale?: string }): Promise<void>;
     logout(opts?: { returnTo?: string }): Promise<void>;
-    customer(): Promise<{ id: string; firstName?: string | null; lastName?: string | null; displayName?: string; emailAddress?: { emailAddress: string } | null } | null>;
-    orders(opts?: { first?: number }): Promise<Array<{ id: string; name: string; processedAt: string; financialStatus?: string; fulfillmentStatus?: string; statusPageUrl: string; totalPrice: Money }>>;
+    customer(): Promise<{
+      id: string;
+      firstName?: string | null;
+      lastName?: string | null;
+      displayName?: string;
+      emailAddress?: { emailAddress: string } | null;
+    } | null>;
+    orders(opts?: { first?: number }): Promise<
+      Array<{
+        id: string;
+        name: string;
+        processedAt: string;
+        financialStatus?: string;
+        fulfillmentStatus?: string;
+        statusPageUrl: string;
+        totalPrice: Money;
+      }>
+    >;
     query<T = any>(query: string, variables?: Record<string, unknown>): Promise<T>;
     getToken(): Promise<string | null>;
+    /** True while a customer is logged in, as far as this page knows without asking. */
+    isLoggedIn(): Promise<boolean>;
+    /** Finishes a login coming back from Shopify (browser mode); true when there was one. */
+    handleCallback(): Promise<boolean>;
+    /** Fills the account markup in root: logged-in/out content, the customer, orders and the account pages. */
+    render(root?: ParentNode): Promise<void>;
+    /** What mount() runs: finishes a login coming back on the first call, then renders root. */
+    mountAccount(root?: ParentNode): Promise<void>;
     /** One order in full (lines, totals, addresses, fulfillments with tracking, returnable lines); null if not the customer's. */
     order(id: string | number): Promise<Record<string, any> | null>;
-    updateProfile(fields: { firstName?: string; lastName?: string }): Promise<{ firstName?: string | null; lastName?: string | null }>;
+    updateProfile(fields: {
+      firstName?: string;
+      lastName?: string;
+    }): Promise<{ firstName?: string | null; lastName?: string | null }>;
     addresses(): Promise<Array<CustomerAddress & { isDefault: boolean }>>;
-    saveAddress(address: Partial<CustomerAddressInput> | null, opts?: { id?: string; isDefault?: boolean }): Promise<CustomerAddress>;
+    saveAddress(
+      address: Partial<CustomerAddressInput> | null,
+      opts?: { id?: string; isDefault?: boolean },
+    ): Promise<CustomerAddress>;
     deleteAddress(id: string): Promise<string>;
     subscriptions(): Promise<Array<Record<string, any>>>;
-    subscriptionAction(id: string | number, action: 'pause' | 'resume' | 'skip' | 'unskip' | 'cancel'): Promise<Record<string, any>>;
-    requestReturn(orderId: string | number, lines: Array<{ lineItemId: string; quantity: number; reasonId?: string; note?: string }>): Promise<{ id: string; status: string }>;
+    subscriptionAction(
+      id: string | number,
+      action: 'pause' | 'resume' | 'skip' | 'unskip' | 'cancel',
+    ): Promise<Record<string, any>>;
+    requestReturn(
+      orderId: string | number,
+      lines: Array<{ lineItemId: string; quantity: number; reasonId?: string; note?: string }>,
+    ): Promise<{ id: string; status: string }>;
   };
   primeProduct(product: ShopifyProduct): void;
   normalizeProductKey(raw: string | number): string | null;
@@ -381,12 +518,15 @@ export interface Tether {
   resolveProductKey(el: Element, location?: Location | URL): { key: string | null; fromUrl: boolean; raw: string };
   /** Switch market: prices, currency, cart and every product on the page follow. */
   setCountry(code: string, opts?: SetCountryOptions): Promise<ShopifyCart | null>;
-  detectMarket(markets?: MarketsConfig): Promise<{ country?: string; language?: string; locale?: string; sources: Record<string, string> }>;
+  detectMarket(markets?: MarketsConfig | null): Promise<DetectedMarket>;
   getLocalization(): Promise<Localization>;
   /** Logs and returns what's wrong on this page (config, token, API version, plans, markup). */
   diagnose(opts?: { root?: ParentNode; silent?: boolean }): Promise<DiagnoseReport>;
   /** Listen to a Tether event; returns a function that stops listening. */
-  on<K extends keyof TetherEvents>(name: K, fn: (detail: TetherEvents[K], event: CustomEvent<TetherEvents[K]>) => void): () => void;
+  on<K extends keyof TetherEvents>(
+    name: K,
+    fn: (detail: TetherEvents[K], event: CustomEvent<TetherEvents[K]>) => void,
+  ): () => void;
   on(name: string, fn: (detail: any, event: CustomEvent) => void): () => void;
 }
 
@@ -418,9 +558,20 @@ declare global {
 }
 
 export interface CustomerAddressInput {
-  firstName: string; lastName: string; company: string; address1: string; address2: string;
-  city: string; zip: string; zoneCode: string; countryCode: string; phoneNumber: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  address1: string;
+  address2: string;
+  city: string;
+  zip: string;
+  zoneCode: string;
+  countryCode: string;
+  phoneNumber: string;
 }
 export interface CustomerAddress extends Partial<CustomerAddressInput> {
-  id: string; province?: string | null; country?: string | null; formatted: string[];
+  id: string;
+  province?: string | null;
+  country?: string | null;
+  formatted: string[];
 }