@lookiero/checkout 0.2.1 → 0.2.3

package/dist/domain/uiSetting/model/uiSetting.d.ts

@@ -1,5 +1,4 @@
-import { AggregateRoot } from "@lookiero/messaging";
-import { CommandHandlerFunction } from "@lookiero/messaging/domain/model";
+import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
 import { UpdateUiSetting } from "../command/updateUiSetting";
 interface UiSetting extends AggregateRoot {
     readonly key: string;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { EndpointFunction } from "@lookiero/i18n";
 import { FC } from "react";
 import { RootProps } from "./infrastructure/ui/Root";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
@@ -10,6 +11,7 @@ interface IsCheckoutAccessibleFunction {
 interface BootstrapFunctionArgs {
     readonly getAuthToken: () => string;
     readonly apiUrl: string;
+    readonly translations: EndpointFunction;
 }
 interface BootstrapFunctionReturn {
     readonly Root: FC<RootProps>;

package/dist/index.js

@@ -1,9 +1,15 @@
+import { fetchFetchTranslation } from "@lookiero/i18n";
+import { i18n } from "@lookiero/i18n-react";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { root } from "./infrastructure/ui/Root";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-const bootstrap = ({ apiUrl, getAuthToken }) => {
+const bootstrap = ({ apiUrl, getAuthToken, translations }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
-    const Root = root({ Messaging });
+    const I18n = i18n({
+        fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
+        contextId: "CheckoutI18n",
+    });
+    const Root = root({ Messaging, I18n });
     const isCheckoutAccessible = ({ customerId }) => queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
     return {
         Root,

package/dist/infrastructure/delivery/_mock/bootstrap.mock.js

@@ -1,9 +1,15 @@
 import { bootstrap as messagingBootstrap } from "@lookiero/messaging-react";
+import { UPDATE_UI_SETTING } from "../../../domain/uiSetting/command/updateUiSetting";
+import { updateUiSettingHandler } from "../../../domain/uiSetting/model/uiSetting";
 import { CheckoutItemStatus, viewFirstAvailableCheckoutByCustomerIdHandler, VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID, } from "../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerIdHandler, VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, } from "../../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 import { viewIsCheckoutEnabledByCustomerIdHandler, VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID, } from "../../../projection/checkout/viewIsCheckoutEnabledByCustomerId";
 import { CHECKOUT_MESSAGING_REACT_ID } from "../bootstrap";
+import { viewUiSettingByKeyHandler, VIEW_UI_SETTING_BY_KEY } from "../../../projection/uiSetting/viewUiSettingByKey";
+import { getUiSetting, saveUiSetting } from "../../domain/uiSetting/model/storageUiSettings";
+import { storageUiSettingByKeyView } from "../../projection/storageUiSettingByKeyView";
 import { startedCheckoutWithItems } from "./checkout.mock";
+import { read, write } from "../../persistence/asyncStorageStorage";
 const firstAvailableCheckoutByCustomerIdView = async () => startedCheckoutWithItems({ status: [CheckoutItemStatus.KEPT, CheckoutItemStatus.INITIAL] });
 const isCheckoutEnabledByCustomerIdView = async () => true;
 const bootstrap = () => messagingBootstrap({ id: CHECKOUT_MESSAGING_REACT_ID })
@@ -14,5 +20,12 @@ const bootstrap = () => messagingBootstrap({ id: CHECKOUT_MESSAGING_REACT_ID })
     view: isCheckoutEnabledByCustomerIdView,
 })
     .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler, {})
+    .query(VIEW_UI_SETTING_BY_KEY, viewUiSettingByKeyHandler, {
+    view: storageUiSettingByKeyView({ read }),
+})
+    .command(UPDATE_UI_SETTING, updateUiSettingHandler, {
+    get: getUiSetting({ read }),
+    save: saveUiSetting({ write }),
+})
     .build();
 export { bootstrap };

package/dist/infrastructure/delivery/bootstrap.js

@@ -1,9 +1,15 @@
 import { bootstrap as messagingBootstrap } from "@lookiero/messaging-react";
+import { UPDATE_UI_SETTING } from "../../domain/uiSetting/command/updateUiSetting";
+import { updateUiSettingHandler } from "../../domain/uiSetting/model/uiSetting";
 import { viewFirstAvailableCheckoutByCustomerIdHandler, VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID, } from "../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerIdHandler, VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, } from "../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 import { viewIsCheckoutEnabledByCustomerIdHandler, VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID, } from "../../projection/checkout/viewIsCheckoutEnabledByCustomerId";
+import { viewUiSettingByKeyHandler, VIEW_UI_SETTING_BY_KEY } from "../../projection/uiSetting/viewUiSettingByKey";
+import { getUiSetting, saveUiSetting } from "../domain/uiSetting/model/storageUiSettings";
+import { read, write } from "../persistence/asyncStorageStorage";
 import { httpFirstAvailableCheckoutByCustomerIdView } from "../projection/httpFirstAvailableCheckoutByCustomerIdView";
 import { httpIsCheckoutEnabledByCustomerIdView } from "../projection/httpIsCheckoutEnabledByCustomerIdView";
+import { storageUiSettingByKeyView } from "../projection/storageUiSettingByKeyView";
 import { fetchHttpGet, fetchHttpPost } from "./http/fetchHttpClient";
 const CHECKOUT_MESSAGING_REACT_ID = "Checkout";
 const bootstrap = ({ apiUrl, getAuthToken }) => {
@@ -17,6 +23,13 @@ const bootstrap = ({ apiUrl, getAuthToken }) => {
         view: httpIsCheckoutEnabledByCustomerIdView({ httpGet }),
     })
         .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler, {})
+        .query(VIEW_UI_SETTING_BY_KEY, viewUiSettingByKeyHandler, {
+        view: storageUiSettingByKeyView({ read }),
+    })
+        .command(UPDATE_UI_SETTING, updateUiSettingHandler, {
+        get: getUiSetting({ read }),
+        save: saveUiSetting({ write }),
+    })
         .build();
 };
 export { bootstrap, CHECKOUT_MESSAGING_REACT_ID };

package/dist/infrastructure/domain/react/useUpdateUiSetting.js

@@ -2,8 +2,9 @@ import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
 import { v4 as uuid } from "uuid";
 import { updateUiSetting } from "../../../domain/uiSetting/command/updateUiSetting";
+import { CHECKOUT_MESSAGING_REACT_ID } from "../../delivery/bootstrap";
 const useUpdateUiSetting = () => {
-    const [commandBus, status] = useCommand();
+    const [commandBus, status] = useCommand({ contextId: CHECKOUT_MESSAGING_REACT_ID });
     const update = useCallback(async ({ key, value }) => await commandBus(updateUiSetting({
         aggregateId: uuid(),
         key,

package/dist/infrastructure/projection/react/useViewUiSettingByKey.js

@@ -7,6 +7,6 @@ const useViewUiSettingByKey = ({ key }) => useQuery({
     query: viewUiSettingByKey({ key }),
     contextId: CHECKOUT_MESSAGING_REACT_ID,
     invalidation: isUiSettingUpdated,
-    options: { staleTime: Infinity, retry: false },
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
 });
 export { useViewUiSettingByKey };

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

@@ -1,7 +1,10 @@
+import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { FC } from "react";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
+    readonly I18n: I18n;
+    readonly development?: boolean;
 }
 interface RootFunction {
     (args: RootFunctionArgs): FC<RootProps>;

package/dist/infrastructure/ui/Root.js

@@ -1,23 +1,13 @@
-import { inMemoryFetchTranslation } from "@lookiero/i18n";
-import { i18n } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
-import { Spinner } from "./components/atoms/spinner/Spinner";
 import { Router } from "./routing/router/Router";
 import { Routing } from "./routing/Routing";
-const translationData = {
-    en: { intro: "Intro view's title" },
-    es: { intro: "Título de la vista Intro" },
-};
-const fetchTranslation = inMemoryFetchTranslation({ translationData });
-const I18n = i18n({ fetchTranslation, contextId: "CheckoutI18n" });
-const root = ({ Messaging }) => 
+const root = ({ Messaging, I18n, development }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
 ({ locale = "en", customerId, onNotAccessible }) => {
     const handleOnI18nError = useCallback(() => void 0, []);
-    return (React.createElement(I18n, { locale: locale, loader: React.createElement(Spinner, null), onError: handleOnI18nError },
-        React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-            React.createElement(Router, null,
-                React.createElement(Routing, { customerId: customerId, onNotAccessible: onNotAccessible })))));
+    return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
+        React.createElement(Router, null,
+            React.createElement(Routing, { onNotAccessible: onNotAccessible, customerId: customerId, locale: locale, I18n: I18n, onI18nError: development ? undefined : handleOnI18nError }))));
 };
 export { root };

package/dist/infrastructure/ui/components/layouts/body/Body.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+interface BodyProps {
+    readonly children: ReactNode;
+}
+declare const Body: FC<BodyProps>;
+export { Body };

package/dist/infrastructure/ui/components/layouts/body/Body.js

@@ -0,0 +1,10 @@
+import { Box } from "@lookiero/aurora-next/build/components/atoms/Box/Box";
+import { Layout } from "@lookiero/aurora-next/build/components/atoms/Layout/Layout";
+import React from "react";
+import { style } from "./Body.style";
+const Body = ({ children }) => (
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+React.createElement(Layout, { style: style.layout },
+    React.createElement(Box, { size: { M: "2/3", L: "1/3" }, style: style.box }, children)));
+export { Body };

package/dist/infrastructure/ui/components/layouts/body/Body.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    layout: {
+        flex: number;
+        justifyContent: "center";
+        padding: number;
+        textAlign: "center";
+    };
+    box: {
+        height: string;
+        justifyContent: "space-between";
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/layouts/body/Body.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    layout: {
+        flex: 1,
+        justifyContent: "center",
+        padding: spaceXL,
+        textAlign: "center",
+    },
+    box: {
+        height: "100%",
+        justifyContent: "space-between",
+    },
+});
+export { style };

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

@@ -0,0 +1,10 @@
+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"
+}
+export { I18nMessages };

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

@@ -0,0 +1,11 @@
+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 || (I18nMessages = {}));
+export { I18nMessages };

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

@@ -1,7 +1,11 @@
+import { I18n } from "@lookiero/i18n-react";
 import { FC } from "react";
 interface RoutingProps {
-    readonly customerId: string | undefined;
     readonly onNotAccessible: () => void;
+    readonly customerId: string | undefined;
+    readonly locale: string;
+    readonly I18n: I18n;
+    readonly onI18nError?: (err: Error) => void;
 }
 declare const Routing: FC<RoutingProps>;
 export { Routing };

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

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from "react";
-import { Navigate, useRoutes } from "react-router-native";
+import { Navigate, Outlet, useRoutes } from "react-router-native";
 import { Spinner } from "../components/atoms/spinner/Spinner";
 import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
@@ -7,30 +7,35 @@ import { Routes } from "./routes";
 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 Routing = ({ customerId, onNotAccessible }) => {
+const Routing = ({ onNotAccessible, customerId, locale, I18n, onI18nError }) => {
     const routes = useRoutes([
         {
             path: Routes.CHECKOUT,
             element: React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible }),
             children: [
                 {
-                    path: Routes.CHECKOUT,
-                    element: React.createElement(CheckoutMiddleware, { customerId: customerId }),
+                    element: (React.createElement(I18n, { locale: locale, loader: React.createElement(Spinner, null), onError: onI18nError },
+                        React.createElement(Outlet, null))),
                     children: [
                         {
-                            path: Routes.INTRO,
-                            element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                                React.createElement(Intro, null))),
-                        },
-                        {
-                            path: Routes.ITEM,
-                            element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                                React.createElement(Item, null))),
-                        },
-                        {
-                            path: Routes.SUMMARY,
-                            element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                                React.createElement(Summary, null))),
+                            element: React.createElement(CheckoutMiddleware, { customerId: customerId }),
+                            children: [
+                                {
+                                    path: Routes.INTRO,
+                                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                                        React.createElement(Intro, null))),
+                                },
+                                {
+                                    path: Routes.ITEM,
+                                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                                        React.createElement(Item, null))),
+                                },
+                                {
+                                    path: Routes.SUMMARY,
+                                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                                        React.createElement(Summary, null))),
+                                },
+                            ],
                         },
                     ],
                 },

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

@@ -0,0 +1,10 @@
+import { DefaultTheme } from "@lookiero/aurora-next/build/theming/theme.default";
+declare type Remove$PrefixFromKeys<T> = {
+    [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
+};
+declare type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
+interface ThemeFunction {
+    (): AuroraTheme;
+}
+declare const theme: ThemeFunction;
+export { theme };

package/dist/infrastructure/ui/theme/theme.js

@@ -0,0 +1,5 @@
+import { Theme } from "@lookiero/aurora-next/build/theming/Theme";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const theme = () => Theme.get();
+export { theme };

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

@@ -1,18 +1,40 @@
+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 React from "react";
-import { StyleSheet, View } from "react-native";
+import { CommandStatus } from "@lookiero/messaging-react";
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { useSetCheckoutIntroShown } from "../../../domain/react/useSetCheckoutIntroShown";
+import { Body } from "../../components/layouts/body/Body";
+import { I18nMessages } from "../../i18n/i18n";
+import { styles } from "./Intro.style";
+const Bullet = ({ text }) => (React.createElement(View, { style: styles.bullet },
+    React.createElement(Icon, { name: "rounded-tick", style: styles.tickIcon }),
+    React.createElement(Text, { detail: true, level: 2 }, text)));
 const Intro = () => {
-    const introText = useI18nMessage({ id: "intro" });
-    return (React.createElement(View, { style: styles.container },
-        React.createElement(Text, { heading: true, level: 3 }, introText)));
+    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 { setCheckoutIntroShown, status: setCheckoutIntroShownStatus } = useSetCheckoutIntroShown();
+    const handleOnPress = useCallback(() => setCheckoutIntroShown(), [setCheckoutIntroShown]);
+    return (React.createElement(Body, null,
+        React.createElement(View, null,
+            React.createElement(Text, { heading: true, level: 3, style: styles.title }, titleText),
+            React.createElement(Text, { body: true, level: 3 }, subTitleText),
+            React.createElement(View, { style: styles.discountContainer },
+                React.createElement(View, { style: styles.discount },
+                    React.createElement(Text, { heading: true, level: 2 }, "- 25"),
+                    React.createElement(Text, { heading: true, level: 3, style: styles.percentage }, "%")),
+                React.createElement(Text, { body: true, level: 3 }, discountText)),
+            React.createElement(View, { style: styles.description },
+                React.createElement(Bullet, { text: bulletOneText }),
+                React.createElement(Bullet, { text: bulletTwoText }),
+                React.createElement(Bullet, { text: bulletThreeText }))),
+        React.createElement(Button, { disabled: setCheckoutIntroShownStatus === CommandStatus.LOADING, onPress: handleOnPress }, buttonText)));
 };
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
 export { Intro };

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

@@ -0,0 +1,34 @@
+declare const styles: {
+    title: {
+        marginBottom: number;
+    };
+    discountContainer: {
+        backgroundColor: string;
+        marginVertical: number;
+        padding: number;
+        width: string;
+    };
+    discount: {
+        alignItems: "flex-end";
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+    };
+    percentage: {
+        marginLeft: number;
+    };
+    description: {
+        borderWidth: number;
+        marginBottom: number;
+        padding: number;
+        width: string;
+    };
+    bullet: {
+        flexDirection: "row";
+        marginVertical: number;
+    };
+    tickIcon: {
+        marginRight: number;
+    };
+};
+export { styles };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -21,8 +21,8 @@
     "test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent"
   },
   "dependencies": {
-    "@lookiero/i18n": "^0.7.0",
-    "@lookiero/i18n-react": "^0.7.0",
+    "@lookiero/i18n": "^0.7.2",
+    "@lookiero/i18n-react": "^0.7.2",
     "@lookiero/messaging": "^6.2.1",
     "@lookiero/messaging-react": "^6.2.1",
     "react-router-dom": "^6.3.0",