@lookiero/checkout 9.7.0-beta.1 → 9.7.0-beta.2

package/cypress/integration/checkout.spec.ts

@@ -93,9 +93,9 @@ const checkoutFeedback = () => {
         checkoutQuestion.showCondition.some((condition) => answers.includes(condition))
       ) {
         if (checkoutQuestion.type === CheckoutQuestionType.HOST_TEXTAREA) {
-          cy.getByTestId(`${randomCheckoutQuestionItem.id}-input`).type("Cypress E2E test");
+          cy.getByTestId(randomCheckoutQuestionItem.id).type("Cypress E2E test");
         } else {
-          cy.getByTestId(`${randomCheckoutQuestionItem.id}`).click();
+          cy.getByTestId(randomCheckoutQuestionItem.id).click();
         }
       }
     }

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -8,6 +8,9 @@ const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParent
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
-    return (React.createElement(InputField, { label: placeholderText, style: { inputField: style.inputContainer, input: { container: style.inputContainer, input: style.input } }, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })) }));
+    return (React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+            inputField: style.inputField,
+            input: { container: style.inputContainer, input: style.input },
+        } }));
 };
 export { TextareaCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts

@@ -1,10 +1,14 @@
 declare const style: {
     input: {
         paddingTop: number;
+        height?: "auto" | undefined;
     };
     inputContainer: {
-        maxHeight: number;
-        minHeight: number;
+        alignItems?: "flex-start" | undefined;
+        height: number;
+    };
+    inputField: {
+        height: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.js

@@ -1,15 +1,27 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space4 } = theme();
-const INPUT_MIN_HEIGHT = 96;
-const INPUT_MAX_HEIGHT = 242;
+const { space2, space4 } = theme();
+const INPUT_HEIGHT = 96;
 const style = StyleSheet.create({
     input: {
         paddingTop: space4,
+        ...Platform.select({
+            android: {
+                paddingTop: space2,
+                height: "auto",
+            },
+        }),
     },
     inputContainer: {
-        maxHeight: INPUT_MAX_HEIGHT,
-        minHeight: INPUT_MIN_HEIGHT,
+        height: INPUT_HEIGHT,
+        ...Platform.select({
+            android: {
+                alignItems: "flex-start",
+            },
+        }),
+    },
+    inputField: {
+        height: INPUT_HEIGHT,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -11,6 +11,9 @@ const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, test
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
     return (React.createElement(View, { style: style.wrapper, testID: "textarea-return-question-item" },
-        React.createElement(InputField, { label: placeholderText, style: { inputField: style.inputContainer, input: { container: style.inputContainer, input: style.input } }, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })) })));
+        React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+                inputField: style.inputField,
+                input: { container: style.inputContainer, input: style.input },
+            } })));
 };
 export { TextareaReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts

@@ -1,10 +1,14 @@
 declare const style: {
     input: {
         paddingTop: number;
+        height?: "auto" | undefined;
     };
     inputContainer: {
-        maxHeight: number;
-        minHeight: number;
+        alignItems?: "flex-start" | undefined;
+        height: number;
+    };
+    inputField: {
+        height: number;
     };
     wrapper: {
         backgroundColor: string;

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.js

@@ -1,15 +1,27 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgBase, space4, space6 } = theme();
-const INPUT_MIN_HEIGHT = 96;
-const INPUT_MAX_HEIGHT = 242;
+const { colorBgBase, space2, space4, space6 } = theme();
+const INPUT_HEIGHT = 96;
 const style = StyleSheet.create({
     input: {
         paddingTop: space4,
+        ...Platform.select({
+            android: {
+                paddingTop: space2,
+                height: "auto",
+            },
+        }),
     },
     inputContainer: {
-        maxHeight: INPUT_MAX_HEIGHT,
-        minHeight: INPUT_MIN_HEIGHT,
+        height: INPUT_HEIGHT,
+        ...Platform.select({
+            android: {
+                alignItems: "flex-start",
+            },
+        }),
+    },
+    inputField: {
+        height: INPUT_HEIGHT,
     },
     wrapper: {
         backgroundColor: colorBgBase,

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.7.0-beta.1";
+export declare const VERSION = "9.7.0-beta.2";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.7.0-beta.1";
+export const VERSION = "9.7.0-beta.2";

package/package.json

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

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.ts

@@ -1,18 +1,30 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space4 } = theme();
+const { space2, space4 } = theme();
 
-const INPUT_MIN_HEIGHT = 96;
-const INPUT_MAX_HEIGHT = 242;
+const INPUT_HEIGHT = 96;
 
 const style = StyleSheet.create({
   input: {
     paddingTop: space4,
+    ...Platform.select({
+      android: {
+        paddingTop: space2,
+        height: "auto",
+      },
+    }),
   },
   inputContainer: {
-    maxHeight: INPUT_MAX_HEIGHT,
-    minHeight: INPUT_MIN_HEIGHT,
+    height: INPUT_HEIGHT,
+    ...Platform.select({
+      android: {
+        alignItems: "flex-start",
+      },
+    }),
+  },
+  inputField: {
+    height: INPUT_HEIGHT,
   },
 });
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.test.tsx

@@ -40,7 +40,7 @@ describe("TextareaCheckoutQuestionItem component (CheckoutQuestions organism)",
     );
 
     const newValue = "New input value";
-    fireEvent.changeText(getByTestId("input-input"), newValue);
+    fireEvent.changeText(getByTestId("text-input"), newValue);
 
     expect(mockOnChange).toHaveBeenCalledWith({
       checkoutQuestionId: checkoutQuestionParentId,

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -26,7 +26,6 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
   return (
     <InputField
       label={placeholderText}
-      style={{ inputField: style.inputContainer, input: { container: style.inputContainer, input: style.input } }}
       value={feedback}
       input={({ onBlur, onFocus, style }) => (
         <TextInput
@@ -40,6 +39,10 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
           onFocus={onFocus}
         />
       )}
+      style={{
+        inputField: style.inputField,
+        input: { container: style.inputContainer, input: style.input },
+      }}
     />
   );
 };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.ts

@@ -1,18 +1,30 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space4, space6 } = theme();
+const { colorBgBase, space2, space4, space6 } = theme();
 
-const INPUT_MIN_HEIGHT = 96;
-const INPUT_MAX_HEIGHT = 242;
+const INPUT_HEIGHT = 96;
 
 const style = StyleSheet.create({
   input: {
     paddingTop: space4,
+    ...Platform.select({
+      android: {
+        paddingTop: space2,
+        height: "auto",
+      },
+    }),
   },
   inputContainer: {
-    maxHeight: INPUT_MAX_HEIGHT,
-    minHeight: INPUT_MIN_HEIGHT,
+    height: INPUT_HEIGHT,
+    ...Platform.select({
+      android: {
+        alignItems: "flex-start",
+      },
+    }),
+  },
+  inputField: {
+    height: INPUT_HEIGHT,
   },
   wrapper: {
     backgroundColor: colorBgBase,

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.test.tsx

@@ -29,7 +29,7 @@ describe("TextareaReturnQuestionItem component (ReturnQuestions organism)", () =
     );
 
     const newValue = "New input value";
-    fireEvent.changeText(getByTestId("input-input"), newValue);
+    fireEvent.changeText(getByTestId("text-input"), newValue);
 
     expect(mockOnChange).toHaveBeenCalledWith({
       returnQuestionId: returnQuestionParent.id,

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -31,7 +31,6 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
     <View style={style.wrapper} testID="textarea-return-question-item">
       <InputField
         label={placeholderText}
-        style={{ inputField: style.inputContainer, input: { container: style.inputContainer, input: style.input } }}
         value={feedback}
         input={({ onBlur, onFocus, style }) => (
           <TextInput
@@ -45,6 +44,10 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
             onFocus={onFocus}
           />
         )}
+        style={{
+          inputField: style.inputField,
+          input: { container: style.inputContainer, input: style.input },
+        }}
       />
     </View>
   );

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

@@ -85,14 +85,14 @@ describe("Feedback view", () => {
       feedback: "bab3d4f9-0227-4550-a53f-3c125d68429c",
     });
 
-    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c-input"), "Input value");
+    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c"), "Input value");
     expect(mockTrackChangeFeedback).toHaveBeenLastCalledWith({
       questionId: "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
       questionName: "checkout_question.comment.question",
       feedback: "Input value",
     });
 
-    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c-input"), "New input value");
+    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c"), "New input value");
     expect(mockTrackChangeFeedback).toHaveBeenCalledTimes(3);
 
     fireEvent.press(getByText(I18nMessages.FEEDBACK_BUTTON));