npm - @lookiero/checkout - Versions diffs - 8.13.5-beta.0 → 8.14.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

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

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useState } from "react";
-import { LayoutRectangle, Platform, ScrollView } from "react-native";
+import { LayoutRectangle, Platform, ScrollView, StyleProp, ViewStyle } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -23,6 +23,12 @@ 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;
 }
@@ -32,16 +38,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();
@@ -102,7 +108,11 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
   return (
     <>
-      <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
+      <SizeWithoutStockModal
+        style={customStyle?.modal}
+        visible={sizeWithoutStockModalVisible}
+        onDismiss={handleOnHideSizeWithoutStockModal}
+      />
       <ScrollView showsVerticalScrollIndicator={false}>
         <Body style={{ row: style.container }}>

package/src/infrastructure/ui/views/return/Return.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { useParams } from "react-router-native";
 import { Spinner } from "@lookiero/aurora";
 import { QueryStatus } from "@lookiero/messaging-react";
@@ -9,11 +10,16 @@ import { ReturnQuestionFeedbackProvider } from "../../components/organisms/retur
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
+interface ReturnStyle {
+  readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnProps {
   readonly layout: UiLayout;
+  readonly style?: Partial<ReturnStyle>;
 }
-const Return: FC<ReturnProps> = ({ layout }) => {
+const Return: FC<ReturnProps> = ({ layout, style: customStyle }) => {
   const { id } = useParams();
   const {
     customer: { customerId, country, segment },
@@ -37,6 +43,7 @@ const Return: FC<ReturnProps> = ({ layout }) => {
         country={country}
         layout={layout}
         segment={segment}
+        style={customStyle}
       />
     </ReturnQuestionFeedbackProvider>
   );

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.ts CHANGED Viewed

@@ -5,9 +5,6 @@ import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.st
 const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
-  background: {
-    backgroundColor: colorBgPrimaryLight,
-  },
   description: {
     color: colorTextMedium,
   },
@@ -36,6 +33,7 @@ const style = StyleSheet.create({
     justifyContent: "center",
   },
   safeAreaView: {
+    backgroundColor: colorBgPrimaryLight,
     flex: 1,
   },
   scrollView: {
@@ -43,11 +41,9 @@ const style = StyleSheet.create({
   },
   submit: {
     backgroundColor: colorBgBase,
-    padding: space6,
-  },
-  submitDesktop: {
     borderBottomLeftRadius: borderRadius5,
     borderBottomRightRadius: borderRadius5,
+    padding: space6,
   },
 });

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

@@ -1,7 +1,6 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { FC, useCallback, useMemo } from "react";
-import { Platform } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { ScrollView, StyleProp, ViewStyle } from "react-native";
 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";
@@ -49,12 +48,17 @@ const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
 };
+interface ReturnQuestionsFormStyle {
+  readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnQuestionsFormProps {
   readonly checkout: CheckoutProjection;
   readonly checkoutItem: CheckoutItemProjection;
   readonly country: Country;
   readonly layout: UiLayout;
   readonly segment: Segment;
+  readonly style?: Partial<ReturnQuestionsFormStyle>;
 }
 const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
@@ -63,6 +67,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
   country,
   layout: Layout,
   segment,
+  style: customStyle,
 }) => {
   const navigate = useNavigate();
   const basePath = useBasePath();
@@ -143,7 +148,6 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
       <PortalHost name={RETURN_QUESTION_FORM_PORTAL_HOST_NAME} />
       <Layout
-        footer={null}
         header={header}
         scrollEnabled={false}
         style={{
@@ -154,41 +158,32 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
       >
         <ProductVariantPreview country={country} item={checkoutItem} />
-        <KeyboardAwareScrollView
-          extraScrollHeight={Platform.OS === "android" ? 10 : 120}
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-          testID="return-questions-form"
-        >
-          <View style={style.background}>
-            <AuroraLayout
-              fullWidth={!screen.L}
-              style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}
-            >
-              <Box size={{ L: "2/3" }}>
-                <View style={[style.info, !screen.S && style.desktopInfo]}>
-                  <Text level={3} heading>
-                    {titleText}
-                  </Text>
-                  <Text level={1} style={style.description} detail>
-                    {descriptionText}
-                  </Text>
-                </View>
-                <ReturnQuestions
-                  portalHostName={RETURN_QUESTION_FORM_PORTAL_HOST_NAME}
-                  returnQuestions={returnQuestions}
-                />
-                <View style={[style.submit, !screen.S && style.submitDesktop]}>
-                  <Button testID="return-questions-button" onPress={handleOnSubmit}>
-                    {submitButtonText}
-                  </Button>
-                </View>
-              </Box>
-            </AuroraLayout>
-          </View>
-        </KeyboardAwareScrollView>
+        <ScrollView showsVerticalScrollIndicator={false} testID="return-questions-form">
+          <AuroraLayout fullWidth={!screen.L} style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}>
+            <Box size={{ L: "2/3" }}>
+              <View style={[style.info, !screen.S && style.desktopInfo]}>
+                <Text level={3} heading>
+                  {titleText}
+                </Text>
+                <Text level={1} style={style.description} detail>
+                  {descriptionText}
+                </Text>
+              </View>
+              <ReturnQuestions
+                portalHostName={RETURN_QUESTION_FORM_PORTAL_HOST_NAME}
+                returnQuestions={returnQuestions}
+                style={customStyle}
+              />
+              <View style={style.submit}>
+                <Button testID="return-questions-button" onPress={handleOnSubmit}>
+                  {submitButtonText}
+                </Button>
+              </View>
+            </Box>
+          </AuroraLayout>
+        </ScrollView>
       </Layout>
     </ReturnQuestionItemProvider>
   );