@lookiero/checkout 0.8.6 → 0.8.7-beta.0

package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts

@@ -0,0 +1,10 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+interface IncrementIntroShownCountFunction {
+    (): Promise<void>;
+}
+type UseIncrementIntroShownCount = [incrementIntroShownCount: IncrementIntroShownCountFunction, status: CommandStatus];
+interface UseIncrementIntroShownCountFunction {
+    (): UseIncrementIntroShownCount;
+}
+declare const useIncrementIntroShownCount: UseIncrementIntroShownCountFunction;
+export { useIncrementIntroShownCount };

package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+import { useViewIntroShownCount } from "../../../projection/uiSetting/react/useViewIntroShownCount";
+import { UISettings } from "../../../ui/settings/UISettings";
+import { useUpdateUiSetting } from "./useUpdateUiSetting";
+const useIncrementIntroShownCount = () => {
+    const [update, status] = useUpdateUiSetting();
+    const [introShownCount] = useViewIntroShownCount();
+    const incrementIntroShownCount = useCallback(() => update({ key: UISettings.INTRO_SHOWN_COUNT, value: introShownCount + 1 }), [introShownCount, update]);
+    return [incrementIntroShownCount, status];
+};
+export { useIncrementIntroShownCount };

package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts

@@ -0,0 +1,6 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+interface UseShouldIntroBeShownFunction {
+    (): [boolean, QueryStatus];
+}
+declare const useShouldIntroBeShown: UseShouldIntroBeShownFunction;
+export { useShouldIntroBeShown };

package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js

@@ -0,0 +1,7 @@
+import { useViewIntroShownCount } from "./useViewIntroShownCount";
+const MAX_INTRO_SHOWN_COUNT = 2;
+const useShouldIntroBeShown = () => {
+    const [introShownCount, introShownCountStatus] = useViewIntroShownCount();
+    return [introShownCount < MAX_INTRO_SHOWN_COUNT, introShownCountStatus];
+};
+export { useShouldIntroBeShown };

package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts

@@ -0,0 +1,6 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+interface UseViewIntroShownCountFunction {
+    (): [number, QueryStatus];
+}
+declare const useViewIntroShownCount: UseViewIntroShownCountFunction;
+export { useViewIntroShownCount };

package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js

@@ -0,0 +1,9 @@
+import { UISettings } from "../../../ui/settings/UISettings";
+import { useViewUiSettingByKey } from "./useViewUiSettingByKey";
+const useViewIntroShownCount = () => {
+    const [introShownCount, introShownCountStatus] = useViewUiSettingByKey({
+        key: UISettings.INTRO_SHOWN_COUNT,
+    });
+    return [introShownCount?.value || 0, introShownCountStatus];
+};
+export { useViewIntroShownCount };

package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts

@@ -0,0 +1,2 @@
+declare const usePaymentInstrumentUpdateEvents: () => void;
+export { usePaymentInstrumentUpdateEvents };

package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js

@@ -0,0 +1,28 @@
+import { useEvent } from "@lookiero/event";
+import { useCallback, useEffect } from "react";
+import { useCreateNotification } from "../../../shared/notifications";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { I18nMessages } from "../i18n/i18n";
+import { useToast } from "./useToast";
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
+const usePaymentInstrumentUpdateEvents = () => {
+    const { subscribe, unsubscribe } = useEvent();
+    const { showError, showSuccess } = useToast();
+    const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
+    const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
+    const onError = useCallback(({ error }) => {
+        if (error.toaster) {
+            showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
+        }
+    }, [showError]);
+    useEffect(() => {
+        subscribe({ event: PAYMENT_ERROR }, onError);
+        subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        return () => {
+            unsubscribe({ event: PAYMENT_ERROR }, onError);
+            unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        };
+    }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+};
+export { usePaymentInstrumentUpdateEvents };

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

@@ -1,10 +1,13 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StatusBar } from "react-native";
 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 App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
+const { colorBase } = theme();
+const App = ({ customerId, menu, tabBar, children }) => (React.createElement(React.Fragment, 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 },
         React.createElement(PortalProvider, null, children))));

package/dist/infrastructure/ui/views/intro/Intro.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+type IntroProps = {
+    readonly customerId: string;
+};
+declare const Intro: FC<IntroProps>;
+export { Intro };

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -0,0 +1,52 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Icon } from "@lookiero/aurora-next/build/components/primitives/Icon/Icon";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import React from "react";
+import { Platform, View } from "react-native";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useIncrementIntroShownCount } from "../../../domain/uiSetting/react/useIncrementIntroShownCount";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+import { I18nMessages } from "../../i18n/i18n";
+import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
+import { style } from "./Intro.style";
+const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
+    React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
+    React.createElement(Text, { level: 2, detail: true }, text)));
+const Intro = ({ customerId }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
+    const subTitleText = useI18nMessage({ id: I18nMessages.INTRO_SUBTITLE });
+    const discountText = useI18nMessage({ id: I18nMessages.INTRO_DISCOUNT });
+    const bulletOneText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_ONE });
+    const bulletTwoText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_TWO });
+    const bulletThreeText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_THREE });
+    const buttonText = useI18nMessage({ id: I18nMessages.INTRO_BUTTON });
+    const [fiveItemsDiscount, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({
+        customerId,
+    });
+    const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
+    if (fiveItemsDiscountStatus === QueryStatus.LOADING)
+        return React.createElement(Spinner, null);
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
+        React.createElement(Body, { style: { column: style.bodyColumn } },
+            React.createElement(View, { style: style.intro },
+                React.createElement(View, { style: style.content },
+                    React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                    React.createElement(Text, { level: 3, style: style.subtitle, body: true }, subTitleText),
+                    fiveItemsDiscount !== 0 && (React.createElement(View, { style: style.discountContainer },
+                        React.createElement(View, { style: style.discount },
+                            React.createElement(Text, { level: 2, heading: true },
+                                "- ",
+                                fiveItemsDiscount),
+                            React.createElement(Text, { level: 3, style: style.percentage, heading: true }, "%")),
+                        React.createElement(Text, { level: 3, body: true }, discountText))),
+                    React.createElement(View, { style: style.description },
+                        React.createElement(Bullet, { text: bulletOneText }),
+                        React.createElement(Bullet, { text: bulletTwoText }),
+                        React.createElement(Bullet, { text: bulletThreeText }))),
+                React.createElement(Button, { disabled: incrementIntroShownCountStatus === CommandStatus.LOADING, onPress: incrementIntroShownCount }, buttonText)))));
+};
+export { Intro };

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -0,0 +1,52 @@
+declare const style: {
+    bodyColumn: {
+        paddingHorizontal: number;
+    };
+    bullet: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginVertical: number;
+    };
+    content: {
+        alignItems: "center";
+    };
+    description: {
+        borderWidth: number;
+        marginBottom: number;
+        padding: number;
+        width: string;
+    };
+    discount: {
+        alignItems: "flex-end";
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+    };
+    discountContainer: {
+        alignItems: "center";
+        backgroundColor: string;
+        marginBottom: number;
+        padding: number;
+        textAlign: "center";
+        width: string;
+    };
+    intro: {
+        flex: number;
+        justifyContent: "space-between";
+    };
+    percentage: {
+        marginLeft: number;
+    };
+    subtitle: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    tickIcon: {
+        marginRight: number;
+    };
+    title: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/intro/Intro.style.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
+const style = StyleSheet.create({
+    bodyColumn: {
+        paddingHorizontal: spaceXL,
+    },
+    bullet: {
+        alignItems: "center",
+        flexDirection: "row",
+        marginVertical: spaceS,
+    },
+    content: {
+        alignItems: "center",
+    },
+    description: {
+        borderWidth: borderSize,
+        marginBottom: spaceXL,
+        padding: spaceM,
+        width: "100%",
+    },
+    discount: {
+        alignItems: "flex-end",
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: spaceS,
+    },
+    discountContainer: {
+        alignItems: "center",
+        backgroundColor: colorAccent,
+        marginBottom: spaceL,
+        padding: spaceM,
+        textAlign: "center",
+        width: "100%",
+    },
+    intro: {
+        flex: 1,
+        justifyContent: "space-between",
+    },
+    percentage: {
+        marginLeft: spaceXS,
+    },
+    subtitle: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
+    tickIcon: {
+        marginRight: spaceS,
+    },
+    title: {
+        marginBottom: spaceM,
+        textAlign: "center",
+    },
+});
+export { style };

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

@@ -1,61 +1,21 @@
-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, { 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 React from "react";
 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 { 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();
+import { PaymentInstrument } from "../checkout/components/paymentInstrument/PaymentInstrument";
 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) &&
-        dependenciesLoadedStatuses.includes(pricingStatus) &&
-        dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    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 }))));
+    return React.createElement(PaymentInstrument, { useRedirect: () => ({ key: "value" }) });
 };
 export { Summary };

package/package.json

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