@lookiero/checkout 11.5.0 → 12.0.0

package/dist/index.d.ts

@@ -33,6 +33,5 @@ interface BootstrapFunction {
     (args: BootstrapFunctionArgs): BootstrapFunctionReturn;
 }
 declare const bootstrap: BootstrapFunction;
-export type { Project };
 export { bootstrap, translationEndpoint, translationExternalEndpoint, Country, Segment, CheckoutStatus, Tradename };
-export type { SentryEnvironment, KameleoonEnvironment, Customer, SubscriptionProjection as Subscription, OrderProjection as Order, Locale, };
+export type { Project, SentryEnvironment, KameleoonEnvironment, Customer, SubscriptionProjection as Subscription, OrderProjection as Order, Locale, };

package/dist/src/ExpoRoot.d.ts

@@ -1,4 +1,3 @@
-import "expo/build/Expo.fx";
 import { FC } from "react";
 declare const ExpoRoot: FC;
 export { ExpoRoot };

package/dist/src/ExpoRoot.js

@@ -1,6 +1,5 @@
 import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
-import "expo/build/Expo.fx";
 import React, { useCallback, useState } from "react";
 import { Platform, ScrollView } from "react-native";
 import { Navigate, Route, Routes } from "react-router-native";
@@ -29,7 +28,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "dd186ec9-109f-418d-a770-c6721aa2a97e",
+    customerId: "5c38e826-3d01-4a4b-a3d1-8a4166dc2a31",
     country: Country.NL,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -46,7 +45,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2OTUxOTEsImV4cCI6MTc0ODA3NzU5NSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMjQiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZGQxODZlYzktMTA5Zi00MThkLWE3NzAtYzY3MjFhYTJhOTdlIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDU0ODU1OTV9.MHdtbMWX4lUU98ARiGALsUNkoqu1wKN7Qd-fCv6oqi4";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU3MDEwMTIsImV4cCI6MTc1MDMyMTgwOSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDUtMTkiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNWMzOGU4MjYtM2QwMS00YTRiLWEzZDEtOGE0MTY2ZGMyYTMxIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDc2NDM0MDl9.-amqZAXKy9KKeo9a7bOQigWw1flM99OBlddxbMBA_PU";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, JSX } from "react";
 interface CheckoutMiddlewareProps {
     readonly customerId: string;
     readonly onNotAccessible: () => void;

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

@@ -34,7 +34,7 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
     const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
     feedbackRouteMatchRef.current = feedbackRouteMatch;
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-    const checkoutItemsRef = useRef();
+    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 });
@@ -55,7 +55,9 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
              */
             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;
+            if (checkout) {
+                checkoutItemsRef.current = checkout.items;
+            }
             /* Navigate to the summary if required */
             if (itemWithoutCustomerDecision === undefined &&
                 !(summaryRouteMatchRef.current ||

package/dist/src/infrastructure/ui/test/render.js

@@ -9,7 +9,7 @@ const I18nProvider = createI18nProvider({ domain: DOMAIN });
 const renderWrapper = ({ locale, messages = {}, wrapper: Wrapper = Fragment, logger = mock() }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
 ({ children }) => (React.createElement(Aurora, null,
-    React.createElement(I18nProvider, { locale: locale, messages: messages, onError: () => void 0 },
+    React.createElement(I18nProvider, { locale: locale, messages: messages, onError: () => { }, onWarn: () => { } },
         React.createElement(LoggerProvider, { logger: logger },
             React.createElement(Wrapper, null, children)))));
 const renderWithProviders = (ui, { locale, messages, wrapper } = { locale: "en" }) => render(ui, { wrapper: renderWrapper({ locale, messages, wrapper }) });

package/dist/src/infrastructure/ui/views/App.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, JSX } from "react";
 interface AppProps {
     readonly children: JSX.Element;
 }

package/dist/src/projection/returnQuestion/returnQuestion.typeguard.d.ts

@@ -1,5 +1,5 @@
-import { ReturnQuestionProjection, ReturnQuestionTypesWithChildren } from "./returnQuestion";
+import { ReturnQuestionProjection, ReturnQuestionTypesWithChildren, ReturnQuestionTypesWithOptionalTranslationKeys } from "./returnQuestion";
 import { ReturnQuestionType } from "./returnQuestion.constants";
-declare const returnQuestionWithTranslationKey: (question: ReturnQuestionProjection) => question is ReturnQuestionProjection<ReturnQuestionType.HOST_DEFAULT | ReturnQuestionType.HOST_TEXTAREA | ReturnQuestionType.HOST_SELECT | ReturnQuestionType.TEXTAREA | ReturnQuestionType.OPTION>;
+declare const returnQuestionWithTranslationKey: (question: ReturnQuestionProjection) => question is ReturnQuestionProjection<Exclude<ReturnQuestionType, ReturnQuestionTypesWithOptionalTranslationKeys>>;
 declare const returnQuestionHasChildren: (question: ReturnQuestionProjection) => question is ReturnQuestionProjection<ReturnQuestionTypesWithChildren>;
 export { returnQuestionWithTranslationKey, returnQuestionHasChildren };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "11.5.0";
+export declare const VERSION = "12.0.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "11.5.0";
+export const VERSION = "12.0.0";

package/index.ts

@@ -58,9 +58,9 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, translations, sent
   };
 };
 
-export type { Project };
 export { bootstrap, translationEndpoint, translationExternalEndpoint, Country, Segment, CheckoutStatus, Tradename };
 export type {
+  Project,
   SentryEnvironment,
   KameleoonEnvironment,
   Customer,

package/jest.config.js

@@ -4,7 +4,4 @@ module.exports = {
   ...jestReactNativeConfig,
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
-  moduleNameMapper: {
-    ...(jestReactNativeConfig.moduleNameMapper || {}),
-  },
 };

package/jest.setup.js

@@ -1,9 +1,17 @@
 import mockAsyncStorage from "@react-native-async-storage/async-storage/jest/async-storage-mock";
-import "@testing-library/jest-native/extend-expect";
 import "@lookiero/sty-psp-jest-config/jest.setup.base";
 
 require("react-native-reanimated").setUpTests();
 
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = jest.requireActual('react-native-reanimated/mock');
+
+  // Override call to prevent warnings in newer versions
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
 jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "11.5.0",
+  "version": "12.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -22,23 +22,23 @@
     "@lookiero/messaging": "^8.1.1",
     "@lookiero/messaging-react": "^8.1.1",
     "@lookiero/sty-psp-ab-testing": "^0.3",
-    "@lookiero/sty-psp-expo-config": "^0.2",
+    "@lookiero/sty-psp-expo-config": "^1.0",
     "@lookiero/sty-psp-http": "^2.0",
     "@lookiero/sty-psp-i18n": "^1.0",
     "@lookiero/sty-psp-locale": "^0.4",
-    "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^1.2",
-    "@lookiero/sty-psp-react-native": "^0.3",
+    "@lookiero/sty-psp-logging": "^1.0",
+    "@lookiero/sty-psp-notifications": "^2.0",
+    "@lookiero/sty-psp-react-native": "^1.0",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
-    "@lookiero/sty-psp-tracking": "^0.2",
-    "@lookiero/sty-sp-tradename": "^1.0",
-    "@lookiero/sty-psp-ui": "^1.1",
-    "@lookiero/sty-psp-ui-settings": "^0.2",
+    "@lookiero/sty-psp-tracking": "^1.0",
+    "@lookiero/sty-psp-ui": "^2.0",
+    "@lookiero/sty-psp-ui-settings": "^1.0",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
+    "@lookiero/sty-sp-tradename": "^1.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "15.8.0",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
@@ -52,20 +52,22 @@
     "@lookiero/sty-psp-scripts": "*",
     "@lookiero/sty-psp-typescript": "*",
     "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native/assets-registry": "^0.79.2",
     "@remix-run/router": ">=1.10",
-    "@testing-library/react-native": ">=12",
+    "@testing-library/react-native": ">=13",
     "@types/jest-when": ">=3",
     "apollo-boost": "0.4.4",
     "buffer": "5.6.0",
     "cypress": "^13.14.2",
     "detox": "^20.11.0",
-    "expo-crypto": "~13.0.2",
+    "expo-crypto": "~14.0.2",
     "jest-mock-extended": ">=3",
     "jest-when": ">=3",
-    "react-native-gesture-handler": "~2.16.1",
+    "metro": "^0.81.0",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "peerDependencies": {
@@ -77,14 +79,14 @@
     "@lookiero/i18n-react": ">=2",
     "@lookiero/payments-front": ">=7",
     "apollo-boost": "0.4.4",
-    "expo": ">=51",
+    "expo": ">=52",
     "expo-font": ">=12",
     "react": ">=18",
-    "react-native": ">=0.74",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native": ">=0.76",
+    "react-native-gesture-handler": ">=2.20",
     "react-native-get-random-values": ">=1.11",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": ">=4.10",
+    "react-native-reanimated": ">=3.16",
+    "react-native-safe-area-context": ">=4.12",
     "react-router-dom": ">=6.14",
     "react-router-native": ">=6.14",
     "uuid": ">=9"

package/src/ExpoRoot.tsx

@@ -1,6 +1,5 @@
 import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
-import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
 import { Platform, ScrollView } from "react-native";
 import { Navigate, Route, Routes } from "react-router-native";
@@ -38,7 +37,7 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "dd186ec9-109f-418d-a770-c6721aa2a97e",
+  customerId: "5c38e826-3d01-4a4b-a3d1-8a4166dc2a31",
   country: Country.NL,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -59,7 +58,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2OTUxOTEsImV4cCI6MTc0ODA3NzU5NSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMjQiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZGQxODZlYzktMTA5Zi00MThkLWE3NzAtYzY3MjFhYTJhOTdlIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDU0ODU1OTV9.MHdtbMWX4lUU98ARiGALsUNkoqu1wKN7Qd-fCv6oqi4";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU3MDEwMTIsImV4cCI6MTc1MDMyMTgwOSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDUtMTkiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNWMzOGU4MjYtM2QwMS00YTRiLWEzZDEtOGE0MTY2ZGMyYTMxIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NDc2NDM0MDl9.-amqZAXKy9KKeo9a7bOQigWw1flM99OBlddxbMBA_PU";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =

package/src/infrastructure/ui/hooks/useCheckoutFlow.test.tsx

@@ -6,6 +6,7 @@ import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp
 import { Segment } from "@lookiero/sty-psp-segment";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
+import { Customer } from "../../../projection/customer/customer";
 import { OrderProjection } from "../../../projection/order/order";
 import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
@@ -45,8 +46,17 @@ const country = Country.ES;
 const email = "email@example.com";
 const name = "Adèle Léonce Émilie";
 const segment = Segment.WOMEN;
+
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+  name,
+  email,
+};
+
 jest.mock("./useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment, name, email }, basePath }),
+  useStaticInfo: () => ({ customer: mockCustomer, basePath }),
 }));
 
 // const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => status !== ChargeStatus.EXECUTED);

package/src/infrastructure/ui/hooks/useQueryBus.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from "@testing-library/react-native";
 import { mockFn } from "jest-mock-extended";
-import React, { FC } from "react";
+import React, { FC, JSX } from "react";
 import { QueryBus } from "@lookiero/messaging";
 import { QueryBusProvider, useQueryBus as sut } from "./useQueryBus";
 

package/src/infrastructure/ui/hooks/useStaticInfo.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from "@testing-library/react-native";
-import React, { FC } from "react";
+import React, { FC, JSX } from "react";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";

package/src/infrastructure/ui/routing/CheckoutMiddleware.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from "react";
+import React, { FC, JSX, useEffect, useRef } from "react";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
 import { Spinner } from "@lookiero/aurora";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -50,7 +50,7 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
   feedbackRouteMatchRef.current = feedbackRouteMatch;
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-  const checkoutItemsRef = useRef<CheckoutItemProjection[]>();
+  const checkoutItemsRef = useRef<CheckoutItemProjection[]>([]);
 
   /* This hook is mounted at this level, although not being used directly, for optimization (regarding cache) */
   useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
@@ -84,7 +84,9 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
             ),
         ) || checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
 
-      checkoutItemsRef.current = checkout?.items;
+      if (checkout) {
+        checkoutItemsRef.current = checkout.items;
+      }
 
       /* Navigate to the summary if required */
       if (

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

@@ -26,7 +26,7 @@ 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}>
+      <I18nProvider locale={locale as string} messages={messages} onError={() => {}} onWarn={() => {}}>
         <LoggerProvider logger={logger}>
           <Wrapper>{children}</Wrapper>
         </LoggerProvider>

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

@@ -1,5 +1,5 @@
 import { PortalHost } from "@gorhom/portal";
-import React, { FC } from "react";
+import React, { FC, JSX } from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Notifications } from "@lookiero/sty-psp-notifications";

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

@@ -6,6 +6,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { OrderProjection } from "../../../../projection/order/order";
 import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -22,6 +23,11 @@ const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
 const basePath = "/checkout";
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 const mockCheckout = checkout({
   items: [
     { status: CheckoutItemStatus.RETURNED },
@@ -41,14 +47,15 @@ const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookie
 
 const mockOnSuccess = jest.fn();
 const mockCheckoutFlow = jest.fn();
+const mockStatus = QueryStatus.SUCCESS;
 const paymentFlowTestId = "payment-flow";
 const mockPaymentFlowComponent: ReactNode = <View testID={paymentFlowTestId}>PaymentFlow</View>;
 jest.mock("../../hooks/useCheckoutFlow", () => ({
-  useCheckoutFlow: () => [mockCheckoutFlow, QueryStatus.SUCCESS, mockPaymentFlowComponent],
+  useCheckoutFlow: () => [mockCheckoutFlow, mockStatus, mockPaymentFlowComponent],
 }));
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment }, basePath }),
+  useStaticInfo: () => ({ customer: mockCustomer, basePath }),
 }));
 // eslint-disable-next-line @typescript-eslint/naming-convention
 jest.mock("./components/paymentInstrument/PaymentInstrument", () => ({ PaymentInstrument: () => null }));

package/src/infrastructure/ui/views/feedback/Feedback.test.tsx

@@ -5,6 +5,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -25,9 +26,14 @@ const checkoutMock = checkout({
   ],
 });
 const mockGiveCheckoutFeedback = jest.fn();
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({ customer: mockCustomer }),
 }));
 
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");

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

@@ -5,6 +5,7 @@ import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../../projection/customer/customer";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../domain/checkoutItem/react/useReplaceCheckoutItem";
@@ -26,9 +27,14 @@ const mockFirstCheckoutItemId = "a5422445-0e62-4b11-8a3f-1bb5469ee154";
 const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const mockCustomer: Customer = {
+  customerId,
+  country,
+  segment,
+} as Customer;
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({ customer: mockCustomer }),
 }));
 
 const mockNavigate = jest.fn();

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

@@ -58,15 +58,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         }
       }
       accessible={true}
-      collapsable={false}
       focusable={true}
-      jestAnimatedStyle={
-        {
-          "value": {
-            "opacity": 1,
-          },
-        }
-      }
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -75,14 +67,19 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        {
-          "backgroundColor": "rgba(12, 10, 10, 0.7)",
-          "height": "100%",
-          "opacity": 1,
-          "position": "absolute",
-          "width": "100%",
-          "zIndex": 1,
-        }
+        [
+          {
+            "backgroundColor": "rgba(12, 10, 10, 0.7)",
+            "height": "100%",
+            "position": "absolute",
+            "width": "100%",
+            "zIndex": 1,
+          },
+          undefined,
+          {
+            "opacity": 1,
+          },
+        ]
       }
       testID="modal-close-button"
     />
@@ -116,10 +113,26 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
       }
     >
       <View
-        collapsable={false}
-        jestAnimatedStyle={
-          {
-            "value": {
+        pointerEvents="auto"
+        style={
+          [
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 16,
+              "position": "absolute",
+              "width": "100%",
+              "zIndex": 3,
+            },
+            {
+              "borderBottomLeftRadius": 0,
+              "borderBottomRightRadius": 0,
+            },
+            undefined,
+            {
+              "maxHeight": 800,
+            },
+            undefined,
+            {
               "opacity": 1,
               "transform": [
                 {
@@ -130,29 +143,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 },
               ],
             },
-          }
-        }
-        pointerEvents="auto"
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": 0,
-            "borderBottomRightRadius": 0,
-            "borderRadius": 16,
-            "maxHeight": 800,
-            "opacity": 1,
-            "position": "absolute",
-            "transform": [
-              {
-                "translateY": 0,
-              },
-              {
-                "scale": 1,
-              },
-            ],
-            "width": "100%",
-            "zIndex": 3,
-          }
+          ]
         }
       >
         <View

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

@@ -632,15 +632,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
           }
         }
         accessible={true}
-        collapsable={false}
         focusable={false}
-        jestAnimatedStyle={
-          {
-            "value": {
-              "opacity": 0,
-            },
-          }
-        }
         onClick={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
@@ -649,14 +641,19 @@ exports[`ItemActions component matches the snapshot 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          {
-            "backgroundColor": "rgba(12, 10, 10, 0.7)",
-            "height": "100%",
-            "opacity": 0,
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 1,
-          }
+          [
+            {
+              "backgroundColor": "rgba(12, 10, 10, 0.7)",
+              "height": "100%",
+              "position": "absolute",
+              "width": "100%",
+              "zIndex": 1,
+            },
+            undefined,
+            {
+              "opacity": 0,
+            },
+          ]
         }
         testID="modal-close-button"
       />
@@ -690,10 +687,26 @@ exports[`ItemActions component matches the snapshot 1`] = `
         }
       >
         <View
-          collapsable={false}
-          jestAnimatedStyle={
-            {
-              "value": {
+          pointerEvents="none"
+          style={
+            [
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": 16,
+                "position": "absolute",
+                "width": "100%",
+                "zIndex": 3,
+              },
+              {
+                "borderBottomLeftRadius": 0,
+                "borderBottomRightRadius": 0,
+              },
+              undefined,
+              {
+                "maxHeight": 800,
+              },
+              undefined,
+              {
                 "opacity": 1,
                 "transform": [
                   {
@@ -704,29 +717,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                   },
                 ],
               },
-            }
-          }
-          pointerEvents="none"
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-              "borderBottomLeftRadius": 0,
-              "borderBottomRightRadius": 0,
-              "borderRadius": 16,
-              "maxHeight": 800,
-              "opacity": 1,
-              "position": "absolute",
-              "transform": [
-                {
-                  "translateY": 800,
-                },
-                {
-                  "scale": 1,
-                },
-              ],
-              "width": "100%",
-              "zIndex": 3,
-            }
+            ]
           }
         >
           <View