@lookiero/checkout 8.14.0-beta.2 → 8.14.0-beta.3

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.tsx

@@ -12,7 +12,6 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
   returnQuestion,
   children,
   portalHostName,
-  style: customStyle,
 }: ReturnQuestionItemProps) => {
   const { formatMessage } = useIntl();
   const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
@@ -60,7 +59,6 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
                 portalHostName={portalHostName}
                 returnQuestion={childReturnQuestion}
                 returnQuestionParent={feedbackReturnQuestion}
-                style={customStyle}
               />
             ))}
           </>

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
@@ -12,7 +12,6 @@ interface ModalOptionReturnQuestionItemsProps {
   readonly returnQuestion: ReturnQuestionProjection;
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly visible: boolean;
-  readonly style?: StyleProp<ViewStyle>;
   readonly onClose: () => void;
 }
 
@@ -20,15 +19,15 @@ const ModalOptionReturnQuestionItems = ({
   portalHostName,
   returnQuestion,
   visible,
-  style: customStyle,
   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, customStyle]}>
+      <View style={[style.modalContent, modal?.content]}>
         <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
           {title}
         </Text>
@@ -39,7 +38,6 @@ const ModalOptionReturnQuestionItems = ({
               portalHostName=""
               returnQuestion={childReturnQuestion}
               returnQuestionParent={returnQuestion}
-              style={{ modal: customStyle }}
             />
           ))}
         </>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { View, Option, OPTION_VARIANT } from "@lookiero/aurora";
+import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import {
   useReturnQuestionFeedback,
@@ -18,7 +18,6 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
   returnQuestionParent,
   testID,
   portalHostName,
-  style: customStyle,
 }: ReturnQuestionItemProps) => {
   const intl = useIntl();
   const [modalVisible, setModalVisible] = useState(false);
@@ -75,6 +74,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
       <View style={style.wrapper} testID={testID}>
         <Option
           checked={returnQuestion.id === feedbackId}
+          flex={SIZE.XS}
           name={returnQuestion.id}
           title={inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
           value={returnQuestion.id}
@@ -87,7 +87,6 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
           portalHostName={portalHostName}
           returnQuestion={returnQuestion}
           returnQuestionParent={returnQuestion}
-          style={customStyle?.modal}
           visible={modalVisible}
           onClose={handleOnModalClose}
         />

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

@@ -1,5 +1,4 @@
 import React, { FC, memo, Suspense } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Spinner } from "@lookiero/aurora";
 import { I18n } from "@lookiero/i18n-react";
@@ -11,7 +10,7 @@ import { Order } from "../../../projection/order/order";
 import { Subscription } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
-import { App, AppStyle } from "../views/App";
+import { App } from "../views/App";
 import { Checkout } from "../views/checkout/Checkout";
 import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
 import { Feedback } from "../views/feedback/Feedback";
@@ -23,10 +22,6 @@ import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
 
-interface RoutingStyle extends AppStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface RoutingProps {
   readonly basePath?: string;
   readonly customer: Customer;
@@ -36,7 +31,6 @@ interface RoutingProps {
   readonly I18n: I18n;
   readonly kameleoon: KameleoonEnvironment;
   readonly layout: Layout;
-  readonly style?: Partial<RoutingStyle>;
   readonly getAuthToken: () => Promise<string>;
   readonly onNotAccessible: () => void;
   readonly onCheckoutSubmitted?: () => void;
@@ -54,7 +48,6 @@ const Routing: FC<RoutingProps> = ({
   I18n,
   kameleoon,
   layout,
-  style: customStyle,
   getAuthToken,
   onI18nError,
   onNotAccessible,
@@ -71,7 +64,7 @@ const Routing: FC<RoutingProps> = ({
             <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
               <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
                 <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
-                  <App style={{ container: customStyle?.container, notifications: customStyle?.notifications }}>
+                  <App>
                     <Outlet />
                   </App>
                 </CheckoutMiddleware>
@@ -85,7 +78,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.ITEM,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Item layout={layout} style={{ modal: customStyle?.modal }} />
+              <Item layout={layout} />
             </Suspense>
           ),
         },
@@ -93,7 +86,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.ITEM_DETAIL,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Item layout={layout} style={{ modal: customStyle?.modal }} />
+              <Item layout={layout} />
             </Suspense>
           ),
         },
@@ -154,7 +147,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.RETURN,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Return layout={layout} style={{ modal: customStyle?.modal }} />
+              <Return layout={layout} />
             </Suspense>
           ),
         },
@@ -175,4 +168,3 @@ const Routing: FC<RoutingProps> = ({
  */
 const MemoizedRouting = memo(Routing);
 export { MemoizedRouting as Routing };
-export type { RoutingStyle };

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

@@ -5,6 +5,7 @@ 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 {
@@ -27,7 +28,9 @@ const renderWrapper: RenderWrapperFunction =
       <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <BasePathProvider basePath="">
-            <Wrapper>{children}</Wrapper>
+            <EnvironmentStyleProvider>
+              <Wrapper>{children}</Wrapper>
+            </EnvironmentStyleProvider>
           </BasePathProvider>
         </LoggerProvider>
       </IntlProvider>

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

@@ -1,42 +1,39 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
-import { StatusBar, StyleProp, View, ViewStyle } from "react-native";
+import { StatusBar, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
-import { Notifications, NotificationsStyle } from "@lookiero/sty-psp-notifications";
-import { theme } from "@lookiero/sty-psp-ui";
+import { Notifications } from "@lookiero/sty-psp-notifications";
+import { theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { style } from "./App.style";
 
 const { colorBgBase } = theme();
 
-interface AppStyle {
-  readonly container: StyleProp<ViewStyle>;
-  readonly notifications: Partial<NotificationsStyle>;
-}
-
 interface AppProps {
   readonly children: JSX.Element;
-  readonly style?: Partial<AppStyle>;
 }
 
-const App: FC<AppProps> = ({ children, style: customStyle }) => (
-  <View style={[style.container, customStyle?.container]}>
-    <SafeAreaProvider>
-      <PortalProvider>
-        <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-        <Notifications contextId={MESSAGING_CONTEXT_ID} style={customStyle?.notifications} />
-        {/*
-        We are using the Aurora's PortalProvider at this level for notifications to work properly.
+const App: FC<AppProps> = ({ children }) => {
+  const { container } = useEnvironmentStyle();
 
-        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>
-);
+  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>
+  );
+};
 
-export type { AppStyle };
 export { App };

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

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useEffect, useMemo, useRef } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { Box, Spinner } from "@lookiero/aurora";
 import { QueryStatus } from "@lookiero/messaging-react";
@@ -55,16 +54,11 @@ interface HandleOnPreviousFunction {
   (args: HandleOnPreviousFunctionArgs): void;
 }
 
-interface ItemStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ItemProps {
   readonly layout: Layout;
-  readonly style?: Partial<ItemStyle>;
 }
 
-const Item: FC<ItemProps> = ({ layout: Layout, style: customStyle }) => {
+const Item: FC<ItemProps> = ({ layout: Layout }) => {
   const logger = useLogger();
   const screenSize = useScreenSize();
   const navigate = useNavigate();
@@ -224,6 +218,7 @@ const Item: FC<ItemProps> = ({ layout: Layout, style: customStyle }) => {
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
       <Layout
+        footer={null}
         header={header}
         scrollEnabled={!itemWithoutCustomerDecission}
         style={{
@@ -238,7 +233,6 @@ const Item: FC<ItemProps> = ({ layout: Layout, style: customStyle }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
             currentProductVariant={currentProductVariant}
-            style={customStyle}
             onReturn={goToReturnPage}
           />
         ) : (

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

@@ -1,23 +1,18 @@
 import React, { FC } from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 
 interface GetOutOfCheckoutModalProps {
   readonly visible: boolean;
-  readonly style?: StyleProp<ViewStyle>;
   readonly onDismiss: () => void;
   readonly onConfirm: () => void;
 }
-const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({
-  visible,
-  style: customStyle,
-  onDismiss,
-  onConfirm,
-}) => {
+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 });
@@ -25,7 +20,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({
 
   return (
     <Modal visible={visible} onClose={onDismiss}>
-      <View style={[style.modal, customStyle]}>
+      <View style={[style.modal, modal?.content]}>
         <Text align={ALIGN.CENTER} level={1} style={style.title}>
           {titleText}
         </Text>

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

@@ -144,9 +144,12 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
           >
             <View
               style={
-                {
-                  "paddingHorizontal": 24,
-                }
+                [
+                  {
+                    "paddingHorizontal": 24,
+                  },
+                  undefined,
+                ]
               }
             >
               <Text

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

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
-import { LayoutRectangle, StyleProp, View, ViewStyle } from "react-native";
+import { LayoutRectangle, View } from "react-native";
 import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
@@ -11,26 +11,21 @@ import { I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
 import { style } from "./ItemActions.style";
 
-interface ItemActionsStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ItemActionsProps {
   readonly productVariants?: ProductVariantProjection[];
   readonly currentProductVariant: ProductVariantProjection;
   readonly country: Country;
-  readonly style?: Partial<ItemActionsStyle>;
   readonly onShowSizeWithoutStockModal?: () => void;
   readonly onKeep: () => void;
   readonly onReturn: () => void;
   readonly onReplace: (value: string) => void;
   readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
 }
+
 const ItemActions: FC<ItemActionsProps> = ({
   productVariants,
   currentProductVariant,
   country,
-  style: customStyle,
   onShowSizeWithoutStockModal = () => void 0,
   onKeep,
   onReplace,
@@ -102,7 +97,6 @@ const ItemActions: FC<ItemActionsProps> = ({
       <SelectModal
         modalVisible={modalVisible}
         options={sizeSelectorOptions}
-        style={{ modal: customStyle?.modal }}
         testID="select-field-modal"
         title={changeSizeButtonText}
         value={currentProductVariant.id}

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import {
@@ -25,21 +25,12 @@ const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
 };
 
-interface ReturnQuestionsFeedbackStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ReturnQuestionsFeedbackProps {
   readonly returnQuestions: ReturnQuestionProjection[];
-  readonly style?: Partial<ReturnQuestionsFeedbackStyle>;
   readonly onEditFeedback: () => void;
 }
 
-const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({
-  returnQuestions,
-  style: customStyle,
-  onEditFeedback,
-}) => {
+const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({ returnQuestions, onEditFeedback }) => {
   const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
 
   return (
@@ -50,7 +41,7 @@ const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({
       </View>
 
       <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
-        <ReturnQuestions returnQuestions={returnQuestions} style={customStyle} />
+        <ReturnQuestions returnQuestions={returnQuestions} />
       </ReturnQuestionItemProvider>
     </View>
   );

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -1,17 +1,11 @@
 import React, { FC, useCallback } from "react";
-import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } from "react-native";
+import { TouchableHighlight, View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme } from "@lookiero/sty-psp-ui";
+import { Modal, theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { style } from "./SelectModal.style";
 
 const { colorBgPrimaryLight } = theme();
 
-interface SelectModalStyle {
-  readonly modal: StyleProp<ViewStyle>;
-  readonly option: StyleProp<ViewStyle>;
-  readonly optionText: StyleProp<TextStyle>;
-}
-
 interface Option {
   readonly label: string;
   readonly value: string;
@@ -21,7 +15,6 @@ interface SelectModalProps {
   readonly title?: string;
   readonly value: string | undefined;
   readonly options: Option[];
-  readonly style?: Partial<SelectModalStyle>;
   readonly modalVisible: boolean;
   readonly testID?: string;
   readonly onChange?: (value: string) => void;
@@ -31,13 +24,13 @@ interface SelectModalProps {
 const SelectModal: FC<SelectModalProps> = ({
   modalVisible,
   options,
-  style: customStyle,
   testID,
   title,
   value,
   onChange = () => void 0,
   onClose = () => void 0,
 }) => {
+  const { modal } = useEnvironmentStyle();
   const handleOnPressOption = useCallback(
     (value: string) => {
       onChange(value);
@@ -48,7 +41,7 @@ const SelectModal: FC<SelectModalProps> = ({
 
   return (
     <Modal testID={testID} visible={modalVisible} scroll showCloseButton onClose={onClose}>
-      <View style={[style.modal, customStyle?.modal]}>
+      <View style={[style.modal, modal?.content]}>
         {title && (
           <Text level={3} style={style.modalTitle} heading>
             {title}
@@ -59,17 +52,13 @@ const SelectModal: FC<SelectModalProps> = ({
             key={optionValue}
             accessibilityLabel={optionValue}
             disabled={value === optionValue}
-            style={[style.option, customStyle?.option]}
+            style={style.option}
             testID={optionValue}
             underlayColor={colorBgPrimaryLight}
             accessible
             onPress={value !== optionValue ? () => handleOnPressOption(optionValue) : undefined}
           >
-            <Text
-              color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT}
-              level={3}
-              style={[style.optionText as ViewStyle, customStyle?.optionText]}
-            >
+            <Text color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT} level={3} style={style.optionText}>
               {label}
             </Text>
           </TouchableHighlight>

package/src/infrastructure/ui/views/item/components/selectModal/__snapshots__/SelecModal.test.tsx.snap

@@ -253,14 +253,11 @@ exports[`SelectField component matches the snapshot 1`] = `
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "borderBottomColor": "#DAD8D8",
-                        "borderBottomWidth": 1,
-                        "paddingVertical": 20,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "borderBottomColor": "#DAD8D8",
+                      "borderBottomWidth": 1,
+                      "paddingVertical": 20,
+                    }
                   }
                   testID="optionValue"
                 >

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.tsx

@@ -1,24 +1,25 @@
 import React, { FC } from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
 
 interface SizeWithoutStockModalProps {
   readonly visible: boolean;
-  readonly style?: StyleProp<ViewStyle>;
   readonly onDismiss: () => void;
 }
-const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ visible, style: customStyle, onDismiss }) => {
+
+const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ 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 (
     <Modal visible={visible} showCloseButton onClose={onDismiss}>
-      <View style={[style.modalContent, customStyle]}>
+      <View style={[style.modalContent, modal?.content]}>
         <Text level={3} style={style.title} heading>
           {titleText}
         </Text>

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/__snapshots__/SizeWithoutStockModal.test.tsx.snap

@@ -218,9 +218,12 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
           >
             <View
               style={
-                {
-                  "paddingHorizontal": 24,
-                }
+                [
+                  {
+                    "paddingHorizontal": 24,
+                  },
+                  undefined,
+                ]
               }
             >
               <Text

package/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -21,10 +21,6 @@ import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedbac
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
 import { style } from "./ItemWithCustomerDecission.style";
 
-interface ItemWithCustomerDecissionStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface CheckoutItemWithCustomerDecission extends CheckoutItemProjection {
   readonly status: Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 }
@@ -34,7 +30,6 @@ interface ItemWithCustomerDecissionProps {
   readonly checkoutItem: CheckoutItemWithCustomerDecission;
   readonly returnQuestions: ReturnQuestionProjection[];
   readonly currentProductVariant: ProductVariantProjection;
-  readonly style?: Partial<ItemWithCustomerDecissionStyle>;
   readonly onEditFeedback: () => void;
 }
 
@@ -43,7 +38,6 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
   checkoutItem,
   returnQuestions,
   currentProductVariant,
-  style: customStyle,
   onEditFeedback,
 }) => {
   const screenSize = useScreenSize();
@@ -94,11 +88,7 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
       >
         {checkoutItem.status === CheckoutItemStatus.RETURNED && (
           <View style={[style.feedbackContainer, isMobile ? style.feedbackContainerMobile : undefined]}>
-            <ReturnQuestionsFeedback
-              returnQuestions={returnQuestions}
-              style={customStyle}
-              onEditFeedback={onEditFeedback}
-            />
+            <ReturnQuestionsFeedback returnQuestions={returnQuestions} onEditFeedback={onEditFeedback} />
           </View>
         )}
       </ProductVariant>