@lookiero/checkout 11.3.0 → 11.4.0

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,15 +1,22 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable } from "react-native";
-import { Text } from "@lookiero/aurora";
+import { Text as AuroraText } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { Checkbox } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
+const TEXT = {
+    [Tradename.LOOKIERO]: (props) => React.createElement(AuroraText, { level: 1, detail: true, ...props }),
+    [Tradename.OUTFITTERY]: (props) => React.createElement(AuroraText, { level: 3, ...props }),
+};
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
+    const { tradename } = useStaticInfo();
     const style = useMemo(() => radioReturnQuestionItemStyle(), []);
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const [modalVisible, setModalVisible] = useState(false);
@@ -47,10 +54,15 @@ const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID,
      * 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 (React.createElement(React.Fragment, null,
-        React.createElement(Pressable, { accessibilityLabel: "radio-return-question-item", accessibilityState: { checked }, style: style.wrapper, testID: testID, accessible: true, onPress: handleOnPress },
+        React.createElement(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: true, onPress: handleOnPress },
             React.createElement(Checkbox, { checked: checked }),
-            React.createElement(Text, { level: 3, style: style.text }, inputValue ? `${optionText} / ${inputValue}` : `${optionText}`)),
+            React.createElement(Text, { style: style.text }, inputValue ? `${optionText} / ${inputValue}` : `${optionText}`)),
         hasChildren ? (React.createElement(ModalOptionReturnQuestionItems, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParent: returnQuestion, visible: modalVisible, onClose: handleOnModalClose })) : null));
 };
 export { RadioReturnQuestionItem };

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

@@ -10,5 +10,17 @@ declare const style: () => {
         flexDirection: "row";
         marginVertical: number;
     };
+    wrapperLookiero: {
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        marginVertical: number;
+        padding: number;
+    };
+    wrapperLookieroChecked: {
+        borderColor: string;
+        borderWidth: number;
+        padding: number;
+    };
 };
 export { style };

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

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { colorText, space3, space4 } = theme();
+    const { borderWidth1, borderWidth2, borderRadius3, colorBorderInteractive, colorBorderInputFocus, colorText, space025, space1, space3, space4, } = theme();
     return StyleSheet.create({
         text: {
             color: colorText,
@@ -14,6 +14,18 @@ const style = () => {
             flexDirection: "row",
             marginVertical: space3,
         },
+        wrapperLookiero: {
+            borderColor: colorBorderInteractive,
+            borderRadius: borderRadius3,
+            borderWidth: borderWidth1,
+            marginVertical: space1,
+            padding: space4,
+        },
+        wrapperLookieroChecked: {
+            borderColor: colorBorderInputFocus,
+            borderWidth: borderWidth2,
+            padding: space4 - space025,
+        },
     });
 };
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "11.3.0";
+export declare const VERSION = "11.4.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "11.3.0";
+export const VERSION = "11.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -27,13 +27,13 @@
     "@lookiero/sty-psp-i18n": "^0.4",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^1.0",
+    "@lookiero/sty-psp-notifications": "^1.1",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",
-    "@lookiero/sty-psp-ui": "^1.0",
+    "@lookiero/sty-psp-ui": "^1.1",
     "@lookiero/sty-psp-ui-settings": "^0.2",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",

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

@@ -2,7 +2,18 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { colorText, space3, space4 } = theme();
+  const {
+    borderWidth1,
+    borderWidth2,
+    borderRadius3,
+    colorBorderInteractive,
+    colorBorderInputFocus,
+    colorText,
+    space025,
+    space1,
+    space3,
+    space4,
+  } = theme();
 
   return StyleSheet.create({
     text: {
@@ -16,6 +27,18 @@ const style = () => {
       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,10 +1,12 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable } from "react-native";
-import { Text } from "@lookiero/aurora";
+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,
@@ -18,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 });
@@ -78,21 +87,25 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
 
   const checked = returnQuestion.id === feedbackId;
 
+  const Text = useMemo(() => TEXT[tradename], [tradename]);
+
   return (
     <>
       <Pressable
         accessibilityLabel="radio-return-question-item"
         accessibilityState={{ checked }}
-        style={style.wrapper}
         testID={testID}
+        style={[
+          style.wrapper,
+          tradename === Tradename.LOOKIERO && style.wrapperLookiero,
+          tradename === Tradename.LOOKIERO && checked && style.wrapperLookieroChecked,
+        ]}
         accessible
         onPress={handleOnPress}
       >
         <Checkbox checked={checked} />
 
-        <Text level={3} style={style.text}>
-          {inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
-        </Text>
+        <Text style={style.text}>{inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}</Text>
       </Pressable>
 
       {hasChildren ? (

package/src/infrastructure/ui/views/return/Return.test.tsx

@@ -3,6 +3,7 @@ import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -25,7 +26,7 @@ const mockCheckout = checkout({
 const mockFirstCheckoutItemId = mockCheckout.items[0]?.id;
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({ customer: { customerId, country, segment }, tradename: Tradename.LOOKIERO }),
 }));
 
 jest.mock("react-router-native", () => ({

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

@@ -5,6 +5,7 @@ import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
@@ -55,6 +56,7 @@ jest.mock("../../../../../tracking/useTrackReturnItem", () => ({
 jest.mock("../../../../hooks/useStaticInfo", () => ({
   useStaticInfo: () => ({
     basePath: "",
+    tradename: Tradename.LOOKIERO,
   }),
 }));