@lookiero/checkout 9.13.0 → 10.0.0-beta.0

package/src/infrastructure/ui/test/render.tsx

@@ -1,14 +1,10 @@
 import { render, RenderAPI } from "@testing-library/react-native";
 import { mock } from "jest-mock-extended";
 import React, { FC, Fragment, ReactElement } from "react";
+import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
-import { createI18nProvider } from "@lookiero/i18n-react";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
-import { DOMAIN } from "../i18n/i18n";
-import { BasePathProvider } from "../routing/useBasePath";
-
-const I18nProvider = createI18nProvider({ domain: DOMAIN });
 
 interface RenderArgs {
   readonly locale?: string;
@@ -27,13 +23,11 @@ const renderWrapper: RenderWrapperFunction =
   // eslint-disable-next-line react/display-name, react/prop-types
   ({ children }) => (
     <Aurora>
-      <I18nProvider locale={locale as string} messages={messages} onError={() => void 0}>
+      <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
-          <BasePathProvider basePath="">
-            <Wrapper>{children}</Wrapper>
-          </BasePathProvider>
+          <Wrapper>{children}</Wrapper>
         </LoggerProvider>
-      </I18nProvider>
+      </IntlProvider>
     </Aurora>
   );
 

package/src/infrastructure/ui/views/App.tsx

@@ -1,12 +1,10 @@
-import { PortalProvider } from "@gorhom/portal";
+import { PortalHost } from "@gorhom/portal";
 import React, { FC } from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { DOMAIN } from "../i18n/i18n";
 
 const { colorBgBase } = theme();
 
@@ -16,17 +14,10 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <PortalProvider rootHostName="Checkout">
-      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
-      {/*
-        We are using the Aurora's PortalProvider at this level for notifications to work properly.
-
-        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
-        notifications would be displayed in a layer below Portal's one (not visible).
-      */}
-      <AuroraPortalProvider>{children}</AuroraPortalProvider>
-    </PortalProvider>
+    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+    <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
+    <PortalHost name="Checkout" />
+    {children}
   </SafeAreaProvider>
 );
 

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

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

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,11 +1,14 @@
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 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 { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
@@ -14,10 +17,10 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
+import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { DOMAIN, I18nMessages } from "../../i18n/i18n";
+import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
@@ -25,17 +28,28 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 
 interface CheckoutProps {
-  readonly children?: ReactNode;
   readonly layout: UiLayout;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect }) => {
+const Checkout: FC<CheckoutProps> = ({
+  layout: Layout,
+  order,
+  subscription,
+  getAuthToken,
+  useRedirect,
+  onCheckoutFlowSuccess,
+}) => {
   const {
     customer: { customerId, country, segment },
+    basePath,
   } = useStaticInfo();
-  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
+  const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
+  const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const { screen } = useDevice();
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
@@ -43,6 +57,14 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
 
+  const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
+    checkout,
+    order,
+    subscription,
+    getAuthToken,
+    onSuccess: onCheckoutFlowSuccess,
+  });
+
   useTrackPageView({
     page: TrackingPage.CHECKOUT,
     country,
@@ -51,18 +73,16 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   });
 
   const navigate = useNavigate();
-  const basePath = useBasePath();
-
   const trackPressContinue = useTrackPressContinue({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
     checkoutId: checkout?.id,
   });
-  const handleOnSubmit = useCallback(() => {
+  const handleOnSubmit = useCallback(async () => {
     trackPressContinue();
-    navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
-  }, [basePath, navigate, trackPressContinue]);
+    await checkoutFlow();
+  }, [checkoutFlow, trackPressContinue]);
 
   const checkoutItemsKept = useMemo(
     () =>
@@ -116,6 +136,12 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
         >
           <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
             <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              {country === Country.NL && (
+                <View style={style.paymentSelectorNL}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
+
               <Text level={3} style={style.title} heading>
                 {titleText}
               </Text>
@@ -139,9 +165,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 </View>
               ))}
 
-              <View style={style.paymentSelector}>
-                <PaymentInstrument useRedirect={useRedirect} />
-              </View>
+              {country !== Country.NL && (
+                <View style={style.paymentSelector}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
             </View>
           </Box>
 
@@ -151,7 +179,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
                 {screen.L ? (
-                  <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
+                  <Button
+                    busy={checkoutFlowStatus === "loading"}
+                    testID="confirm-checkout-button"
+                    onPress={handleOnSubmit}
+                  >
                     {submitButtonText}
                   </Button>
                 ) : null}
@@ -164,14 +196,19 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
       {pricing && !screen.L ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
+            <Button
+              busy={checkoutFlowStatus === "loading"}
+              testID="confirm-checkout-button"
+              small
+              onPress={handleOnSubmit}
+            >
               {submitButtonText}
             </Button>
           </Body>
         </Sticky>
       ) : null}
 
-      {children}
+      {paymentFlowComponent}
     </Layout>
   );
 };

package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.test.tsx

@@ -1,131 +1,126 @@
-import { waitFor } from "@testing-library/react-native";
-import React from "react";
-import { QueryStatus } from "@lookiero/messaging-react";
-import { Country } from "@lookiero/sty-psp-locale";
-import { Segment } from "@lookiero/sty-psp-segment";
-import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { checkout } from "../../../../../projection/checkout/checkout.mock";
-import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
-import { paymentFlowPayload as mockPaymentFlowPayload } from "../../../../../projection/payment/paymentFlowPayload.mock";
-import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
-import { pricing } from "../../../../../projection/pricing/pricing.mock";
-import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
-import { Routes } from "../../../../routing/routes";
-import { render } from "../../../../test/render";
-import { CheckoutPaymentModal } from "./CheckoutPaymentModal";
+// import { waitFor } from "@testing-library/react-native";
+// import React from "react";
+// import { QueryStatus } from "@lookiero/messaging-react";
+// import { Country } from "@lookiero/sty-psp-locale";
+// import { Segment } from "@lookiero/sty-psp-segment";
+// import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+// import { checkout } from "../../../../../projection/checkout/checkout.mock";
+// import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+// import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+// import { paymentFlowPayload as mockPaymentFlowPayload } from "../../../../../projection/payment/paymentFlowPayload.mock";
+// import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+// import { pricing } from "../../../../../projection/pricing/pricing.mock";
+// import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
+// import { useCheckoutFlow } from "../../../../hooks/useCheckoutFlow";
+// import { Routes } from "../../../../routing/routes";
+// import { render } from "../../../../test/render";
 
-const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
-const country = Country.ES;
-const segment = Segment.WOMEN;
-const orderNumber = 3691625;
-const isFirstOrder = false;
-const getAuthToken = () => Promise.resolve("token");
-const mockCheckout = checkout({
-  items: [
-    { status: CheckoutItemStatus.RETURNED },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.REPLACED },
-  ],
-});
-const mockPricing = pricing();
+// const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+// const country = Country.ES;
+// const segment = Segment.WOMEN;
+// const orderNumber = 3691625;
+// const isFirstOrder = false;
+// const getAuthToken = () => Promise.resolve("token");
+// const mockCheckout = checkout({
+//   items: [
+//     { status: CheckoutItemStatus.RETURNED },
+//     { status: CheckoutItemStatus.KEPT },
+//     { status: CheckoutItemStatus.KEPT },
+//     { status: CheckoutItemStatus.KEPT },
+//     { status: CheckoutItemStatus.REPLACED },
+//   ],
+// });
+// const mockPricing = pricing();
 
-jest.mock("../../../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
-}));
+// jest.mock("../../../../hooks/useStaticInfo", () => ({
+//   useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+// }));
 
-jest.mock("../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
-jest.mock("../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
-jest.mock("../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
-jest.mock("../../../../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("../../../../hooks/useSubmitCheckout");
-jest.mock("../../../../../tracking/useTrackCheckout");
+// jest.mock("../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
+// jest.mock("../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
+// jest.mock("../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
+// jest.mock("../../../../../projection/pricing/react/useViewPricingByCheckoutId");
+// jest.mock("../../../../hooks/useSubmitCheckout");
+// jest.mock("../../../../../tracking/useTrackCheckout");
 
-const mockStartLegacyBoxCheckout = jest.fn();
-jest.mock("@lookiero/payments-front", () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useImperativeHandle, forwardRef } = require("react");
+// const mockStartLegacyBoxCheckout = jest.fn();
+// jest.mock("@lookiero/payments-front", () => {
+//   // eslint-disable-next-line @typescript-eslint/no-var-requires
+//   const { useImperativeHandle, forwardRef } = require("react");
 
-  return {
-    CheckoutStatus: {
-      REJECTED: "REJECTED",
-      ERROR: "ERROR",
-      FULFILLED: "FULFILLED",
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/naming-convention, react/display-name
-    PaymentFlow: forwardRef((params, ref) => {
-      useImperativeHandle(ref, () => ({
-        startLegacyBoxCheckout: mockStartLegacyBoxCheckout,
-      }));
+//   return {
+//     CheckoutStatus: {
+//       REJECTED: "REJECTED",
+//       ERROR: "ERROR",
+//       FULFILLED: "FULFILLED",
+//     },
+//     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//     // @ts-ignore
+//     // eslint-disable-next-line @typescript-eslint/naming-convention, react/display-name
+//     PaymentFlow: forwardRef((params, ref) => {
+//       useImperativeHandle(ref, () => ({
+//         startLegacyBoxCheckout: mockStartLegacyBoxCheckout,
+//       }));
 
-      return null;
-    }),
-    PaymentMethod: {
-      ["GOOGLE_PAY"]: "google_pay",
-    },
-    Section: {
-      ["BOX_CHECKOUT"]: "box-checkout",
-    },
-    PaymentInstrumentSelect: jest.fn(() => <></>),
-  };
-});
+//       return null;
+//     }),
+//     PaymentMethod: {
+//       ["GOOGLE_PAY"]: "google_pay",
+//     },
+//     Section: {
+//       ["BOX_CHECKOUT"]: "box-checkout",
+//     },
+//     PaymentInstrumentSelect: jest.fn(() => <></>),
+//   };
+// });
 
-const mockUseNavigate = jest.fn();
-jest.mock("react-router-native", () => ({
-  ...jest.requireActual("react-router-native"),
-  useNavigate: () => mockUseNavigate,
-}));
+// const mockUseNavigate = jest.fn();
+// jest.mock("react-router-native", () => ({
+//   ...jest.requireActual("react-router-native"),
+//   useNavigate: () => mockUseNavigate,
+// }));
 
 describe("CheckoutPaymentModal component", () => {
-  it("renders correctly", async () => {
-    const mockSubmitCheckout = jest.fn();
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
-    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
-    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
-    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
-
-    await waitFor(() => {
-      render(
-        <CheckoutPaymentModal
-          coupon={null}
-          getAuthToken={getAuthToken}
-          isFirstOrder={isFirstOrder}
-          orderNumber={orderNumber}
-          subscription="b"
-        />,
-      );
-      expect(mockSubmitCheckout).toHaveBeenCalled();
-    });
-  });
-
-  it("navigates back to /checkout when checkout-flow fails", async () => {
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
-    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
-    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
-    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockImplementation(({ onError }) => {
-      const submitCheckout = () => onError();
-
-      return [submitCheckout, "error"];
-    });
-
-    await waitFor(() => {
-      render(
-        <CheckoutPaymentModal
-          coupon={null}
-          getAuthToken={getAuthToken}
-          isFirstOrder={isFirstOrder}
-          orderNumber={orderNumber}
-          subscription="b"
-        />,
-      );
-      expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}`, { replace: true });
-    });
-  });
+  // it("renders correctly", async () => {
+  //   const mockSubmitCheckout = jest.fn();
+  //   (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+  //   (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
+  //   (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
+  //   (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
+  //   (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
+  //   await waitFor(() => {
+  //     render(
+  //       <CheckoutPaymentModal
+  //         coupon={null}
+  //         getAuthToken={getAuthToken}
+  //         isFirstOrder={isFirstOrder}
+  //         orderNumber={orderNumber}
+  //         subscription="b"
+  //       />,
+  //     );
+  //     expect(mockSubmitCheckout).toHaveBeenCalled();
+  //   });
+  // });
+  // it("navigates back to /checkout when checkout-flow fails", async () => {
+  //   (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+  //   (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
+  //   (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
+  //   (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
+  //   (useSubmitCheckout as jest.Mock).mockImplementation(({ onError }) => {
+  //     const submitCheckout = () => onError();
+  //     return [submitCheckout, "error"];
+  //   });
+  //   await waitFor(() => {
+  //     render(
+  //       <CheckoutPaymentModal
+  //         coupon={null}
+  //         getAuthToken={getAuthToken}
+  //         isFirstOrder={isFirstOrder}
+  //         orderNumber={orderNumber}
+  //         subscription="b"
+  //       />,
+  //     );
+  //     expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}`, { replace: true });
+  //   });
+  // });
 });

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 
 const DeliveryBanner = () => {
   const { screen } = useDevice();
@@ -10,7 +10,7 @@ const DeliveryBanner = () => {
     <InfoBox
       contentAlign={screen.L ? ALIGN.CENTER : undefined}
       testID="delivery-banner"
-      text={useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
+      text={useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
       type={INFOBOX_TYPE.SQUARED}
     />
   );

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/__snapshots__/DeliveryBanner.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`DeliveryBanner component matches the snapshot 1`] = `
                   "paddingBottom": 0,
                   "paddingLeft": 0,
                   "paddingRight": 0,
-                  "paddingTop": 4,
+                  "paddingTop": 5,
                 },
               ]
             }

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -1,24 +1,24 @@
-import React, { FC, useRef } from "react";
+import React, { FC } 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";
 
 interface PaymentInstrumentProps {
   readonly useRedirect: () => Record<string, string>;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
-  const paymentInstrumentSelectRef = useRef(null);
   const { returnUrl } = useRedirect();
-  const logger = useLogger();
-
-  usePaymentInstrumentEvents({ logger });
+  const { customer } = useStaticInfo();
 
   return (
     <PaymentInstrumentSelect
-      ref={paymentInstrumentSelectRef}
       beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
       hasError={false}
       section={Section.BOX_CHECKOUT}
+      userInformation={{
+        email: customer.email,
+        name: customer.name,
+      }}
+      showSingleUsePaymentMethods
     />
   );
 };

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -18,7 +18,7 @@ import { HostDefaultCheckoutQuestionItem } from "../../../../components/organism
 import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem";
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
   [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
@@ -39,7 +39,7 @@ const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps> = ({
   submitButtonDisabled,
   onSubmit,
 }) => {
-  const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_BUTTON });
+  const buttonText = useI18nMessage({ id: I18nMessages.FEEDBACK_BUTTON });
 
   const feedback = useCheckoutQuestionFeedback();
   const handlePress = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);

package/src/infrastructure/ui/views/item/Item.tsx

@@ -28,7 +28,6 @@ import { ItemDetailHeader } from "../../components/templates/header/itemDetailHe
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Item.style";
 import {
   CheckoutItemWithCustomerDecission,
@@ -62,9 +61,9 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
   const logger = useLogger();
   const screenSize = useScreenSize();
   const navigate = useNavigate();
-  const basePath = useBasePath();
   const {
     customer: { customerId, country, segment },
+    basePath,
   } = useStaticInfo();
   const isDesktopScreen = screenSize !== "S";
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -4,7 +4,7 @@ import { InfoBox, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
 
 type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
@@ -20,8 +20,8 @@ interface CustomerDecissionBannerProps {
   readonly onPress: () => void;
 }
 const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutItemStatus, onPress }) => {
-  const decissionText = useI18nMessage({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
-  const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
+  const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+  const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
   const screenSize = useScreenSize();
   const isSmallScreen = screenSize === "S";
 

package/src/infrastructure/ui/views/item/components/banner/__snapshots__/CustomerDecissionBanner.test.tsx.snap

@@ -89,7 +89,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a KEPT check
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 4,
+                    "paddingTop": 5,
                   },
                 ]
               }
@@ -258,7 +258,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a REPLACED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 4,
+                    "paddingTop": 5,
                   },
                 ]
               }
@@ -427,7 +427,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a RETURNED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 4,
+                    "paddingTop": 5,
                   },
                 ]
               }