@lookiero/checkout 5.3.0 → 6.0.0-beta.1

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { View, Option, OPTION_VARIANT } from "@lookiero/aurora";
+import { useIntl } from "@lookiero/i18n-react";
+import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
+import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
+import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
+import { style } from "./RadioReturnQuestionItem.style";
+const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
+    const intl = useIntl();
+    const [modalVisible, setModalVisible] = useState(false);
+    const { feedback: feedbackId, onChange, clear, } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
+    const feedback = useReturnQuestionFeedback();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
+    const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
+    const optionText = intl.formatMessage({ id: returnQuestion.name });
+    const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
+    const handleOnModalClose = useCallback(() => {
+        // Uncomment if we want to clear current selection (and update callback's dependencies)
+        // clear();
+        setModalVisible(false);
+    }, []);
+    const handleOnPress = useCallback(() => {
+        clear();
+        onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: returnQuestion.id });
+        if (hasChildren) {
+            setModalVisible(true);
+        }
+    }, [clear, hasChildren, onChange, returnQuestion.id, returnQuestionParent.id]);
+    /**
+     * This logic is for closing the Modal when its children has been answered.
+     */
+    const [deepestReturnQuestionWithFeedback, isLeaf] = deepestReturnQuestionWithFeedbackForReturnQuestion({
+        feedback,
+        returnQuestion,
+    });
+    useEffect(() => {
+        if (deepestReturnQuestionWithFeedback && isLeaf) {
+            setModalVisible(false);
+        }
+    }, [deepestReturnQuestionWithFeedback, isLeaf]);
+    /**
+     * This logic is for closing the Modal when its children has been answered.
+     */
+    return (React.createElement(React.Fragment, null,
+        React.createElement(View, { style: style.wrapper, testID: testID },
+            React.createElement(Option, { checked: returnQuestion.id === feedbackId, name: returnQuestion.id, title: inputValue ? `${optionText} / ${inputValue}` : `${optionText}`, value: returnQuestion.id, variant: OPTION_VARIANT.BUTTON, onChange: handleOnPress })),
+        hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, visible: modalVisible, onClose: handleOnModalClose })) : null));
+};
+export { RadioReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.style.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space2 } = theme();
+const style = StyleSheet.create({
+    wrapper: { marginBottom: space2 },
+});
+export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -0,0 +1,20 @@
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
+import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../../i18n/i18n";
+import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
+import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
+import { style } from "./ReturnQuestionFeedbackItem.style";
+const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
+    const titleText = useI18nMessage({ id: returnQuestion.name });
+    const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
+    const returnQuestionFeedback = useReturnQuestionFeedback();
+    const intl = useIntl();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
+    const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { level: 2, style: style.title, detailBold: true }, titleText),
+        React.createElement(Text, { level: 1, detail: true }, feedback || unansweredText)));
+};
+export { ReturnQuestionFeedbackItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.style.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { colorTextMedium, space1, space4 } = theme();
+const style = StyleSheet.create({
+    container: {
+        marginBottom: space4,
+    },
+    title: {
+        color: colorTextMedium,
+        marginBottom: space1,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -0,0 +1,20 @@
+import React, { useCallback, useMemo } from "react";
+import { View } from "@lookiero/aurora";
+import { useIntl } from "@lookiero/i18n-react";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { NewFeedbackExperimentVariation, useNewFeedbackExperiment, } from "../../../../../hooks/useNewFeedbackExperiment";
+import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
+import { style } from "./TextareaReturnQuestionItem.style";
+const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
+    const { formatMessage } = useIntl();
+    /* Kameleoon experiment */
+    const newFeedbackVariation = useNewFeedbackExperiment();
+    const isReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+    /* Kameleoon experiment */
+    const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
+    const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
+    const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
+    const fieldComponent = (React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return isReturnPage ? React.createElement(View, { style: style.wrapper }, fieldComponent) : fieldComponent;
+};
+export { TextareaReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { colorBgBase, space6 } = theme();
+const style = StyleSheet.create({
+    wrapper: {
+        backgroundColor: colorBgBase,
+        padding: space6,
+        paddingTop: 0,
+    },
+});
+export { style };

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/Header.style.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { colorBgBase, space2, space12 } = theme();
+export const HEADER_HEIGHT = space12;
+const style = StyleSheet.create({
+    header: {
+        alignItems: "center",
+        backgroundColor: colorBgBase,
+        flexDirection: "row",
+        flexGrow: 0,
+        flexWrap: "nowrap",
+        justifyContent: "space-between",
+        overflow: "visible",
+        paddingHorizontal: space2,
+        width: "100%",
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.js

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Box, ButtonIcon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+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({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+    return (React.createElement(Box, null,
+        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),
+            React.createElement(ButtonIconPlaceholder, null))));
+};
+export { CheckoutHeader };

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { ButtonIcon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Header } from "../Header";
+import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+const ItemDetailHeader = ({ onBack }) => {
+    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),
+        React.createElement(ButtonIcon, { name: "close", testID: "close-button-icon", onPress: onBack })));
+};
+export { ItemDetailHeader };

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

@@ -0,0 +1,35 @@
+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 { 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({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const itemIndex = items.indexOf(item);
+    const isFirstItem = itemIndex === 0;
+    const isLastItem = itemIndex === items.length - 1;
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const navigateToPreviousItem = useCallback(() => {
+        const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
+        const previousItem = items[previousItemIndex];
+        onPrevious?.({ from: item.id, to: previousItem.id });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
+    }, [basePath, item.id, itemIndex, items, navigate, onPrevious]);
+    const navigateToNextItem = useCallback(() => {
+        const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
+        const nextItem = items[nextItemIndex];
+        onNext?.({ from: item.id, to: nextItem.id });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
+    }, [basePath, item.id, itemIndex, items, navigate, onNext]);
+    return (React.createElement(Header, { testID: "item-header" },
+        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
+        React.createElement(Text, { level: 3, action: true }, title),
+        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: style.button, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
+};
+export { ItemHeader };

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

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

package/dist/src/infrastructure/ui/components/templates/header/logo/Logo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Logo: () => React.JSX.Element;
+export { Logo };

package/dist/src/infrastructure/ui/components/templates/header/logo/Logo.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Image } from "react-native";
+import { LogoSVG } from "./Logo.Base64";
+const Logo = () => React.createElement(Image, { resizeMode: "cover", source: { uri: LogoSVG }, style: { height: 48, width: 134 } });
+export { Logo };

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

@@ -0,0 +1,11 @@
+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,49 @@
+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

@@ -0,0 +1,9 @@
+import { Logger } from "@lookiero/sty-psp-logging";
+interface UsePaymentInstrumentEventsFunctionArgs {
+    readonly logger: Logger;
+}
+interface UsePaymentInstrumentEventsFunction {
+    (args: UsePaymentInstrumentEventsFunctionArgs): void;
+}
+declare const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction;
+export { usePaymentInstrumentEvents };

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

@@ -0,0 +1,29 @@
+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]);
+    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]);
+};
+export { usePaymentInstrumentEvents };

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

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+import { Customer } from "../../../projection/shared/customer";
+import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+interface StaticInfo {
+    readonly kameleoon: KameleoonEnvironment;
+    readonly customer: Customer;
+}
+interface StaticInfoProviderProps {
+    readonly children: ReactNode;
+    readonly kameleoon: KameleoonEnvironment;
+    readonly customer: Customer;
+}
+declare const StaticInfoProvider: FC<StaticInfoProviderProps>;
+declare const useStaticInfo: () => StaticInfo;
+export { useStaticInfo, StaticInfoProvider };

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

@@ -0,0 +1,13 @@
+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]);
+    return React.createElement(StaticInfoContext.Provider, { value: value }, children);
+};
+const useStaticInfo = () => {
+    const staticInfo = useContext(StaticInfoContext);
+    invariant(staticInfo, "Your are trying to use the useStaticInfo hook without wrapping your app with the <StaticInfoProvider>.");
+    return staticInfo;
+};
+export { useStaticInfo, StaticInfoProvider };

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

@@ -0,0 +1,27 @@
+import { RefObject } from "react";
+import { PaymentFlowRef } from "@lookiero/payments-front";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
+type Status = "idle" | "loading" | "success" | "error";
+interface SubmitCheckoutFunctionArgs {
+    readonly paymentFlowPayload: PaymentFlowPayloadProjection;
+    readonly sizeChangeEnabled: boolean;
+}
+interface SubmitCheckoutFunction {
+    (args: SubmitCheckoutFunctionArgs): Promise<void>;
+}
+type UseSubmitCheckoutResult = [submitCheckout: SubmitCheckoutFunction, status: Status];
+interface UseSubmitCheckoutFunctionArgs {
+    readonly checkoutId: string;
+    readonly checkoutBookingId: string;
+    readonly paymentFlowRef: RefObject<PaymentFlowRef>;
+    readonly onError: () => void;
+    readonly onSuccess?: () => void;
+    readonly logger: Logger;
+}
+interface UseSubmitCheckoutFunction {
+    (args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckoutResult;
+}
+declare const useSubmitCheckout: UseSubmitCheckoutFunction;
+export type { Status, SubmitCheckoutFunction };
+export { useSubmitCheckout };

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

@@ -0,0 +1,63 @@
+import { useCallback, useMemo, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+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";
+const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError, onSuccess, logger, }) => {
+    const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
+    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
+    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
+    const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
+        try {
+            sizeChangeEnabled && (await blockCheckoutBooking());
+        }
+        catch (error) {
+            return;
+        }
+        paymentFlowRef.current?.startLegacyBoxCheckout(
+        // 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, blockCheckoutBooking, submitCheckoutCommand, onSuccess, createNotification]);
+    const status = 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) {
+            onError();
+            return "error";
+        }
+        return "idle";
+    }, [blockCheckoutBookingStatus, submitCheckoutCommandStatus, onError, startLegacyBoxCheckoutStatus]);
+    return [submitCheckout, status];
+};
+export { useSubmitCheckout };

package/dist/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -0,0 +1,21 @@
+import React, { useEffect, useRef } from "react";
+import { Spinner } from "@lookiero/aurora";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
+const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
+    const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
+    const onNotAccessibleRef = useRef(onNotAccessible);
+    onNotAccessibleRef.current = onNotAccessible;
+    const notAccessible = accessible === false || status === QueryStatus.ERROR;
+    useEffect(() => {
+        if (notAccessible) {
+            onNotAccessibleRef.current();
+        }
+    }, [notAccessible]);
+    return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
+        ? loader
+        : accessible
+            ? children
+            : null;
+};
+export { CheckoutAccessibilityMiddleware };

package/dist/src/infrastructure/ui/routing/CheckoutMiddleware.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from "react";
+import { generatePath, useMatch, useNavigate } from "react-router-native";
+import { Spinner } from "@lookiero/aurora";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { Routes } from "./routes";
+import { useBasePath } from "./useBasePath";
+const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
+    const logger = useLogger();
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const navigateRef = useRef(navigate);
+    navigateRef.current = navigate;
+    const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
+    const itemRouteMatchRef = useRef(itemRouteMatch);
+    itemRouteMatchRef.current = itemRouteMatch;
+    const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+    const itemDetailRouteMatchRef = useRef(itemDetailRouteMatch);
+    itemDetailRouteMatchRef.current = itemDetailRouteMatch;
+    const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
+    const summaryRouteMatchRef = useRef(summaryRouteMatch);
+    summaryRouteMatchRef.current = summaryRouteMatch;
+    const summaryTabsRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
+    const summaryTabsRouteMatchRef = useRef(summaryTabsRouteMatch);
+    summaryTabsRouteMatchRef.current = summaryTabsRouteMatch;
+    const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
+    const checkoutRouteMatchRef = useRef(checkoutRouteMatch);
+    checkoutRouteMatchRef.current = checkoutRouteMatch;
+    const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
+    const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
+    feedbackRouteMatchRef.current = feedbackRouteMatch;
+    const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
+    const checkoutPaymentRouteMatchRef = useRef(checkoutPaymentRouteMatch);
+    checkoutPaymentRouteMatchRef.current = checkoutPaymentRouteMatch;
+    const checkoutShown = useRef(false);
+    checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
+    const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const checkoutItemsRef = useRef();
+    /* This hook is mounted at this level, although not being used directly, for optimization (regarding cache) */
+    useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
+    const [startCheckout] = useStartCheckout({ checkoutId: checkout?.id, logger });
+    useEffect(() => {
+        if (checkout?.id) {
+            startCheckout();
+        }
+    }, [checkout?.id, startCheckout]);
+    useEffect(() => {
+        /* Navigate to the feedback if checkout is submitted */
+        if (checkout?.status === CheckoutStatus.SUBMITTED && !feedbackRouteMatchRef.current) {
+            navigateRef.current(`${basePath}/${Routes.FEEDBACK}`, { replace: true });
+        }
+        else if ([CheckoutStatus.AVAILABLE, CheckoutStatus.STARTED, CheckoutStatus.NOTIFIED].includes(checkout?.status)) {
+            /**
+             * If the customer has just reset an item's decission, navigate to that item.
+             * Otherwise, navigate to the first item without customer decission.
+             */
+            const itemWithoutCustomerDecision = checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL &&
+                checkoutItemsRef.current?.find((previousItem) => previousItem.id === item.id && previousItem.status !== CheckoutItemStatus.INITIAL)) || checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
+            checkoutItemsRef.current = checkout?.items;
+            /* Navigate to the summary if required */
+            if (itemWithoutCustomerDecision === undefined &&
+                !(summaryRouteMatchRef.current ||
+                    summaryTabsRouteMatchRef.current ||
+                    itemDetailRouteMatchRef.current ||
+                    checkoutRouteMatchRef.current ||
+                    checkoutPaymentRouteMatchRef.current)) {
+                navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
+            }
+            if (itemWithoutCustomerDecision &&
+                !(itemRouteMatchRef.current && itemRouteMatchRef.current.params.id === itemWithoutCustomerDecision.id)) {
+                navigateRef.current(generatePath(`${basePath}/${Routes.ITEM}`, { id: itemWithoutCustomerDecision.id }), {
+                    replace: true,
+                });
+            }
+        }
+    }, [basePath, checkout?.status, checkout?.items]);
+    if (!checkout) {
+        return loader;
+    }
+    /* Prevent direct payment access */
+    if (checkoutPaymentRouteMatch && !checkoutShown.current) {
+        onNotAccessible();
+        return null;
+    }
+    return children;
+};
+export { CheckoutMiddleware };