@lookiero/checkout 11.2.0 → 11.3.1

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.style.ts

@@ -2,11 +2,42 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { space2 } = theme();
+  const {
+    borderWidth1,
+    borderWidth2,
+    borderRadius3,
+    colorBorderInteractive,
+    colorBorderInputFocus,
+    colorText,
+    space025,
+    space1,
+    space3,
+    space4,
+  } = theme();
 
   return StyleSheet.create({
+    text: {
+      color: colorText,
+      flex: 1,
+      marginLeft: space4,
+    },
     wrapper: {
-      marginBottom: space2,
+      alignItems: "center",
+      flex: 1,
+      flexDirection: "row",
+      marginVertical: space3,
+    },
+    wrapperLookiero: {
+      borderColor: colorBorderInteractive,
+      borderRadius: borderRadius3,
+      borderWidth: borderWidth1,
+      marginVertical: space1,
+      padding: space4,
+    },
+    wrapperLookieroChecked: {
+      borderColor: colorBorderInputFocus,
+      borderWidth: borderWidth2,
+      padding: space4 - space025,
     },
   });
 };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,8 +1,12 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
+import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable } from "react-native";
+import { Text as AuroraText, TextProperties } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
+import { Checkbox } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
@@ -16,12 +20,19 @@ import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 
+const TEXT: Record<Tradename, FC<TextProperties>> = {
+  [Tradename.LOOKIERO]: (props) => <AuroraText level={1} detail {...props} />,
+  [Tradename.OUTFITTERY]: (props) => <AuroraText level={3} {...props} />,
+};
+
 const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({
   returnQuestion,
   returnQuestionParent,
   testID,
   portalHostName,
 }) => {
+  const { tradename } = useStaticInfo();
+
   const style = useMemo(() => radioReturnQuestionItemStyle(), []);
 
   const { formatMessage } = useI18n({ domain: DOMAIN });
@@ -74,19 +85,29 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
    * This logic is for closing the Modal when its children has been answered.
    */
 
+  const checked = returnQuestion.id === feedbackId;
+
+  const Text = useMemo(() => TEXT[tradename], [tradename]);
+
   return (
     <>
-      <View style={style.wrapper} testID={testID}>
-        <Option
-          checked={returnQuestion.id === feedbackId}
-          flex={SIZE.XS}
-          name={returnQuestion.id}
-          title={inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
-          value={returnQuestion.id}
-          variant={OPTION_VARIANT.BUTTON}
-          onChange={handleOnPress}
-        />
-      </View>
+      <Pressable
+        accessibilityLabel="radio-return-question-item"
+        accessibilityState={{ checked }}
+        testID={testID}
+        style={[
+          style.wrapper,
+          tradename === Tradename.LOOKIERO && style.wrapperLookiero,
+          tradename === Tradename.LOOKIERO && checked && style.wrapperLookieroChecked,
+        ]}
+        accessible
+        onPress={handleOnPress}
+      >
+        <Checkbox checked={checked} />
+
+        <Text style={style.text}>{inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}</Text>
+      </Pressable>
+
       {hasChildren ? (
         <ModalOptionReturnQuestionItems
           portalHostName={portalHostName}

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

@@ -1,6 +1,6 @@
 /* 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";

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

@@ -1,6 +1,7 @@
 import React, { FC, useMemo } from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+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";
@@ -17,7 +18,7 @@ const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
 
   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.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useMemo } from "react";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+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";
@@ -20,7 +21,7 @@ const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
       <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.tsx

@@ -1,8 +1,9 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
@@ -65,7 +66,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       {!isFirstItem ? (
         <ButtonIcon
           name="arrow_left"
-          style={style.button}
+          style={{ button: style.button }}
           testID="arrow-left-button-icon"
           onPress={navigateToPreviousItem}
         />
@@ -78,7 +79,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       {!isLastItem ? (
         <ButtonIcon
           name="arrow_right"
-          style={style.button}
+          style={{ button: style.button }}
           testID="arrow-right-button-icon"
           onPress={navigateToNextItem}
         />