@lookiero/checkout 0.8.10 → 0.8.12-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/components/templates/SafeAreaScrollView.js

@@ -9,7 +9,7 @@ const SafeAreaScrollView = ({ children, footer, edges = ["top", "left", "right"]
     return (React.createElement(SafeAreaView, { edges: edges, style: [style.safeAreaView, customStyle?.safeAreaView] },
         React.createElement(ScrollView, { contentContainerStyle: [
                 {
-                    paddingTop: safeAreaInsetTop - (StatusBar.currentHeight || 0) + scrollerPaddingTop,
+                    paddingTop: (StatusBar.currentHeight || safeAreaInsetTop) + scrollerPaddingTop,
                     paddingBottom: safeAreaInsetBottom + (Platform.OS === "android" ? spaceXXXL : 0),
                 },
                 customStyle?.scrollView,

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

@@ -8,7 +8,7 @@ import { theme } from "../theme/theme";
 import { Navigation } from "./navigation/Navigation";
 const { colorBase } = theme();
 const App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
-    React.createElement(StatusBar, { backgroundColor: colorBase, barStyle: "dark-content", translucent: true }),
+    React.createElement(StatusBar, { backgroundColor: colorBase, barStyle: "dark-content", translucent: false }),
     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/shared/ui/components/layouts/modal/Modal.js

@@ -2,7 +2,8 @@ import { Portal } from "@gorhom/portal";
 import { useBack } from "@lookiero/aurora-next/build/hooks/useBack/useBack";
 import { animated, useTransition } from "@react-spring/native";
 import React, { useCallback, useMemo, useState } from "react";
-import { Dimensions, Platform, ScrollView, TouchableWithoutFeedback, View, } from "react-native";
+import { Dimensions, Platform, TouchableWithoutFeedback, View, } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
 import { useScreenSize } from "../../../hooks/useScreenSize";
@@ -55,7 +56,7 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
             : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
         unique: true,
     });
-    const ModalContentView = useMemo(() => (scroll ? ScrollView : View), [scroll]);
+    const ModalContentView = useMemo(() => (scroll ? KeyboardAwareScrollView : View), [scroll]);
     return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: "modal" },
         React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
             React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.8.10",
+  "version": "0.8.12-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -35,6 +35,7 @@
     "@react-spring/native": "^9.5.5",
     "@sentry/react-native": "^4.13.0",
     "inline-style-prefixer": "6.0.1",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "^12.1.1",
     "tiny-invariant": "^1.3.1",