@lookiero/checkout 9.9.0-beta.2 → 9.10.0

package/src/infrastructure/ui/hooks/useSubmitCheckout.test.ts

@@ -6,9 +6,11 @@ import { PaymentFlowRef } from "@lookiero/payments-front";
 import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
 import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { paymentFlowPayload as mockPaymentFlowPayload } from "../../projection/payment/paymentFlowPayload.mock";
+import { useQueryBus } from "./useQueryBus";
 import { useSubmitCheckout as sut } from "./useSubmitCheckout";
 
 const checkoutId = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df";
@@ -18,6 +20,7 @@ const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => statu
 const logger = mock<Logger>();
 
 jest.mock("@lookiero/sty-psp-notifications");
+jest.mock("./useQueryBus");
 jest.mock("../../domain/checkout/react/useSubmitCheckout");
 jest.mock("../../domain/checkoutBooking/react/useBlockCheckoutBooking");
 
@@ -38,6 +41,7 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
@@ -86,6 +90,7 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
@@ -126,6 +131,7 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.ERROR]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.IDLE]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
@@ -166,6 +172,7 @@ describe("useSubmitCheckout custom hook", () => {
         },
       };
 
+      (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
       (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
       (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
       (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
@@ -212,6 +219,7 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.ERROR]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
@@ -236,4 +244,54 @@ describe("useSubmitCheckout custom hook", () => {
       expect(mockOnError).toHaveBeenCalled();
     });
   });
+
+  test("returns submitCheckout error as the status right after calling 'submitCheckout' if CheckoutBooking isExpired", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockOnSuccess = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: true }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
+
+    const { result } = renderHook(() =>
+      sut({
+        checkoutId,
+        checkoutBookingId,
+        paymentFlowRef: mockPaymentFlowRef,
+        onError: mockOnError,
+        onSuccess: mockOnSuccess,
+        logger,
+      }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).not.toHaveBeenCalled();
+
+      expect(status).toBe("error");
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -1,14 +1,39 @@
 import { RefObject, useCallback, useMemo, useState } from "react";
 import { CommandStatus } from "@lookiero/messaging-react";
-import { PaymentFlowRef, PaymentPayload } from "@lookiero/payments-front";
+import { PaymentFlowRef } from "@lookiero/payments-front";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import {
+  ViewCheckoutBookingById,
+  viewCheckoutBookingById,
+  ViewCheckoutBookingByIdResult,
+} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
 import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
 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 { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+
+enum ChargeStatus {
+  EXECUTED = "EXECUTED",
+  REQUIRES_ACTION = "REQUIRES_ACTION",
+  REQUIRED_ACTION_CANCELLED = "REQUIRED_ACTION_CANCELLED",
+  REJECTED = "REJECTED",
+  CANCELLED = "CANCELLED",
+  TO_CONFIRM = "TO_CONFIRM",
+  ERROR = "ERROR",
+  UNKNOWN = "UNKNOWN",
+}
+interface LegacyBoxCheckout {
+  readonly status: ChargeStatus;
+  readonly toaster: {
+    id: string;
+  } | null;
+  readonly final: boolean;
+  readonly id?: string;
+  readonly translation?: string;
+}
 
 type Status = "idle" | "loading" | "success" | "error";
 
@@ -28,7 +53,7 @@ interface UseSubmitCheckoutFunctionArgs {
   readonly checkoutBookingId: string;
   readonly paymentFlowRef: RefObject<PaymentFlowRef>;
   readonly onError: () => void;
-  readonly onSuccess: () => void;
+  readonly onSuccess?: () => void;
   readonly logger: Logger;
 }
 
@@ -44,9 +69,11 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
   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<Status>("idle");
 
@@ -58,37 +85,48 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
         return;
       }
 
-      setStartLegacyBoxCheckoutStatus("loading");
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      paymentFlowRef.current?.startLegacyBoxCheckout(paymentFlowPayload);
-    },
-    [paymentFlowRef, blockCheckoutBooking],
-  );
+      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
+        viewCheckoutBookingById({ checkoutBookingId }),
+      );
 
-  const onPaymentSuccess = useCallback(async () => {
-    setStartLegacyBoxCheckoutStatus("success");
-
-    await submitCheckoutCommand();
-
-    createNotification({
-      bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
-      level: NotificationLevel.SUCCESS,
-    });
-  }, [createNotification, submitCheckoutCommand]);
-  const onPaymentError = useCallback(
-    (payload: PaymentPayload) => {
-      setStartLegacyBoxCheckoutStatus("error");
+      if (checkoutBooking?.isExpired) {
+        setCheckoutBookingExpired(true);
+        return;
+      }
 
-      createNotification({
-        bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-        level: NotificationLevel.ERROR,
-      });
+      paymentFlowRef.current?.startLegacyBoxCheckout(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        paymentFlowPayload,
+        async ({ status, toaster, final }: LegacyBoxCheckout) => {
+          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");
+            }
+          }
+        },
+      );
     },
-    [createNotification],
+    [
+      queryBus,
+      checkoutBookingId,
+      paymentFlowRef,
+      blockCheckoutBooking,
+      submitCheckoutCommand,
+      onSuccess,
+      createNotification,
+    ],
   );
-  usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
 
   const status: Status = useMemo(() => {
     if (
@@ -103,20 +141,26 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
       startLegacyBoxCheckoutStatus === "success" &&
       submitCheckoutCommandStatus === CommandStatus.SUCCESS
     ) {
-      onSuccess();
       return "success";
     }
     if (
       blockCheckoutBookingStatus === CommandStatus.ERROR ||
       startLegacyBoxCheckoutStatus === "error" ||
-      submitCheckoutCommandStatus === CommandStatus.ERROR
+      submitCheckoutCommandStatus === CommandStatus.ERROR ||
+      checkoutBookingExpired
     ) {
       onError();
       return "error";
     }
 
     return "idle";
-  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
+  }, [
+    blockCheckoutBookingStatus,
+    startLegacyBoxCheckoutStatus,
+    submitCheckoutCommandStatus,
+    checkoutBookingExpired,
+    onError,
+  ]);
 
   return [submitCheckout, status];
 };

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

@@ -48,7 +48,6 @@ 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/src/infrastructure/ui/views/App.tsx

@@ -1,7 +1,8 @@
-import { PortalHost } from "@gorhom/portal";
+import { PortalProvider } 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";
@@ -14,10 +15,17 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-    <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
-    <PortalHost name="Checkout" />
-    {children}
+    <PortalProvider rootHostName="Checkout">
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} 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>
   </SafeAreaProvider>
 );
 

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

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

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

@@ -4,7 +4,6 @@ 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 { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -117,12 +116,6 @@ 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>
@@ -146,11 +139,9 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 </View>
               ))}
 
-              {country !== Country.NL && (
-                <View style={style.paymentSelector}>
-                  <PaymentInstrument useRedirect={useRedirect} />
-                </View>
-              )}
+              <View style={style.paymentSelector}>
+                <PaymentInstrument useRedirect={useRedirect} />
+              </View>
             </View>
           </Box>
 

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

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-native";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow, PaymentFlowRef, Section } from "@lookiero/payments-front";
+import { PaymentFlow, PaymentFlowRef } from "@lookiero/payments-front";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../../../../../domain/checkoutItem/model/currency";
@@ -119,7 +119,7 @@ const CheckoutPaymentModal: FC<CheckoutPaymentModalProps> = ({
 
   if (!dependenciesLoaded) return null;
 
-  return <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} />;
+  return <PaymentFlow ref={paymentFlowRef} token={authToken} />;
 };
 
 export { CheckoutPaymentModal };

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": 5,
+                  "paddingTop": 4,
                 },
               ]
             }

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

@@ -1,24 +1,24 @@
-import React, { FC } from "react";
+import React, { FC, useRef } from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
-import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
 
 interface PaymentInstrumentProps {
   readonly useRedirect: () => Record<string, string>;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
+  const paymentInstrumentSelectRef = useRef(null);
   const { returnUrl } = useRedirect();
-  const { customer } = useStaticInfo();
+  const logger = useLogger();
+
+  usePaymentInstrumentEvents({ logger });
 
   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/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": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }
@@ -258,7 +258,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a REPLACED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }
@@ -427,7 +427,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a RETURNED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                       "paddingBottom": 0,
                       "paddingLeft": 0,
                       "paddingRight": 0,
-                      "paddingTop": 2,
+                      "paddingTop": 0,
                       "width": "100%",
                     },
                   ]
@@ -339,7 +339,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "paddingBottom": 0,
                           "paddingLeft": 0,
                           "paddingRight": 0,
-                          "paddingTop": 2,
+                          "paddingTop": 0,
                           "textAlign": "center",
                           "textTransform": "uppercase",
                           "width": "100%",
@@ -469,7 +469,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "paddingBottom": 0,
                           "paddingLeft": 0,
                           "paddingRight": 0,
-                          "paddingTop": 2,
+                          "paddingTop": 0,
                           "textAlign": "center",
                           "textTransform": "uppercase",
                           "width": "100%",

package/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -222,7 +222,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       "paddingBottom": 0,
                       "paddingLeft": 0,
                       "paddingRight": 0,
-                      "paddingTop": 2,
+                      "paddingTop": 0,
                       "textAlign": "center",
                     },
                   ]
@@ -350,7 +350,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       "paddingBottom": 0,
                       "paddingLeft": 0,
                       "paddingRight": 0,
-                      "paddingTop": 2,
+                      "paddingTop": 0,
                       "textAlign": "center",
                     },
                   ]
@@ -475,7 +475,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 2,
+                    "paddingTop": 0,
                     "textAlign": "center",
                   },
                 ]
@@ -788,7 +788,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                             "paddingBottom": 0,
                             "paddingLeft": 0,
                             "paddingRight": 0,
-                            "paddingTop": 2,
+                            "paddingTop": 0,
                           },
                         ]
                       }
@@ -846,7 +846,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                             "paddingBottom": 0,
                             "paddingLeft": 0,
                             "paddingRight": 0,
-                            "paddingTop": 2,
+                            "paddingTop": 0,
                           },
                         ]
                       }

package/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.ts

@@ -1,11 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space4, space6 } = theme();
+const { space1, space4, space6 } = theme();
 
 const style = StyleSheet.create({
   brand: {
     flex: 1,
+    gap: space1,
   },
   container: {
     width: "100%",

package/src/infrastructure/ui/views/item/components/productVariantDescription/__snapshots__/ProductVariantDescription.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
         style={
           {
             "flex": 1,
+            "gap": 4,
           }
         }
       >
@@ -71,7 +72,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -92,7 +93,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -122,7 +123,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -146,7 +147,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 4,
+            "paddingTop": 0,
           },
         ]
       }
@@ -211,6 +212,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
         style={
           {
             "flex": 1,
+            "gap": 4,
           }
         }
       >
@@ -228,7 +230,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -249,7 +251,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -279,7 +281,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
-                "paddingTop": 4,
+                "paddingTop": 0,
               },
             ]
           }
@@ -303,7 +305,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 4,
+            "paddingTop": 0,
           },
         ]
       }