@lookiero/checkout 10.1.0 → 11.0.0

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,11 +1,14 @@
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
@@ -14,6 +17,7 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
+import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
@@ -24,12 +28,22 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 
 interface CheckoutProps {
-  readonly children?: ReactNode;
   readonly layout: UiLayout;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect }) => {
+const Checkout: FC<CheckoutProps> = ({
+  layout: Layout,
+  order,
+  subscription,
+  getAuthToken,
+  useRedirect,
+  onCheckoutFlowSuccess,
+}) => {
   const {
     customer: { customerId, country, segment },
     basePath,
@@ -43,6 +57,14 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
 
+  const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
+    checkout,
+    order,
+    subscription,
+    getAuthToken,
+    onSuccess: onCheckoutFlowSuccess,
+  });
+
   useTrackPageView({
     page: TrackingPage.CHECKOUT,
     country,
@@ -51,17 +73,16 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   });
 
   const navigate = useNavigate();
-
   const trackPressContinue = useTrackPressContinue({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
     checkoutId: checkout?.id,
   });
-  const handleOnSubmit = useCallback(() => {
+  const handleOnSubmit = useCallback(async () => {
     trackPressContinue();
-    navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
-  }, [basePath, navigate, trackPressContinue]);
+    await checkoutFlow();
+  }, [checkoutFlow, trackPressContinue]);
 
   const checkoutItemsKept = useMemo(
     () =>
@@ -115,6 +136,12 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
         >
           <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
             <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              {country === Country.NL && (
+                <View style={style.paymentSelectorNL}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
+
               <Text level={3} style={style.title} heading>
                 {titleText}
               </Text>
@@ -138,9 +165,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 </View>
               ))}
 
-              <View style={style.paymentSelector}>
-                <PaymentInstrument useRedirect={useRedirect} />
-              </View>
+              {country !== Country.NL && (
+                <View style={style.paymentSelector}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
             </View>
           </Box>
 
@@ -150,7 +179,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
                 {screen.L ? (
-                  <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
+                  <Button
+                    busy={checkoutFlowStatus === "loading"}
+                    testID="confirm-checkout-button"
+                    onPress={handleOnSubmit}
+                  >
                     {submitButtonText}
                   </Button>
                 ) : null}
@@ -163,14 +196,19 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
       {pricing && !screen.L ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
+            <Button
+              busy={checkoutFlowStatus === "loading"}
+              testID="confirm-checkout-button"
+              small
+              onPress={handleOnSubmit}
+            >
               {submitButtonText}
             </Button>
           </Body>
         </Sticky>
       ) : null}
 
-      {children}
+      {paymentFlowComponent}
     </Layout>
   );
 };

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -1,24 +1,24 @@
-import React, { FC, useRef } from "react";
+import React, { FC } from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 
 interface PaymentInstrumentProps {
   readonly useRedirect: () => Record<string, string>;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
-  const paymentInstrumentSelectRef = useRef(null);
   const { returnUrl } = useRedirect();
-  const logger = useLogger();
-
-  usePaymentInstrumentEvents({ logger });
+  const { customer } = useStaticInfo();
 
   return (
     <PaymentInstrumentSelect
-      ref={paymentInstrumentSelectRef}
       beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
       hasError={false}
       section={Section.BOX_CHECKOUT}
+      userInformation={{
+        email: customer.email,
+        name: customer.name,
+      }}
+      showSingleUsePaymentMethods
     />
   );
 };

package/src/projection/customer/customer.ts

@@ -5,6 +5,8 @@ interface Customer {
   readonly customerId: string;
   readonly country: Country;
   readonly segment: Segment;
+  readonly name: string;
+  readonly email: string;
 }
 
 export type { Customer };

package/src/projection/order/order.ts

@@ -4,4 +4,4 @@ interface Order {
   readonly coupon: string | null;
 }
 
-export type { Order };
+export type { Order as OrderProjection };

package/src/projection/subscription/subscription.ts

@@ -1,3 +1,3 @@
 type Subscription = "o" | "m" | "b" | "q";
 
-export type { Subscription };
+export type { Subscription as SubscriptionProjection };

package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.d.ts

@@ -1,27 +0,0 @@
-import { RefObject } from "react";
-import { PaymentFlowRef } from "@lookiero/payments-front";
-import { Logger } from "@lookiero/sty-psp-logging";
-import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
-type Status = "idle" | "loading" | "success" | "error";
-interface SubmitCheckoutFunctionArgs {
-    readonly paymentFlowPayload: PaymentFlowPayloadProjection;
-    readonly sizeChangeEnabled: boolean;
-}
-interface SubmitCheckoutFunction {
-    (args: SubmitCheckoutFunctionArgs): Promise<void>;
-}
-type UseSubmitCheckoutResult = [submitCheckout: SubmitCheckoutFunction, status: Status];
-interface UseSubmitCheckoutFunctionArgs {
-    readonly checkoutId: string;
-    readonly checkoutBookingId: string;
-    readonly paymentFlowRef: RefObject<PaymentFlowRef>;
-    readonly onError: () => void;
-    readonly onSuccess?: () => void;
-    readonly logger: Logger;
-}
-interface UseSubmitCheckoutFunction {
-    (args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckoutResult;
-}
-declare const useSubmitCheckout: UseSubmitCheckoutFunction;
-export type { Status, SubmitCheckoutFunction };
-export { useSubmitCheckout };

package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.js

@@ -1,97 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import { CommandStatus } from "@lookiero/messaging-react";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
-import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
-import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
-import { I18nMessages } from "../i18n/i18n";
-import { useQueryBus } from "./useQueryBus";
-var ChargeStatus;
-(function (ChargeStatus) {
-    ChargeStatus["EXECUTED"] = "EXECUTED";
-    ChargeStatus["REQUIRES_ACTION"] = "REQUIRES_ACTION";
-    ChargeStatus["REQUIRED_ACTION_CANCELLED"] = "REQUIRED_ACTION_CANCELLED";
-    ChargeStatus["REJECTED"] = "REJECTED";
-    ChargeStatus["CANCELLED"] = "CANCELLED";
-    ChargeStatus["TO_CONFIRM"] = "TO_CONFIRM";
-    ChargeStatus["ERROR"] = "ERROR";
-    ChargeStatus["UNKNOWN"] = "UNKNOWN";
-})(ChargeStatus || (ChargeStatus = {}));
-const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError, onSuccess, logger, }) => {
-    const queryBus = useQueryBus();
-    const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
-    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
-    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
-    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
-    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
-    const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
-        try {
-            sizeChangeEnabled && (await blockCheckoutBooking());
-        }
-        catch (error) {
-            return;
-        }
-        const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId }));
-        if (checkoutBooking?.isExpired) {
-            setCheckoutBookingExpired(true);
-            return;
-        }
-        paymentFlowRef.current?.startLegacyBoxCheckout(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        paymentFlowPayload, async ({ status, toaster, final }) => {
-            setStartLegacyBoxCheckoutStatus("loading");
-            if (final) {
-                if (status === ChargeStatus.EXECUTED) {
-                    setStartLegacyBoxCheckoutStatus("success");
-                    await submitCheckoutCommand();
-                    onSuccess?.();
-                }
-                else {
-                    createNotification({
-                        level: NotificationLevel.ERROR,
-                        bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-                    });
-                    setStartLegacyBoxCheckoutStatus("error");
-                }
-            }
-        });
-    }, [
-        queryBus,
-        checkoutBookingId,
-        paymentFlowRef,
-        blockCheckoutBooking,
-        submitCheckoutCommand,
-        onSuccess,
-        createNotification,
-    ]);
-    const status = useMemo(() => {
-        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
-            startLegacyBoxCheckoutStatus === "loading" ||
-            submitCheckoutCommandStatus === CommandStatus.LOADING) {
-            return "loading";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
-            startLegacyBoxCheckoutStatus === "success" &&
-            submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
-            return "success";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
-            startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR ||
-            checkoutBookingExpired) {
-            onError();
-            return "error";
-        }
-        return "idle";
-    }, [
-        blockCheckoutBookingStatus,
-        startLegacyBoxCheckoutStatus,
-        submitCheckoutCommandStatus,
-        checkoutBookingExpired,
-        onError,
-    ]);
-    return [submitCheckout, status];
-};
-export { useSubmitCheckout };

package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.d.ts

@@ -1,12 +0,0 @@
-import { FC } from "react";
-import { Subscription } from "../../../../../../projection/subscription/subscription";
-interface CheckoutPaymentModalProps {
-    readonly coupon: string | null;
-    readonly orderNumber: number;
-    readonly isFirstOrder: boolean;
-    readonly subscription: Subscription;
-    readonly getAuthToken: () => Promise<string>;
-    readonly onCheckoutSubmitted?: () => void;
-}
-declare const CheckoutPaymentModal: FC<CheckoutPaymentModalProps>;
-export { CheckoutPaymentModal };

package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -1,88 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-native";
-import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow } from "@lookiero/payments-front";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
-import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
-import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { TrackingPage } from "../../../../../tracking/tracking";
-import { useTrackCheckout } from "../../../../../tracking/useTrackCheckout";
-import { useStaticInfo } from "../../../../hooks/useStaticInfo";
-import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
-import { Routes } from "../../../../routing/routes";
-const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber, getAuthToken, onCheckoutSubmitted, }) => {
-    const paymentFlowRef = useRef(null);
-    const logger = useLogger();
-    const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
-    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
-        checkoutId: checkout?.id,
-    });
-    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
-    const [pricing] = useViewPricingByCheckoutId({
-        checkoutId: checkout?.id,
-        queryOptions: { refetchOnMount: true },
-    });
-    const [authToken, setAuthToken] = useState();
-    useEffect(() => {
-        const loadAuthToken = async () => setAuthToken(await getAuthToken());
-        loadAuthToken();
-    }, [getAuthToken]);
-    const navigate = useNavigate();
-    const trackCheckout = useTrackCheckout({
-        page: TrackingPage.CHECKOUT,
-        checkoutId: checkout?.id,
-        country,
-        segment,
-    });
-    const handleOnSubmitCheckoutError = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }), [basePath, navigate]);
-    const handleOnSubmitCheckoutSuccess = useCallback(() => {
-        const checkoutItemsKept = checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
-        const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
-        trackCheckout({
-            totalCheckoutItemsKept: checkoutItemsKept?.length || 0,
-            pendingToPay: pricing?.pendingToPay.amount / 100,
-            coupon,
-            currencyCode: pricing?.pendingToPay.currency,
-            isFirstOrder,
-            orderNumber,
-            totalReplacedFor,
-            subscription,
-            userId: customerId,
-        });
-        onCheckoutSubmitted?.();
-    }, [
-        checkout?.items,
-        coupon,
-        customerId,
-        isFirstOrder,
-        onCheckoutSubmitted,
-        orderNumber,
-        pricing?.pendingToPay.amount,
-        pricing?.pendingToPay.currency,
-        subscription,
-        trackCheckout,
-    ]);
-    const [submitCheckout] = useSubmitCheckout({
-        checkoutId: checkout?.id,
-        checkoutBookingId: checkout?.checkoutBookingId,
-        paymentFlowRef,
-        onError: handleOnSubmitCheckoutError,
-        onSuccess: handleOnSubmitCheckoutSuccess,
-        logger,
-    });
-    useEffect(() => {
-        if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
-            submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
-        }
-    }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
-    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
-    if (!dependenciesLoaded)
-        return null;
-    return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });
-};
-export { CheckoutPaymentModal };