@lookiero/checkout 0.2.16 → 0.2.17

package/README.md

@@ -5,7 +5,7 @@
 
 ## 💡 Prerequisites
 
-- Node.js ^14.20.0 | ^18.9.0
+- Node.js ^14.20.0 || ^18.9.0
 - NPM >= 8
 
 ## 🚀 Getting Started

package/dist/infrastructure/domain/checkoutBooking/react/useBookSizeReplaceableProductVariantsForCheckoutItem.d.ts

@@ -1,5 +1,4 @@
 import { CommandStatus } from "@lookiero/messaging-react";
-import "react-native-get-random-values";
 interface BookFunction {
     (): Promise<void>;
 }

package/dist/infrastructure/domain/checkoutBooking/react/useBookSizeReplaceableProductVariantsForCheckoutItem.js

@@ -1,6 +1,5 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
-import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { bookSizeReplaceableProductVariantsForCheckoutItem } from "../../../../domain/checkoutBooking/command/bookSizeReplaceableProductVariantsForCheckoutItem";
 const useBookSizeReplaceableProductVariantsForCheckoutItem = ({ checkoutId, checkoutItemId, checkoutBookingId }) => {

package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.d.ts

@@ -1,5 +1,4 @@
 import { CommandStatus } from "@lookiero/messaging-react";
-import "react-native-get-random-values";
 interface UpdateFunctionArgs {
     readonly key: string;
     readonly value: unknown;

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

@@ -1,6 +1,5 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
-import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { updateUiSetting } from "../../../../domain/uiSetting/command/updateUiSetting";
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";

package/dist/infrastructure/projection/checkout/checkout.mock.d.ts

@@ -1,4 +1,3 @@
-import "react-native-get-random-values";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutProjection } from "../../../projection/checkout/checkout";
 import { CheckoutDto } from "./checkout";

package/dist/infrastructure/projection/checkout/checkout.mock.js

@@ -1,4 +1,3 @@
-import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
 import { checkoutItemDto } from "../checkoutItem/checkoutItem.mock";

package/dist/infrastructure/projection/checkoutItem/checkoutItem.mock.d.ts

@@ -1,4 +1,3 @@
-import "react-native-get-random-values";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutItemProjection } from "../../../projection/checkoutItem/checkoutItem";
 import { CheckoutItemDto } from "./checkoutItem";

package/dist/infrastructure/projection/checkoutItem/checkoutItem.mock.js

@@ -1,4 +1,3 @@
-import "react-native-get-random-values";
 import { v4 as uuid } from "uuid";
 import { Currency, MediaPerspective } from "../../../projection/checkoutItem/checkoutItem";
 import { toCheckoutItemProjection } from "./checkoutItem";

package/dist/infrastructure/ui/components/atoms/modal/Modal.style.d.ts

@@ -2,12 +2,10 @@ declare const style: {
     centeredView: {
         flex: number;
         justifyContent: "center";
-        alignItems: "center";
         backgroundColor: string;
         paddingHorizontal: number;
     };
     modalView: {
-        alignItems: "center";
         backgroundColor: string;
         padding: number;
         shadowColor: string;

package/dist/infrastructure/ui/components/atoms/modal/Modal.style.js

@@ -5,12 +5,10 @@ const style = StyleSheet.create({
     centeredView: {
         flex: 1,
         justifyContent: "center",
-        alignItems: "center",
         backgroundColor: colorOverlay,
         paddingHorizontal: spaceXL,
     },
     modalView: {
-        alignItems: "center",
         backgroundColor: colorBase,
         padding: spaceXL,
         shadowColor: colorContent,

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

@@ -1,3 +1,4 @@
+declare const COLOR_I18N_PREFIX = "color.";
 declare enum I18nMessages {
     INTRO_TITLE = "intro.title",
     INTRO_SUBTITLE = "intro.subtitle",
@@ -18,6 +19,13 @@ declare enum I18nMessages {
     ITEM_BANNER_BUTTON = "item.banner_button",
     SIZE_CHANGE_MODAL_TITLE = "size_change_modal.title",
     SIZE_CHANGE_MODAL_DESCRIPTION = "size_change_modal.description",
-    SIZE_CHANGE_MODAL_BUTTON = "size_change_modal.button"
+    SIZE_CHANGE_MODAL_BUTTON = "size_change_modal.button",
+    SIZE_WITHOUT_STOCK_MODAL_TITLE = "size_without_stock_modal.title",
+    SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION = "size_without_stock_modal.description",
+    SIZE_WITHOUT_STOCK_MODAL_BUTTON = "size_without_stock_modal.button",
+    GET_OUT_OF_CHECKOUT_MODAL_TITLE = "get_out_of_checkout_modal.title",
+    GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION = "get_out_of_checkout_modal.description",
+    GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
+    GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button"
 }
-export { I18nMessages };
+export { I18nMessages, COLOR_I18N_PREFIX };

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

@@ -1,3 +1,4 @@
+const COLOR_I18N_PREFIX = "color.";
 var I18nMessages;
 (function (I18nMessages) {
     I18nMessages["INTRO_TITLE"] = "intro.title";
@@ -20,5 +21,12 @@ var I18nMessages;
     I18nMessages["SIZE_CHANGE_MODAL_TITLE"] = "size_change_modal.title";
     I18nMessages["SIZE_CHANGE_MODAL_DESCRIPTION"] = "size_change_modal.description";
     I18nMessages["SIZE_CHANGE_MODAL_BUTTON"] = "size_change_modal.button";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_TITLE"] = "size_without_stock_modal.title";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION"] = "size_without_stock_modal.description";
+    I18nMessages["SIZE_WITHOUT_STOCK_MODAL_BUTTON"] = "size_without_stock_modal.button";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_TITLE"] = "get_out_of_checkout_modal.title";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION"] = "get_out_of_checkout_modal.description";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON"] = "get_out_of_checkout_modal.dismiss_button";
+    I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON"] = "get_out_of_checkout_modal.confirm_button";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages };
+export { I18nMessages, COLOR_I18N_PREFIX };

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

@@ -10,9 +10,9 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
     const [checkoutIntroShown, checkoutIntroShownStatus] = useViewCheckoutIntroShown();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const firstItemWithoutCustomerDecision = checkout?.items.find((item) => [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status));
-    const isIntroRoute = useMatch(Routes.INTRO);
-    const isItemRoute = useMatch(Routes.ITEM);
-    const isSummaryRoute = useMatch(Routes.SUMMARY);
+    const introRouteMatch = useMatch(Routes.INTRO);
+    const itemRouteMatch = useMatch(Routes.ITEM);
+    const summaryRouteMatch = useMatch(Routes.SUMMARY);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutIntroShownStatus) &&
         dependenciesLoadedStatuses.includes(checkoutStatus);
@@ -20,15 +20,21 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
         return loader;
     }
     if (!checkoutIntroShown) {
-        if (!isIntroRoute) {
+        if (!introRouteMatch) {
             return React.createElement(Navigate, { replace: true, to: Routes.INTRO });
         }
     }
     else {
-        if (firstItemWithoutCustomerDecision && !isItemRoute) {
+        if (itemRouteMatch) {
+            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch.params.id);
+            if (!checkoutItem) {
+                return React.createElement(Navigate, { replace: true, to: Routes.CHECKOUT });
+            }
+        }
+        if (firstItemWithoutCustomerDecision && !itemRouteMatch) {
             return React.createElement(Navigate, { replace: true, to: generatePath(Routes.ITEM, { id: firstItemWithoutCustomerDecision.id }) });
         }
-        if (firstItemWithoutCustomerDecision === undefined && !isSummaryRoute) {
+        if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch) {
             return React.createElement(Navigate, { replace: true, to: Routes.SUMMARY });
         }
     }

package/dist/infrastructure/ui/views/item/Item.js

@@ -1,15 +1,19 @@
+import { QueryStatus } from "@lookiero/messaging-react";
 import React from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
 import { useParams } from "react-router-native";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { Spinner } from "../../components/atoms/spinner/Spinner";
 import { Body } from "../../components/layouts/body/Body";
 import { style } from "./Item.style";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 const Item = ({ customerId }) => {
     const { id } = useParams();
-    const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [checkout, status] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    if (status === QueryStatus.LOADING)
+        return React.createElement(Spinner, null);
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
     const { media, brand, name, price, size, color } = checkoutItem?.productVariant;
     return (React.createElement(SafeAreaView, { style: style.container },

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface GetOutOfCheckoutModalProps {
+    readonly visible: boolean;
+    readonly onDismiss: () => void;
+    readonly onConfirm: () => void;
+}
+declare const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps>;
+export { GetOutOfCheckoutModal };

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -0,0 +1,32 @@
+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 { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { Modal } from "../../../../components/atoms/modal/Modal";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./GetOutOfCheckoutModal.style";
+const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
+    const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
+    const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
+    return (React.createElement(Modal, { visible: visible },
+        React.createElement(Text, { body: true, level: 1, style: style.modalTitle }, titleText),
+        React.createElement(Text, { body: true, level: 3, style: style.modalDescription }, descriptionText),
+        React.createElement(Button
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: style.button, onPress: onDismiss }, dismissButtonText),
+        React.createElement(Button
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm }, confirmButtonText)));
+};
+export { GetOutOfCheckoutModal };

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -0,0 +1,16 @@
+declare const style: {
+    modalTitle: {
+        textAlign: "center";
+    };
+    modalDescription: {
+        marginVertical: number;
+        textAlign: "center";
+    };
+    button: {
+        flex: number;
+    };
+    confirmButton: {
+        marginTop: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    modalTitle: {
+        textAlign: "center",
+    },
+    modalDescription: {
+        marginVertical: spaceXL,
+        textAlign: "center",
+    },
+    button: {
+        flex: 0,
+    },
+    confirmButton: {
+        marginTop: spaceXL,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -3,12 +3,13 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ProductVariantDescription.style";
 const ProductVariantDescription = ({ brand, name, price, size, color }) => {
     const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
     const colorText = useI18nMessage({ id: I18nMessages.ITEM_COLOR });
     const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    const colorLabel = useI18nMessage({ id: color.label, prefix: COLOR_I18N_PREFIX });
     return (React.createElement(View, { style: style.container },
         React.createElement(Text, { detail: true, level: 3, style: style.brand }, brand),
         React.createElement(Text, { body: true, level: 2, style: style.name }, name),
@@ -20,6 +21,6 @@ const ProductVariantDescription = ({ brand, name, price, size, color }) => {
         React.createElement(Text, { detail: true, level: 2 },
             colorText,
             ": ",
-            React.createElement(Text, { style: style.text }, color.label))));
+            React.createElement(Text, { style: style.text }, colorLabel))));
 };
 export { ProductVariantDescription };

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js

@@ -12,6 +12,12 @@ const SizeChangeModal = ({ visible, onDismiss }) => {
     return (React.createElement(Modal, { visible: visible },
         React.createElement(Text, { body: true, level: 1, style: style.modalTitle }, titleText),
         React.createElement(Text, { body: true, level: 3, style: style.modalDescription }, descriptionText),
-        React.createElement(Button, { onPress: onDismiss }, buttonText)));
+        React.createElement(Button
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: style.button, onPress: onDismiss }, buttonText)));
 };
 export { SizeChangeModal };

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts

@@ -1,11 +1,13 @@
 declare const style: {
     modalTitle: {
-        marginBottom: number;
         textAlign: "center";
     };
     modalDescription: {
-        marginBottom: number;
+        marginVertical: number;
         textAlign: "center";
     };
+    button: {
+        flex: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceL, spaceXL } = theme();
+const { spaceXL } = theme();
 const style = StyleSheet.create({
     modalTitle: {
-        marginBottom: spaceXL,
         textAlign: "center",
     },
     modalDescription: {
-        marginBottom: spaceL,
+        marginVertical: spaceXL,
         textAlign: "center",
     },
+    button: {
+        flex: 0,
+    },
 });
 export { style };

package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface SizeWithoutStockModalProps {
+    readonly visible: boolean;
+    readonly onDismiss: () => void;
+}
+declare const SizeWithoutStockModal: FC<SizeWithoutStockModalProps>;
+export { SizeWithoutStockModal };

package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -0,0 +1,23 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { Modal } from "../../../../components/atoms/modal/Modal";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./SizeWithoutStockModal.style";
+const SizeWithoutStockModal = ({ visible, onDismiss }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
+    const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
+    return (React.createElement(Modal, { visible: visible },
+        React.createElement(Text, { body: true, level: 1, style: style.modalTitle }, titleText),
+        React.createElement(Text, { body: true, level: 3, style: style.modalDescription }, descriptionText),
+        React.createElement(Button
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: style.button, onPress: onDismiss }, buttonText)));
+};
+export { SizeWithoutStockModal };

package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    modalTitle: {
+        textAlign: "center";
+    };
+    modalDescription: {
+        marginVertical: number;
+        textAlign: "center";
+    };
+    button: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    modalTitle: {
+        textAlign: "center",
+    },
+    modalDescription: {
+        marginVertical: spaceXL,
+        textAlign: "center",
+    },
+    button: {
+        flex: 0,
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -27,7 +27,6 @@
     "@lookiero/i18n-react": "^0.8.0",
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
-    "react-native-get-random-values": "^1.8.0",
     "react-router-dom": "^6.4.1",
     "react-router-native": "^6.3.0",
     "tiny-invariant": "^1.2.0",
@@ -37,7 +36,7 @@
     "@lookiero/aurora-next": "^3.0.181",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native": "^0.69.4",
+    "react-native": "^0.70.1",
     "react-native-web": "^0.18.9"
   },
   "devDependencies": {
@@ -50,7 +49,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.0.0",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "@types/jest": "^28.1.7",
+    "@types/jest": "^29.1.0",
     "@types/react": "~18.0.0",
     "@types/react-dom": "~18.0.0",
     "@types/react-native": "~0.69.1",
@@ -67,14 +66,15 @@
     "expo": "~46.0.8",
     "expo-status-bar": "~1.4.0",
     "husky": "^8.0.1",
-    "jest": "^26.6.3",
+    "jest": "^29.1.1",
     "jest-expo": "^46.0.1",
     "jest-mock-extended": "^2.0.7",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native": "^0.69.4",
+    "react-native": "^0.70.1",
+    "react-native-get-random-values": "^1.8.0",
     "react-native-web": "^0.18.9",
     "react-test-renderer": "^18.0.0",
     "typescript": "^4.6.3",