@lookiero/checkout 0.3.9 → 0.3.11

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lookiero/checkout",
-    "version": "0.3.9",
+    "version": "0.3.11",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [
@@ -89,7 +89,7 @@
         "eslint-plugin-react": "^7.31.8",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-native": "^4.0.0",
-        "expo": "~47.0.8",
+        "expo": "~46.0.8",
         "expo-status-bar": "~1.4.0",
         "graphql": "14.5.8",
         "graphql-tag": "2.12.6",

package/dist/src/ExpoRoot.js

@@ -15,7 +15,7 @@ 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 authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIwOTUxNjAsImV4cCI6MTY3MjI5OTg4MSwiZGlzcGxheU5hbWUiOiJBbGV4YW5kZXIiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyMC0wOS0wMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJjZjdjNjQxZi0wZTVjLTQ4NTAtYWUwNy0yNzY3NDdlZGZkMGIiLCJpYXQiOjE2Njk3MDc4ODF9.-nGGMNmMlsq-PsupefyjxH0Z3td7ybM9TpnUV_VIYSg";
 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`;

package/dist/src/infrastructure/ui/routing/CheckoutMiddleware.d.ts

@@ -1,6 +1,5 @@
 import { FC } from "react";
 interface CheckoutMiddlewareProps {
-    readonly basePath: string;
     readonly customerId: string;
     readonly loader?: JSX.Element;
     readonly children: JSX.Element;

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

@@ -6,7 +6,9 @@ import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
 import { Routes } from "./routes";
-const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement(Spinner, null), children }) => {
+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 [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });

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

@@ -5,6 +5,7 @@ import { App } from "../views/App";
 import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
 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 })));
@@ -13,11 +14,12 @@ const Routing = ({ basePath = "", customerId, locale, I18n, authToken, onI18nErr
     const routes = useRoutes([
         {
             path: "",
-            element: (React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible },
-                React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
-                    React.createElement(CheckoutMiddleware, { basePath: basePath, customerId: customerId },
-                        React.createElement(App, null,
-                            React.createElement(Outlet, null)))))),
+            element: (React.createElement(BasePathProvider, { basePath: basePath },
+                React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible },
+                    React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
+                        React.createElement(CheckoutMiddleware, { customerId: customerId },
+                            React.createElement(App, null,
+                                React.createElement(Outlet, null))))))),
             children: [
                 {
                     path: Routes.INTRO,

package/dist/src/infrastructure/ui/routing/useBasePath.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface BasePathProviderProps {
+    readonly children: JSX.Element;
+    readonly basePath: string;
+}
+export declare const BasePathProvider: FC<BasePathProviderProps>;
+export declare const useBasePath: () => string;
+export {};

package/dist/src/infrastructure/ui/routing/useBasePath.js

@@ -0,0 +1,9 @@
+import { invariant } from "@remix-run/router";
+import React, { createContext, useContext } from "react";
+const BasePathContext = createContext(null);
+export const BasePathProvider = ({ basePath, children }) => (React.createElement(BasePathContext.Provider, { value: basePath }, children));
+export const useBasePath = () => {
+    const basePath = useContext(BasePathContext);
+    invariant(basePath, "Your are trying to use the useBasePath hook without wrapping your app with the <BasePathProvider>.");
+    return basePath;
+};

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,28 +1,32 @@
-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 { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { CheckoutStatus, PaymentFlow } from "@lookiero/payments-front";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useNavigate } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useCreateNotification } from "../../../../shared/notifications";
 import { NotificationLevel } from "../../../../shared/notifications/domain/notification/model/notification";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useMarkCheckoutAsPaid } from "../../../domain/checkout/react/useMarkCheckoutAsPaid";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPaymentFlowPayloadByCheckoutId } from "../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { ProductVariant } from "../item/components/productVariant/ProductVariant";
+import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { CheckoutSuccessModal } from "./components/CheckoutSuccessModal";
 const Checkout = ({ customerId, authToken }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-    const payButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const paymentFlowRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
         checkoutId: checkout?.id,
     });
@@ -30,7 +34,9 @@ const Checkout = ({ customerId, authToken }) => {
     const [createNotification] = useCreateNotification();
     const [processingCheckout, setProcessingCheckout] = useState(false);
     const navigate = useNavigate();
-    const onSubmitCheckout = useCallback(() => {
+    const basePath = useBasePath();
+    const handleOnSubmitCheckout = useCallback(() => {
+        console.log("onSubmit checkout");
         if (!paymentFlowRef.current) {
             return;
         }
@@ -57,22 +63,21 @@ const Checkout = ({ customerId, authToken }) => {
             }
         });
     }, [createNotification, markAsPaid, paymentFlowPayload]);
-    const handleOnSuccessModalDismiss = useCallback(() => navigate(Routes.FEEDBACK), [navigate]);
+    const handleOnSuccessModalDismiss = useCallback(() => navigate(`${basePath}/${Routes.FEEDBACK}`), [basePath, navigate]);
+    const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(pricingStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
+        React.createElement(CheckoutSuccessModal, { visible: markAsPaidStatus === CommandStatus.SUCCESS, onDismiss: handleOnSuccessModalDismiss }),
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, { style: { column: style.bodyColumn } },
-                React.createElement(View, { style: style.container },
-                    React.createElement(View, { style: style.content },
-                        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
-                        React.createElement(Button, { busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, 
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
-                            testID: "submit-checkout-button", onPress: onSubmitCheckout }, payButtonText),
-                        React.createElement(CheckoutSuccessModal, { visible: markAsPaidStatus === CommandStatus.SUCCESS, onDismiss: handleOnSuccessModalDismiss }))))),
+                React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.checkoutItemKept, testID: "checkout-items-kept" },
+                    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, size: checkoutItem.productVariant.size, status: checkoutItem.status })))),
+                pricing && (React.createElement(View, { style: style.pricingContainer },
+                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmitCheckout }))))),
         React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken })));
 };
 export { Checkout };

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

@@ -2,20 +2,15 @@ declare const style: {
     bodyColumn: {
         paddingHorizontal: number;
     };
-    bullet: {
-        alignItems: "center";
-        flexDirection: "row";
-        marginVertical: number;
+    checkoutItemKept: {
+        paddingVertical: number;
     };
-    container: {
-        flex: number;
-        justifyContent: "space-between";
-    };
-    content: {
-        alignItems: "center";
+    pricingContainer: {
+        marginTop: number;
     };
     title: {
         marginBottom: number;
+        marginTop: number;
         textAlign: "center";
     };
 };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -1,24 +1,19 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
-const { spaceS, spaceM, spaceXL } = theme();
+const { spaceM, spaceXL, spaceXXL } = theme();
 const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
     },
-    bullet: {
-        alignItems: "center",
-        flexDirection: "row",
-        marginVertical: spaceS,
+    checkoutItemKept: {
+        paddingVertical: spaceM,
     },
-    container: {
-        flex: 1,
-        justifyContent: "space-between",
-    },
-    content: {
-        alignItems: "center",
+    pricingContainer: {
+        marginTop: spaceXL,
     },
     title: {
         marginBottom: spaceM,
+        marginTop: spaceXXL,
         textAlign: "center",
     },
 });

package/dist/src/infrastructure/ui/views/item/components/productVariant/ProductVariant.js

@@ -14,7 +14,7 @@ const ProductVariant = ({ media, brand, name, price, size, color, status, discar
     const colorLabel = useI18nMessage({ id: color.label, prefix: COLOR_I18N_PREFIX });
     const sizeChangeText = useI18nMessage({ id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
     const cdnImageUrl = useMediaImage();
-    return (React.createElement(Pressable, { style: style.container, testID: "product-variant", onPress: onPress },
+    return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },
             React.createElement(View, null,
                 React.createElement(Image, { resizeMode: "contain", style: [style.media, customStyle?.image], testID: "product-variant-media", source: {

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -13,6 +13,7 @@ import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
 import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
 import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
@@ -23,11 +24,12 @@ const Summary = ({ customerId }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const handleOnPressPricing = useCallback(() => setPricingCollapsed(!pricingCollapsed), [pricingCollapsed]);
-    const handleOnSubmit = useCallback(() => void 0, []);
-    const navigate = useNavigate();
-    const handleOnPressItem = useCallback((checkoutItemId) => navigate(generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })), [navigate]);
+    const handleOnSubmit = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`), [basePath, navigate]);
+    const handleOnPressItem = useCallback((checkoutItemId) => navigate(`${basePath}/${generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })}`), [basePath, navigate]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const checkoutItemsReturned = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.RETURNED || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.d.ts

@@ -11,6 +11,7 @@ interface PricingProps {
     readonly service: ServiceProjection;
     readonly collapsible?: boolean;
     readonly collapsed?: boolean;
+    readonly busy?: boolean;
     readonly onPress?: () => void;
     readonly onSubmit: () => void;
 }

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -13,7 +13,7 @@ const PS_SERVICE_FREE_INDICATOR = 100;
 const Row = ({ text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { level: level, style: style.uppercase, action: true }, text),
     children));
-const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, onPress = () => void 0, onSubmit, }) => {
+const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, busy = false, onPress = () => void 0, onSubmit, }) => {
     const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL }) || "";
     const totalCheckoutItemsKeptText = useI18nMessage({
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
@@ -31,7 +31,7 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
     const isPSServiceFree = service.discount.amount === PS_SERVICE_FREE_INDICATOR;
     const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
     const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
-    return (React.createElement(Pressable, { disabled: !collapsible, testID: "pricing", onPress: onPress },
+    return (React.createElement(Pressable, { testID: "pricing", onPress: collapsible ? onPress : null },
         collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { style: style.icon, testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(animated.View, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
             React.createElement(View, null,
@@ -41,7 +41,7 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
                     totalCheckoutItemsKeptText),
                 React.createElement(Price, { price: orderTotal, variant: "detail" })),
             React.createElement(View, null,
-                React.createElement(Button, { small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
+                React.createElement(Button, { busy: busy, small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
             React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
                 React.createElement(Price, { price: subtotal, variant: "subtotal" })),
             discount && (React.createElement(Row, { text: discountText },
@@ -52,6 +52,6 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
             React.createElement(View, { style: style.divider }),
             React.createElement(Row, { level: 2, text: totalText },
                 React.createElement(Price, { price: orderTotal, variant: "total" })),
-            React.createElement(Button, { onPress: onSubmit }, submitButtonText)))));
+            React.createElement(Button, { busy: busy, onPress: onSubmit }, submitButtonText)))));
 };
 export { Pricing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -89,7 +89,7 @@
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
-    "expo": "~47.0.8",
+    "expo": "~46.0.8",
     "expo-status-bar": "~1.4.0",
     "graphql": "14.5.8",
     "graphql-tag": "2.12.6",