@lookiero/checkout 0.3.11 → 0.3.13

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lookiero/checkout",
-    "version": "0.3.11",
+    "version": "0.3.13",
     "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/components/layouts/banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+interface BannerProps {
+    readonly children?: ReactNode;
+    readonly text: string;
+}
+declare const Banner: FC<BannerProps>;
+export { Banner };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.js

@@ -0,0 +1,8 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Banner.style";
+const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
+    React.createElement(Text, { level: 2, style: style.text, detail: true }, text),
+    children));
+export { Banner };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    text: {
+        textAlign: "center";
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/components/layouts/banner/Banner.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorInfo, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorInfo,
+        paddingHorizontal: spaceL,
+        paddingVertical: spaceM,
+    },
+    text: {
+        textAlign: "center",
+    },
+});
+export { style };

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

@@ -55,6 +55,7 @@ declare enum I18nMessages {
     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"
+    CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
+    CHECKOUT_DELIVERY_BANNER = "checkout.delivery_banner"
 }
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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

@@ -57,5 +57,6 @@ var I18nMessages;
     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["CHECKOUT_DELIVERY_BANNER"] = "checkout.delivery_banner";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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,7 +1,7 @@
 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";
@@ -21,9 +21,11 @@ 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 }) => {
+import { CheckoutSuccessModal } from "./components/checkoutSuccessModal/CheckoutSuccessModal";
+import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
+const Checkout = ({ customerId, authToken, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
+    const paymentInstrumentSelectRef = useRef(null);
     const paymentFlowRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
@@ -35,6 +37,7 @@ const Checkout = ({ customerId, authToken }) => {
     const [processingCheckout, setProcessingCheckout] = useState(false);
     const navigate = useNavigate();
     const basePath = useBasePath();
+    const { returnUrl } = useRedirect();
     const handleOnSubmitCheckout = useCallback(() => {
         console.log("onSubmit checkout");
         if (!paymentFlowRef.current) {
@@ -65,6 +68,7 @@ const Checkout = ({ customerId, authToken }) => {
     }, [createNotification, markAsPaid, paymentFlowPayload]);
     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 hasReplacedCheckoutItem = useMemo(() => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(pricingStatus);
     if (!dependenciesLoaded)
@@ -73,6 +77,9 @@ const Checkout = ({ customerId, authToken }) => {
         React.createElement(CheckoutSuccessModal, { visible: markAsPaidStatus === CommandStatus.SUCCESS, onDismiss: handleOnSuccessModalDismiss }),
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, { style: { column: style.bodyColumn } },
+                hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
+                    React.createElement(DeliveryBanner, null))),
+                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 })))),

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

@@ -5,6 +5,9 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
+    deliveryBannerContainer: {
+        marginBottom: number;
+    };
     pricingContainer: {
         marginTop: number;
     };

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

@@ -8,6 +8,9 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
+    deliveryBannerContainer: {
+        marginBottom: spaceXXL,
+    },
     pricingContainer: {
         marginTop: spaceXL,
     },

package/dist/src/infrastructure/ui/views/checkout/components/{CheckoutSuccessModal.js → checkoutSuccessModal/CheckoutSuccessModal.js}

@@ -3,8 +3,8 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
-import { Modal } from "../../../../../shared/ui/components/layouts/modal/Modal";
-import { I18nMessages } from "../../../i18n/i18n";
+import { Modal } from "../../../../../../shared/ui/components/layouts/modal/Modal";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CheckoutSuccessModal.style";
 const CheckoutSuccessModal = ({ visible, onDismiss }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_SUCCESS_MODAL_TITLE });

package/dist/src/infrastructure/ui/views/checkout/components/{CheckoutSuccessModal.style.js → checkoutSuccessModal/CheckoutSuccessModal.style.js}

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
     button: {

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DeliveryBanner: () => JSX.Element;
+export { DeliveryBanner };

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -0,0 +1,9 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { Banner } from "../../../../components/layouts/banner/Banner";
+import { I18nMessages } from "../../../../i18n/i18n";
+const DeliveryBanner = () => {
+    const deliveryBannerText = useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }) || "";
+    return React.createElement(Banner, { text: deliveryBannerText });
+};
+export { DeliveryBanner };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -1,8 +1,9 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Pressable, View } from "react-native";
+import { Pressable } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
 const i18nMessageForCheckoutItemStatus = {
@@ -11,11 +12,10 @@ const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
 const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
-    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] }) || "";
     const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
-    return (React.createElement(View, { style: style.container },
-        React.createElement(Text, { level: 2, style: style.decissionText, detail: true }, decissionText),
-        React.createElement(Pressable, { onPress: onPress },
+    return (React.createElement(Banner, { text: decissionText },
+        React.createElement(Pressable, { style: style.button, onPress: onPress },
             React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText))));
 };
 export { CustomerDecissionBanner };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

@@ -1,17 +1,9 @@
 declare const style: {
+    button: {
+        marginTop: number;
+    };
     buttonText: {
         textDecorationLine: "underline";
     };
-    container: {
-        alignItems: "center";
-        backgroundColor: string;
-        paddingBottom: number;
-        paddingHorizontal: number;
-        paddingTop: number;
-    };
-    decissionText: {
-        marginBottom: number;
-        textAlign: "center";
-    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

@@ -1,20 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { colorInfo, spaceM, spaceL } = theme();
+const { spaceM } = theme();
 const style = StyleSheet.create({
+    button: {
+        marginTop: spaceM,
+    },
     buttonText: {
         textDecorationLine: "underline",
     },
-    container: {
-        alignItems: "center",
-        backgroundColor: colorInfo,
-        paddingBottom: spaceL,
-        paddingHorizontal: spaceL,
-        paddingTop: spaceM,
-    },
-    decissionText: {
-        marginBottom: spaceM,
-        textAlign: "center",
-    },
 });
 export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "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",