@lookiero/checkout 9.14.0 → 10.0.0-beta.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,14 +1,10 @@
 import React, { useCallback } from "react";
-import { TouchableOpacity } from "react-native";
-import { ALIGN, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./ButtonCheckoutQuestionItem.style";
 
-const ACTIVE_OPACITY = 0.6;
-
 const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   checkoutQuestionParentId,
@@ -16,24 +12,22 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
 
-  const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+  const optionText = useI18nMessage({ id: checkoutQuestion.name });
   const handleOnPress = useCallback(
     () => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }),
     [onChange, checkoutQuestion.id, checkoutQuestionParentId],
   );
 
   return (
-    <TouchableOpacity
+    <Button
       accessibilityLabel={testID}
-      activeOpacity={ACTIVE_OPACITY}
-      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
+      style={style.button}
       testID={testID}
+      variant={feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY}
       onPress={handleOnPress}
     >
-      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
-        {optionText}
-      </Text>
-    </TouchableOpacity>
+      {optionText}
+    </Button>
   );
 };
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./HostDefaultCheckoutQuestionItem.style";
 
@@ -10,7 +9,7 @@ const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   children,
 }: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+  const titleText = useI18nMessage({ id: checkoutQuestion.name });
 
   return (
     <>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./HostSelectCheckoutQuestionItem.style";
 
@@ -10,7 +9,7 @@ const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   children,
 }: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+  const titleText = useI18nMessage({ id: checkoutQuestion.name });
 
   return (
     <>

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

@@ -11,6 +11,7 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
+        height: "auto",
       },
     }),
   },

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from "react";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./TextareaCheckoutQuestionItem.style";
@@ -11,7 +10,7 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestionParentId,
   testID,
 }: CheckoutQuestionItemProps) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const placeholderText = useMemo(
     () => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""),
     [formatMessage, checkoutQuestion.placeholder],
@@ -33,7 +32,6 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
           placeholder={placeholderText}
           style={style}
           testID={testID}
-          textAlignVertical="top"
           value={feedback}
           multiline
           onBlur={onBlur}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { Text, View } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 
@@ -12,7 +12,7 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
   returnQuestion,
   children,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
 
   return (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.tsx

@@ -2,9 +2,8 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostRadioGroupReturnQuestionItem.style";
 
@@ -13,7 +12,7 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
   children,
   testID,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const placeholderText = useMemo(
     () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
     [formatMessage, returnQuestion.metadata.placeholder],

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -2,10 +2,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -23,7 +22,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
   portalHostName,
   testID,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const placeholderText = useMemo(
     () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
     [formatMessage, returnQuestion.metadata.placeholder],
@@ -35,9 +34,10 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
 
   const feedback = useReturnQuestionFeedback();
   const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
+  const intl = useIntl();
   const translate = useCallback(
-    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [formatMessage],
+    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [intl],
   );
   const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
 

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.tsx

@@ -3,10 +3,9 @@ import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../../ReturnQuestionItem";
@@ -17,7 +16,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
   children,
   portalHostName,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
   const feedbackReturnQuestion = feedback
     ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
 
@@ -23,7 +22,7 @@ const ModalOptionReturnQuestionItems = ({
   visible,
   onClose,
 }: ModalOptionReturnQuestionItemsProps) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
   const title = formatMessage({ id: returnQuestion.translationKey });
 
   return (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.tsx

@@ -4,7 +4,6 @@ import { TouchableHighlight, ViewStyle } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
@@ -16,7 +15,7 @@ const OptionReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> =
 }) => {
   const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
 
-  const optionText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
+  const optionText = useI18nMessage({ id: returnQuestion.translationKey });
   const handleOnPress = useCallback(
     () => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: returnQuestion.id }),
     [onChange, returnQuestion.id, returnQuestionParent.id],

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

@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useState } from "react";
 import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -22,7 +21,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   testID,
   portalHostName,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const intl = useIntl();
   const [modalVisible, setModalVisible] = useState(false);
   const {
     feedback: feedbackId,
@@ -31,12 +30,12 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
   const feedback = useReturnQuestionFeedback();
   const translate = useCallback(
-    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [formatMessage],
+    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [intl],
   );
 
   const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
-  const optionText = formatMessage({ id: returnQuestion.translationKey });
+  const optionText = intl.formatMessage({ id: returnQuestion.translationKey });
 
   const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
 

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

@@ -2,24 +2,24 @@
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
+import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
-  const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
+  const titleText = useI18nMessage({ id: returnQuestion.translationKey });
+  const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();
 
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const intl = useIntl();
   const translate = useCallback(
-    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [formatMessage],
+    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [intl],
   );
   const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(
     " / ",

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

@@ -11,6 +11,7 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
+        height: "auto",
       },
     }),
   },

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

@@ -1,10 +1,9 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } 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";
@@ -14,7 +13,7 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
   returnQuestionParent,
   testID,
 }) => {
-  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const { formatMessage } = useIntl();
 
   const placeholderText = useMemo(
     () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
@@ -38,7 +37,6 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
             placeholder={placeholderText}
             style={style}
             testID={testID}
-            textAlignVertical="top"
             value={feedback}
             multiline
             onBlur={onBlur}

package/src/infrastructure/ui/components/templates/footer/Footer.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "../../../test/render";
+import { Footer } from "./Footer";
+
+jest.mock("react-router-native", () => ({
+  useLocation: () => jest.fn(),
+}));
+
+describe("Footer template", () => {
+  it("matches the snapshot", async () => {
+    const { toJSON } = render(<Footer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/infrastructure/ui/components/templates/footer/Footer.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import { useLocation } from "react-router-native";
+import { Footer as AuroraFooter, FooterItem } from "@lookiero/aurora";
+
+const Footer: FC = () => {
+  const location = useLocation();
+
+  return (
+    <AuroraFooter value={location.pathname}>
+      <FooterItem icon="box" text="Inicio" value="/" />
+      <FooterItem icon="heart" text="Look&Like" value="/look-and-like" />
+      <FooterItem icon="referrals" text="Amigas" value="/friends" />
+      <FooterItem icon="eye_open" text="Inspiración" value="/inspiration" />
+      <FooterItem icon="inbox" notification={true} text="Mensajes" value="/messages" />
+    </AuroraFooter>
+  );
+};
+
+export { Footer };