@afosto/checkout-ui 0.0.1-alpha.1

package/dist/hooks/useCheckoutCart.js

@@ -0,0 +1,470 @@
+import { useCheckoutState as H } from "./useCheckoutState.js";
+import { useCheckoutForm as J } from "./useCheckoutForm.js";
+import { useQueryClient as V, useMutation as i } from "@tanstack/react-query";
+import { useCheckoutAnalytics as W } from "./useCheckoutAnalytics.js";
+import { useCheckoutAuth as X } from "./useCheckoutAuth.js";
+import { useCheckoutSummary as Y } from "./useCheckoutSummary.js";
+import { isDefined as Z } from "@afosto/utils";
+const ft = (k) => {
+  const {
+    analytics: S,
+    cartId: c,
+    defaultOperations: R,
+    isLoadingChannel: f,
+    locale: F,
+    settings: u,
+    storefront: g,
+    operations: e,
+    steps: q
+  } = k || {}, m = V(), y = X({
+    operations: e,
+    settings: u,
+    storefront: g
+  }), { isInitializingAuth: A } = y, C = Y(), h = J({
+    locale: F,
+    settings: u,
+    steps: q
+  }), { initializeSteps: D } = h, P = W({
+    analytics: S,
+    settings: u
+  }), n = {
+    ...y,
+    ...C,
+    ...h,
+    ...P,
+    defaultOperations: R,
+    operations: e,
+    settings: u,
+    storefront: g
+  }, w = H({
+    enabled: !!c && !A && !f,
+    notFound: !c,
+    onError: e.initial.error,
+    onFormat: async (t) => {
+      const o = await e.initial.formatter(
+        t,
+        n
+      );
+      return o?.cart ? o : null;
+    },
+    onSuccess: async (t) => {
+      await e.initial.success(t, n);
+      try {
+        const { skipCheckCompletedSteps: o } = t || {};
+        D(t.cart, t, { skipCheckCompletedSteps: o });
+      } catch {
+      }
+    },
+    queryKey: ["initialCheckoutCartState", c],
+    queryFn: async () => e.initial.queryFn(
+      { id: c, intent: "BEGIN_CHECKOUT" },
+      n
+    )
+  }), { setIsAddingExpressPaymentMethod: M, isInitializing: T } = w, E = T || f, I = i({
+    mutationFn: async (t) => e.addCustomer.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addCustomer.formatter(
+        t,
+        n
+      );
+      e.addCustomer.success(o, n);
+    },
+    onError: (t) => {
+      e.addCustomer.error(t);
+    }
+  }), N = i({
+    mutationFn: async (t) => e.addCustomerCountryCode.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addCustomerCountryCode.formatter(
+        t,
+        n
+      );
+      e.addCustomerCountryCode.success(
+        o,
+        n
+      );
+    },
+    onError: (t) => {
+      e.addCustomerCountryCode.error(t);
+    }
+  }), v = i({
+    mutationFn: async (t) => e.addInformation.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addInformation.formatter(
+        t,
+        n
+      );
+      e.addInformation.success(o, n);
+    },
+    onError: (t) => {
+      e.addInformation.error(t);
+    }
+  }), K = i({
+    mutationFn: async (t) => e.addNote.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addNote.formatter(
+        t,
+        n
+      );
+      e.addNote.success(o, n);
+    },
+    onError: (t) => {
+      e.addNote.error(t);
+    }
+  }), x = i({
+    mutationFn: async (t) => e.addPaymentMethod.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addPaymentMethod.formatter(
+        t,
+        n
+      );
+      e.addPaymentMethod.success(o, n);
+    },
+    onError: (t) => {
+      e.addPaymentMethod.error(t);
+    }
+  }), Q = i({
+    mutationFn: async (t) => e.addPickupPoint.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addPickupPoint.formatter(
+        t,
+        n
+      );
+      e.addPickupPoint.success(o, n);
+    },
+    onError: (t) => {
+      e.addPickupPoint.error(t);
+    }
+  }), j = i({
+    mutationFn: async (t) => e.addShippingMethod.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.addShippingMethod.formatter(
+        t,
+        n
+      );
+      e.addShippingMethod.success(o, n);
+    },
+    onError: (t) => {
+      e.addShippingMethod.error(t);
+    }
+  }), L = i({
+    mutationFn: async (t) => e.checkout.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.checkout.formatter(
+        t,
+        n
+      );
+      e.checkout.success(o, n);
+    },
+    onError: (t) => {
+      e.checkout.error(t);
+    }
+  }), O = i({
+    mutationFn: async (t) => e.setAgreementTemplate.queryFn(t, n),
+    onSuccess: async (t) => {
+      const o = await e.setAgreementTemplate.formatter(
+        t,
+        n
+      );
+      e.setAgreementTemplate.success(
+        o,
+        n
+      );
+    },
+    onError: (t) => {
+      e.setAgreementTemplate.error(t);
+    }
+  }), z = async ({
+    customer: t
+  }) => {
+    const o = await I.mutateAsync({
+      cartId: c,
+      customer: t
+    }), r = await e.addCustomer.formatter(
+      o,
+      n
+    ), { cart: a, ...s } = r || {};
+    return {
+      ...a,
+      ...s
+    };
+  }, b = async ({
+    countryCode: t
+  }) => {
+    const o = await N.mutateAsync({
+      cartId: c,
+      countryCode: t
+    }), r = await e.addCustomerCountryCode.formatter(
+      o,
+      n
+    ), { cart: a, ...s } = r || {};
+    return {
+      ...a,
+      ...s
+    };
+  }, U = async ({
+    billingAddress: t,
+    customer: o,
+    phoneNumber: r,
+    shippingAddress: a
+  }) => {
+    const s = await v.mutateAsync({
+      cartId: c,
+      billingAddress: t,
+      customer: o,
+      phoneNumber: r,
+      shippingAddress: a
+    }), d = await e.addInformation.formatter(
+      s,
+      n
+    ), { cart: p, ...G } = d || {};
+    return {
+      ...p,
+      ...G
+    };
+  }, _ = async ({ note: t }) => {
+    const o = await K.mutateAsync({
+      cartId: c,
+      note: t
+    }), r = await e.addNote.formatter(
+      o,
+      n
+    ), { cart: a, ...s } = r || {};
+    return {
+      ...a,
+      ...s
+    };
+  }, $ = async () => {
+    const t = await L.mutateAsync({
+      cartId: c
+    }), o = await e.checkout.formatter(
+      t,
+      n
+    );
+    if (!o?.order)
+      return;
+    if (o?.order?.billing?.payment?.method?.code?.toLowerCase() === "pin") {
+      const { checkout: p } = u?.channelLinks || {};
+      window.location.href = `${p}/payment/execute?order_id=${o?.order?.id}`;
+      return;
+    }
+    const [a] = o?.order?.options?.proceedingStep?.proceeding?.options || [], { method: s, url: d } = a || {};
+    s?.toLowerCase() === "follow" && Z(d) && (window.location.href = d);
+  }, B = async () => {
+    try {
+      const t = await m.fetchQuery({
+        queryKey: ["getCartInitialPaymentStep", c],
+        queryFn: async () => e.initialPaymentStep.queryFn(
+          {
+            id: c
+          },
+          n
+        )
+      }), o = await e.initialPaymentStep.formatter(
+        t,
+        n
+      ), { agreementOptions: r, agreementTemplate: a, paymentMethods: s } = o || {};
+      return e.initialPaymentStep.success(
+        o,
+        n
+      ), {
+        agreementOptions: r,
+        agreementTemplate: a,
+        paymentMethods: s
+      };
+    } catch (t) {
+      return e.initialPaymentStep.error(t), Promise.reject(t);
+    }
+  }, l = async ({
+    methodId: t,
+    issuerId: o,
+    terminalId: r
+  }) => {
+    const a = await x.mutateAsync({
+      cartId: c,
+      methodId: t,
+      issuerId: o,
+      terminalId: r
+    }), s = await e.addPaymentMethod.formatter(
+      a,
+      n
+    ), { cart: d, ...p } = s || {};
+    return {
+      ...d,
+      ...p
+    };
+  };
+  return {
+    ...w,
+    ...y,
+    ...C,
+    ...h,
+    ...P,
+    addCustomer: z,
+    addCustomerCountryCode: b,
+    addExpressPaymentMethod: async ({
+      methodId: t
+    }) => {
+      try {
+        return M(!0), l({ methodId: t });
+      } catch {
+        M(!1);
+      }
+    },
+    addInformation: U,
+    addNote: _,
+    addPaymentMethod: l,
+    addPickupPoint: async ({
+      pickupPointId: t
+    }) => {
+      const o = await Q.mutateAsync({
+        cartId: c,
+        pickupPointId: t
+      }), r = await e.addPickupPoint.formatter(
+        o,
+        n
+      ), { cart: a, ...s } = r || {};
+      return {
+        ...a,
+        ...s
+      };
+    },
+    addShippingMethod: async ({
+      methodId: t
+    }) => {
+      const o = await j.mutateAsync({
+        cartId: c,
+        methodId: t
+      }), r = await e.addShippingMethod.formatter(
+        o,
+        n
+      ), { cart: a, ...s } = r || {};
+      return {
+        ...a,
+        ...s
+      };
+    },
+    checkout: $,
+    getInitialPaymentStep: B,
+    getPaymentMethods: async () => {
+      try {
+        const t = await m.fetchQuery({
+          queryKey: ["getCartPaymentMethods", c],
+          queryFn: async () => e.getPaymentMethods.queryFn(
+            {
+              id: c
+            },
+            n
+          )
+        }), o = await e.getPaymentMethods.formatter(
+          t,
+          n
+        ), { currentPaymentMethod: r, paymentMethods: a } = o || {};
+        return e.getPaymentMethods.success(o, n), {
+          currentPaymentMethod: r,
+          paymentMethods: a,
+          payments: []
+        };
+      } catch (t) {
+        return e.getPaymentMethods.error(t), Promise.reject(t);
+      }
+    },
+    getPickupPoints: async ({
+      countryCode: t,
+      postalCode: o
+    }) => {
+      try {
+        const r = await m.fetchQuery({
+          queryKey: ["getCartPickupPoints", t, o],
+          queryFn: async () => e.getPickupPoints.queryFn(
+            {
+              id: c,
+              countryCode: t,
+              postalCode: o
+            },
+            n
+          )
+        }), a = await e.getPickupPoints.formatter(
+          r,
+          n
+        ), { pickupPoints: s } = a || {};
+        return e.getPickupPoints.success(a, n), {
+          pickupPoints: s
+        };
+      } catch (r) {
+        return e.getPickupPoints.error(r), Promise.reject(r);
+      }
+    },
+    getReviewCheckoutData: async () => {
+      try {
+        const t = await m.fetchQuery({
+          queryKey: ["getCartReviewCheckoutData", c],
+          queryFn: async () => e.getReviewCheckoutData.queryFn(
+            {
+              id: c
+            },
+            n
+          )
+        }), o = await e.getReviewCheckoutData.formatter(
+          t,
+          n
+        ), { cart: r, ...a } = o || {};
+        return e.getReviewCheckoutData.success(
+          o,
+          n
+        ), a;
+      } catch (t) {
+        return e.getReviewCheckoutData.error(t), Promise.reject(t);
+      }
+    },
+    getShippingMethods: async ({
+      countryCode: t,
+      postalCode: o
+    }) => {
+      try {
+        const r = await m.fetchQuery({
+          queryKey: ["getCartShippingMethods", t, o],
+          queryFn: async () => e.getShippingMethods.queryFn(
+            {
+              id: c,
+              countryCode: t,
+              postalCode: o
+            },
+            n
+          )
+        }), a = await e.getShippingMethods.formatter(
+          r,
+          n
+        ), { currentShippingMethod: s, shippingMethods: d } = a || {};
+        return e.getShippingMethods.success(
+          a,
+          n
+        ), {
+          currentShippingMethod: s,
+          shippingMethods: d
+        };
+      } catch (r) {
+        return e.getShippingMethods.error(r), Promise.reject(r);
+      }
+    },
+    isLoading: E,
+    setAgreementTemplate: async ({
+      agreementId: t
+    }) => {
+      const o = await O.mutateAsync({
+        cartId: c,
+        agreementId: t
+      }), r = await e.setAgreementTemplate.formatter(
+        o,
+        n
+      ), { cart: a, ...s } = r || {};
+      return {
+        ...a,
+        ...s
+      };
+    }
+  };
+};
+export {
+  ft as useCheckoutCart
+};

package/dist/hooks/useCheckoutForm.d.ts

@@ -0,0 +1,63 @@
+import { CheckoutErrorMessage, CheckoutSettings, CheckoutStep, CheckoutSteps, CheckoutEventName, CheckoutEventMap } from '../types';
+import { UseFormReturn } from '@afosto/components';
+import * as yup from 'yup';
+export interface UseCheckoutFormOptions {
+    locale: string;
+    settings: CheckoutSettings;
+    steps: CheckoutSteps;
+}
+export declare const useCheckoutForm: (options: UseCheckoutFormOptions) => {
+    activeStep: number;
+    billingAddressValidationSchema: Record<string, yup.AnySchema>;
+    completedSteps: string[];
+    defaultCountry: any;
+    defaultValues: any[];
+    errorMessage: CheckoutErrorMessage;
+    formatCountryAsOption: (country: Country) => {
+        label: string;
+        value: string;
+        name: string;
+        topLevelDomain: string[];
+        alpha2Code: string;
+        alpha3Code: string;
+        callingCodes: string[];
+        region: string;
+        currencies?: import('../../utils/src/index.ts').CountryCurrency[];
+        translations: {
+            [key: string]: string;
+        };
+        position?: number;
+    };
+    formRef: import('react').MutableRefObject<UseFormReturn | null>;
+    getCountryByCode: (countryCode: string) => import('@afosto/hooks').ExtendedCountry | undefined;
+    getNextStepLabel: () => string;
+    getPreviousStepLabel: () => string | undefined;
+    goToTargetStep: (targetStep: {
+        targetStep: CheckoutStep | undefined;
+        targetStepIndex: number;
+        targetSubStep: string | undefined;
+    }) => () => void;
+    initializeSteps: <TData, TResponse>(data: TData, responseData: TResponse, options?: {
+        skipCheckCompletedSteps?: boolean;
+    }) => void;
+    isProcessing: boolean;
+    nextStep: (stepValues: any, formData: any, context: any) => Promise<void>;
+    previousStep: () => void;
+    setActiveStep: import('react').Dispatch<import('react').SetStateAction<number>>;
+    setBillingAddressValidationSchema: import('react').Dispatch<import('react').SetStateAction<Record<string, yup.AnySchema>>>;
+    setErrorMessage: import('react').Dispatch<import('react').SetStateAction<CheckoutErrorMessage>>;
+    setIsProcessing: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setShippingAddressValidationSchema: import('react').Dispatch<import('react').SetStateAction<Record<string, yup.AnySchema>>>;
+    setSubmitButtonDisabled: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    shippingAddressValidationSchema: Record<string, yup.AnySchema>;
+    submitButtonDisabled: boolean;
+    subStep: string;
+    setSubStep: import('react').Dispatch<import('react').SetStateAction<string>>;
+    submitButtonPortalRef: import('react').MutableRefObject<HTMLDivElement | null>;
+    triggerEvent: <E extends CheckoutEventName>(eventName: E, eventData: CheckoutEventMap[E], context: unknown, options?: {
+        parallel?: boolean;
+    }) => Promise<undefined>;
+    validationSchema: yup.ObjectSchema<yup.Maybe<yup.AnyObject>, yup.AnyObject, any, "">[];
+};
+export type UseCheckoutFormContext = ReturnType<typeof useCheckoutForm>;
+//# sourceMappingURL=useCheckoutForm.d.ts.map

package/dist/hooks/useCheckoutForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckoutForm.d.ts","sourceRoot":"","sources":["../../libs/checkout-ui/src/hooks/useCheckoutForm.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACd,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGpE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,sBAAsB;;;;;;;;;;;;;;;;kBAAK,CAAA;;;;gBAKrC,CAAC;;;;;;iCA4Jf;QACX,UAAU,EAAE,YAAY,GAAG,SAAS,CAAC;QACrC,eAAe,EAAE,MAAM,CAAC;QACxB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;KACnC;sBAxHsB,KAAK,EAAE,SAAS,QACjC,KAAK,gBACG,SAAS,YACb;QAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;;;;mBAqIrB,CAAC,SAAS,iBAAiB,aAC1C,CAAC,aACD,gBAAgB,CAAC,CAAC,CAAC,WACrB,OAAO,YACP;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE;;CA0ElC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/hooks/useCheckoutForm.js

@@ -0,0 +1,135 @@
+import { useRef as V, useState as u } from "react";
+import { addressValidationSchema as E } from "../constants/addressValidationSchema.js";
+import * as F from "yup";
+import { useCountries as N } from "@afosto/hooks";
+import { getShortLocale as O } from "../utils/getShortLocale.js";
+import { isDefined as q } from "@afosto/utils";
+const ee = (k) => {
+  const { locale: S, settings: p, steps: o } = k ?? {}, f = V(null), [c, d] = u(0), [A, y] = u([]), [B, g] = u(null), [L, z] = u(!1), [b, T] = u(E), [h, w] = u(E), [I, m] = u(""), [D, P] = u(!1), R = V(null), { defaultCountry: v, formatCountryAsOption: C, getCountryByCode: x } = N({ locale: O(S) }), j = o.map((e) => typeof e.defaultValues == "function" ? e.defaultValues({
+    locale: S,
+    defaultCountry: v,
+    formatCountryAsOption: C,
+    getCountryByCode: x,
+    settings: p,
+    step: e
+  }) : e.defaultValues ?? {}), M = o.map(
+    (e) => e.validationSchema({
+      billingAddressValidationSchema: b,
+      shippingAddressValidationSchema: h,
+      settings: p,
+      subStep: I
+    }) ?? F.object().shape({})
+  );
+  return {
+    activeStep: c,
+    billingAddressValidationSchema: b,
+    completedSteps: A,
+    defaultCountry: v,
+    defaultValues: j,
+    errorMessage: B,
+    formatCountryAsOption: C,
+    formRef: f,
+    getCountryByCode: x,
+    getNextStepLabel: () => {
+      const e = f.current?.formProps?.data || [];
+      let i = o.findIndex(
+        (r, s) => !r.isComplete(e[s], { settings: p, step: r }) && s !== c
+      );
+      return i < 0 && (i = o.length - 1), o[i]?.label;
+    },
+    getPreviousStepLabel: () => {
+      const e = c - 1;
+      if (!(e < 0))
+        return o[e]?.label;
+    },
+    goToTargetStep: (e) => () => {
+      !q(e.targetStepIndex) || e?.targetStepIndex < 0 || (e.targetSubStep && m(e.targetSubStep), d(e.targetStepIndex));
+    },
+    initializeSteps: (e, i, r) => {
+      const s = o.reduce((t, a) => [
+        ...t,
+        a.initialize(e, i, {
+          locale: S,
+          defaultCountry: v,
+          formatCountryAsOption: C,
+          getCountryByCode: x,
+          settings: p,
+          step: a
+        })
+      ], []), l = o.filter(
+        (t, a) => t.isComplete(s[a], {
+          billingAddressValidationSchema: b,
+          settings: p,
+          shippingAddressValidationSchema: h,
+          step: t
+        }) && a !== o.length - 1
+      ).map((t) => t.key);
+      let n = 0;
+      r?.skipCheckCompletedSteps || (n = o.findIndex(
+        (t) => !l.includes(t.key)
+      )), n < 0 && (n = o.length - 1), y(l), d(n), f.current?.formProps?.setData(s), f.current?.reset(s[n]);
+    },
+    isProcessing: L,
+    nextStep: async (e, i, r) => {
+      g(null);
+      const s = o[c];
+      s && await s.submit(e, i, r);
+      const l = o.findIndex(
+        (t, a) => !t.isComplete(i[a], { settings: p, step: t }) && a !== c
+      );
+      let n = c + 1;
+      l < 0 && (n = o.length - 1), l >= c && (n = l), y((t) => [
+        ...t,
+        s.key
+      ]), d(n), m("");
+    },
+    previousStep: () => {
+      g(null), P(!1), d((e) => e - 1), m("");
+    },
+    setActiveStep: d,
+    setBillingAddressValidationSchema: T,
+    setErrorMessage: g,
+    setIsProcessing: z,
+    setShippingAddressValidationSchema: w,
+    setSubmitButtonDisabled: P,
+    shippingAddressValidationSchema: h,
+    submitButtonDisabled: D,
+    subStep: I,
+    setSubStep: m,
+    submitButtonPortalRef: R,
+    triggerEvent: async (e, i, r, s = {}) => {
+      const { parallel: l = !0 } = s || {};
+      try {
+        if (l)
+          await Promise.all(
+            o.map((n, t) => n.onEvent && typeof n.onEvent == "function" ? n.onEvent(
+              e,
+              i,
+              {
+                step: n,
+                stepIndex: t
+              },
+              r
+            ) : Promise.resolve())
+          );
+        else
+          for (const [n, t] of o.entries())
+            t.onEvent && typeof t.onEvent == "function" && await t.onEvent(
+              e,
+              i,
+              {
+                step: t,
+                stepIndex: n
+              },
+              r
+            );
+      } catch (n) {
+        return Promise.reject(n);
+      }
+    },
+    validationSchema: M
+  };
+};
+export {
+  ee as useCheckoutForm
+};