@lookiero/checkout 0.3.10 → 0.3.12

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lookiero/checkout",
-    "version": "0.3.10",
+    "version": "0.3.12",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [
@@ -46,7 +46,7 @@
         "@lookiero/data-sources": "^0.3",
         "@lookiero/event": "^0.3",
         "@lookiero/locale": "^0.3",
-        "@lookiero/payments-front": "^0.16.3",
+        "@lookiero/payments-front": "^0.16.5",
         "apollo-boost": "0.4.4",
         "graphql": "14.5.8",
         "graphql-tag": "2.12.6",
@@ -66,7 +66,7 @@
         "@lookiero/data-sources": "^0.3",
         "@lookiero/event": "^0.3",
         "@lookiero/locale": "^0.3",
-        "@lookiero/payments-front": "^0.16.3",
+        "@lookiero/payments-front": "^0.16.5",
         "@pact-foundation/pact": "^10.1.4",
         "@pact-foundation/pact-node": "^10.17.6",
         "@testing-library/react": "^13.4.0",

package/dist/src/ExpoRoot.js

@@ -19,6 +19,9 @@ const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIwOTUxNjAsImV4
 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`;
+const useRedirect = () => ({
+    returnUrl: "https://web2.dev.aws.lookiero.es/user/",
+});
 setPaymentsBridge({
     getToken: () => Promise.resolve(authToken),
     stripeKey: "pk_test_6dwdUfkUm7AaUH3oSje9H0kk",
@@ -88,7 +91,7 @@ const ExpoRoot = () => {
         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(Root, { basePath: "", customerId: "cf7c641f-0e5c-4850-ae07-276747edfd0b", locale: "es", useRedirect: useRedirect, onNotAccessible: onNotAccessible }))),
         React.createElement(StatusBar, null))) : null;
 };
 export { ExpoRoot };

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

@@ -17,6 +17,7 @@ interface RootProps {
     readonly locale?: string;
     readonly customerId: string | undefined;
     readonly onNotAccessible: () => void;
+    readonly useRedirect: () => Record<string, string>;
 }
 declare const root: RootFunction;
 export type { RootProps };

package/dist/src/infrastructure/ui/Root.js

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

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

@@ -8,6 +8,7 @@ interface RoutingProps {
     readonly authToken: string;
     readonly onNotAccessible: () => void;
     readonly onI18nError?: (err: Error) => void;
+    readonly useRedirect: () => Record<string, string>;
 }
 declare const Routing: FC<RoutingProps>;
 export { Routing };

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

@@ -10,7 +10,7 @@ const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ defa
 const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
-const Routing = ({ basePath = "", customerId, locale, I18n, authToken, onI18nError, onNotAccessible, }) => {
+const Routing = ({ basePath = "", customerId, locale, I18n, authToken, onI18nError, onNotAccessible, useRedirect, }) => {
     const routes = useRoutes([
         {
             path: "",
@@ -44,7 +44,7 @@ const Routing = ({ basePath = "", customerId, locale, I18n, authToken, onI18nErr
                 {
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Checkout, { authToken: authToken, customerId: customerId }))),
+                        React.createElement(Checkout, { authToken: authToken, customerId: customerId, useRedirect: useRedirect }))),
                 },
                 {
                     path: "*",

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

@@ -2,6 +2,7 @@ import { FC } from "react";
 interface CheckoutProps {
     readonly customerId: string;
     readonly authToken: string;
+    readonly useRedirect: () => Record<string, string>;
 }
 declare const Checkout: FC<CheckoutProps>;
 export { Checkout };

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

@@ -1,8 +1,7 @@
-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 { CheckoutStatus, PaymentFlow, PaymentInstrumentSelect, PaymentMethod, Section, } from "@lookiero/payments-front";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useNavigate } from "react-router-native";
@@ -13,19 +12,22 @@ 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 Checkout = ({ customerId, authToken, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-    const payButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
+    const paymentInstrumentSelectRef = useRef(null);
     const paymentFlowRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
         checkoutId: checkout?.id,
     });
@@ -34,7 +36,9 @@ const Checkout = ({ customerId, authToken }) => {
     const [processingCheckout, setProcessingCheckout] = useState(false);
     const navigate = useNavigate();
     const basePath = useBasePath();
-    const onSubmitCheckout = useCallback(() => {
+    const { returnUrl } = useRedirect();
+    const handleOnSubmitCheckout = useCallback(() => {
+        console.log("onSubmit checkout");
         if (!paymentFlowRef.current) {
             return;
         }
@@ -64,17 +68,19 @@ const Checkout = ({ customerId, authToken }) => {
     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(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }),
                 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 })))),
-                React.createElement(Button, { busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, onPress: onSubmitCheckout }, payButtonText))),
+                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

@@ -5,8 +5,12 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
+    pricingContainer: {
+        marginTop: number;
+    };
     title: {
         marginBottom: number;
+        marginTop: number;
         textAlign: "center";
     };
 };

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

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
-const { spaceM, spaceXL } = theme();
+const { spaceM, spaceXL, spaceXXL } = theme();
 const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
@@ -8,8 +8,12 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
+    pricingContainer: {
+        marginTop: spaceXL,
+    },
     title: {
         marginBottom: spaceM,
+        marginTop: spaceXXL,
         textAlign: "center",
     },
 });

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.10",
+  "version": "0.3.12",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -46,7 +46,7 @@
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "^0.16.3",
+    "@lookiero/payments-front": "^0.16.5",
     "apollo-boost": "0.4.4",
     "graphql": "14.5.8",
     "graphql-tag": "2.12.6",
@@ -66,7 +66,7 @@
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "^0.16.3",
+    "@lookiero/payments-front": "^0.16.5",
     "@pact-foundation/pact": "^10.1.4",
     "@pact-foundation/pact-node": "^10.17.6",
     "@testing-library/react": "^13.4.0",