@lookiero/checkout 6.5.0 → 6.5.1

package/dist/src/infrastructure/ui/views/feedback/Feedback.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -17,6 +18,8 @@ import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ layout: Layout }) => {
     const logger = useLogger();
+    const screenSize = useScreenSize();
+    const isDesktop = screenSize === "L";
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
@@ -78,8 +81,8 @@ const Feedback = ({ layout: Layout }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {}, onChanged: handleOnChangedFeedback },
-        React.createElement(Layout, { style: { scrollView: style.container } },
-            React.createElement(Body, { style: { column: style.bodyColumn } },
+        React.createElement(Layout, null,
+            React.createElement(Body, { style: { row: [style.container, isDesktop && style.containerDesktop] } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };
 export { Feedback };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -1,10 +1,11 @@
 declare const style: {
-    bodyColumn: {
-        paddingBottom: number;
+    container: {
+        justifyContent: "flex-start";
         paddingHorizontal: number;
+        paddingVertical: number;
     };
-    container: {
-        paddingBottom: number;
+    containerDesktop: {
+        paddingHorizontal: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,13 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space8, space10 } = theme();
+const { space3, space6, space8 } = theme();
 const style = StyleSheet.create({
-    bodyColumn: {
-        paddingBottom: space8,
-        paddingHorizontal: space8,
-    },
     container: {
-        paddingBottom: space10,
+        justifyContent: "flex-start",
+        paddingHorizontal: space6,
+        paddingVertical: space8,
+    },
+    containerDesktop: {
+        paddingHorizontal: space3,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from "react";
-import { View } from "react-native";
 import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutQuestionType, } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
@@ -12,7 +11,6 @@ import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CheckoutQuestionsForm.style";
 const checkoutQuestionItems = {
     [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
     [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
@@ -33,7 +31,6 @@ const CheckoutQuestionsForm = ({ checkoutQuestions, submitButtonDisabled, onSubm
     return (React.createElement(React.Fragment, null,
         React.createElement(CheckoutQuestionItemProvider, { checkoutQuestionItems: checkoutQuestionItems },
             React.createElement(CheckoutQuestions, { checkoutQuestions: filteredCheckoutQuestions })),
-        React.createElement(View, { style: style.buttonContainer },
-            React.createElement(Button, { busy: submitButtonDisabled, testID: "checkout-feedback-button", onPress: handlePress }, buttonText))));
+        React.createElement(Button, { busy: submitButtonDisabled, testID: "checkout-feedback-button", onPress: handlePress }, buttonText)));
 };
 export { CheckoutQuestionsForm };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.5.0";
+export declare const VERSION = "6.5.1";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "6.5.0";
+export const VERSION = "6.5.1";

package/package.json

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

package/src/infrastructure/ui/views/feedback/Feedback.style.ts

@@ -1,15 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space8, space10 } = theme();
+const { space3, space6, space8 } = theme();
 
 const style = StyleSheet.create({
-  bodyColumn: {
-    paddingBottom: space8,
-    paddingHorizontal: space8,
-  },
   container: {
-    paddingBottom: space10,
+    justifyContent: "flex-start",
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+  containerDesktop: {
+    paddingHorizontal: space3,
   },
 });
 

package/src/infrastructure/ui/views/feedback/Feedback.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
-import { Layout } from "@lookiero/sty-psp-ui";
+import { Layout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -33,6 +33,8 @@ interface FeedbackProps {
 
 const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   const logger = useLogger();
+  const screenSize = useScreenSize();
+  const isDesktop = screenSize === "L";
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -114,8 +116,8 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
 
   return (
     <CheckoutQuestionFeedbackProvider feedback={{}} onChanged={handleOnChangedFeedback}>
-      <Layout style={{ scrollView: style.container }}>
-        <Body style={{ column: style.bodyColumn }}>
+      <Layout>
+        <Body style={{ row: [style.container, isDesktop && style.containerDesktop] }}>
           <CheckoutQuestionsForm
             checkoutQuestions={checkoutQuestions || []}
             submitButtonDisabled={giveCheckoutFeedbackStatus === CommandStatus.LOADING}

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useMemo } from "react";
-import { View } from "react-native";
 import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutFeedbackProjection } from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
@@ -19,7 +18,6 @@ import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CheckoutQuestionsForm.style";
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
   [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
@@ -61,11 +59,9 @@ const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps> = ({
         <CheckoutQuestions checkoutQuestions={filteredCheckoutQuestions} />
       </CheckoutQuestionItemProvider>
 
-      <View style={style.buttonContainer}>
-        <Button busy={submitButtonDisabled} testID="checkout-feedback-button" onPress={handlePress}>
-          {buttonText}
-        </Button>
-      </View>
+      <Button busy={submitButtonDisabled} testID="checkout-feedback-button" onPress={handlePress}>
+        {buttonText}
+      </Button>
     </>
   );
 };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts

@@ -1,7 +0,0 @@
-declare const style: {
-    buttonContainer: {
-        paddingHorizontal: number;
-        paddingVertical: number;
-    };
-};
-export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -1,10 +0,0 @@
-import { StyleSheet } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
-const { space6, space8 } = theme();
-const style = StyleSheet.create({
-    buttonContainer: {
-        paddingHorizontal: space6,
-        paddingVertical: space8,
-    },
-});
-export { style };

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.ts

@@ -1,13 +0,0 @@
-import { StyleSheet } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
-
-const { space6, space8 } = theme();
-
-const style = StyleSheet.create({
-  buttonContainer: {
-    paddingHorizontal: space6,
-    paddingVertical: space8,
-  },
-});
-
-export { style };