@lookiero/checkout 0.8.1 → 0.8.2-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/useSubmitCheckout.js

@@ -20,21 +20,23 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         paymentFlowRef.current?.startLegacyBoxCheckout(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        paymentFlowPayload, async ({ status, toaster }) => {
+        paymentFlowPayload, async ({ status, toaster, final }) => {
             setStartLegacyBoxCheckoutStatus("loading");
-            if (status === ChargeStatus.EXECUTED) {
-                setStartLegacyBoxCheckoutStatus("success");
-                try {
-                    await submitCheckoutCommand();
+            if (final) {
+                if (status === ChargeStatus.EXECUTED) {
+                    setStartLegacyBoxCheckoutStatus("success");
+                    try {
+                        await submitCheckoutCommand();
+                    }
+                    catch (error) { }
+                }
+                else {
+                    createNotification({
+                        level: NotificationLevel.ERROR,
+                        bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+                    });
+                    setStartLegacyBoxCheckoutStatus("error");
                 }
-                catch (error) { }
-            }
-            else {
-                createNotification({
-                    level: NotificationLevel.ERROR,
-                    bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-                });
-                setStartLegacyBoxCheckoutStatus("error");
             }
         });
     }, [blockCheckoutBooking, createNotification, submitCheckoutCommand, paymentFlowRef]);

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/package.json

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