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

package/dist/infrastructure/ui/views/App.js

@@ -1,12 +1,13 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
 import { StatusBar } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { theme } from "../theme/theme";
 import { Navigation } from "./navigation/Navigation";
 const { colorBase } = theme();
-const App = ({ customerId, menu, tabBar, children }) => (React.createElement(React.Fragment, null,
+const App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
     React.createElement(StatusBar, { backgroundColor: colorBase, barStyle: "dark-content", translucent: true }),
     React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
     React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar },

package/dist/infrastructure/ui/views/navigation/Navigation.js

@@ -1,15 +1,10 @@
 import { usePortal } from "@lookiero/aurora-next/build/contexts/Portal/Portal";
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { Platform } from "react-native";
-import { style } from "./Navigation.style";
-import { Header } from "./components/header/Header";
-const Navigation = ({ customerId, menu, tabBar: TabBar, children }) => {
-    const [menuVisible, setMenuVisible] = useState(false);
-    const handleOnOpenMenu = useCallback(() => setMenuVisible(true), []);
-    const handleOnCloseMenu = useCallback(() => setMenuVisible(false), []);
+const Navigation = ({ tabBar: TabBar, children }) => {
+    const [menuVisible] = useState(false);
     const { busy } = usePortal();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header, { customerId: customerId, menu: menu, menuVisible: menuVisible, style: style.header, onCloseMenu: handleOnCloseMenu, onOpenMenu: handleOnOpenMenu }),
         children,
         Platform.OS !== "web" && React.createElement(TabBar, { isPortalBusy: busy, panel: menuVisible })));
 };

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

@@ -1,21 +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 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 { PaymentInstrument } from "../checkout/components/paymentInstrument/PaymentInstrument";
+import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+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(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.0",
+  "version": "0.8.7-beta.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [