fix cart analytics (#2388)

* Make tests fail * fix cart provider analytics * add changeset
Shopify · Dec 12, 2022 · 9c3dd65 · 9c3dd65
1 parent f335656
commit 9c3dd65
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 19 deletions.
diff --git a/.changeset/thick-paws-float.md b/.changeset/thick-paws-float.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix issues with cart analytics described in https://github.com/Shopify/hydrogen/issues/2382
diff --git a/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx b/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx
@@ -157,27 +157,28 @@ export function CartProvider({
   );
 
   const onCartActionOptimisticUI = useCallback(
-    (context: CartMachineContext, event: CartMachineEvent) => {
-      if (!context?.cart) return {cart: undefined};
+    (
+      context: CartMachineContext,
+      event: CartMachineEvent
+    ): Partial<CartMachineContext> => {
+      if (!context.cart) return {...context};
       switch (event.type) {
         case 'CARTLINE_REMOVE':
           return {
             ...context,
-            lastValidCart: context.cart,
             cart: {
               ...context.cart,
-              lines: context?.cart?.lines.filter(
+              lines: context.cart.lines.filter(
                 ({id}) => !event.payload.lines.includes(id)
               ),
             },
           };
         case 'CARTLINE_UPDATE':
           return {
             ...context,
-            lastValidCart: context.cart,
             cart: {
               ...context.cart,
-              lines: context.cart.lines.map((line) => {
+              lines: context?.cart?.lines.map((line) => {
                 const updatedLine = event.payload.lines.find(
                   ({id}) => id === line.id
                 );
@@ -194,7 +195,7 @@ export function CartProvider({
             },
           };
       }
-      return {cart: context.cart ? {...context.cart} : undefined};
+      return {...context};
     },
     []
   );

diff --git a/packages/hydrogen/src/components/CartProvider/tests/CartProvider.vitest.tsx b/packages/hydrogen/src/components/CartProvider/tests/CartProvider.vitest.tsx
@@ -495,7 +495,7 @@ describe('<CartProvider />', () => {
           cartLineAdd: cartLineAddSpy,
         });
 
-        const cartLinesInput = [{merchandiseId: '123'}];
+        const cartLinesInput = [{merchandiseId: 'def'}];
 
         const clientAnalyticsSpy = vi.spyOn(ClientAnalytics, 'publish');
 
@@ -613,15 +613,29 @@ describe('<CartProvider />', () => {
       });
 
       it('send analytics event after updating a cart line', async () => {
+        const cartCreateSpy = vi.fn(async () => ({
+          data: {cartCreate: {cart: cartMockWithLine}},
+        }));
+
+        const updatedCartMockLine = {
+          ...cartMock,
+          lines: {edges: [{node: getCartLineMock()}]},
+        };
+
+        updatedCartMockLine.lines.edges[0].node.quantity = 10;
+
         const cartLineUpdateSpy = vi.fn(async () => ({
-          data: {cartLinesUpdate: {cart: cartMockWithLine}},
+          data: {cartLinesUpdate: {cart: updatedCartMockLine}},
         }));
 
         const result = await useCartWithInitializedCart({
           cartLineUpdate: cartLineUpdateSpy,
+          cartCreate: cartCreateSpy,
         });
 
-        const cartLinesInput = [{id: '123', merchandiseId: '123', quantity: 2}];
+        const cartLinesInput = [
+          {id: 'abc', merchandiseId: 'def', quantity: 10},
+        ];
 
         const clientAnalyticsSpy = vi.spyOn(ClientAnalytics, 'publish');
 
@@ -638,9 +652,9 @@ describe('<CartProvider />', () => {
           true,
           {
             updatedCartLines: cartLinesInput,
-            cart: cartMockWithLine,
-            prevCart: cartFromGraphQL(cartMock),
-            oldCart: cartFromGraphQL(cartMock),
+            cart: updatedCartMockLine,
+            prevCart: cartFromGraphQL(cartMockWithLine),
+            oldCart: cartFromGraphQL(cartMockWithLine),
           }
         );
       });
@@ -657,7 +671,7 @@ describe('<CartProvider />', () => {
         });
 
         act(() => {
-          result.current.linesRemove(['123']);
+          result.current.linesRemove(['abc']);
         });
 
         expect(result.current.status).toEqual('updating');
@@ -684,7 +698,7 @@ describe('<CartProvider />', () => {
         });
 
         act(() => {
-          result.current.linesRemove(['123']);
+          result.current.linesRemove(['abc']);
         });
 
         // wait till idle
@@ -711,7 +725,7 @@ describe('<CartProvider />', () => {
         );
 
         act(() => {
-          result.current.linesRemove(['123']);
+          result.current.linesRemove(['abc']);
         });
 
         expect(onLineRemoveSpy).toBeCalledTimes(1);
@@ -739,7 +753,7 @@ describe('<CartProvider />', () => {
 
         const clientAnalyticsSpy = vi.spyOn(ClientAnalytics, 'publish');
 
-        const cartLineIds = ['123'];
+        const cartLineIds = ['abc'];
 
         act(() => {
           result.current.linesRemove(cartLineIds);

diff --git a/packages/hydrogen/src/components/CartProvider/useCartAPIStateMachine.client.tsx b/packages/hydrogen/src/components/CartProvider/useCartAPIStateMachine.client.tsx
@@ -28,6 +28,9 @@ function invokeCart(
   return {
     entry: [
       ...(options?.entryActions || []),
+      assign({
+        lastValidCart: (context) => context?.cart,
+      }),
       'onCartActionEntry',
       'onCartActionOptimisticUI',
       action,
@@ -37,7 +40,7 @@ function invokeCart(
         target: options?.resolveTarget || 'idle',
         actions: [
           assign({
-            prevCart: (context) => context?.cart,
+            prevCart: (context) => context?.lastValidCart,
             cart: (_, event) => event?.payload?.cart,
             rawCartResult: (_, event) => event?.payload?.rawCartResult,
             errors: (_) => undefined,
@@ -48,7 +51,7 @@ function invokeCart(
         target: options?.errorTarget || 'error',
         actions: [
           assign({
-            prevCart: (context) => context?.cart,
+            prevCart: (context) => context?.lastValidCart,
             cart: (context, _) => context?.lastValidCart,
             errors: (_, event) => event?.payload?.errors,
           }),
@@ -60,6 +63,7 @@ function invokeCart(
           prevCart: (_) => undefined,
           cart: (_) => undefined,
           lastValidCart: (_) => undefined,
+          rawCartResult: (_) => undefined,
           errors: (_) => undefined,
         }),
       },