@lookiero/checkout 8.14.0-beta.3 → 8.15.0

package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap

@@ -77,7 +77,8 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
             style={{}}
           >
             <View
-              animatedStyle={
+              collapsable={false}
+              jestAnimatedStyle={
                 {
                   "value": {
                     "transform": [
@@ -88,7 +89,6 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                   },
                 }
               }
-              collapsable={false}
               style={
                 {
                   "flex": 1,
@@ -105,16 +105,17 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
               testID="carousel-track"
             >
               <View
+                collapsable={false}
+                jestAnimatedStyle={
+                  {
+                    "value": {},
+                  }
+                }
                 style={
-                  [
-                    {
-                      "flex": 1,
-                    },
-                    undefined,
-                    {
-                      "width": 300,
-                    },
-                  ]
+                  {
+                    "flex": 1,
+                    "width": 300,
+                  }
                 }
                 testID="carousel-item"
               >
@@ -231,14 +232,14 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                         </View>
                       </View>
                       <Image
-                        animatedStyle={
+                        collapsable={false}
+                        jestAnimatedStyle={
                           {
                             "value": {
                               "opacity": 0,
                             },
                           }
                         }
-                        collapsable={false}
                         onLoad={[Function]}
                         resizeMode="stretch"
                         source={
@@ -263,16 +264,17 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                 </View>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedStyle={
+                  {
+                    "value": {},
+                  }
+                }
                 style={
-                  [
-                    {
-                      "flex": 1,
-                    },
-                    undefined,
-                    {
-                      "width": 300,
-                    },
-                  ]
+                  {
+                    "flex": 1,
+                    "width": 300,
+                  }
                 }
                 testID="carousel-item"
               >
@@ -389,14 +391,14 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                         </View>
                       </View>
                       <Image
-                        animatedStyle={
+                        collapsable={false}
+                        jestAnimatedStyle={
                           {
                             "value": {
                               "opacity": 0,
                             },
                           }
                         }
-                        collapsable={false}
                         onLoad={[Function]}
                         resizeMode="stretch"
                         source={

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

@@ -1,11 +1,17 @@
 import React, { FC, useCallback } from "react";
-import { TouchableHighlight, View } from "react-native";
+import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } 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();
 
+interface SelectModalStyle {
+  readonly modalContent: StyleProp<ViewStyle>;
+  readonly option: StyleProp<ViewStyle>;
+  readonly optionText: StyleProp<TextStyle>;
+}
+
 interface Option {
   readonly label: string;
   readonly value: string;
@@ -15,22 +21,23 @@ 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;
 }
 
 const SelectModal: FC<SelectModalProps> = ({
   modalVisible,
+  onChange = () => void 0,
+  onClose = () => void 0,
   options,
+  style: customStyle,
   testID,
   title,
   value,
-  onChange = () => void 0,
-  onClose = () => void 0,
 }) => {
-  const { modal } = useEnvironmentStyle();
   const handleOnPressOption = useCallback(
     (value: string) => {
       onChange(value);
@@ -41,7 +48,7 @@ const SelectModal: FC<SelectModalProps> = ({
 
   return (
     <Modal testID={testID} visible={modalVisible} scroll showCloseButton onClose={onClose}>
-      <View style={[style.modal, modal?.content]}>
+      <View style={[style.modalContent, customStyle?.modalContent]}>
         {title && (
           <Text level={3} style={style.modalTitle} heading>
             {title}
@@ -52,13 +59,17 @@ const SelectModal: FC<SelectModalProps> = ({
             key={optionValue}
             accessibilityLabel={optionValue}
             disabled={value === optionValue}
-            style={style.option}
+            style={[style.option, customStyle?.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}>
+            <Text
+              color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT}
+              level={3}
+              style={[style.optionText as ViewStyle, customStyle?.optionText]}
+            >
               {label}
             </Text>
           </TouchableHighlight>

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

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

@@ -2,7 +2,7 @@ import React, { FC } 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";
 
@@ -10,16 +10,14 @@ interface SizeWithoutStockModalProps {
   readonly visible: boolean;
   readonly onDismiss: () => void;
 }
-
 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, modal?.content]}>
+      <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}
         >
@@ -218,12 +225,9 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
           >
             <View
               style={
-                [
-                  {
-                    "paddingHorizontal": 24,
-                  },
-                  undefined,
-                ]
+                {
+                  "paddingHorizontal": 24,
+                }
               }
             >
               <Text

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

@@ -23,8 +23,6 @@ import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/Si
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ItemWithoutCustomerDecission.style";
 
-const { space6 } = theme();
-
 interface CheckoutItemWithoutCustomerDecission extends CheckoutItemProjection {
   readonly status: CheckoutItemStatus.INITIAL;
 }
@@ -37,6 +35,8 @@ interface ItemWithoutCustomerDecissionProps {
   readonly onReturn: () => void;
 }
 
+const { space6 } = theme();
+
 const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
   checkoutId,
   checkoutItem,

package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -88,7 +88,8 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
               style={{}}
             >
               <View
-                animatedStyle={
+                collapsable={false}
+                jestAnimatedStyle={
                   {
                     "value": {
                       "transform": [
@@ -99,7 +100,6 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
                     },
                   }
                 }
-                collapsable={false}
                 style={
                   {
                     "flex": 1,
@@ -116,16 +116,17 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
                 testID="carousel-track"
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -242,14 +243,14 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={
@@ -274,16 +275,17 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
                   </View>
                 </View>
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -400,14 +402,14 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={
@@ -789,7 +791,8 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
               style={{}}
             >
               <View
-                animatedStyle={
+                collapsable={false}
+                jestAnimatedStyle={
                   {
                     "value": {
                       "transform": [
@@ -800,7 +803,6 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
                     },
                   }
                 }
-                collapsable={false}
                 style={
                   {
                     "flex": 1,
@@ -817,16 +819,17 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
                 testID="carousel-track"
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -943,14 +946,14 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={
@@ -975,16 +978,17 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
                   </View>
                 </View>
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -1101,14 +1105,14 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={
@@ -1490,7 +1494,8 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
               style={{}}
             >
               <View
-                animatedStyle={
+                collapsable={false}
+                jestAnimatedStyle={
                   {
                     "value": {
                       "transform": [
@@ -1501,7 +1506,6 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
                     },
                   }
                 }
-                collapsable={false}
                 style={
                   {
                     "flex": 1,
@@ -1518,16 +1522,17 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
                 testID="carousel-track"
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -1644,14 +1649,14 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={
@@ -1676,16 +1681,17 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
                   </View>
                 </View>
                 <View
+                  collapsable={false}
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
                   style={
-                    [
-                      {
-                        "flex": 1,
-                      },
-                      undefined,
-                      {
-                        "width": 300,
-                      },
-                    ]
+                    {
+                      "flex": 1,
+                      "width": 300,
+                    }
                   }
                   testID="carousel-item"
                 >
@@ -1802,14 +1808,14 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
                           </View>
                         </View>
                         <Image
-                          animatedStyle={
+                          collapsable={false}
+                          jestAnimatedStyle={
                             {
                               "value": {
                                 "opacity": 0,
                               },
                             }
                           }
-                          collapsable={false}
                           onLoad={[Function]}
                           resizeMode="stretch"
                           source={

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -1,6 +1,7 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { FC, 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";
@@ -153,7 +154,12 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
       >
         <ProductVariantPreview country={country} item={checkoutItem} />
 
-        <ScrollView showsVerticalScrollIndicator={false} testID="return-questions-form">
+        <KeyboardAwareScrollView
+          extraScrollHeight={Platform.OS === "android" ? 10 : 120}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+          testID="return-questions-form"
+        >
           <View style={style.background}>
             <AuroraLayout
               fullWidth={!screen.L}
@@ -182,7 +188,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
               </Box>
             </AuroraLayout>
           </View>
-        </ScrollView>
+        </KeyboardAwareScrollView>
       </Layout>
     </ReturnQuestionItemProvider>
   );