@lookiero/checkout 8.13.1-beta.0 → 8.13.2-beta.0

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -2,10 +2,11 @@ import { PortalHost } from "@gorhom/portal";
 import React, { useCallback, useMemo } from "react";
 import { ScrollView } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text, View } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
 import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -41,7 +42,8 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const navigate = useNavigate();
     const basePath = useBasePath();
     const logger = useLogger();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
+    const isDesktopScreen = screenSize !== "S";
     const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
     const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
@@ -95,15 +97,15 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
         React.createElement(Layout, { header: header, scrollEnabled: false, style: {
-                safeAreaView: style.safeAreaView,
-                scrollView: style.scrollView,
                 header: style.header,
+                scrollView: style.scrollView,
+                safeAreaView: isDesktopScreen ? style.safeAreaView : null,
             } },
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
             React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
-                React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                React.createElement(AuroraLayout, { fullWidth: !isDesktopScreen, style: [style.layout, isDesktopScreen ? style.desktopLayoutSpacing : undefined] },
                     React.createElement(Box, { size: { L: "2/3" } },
-                        React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
+                        React.createElement(View, { style: [style.info, isDesktopScreen && style.desktopInfo] },
                             React.createElement(Text, { level: 3, heading: true }, titleText),
                             React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
                         React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -31,7 +31,7 @@ declare const style: {
         flex: number;
     };
     scrollView: {
-        flex: number;
+        height: "100%";
     };
     submit: {
         backgroundColor: string;

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -35,7 +35,8 @@ const style = StyleSheet.create({
         flex: 1,
     },
     scrollView: {
-        flex: 1,
+        // flex: 1,
+        height: "100%",
     },
     submit: {
         backgroundColor: colorBgBase,

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "8.13.1-beta.0";
+export declare const VERSION = "8.13.2-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "8.13.1-beta.0";
+export const VERSION = "8.13.2-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "8.13.1-beta.0",
+  "version": "8.13.2-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

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

@@ -37,7 +37,8 @@ const style = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    flex: 1,
+    // flex: 1,
+    height: "100%",
   },
   submit: {
     backgroundColor: colorBgBase,

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

@@ -2,13 +2,13 @@ import { PortalHost } from "@gorhom/portal";
 import React, { FC, useCallback, useMemo } from "react";
 import { ScrollView } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text, View } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
@@ -67,7 +67,8 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
   const basePath = useBasePath();
   const logger = useLogger();
 
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
+  const isDesktopScreen = screenSize !== "S";
 
   const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
   const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
@@ -145,17 +146,20 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
         header={header}
         scrollEnabled={false}
         style={{
-          safeAreaView: style.safeAreaView,
-          scrollView: style.scrollView,
           header: style.header,
+          scrollView: style.scrollView,
+          safeAreaView: isDesktopScreen ? style.safeAreaView : null,
         }}
       >
         <ProductVariantPreview country={country} item={checkoutItem} />
 
         <ScrollView showsVerticalScrollIndicator={false} testID="return-questions-form">
-          <AuroraLayout fullWidth={!screen.L} style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}>
+          <AuroraLayout
+            fullWidth={!isDesktopScreen}
+            style={[style.layout, isDesktopScreen ? style.desktopLayoutSpacing : undefined]}
+          >
             <Box size={{ L: "2/3" }}>
-              <View style={[style.info, !screen.S && style.desktopInfo]}>
+              <View style={[style.info, isDesktopScreen && style.desktopInfo]}>
                 <Text level={3} heading>
                   {titleText}
                 </Text>