Merge pull request #454 from commercelayer/fix/rollback-app-provider-…

…logic Rollback `AppProvider` logic on fetching initial order
commercelayer · Apr 2, 2024 · 009a355 · 009a355
2 parents 3ea4bd2 + d60ede0
commit 009a355
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 24 deletions.
diff --git a/components/composite/StepPlaceOrder/index.tsx b/components/composite/StepPlaceOrder/index.tsx
@@ -59,8 +59,8 @@ const StepPlaceOrder: React.FC<Props> = ({
       setIsPlacingOrder(true)
       await placeOrder(order)
       if (gtmCtx?.firePurchase && gtmCtx?.fireAddPaymentInfo) {
-        gtmCtx.fireAddPaymentInfo(order as Order)
-        gtmCtx.firePurchase(order as Order)
+        gtmCtx.fireAddPaymentInfo()
+        gtmCtx.firePurchase()
       }
       setIsPlacingOrder(false)
     }

diff --git a/components/data/AppProvider/index.tsx b/components/data/AppProvider/index.tsx
@@ -5,7 +5,7 @@ import {
   type Order,
 } from "@commercelayer/sdk"
 import { changeLanguage } from "i18next"
-import { createContext, useEffect, useReducer, useRef } from "react"
+import { createContext, useEffect, useReducer, useRef, useState } from "react"
 
 import { ActionType, reducer } from "components/data/AppProvider/reducer"
 import {
@@ -104,6 +104,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
 }) => {
   const orderRef = useRef<Order>()
   const [state, dispatch] = useReducer(reducer, { ...initialState, isGuest })
+  const [order, setOrder] = useState<NullableType<Order>>()
 
   const cl = CommerceLayer({
     organization: slug,
@@ -113,6 +114,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
 
   const getOrder = (order: Order) => {
     orderRef.current = order
+    setOrder(order)
   }
 
   const fetchInitialOrder = async (orderId?: string, accessToken?: string) => {
@@ -300,11 +302,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
   }
 
   const getOrderFromRef = async () => {
-    if (!orderRef.current) {
-      const o = await fetchOrder(cl, orderId)
-      orderRef.current = o
-    }
-    return orderRef.current
+    return orderRef.current || (await fetchOrder(cl, orderId))
   }
 
   useEffect(() => {
@@ -319,7 +317,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
       value={{
         ...state,
         orderId,
-        order: orderRef.current,
+        order,
         accessToken,
         isGuest,
         slug,

diff --git a/components/data/AppProvider/utils.ts b/components/data/AppProvider/utils.ts
@@ -268,17 +268,7 @@ export const fetchOrder = (cl: CommerceLayerClient, orderId: string) => {
       shipments: ["shipping_method", "available_shipping_methods"],
       customer: ["customer_addresses"],
       customer_addresses: ["address"],
-      line_items: [
-        "frequency",
-        // Start fields for GTM
-        "sku_code",
-        "bundle_code",
-        "name",
-        "total_amount_float",
-        "currency_code",
-        "item_type",
-        // End fields for GTM
-      ],
+      line_items: ["frequency"],
     },
     include: [
       "shipping_address",

diff --git a/components/data/GTMProvider/index.tsx b/components/data/GTMProvider/index.tsx
@@ -10,8 +10,8 @@ import { DataLayerItemProps, DataLayerProps } from "./typings"
 
 interface GTMProviderData {
   fireAddShippingInfo: (order: Order) => void
-  fireAddPaymentInfo: (order: Order) => void
-  firePurchase: (order: Order) => void
+  fireAddPaymentInfo: () => void
+  firePurchase: () => void
 }
 
 export const GTMContext = createContext<GTMProviderData | null>(null)
@@ -119,7 +119,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
     })
   }
 
-  const fireAddPaymentInfo = (order: Order) => {
+  const fireAddPaymentInfo = () => {
     const lineItems = order?.line_items?.filter((line_item) => {
       return LINE_ITEMS_SHOPPABLE.includes(line_item.item_type as TypeAccepted)
     })
@@ -138,7 +138,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
     })
   }
 
-  const firePurchase = (order: Order) => {
+  const firePurchase = () => {
     const lineItems = order?.line_items?.filter((line_item) => {
       return LINE_ITEMS_SHOPPABLE.includes(line_item.item_type as TypeAccepted)
     })