@lookiero/checkout 8.14.0-beta.3 → 8.15.0

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

@@ -1,20 +1,15 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
-import { StatusBar, View } from "react-native";
+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, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { style } from "./App.style";
 const { colorBgBase } = theme();
-const App = ({ children }) => {
-    const { container } = useEnvironmentStyle();
-    return (React.createElement(View, { style: [style.container, container] },
-        React.createElement(SafeAreaProvider, null,
-            React.createElement(PortalProvider, null,
-                React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-                React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
-                React.createElement(AuroraPortalProvider, null, children)))));
-};
+const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
+    React.createElement(PortalProvider, null,
+        React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
+        React.createElement(AuroraPortalProvider, null, children))));
 export { App };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -2,17 +2,16 @@ import React from "react";
 import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
-    const { modal } = useEnvironmentStyle();
     const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
     const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
     const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
     return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
-        React.createElement(View, { style: [style.modal, modal?.content] },
+        React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { style: style.button, onPress: onDismiss },

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -12,7 +12,7 @@ declare const style: {
         marginVertical: number;
         width: "100%";
     };
-    modal: {
+    modalContent: {
         paddingHorizontal: number;
     };
     title: {

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -15,7 +15,7 @@ const style = StyleSheet.create({
         marginVertical: space8,
         width: "100%",
     },
-    modal: {
+    modalContent: {
         paddingHorizontal: space6,
     },
     title: {

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.d.ts

@@ -1,4 +1,10 @@
 import { FC } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+interface SelectModalStyle {
+    readonly modalContent: StyleProp<ViewStyle>;
+    readonly option: StyleProp<ViewStyle>;
+    readonly optionText: StyleProp<TextStyle>;
+}
 interface Option {
     readonly label: string;
     readonly value: string;
@@ -7,10 +13,11 @@ interface SelectModalProps {
     readonly title?: string;
     readonly value: string | undefined;
     readonly options: Option[];
-    readonly modalVisible: boolean;
-    readonly testID?: string;
+    readonly style?: Partial<SelectModalStyle>;
     readonly onChange?: (value: string) => void;
     readonly onClose?: () => void;
+    readonly modalVisible: boolean;
+    readonly testID?: string;
 }
 declare const SelectModal: FC<SelectModalProps>;
 export type { Option };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,19 +1,18 @@
 import React, { useCallback } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal, theme } from "@lookiero/sty-psp-ui";
 import { style } from "./SelectModal.style";
 const { colorBgPrimaryLight } = theme();
-const SelectModal = ({ modalVisible, options, testID, title, value, onChange = () => void 0, onClose = () => void 0, }) => {
-    const { modal } = useEnvironmentStyle();
+const SelectModal = ({ modalVisible, onChange = () => void 0, onClose = () => void 0, options, style: customStyle, testID, title, value, }) => {
     const handleOnPressOption = useCallback((value) => {
         onChange(value);
         onClose();
     }, [onClose, onChange]);
     return (React.createElement(Modal, { testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
-        React.createElement(View, { style: [style.modal, modal?.content] },
+        React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
-            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: style.option, testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: style.optionText }, label)))))));
+            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.d.ts

@@ -1,5 +1,5 @@
 declare const style: {
-    modal: {
+    modalContent: {
         paddingBottom: number;
         paddingHorizontal: number;
     };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.js

@@ -2,7 +2,7 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
 const style = StyleSheet.create({
-    modal: {
+    modalContent: {
         paddingBottom: space6,
         paddingHorizontal: space6,
     },

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -2,16 +2,15 @@ import React from "react";
 import { View } from "react-native";
 import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
 const SizeWithoutStockModal = ({ visible, onDismiss }) => {
-    const { modal } = useEnvironmentStyle();
     const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
     const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
     return (React.createElement(Modal, { visible: visible, showCloseButton: true, onClose: onDismiss },
-        React.createElement(View, { style: [style.modalContent, modal?.content] },
+        React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { onPress: onDismiss }, buttonText))));

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

@@ -1,6 +1,7 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { useCallback, useMemo } from "react";
-import { ScrollView } from "react-native";
+import { Platform } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { generatePath, useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -100,7 +101,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
                 header: style.header,
             } },
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
-            React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
+            React.createElement(KeyboardAwareScrollView, { extraScrollHeight: Platform.OS === "android" ? 10 : 120, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, testID: "return-questions-form" },
                 React.createElement(View, { style: style.background },
                     React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
                         React.createElement(Box, { size: { L: "2/3" } },

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -26,8 +26,8 @@ const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = tru
                     totalCheckoutItemsKeptText),
                 React.createElement(Price, { price: pendingToPay, variant: "detail" })),
             React.createElement(View, { style: style.collapsedContent },
-                React.createElement(Button, { testID: "confirm-checkout-collpased-button", small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
+                React.createElement(Button, { testID: "submit-checkout-collpased-button", small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
             React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept }),
-            React.createElement(Button, { testID: "confirm-checkout-button", onPress: onSubmit }, submitButtonText)))));
+            React.createElement(Button, { testID: "submit-checkout-button", onPress: onSubmit }, submitButtonText)))));
 };
 export { CollapsiblePricing };

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -16,7 +16,7 @@ const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned,
     const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
     const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
     const handleOnPressItem = useCallback((checkoutItemId) => onPressItem(checkoutItemId), [onPressItem]);
-    const data = useMemo(() => [0, 0], []);
+    const data = useMemo(() => [{ id: "0" }, { id: "1" }], []);
     const renderItem = useCallback(({ index }) => index === 0 ? (checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
             ? checkoutItem.replacedFor
             : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [checkoutItemsKept, checkoutItemsReturned, country, handleOnPressItem, keepEmptyText, returnEmptyText]);

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "8.14.0-beta.3";
+export declare const VERSION = "8.15.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "8.14.0-beta.3";
+export const VERSION = "8.15.0";

package/jest.setup.js

@@ -11,26 +11,6 @@ jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);
  * Without these, jest will break or pollute the log warnings.
  */
 jest.mock("expo-linear-gradient", () => ({ LinearGradient: require("react-native").View }));
-jest.mock("expo-image-picker", () => ({
-  PermissionStatus: {
-    GRANTED: "granted",
-    UNDETERMINED: "undetermined",
-    DENIED: "denied",
-  },
-  MediaTypeOptions: {
-    Images: "Images",
-  },
-  requestMediaLibraryPermissionsAsync: jest.fn(),
-  requestCameraPermissionsAsync: jest.fn(),
-  launchImageLibraryAsync: jest.fn(),
-  launchCameraAsync: jest.fn(),
-}));
-jest.mock("expo-image-manipulator", () => ({
-  manipulateAsync: jest.fn(),
-  SaveFormat: {
-    JPEG: "jpeg",
-  },
-}));
 
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: ({ children }) => children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "8.14.0-beta.3",
+  "version": "8.15.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -10,7 +10,9 @@
     "serve": "sty-psp serve",
     "format": "prettier --write .",
     "lint": "eslint --fix .",
-    "test": "jest"
+    "test": "jest",
+    "cypress": "METRO_PORT=8084 WEB_PORT=19004 start-server-and-test dev 19004 'cypress run'",
+    "cypress:open": "METRO_PORT=8084 WEB_PORT=19004 start-server-and-test dev 19004 'cypress open'"
   },
   "dependencies": {
     "@lookiero/messaging": "^8.1.1",
@@ -26,16 +28,18 @@
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.1",
     "@lookiero/sty-psp-tracking": "^0.1",
-    "@lookiero/sty-psp-ui": "^0.5",
+    "@lookiero/sty-psp-ui": "^0.6",
     "@lookiero/sty-psp-ui-settings": "^0.1",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.1",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-spring/native": "9.6.1",
-    "react-native-svg": "^13.4.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-svg": ">=13.6.0",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
+    "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
     "@lookiero/payments-front": "5.0.1",
@@ -43,13 +47,10 @@
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
     "@lookiero/sty-psp-typescript": "*",
-    "@lookiero/testing-library-e2e-native": "1.0.41",
-    "@pact-foundation/pact": "^10.1.4",
-    "@pact-foundation/pact-node": "^10.17.6",
     "@remix-run/router": ">=1.10",
     "@testing-library/react-native": ">=12",
     "@types/jest-when": ">=3",
-    "@wdio/globals": "^8.23.0",
+    "cypress": "^13.14.2",
     "apollo-boost": "0.4.4",
     "buffer": "5.6.0",
     "jest-mock-extended": ">=3",
@@ -72,7 +73,7 @@
     "react": ">=18",
     "react-native": ">=0.71",
     "react-native-get-random-values": ">=1.9",
-    "react-native-reanimated": ">=3.3",
+    "react-native-reanimated": ">=3.7",
     "react-native-safe-area-context": ">=4.5",
     "react-router-dom": ">=6.14",
     "react-router-native": ">=6.14",

package/src/ExpoRoot.tsx

@@ -33,7 +33,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "caa609aa-437c-487a-b2f5-f8037fdfb029",
+  customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
   country: Country.ES,
   segment: Segment.WOMEN,
 };
@@ -48,7 +48,7 @@ const sentryConfig: SentryEnvironment = {
 const apiUrl =
   Platform.OS !== "web" ? "https://web2.sp.dev.aws.lookiero.es/quiz/api" : __DEV__ ? "/local-to-dev" : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUzNzc0NzMsImV4cCI6MTcyNzUyMDA0NywiZGlzcGxheU5hbWUiOiJBbGV4YW5kZXIiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNC0wOC0yNiIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJjYWE2MDlhYS00MzdjLTQ4N2EtYjJmNS1mODAzN2ZkZmIwMjkiLCJpYXQiOjE3MjQ4NDE2NDd9.qDSpZGFDac-5iXVacM5j79ejkSra3ePpECl750kRJfc";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDg3OTAsImV4cCI6MTczNDAwNTE4MywiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMDgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNzRjYjRmNzYtM2YxNC00OTgzLTgxYTYtMmVlMmE5YTI3NWQ0IiwiaWF0IjoxNzMxNDEzMTgzfQ.KU6RhR19P6FhbH-lad-Hyx2PP1pv25GaDiE2txK9LMI";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =

package/src/infrastructure/domain/uiSetting/react/useUpdateUiSetting.test.ts

@@ -36,7 +36,7 @@ describe("useUpdateUiSetting integration hook", () => {
       const [, status] = result.current;
       expect(status).toBe(CommandStatus.SUCCESS);
     });
-  });
+  }, 10000);
 
   it("calls logger.captureException when 'update' fails", async () => {
     const error = new Error("Some error");

package/src/infrastructure/projection/payment/react/useViewPaymentFlowPayloadByCheckoutId.ts

@@ -27,7 +27,7 @@ const useViewPaymentFlowPayloadByCheckoutId: UseViewPaymentFlowPayloadByCheckout
     query: viewPaymentFlowPayloadByCheckoutId({ checkoutId: checkoutId as string }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
-    options: { refetchOnMount: "always", enabled: Boolean(checkoutId), cacheTime: 0 },
+    options: { refetchOnMount: "always", enabled: Boolean(checkoutId), cacheTime: 0, refetchOnWindowFocus: false },
   });
 
 export { useViewPaymentFlowPayloadByCheckoutId };

package/src/infrastructure/ui/Root.tsx

@@ -6,7 +6,7 @@ import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
-import { EnvironmentStyle, EnvironmentStyleProvider, Layout } from "@lookiero/sty-psp-ui";
+import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../projection/customer/customer";
 import { Order } from "../../projection/order/order";
 import { Subscription } from "../../projection/subscription/subscription";
@@ -33,7 +33,6 @@ interface RootProps {
   readonly order: Order | undefined;
   readonly subscription: Subscription | undefined;
   readonly layout: Layout;
-  readonly style?: EnvironmentStyle;
   readonly onNotAccessible: () => void;
   readonly onCheckoutSubmitted?: () => void;
   readonly useRedirect: () => Record<string, string>;
@@ -52,7 +51,6 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
     order,
     subscription,
     layout,
-    style,
     onNotAccessible,
     onCheckoutSubmitted,
     useRedirect,
@@ -62,24 +60,22 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
 
     return (
       <Messaging includeReactQueryDevTools={Platform.OS === "web"}>
-        <EnvironmentStyleProvider style={style}>
-          <Routing
-            I18n={I18n}
-            basePath={basePath}
-            customer={customer}
-            getAuthToken={getAuthToken}
-            kameleoon={kameleoon}
-            layout={layout}
-            locale={locale}
-            order={order}
-            subscription={subscription}
-            useRedirect={useRedirect}
-            useRoutes={useRoutes}
-            onCheckoutSubmitted={onCheckoutSubmitted}
-            onI18nError={development ? undefined : handleOnI18nError}
-            onNotAccessible={onNotAccessible}
-          />
-        </EnvironmentStyleProvider>
+        <Routing
+          I18n={I18n}
+          basePath={basePath}
+          customer={customer}
+          getAuthToken={getAuthToken}
+          kameleoon={kameleoon}
+          layout={layout}
+          locale={locale}
+          order={order}
+          subscription={subscription}
+          useRedirect={useRedirect}
+          useRoutes={useRoutes}
+          onCheckoutSubmitted={onCheckoutSubmitted}
+          onI18nError={development ? undefined : handleOnI18nError}
+          onNotAccessible={onNotAccessible}
+        />
       </Messaging>
     );
   };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.ts

@@ -14,7 +14,7 @@ const style = StyleSheet.create({
   header: {
     justifyContent: "space-between",
   },
-  modal: {
+  modalContent: {
     paddingBottom: space6,
     paddingHorizontal: space6,
   },

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import {
   useReturnQuestionFeedback,
@@ -21,7 +21,6 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
   portalHostName,
   testID,
 }: ReturnQuestionItemProps) => {
-  const { modal } = useEnvironmentStyle();
   const { formatMessage } = useIntl();
   const placeholderText = useMemo(
     () => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""),
@@ -91,7 +90,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
         showCloseButton
         onClose={handleOnModalClose}
       >
-        <View style={[style.modal, modal?.content]}>{children}</View>
+        <View style={style.modalContent}>{children}</View>
       </Modal>
     </>
   );

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
@@ -21,13 +21,12 @@ const ModalOptionReturnQuestionItems = ({
   visible,
   onClose,
 }: ModalOptionReturnQuestionItemsProps) => {
-  const { modal } = useEnvironmentStyle();
   const { formatMessage } = useIntl();
   const title = formatMessage({ id: returnQuestion.name });
 
   return (
     <Modal portalHostName={portalHostName} visible={visible} scroll showCloseButton onClose={onClose}>
-      <View style={[style.modalContent, modal?.content]}>
+      <View style={style.modalContent}>
         <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
           {title}
         </Text>

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

@@ -5,7 +5,6 @@ import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
-import { EnvironmentStyleProvider } from "@lookiero/sty-psp-ui";
 import { BasePathProvider } from "../routing/useBasePath";
 
 interface RenderArgs {
@@ -28,9 +27,7 @@ const renderWrapper: RenderWrapperFunction =
       <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <BasePathProvider basePath="">
-            <EnvironmentStyleProvider>
-              <Wrapper>{children}</Wrapper>
-            </EnvironmentStyleProvider>
+            <Wrapper>{children}</Wrapper>
           </BasePathProvider>
         </LoggerProvider>
       </IntlProvider>

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

@@ -1,12 +1,11 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
-import { StatusBar, View } from "react-native";
+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, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { style } from "./App.style";
 
 const { colorBgBase } = theme();
 
@@ -14,26 +13,20 @@ interface AppProps {
   readonly children: JSX.Element;
 }
 
-const App: FC<AppProps> = ({ children }) => {
-  const { container } = useEnvironmentStyle();
+const App: FC<AppProps> = ({ children }) => (
+  <SafeAreaProvider>
+    <PortalProvider>
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} />
+      {/*
+        We are using the Aurora's PortalProvider at this level for notifications to work properly.
 
-  return (
-    <View style={[style.container, container]}>
-      <SafeAreaProvider>
-        <PortalProvider>
-          <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-          <Notifications contextId={MESSAGING_CONTEXT_ID} />
-          {/*
-          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>
-    </View>
-  );
-};
+        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>
+);
 
 export { App };

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.ts

@@ -17,7 +17,7 @@ const style = StyleSheet.create({
     marginVertical: space8,
     width: "100%",
   },
-  modal: {
+  modalContent: {
     paddingHorizontal: space6,
   },
   title: {

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

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 
@@ -12,7 +12,6 @@ interface GetOutOfCheckoutModalProps {
   readonly onConfirm: () => void;
 }
 const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDismiss, onConfirm }) => {
-  const { modal } = useEnvironmentStyle();
   const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
   const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
   const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
@@ -20,7 +19,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
 
   return (
     <Modal visible={visible} onClose={onDismiss}>
-      <View style={[style.modal, modal?.content]}>
+      <View style={style.modalContent}>
         <Text align={ALIGN.CENTER} level={1} style={style.title}>
           {titleText}
         </Text>

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

@@ -76,6 +76,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
           "zIndex": 1,
         }
       }
+      testID="modal-close-button"
     />
     <View
       pointerEvents="box-none"
@@ -132,6 +133,12 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         }
       >
         <View
+          contentInset={
+            {
+              "bottom": 0,
+              "top": 0,
+            }
+          }
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >
@@ -144,12 +151,9 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
           >
             <View
               style={
-                [
-                  {
-                    "paddingHorizontal": 24,
-                  },
-                  undefined,
-                ]
+                {
+                  "paddingHorizontal": 24,
+                }
               }
             >
               <Text

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

@@ -21,7 +21,6 @@ interface ItemActionsProps {
   readonly onReplace: (value: string) => void;
   readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
 }
-
 const ItemActions: FC<ItemActionsProps> = ({
   productVariants,
   currentProductVariant,