@lookiero/checkout 0.7.2 → 0.8.0-beta.0

package/dist/index.d.ts

@@ -20,8 +20,8 @@ interface FirstAvailableCheckoutByCustomerIdFunction {
 interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: string;
-    readonly translations: EndpointFunction;
     readonly sentry: SentryLoggerFunctionArgs;
+    readonly translations: EndpointFunction[];
 }
 interface BootstrapFunctionReturn {
     readonly Root: ComponentType<RootProps>;

package/dist/index.js

@@ -1,14 +1,14 @@
-import { fetchFetchTranslation } from "@lookiero/i18n";
 import { i18n } from "@lookiero/i18n-react";
 import { CheckoutStatus } from "./domain/checkout/model/checkout";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { root } from "./infrastructure/ui/Root";
+import { fetchTranslations } from "./infrastructure/ui/i18n/fetchTranslations";
 import { viewFirstAvailableCheckoutByCustomerId } from "./projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 const bootstrap = ({ apiUrl, getAuthToken, translations, sentry }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
-        fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
+        fetchTranslation: fetchTranslations({ translations }),
         contextId: "CheckoutI18n",
     });
     const Root = root({ Messaging, I18n, getAuthToken, sentry });

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,29 +20,22 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         paymentFlowRef.current?.startLegacyBoxCheckout(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        paymentFlowPayload, async ({ status }) => {
+        paymentFlowPayload, async ({ status, toaster }) => {
             setStartLegacyBoxCheckoutStatus("loading");
-            if (status === ChargeStatus.REJECTED) {
-                createNotification({
-                    level: NotificationLevel.ERROR,
-                    bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_REJECTED,
-                });
-                setStartLegacyBoxCheckoutStatus("error");
-            }
-            else if (status === ChargeStatus.ERROR) {
-                createNotification({
-                    level: NotificationLevel.ERROR,
-                    bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-                });
-                setStartLegacyBoxCheckoutStatus("error");
-            }
-            else if (status === ChargeStatus.EXECUTED) {
+            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");
+            }
         });
     }, [blockCheckoutBooking, createNotification, submitCheckoutCommand, paymentFlowRef]);
     const status = useMemo(() => {

package/dist/infrastructure/ui/i18n/fetchTranslations.d.ts

@@ -0,0 +1,9 @@
+import { EndpointFunction, FetchTranslationFuction } from "@lookiero/i18n";
+interface FetchTranslationsFuntionArgs {
+    readonly translations: EndpointFunction[];
+}
+interface FetchTranslationsFuntion {
+    (args: FetchTranslationsFuntionArgs): FetchTranslationFuction;
+}
+declare const fetchTranslations: FetchTranslationsFuntion;
+export { fetchTranslations };

package/dist/infrastructure/ui/i18n/fetchTranslations.js

@@ -0,0 +1,9 @@
+import { fetchFetchTranslation } from "@lookiero/i18n";
+const fetchTranslations = ({ translations }) => async ({ locale }) => {
+    const translationsMessages = await Promise.all(translations.map((endpoint) => fetchFetchTranslation({ endpoint })({ locale })));
+    return translationsMessages.reduce((acc, translationMessages) => ({
+        ...acc,
+        ...translationMessages,
+    }), {});
+};
+export { fetchTranslations };

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -1,5 +1,12 @@
 declare const COLOR_I18N_PREFIX = "color.";
 declare enum I18nMessages {
+    INTRO_TITLE = "intro.title",
+    INTRO_SUBTITLE = "intro.subtitle",
+    INTRO_DISCOUNT = "intro.discount",
+    INTRO_BULLET_ONE = "intro.bullet_one",
+    INTRO_BULLET_TWO = "intro.bullet_two",
+    INTRO_BULLET_THREE = "intro.bullet_three",
+    INTRO_BUTTON = "intro.button",
     ITEM_SIZE = "item.size",
     ITEM_COLOR = "item.color",
     ITEM_UNIQUE = "item.unique",

package/dist/infrastructure/ui/i18n/i18n.js

@@ -1,6 +1,13 @@
 const COLOR_I18N_PREFIX = "color.";
 var I18nMessages;
 (function (I18nMessages) {
+    I18nMessages["INTRO_TITLE"] = "intro.title";
+    I18nMessages["INTRO_SUBTITLE"] = "intro.subtitle";
+    I18nMessages["INTRO_DISCOUNT"] = "intro.discount";
+    I18nMessages["INTRO_BULLET_ONE"] = "intro.bullet_one";
+    I18nMessages["INTRO_BULLET_TWO"] = "intro.bullet_two";
+    I18nMessages["INTRO_BULLET_THREE"] = "intro.bullet_three";
+    I18nMessages["INTRO_BUTTON"] = "intro.button";
     I18nMessages["ITEM_SIZE"] = "item.size";
     I18nMessages["ITEM_COLOR"] = "item.color";
     I18nMessages["ITEM_UNIQUE"] = "item.unique";

package/dist/infrastructure/ui/i18n/translationEndpoint.d.ts

@@ -0,0 +1,10 @@
+import { EndpointFunction } from "@lookiero/i18n";
+interface TranslationEndpointFunctionArgs {
+    readonly translationsUrl: string;
+    readonly translationsApiKey: string;
+}
+interface TranslationEndpointFunction {
+    (args: TranslationEndpointFunctionArgs): EndpointFunction;
+}
+declare const translationEndpoint: TranslationEndpointFunction;
+export { translationEndpoint };

package/dist/infrastructure/ui/i18n/translationEndpoint.js

@@ -0,0 +1,2 @@
+const translationEndpoint = ({ translationsUrl, translationsApiKey }) => (locale) => `${translationsUrl}/${locale}?key=${translationsApiKey}&no-folding=true`;
+export { translationEndpoint };

package/dist/infrastructure/ui/routing/CheckoutMiddleware.js

@@ -6,10 +6,13 @@ import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutI
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
 import { Routes } from "./routes";
 import { useBasePath } from "./useBasePath";
 const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner, null), children }) => {
     const basePath = useBasePath();
+    const introShown = useRef(false);
+    const [shouldIntroBeShown, shouldIntroBeShownStatus] = useShouldIntroBeShown();
     const navigatedToFirstItemWithoutCustomerDecision = useRef(false);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const firstItemWithoutCustomerDecision = checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
@@ -19,6 +22,7 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
             startCheckout();
         }
     }, [checkout?.id, startCheckout]);
+    const introRouteMatch = useMatch(`${basePath}/${Routes.INTRO}`);
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
     const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
@@ -28,7 +32,8 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
     const checkoutShown = useRef(false);
     checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) || checkout;
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
+        (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout);
     if (!dependenciesLoaded) {
         return loader;
     }
@@ -49,20 +54,31 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
         !(summaryRouteMatch || itemDetailRouteMatch || checkoutRouteMatch || checkoutPaymentRouteMatch)) {
         return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
     }
-    /* Item/ItemDetail 404 - Not found */
-    if (itemRouteMatch || itemDetailRouteMatch) {
-        const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch?.params.id || itemDetailRouteMatch?.params.id);
-        if (!checkoutItem) {
-            return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
+    /* Navigate to the Intro if required */
+    if (shouldIntroBeShown && !introShown.current && firstItemWithoutCustomerDecision !== undefined) {
+        if (introRouteMatch) {
+            introShown.current = true;
+        }
+        else {
+            return React.createElement(Navigate, { to: `${basePath}/${Routes.INTRO}`, replace: true });
         }
     }
-    /* Navigate to the first item without customer's decission */
-    navigatedToFirstItemWithoutCustomerDecision.current =
-        navigatedToFirstItemWithoutCustomerDecision.current ||
-            Boolean(itemRouteMatch && itemRouteMatch.params.id === firstItemWithoutCustomerDecision?.id);
-    if (firstItemWithoutCustomerDecision && !navigatedToFirstItemWithoutCustomerDecision.current) {
-        navigatedToFirstItemWithoutCustomerDecision.current = true;
-        return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
+    else {
+        /* Item/ItemDetail 404 - Not found */
+        if (itemRouteMatch || itemDetailRouteMatch) {
+            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch?.params.id || itemDetailRouteMatch?.params.id);
+            if (!checkoutItem) {
+                return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
+            }
+        }
+        /* Navigate to the first item without customer's decission */
+        navigatedToFirstItemWithoutCustomerDecision.current =
+            navigatedToFirstItemWithoutCustomerDecision.current ||
+                Boolean(itemRouteMatch && itemRouteMatch.params.id === firstItemWithoutCustomerDecision?.id);
+        if (firstItemWithoutCustomerDecision && !navigatedToFirstItemWithoutCustomerDecision.current) {
+            navigatedToFirstItemWithoutCustomerDecision.current = true;
+            return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
+        }
     }
     return children;
 };

package/dist/infrastructure/ui/routing/Routing.js

@@ -7,6 +7,7 @@ import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddlewa
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
+const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ default: module.Intro })));
 const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
@@ -23,6 +24,11 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                             React.createElement(App, { customerId: customer?.customerId, menu: menu, tabBar: tabBar },
                                 React.createElement(Outlet, null))))))),
             children: [
+                {
+                    path: Routes.INTRO,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Intro, { customerId: customer?.customerId }))),
+                },
                 {
                     path: Routes.ITEM,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },

package/dist/infrastructure/ui/routing/routes.d.ts

@@ -1,5 +1,6 @@
 export declare enum Routes {
     HOME = "",
+    INTRO = "intro",
     ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
     SUMMARY = "summary",

package/dist/infrastructure/ui/routing/routes.js

@@ -1,6 +1,7 @@
 export var Routes;
 (function (Routes) {
     Routes["HOME"] = "";
+    Routes["INTRO"] = "intro";
     Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";

package/dist/infrastructure/ui/settings/UISettings.d.ts

@@ -1,3 +1,4 @@
 declare enum UISettings {
+    INTRO_SHOWN_COUNT = "INTRO_SHOWN_COUNT"
 }
 export { UISettings };

package/dist/infrastructure/ui/settings/UISettings.js

@@ -1,4 +1,5 @@
 var UISettings;
 (function (UISettings) {
+    UISettings["INTRO_SHOWN_COUNT"] = "INTRO_SHOWN_COUNT";
 })(UISettings || (UISettings = {}));
 export { UISettings };

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/item/components/itemActions/ItemActions.js

@@ -1,7 +1,7 @@
 import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { size } from "../../../../../../projection/shared/size";
 import { Sticky } from "../../../../../../shared/ui/components/layouts/sticky/Sticky";
@@ -18,13 +18,14 @@ const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoadin
         value: productVariant.id,
     })), [country, productVariants]);
     const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === productVariantSelected.id, [sizeSelectorOptions, productVariantSelected.id]);
+    const handleOnPressSizeSelector = useCallback(() => onSizeSelectorPress(), [onSizeSelectorPress]);
     return (React.createElement(Sticky, { onLayout: onLayout },
         React.createElement(Body, { style: { column: style.container } },
             React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),
             React.createElement(View, { style: style.row },
                 !productVariantSelected.size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
-                        onPress: onSizeSelectorPress,
-                    }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", title: sizeSelectorLabelText || "", value: productVariantSelected.id, style: {
+                        onPress: handleOnPressSizeSelector,
+                    }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", value: productVariantSelected.id, style: {
                         selectField: style.sizeSelector,
                         inputField: { input: (disabledSizeSelector || sizeSelectorDisabled) && style.inputDisabled },
                     }, onChange: onReplace })),

package/dist/projection/payment/paymentFlowPayload.d.ts

@@ -29,7 +29,7 @@ interface PaymentFlowPayloadReplacedItem extends PaymentFlowPayloadItem {
 interface PaymentFlowPayloadKeptItem extends PaymentFlowPayloadItem {
 }
 interface PaymentFlowPayloadProjection {
-    readonly bookingId: string;
+    readonly bookingId: string | undefined;
     readonly orderId: string;
     readonly comment: string;
     readonly items: (PaymentFlowPayloadKeptItem | PaymentFlowPayloadReplacedItem | PaymentFlowPayloadReturnedItem)[];

package/dist/shared/ui/components/molecules/selectField/SelectField.d.ts

@@ -13,7 +13,6 @@ interface Option {
     readonly value: string;
 }
 interface SelectFieldBaseProps {
-    readonly title?: string;
     readonly placeholder: string;
     readonly value: string | undefined;
     readonly options: Option[];

package/dist/shared/ui/components/molecules/selectField/SelectField.js

@@ -6,7 +6,7 @@ import { Modal } from "../../layouts/modal/Modal";
 import { InputField } from "../inputField/InputField";
 import { style } from "./SelectField.style";
 const { colorGrayscaleS } = theme();
-const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
+const SelectField = ({ placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
@@ -19,10 +19,8 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
         React.createElement(TouchableHighlight, { style: customStyle?.selectField, underlayColor: colorGrayscaleS, onPress: handleOnPressSelectField, ...touchableRestProps },
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
-        React.createElement(Modal, { visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
-            React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
-                title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
-                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                    React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.selectedOptionText, customStyle?.optionText] }, label))))))));
+        React.createElement(Modal, { visible: modalVisible, scroll: true, onClose: handleOnModalClose },
+            React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] }, options.map(({ label, value }) => (React.createElement(TouchableHighlight, { key: value, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: () => handleOnPressOption(value) },
+                React.createElement(Text, { level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
 };
 export { SelectField };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.d.ts

@@ -3,10 +3,6 @@ declare const style: {
         paddingBottom: number;
         paddingHorizontal: number;
     };
-    modalTitle: {
-        marginBottom: number;
-        textAlign: "center";
-    };
     option: {
         borderBottomColor: string;
         borderBottomWidth: number;
@@ -15,8 +11,5 @@ declare const style: {
     optionText: {
         lineHeight: number;
     };
-    selectedOptionText: {
-        color: string;
-    };
 };
 export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.js

@@ -1,15 +1,11 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
-const { borderSize, colorGrayscaleS, colorGrayscaleM, spaceM, spaceL, spaceXL } = theme();
+const { borderSize, colorGrayscaleS, spaceM, spaceXL } = theme();
 const style = StyleSheet.create({
     modalContent: {
         paddingBottom: spaceXL,
         paddingHorizontal: spaceXL,
     },
-    modalTitle: {
-        marginBottom: spaceL,
-        textAlign: "center",
-    },
     option: {
         borderBottomColor: colorGrayscaleS,
         borderBottomWidth: borderSize,
@@ -18,8 +14,5 @@ const style = StyleSheet.create({
     optionText: {
         lineHeight: 24,
     },
-    selectedOptionText: {
-        color: colorGrayscaleM,
-    },
 });
 export { style };

package/package.json

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