@lookiero/checkout 3.3.0 → 3.4.0

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

@@ -1,10 +1,11 @@
-import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback } from "react";
+import { useIntl } from "@lookiero/i18n-react";
+import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
-    const placeholderText = useI18nMessage({ id: checkoutQuestion.placeholder });
+    const { formatMessage } = useIntl();
+    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, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -1,5 +1,5 @@
-import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
-import React, { useCallback, useEffect, useState } from "react";
+import { useIntl } from "@lookiero/i18n-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { Modal } from "../../../../../../../shared/ui/components/layouts/modal/Modal";
 import { ButtonIcon } from "../../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
@@ -8,7 +8,8 @@ import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../..
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder });
+    const { formatMessage } = useIntl();
+    const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPress = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -32,7 +33,7 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
     return (React.createElement(React.Fragment, null,
         React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholderText || "", value: inputValue }))),
+                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholderText, value: inputValue }))),
         React.createElement(Modal, { portalHostName: portalHostName, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
             React.createElement(View, { style: style.modalContent }, children))));
 };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.js

@@ -1,18 +1,19 @@
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { animated, useSpring } from "@react-spring/native";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { View } from "react-native";
 import ReturnQuestion from "../../ReturnQuestion";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const titleText = useI18nMessage({ id: returnQuestion.name });
+    const { formatMessage } = useIntl();
     const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
     const feedbackReturnQuestion = feedback
         ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
         : undefined;
-    const feedbackText = useI18nMessage({ id: feedbackReturnQuestion?.name });
+    const titleText = useMemo(() => (returnQuestion.name ? formatMessage({ id: returnQuestion.name }) : undefined), [formatMessage, returnQuestion.name]);
+    const feedbackText = useMemo(() => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.name }) : undefined), [feedbackReturnQuestion, formatMessage]);
     const [stackHeight, setStackHeight] = useState();
     const handleOnLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setStackHeight(height), []);
     const stackSyle = useSpring({ height: stackHeight });

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

@@ -1,10 +1,11 @@
-import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback } from "react";
+import { useIntl } from "@lookiero/i18n-react";
+import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
-    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder });
+    const { formatMessage } = useIntl();
+    const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
     return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));

package/dist/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
-    const deliveryBannerText = useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }) || "";
+    const deliveryBannerText = useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER });
     return React.createElement(Banner, { text: deliveryBannerText });
 };
 export { DeliveryBanner };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -12,7 +12,7 @@ const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
 const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
-    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] }) || "";
+    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
     const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
     return (React.createElement(Banner, { text: decissionText },
         React.createElement(Pressable, { style: style.button, testID: "customer-decission-banner", onPress: onPress },

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -24,7 +24,7 @@ const ItemActions = ({ productVariants, currentProductVariant, country, onSizeSe
             React.createElement(View, { style: style.row },
                 !currentProductVariant.size.unique && productVariants && (React.createElement(SelectField, { ...(disabledSizeSelector && {
                         onPress: onSizeSelectorPress,
-                    }), options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", title: sizeSelectorLabelText || "", value: currentProductVariant.id, style: {
+                    }), options: sizeSelectorOptions, placeholder: sizeSelectorLabelText, testID: "size-selector", title: sizeSelectorLabelText, value: currentProductVariant.id, style: {
                         selectField: style.sizeSelector,
                         inputField: { input: disabledSizeSelector && style.inputDisabled },
                     }, onChange: onReplace })),

package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -14,7 +14,7 @@ const Row = ({ text, level = 3, children }) => (React.createElement(View, { styl
     React.createElement(Text, { level: level, action: true, upperCase: true }, text),
     children));
 const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, busy = false, onPress = () => void 0, onSubmit, }) => {
-    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL }) || "";
+    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
         values: { items: totalCheckoutItemsKept.toString() },
@@ -25,9 +25,9 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
     const discountText = useI18nMessage({
         id: I18nMessages.SUMMARY_DISCOUNT,
         values: { discount: discountPercentage?.toString() },
-    }) || "";
-    const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT }) || "";
-    const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE }) || "";
+    });
+    const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
+    const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
     const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
     const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
     return (React.createElement(Pressable, { testID: "pricing", onPress: collapsible ? onPress : null },

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotificationItem.js

@@ -1,5 +1,5 @@
-import { useI18nMessage } from "@lookiero/i18n-react";
-import React from "react";
+import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import React, { useMemo } from "react";
 import { useCallback, useEffect } from "react";
 import { Toast, ToastVariant } from "../../../../../ui/components/molecules/toast/Toast";
 import { NotificationLevel } from "../../../../domain/notification/model/notification";
@@ -9,8 +9,9 @@ const toastVariantForNotificationLevel = {
     [NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
 };
 const ToastNotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "toast-notification-item", style: customStyle, }) => {
-    const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
-    const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
+    const { formatMessage } = useIntl();
+    const title = useMemo(() => (notification.titleI18nKey ? formatMessage({ id: notification.titleI18nKey }) : undefined), [formatMessage, notification.titleI18nKey]);
+    const body = useI18nMessage({ id: notification.bodyI18nKey });
     const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
     useEffect(() => {
         if (!autoHideTimeout) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -28,8 +28,8 @@
   "dependencies": {
     "@expo/dev-server": "0.1.120",
     "@gorhom/portal": "^1.0.14",
-    "@lookiero/i18n": "^0.8.3",
-    "@lookiero/i18n-react": "^0.8.3",
+    "@lookiero/i18n": "^0.9.0",
+    "@lookiero/i18n-react": "^0.9.0",
     "@lookiero/messaging": "^8.1.1",
     "@lookiero/messaging-react": "^8.1.1",
     "@react-spring/native": "9.6.1",