@lookiero/checkout 4.0.3 → 4.1.0--2024.2.5.151702

package/dist/infrastructure/ui/{views/summary/components → components/atoms}/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -2,14 +2,16 @@ import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { useScreenSize } from "../../../../../shared/ui/hooks/useScreenSize";
+import { I18nMessages } from "../../../i18n/i18n";
 import { style } from "./FiveItemsDiscountBanner.style";
 const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
+    const screenSize = useScreenSize();
     const bannerText = useI18nMessage({
-        id: I18nMessages.SUMMARY_BANNER,
+        id: I18nMessages.BANNER_DISCOUNT_TEXT,
         values: { discount: fiveItemsDiscount.toString() },
     });
     return (React.createElement(View, { style: style.container },
-        React.createElement(Text, { level: 3 }, bannerText)));
+        React.createElement(Text, { level: screenSize === "S" ? 2 : 1, detail: true }, bannerText)));
 };
 export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/{views/summary/components → components/atoms}/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js

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

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

@@ -1,8 +1,12 @@
 import { ALIGN, Text } from "@lookiero/aurora";
 import React from "react";
 import { View } from "react-native";
+import { useScreenSize } from "../../../../../shared/ui/hooks/useScreenSize";
 import { style } from "./Banner.style";
-const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
-    React.createElement(Text, { align: ALIGN.CENTER, level: 2, detail: true }, text),
-    children));
+const Banner = ({ children, text }) => {
+    const screenSize = useScreenSize();
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { align: ALIGN.CENTER, level: screenSize === "S" ? 2 : 1, detail: true }, text),
+        children));
+};
 export { Banner };

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

@@ -27,7 +27,7 @@ declare enum I18nMessages {
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
     SUMMARY_TITLE = "summary.title",
     SUMMARY_DESCRIPTION = "summary.description",
-    SUMMARY_BANNER = "summary.banner",
+    BANNER_DISCOUNT_TEXT = "summary.banner",
     SUMMARY_KEEP_TAB = "summary.keep_tab",
     SUMMARY_RETURN_TAB = "summary.return_tab",
     SUMMARY_KEEP_EMPTY = "summary.keep_empty",

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

@@ -28,7 +28,7 @@ var I18nMessages;
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";
     I18nMessages["SUMMARY_DESCRIPTION"] = "summary.description";
-    I18nMessages["SUMMARY_BANNER"] = "summary.banner";
+    I18nMessages["BANNER_DISCOUNT_TEXT"] = "summary.banner";
     I18nMessages["SUMMARY_KEEP_TAB"] = "summary.keep_tab";
     I18nMessages["SUMMARY_RETURN_TAB"] = "summary.return_tab";
     I18nMessages["SUMMARY_KEEP_EMPTY"] = "summary.keep_empty";

package/dist/infrastructure/ui/views/item/Item.js

@@ -1,3 +1,4 @@
+import { Box } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useMatch, useNavigate, useParams } from "react-router-native";
@@ -13,20 +14,24 @@ import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutB
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { TrackingPage } from "../../../tracking/tracking";
+import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { ItemDetailHeader } from "../../components/templates/header/itemDetailHeader/ItemDetailHeader";
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./Item.style";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
 import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
 import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
 const Item = ({ customerId, country, layout: Layout }) => {
     const logger = useLogger();
     const { id } = useParams();
+    const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
     /* SizeChange and Booking */
@@ -125,7 +130,17 @@ const Item = ({ customerId, country, layout: Layout }) => {
     }, [checkout?.id, country, navigate, trackPressBack]);
     const basePath = useBasePath();
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
-    const header = useMemo(() => itemDetailRouteMatch ? (React.createElement(ItemDetailHeader, { onBack: handleOnBack })) : (React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: handleOnNext, onPrevious: handleOnPrevious })), [checkout?.items, checkoutItem, handleOnBack, handleOnNext, handleOnPrevious, itemDetailRouteMatch]);
+    const header = useMemo(() => (React.createElement(Box, { style: style.header },
+        itemDetailRouteMatch ? (React.createElement(ItemDetailHeader, { onBack: handleOnBack })) : (React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: handleOnNext, onPrevious: handleOnPrevious })),
+        fiveItemsDiscount !== 0 ? React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }) : null)), [
+        checkout?.items,
+        checkoutItem,
+        fiveItemsDiscount,
+        handleOnBack,
+        handleOnNext,
+        handleOnPrevious,
+        itemDetailRouteMatch,
+    ]);
     const [height, setHeight] = useState(0);
     const handleOnLayout = useCallback((event) => setHeight(event.nativeEvent.layout.height), []);
     const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
@@ -135,6 +150,7 @@ const Item = ({ customerId, country, layout: Layout }) => {
         returnQuestions &&
         // This will ensure that the view is not shown until bookCheckoutBooking use-case is dispatched (if required)
         bookedProductsVariantsStatus !== QueryStatus.LOADING &&
+        fiveItemsDiscountStatus !== QueryStatus.LOADING &&
         sizeChangeEnabledStatus !== QueryStatus.LOADING &&
         (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true) &&
         returnCheckoutItemStatus !== CommandStatus.LOADING;

package/dist/infrastructure/ui/views/item/Item.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    header: {
+        display: "flex";
+        flexDirection: "column";
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/Item.style.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    header: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+export { style };

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

@@ -3,6 +3,7 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { Pressable } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { useScreenSize } from "../../../../../../shared/ui/hooks/useScreenSize";
 import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
@@ -14,8 +15,9 @@ const i18nMessageForCheckoutItemStatus = {
 const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
     const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
+    const screenSize = useScreenSize();
     return (React.createElement(Banner, { text: decissionText },
         React.createElement(Pressable, { style: style.button, testID: "customer-decission-banner", onPress: onPress },
-            React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText))));
+            React.createElement(Text, { level: screenSize === "S" ? 2 : 1, style: style.buttonText, detail: true }, bannerButtonText))));
 };
 export { CustomerDecissionBanner };

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { colorBase, colorGrayscaleL, colorContent, spaceM, spaceXL } = theme();
+const { colorBase, colorGrayscaleL, colorContent, spaceM, spaceXXXL } = theme();
 const PAGINATION_SIZE = 37;
 const style = StyleSheet.create({
     image: {
@@ -26,7 +26,7 @@ const style = StyleSheet.create({
         position: "relative",
     },
     slide: {
-        paddingHorizontal: spaceXL,
+        paddingHorizontal: spaceXXXL,
     },
 });
 export { style };

package/dist/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -34,9 +34,10 @@ const ItemWithCustomerDecission = ({ country, checkoutId, checkoutItem, returnQu
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(Body, { style: { row: style.container } },
+    return (React.createElement(React.Fragment, null,
         React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }),
-        React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
-            React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, onEditFeedback: onEditFeedback }))))));
+        React.createElement(Body, { style: { row: style.container } },
+            React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
+                React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, onEditFeedback: onEditFeedback })))))));
 };
 export { ItemWithCustomerDecission };

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -13,13 +13,13 @@ import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/c
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
+import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { Body } from "../../components/layouts/body/Body";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { theme } from "../../theme/theme";
 import { style } from "./Summary.style";
-import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { StickyPricing } from "./components/stickyPricing/StickyPricing";
 const { spaceXXL } = theme();
 const Summary = ({ customerId, country, layout: Layout, children }) => {
@@ -78,8 +78,8 @@ const Summary = ({ customerId, country, layout: Layout, children }) => {
         return React.createElement(Spinner, null);
     return (React.createElement(Layout, { ...layoutProps, onLayout: handleOnLayout },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+            fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
             React.createElement(Body, { style: { row: { paddingBottom: pricingHeight + spaceXXL } } },
-                fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
                 React.createElement(View, { style: style.content },
                     React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                     React.createElement(Text, { level: 3, style: style.description }, descriptionText)),

package/package.json

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