@lookiero/checkout 9.8.5 → 9.9.0-beta.1

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/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

@@ -46,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",

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

@@ -48,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";

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

@@ -0,0 +1,20 @@
+import { EndpointFunction } from "@lookiero/i18n";
+
+interface TranslationEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly translationsApiKey: string;
+}
+interface TranslationEndpointFunction {
+  (args: TranslationEndpointFunctionArgs): EndpointFunction;
+}
+declare const translationEndpoint: TranslationEndpointFunction;
+type Project = "user-area-front" | "inventory-catalog" | "checkout";
+interface TranslationExternalEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly projects: [project: Project, filter?: string][];
+}
+interface TranslationExternalEndpointFunction {
+  (args: TranslationExternalEndpointFunctionArgs): EndpointFunction;
+}
+declare const translationExternalEndpoint: TranslationExternalEndpointFunction;
+export { translationEndpoint, translationExternalEndpoint };

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

@@ -0,0 +1,27 @@
+import { Country } from "../../../projection/shared/country";
+import { Locale } from "../../../projection/shared/locale";
+
+const translationEndpoint =
+  ({ translationsUrl, translationsApiKey }) =>
+  (locale) =>
+    `${translationsUrl}/${locale}?key=${translationsApiKey}&no-folding=true`;
+const COUNTRY = {
+  [Locale.ES]: Country.ES,
+  [Locale.FR]: Country.FR,
+  [Locale.EN]: Country.GB,
+  [Locale.IT]: Country.IT,
+  [Locale.PT]: Country.PT,
+  [Locale.DE]: Country.DE,
+  [Locale.AT]: Country.AT,
+  [Locale.NL]: Country.NL,
+  [Locale.SE]: Country.SE,
+};
+const translationExternalEndpoint =
+  ({ translationsUrl, projects }) =>
+  (locale) => {
+    const projectsQueryParam = projects
+      .map(([project, filter]) => `projectFilter=${project}${filter ? `:${filter}` : ""}`)
+      .join("&");
+    return `${translationsUrl}/${locale}/${COUNTRY[locale]}?${projectsQueryParam}`;
+  };
+export { translationEndpoint, translationExternalEndpoint };

package/dist/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+
+interface CheckoutAccessibilityMiddlewareProps {
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+  readonly loader?: JSX.Element;
+  readonly children: JSX.Element;
+}
+declare const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps>;
+export { CheckoutAccessibilityMiddleware };

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

@@ -0,0 +1,27 @@
+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/views/App.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+  container: {
+    flex: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/App.style.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
 import { Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -77,13 +78,15 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
             React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
                 React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
                     React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
+                        country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
+                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
                         React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                         checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
                             React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                                     ? checkoutItem.replacedFor.size
                                     : checkoutItem.productVariant.size })))),
-                        React.createElement(View, { style: style.paymentSelector },
-                            React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
+                        country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
+                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
                 React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !screen.L && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
                     screen.L ? (React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -24,6 +24,9 @@ declare const style: {
     paymentSelector: {
         marginTop: number;
     };
+    paymentSelectorNL: {
+        marginBottom: number;
+    };
     princingWrapper: {
         padding: number;
     };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -28,6 +28,9 @@ const style = StyleSheet.create({
     paymentSelector: {
         marginTop: space6,
     },
+    paymentSelectorNL: {
+        marginBottom: space6,
+    },
     princingWrapper: {
         padding: space6,
     },

package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-native";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow } from "@lookiero/payments-front";
+import { PaymentFlow, Section } from "@lookiero/payments-front";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -85,6 +85,6 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
     const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
     if (!dependenciesLoaded)
         return null;
-    return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });
+    return React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken });
 };
 export { CheckoutPaymentModal };

package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js

@@ -1,12 +1,12 @@
-import React, { useRef } from "react";
+import React from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 const PaymentInstrument = ({ useRedirect }) => {
-    const paymentInstrumentSelectRef = useRef(null);
     const { returnUrl } = useRedirect();
-    const logger = useLogger();
-    usePaymentInstrumentEvents({ logger });
-    return (React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, section: Section.BOX_CHECKOUT }));
+    const { customer } = useStaticInfo();
+    return (React.createElement(PaymentInstrumentSelect, { beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, section: Section.BOX_CHECKOUT, userInformation: {
+            email: customer.email,
+            name: customer.name,
+        }, showSingleUsePaymentMethods: true }));
 };
 export { PaymentInstrument };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+  buttonContainer: {
+    paddingHorizontal: number;
+    paddingVertical: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+
+interface ReturnQuestionsFormProps {
+  readonly visible: boolean;
+  readonly returnQuestions: ReturnQuestionProjection[];
+  readonly onSubmit: (feedback: FeedbackProjection) => void;
+  readonly onClose: () => void;
+}
+declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
+export { ReturnQuestionsForm };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -0,0 +1,64 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { useReturnQuestionFeedback } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostSelectReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem";
+import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem";
+import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
+import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./ReturnQuestionsForm.style";
+
+const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
+const returnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+  [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+const ReturnQuestionsForm = ({ returnQuestions, visible, onSubmit, onClose }) => {
+  const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+  const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+  const feedback = useReturnQuestionFeedback();
+  const handleOnSubmit = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
+  return React.createElement(
+    ReturnQuestionItemProvider,
+    { returnQuestionItems: returnQuestionItems },
+    React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
+    React.createElement(
+      Modal,
+      {
+        portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME,
+        testID: "return-questions-form-modal",
+        visible: visible,
+        scroll: true,
+        showCloseButton: true,
+        onClose: onClose,
+      },
+      React.createElement(
+        View,
+        { style: style.modalContent },
+        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+        React.createElement(ReturnQuestions, {
+          portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME,
+          returnQuestions: returnQuestions,
+        }),
+        React.createElement(
+          Button,
+          { style: style.submit, testID: "return-questions-button", onPress: handleOnSubmit },
+          submitButtonText,
+        ),
+      ),
+    ),
+  );
+};
+export { ReturnQuestionsForm };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+  modalContent: {
+    paddingHorizontal: number;
+  };
+  submit: {
+    marginTop: number;
+  };
+  title: {
+    marginBottom: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+  modalContent: {
+    paddingHorizontal: space6,
+  },
+  submit: {
+    marginTop: space8,
+  },
+  title: {
+    marginBottom: space6,
+  },
+});
+export { style };