@lookiero/checkout 8.14.0-beta.2 → 8.14.0

package/src/infrastructure/ui/components/organisms/returnQuestions/util/returnQuestionFeedback.ts

@@ -1,5 +1,9 @@
 import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import {
+  returnQuestionHasChildren,
+  returnQuestionWithTranslationKey,
+} from "../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 
 type Uuid = string;
 
@@ -32,14 +36,16 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return [
           ...acc,
-          translate(feebackReturnQuestionChild?.name),
+          ...(returnQuestionWithTranslationKey(feebackReturnQuestionChild)
+            ? [translate(feebackReturnQuestionChild.translationKey)]
+            : []),
           ...feedbackForReturnQuestion({ feedback, returnQuestion: feebackReturnQuestionChild, translate, acc }),
         ];
       }
@@ -51,13 +57,15 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
   }
 
   return (
-    returnQuestion.children?.reduce(
-      (acc, childReturnQuestion) => [
-        ...acc,
-        ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
-      ],
-      [] as string[],
-    ) || []
+    (returnQuestionHasChildren(returnQuestion) &&
+      returnQuestion.children?.reduce(
+        (acc, childReturnQuestion) => [
+          ...acc,
+          ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
+        ],
+        [] as string[],
+      )) ||
+    []
   );
 };
 
@@ -84,9 +92,9 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -102,9 +110,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     return [returnQuestion, false];
   }
 
-  const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) =>
-    Object.keys(feedback).find((id) => id === childReturnQuestion.id),
-  );
+  const feebackReturnQuestionChild =
+    returnQuestionHasChildren(returnQuestion) &&
+    returnQuestion.children?.find((childReturnQuestion) =>
+      Object.keys(feedback).find((id) => id === childReturnQuestion.id),
+    );
 
   if (feebackReturnQuestionChild) {
     return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -114,7 +124,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     });
   }
 
-  return [deepestReturnQuestion, !returnQuestion.children || returnQuestion.children.length === 0];
+  const hasChildren = Boolean(
+    returnQuestionHasChildren(returnQuestion) && returnQuestion.children && returnQuestion.children.length > 0,
+  );
+
+  return [deepestReturnQuestion, !hasChildren];
 };
 
 export { feedbackForReturnQuestion, deepestReturnQuestionWithFeedbackForReturnQuestion };

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/views/App.tsx

@@ -1,42 +1,32 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
-import { StatusBar, StyleProp, View, ViewStyle } 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, NotificationsStyle } from "@lookiero/sty-psp-notifications";
+import { Notifications } 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, 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} />
-        {/*
+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.
 
         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>
+      <AuroraPortalProvider>{children}</AuroraPortalProvider>
+    </PortalProvider>
+  </SafeAreaProvider>
 );
 
-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.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

@@ -1,5 +1,5 @@
 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";
@@ -8,16 +8,10 @@ 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 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 +19,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({
 
   return (
     <Modal visible={visible} onClose={onDismiss}>
-      <View style={[style.modal, customStyle]}>
+      <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}
         >

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,15 +11,10 @@ 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;
@@ -30,7 +25,6 @@ const ItemActions: FC<ItemActionsProps> = ({
   productVariants,
   currentProductVariant,
   country,
-  style: customStyle,
   onShowSizeWithoutStockModal = () => void 0,
   onKeep,
   onReplace,
@@ -102,7 +96,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,11 +1,9 @@
 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 {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import {
   ReturnQuestionItemProvider,
@@ -25,21 +23,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 +39,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.style.ts

@@ -4,7 +4,7 @@ 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/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -7,7 +7,7 @@ import { style } from "./SelectModal.style";
 const { colorBgPrimaryLight } = theme();
 
 interface SelectModalStyle {
-  readonly modal: StyleProp<ViewStyle>;
+  readonly modalContent: 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 modalVisible: boolean;
-  readonly testID?: string;
   readonly onChange?: (value: string) => void;
   readonly onClose?: () => void;
+  readonly modalVisible: boolean;
+  readonly testID?: string;
 }
 
 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.modal, customStyle?.modal]}>
+      <View style={[style.modalContent, customStyle?.modalContent]}>
         {title && (
           <Text level={3} style={style.modalTitle} heading>
             {title}

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

@@ -76,6 +76,7 @@ exports[`SelectField component matches the snapshot 1`] = `
           "zIndex": 1,
         }
       }
+      testID="modal-close-button"
     />
     <View
       pointerEvents="box-none"
@@ -206,6 +207,12 @@ exports[`SelectField component matches the snapshot 1`] = `
           </View>
         </View>
         <RCTScrollView
+          contentInset={
+            {
+              "bottom": 0,
+              "top": 0,
+            }
+          }
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >

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

@@ -1,5 +1,5 @@
 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";
@@ -8,17 +8,16 @@ 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 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}>
         <Text level={3} style={style.title} heading>
           {titleText}
         </Text>

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

@@ -76,6 +76,7 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
           "zIndex": 1,
         }
       }
+      testID="modal-close-button"
     />
     <View
       pointerEvents="box-none"
@@ -206,6 +207,12 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
           </View>
         </View>
         <View
+          contentInset={
+            {
+              "bottom": 0,
+              "top": 0,
+            }
+          }
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >

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>

package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useState } from "react";
-import { LayoutRectangle, Platform, ScrollView, StyleProp, ViewStyle } from "react-native";
+import { LayoutRectangle, Platform, ScrollView } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -23,12 +23,6 @@ import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/Si
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ItemWithoutCustomerDecission.style";
 
-const { space6 } = theme();
-
-interface ItemWithoutCustomerDecissionStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface CheckoutItemWithoutCustomerDecission extends CheckoutItemProjection {
   readonly status: CheckoutItemStatus.INITIAL;
 }
@@ -38,16 +32,16 @@ interface ItemWithoutCustomerDecissionProps {
   readonly checkoutItem: CheckoutItemWithoutCustomerDecission;
   readonly bookedProductsVariants: BookedProductsVariantsProjection;
   readonly currentProductVariant: ProductVariantProjection;
-  readonly style?: Partial<ItemWithoutCustomerDecissionStyle>;
   readonly onReturn: () => void;
 }
 
+const { space6 } = theme();
+
 const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
   checkoutId,
   checkoutItem,
   bookedProductsVariants,
   currentProductVariant,
-  style: customStyle,
   onReturn,
 }) => {
   const logger = useLogger();
@@ -108,11 +102,7 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
 
   return (
     <>
-      <SizeWithoutStockModal
-        style={customStyle?.modal}
-        visible={sizeWithoutStockModalVisible}
-        onDismiss={handleOnHideSizeWithoutStockModal}
-      />
+      <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
 
       <ScrollView showsVerticalScrollIndicator={false}>
         <Body style={{ row: style.container }}>