@lookiero/checkout 8.13.5-beta.0 → 8.14.0-beta.0

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.tsx

@@ -1,14 +1,25 @@
 import React, { FC, memo } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
 
+interface ReturnQuestionStyle {
+  readonly modal: StyleProp<ViewStyle>;
+}
+
 interface ReturnQuestionProps {
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly returnQuestion: ReturnQuestionProjection;
   readonly portalHostName?: string;
+  readonly style?: Partial<ReturnQuestionStyle>;
 }
 
-const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQuestion, portalHostName }) => {
+const ReturnQuestion: FC<ReturnQuestionProps> = ({
+  returnQuestionParent,
+  returnQuestion,
+  portalHostName,
+  style: customStyle,
+}) => {
   const Item = useReturnQuestionItem({ type: returnQuestion.type });
 
   return (
@@ -16,6 +27,7 @@ const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQ
       portalHostName={portalHostName}
       returnQuestion={returnQuestion}
       returnQuestionParent={returnQuestionParent}
+      style={customStyle}
       testID={returnQuestion.id}
     >
       <>
@@ -25,6 +37,7 @@ const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQ
             portalHostName={portalHostName}
             returnQuestion={childReturnQuestion}
             returnQuestionParent={returnQuestion}
+            style={customStyle}
           />
         ))}
       </>

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.tsx

@@ -1,13 +1,19 @@
 import React, { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
 import ReturnQuestion from "./ReturnQuestion";
 
+interface ReturnQuestionsStyle {
+  readonly modal: StyleProp<ViewStyle>;
+}
+
 interface ReturnQuestionsProps {
   readonly returnQuestions: ReturnQuestionProjection[];
   readonly portalHostName?: string;
+  readonly style?: Partial<ReturnQuestionsStyle>;
 }
 
-const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName }) => (
+const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName, style: customStyle }) => (
   <>
     {returnQuestions.map((returnQuestion: ReturnQuestionProjection) => (
       <ReturnQuestion
@@ -15,6 +21,7 @@ const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHost
         portalHostName={portalHostName}
         returnQuestion={returnQuestion}
         returnQuestionParent={{} as ReturnQuestionProjection}
+        style={customStyle}
       />
     ))}
   </>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.ts

@@ -1,12 +1,18 @@
 import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
 
+interface ReturnQuestionItemStyle {
+  readonly modal: StyleProp<ViewStyle>;
+}
+
 interface ReturnQuestionItemProps {
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly returnQuestion: ReturnQuestionProjection;
   readonly children?: ReactNode;
   readonly portalHostName?: string;
   readonly testID?: string;
+  readonly style?: Partial<ReturnQuestionItemStyle>;
 }
 
 type ReturnQuestionItem = FC<ReturnQuestionItemProps>;

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

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

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

@@ -20,6 +20,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
   children,
   portalHostName,
   testID,
+  style: customStyle,
 }: ReturnQuestionItemProps) => {
   const { formatMessage } = useIntl();
   const placeholderText = useMemo(
@@ -90,7 +91,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
         showCloseButton
         onClose={handleOnModalClose}
       >
-        <View style={style.modalContent}>{children}</View>
+        <View style={[style.modal, customStyle?.modal]}>{children}</View>
       </Modal>
     </>
   );

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

@@ -5,6 +5,7 @@ import { ReturnQuestionItem, ReturnQuestionItemProps } from "../../ReturnQuestio
 const HostStackReturnQuestionItem: ReturnQuestionItem = ({
   returnQuestion,
   portalHostName,
+  style: customStyle,
 }: ReturnQuestionItemProps) => (
   <>
     {returnQuestion.children?.map((childReturnQuestion) => (
@@ -13,6 +14,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
         portalHostName={portalHostName}
         returnQuestion={childReturnQuestion}
         returnQuestionParent={returnQuestion}
+        style={customStyle}
       />
     ))}
   </>

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

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

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
@@ -12,6 +12,7 @@ interface ModalOptionReturnQuestionItemsProps {
   readonly returnQuestion: ReturnQuestionProjection;
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly visible: boolean;
+  readonly style?: StyleProp<ViewStyle>;
   readonly onClose: () => void;
 }
 
@@ -19,6 +20,7 @@ const ModalOptionReturnQuestionItems = ({
   portalHostName,
   returnQuestion,
   visible,
+  style: customStyle,
   onClose,
 }: ModalOptionReturnQuestionItemsProps) => {
   const { formatMessage } = useIntl();
@@ -26,7 +28,7 @@ const ModalOptionReturnQuestionItems = ({
 
   return (
     <Modal portalHostName={portalHostName} visible={visible} scroll showCloseButton onClose={onClose}>
-      <View style={style.modalContent}>
+      <View style={[style.modalContent, customStyle]}>
         <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
           {title}
         </Text>
@@ -37,6 +39,7 @@ 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, SIZE } from "@lookiero/aurora";
+import { View, Option, OPTION_VARIANT } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import {
   useReturnQuestionFeedback,
@@ -18,6 +18,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
   returnQuestionParent,
   testID,
   portalHostName,
+  style: customStyle,
 }: ReturnQuestionItemProps) => {
   const intl = useIntl();
   const [modalVisible, setModalVisible] = useState(false);
@@ -74,7 +75,6 @@ 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,6 +87,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
           portalHostName={portalHostName}
           returnQuestion={returnQuestion}
           returnQuestionParent={returnQuestion}
+          style={customStyle?.modal}
           visible={modalVisible}
           onClose={handleOnModalClose}
         />

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

@@ -1,4 +1,5 @@
 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";
@@ -10,7 +11,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 } from "../views/App";
+import { App, AppStyle } from "../views/App";
 import { Checkout } from "../views/checkout/Checkout";
 import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
 import { Feedback } from "../views/feedback/Feedback";
@@ -22,6 +23,10 @@ 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;
@@ -31,6 +36,7 @@ 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;
@@ -48,6 +54,7 @@ const Routing: FC<RoutingProps> = ({
   I18n,
   kameleoon,
   layout,
+  style: customStyle,
   getAuthToken,
   onI18nError,
   onNotAccessible,
@@ -64,7 +71,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>
+                  <App style={{ container: customStyle?.container, notifications: customStyle?.notifications }}>
                     <Outlet />
                   </App>
                 </CheckoutMiddleware>
@@ -78,7 +85,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.ITEM,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Item layout={layout} />
+              <Item layout={layout} style={{ modal: customStyle?.modal }} />
             </Suspense>
           ),
         },
@@ -86,7 +93,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.ITEM_DETAIL,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Item layout={layout} />
+              <Item layout={layout} style={{ modal: customStyle?.modal }} />
             </Suspense>
           ),
         },
@@ -147,7 +154,7 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.RETURN,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Return layout={layout} />
+              <Return layout={layout} style={{ modal: customStyle?.modal }} />
             </Suspense>
           ),
         },
@@ -168,3 +175,4 @@ const Routing: FC<RoutingProps> = ({
  */
 const MemoizedRouting = memo(Routing);
 export { MemoizedRouting as Routing };
+export type { RoutingStyle };

package/src/infrastructure/ui/views/App.style.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export { style };

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

@@ -1,32 +1,42 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
-import { StatusBar } from "react-native";
+import { StatusBar, StyleProp, View, ViewStyle } 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 { Notifications, NotificationsStyle } from "@lookiero/sty-psp-notifications";
 import { theme } 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 }) => (
-  <SafeAreaProvider>
-    <PortalProvider>
-      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} />
-      {/*
+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.
 
         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>
+        <AuroraPortalProvider>{children}</AuroraPortalProvider>
+      </PortalProvider>
+    </SafeAreaProvider>
+  </View>
 );
 
+export type { AppStyle };
 export { App };

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

@@ -1,4 +1,5 @@
 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";
@@ -54,11 +55,16 @@ 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 }) => {
+const Item: FC<ItemProps> = ({ layout: Layout, style: customStyle }) => {
   const logger = useLogger();
   const screenSize = useScreenSize();
   const navigate = useNavigate();
@@ -218,7 +224,6 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
       <Layout
-        footer={null}
         header={header}
         scrollEnabled={!itemWithoutCustomerDecission}
         style={{
@@ -233,6 +238,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
             currentProductVariant={currentProductVariant}
+            style={customStyle}
             onReturn={goToReturnPage}
           />
         ) : (

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

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

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

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { View } from "react-native";
+import { StyleProp, View, ViewStyle } 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";
@@ -8,10 +8,16 @@ 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, onDismiss, onConfirm }) => {
+const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({
+  visible,
+  style: customStyle,
+  onDismiss,
+  onConfirm,
+}) => {
   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 });
@@ -19,7 +25,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
 
   return (
     <Modal visible={visible} onClose={onDismiss}>
-      <View style={style.modalContent}>
+      <View style={[style.modal, customStyle]}>
         <Text align={ALIGN.CENTER} level={1} style={style.title}>
           {titleText}
         </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, View } from "react-native";
+import { LayoutRectangle, StyleProp, View, ViewStyle } from "react-native";
 import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
@@ -11,10 +11,15 @@ 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;
@@ -25,6 +30,7 @@ const ItemActions: FC<ItemActionsProps> = ({
   productVariants,
   currentProductVariant,
   country,
+  style: customStyle,
   onShowSizeWithoutStockModal = () => void 0,
   onKeep,
   onReplace,
@@ -96,6 +102,7 @@ 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 { View } from "react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import {
@@ -25,12 +25,21 @@ 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, onEditFeedback }) => {
+const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({
+  returnQuestions,
+  style: customStyle,
+  onEditFeedback,
+}) => {
   const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
 
   return (
@@ -41,7 +50,7 @@ const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({ returnQuest
       </View>
 
       <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
-        <ReturnQuestions returnQuestions={returnQuestions} />
+        <ReturnQuestions returnQuestions={returnQuestions} style={customStyle} />
       </ReturnQuestionItemProvider>
     </View>
   );

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

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

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

@@ -7,7 +7,7 @@ import { style } from "./SelectModal.style";
 const { colorBgPrimaryLight } = theme();
 
 interface SelectModalStyle {
-  readonly modalContent: StyleProp<ViewStyle>;
+  readonly modal: StyleProp<ViewStyle>;
   readonly option: StyleProp<ViewStyle>;
   readonly optionText: StyleProp<TextStyle>;
 }
@@ -22,21 +22,21 @@ interface SelectModalProps {
   readonly value: string | undefined;
   readonly options: Option[];
   readonly style?: Partial<SelectModalStyle>;
-  readonly onChange?: (value: string) => void;
-  readonly onClose?: () => void;
   readonly modalVisible: boolean;
   readonly testID?: string;
+  readonly onChange?: (value: string) => void;
+  readonly onClose?: () => void;
 }
 
 const SelectModal: FC<SelectModalProps> = ({
   modalVisible,
-  onChange = () => void 0,
-  onClose = () => void 0,
   options,
   style: customStyle,
   testID,
   title,
   value,
+  onChange = () => void 0,
+  onClose = () => void 0,
 }) => {
   const handleOnPressOption = useCallback(
     (value: string) => {
@@ -48,7 +48,7 @@ const SelectModal: FC<SelectModalProps> = ({
 
   return (
     <Modal testID={testID} visible={modalVisible} scroll showCloseButton onClose={onClose}>
-      <View style={[style.modalContent, customStyle?.modalContent]}>
+      <View style={[style.modal, customStyle?.modal]}>
         {title && (
           <Text level={3} style={style.modalTitle} heading>
             {title}

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

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

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

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