@lookiero/checkout 0.3.12 → 0.3.13

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lookiero/checkout",
-    "version": "0.3.12",
+    "version": "0.3.13",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+interface BannerProps {
+    readonly children?: ReactNode;
+    readonly text: string;
+}
+declare const Banner: FC<BannerProps>;
+export { Banner };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.js

@@ -0,0 +1,8 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Banner.style";
+const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
+    React.createElement(Text, { level: 2, style: style.text, detail: true }, text),
+    children));
+export { Banner };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        textAlign: "center";
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorInfo, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorInfo,
+        paddingHorizontal: spaceL,
+        paddingVertical: spaceM,
+    },
+    text: {
+        textAlign: "center",
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/i18n/i18n.d.ts

@@ -55,6 +55,7 @@ declare enum I18nMessages {
     CHECKOUT_TOAST_ERROR = "checkout.toast_error",
     CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
     CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
-    CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button"
+    CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
+    CHECKOUT_DELIVERY_BANNER = "checkout.delivery_banner"
 }
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/src/infrastructure/ui/i18n/i18n.js

@@ -57,5 +57,6 @@ var I18nMessages;
     I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_DESCRIPTION"] = "checkout.success_modal_description";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_BUTTON"] = "checkout.success_modal_button";
+    I18nMessages["CHECKOUT_DELIVERY_BANNER"] = "checkout.delivery_banner";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -21,7 +21,8 @@ import { useBasePath } from "../../routing/useBasePath";
 import { ProductVariant } from "../item/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
-import { CheckoutSuccessModal } from "./components/CheckoutSuccessModal";
+import { CheckoutSuccessModal } from "./components/checkoutSuccessModal/CheckoutSuccessModal";
+import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 const Checkout = ({ customerId, authToken, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
     const paymentInstrumentSelectRef = useRef(null);
@@ -67,6 +68,7 @@ const Checkout = ({ customerId, authToken, useRedirect }) => {
     }, [createNotification, markAsPaid, paymentFlowPayload]);
     const handleOnSuccessModalDismiss = useCallback(() => navigate(`${basePath}/${Routes.FEEDBACK}`), [basePath, navigate]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
+    const hasReplacedCheckoutItem = useMemo(() => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(pricingStatus);
     if (!dependenciesLoaded)
@@ -75,6 +77,8 @@ const Checkout = ({ customerId, authToken, useRedirect }) => {
         React.createElement(CheckoutSuccessModal, { visible: markAsPaidStatus === CommandStatus.SUCCESS, onDismiss: handleOnSuccessModalDismiss }),
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, { style: { column: style.bodyColumn } },
+                hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
+                    React.createElement(DeliveryBanner, null))),
                 React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }),
                 React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                 checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.checkoutItemKept, testID: "checkout-items-kept" },

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -5,6 +5,9 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
+    deliveryBannerContainer: {
+        marginBottom: number;
+    };
     pricingContainer: {
         marginTop: number;
     };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -8,6 +8,9 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
+    deliveryBannerContainer: {
+        marginBottom: spaceXXL,
+    },
     pricingContainer: {
         marginTop: spaceXL,
     },

package/dist/src/infrastructure/ui/views/checkout/components/{CheckoutSuccessModal.js → checkoutSuccessModal/CheckoutSuccessModal.js}

@@ -3,8 +3,8 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
-import { Modal } from "../../../../../shared/ui/components/layouts/modal/Modal";
-import { I18nMessages } from "../../../i18n/i18n";
+import { Modal } from "../../../../../../shared/ui/components/layouts/modal/Modal";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CheckoutSuccessModal.style";
 const CheckoutSuccessModal = ({ visible, onDismiss }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_SUCCESS_MODAL_TITLE });

package/dist/src/infrastructure/ui/views/checkout/components/{CheckoutSuccessModal.style.js → checkoutSuccessModal/CheckoutSuccessModal.style.js}

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
     button: {

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DeliveryBanner: () => JSX.Element;
+export { DeliveryBanner };

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

@@ -0,0 +1,9 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+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 }) || "";
+    return React.createElement(Banner, { text: deliveryBannerText });
+};
+export { DeliveryBanner };

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

@@ -1,8 +1,9 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Pressable, View } from "react-native";
+import { Pressable } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
 const i18nMessageForCheckoutItemStatus = {
@@ -11,11 +12,10 @@ 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(View, { style: style.container },
-        React.createElement(Text, { level: 2, style: style.decissionText, detail: true }, decissionText),
-        React.createElement(Pressable, { onPress: onPress },
+    return (React.createElement(Banner, { text: decissionText },
+        React.createElement(Pressable, { style: style.button, onPress: onPress },
             React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText))));
 };
 export { CustomerDecissionBanner };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

@@ -1,17 +1,9 @@
 declare const style: {
+    button: {
+        marginTop: number;
+    };
     buttonText: {
         textDecorationLine: "underline";
     };
-    container: {
-        alignItems: "center";
-        backgroundColor: string;
-        paddingBottom: number;
-        paddingHorizontal: number;
-        paddingTop: number;
-    };
-    decissionText: {
-        marginBottom: number;
-        textAlign: "center";
-    };
 };
 export { style };

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

@@ -1,20 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { colorInfo, spaceM, spaceL } = theme();
+const { spaceM } = theme();
 const style = StyleSheet.create({
+    button: {
+        marginTop: spaceM,
+    },
     buttonText: {
         textDecorationLine: "underline",
     },
-    container: {
-        alignItems: "center",
-        backgroundColor: colorInfo,
-        paddingBottom: spaceL,
-        paddingHorizontal: spaceL,
-        paddingTop: spaceM,
-    },
-    decissionText: {
-        marginBottom: spaceM,
-        textAlign: "center",
-    },
 });
 export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [