@lookiero/checkout 9.13.0 → 10.0.0-beta.0

package/dist/src/infrastructure/ui/components/templates/footer/Footer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useLocation } from "react-router-native";
+import { Footer as AuroraFooter, FooterItem } from "@lookiero/aurora";
+const Footer = () => {
+    const location = useLocation();
+    return (React.createElement(AuroraFooter, { value: location.pathname },
+        React.createElement(FooterItem, { icon: "box", text: "Inicio", value: "/" }),
+        React.createElement(FooterItem, { icon: "heart", text: "Look&Like", value: "/look-and-like" }),
+        React.createElement(FooterItem, { icon: "referrals", text: "Amigas", value: "/friends" }),
+        React.createElement(FooterItem, { icon: "eye_open", text: "Inspiraci\u00F3n", value: "/inspiration" }),
+        React.createElement(FooterItem, { icon: "inbox", notification: true, text: "Mensajes", value: "/messages" })));
+};
+export { Footer };

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./CheckoutHeader.style";
 const CheckoutHeader = ({ onBack }) => {
-    const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+    const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
     return (React.createElement(Header, { testID: "checkout-header" },
         React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+
+interface DefaultHeaderProps {
+  readonly onPressMenu?: () => void;
+}
+declare const DefaultHeader: FC<DefaultHeaderProps>;
+export { DefaultHeader };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ButtonIcon } from "@lookiero/aurora";
+import { Header } from "../Header";
+import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import { Logo } from "../logo/Logo";
+import { style } from "./DefaultHeader.style";
+
+const DefaultHeader = ({ onPressMenu }) =>
+  React.createElement(
+    Header,
+    { testID: "default-header" },
+    React.createElement(Logo, null),
+    React.createElement(ButtonIconPlaceholder, null),
+    React.createElement(ButtonIcon, {
+      name: "menu",
+      style: style.button,
+      testID: "menu-button-icon",
+      onPress: onPressMenu,
+    }),
+  );
+export { DefaultHeader };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts

@@ -0,0 +1,8 @@
+declare const style: {
+  button: {
+    alignSelf: "auto";
+    height: number;
+    width: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space10 } = theme();
+const style = StyleSheet.create({
+  button: {
+    alignSelf: "auto",
+    height: space10,
+    width: space10,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./ItemDetailHeader.style";
 const ItemDetailHeader = ({ onBack }) => {
-    const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -2,18 +2,18 @@ import React, { useCallback } from "react";
 import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
-import { useBasePath } from "../../../../routing/useBasePath";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import style from "./ItemHeader.style";
 const ItemHeader = ({ items, item, onNext, onPrevious }) => {
-    const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
     const isFirstItem = itemIndex === 0;
     const isLastItem = itemIndex === items.length - 1;
-    const basePath = useBasePath();
+    const { basePath } = useStaticInfo();
     const navigate = useNavigate();
     const navigateToPreviousItem = useCallback(() => {
         const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;

package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
+interface CheckoutFlowFunction {
+    (): Promise<void>;
+}
+type CheckoutFlowReturn = [
+    checkoutFlow: CheckoutFlowFunction,
+    checkoutFlowStatus: CheckoutFlowStatus,
+    paymentFlow: ReactNode
+];
+interface UseCheckoutFlowArgs {
+    readonly checkout: CheckoutProjection | undefined;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
+    readonly getAuthToken: () => Promise<string>;
+    readonly onSuccess: () => void;
+}
+interface UseCheckoutFlowFunction {
+    (args: UseCheckoutFlowArgs): CheckoutFlowReturn;
+}
+declare const useCheckoutFlow: UseCheckoutFlowFunction;
+export type { CheckoutFlowStatus };
+export { useCheckoutFlow };

package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.js

@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, Section } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
+import { useTrackCheckout } from "../../tracking/useTrackCheckout";
+import { I18nMessages } from "../i18n/i18n";
+import { Routes } from "../routing/routes";
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+import { useStaticInfo } from "./useStaticInfo";
+const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection, subscription: subscriptionProjection, getAuthToken, onSuccess, }) => {
+    const logger = useLogger();
+    const queryBus = useQueryBus();
+    const { customer: { customerId, country, segment, name, email }, basePath, } = useStaticInfo();
+    const paymentFlowRef = useRef(null);
+    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+        checkoutId: checkoutProjection?.id,
+    });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id });
+    const [pricing] = useViewPricingByCheckoutId({
+        checkoutId: checkoutProjection?.id,
+        queryOptions: { refetchOnMount: true },
+    });
+    const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({
+        checkoutId: checkoutProjection?.id,
+        logger,
+    });
+    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({
+        checkoutBookingId: checkoutProjection?.checkoutBookingId,
+        logger,
+    });
+    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
+    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
+    const [authToken, setAuthToken] = useState();
+    useEffect(() => {
+        const loadAuthToken = async () => setAuthToken(await getAuthToken());
+        loadAuthToken();
+    }, [getAuthToken]);
+    const trackCheckout = useTrackCheckout({
+        checkout: checkoutProjection,
+        order: orderProjection,
+        pricing,
+        subscription: subscriptionProjection,
+        userId: customerId,
+        country,
+        segment,
+    });
+    const checkoutFlow = useCallback(async () => {
+        try {
+            sizeChangeEnabled && (await blockCheckoutBooking());
+        }
+        catch (error) {
+            return;
+        }
+        if (checkoutProjection?.checkoutBookingId) {
+            const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }));
+            if (checkoutBooking?.isExpired) {
+                setCheckoutBookingExpired(true);
+                return;
+            }
+        }
+        setStartLegacyBoxCheckoutStatus("loading");
+        paymentFlowRef.current?.startLegacyBoxCheckout({
+            ...paymentFlowPayload,
+            userInformation: { email, name },
+            returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+        });
+    }, [
+        checkoutProjection?.checkoutBookingId,
+        paymentFlowPayload,
+        email,
+        name,
+        basePath,
+        sizeChangeEnabled,
+        blockCheckoutBooking,
+        queryBus,
+    ]);
+    const handleOnCheckoutFlowSuccess = useCallback(() => {
+        trackCheckout();
+        onSuccess();
+    }, [onSuccess, trackCheckout]);
+    const onPaymentSuccess = useCallback(async () => {
+        setStartLegacyBoxCheckoutStatus("success");
+        await submitCheckoutCommand();
+        createNotification({
+            bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+            level: NotificationLevel.SUCCESS,
+        });
+    }, [createNotification, submitCheckoutCommand]);
+    const onPaymentError = useCallback((payload) => {
+        setStartLegacyBoxCheckoutStatus("error");
+        createNotification({
+            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+            level: NotificationLevel.ERROR,
+        });
+    }, [createNotification]);
+    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+    const checkoutFlowStatus = useMemo(() => {
+        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
+            startLegacyBoxCheckoutStatus === "loading" ||
+            submitCheckoutCommandStatus === CommandStatus.LOADING) {
+            return "loading";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
+            startLegacyBoxCheckoutStatus === "success" &&
+            submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
+            return "success";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
+            startLegacyBoxCheckoutStatus === "error" ||
+            submitCheckoutCommandStatus === CommandStatus.ERROR ||
+            checkoutBookingExpired) {
+            return "error";
+        }
+        return "idle";
+    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, checkoutBookingExpired]);
+    useEffect(() => {
+        if (checkoutFlowStatus !== "success") {
+            return;
+        }
+        handleOnCheckoutFlowSuccess();
+    }, [handleOnCheckoutFlowSuccess, checkoutFlowStatus]);
+    const paymentFlow = useMemo(() => (authToken ? React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken }) : null), [authToken]);
+    return useMemo(() => [checkoutFlow, checkoutFlowStatus, paymentFlow], [checkoutFlow, paymentFlow, checkoutFlowStatus]);
+};
+export { useCheckoutFlow };

package/dist/src/infrastructure/ui/hooks/useNewFeedbackExperiment.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+
+declare enum NewFeedbackExperimentVariation {
+  CONTROL = "control",
+  RETURN_PAGE = "return_page",
+}
+interface NewFeedbackExperimentProviderProps {
+  readonly children: ReactNode;
+}
+declare const NewFeedbackExperimentProvider: FC<NewFeedbackExperimentProviderProps>;
+declare const useNewFeedbackExperiment: () => NewFeedbackExperimentVariation;
+export { useNewFeedbackExperiment, NewFeedbackExperimentProvider, NewFeedbackExperimentVariation };

package/dist/src/infrastructure/ui/hooks/useNewFeedbackExperiment.js

@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import invariant from "tiny-invariant";
+import { Spinner } from "@lookiero/aurora";
+import { useAssignedVariationByExperimentId } from "@lookiero/sty-psp-ab-testing";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useTrackAssignedVariationByExperiment } from "../../tracking/useTrackAssignedVariationByExperiment";
+import { useStaticInfo } from "./useStaticInfo";
+
+var NewFeedbackExperimentVariation;
+(function (NewFeedbackExperimentVariation) {
+  NewFeedbackExperimentVariation["CONTROL"] = "control";
+  NewFeedbackExperimentVariation["RETURN_PAGE"] = "return_page";
+})(NewFeedbackExperimentVariation || (NewFeedbackExperimentVariation = {}));
+const NewFeedbackExperimentContext = createContext(null);
+const NewFeedbackExperimentProvider = ({ children }) => {
+  const {
+    kameleoon: {
+      experiments: {
+        newFeedback: { id: newFeedbackId, variations },
+      },
+    },
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+  const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+    experimentId: newFeedbackId,
+  });
+  const trackAssignedVariation = useTrackAssignedVariationByExperiment({
+    checkoutId: checkout?.id,
+    country,
+    segment,
+    experimentId: newFeedbackId,
+  });
+  const value = useMemo(
+    () => ({
+      variation:
+        newFeedbackVariation?.id === Number(variations.v1)
+          ? NewFeedbackExperimentVariation.RETURN_PAGE
+          : NewFeedbackExperimentVariation.CONTROL,
+    }),
+    [newFeedbackVariation?.id, variations.v1],
+  );
+  const assignedVariantTracked = useRef(false);
+  useEffect(() => {
+    if (assignedVariantTracked.current || !newFeedbackVariation || !checkout?.id) {
+      return;
+    }
+    trackAssignedVariation({ assignedVariation: newFeedbackVariation });
+    assignedVariantTracked.current = true;
+  }, [checkout?.id, newFeedbackVariation, trackAssignedVariation]);
+  if (!checkout) {
+    return React.createElement(Spinner, null);
+  }
+  return React.createElement(NewFeedbackExperimentContext.Provider, { value: value }, children);
+};
+const useNewFeedbackExperiment = () => {
+  const newFeedbackExperiment = useContext(NewFeedbackExperimentContext);
+  invariant(
+    newFeedbackExperiment,
+    "Your are trying to use the useNewFeedbackExperiment hook without wrapping your app with the <NewFeedbackExperimentProvider>.",
+  );
+  return newFeedbackExperiment.variation;
+};
+export { useNewFeedbackExperiment, NewFeedbackExperimentProvider, NewFeedbackExperimentVariation };

package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.d.ts

@@ -1,6 +1,7 @@
-import { Logger } from "@lookiero/sty-psp-logging";
+import { PaymentPayload } from "@lookiero/payments-front";
 interface UsePaymentInstrumentEventsFunctionArgs {
-    readonly logger: Logger;
+    readonly onSuccess: (payload: PaymentPayload) => void;
+    readonly onError: (payload: PaymentPayload) => void;
 }
 interface UsePaymentInstrumentEventsFunction {
     (args: UsePaymentInstrumentEventsFunctionArgs): void;

package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.js

@@ -1,29 +1,20 @@
-import { useCallback, useEffect } from "react";
-import { useEvent } from "@lookiero/event";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { I18nMessages } from "../i18n/i18n";
-const PAYMENT_ERROR = "ERROR";
-const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
-const usePaymentInstrumentEvents = ({ logger }) => {
-    const { subscribe, unsubscribe } = useEvent();
-    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
-    const onSuccess = useCallback(({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }), [createNotification]);
-    const onError = useCallback(({ error }) => {
-        if (error.toaster) {
-            createNotification({
-                bodyI18nKey: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-                level: NotificationLevel.ERROR,
-            });
-        }
-    }, [createNotification]);
+import { useEffect } from "react";
+import { Section, usePaymentStatusManager } from "@lookiero/payments-front";
+const usePaymentInstrumentEvents = ({ onSuccess, onError }) => {
+    const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
     useEffect(() => {
-        subscribe({ event: PAYMENT_ERROR }, onError);
-        subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-        return () => {
-            unsubscribe({ event: PAYMENT_ERROR }, onError);
-            unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-        };
-    }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+        const { isLoading, consumePayload } = refreshStatus;
+        if (isLoading) {
+            return;
+        }
+        consumePayload((payload) => {
+            if (payload.success) {
+                onSuccess(payload);
+            }
+            else {
+                onError(payload);
+            }
+        });
+    }, [onError, onSuccess, refreshStatus]);
 };
 export { usePaymentInstrumentEvents };

package/dist/src/infrastructure/ui/hooks/useStaticInfo.d.ts

@@ -4,11 +4,13 @@ import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 interface StaticInfo {
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
+    readonly basePath: string;
 }
 interface StaticInfoProviderProps {
     readonly children: ReactNode;
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
+    readonly basePath: string;
 }
 declare const StaticInfoProvider: FC<StaticInfoProviderProps>;
 declare const useStaticInfo: () => StaticInfo;

package/dist/src/infrastructure/ui/hooks/useStaticInfo.js

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
 const StaticInfoContext = createContext(null);
-const StaticInfoProvider = ({ children, kameleoon, customer }) => {
-    const value = useMemo(() => ({ kameleoon, customer }), [customer, kameleoon]);
+const StaticInfoProvider = ({ children, kameleoon, customer, basePath }) => {
+    const value = useMemo(() => ({ kameleoon, customer, basePath }), [customer, kameleoon, basePath]);
     return React.createElement(StaticInfoContext.Provider, { value: value }, children);
 };
 const useStaticInfo = () => {

package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.d.ts

@@ -16,7 +16,7 @@ interface UseSubmitCheckoutFunctionArgs {
     readonly checkoutBookingId: string;
     readonly paymentFlowRef: RefObject<PaymentFlowRef>;
     readonly onError: () => void;
-    readonly onSuccess?: () => void;
+    readonly onSuccess: () => void;
     readonly logger: Logger;
 }
 interface UseSubmitCheckoutFunction {

package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.js

@@ -1,29 +1,15 @@
 import { useCallback, useMemo, useState } from "react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { I18nMessages } from "../i18n/i18n";
-import { useQueryBus } from "./useQueryBus";
-var ChargeStatus;
-(function (ChargeStatus) {
-    ChargeStatus["EXECUTED"] = "EXECUTED";
-    ChargeStatus["REQUIRES_ACTION"] = "REQUIRES_ACTION";
-    ChargeStatus["REQUIRED_ACTION_CANCELLED"] = "REQUIRED_ACTION_CANCELLED";
-    ChargeStatus["REJECTED"] = "REJECTED";
-    ChargeStatus["CANCELLED"] = "CANCELLED";
-    ChargeStatus["TO_CONFIRM"] = "TO_CONFIRM";
-    ChargeStatus["ERROR"] = "ERROR";
-    ChargeStatus["UNKNOWN"] = "UNKNOWN";
-})(ChargeStatus || (ChargeStatus = {}));
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
 const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError, onSuccess, logger, }) => {
-    const queryBus = useQueryBus();
     const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
     const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
     const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
-    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
     const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
     const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
         try {
@@ -32,40 +18,27 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         catch (error) {
             return;
         }
-        const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId }));
-        if (checkoutBooking?.isExpired) {
-            setCheckoutBookingExpired(true);
-            return;
-        }
-        paymentFlowRef.current?.startLegacyBoxCheckout(
+        setStartLegacyBoxCheckoutStatus("loading");
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        paymentFlowPayload, async ({ status, toaster, final }) => {
-            setStartLegacyBoxCheckoutStatus("loading");
-            if (final) {
-                if (status === ChargeStatus.EXECUTED) {
-                    setStartLegacyBoxCheckoutStatus("success");
-                    await submitCheckoutCommand();
-                    onSuccess?.();
-                }
-                else {
-                    createNotification({
-                        level: NotificationLevel.ERROR,
-                        bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-                    });
-                    setStartLegacyBoxCheckoutStatus("error");
-                }
-            }
+        paymentFlowRef.current?.startLegacyBoxCheckout(paymentFlowPayload);
+    }, [paymentFlowRef, blockCheckoutBooking]);
+    const onPaymentSuccess = useCallback(async () => {
+        setStartLegacyBoxCheckoutStatus("success");
+        await submitCheckoutCommand();
+        createNotification({
+            bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+            level: NotificationLevel.SUCCESS,
+        });
+    }, [createNotification, submitCheckoutCommand]);
+    const onPaymentError = useCallback((payload) => {
+        setStartLegacyBoxCheckoutStatus("error");
+        createNotification({
+            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+            level: NotificationLevel.ERROR,
         });
-    }, [
-        queryBus,
-        checkoutBookingId,
-        paymentFlowRef,
-        blockCheckoutBooking,
-        submitCheckoutCommand,
-        onSuccess,
-        createNotification,
-    ]);
+    }, [createNotification]);
+    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
     const status = useMemo(() => {
         if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
             startLegacyBoxCheckoutStatus === "loading" ||
@@ -75,23 +48,17 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
             startLegacyBoxCheckoutStatus === "success" &&
             submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
+            onSuccess();
             return "success";
         }
         if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
             startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR ||
-            checkoutBookingExpired) {
+            submitCheckoutCommandStatus === CommandStatus.ERROR) {
             onError();
             return "error";
         }
         return "idle";
-    }, [
-        blockCheckoutBookingStatus,
-        startLegacyBoxCheckoutStatus,
-        submitCheckoutCommandStatus,
-        checkoutBookingExpired,
-        onError,
-    ]);
+    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
     return [submitCheckout, status];
 };
 export { useSubmitCheckout };

package/dist/src/infrastructure/ui/i18n/fetchTranslations.d.ts

@@ -0,0 +1,10 @@
+import { EndpointFunction, FetchTranslationFuction } from "@lookiero/i18n";
+
+interface FetchTranslationsFuntionArgs {
+  readonly translations: EndpointFunction[];
+}
+interface FetchTranslationsFuntion {
+  (args: FetchTranslationsFuntionArgs): FetchTranslationFuction;
+}
+declare const fetchTranslations: FetchTranslationsFuntion;
+export { fetchTranslations };

package/dist/src/infrastructure/ui/i18n/fetchTranslations.js

@@ -0,0 +1,17 @@
+import { fetchFetchTranslation } from "@lookiero/i18n";
+
+const fetchTranslations =
+  ({ translations }) =>
+  async ({ locale }) => {
+    const translationsMessages = await Promise.all(
+      translations.map((endpoint) => fetchFetchTranslation({ endpoint })({ locale })),
+    );
+    return translationsMessages.reduce(
+      (acc, translationMessages) => ({
+        ...acc,
+        ...translationMessages,
+      }),
+      {},
+    );
+  };
+export { fetchTranslations };

package/dist/src/infrastructure/ui/i18n/i18n.d.ts

@@ -1,4 +1,3 @@
-declare const DOMAIN = "CheckoutI18n";
 declare const COLOR_I18N_PREFIX = "catalog.color.";
 declare enum I18nMessages {
     TOAST_GENERIC_ERROR = "toast_generic_error",
@@ -47,6 +46,7 @@ declare enum I18nMessages {
     CHECKOUT_TITLE = "checkout.title",
     CHECKOUT_PAY_BUTTON = "checkout.pay_button",
     CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
+    CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
     CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
     CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
     CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
@@ -56,4 +56,4 @@ declare enum I18nMessages {
     FEEDBACK_BUTTON = "feedback.button",
     CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired"
 }
-export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX };

package/dist/src/infrastructure/ui/i18n/i18n.js

@@ -1,4 +1,3 @@
-const DOMAIN = "CheckoutI18n";
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 var I18nMessages;
@@ -49,6 +48,7 @@ var I18nMessages;
     I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
     I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_ERROR"] = "checkout.toast_payment_error";
+    I18nMessages["CHECKOUT_TOAST_PAYMENT_SUCCESS"] = "checkout.toast_payment_success";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_DESCRIPTION"] = "checkout.success_modal_description";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_BUTTON"] = "checkout.success_modal_button";
@@ -58,4 +58,4 @@ var I18nMessages;
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
     I18nMessages["CHECKOUT_TOAST_BOOKING_EXPIRED"] = "checkout.toast_booking_expired";
 })(I18nMessages || (I18nMessages = {}));
-export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX };