@lookiero/checkout 0.3.5 → 0.3.7

package/README.md

@@ -29,6 +29,7 @@ Once we can replace the build of Jenkins for NPM one, we are going to be able to
   "dependencies": {
     (...)
     "@expo/dev-server": "0.1.120",
+    "inline-style-prefixer": "6.0.1",
     (...)
   },
   "devDependencies": {

package/dist/package.json

@@ -0,0 +1,116 @@
+{
+    "name": "@lookiero/checkout",
+    "version": "0.3.7",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "engines": {
+        "node": "^14.20.0 || ^16.13.0 || ^18.9.0"
+    },
+    "scripts": {
+        "start": "expo start",
+        "android": "expo start --android",
+        "ios": "expo start --ios",
+        "web": "expo start --web",
+        "export-analyze-web": "BUNDLE_ANALYZE=true NODE_ENV=production expo export:web",
+        "build": "tsc -b tsconfig.build.json",
+        "build:app": "tsc -p ./tsconfig.build-app.json --noemit && ENTRY_POINT='./src/Expo.tsx' NODE_ENV=production expo export:web --clear",
+        "lint": "eslint --fix --cache --cache-location ./node_modules/.cache/.eslintcache --ext ts,tsx .",
+        "format": "prettier --write \"**/*.+(json|css|ts|tsx|md)\"",
+        "test": "tsc -p ./tsconfig.test.json --noemit && jest",
+        "test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
+        "test:contract": "TEST_ENV=CONTRACT jest --coverage false --detectOpenHandles --testMatch \"**/?(*.)+(pact).ts\" --testTimeout=3000  --watchAll=false --forceExit",
+        "publish:contract": "BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) node pact.publish.js",
+        "prepare": "husky install"
+    },
+    "dependencies": {
+        "@expo/dev-server": "0.1.120",
+        "@gorhom/portal": "^1.0.14",
+        "@lookiero/i18n": "^0.8.1",
+        "@lookiero/i18n-react": "^0.8.1",
+        "@lookiero/messaging": "^8.0.0",
+        "@lookiero/messaging-react": "^8.0.0",
+        "@react-spring/native": "^9.5.5",
+        "inline-style-prefixer": "6.0.1",
+        "react-native-safe-area-context": "^4.4.1",
+        "react-native-svg": "12.3.0",
+        "tiny-invariant": "^1.2.0",
+        "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "@lookiero/aurora-fonts": "^1.0.6",
+        "@lookiero/aurora-iconfont": "^2.0.37",
+        "@lookiero/aurora-next": "^3.0.185",
+        "@lookiero/data-sources": "^0.3",
+        "@lookiero/event": "^0.3",
+        "@lookiero/locale": "^0.3",
+        "@lookiero/payments-front": "^0.16.3",
+        "apollo-boost": "0.4.4",
+        "graphql": "14.5.8",
+        "graphql-tag": "2.10.1",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-native": "^0.70.1",
+        "react-native-web": "^0.18.9",
+        "react-router-dom": "^6.4.2",
+        "react-router-native": "^6.4.2"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.19.1",
+        "@expo/webpack-config": "^0.17.2",
+        "@lookiero/aurora-fonts": "^1.0.6",
+        "@lookiero/aurora-iconfont": "^2.0.37",
+        "@lookiero/aurora-next": "^3.0.185",
+        "@lookiero/data-sources": "^0.3",
+        "@lookiero/event": "^0.3",
+        "@lookiero/locale": "^0.3",
+        "@lookiero/payments-front": "^0.16.3",
+        "@pact-foundation/pact": "^10.1.4",
+        "@pact-foundation/pact-node": "^10.17.6",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/react-native": "^11.0.0",
+        "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+        "@types/jest": "^29.1.0",
+        "@types/react": "~18.0.0",
+        "@types/react-dom": "~18.0.0",
+        "@types/react-native": "~0.69.1",
+        "@types/uuid": "^8.3.4",
+        "apollo-boost": "0.4.4",
+        "eslint": "^8.24.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.8",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-native": "^4.0.0",
+        "expo": "~46.0.8",
+        "expo-status-bar": "~1.4.0",
+        "graphql": "14.5.8",
+        "graphql-tag": "2.10.1",
+        "husky": "^8.0.1",
+        "jest": "^29.1.1",
+        "jest-expo": "^46.0.1",
+        "jest-fetch-mock": "^3.0.3",
+        "jest-mock-extended": "^2.0.7",
+        "lint-staged": "^13.0.3",
+        "pino-std-serializers": "^6.0.0",
+        "prettier": "^2.7.1",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-native": "^0.70.1",
+        "react-native-get-random-values": "^1.8.0",
+        "react-native-unimodules": "^0.14.10",
+        "react-native-web": "^0.18.9",
+        "react-router-dom": "^6.4.2",
+        "react-router-native": "^6.4.2",
+        "react-test-renderer": "^18.0.0",
+        "typescript": "^4.6.3",
+        "webpack-bundle-analyzer": "^4.6.1"
+    }
+}

package/dist/src/ExpoRoot.d.ts

@@ -0,0 +1,5 @@
+import "expo/build/Expo.fx";
+import { FC } from "react";
+import "react-native-get-random-values";
+declare const ExpoRoot: FC;
+export { ExpoRoot };

package/dist/src/ExpoRoot.js

@@ -0,0 +1,94 @@
+import { Aurora } from "@lookiero/aurora-next/build/components/primitives/Aurora/Aurora";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { fetchFetchTranslation } from "@lookiero/i18n";
+import { i18n } from "@lookiero/i18n-react";
+import { setPaymentsBridge } from "@lookiero/payments-front";
+import { useFonts } from "expo-font";
+import "expo/build/Expo.fx";
+import React, { useCallback, useState } from "react";
+import { Platform, StatusBar } from "react-native";
+import "react-native-get-random-values";
+import { version } from "../package.json";
+// import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
+import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
+import { root } from "./infrastructure/ui/Root";
+import { Router } from "./infrastructure/ui/routing/router/Router";
+import { notificationsRoot } from "./shared/notifications";
+const apiUrl = Platform.OS !== "web" ? "https://web2.ps.dev.aws.lookiero.es/checkout/api" : __DEV__ ? "/local-to-dev" : "/api";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIwOTUxNjAsImV4cCI6MTY2OTM5MTY3MCwiZGlzcGxheU5hbWUiOiJBbGV4YW5kZXIiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyMC0wOS0wMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJjZjdjNjQxZi0wZTVjLTQ4NTAtYWUwNy0yNzY3NDdlZGZkMGIiLCJpYXQiOjE2NjY3MTMyNzB9.KaEZc8M5N9TWg6flwUMx7O14DW-u4oTWFzYm23RaL9c";
+const translationsUrl = Platform.OS !== "web" ? "https://web2.ps.dev.aws.lookiero.es/checkout/i18n" : __DEV__ ? "/local-to-i18n" : "/i18n";
+const translationsApiKey = "f2AfMGaPCZGVbAFWz_OV4GWhBDG_NbZJ";
+const translations = (locale) => `${translationsUrl}/${locale}?key=${translationsApiKey}&no-folding=true`;
+setPaymentsBridge({
+    getToken: () => Promise.resolve(authToken),
+    stripeKey: "pk_test_6dwdUfkUm7AaUH3oSje9H0kk",
+    stripeUkKey: "pk_test_51Jw6NEHQ1gSUXaQ8KKBLBhmzw7k0TCTN0GQ6qq8oGRmXCn09ptn7zrHX5jsyidv8iBDGuzUDV3R0fko01m5oJzMO00z6XmoLbn",
+    commonAssetsPath: "https://cdn.dev.envs.lookiero.tech/commons",
+    paymentsAssetsPath: "https://cdn.dev.envs.lookiero.tech/payments-front",
+    iOSInAppBrowserBannerHeight: 70,
+    useAvoidKeyboard: () => ({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        setAvoidKeyboard: (state) => console.log("setAvoidKeyboard: ", state),
+    }),
+    emitTrackingEvent: (e) => {
+        console.log("Tracking Payment event", e);
+    },
+    appVersion: version,
+    googlePay: {
+        merchant: {
+            merchantId: "0123456789",
+            merchantName: "Lookiero",
+        },
+        isTestEnv: true,
+    },
+    useFeatureFlags: () => ({
+        /* eslint-disable @typescript-eslint/naming-convention */
+        ALLOW_GOOGLE_PAY_AT: true,
+        ALLOW_GOOGLE_PAY_BE: true,
+        ALLOW_GOOGLE_PAY_DE: true,
+        ALLOW_GOOGLE_PAY_ES: true,
+        ALLOW_GOOGLE_PAY_FR: true,
+        ALLOW_GOOGLE_PAY_GB: true,
+        ALLOW_GOOGLE_PAY_IT: true,
+        ALLOW_GOOGLE_PAY_LU: true,
+        ALLOW_GOOGLE_PAY_NL: true,
+        ALLOW_GOOGLE_PAY_PT: true,
+        ALLOW_GOOGLE_PAY_APP_AT: true,
+        ALLOW_GOOGLE_PAY_APP_BE: true,
+        ALLOW_GOOGLE_PAY_APP_DE: true,
+        ALLOW_GOOGLE_PAY_APP_ES: true,
+        ALLOW_GOOGLE_PAY_APP_FR: true,
+        ALLOW_GOOGLE_PAY_APP_GB: true,
+        ALLOW_GOOGLE_PAY_APP_IT: true,
+        ALLOW_GOOGLE_PAY_APP_LU: true,
+        ALLOW_GOOGLE_PAY_APP_NL: true,
+        ALLOW_GOOGLE_PAY_APP_PT: true,
+        /* eslint-enable @typescript-eslint/naming-convention */
+    }),
+});
+// const { Component: Messaging } = checkoutMockBootstrap();
+const { Component: Messaging } = checkoutBootstrap({ apiUrl, authToken });
+const I18n = i18n({
+    fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
+    contextId: "CheckoutI18n",
+});
+const Notifications = notificationsRoot();
+const Root = root({ Messaging, I18n, Notifications, authToken, development: false });
+const ExpoRoot = () => {
+    const [fontsLoaded] = useFonts({
+        ["Romie-Regular"]: require("@lookiero/aurora-fonts/Romie-Regular.ttf"),
+        ["FoundersGroteskText-Regular"]: require("@lookiero/aurora-fonts/FoundersGroteskText-Regular.ttf"),
+        ["Canela-Light"]: require("@lookiero/aurora-fonts/Canela-Light.ttf"),
+        auroraicons: require("@lookiero/aurora-iconfont/dist/auroraicons.ttf"),
+    });
+    const [isAccessible, setIsAccessible] = useState();
+    const onNotAccessible = useCallback(() => setIsAccessible(false), []);
+    return fontsLoaded ? (React.createElement(React.Fragment, null,
+        React.createElement(Aurora, { useStack: false },
+            isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
+            React.createElement(Router, null,
+                React.createElement(Root, { basePath: "", customerId: "cf7c641f-0e5c-4850-ae07-276747edfd0b", locale: "es", onNotAccessible: onNotAccessible }))),
+        React.createElement(StatusBar, null))) : null;
+};
+export { ExpoRoot };

package/dist/{index.d.ts → src/index.d.ts}

@@ -18,7 +18,7 @@ interface BootstrapFunctionReturn {
     readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
 }
 interface BootstrapFunction {
-    (args: BootstrapFunctionArgs): BootstrapFunctionReturn;
+    (args: BootstrapFunctionArgs): Promise<BootstrapFunctionReturn>;
 }
 declare const bootstrap: BootstrapFunction;
 export { bootstrap };

package/dist/{index.js → src/index.js}

@@ -3,13 +3,16 @@ 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, translations }) => {
-    const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
+import { notificationsRoot } from "./shared/notifications";
+const bootstrap = async ({ apiUrl, getAuthToken, translations }) => {
+    const authToken = await getAuthToken();
+    const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, authToken });
     const I18n = i18n({
         fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
         contextId: "CheckoutI18n",
     });
-    const Root = root({ Messaging, I18n });
+    const Notifications = notificationsRoot();
+    const Root = root({ Messaging, I18n, Notifications, authToken });
     const isCheckoutAccessible = ({ customerId }) => queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
     return {
         Root,

package/dist/{infrastructure → src/infrastructure}/delivery/bootstrap.d.ts

@@ -1,6 +1,6 @@
 import { BuildBootstrapFunctionReturn } from "@lookiero/messaging-react";
 interface BootstrapFunctionArgs {
-    readonly getAuthToken: () => Promise<string>;
+    readonly authToken: string;
     readonly apiUrl: string;
 }
 interface BootstrapFunction {

package/dist/{infrastructure → src/infrastructure}/delivery/bootstrap.js

@@ -15,9 +15,9 @@ import { httpReturnQuestionsByCheckoutItemIdView } from "../projection/returnQue
 import { storageUiSettingByKeyView } from "../projection/uiSetting/storageUiSettingByKeyView";
 import { baseBootstrap } from "./baseBootstrap";
 import { fetchHttpGet, fetchHttpPost } from "./http/fetchHttpClient";
-const bootstrap = ({ apiUrl, getAuthToken }) => {
-    const httpGet = fetchHttpGet({ apiUrl, getAuthToken });
-    const httpPost = fetchHttpPost({ apiUrl, getAuthToken });
+const bootstrap = ({ apiUrl, authToken }) => {
+    const httpGet = fetchHttpGet({ apiUrl, authToken });
+    const httpPost = fetchHttpPost({ apiUrl, authToken });
     return baseBootstrap({
         checkoutByIdView: httpCheckoutByIdView({ httpPost }),
         firstAvailableCheckoutByCustomerIdView: httpFirstAvailableCheckoutByCustomerIdView({ httpPost }),

package/dist/{infrastructure → src/infrastructure}/delivery/http/fetchHttpClient.d.ts

@@ -1,7 +1,7 @@
 import { HttpGetFunction, HttpPostFunction } from "./httpClient";
 interface FetchHttpFunctionArgs {
     readonly apiUrl: string;
-    readonly getAuthToken: () => Promise<string>;
+    readonly authToken: string;
 }
 interface FetchHttpPostFunction {
     (args: FetchHttpFunctionArgs): HttpPostFunction;

package/dist/src/infrastructure/delivery/http/fetchHttpClient.js

@@ -0,0 +1,20 @@
+const fetchHttpPost = ({ apiUrl, authToken }) => async ({ endpoint, body, signal }) => fetch(`${apiUrl}${endpoint}`, {
+    method: "POST",
+    headers: {
+        ["Content-Type"]: "application/json",
+        authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify(body),
+    signal,
+});
+const fetchHttpGet = ({ apiUrl, authToken }) => async ({ endpoint, signal }) => fetch(`${apiUrl}${endpoint}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+        Authorization: `Bearer ${authToken}`,
+        ["Content-Type"]: "application/json",
+    },
+    referrer: "",
+    signal,
+});
+export { fetchHttpGet, fetchHttpPost };

package/dist/{infrastructure → src/infrastructure}/domain/checkout/react/useMarkCheckoutAsPaid.d.ts

@@ -1,10 +1,10 @@
 import { CommandStatus } from "@lookiero/messaging-react";
 interface MarkAsPaidFunction {
-    (): Promise<void>;
+    (): void;
 }
 declare type UseMarkCheckoutAsPaid = [markAsPaid: MarkAsPaidFunction, status: CommandStatus];
 interface UseMarkCheckoutAsPaidFunctionArgs {
-    readonly checkoutId: string;
+    readonly checkoutId?: string;
 }
 interface UseMarkCheckoutAsPaidFunction {
     (args: UseMarkCheckoutAsPaidFunctionArgs): UseMarkCheckoutAsPaid;

package/dist/{infrastructure → src/infrastructure}/domain/checkout/react/useMarkCheckoutAsPaid.js

@@ -1,12 +1,16 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { markCheckoutAsPaid } from "../../../../domain/checkout/command/markCheckoutAsPaid";
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useMarkCheckoutAsPaid = ({ checkoutId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const markAsPaid = useCallback(() => commandBus(markCheckoutAsPaid({
-        aggregateId: checkoutId,
-    })), [checkoutId, commandBus]);
+    const markAsPaid = useCallback(() => {
+        invariant(checkoutId, "CheckoutId must be defined in order to mark the checkout as paid");
+        commandBus(markCheckoutAsPaid({
+            aggregateId: checkoutId,
+        }));
+    }, [checkoutId, commandBus]);
     return [markAsPaid, status];
 };
 export { useMarkCheckoutAsPaid };

package/dist/{infrastructure → src/infrastructure}/projection/payment/react/useViewPaymentFlowPayloadByCheckoutId.d.ts

@@ -1,7 +1,7 @@
 import { UseQueryFunctionResult } from "@lookiero/messaging-react";
 import { PaymentFlowPayloadProjection } from "../../../../projection/payment/paymentFlowPayload";
 interface UseViewPaymentFlowPayloadByCheckoutIdFunctionArgs {
-    readonly checkoutId: string;
+    readonly checkoutId?: string;
 }
 interface UseViewPaymentFlowPayloadByCheckoutIdFunction {
     (args: UseViewPaymentFlowPayloadByCheckoutIdFunctionArgs): UseQueryFunctionResult<PaymentFlowPayloadProjection>;

package/dist/{infrastructure → src/infrastructure}/projection/payment/react/useViewPaymentFlowPayloadByCheckoutId.js

@@ -9,9 +9,9 @@ const isCheckoutItemReturned = (event) => event.name === CHECKOUT_ITEM_RETURNED;
 const isCheckoutItemReplaced = (event) => event.name === CHECKOUT_ITEM_REPLACED;
 const shouldInvalidate = (event) => isCheckoutItemKept(event) || isCheckoutItemReplaced(event) || isCheckoutItemReturned(event);
 const useViewPaymentFlowPayloadByCheckoutId = ({ checkoutId }) => useQuery({
-    query: viewPaymentFlowPayloadByCheckoutId({ checkoutId }),
+    query: viewPaymentFlowPayloadByCheckoutId({ checkoutId: checkoutId }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
-    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false, enabled: Boolean(checkoutId) },
 });
 export { useViewPaymentFlowPayloadByCheckoutId };

package/dist/{infrastructure → src/infrastructure}/ui/Root.d.ts

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

package/dist/{infrastructure → src/infrastructure}/ui/Root.js

@@ -1,11 +1,12 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, development }) => 
+const root = ({ Messaging, I18n, Notifications, authToken, development }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
 ({ basePath, locale = "en", customerId, onNotAccessible }) => {
     const handleOnI18nError = useCallback(() => void 0, []);
     return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-        React.createElement(Routing, { I18n: I18n, basePath: basePath, customerId: customerId, locale: locale, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+        React.createElement(Notifications, { includeReactQueryDevTools: Platform.OS === "web" },
+            React.createElement(Routing, { I18n: I18n, authToken: authToken, basePath: basePath, customerId: customerId, locale: locale, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
 };
 export { root };

package/dist/{infrastructure → src/infrastructure}/ui/components/layouts/body/Body.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Column } from "../../../shared/components/layouts/column/Column";
-import { Row } from "../../../shared/components/layouts/row/Row";
+import { Column } from "../../../../../shared/ui/components/layouts/column/Column";
+import { Row } from "../../../../../shared/ui/components/layouts/row/Row";
 import { style } from "./Body.style";
 const Body = ({ children, style: customStyle }) => (React.createElement(Row, { style: [style.row, customStyle?.row] },
     React.createElement(Column, { style: customStyle?.column }, children)));

package/dist/{infrastructure → src/infrastructure}/ui/components/layouts/tabs/Tabs.js

@@ -3,7 +3,7 @@ import { animated, useSpring } from "@react-spring/native";
 import React, { Children, useCallback, useState } from "react";
 import { Pressable, View } from "react-native";
 import invariant from "tiny-invariant";
-import { Slider } from "../../../shared/components/layouts/slider/Slider";
+import { Slider } from "../../../../../shared/ui/components/layouts/slider/Slider";
 import { style } from "./Tabs.style";
 const Tab = ({ children, active, disabled = false, style: customStyle, onPress, onLayout }) => (React.createElement(Pressable, { disabled: disabled, style: [style.tab, customStyle?.tab], testID: "tab", onLayout: onLayout, onPress: onPress },
     React.createElement(Text, { level: 2, style: [style.tabText, active && style.tabActiveText, customStyle?.tabText], detail: true }, children)));

package/dist/{infrastructure → src/infrastructure}/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -1,10 +1,10 @@
 import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
+import { Modal } from "../../../../../../../shared/ui/components/layouts/modal/Modal";
+import { ButtonIcon } from "../../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
-import { Modal } from "../../../../../shared/components/layouts/modal/Modal";
-import { ButtonIcon } from "../../../../../shared/components/molecules/buttonIcon/ButtonIcon";
-import { InputField } from "../../../../../shared/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";

package/dist/{infrastructure → src/infrastructure}/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,7 +1,7 @@
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
-import { InputField } from "../../../../../shared/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {

package/dist/{infrastructure → src/infrastructure}/ui/i18n/i18n.d.ts

@@ -48,6 +48,13 @@ declare enum I18nMessages {
     SUMMARY_TOTAL_ITEMS_KEPT = "summary.total_items_kept",
     SUMMARY_CREDIT = "summary.credit",
     SUMMARY_FEE = "summary.fee",
-    PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change"
+    PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
+    CHECKOUT_TITLE = "checkout.title",
+    CHECKOUT_PAY_BUTTON = "checkout.pay_button",
+    CHECKOUT_TOAST_REJECTED = "checkout.toast_rejected",
+    CHECKOUT_TOAST_ERROR = "checkout.toast_error",
+    CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
+    CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
+    CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button"
 }
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/{infrastructure → src/infrastructure}/ui/i18n/i18n.js

@@ -50,5 +50,12 @@ var I18nMessages;
     I18nMessages["SUMMARY_CREDIT"] = "summary.credit";
     I18nMessages["SUMMARY_FEE"] = "summary.fee";
     I18nMessages["PRODUCT_VARIANT_SIZE_CHANGE"] = "product_variant.size_change";
+    I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
+    I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
+    I18nMessages["CHECKOUT_TOAST_REJECTED"] = "checkout.toast_rejected";
+    I18nMessages["CHECKOUT_TOAST_ERROR"] = "checkout.toast_error";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_DESCRIPTION"] = "checkout.success_modal_description";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_BUTTON"] = "checkout.success_modal_button";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/{infrastructure → src/infrastructure}/ui/routing/CheckoutAccessibilityMiddleware.js

@@ -1,7 +1,7 @@
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useEffect, useRef } from "react";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
 const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
     const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
     const onNotAccessibleRef = useRef(onNotAccessible);

package/dist/{infrastructure → src/infrastructure}/ui/routing/CheckoutMiddleware.js

@@ -2,9 +2,9 @@ import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useRef } from "react";
 import { generatePath, Navigate, useMatch } from "react-router-native";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
 import { Routes } from "./routes";
 const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement(Spinner, null), children }) => {
     const introShown = useRef(false);
@@ -15,12 +15,16 @@ const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
     const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
+    const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
         dependenciesLoadedStatuses.includes(checkoutStatus);
     if (!dependenciesLoaded) {
         return loader;
     }
+    if (checkoutRouteMatch) {
+        return children;
+    }
     if (shouldIntroBeShown && !introShown.current) {
         if (introRouteMatch) {
             introShown.current = true;

package/dist/{infrastructure → src/infrastructure}/ui/routing/Routing.d.ts

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

package/dist/{infrastructure → src/infrastructure}/ui/routing/Routing.js

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import { Navigate, Outlet, useRoutes } from "react-router-native";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { App } from "../views/App";
 import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
@@ -8,7 +8,8 @@ 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 = ({ basePath = "", onNotAccessible, customerId, locale, I18n, onI18nError }) => {
+const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
+const Routing = ({ basePath = "", customerId, locale, I18n, authToken, onI18nError, onNotAccessible, }) => {
     const routes = useRoutes([
         {
             path: "",
@@ -38,6 +39,11 @@ const Routing = ({ basePath = "", onNotAccessible, customerId, locale, I18n, onI
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Summary, { customerId: customerId }))),
                 },
+                {
+                    path: Routes.CHECKOUT,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Checkout, { authToken: authToken, customerId: customerId }))),
+                },
                 {
                     path: "*",
                     element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),

package/dist/{infrastructure → src/infrastructure}/ui/routing/routes.d.ts

@@ -3,5 +3,7 @@ export declare enum Routes {
     INTRO = "intro",
     ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
-    SUMMARY = "summary"
+    SUMMARY = "summary",
+    CHECKOUT = "checkout",
+    FEEDBACK = "feedback"
 }

package/dist/{infrastructure → src/infrastructure}/ui/routing/routes.js

@@ -5,4 +5,6 @@ export var Routes;
     Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";
+    Routes["CHECKOUT"] = "checkout";
+    Routes["FEEDBACK"] = "feedback";
 })(Routes || (Routes = {}));

package/dist/{infrastructure → src/infrastructure}/ui/views/App.js

@@ -1,6 +1,8 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
 const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
+    React.createElement(Notifications, null),
     React.createElement(PortalProvider, null, children)));
 export { App };

package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface CheckoutProps {
+    readonly customerId: string;
+    readonly authToken: string;
+}
+declare const Checkout: FC<CheckoutProps>;
+export { Checkout };