@lookiero/checkout 0.8.3-beta.0 → 0.8.3-beta.2

package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js

@@ -1,37 +1,37 @@
 import { useEvent } from "@lookiero/event";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useCreateNotification } from "../../../shared/notifications";
 import { NotificationLevel } from "../../../shared/notifications/domain/notification/model/notification";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { I18nMessages } from "../i18n/i18n";
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
 const usePaymentInstrumentUpdateEvents = () => {
     const { subscribe, unsubscribe } = useEvent();
     const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
+    const onSuccess = useCallback(({ message }) => {
+        console.log({ message });
+        createNotification({
+            level: NotificationLevel.SUCCESS,
+            bodyI18nKey: message.id,
+        });
+    }, [createNotification]);
+    const onError = useCallback(({ error }) => {
+        console.log({ error });
+        createNotification({
+            level: NotificationLevel.ERROR,
+            bodyI18nKey: error.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        });
+    }, [createNotification]);
     useEffect(() => {
-        // if (disabled) return;
-        const onSuccess = ({ message }) => {
-            // if (notifySuccess) {
-            createNotification({
-                level: NotificationLevel.SUCCESS,
-                bodyI18nKey: message.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-            });
-            // }
-        };
-        const onError = ({ error }) => {
-            console.log({ error });
-            createNotification({
-                level: NotificationLevel.ERROR,
-                bodyI18nKey: error.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-            });
-        };
         console.log("subscribe");
-        subscribe({ event: "ERROR" }, onError);
-        subscribe({ event: "PAYMENT_INSTRUMENT_UPDATED" }, onSuccess);
+        subscribe({ event: PAYMENT_ERROR }, onError);
+        subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
         return () => {
             console.log("unsubscribe");
-            unsubscribe({ event: "ERROR" }, onError);
-            unsubscribe({ event: "PAYMENT_INSTRUMENT_UPDATED" }, onSuccess);
+            unsubscribe({ event: PAYMENT_ERROR }, onError);
+            unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
         };
-    }, [subscribe, unsubscribe, createNotification]);
+    }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
 };
 export { usePaymentInstrumentUpdateEvents };

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

@@ -1,8 +1,7 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -13,7 +12,6 @@ import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/us
 import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { usePaymentInstrumentUpdateEvents } from "../../hooks/usePaymentInstrumentUpdateEvents";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
@@ -22,9 +20,9 @@ import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
+import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 const Checkout = ({ children, customerId, country, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-    const paymentInstrumentSelectRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     usePageView({
@@ -32,10 +30,8 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
         country,
         checkoutId: checkout?.id,
     });
-    usePaymentInstrumentUpdateEvents();
     const navigate = useNavigate();
     const basePath = useBasePath();
-    const { returnUrl } = useRedirect();
     const handleOnSubmit = useCallback(() => {
         navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
     }, [basePath, navigate]);
@@ -51,7 +47,7 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
             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(PaymentInstrument, { useRedirect: useRedirect }),
                 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, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor

package/dist/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface PaymentInstrumentProps {
+    readonly useRedirect: () => Record<string, string>;
+}
+declare const PaymentInstrument: FC<PaymentInstrumentProps>;
+export { PaymentInstrument };

package/dist/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js

@@ -0,0 +1,10 @@
+import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
+import React, { useRef } from "react";
+import { usePaymentInstrumentUpdateEvents } from "../../../../hooks/usePaymentInstrumentUpdateEvents";
+const PaymentInstrument = ({ useRedirect }) => {
+    const paymentInstrumentSelectRef = useRef(null);
+    const { returnUrl } = useRedirect();
+    usePaymentInstrumentUpdateEvents();
+    return (React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }));
+};
+export { PaymentInstrument };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.8.3-beta.0",
+  "version": "0.8.3-beta.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [