perf: Get order from callback

Author: acasazza

components/composite/StepCustomer/index.tsx

@@ -1,3 +1,4 @@
+import type { Order } from "@commercelayer/sdk"
 import classNames from "classnames"
 import { Fragment, useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -113,8 +114,10 @@ export const StepCustomer: React.FC<Props> = () => {
     setDisabledShipToDifferentAddress(disableToggle)
   }
 
-  const handleSave = async () => {
+  const handleSave = async (params: { success: boolean; order?: Order }) => {
+    console.log("params", params)
     setIsLocalLoader(true)
+    debugger
     await setAddresses()
 
     // it is used temporarily to scroll

components/composite/StepPlaceOrder/index.tsx

@@ -1,3 +1,4 @@
+import type { Order } from "@commercelayer/sdk"
 import { useContext, useState } from "react"
 import { Trans, useTranslation } from "react-i18next"
 
@@ -44,10 +45,16 @@ const StepPlaceOrder: React.FC<Props> = ({
 
   const { placeOrder } = appCtx
 
-  const handlePlaceOrder = async ({ placed }: { placed: boolean }) => {
+  const handlePlaceOrder = async ({
+    placed,
+    order,
+  }: {
+    placed: boolean
+    order?: Order
+  }) => {
     if (placed) {
       setIsPlacingOrder(true)
-      await placeOrder()
+      await placeOrder(order)
       if (gtmCtx?.firePurchase && gtmCtx?.fireAddPaymentInfo) {
         await gtmCtx.fireAddPaymentInfo()
         await gtmCtx.firePurchase()

components/data/AppProvider/index.tsx

@@ -1,7 +1,7 @@
 import CommerceLayer, {
-  ShippingMethod as ShippingMethodCollection,
-  PaymentMethod,
-  Order,
+  type ShippingMethod as ShippingMethodCollection,
+  type PaymentMethod,
+  type Order,
 } from "@commercelayer/sdk"
 import { changeLanguage } from "i18next"
 import { createContext, useEffect, useReducer, useRef } from "react"
@@ -103,6 +103,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
   })
 
   const getOrder = (order: Order) => {
+    console.log("order", order)
     orderRef.current = order
   }
 
@@ -143,15 +144,13 @@ export const AppProvider: React.FC<AppProviderProps> = ({
     })
   }
 
-  const setAddresses = async () => {
+  const setAddresses = async (order?: Order) => {
     dispatch({ type: ActionType.START_LOADING })
-
-    const order = await getOrderFromRef()
-
+    const currentOrder = order ?? (await getOrderFromRef())
     const isShipmentRequired = await checkIfShipmentRequired(cl, orderId)
 
     const others = calculateSettings(
-      order,
+      currentOrder,
       isShipmentRequired,
       // FIX We are using customer addresses saved in reducer because
       // we don't receive them from fetchOrder
@@ -161,7 +160,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
     dispatch({
       type: ActionType.SET_ADDRESSES,
       payload: {
-        order,
+        order: currentOrder,
         others,
       },
     })
@@ -265,13 +264,13 @@ export const AppProvider: React.FC<AppProviderProps> = ({
     })
   }
 
-  const placeOrder = async () => {
+  const placeOrder = async (order?: Order) => {
     dispatch({ type: ActionType.START_LOADING })
-    const order = await getOrderFromRef()
+    const currentOrder = order ?? (await getOrderFromRef())
 
     dispatch({
       type: ActionType.PLACE_ORDER,
-      payload: { order },
+      payload: { order: currentOrder },
     })
   }