@lookiero/checkout 0.8.7-beta.1 → 0.8.7-beta.2

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

@@ -1,25 +1,61 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import React from "react";
-import { Platform } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Platform, View } from "react-native";
+import { generatePath, useNavigate } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
+import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { PaymentInstrument } from "../checkout/components/paymentInstrument/PaymentInstrument";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { theme } from "../../theme/theme";
 import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
+import { style } from "./Summary.style";
+import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
+import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
+import { StickyPricing } from "./components/stickyPricing/StickyPricing";
+const { spaceXL } = theme();
 const Summary = ({ customerId, country }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
+    const [pricingHeight, setPricingHeight] = useState(0);
+    const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
     usePageView({
         page: TrackingPage.SUMMARY,
         country,
         checkoutId: checkout?.id,
     });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const [pricingCollapsed, setPricingCollapsed] = useState(true);
+    const handleOnPressPricing = useCallback(() => setPricingCollapsed(!pricingCollapsed), [pricingCollapsed]);
+    const handleOnSubmit = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`), [basePath, navigate]);
+    const handleOnPressItem = useCallback((checkoutItemId) => navigate(`${basePath}/${generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })}`), [basePath, navigate]);
+    const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
+    const checkoutItemsReturned = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.RETURNED || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) &&
+        dependenciesLoadedStatuses.includes(pricingStatus) &&
+        dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
-        React.createElement(PaymentInstrument, { useRedirect: () => ({ key: "value" }) })));
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) },
+        React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
+            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, body: true }, descriptionText)),
+            React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], country: country, onPressItem: handleOnPressItem }))));
 };
 export { Summary };

package/package.json

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