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

package/dist/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.d.ts

@@ -1,7 +1,11 @@
 import { UseQueryFunctionResult } from "@lookiero/messaging-react";
 import { PricingProjection } from "../../../../projection/pricing/pricing";
+interface QueryOptions {
+    readonly refetchOnMount?: boolean | "always";
+}
 interface UseViewPricingByCheckoutIdFunctionArgs {
     readonly checkoutId: string;
+    readonly queryOptions?: QueryOptions;
 }
 interface UseViewPricingByCheckoutIdFunction {
     (args: UseViewPricingByCheckoutIdFunctionArgs): UseQueryFunctionResult<PricingProjection>;

package/dist/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.js

@@ -9,12 +9,15 @@ const shouldInvalidate = (event) => isCheckoutItemKept(event) ||
     isCheckoutItemReplaced(event) ||
     isCheckoutItemReturned(event) ||
     isCheckoutItemReset(event);
-const useViewPricingByCheckoutId = ({ checkoutId }) => useQuery({
+const DEFAULT_QUERY_OPTIONS = {
+    refetchOnMount: "always",
+};
+const useViewPricingByCheckoutId = ({ checkoutId, queryOptions = DEFAULT_QUERY_OPTIONS, }) => useQuery({
     query: viewPricingByCheckoutId({ checkoutId }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
-        refetchOnMount: "always",
+        refetchOnMount: queryOptions.refetchOnMount,
         staleTime: Infinity,
         retry: false,
         refetchOnWindowFocus: false,

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

@@ -1,4 +1,3 @@
-import { useIntl } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { PaymentFlow } from "@lookiero/payments-front";
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -22,7 +21,10 @@ const CheckoutPaymentModal = ({ customerId, country, isFirstOrder, orderNumber,
         checkoutId: checkout?.id,
     });
     const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
-    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    const [pricing] = useViewPricingByCheckoutId({
+        checkoutId: checkout?.id,
+        queryOptions: { refetchOnMount: true },
+    });
     const [authToken, setAuthToken] = useState();
     useEffect(() => {
         const loadAuthToken = async () => setAuthToken(await getAuthToken());
@@ -30,8 +32,6 @@ const CheckoutPaymentModal = ({ customerId, country, isFirstOrder, orderNumber,
     }, [getAuthToken]);
     const basePath = useBasePath();
     const navigate = useNavigate();
-    const intl = useIntl();
-    const translateNumber = useCallback((value) => intl.formatNumber(value.amount / 100, { style: "currency", currency: value.currency }), [intl]);
     const trackCheckout = useTrackCheckout({
         checkoutId: checkout?.id,
         country,
@@ -42,14 +42,13 @@ const CheckoutPaymentModal = ({ customerId, country, isFirstOrder, orderNumber,
         const checkoutItemsKept = checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
         const checkoutItems = checkoutItemsKept?.length || 0;
         const checkoutItemId = checkout?.items.map((checkoutItem) => checkoutItem.id) || [];
-        const pendingToPay = pricing?.pendingToPay;
-        const checkoutValue = translateNumber(pendingToPay);
+        const checkoutValue = pricing?.pendingToPay.amount / 100;
         const productVariantId = checkoutItemsKept?.map(({ productVariant }) => productVariant.id) || [];
         const sizeChange = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).map(({ id }) => id) || [];
         trackCheckout({
             checkoutItems,
             checkoutItemId,
-            checkoutValue: Number(checkoutValue),
+            checkoutValue,
             isFirstOrder,
             orderNumber,
             productVariantId,
@@ -65,7 +64,6 @@ const CheckoutPaymentModal = ({ customerId, country, isFirstOrder, orderNumber,
         orderNumber,
         pricing?.pendingToPay,
         trackCheckout,
-        translateNumber,
     ]);
     const [submitCheckout] = useSubmitCheckout({
         checkoutId: checkout?.id,
@@ -76,14 +74,12 @@ const CheckoutPaymentModal = ({ customerId, country, isFirstOrder, orderNumber,
         logger,
     });
     useEffect(() => {
-        if (paymentFlowPayload && sizeChangeEnabled !== undefined) {
+        if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
             submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
         }
-    }, [paymentFlowPayload, sizeChangeEnabled, submitCheckout]);
+    }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
-        dependenciesLoadedStatuses.includes(pricingStatus) &&
-        authToken;
+    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
     if (!dependenciesLoaded)
         return null;
     return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });

package/package.json

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