@lookiero/checkout 11.1.0 → 11.3.0

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
@@ -8,7 +8,7 @@ import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./ReturnQuestionFeedbackItem.style";
+import { style as returnQuestionFeedbackItemStyle } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
@@ -25,6 +25,8 @@ const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEF
     " / ",
   );
 
+  const style = useMemo(() => returnQuestionFeedbackItemStyle(), []);
+
   return (
     <View style={style.container}>
       <Text level={2} style={style.title} detailBold>

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

@@ -1,36 +1,38 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, fontInputPaddingLeft, space2, space4, space6 } = theme();
-
 const INPUT_HEIGHT = 96;
 
-const style = StyleSheet.create({
-  input: {
-    paddingTop: space4,
-    ...Platform.select({
-      android: {
-        paddingTop: space2,
-      },
-    }),
-  },
-  inputContainer: {
-    height: INPUT_HEIGHT,
-    ...Platform.select({
-      android: {
-        alignItems: "flex-start",
-        paddingLeft: fontInputPaddingLeft,
-      },
-    }),
-  },
-  inputField: {
-    height: INPUT_HEIGHT,
-  },
-  wrapper: {
-    backgroundColor: colorBgBase,
-    padding: space6,
-    paddingTop: 0,
-  },
-});
+const style = () => {
+  const { colorBgBase, fontInputPaddingLeft, space2, space4, space6 } = theme();
+
+  return StyleSheet.create({
+    input: {
+      paddingTop: space4,
+      ...Platform.select({
+        android: {
+          paddingTop: space2,
+        },
+      }),
+    },
+    inputContainer: {
+      height: INPUT_HEIGHT,
+      ...Platform.select({
+        android: {
+          alignItems: "flex-start",
+          paddingLeft: fontInputPaddingLeft,
+        },
+      }),
+    },
+    inputField: {
+      height: INPUT_HEIGHT,
+    },
+    wrapper: {
+      backgroundColor: colorBgBase,
+      padding: space6,
+      paddingTop: 0,
+    },
+  });
+};
 
 export { style };

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

@@ -1,13 +1,13 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
-import { View } from "@lookiero/aurora";
+import { View } from "react-native";
 import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
-import { style } from "./TextareaReturnQuestionItem.style";
+import { style as textareaReturnQuestionItemStyle } from "./TextareaReturnQuestionItem.style";
 
 const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA> = ({
   returnQuestion,
@@ -28,6 +28,8 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
     [onChange, returnQuestionParent.id],
   );
 
+  const style = useMemo(() => textareaReturnQuestionItemStyle(), []);
+
   return (
     <View style={style.wrapper} testID="textarea-return-question-item">
       <InputField

package/src/infrastructure/ui/components/templates/header/Header.style.ts

@@ -1,23 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space2 } = theme();
-
 const HEADER_HEIGHT = 48;
 
-const style = StyleSheet.create({
-  header: {
-    alignItems: "center",
-    backgroundColor: colorBgBase,
-    flexDirection: "row",
-    flexGrow: 0,
-    flexWrap: "nowrap",
-    height: HEADER_HEIGHT,
-    justifyContent: "space-between",
-    overflow: "visible",
-    paddingHorizontal: space2,
-    width: "100%",
-  },
-});
+const style = () => {
+  const { colorBgBase, space2 } = theme();
+
+  return StyleSheet.create({
+    header: {
+      alignItems: "center",
+      backgroundColor: colorBgBase,
+      flexDirection: "row",
+      flexGrow: 0,
+      flexWrap: "nowrap",
+      height: HEADER_HEIGHT,
+      justifyContent: "space-between",
+      overflow: "visible",
+      paddingHorizontal: space2,
+      width: "100%",
+    },
+  });
+};
 
 export { style, HEADER_HEIGHT };

package/src/infrastructure/ui/components/templates/header/Header.tsx

@@ -1,13 +1,17 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View, ViewProps } from "react-native";
-import { style } from "./Header.style";
+import { style as headerStyle } from "./Header.style";
 
 type HeaderProps = ViewProps;
 
-const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => (
-  <View {...props} style={[style.header, customStyle]}>
-    {children}
-  </View>
-);
+const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => {
+  const style = useMemo(() => headerStyle(), []);
+
+  return (
+    <View {...props} style={[style.header, customStyle]}>
+      {children}
+    </View>
+  );
+};
 
 export { Header };

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  buttonIconPlaceholder: {
-    flexGrow: 0,
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    buttonIconPlaceholder: {
+      flexGrow: 0,
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.tsx

@@ -1,7 +1,11 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { style } from "./ButtonIconPlaceholder.style";
+import { style as buttonIconPlaceholderStyle } from "./ButtonIconPlaceholder.style";
 
-const ButtonIconPlaceholder: FC = () => <View style={style.buttonIconPlaceholder} />;
+const ButtonIconPlaceholder: FC = () => {
+  const style = useMemo(() => buttonIconPlaceholderStyle(), []);
+
+  return <View style={style.buttonIconPlaceholder} />;
+};
 
 export { ButtonIconPlaceholder };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import React, { FC, useMemo } from "react";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./CheckoutHeader.style";
+import { style as checkoutHeader } from "./CheckoutHeader.style";
 
 interface CheckoutHeaderProps {
   readonly onBack?: () => void;
@@ -13,9 +14,11 @@ interface CheckoutHeaderProps {
 const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
 
+  const style = useMemo(() => checkoutHeader(), []);
+
   return (
     <Header testID="checkout-header">
-      <ButtonIcon name="arrow_left" style={style.button} testID="arrow-left-button-icon" onPress={onBack} />
+      <ButtonIcon name="arrow_left" style={{ button: style.button }} testID="arrow-left-button-icon" onPress={onBack} />
       <Text level={3} action>
         {title}
       </Text>

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -50,7 +50,6 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
     testID="checkout-header"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -71,9 +70,7 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -81,93 +78,47 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="arrow-left-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+              "height": 24,
+              "letterSpacing": -0.2,
+              "lineHeight": 24,
+              "minHeight": 24,
+              "minWidth": 24,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "width": 24,
             },
           ]
         }
+        testID="icon"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
     <Text
       allowFontScaling={false}

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -1,10 +1,11 @@
-import React, { FC } from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import React, { FC, useMemo } from "react";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./ItemDetailHeader.style";
+import { style as itemDetailHeaderStyle } from "./ItemDetailHeader.style";
 
 interface ItemDetailHeaderProps {
   readonly onBack: () => void;
@@ -12,13 +13,15 @@ interface ItemDetailHeaderProps {
 const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
 
+  const style = useMemo(() => itemDetailHeaderStyle(), []);
+
   return (
     <Header testID="item-detail-header">
       <ButtonIconPlaceholder />
       <Text level={3} action>
         {title}
       </Text>
-      <ButtonIcon name="close" style={style.button} testID="close-button-icon" onPress={onBack} />
+      <ButtonIcon name="close" style={{ button: style.button }} testID="close-button-icon" onPress={onBack} />
     </Header>
   );
 };

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/__snapshots__/ItemDetailHeader.test.tsx.snap

@@ -80,7 +80,6 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
       header.checkout_title
     </Text>
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -101,9 +100,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -111,93 +108,47 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="close-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+              "height": 24,
+              "letterSpacing": -0.2,
+              "lineHeight": 24,
+              "minHeight": 24,
+              "minWidth": 24,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "width": 24,
             },
           ]
         }
+        testID="icon"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
   </View>
 </View>

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.ts

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space10 } = theme();
+const style = () => {
+  const { space10 } = theme();
 
-const style = StyleSheet.create({
-  button: {
-    alignSelf: "auto",
-    height: space10,
-    width: space10,
-  },
-});
+  return StyleSheet.create({
+    button: {
+      alignSelf: "auto",
+      height: space10,
+      width: space10,
+    },
+  });
+};
 
-export default style;
+export { style };