@lookiero/checkout 0.8.3-beta.1 → 0.8.3-beta.3

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

@@ -1,34 +1,21 @@
 import { useEvent } from "@lookiero/event";
 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";
+import { useToast } from "./useToast";
 const PAYMENT_ERROR = "ERROR";
 const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
 const usePaymentInstrumentUpdateEvents = () => {
     const { subscribe, unsubscribe } = useEvent();
+    const { showError, showSuccess } = useToast();
     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]);
+    const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
+    const onError = useCallback(({ error }) => showError({ message: error.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR }), [showError]);
     useEffect(() => {
-        console.log("subscribe");
         subscribe({ event: PAYMENT_ERROR }, onError);
         subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
         return () => {
-            console.log("unsubscribe");
             unsubscribe({ event: PAYMENT_ERROR }, onError);
             unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
         };

package/dist/infrastructure/ui/hooks/useToast.d.ts

@@ -0,0 +1,11 @@
+interface ShowErrorFunctionArgs {
+    readonly message: string;
+}
+interface ShowErrorFunction {
+    (args: ShowErrorFunctionArgs): void;
+}
+declare const useToast: () => {
+    showError: ShowErrorFunction;
+    showSuccess: ShowErrorFunction;
+};
+export { useToast };

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

@@ -0,0 +1,45 @@
+import { Notification } from "@lookiero/aurora-next/build/components/molecules/Notification/Notification";
+import { useStack } from "@lookiero/aurora-next/build/contexts/Stack/Stack";
+import { useCallback } from "react";
+import { StyleSheet } from "react-native";
+import { v4 as uuid } from "uuid";
+import { theme } from "../theme/theme";
+const { layoutXXS, elevationColor, elevationOffset, elevationOpacityM, elevationRadius } = theme();
+const style = StyleSheet.create({
+    container: {
+        marginHorizontal: layoutXXS,
+        marginTop: layoutXXS,
+        shadowColor: elevationColor,
+        shadowOffset: elevationOffset,
+        shadowOpacity: elevationOpacityM,
+        shadowRadius: elevationRadius,
+    },
+    inAppContainer: {
+        top: 75,
+    },
+});
+const NOTIFICATION_DEFAULTS = {
+    motion: "top",
+    timeoutClose: 10000,
+    style: style.container,
+};
+const IN_APP_NOTIFICATION_DEFAULTS = {
+    ...NOTIFICATION_DEFAULTS,
+    style: [style.container, style.inAppContainer],
+};
+const iOSInAppBrowser = window.screen.height > 667 && /FBIOS/.test(navigator.userAgent);
+const getNotificationDefaults = () => (iOSInAppBrowser ? IN_APP_NOTIFICATION_DEFAULTS : NOTIFICATION_DEFAULTS);
+const useToast = () => {
+    const Stack = useStack();
+    const showError = useCallback(({ message }) => {
+        Stack.alert(uuid(), Notification, { ...getNotificationDefaults(), text: message });
+    }, [Stack]);
+    const showSuccess = useCallback(({ message }) => {
+        Stack.success(uuid(), Notification, { ...getNotificationDefaults(), text: message });
+    }, [Stack]);
+    return {
+        showError,
+        showSuccess,
+    };
+};
+export { useToast };

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.1",
+  "version": "0.8.3-beta.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [