From 12a2f3c819821d51d08c9b6dcf13e070bbab2677 Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Fri, 2 Aug 2024 13:25:23 +0700
Subject: [PATCH 1/6] Change logic of the useVIewCartPixel hook

---
 react/Minicart.tsx                 | 11 +++++++++--
 react/components/DrawerMode.tsx    |  3 +++
 react/modules/pixelHelper.ts       |  2 +-
 react/modules/useViewCartPixel.tsx | 22 +++++++++++++++-------
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/react/Minicart.tsx b/react/Minicart.tsx
index 0afae41b..3c067588 100644
--- a/react/Minicart.tsx
+++ b/react/Minicart.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import { IconCart } from 'vtex.store-icons'
 import { BackdropMode } from 'vtex.store-drawer'
 import { useOrderForm } from 'vtex.order-manager/OrderForm'
@@ -61,10 +61,12 @@ export const Minicart: FC<MinicartProps> = ({
 
   const { orderForm }: OrderFormContext = useOrderForm()
 
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const { variation, open } = useMinicartState()
   const { url: checkoutUrl } = useCheckoutURL()
 
-  useViewCartPixel(open, orderForm?.items)
+  // for Popup it uses "open" and for Drawer it uses "isDrawerOpen" to send view_cart pixel event
+  useViewCartPixel(variation === 'drawer' ? isDrawerOpen : open, orderForm?.items)
 
   if (variation === 'link') {
     return (
@@ -102,6 +104,10 @@ export const Minicart: FC<MinicartProps> = ({
     )
   }
 
+  const onDrawerVisibilityChanged = (visible: boolean) => {
+    setIsDrawerOpen(visible)
+  }
+
   return (
     <aside
       className={`${handles.minicartWrapperContainer} relative fr flex items-center`}
@@ -121,6 +127,7 @@ export const Minicart: FC<MinicartProps> = ({
               drawerSlideDirection={drawerSlideDirection}
               customPixelEventId={customPixelEventId}
               customPixelEventName={customPixelEventName}
+              onVisibilityChanged={onDrawerVisibilityChanged}
             >
               {children}
             </DrawerMode>
diff --git a/react/components/DrawerMode.tsx b/react/components/DrawerMode.tsx
index f859ee8f..c9fb92d8 100644
--- a/react/components/DrawerMode.tsx
+++ b/react/components/DrawerMode.tsx
@@ -19,6 +19,7 @@ interface Props {
   backdropMode?: ResponsiveValuesTypes.ResponsiveValue<BackdropMode>
   customPixelEventId?: string
   customPixelEventName?: PixelEventTypes.EventName
+  onVisibilityChanged?: (visible: boolean) => void
 }
 
 const DrawerMode: FC<Props> = ({
@@ -31,6 +32,7 @@ const DrawerMode: FC<Props> = ({
   backdropMode = 'visible',
   customPixelEventId,
   customPixelEventName,
+  onVisibilityChanged,
 }) => {
   const { handles } = useMinicartCssHandles()
 
@@ -41,6 +43,7 @@ const DrawerMode: FC<Props> = ({
       slideDirection={drawerSlideDirection}
       customPixelEventId={customPixelEventId}
       customPixelEventName={customPixelEventName}
+      onVisibilityChanged={onVisibilityChanged}
       customIcon={
         <MinicartIconButton
           Icon={Icon}
diff --git a/react/modules/pixelHelper.ts b/react/modules/pixelHelper.ts
index 863b345d..095072ee 100644
--- a/react/modules/pixelHelper.ts
+++ b/react/modules/pixelHelper.ts
@@ -87,7 +87,7 @@ export function transformOrderFormItems(orderFormItems: OrderForm['items']) {
   return orderFormItems.map(item => mapCartItemToPixel(item))
 }
 
-interface PixelCartItem {
+export interface PixelCartItem {
   skuId: string
   variant: string
   price: number
diff --git a/react/modules/useViewCartPixel.tsx b/react/modules/useViewCartPixel.tsx
index ae515184..0354b0e9 100644
--- a/react/modules/useViewCartPixel.tsx
+++ b/react/modules/useViewCartPixel.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { usePixel } from 'vtex.pixel-manager'
 
-import { transformOrderFormItems } from './pixelHelper'
+import { PixelCartItem, transformOrderFormItems } from './pixelHelper'
+import { debounce } from 'debounce'
 
 const useViewCartPixel = (
   isOpen: boolean,
@@ -16,11 +17,18 @@ const useViewCartPixel = (
       return
     }
 
-    push({
-      event: 'viewCart',
-      items: transformedItems,
-    })
-  }, [push, isOpen, transformedItems])
+    pushViewCart(transformedItems)
+  }, [isOpen, transformedItems])
+
+  const pushViewCart = useCallback(
+    debounce((items: PixelCartItem[]) => {
+      push({
+        event: 'viewCart',
+        items: items,
+      })
+    }, 1000),
+    [push]
+  );
 }
 
 export default useViewCartPixel

From b9f681d6152b7348d59bac7621ee257c6df7b0c2 Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Fri, 2 Aug 2024 15:14:05 +0700
Subject: [PATCH 2/6] Add useCallback

---
 react/Minicart.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/react/Minicart.tsx b/react/Minicart.tsx
index 3c067588..e5a41d34 100644
--- a/react/Minicart.tsx
+++ b/react/Minicart.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useCallback, useState } from 'react'
 import { IconCart } from 'vtex.store-icons'
 import { BackdropMode } from 'vtex.store-drawer'
 import { useOrderForm } from 'vtex.order-manager/OrderForm'
@@ -104,9 +104,9 @@ export const Minicart: FC<MinicartProps> = ({
     )
   }
 
-  const onDrawerVisibilityChanged = (visible: boolean) => {
+  const onDrawerVisibilityChanged = useCallback((visible: boolean) => {
     setIsDrawerOpen(visible)
-  }
+  }, [setIsDrawerOpen])
 
   return (
     <aside

From acdf6d9e9e6acd476076b2fe92960fb4fc6205a0 Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Fri, 2 Aug 2024 15:15:56 +0700
Subject: [PATCH 3/6] Update CHANGELOG.md

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7c11c90..1d5d70c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Drawer component onVisibilityChanged property to handle open/close state
+
+### Changed
+- Logic of the useViewCartPixel hook
+
 ## [2.67.1] - 2023-05-05
 ### Fixed
 - Fixes of i18n on readme.md accorrding to task LOC-10558.

From e1d062af358cdfb0efd771ae7885b9688f21e231 Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Fri, 2 Aug 2024 15:21:22 +0700
Subject: [PATCH 4/6] Solve prettier/lint issues

---
 react/Minicart.tsx                 | 16 +++++++++++-----
 react/modules/useViewCartPixel.tsx | 22 +++++++++++-----------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/react/Minicart.tsx b/react/Minicart.tsx
index e5a41d34..6edc1e88 100644
--- a/react/Minicart.tsx
+++ b/react/Minicart.tsx
@@ -65,8 +65,18 @@ export const Minicart: FC<MinicartProps> = ({
   const { variation, open } = useMinicartState()
   const { url: checkoutUrl } = useCheckoutURL()
 
+  const onDrawerVisibilityChanged = useCallback(
+    (visible: boolean) => {
+      setIsDrawerOpen(visible)
+    },
+    [setIsDrawerOpen]
+  )
+
   // for Popup it uses "open" and for Drawer it uses "isDrawerOpen" to send view_cart pixel event
-  useViewCartPixel(variation === 'drawer' ? isDrawerOpen : open, orderForm?.items)
+  useViewCartPixel(
+    variation === 'drawer' ? isDrawerOpen : open,
+    orderForm?.items
+  )
 
   if (variation === 'link') {
     return (
@@ -104,10 +114,6 @@ export const Minicart: FC<MinicartProps> = ({
     )
   }
 
-  const onDrawerVisibilityChanged = useCallback((visible: boolean) => {
-    setIsDrawerOpen(visible)
-  }, [setIsDrawerOpen])
-
   return (
     <aside
       className={`${handles.minicartWrapperContainer} relative fr flex items-center`}
diff --git a/react/modules/useViewCartPixel.tsx b/react/modules/useViewCartPixel.tsx
index 0354b0e9..0c6980cc 100644
--- a/react/modules/useViewCartPixel.tsx
+++ b/react/modules/useViewCartPixel.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react'
 import { usePixel } from 'vtex.pixel-manager'
+import { debounce } from 'debounce'
 
 import { PixelCartItem, transformOrderFormItems } from './pixelHelper'
-import { debounce } from 'debounce'
 
 const useViewCartPixel = (
   isOpen: boolean,
@@ -12,23 +12,23 @@ const useViewCartPixel = (
 
   const transformedItems = transformOrderFormItems(orderFormItems)
 
-  useEffect(() => {
-    if (!isOpen) {
-      return
-    }
-
-    pushViewCart(transformedItems)
-  }, [isOpen, transformedItems])
-
   const pushViewCart = useCallback(
     debounce((items: PixelCartItem[]) => {
       push({
         event: 'viewCart',
-        items: items,
+        items,
       })
     }, 1000),
     [push]
-  );
+  )
+
+  useEffect(() => {
+    if (!isOpen) {
+      return
+    }
+
+    pushViewCart(transformedItems)
+  }, [pushViewCart, isOpen, transformedItems])
 }
 
 export default useViewCartPixel

From c2dbcc5edc5c37a1cc5457d083cbd49353231120 Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Fri, 2 Aug 2024 15:32:03 +0700
Subject: [PATCH 5/6] Update the minicart test

---
 react/legacy/__tests__/MiniCartV2.test.jsx | 41 ++++++++++++++--------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/react/legacy/__tests__/MiniCartV2.test.jsx b/react/legacy/__tests__/MiniCartV2.test.jsx
index 0c2853dd..9a5dcc6c 100644
--- a/react/legacy/__tests__/MiniCartV2.test.jsx
+++ b/react/legacy/__tests__/MiniCartV2.test.jsx
@@ -1,5 +1,7 @@
+/* eslint-disable global-require */
 import React from 'react'
 import { render, wait } from '@vtex/test-tools/react'
+
 import { Minicart } from '../../Minicart'
 import { MinicartStateContext } from '../../MinicartContext'
 import { transformOrderFormItems } from '../../modules/pixelHelper'
@@ -15,11 +17,13 @@ jest.mock('vtex.order-manager/OrderForm', () => {
   const mockData = require('../__fixtures__/orderForm')
 
   return {
-    useOrderForm: jest.fn(() => ({
-      orderForm: mockData.default
-    })).mockImplementationOnce(() => ({
-      orderForm: []
-    }))
+    useOrderForm: jest
+      .fn(() => ({
+        orderForm: mockData.default,
+      }))
+      .mockImplementationOnce(() => ({
+        orderForm: [],
+      })),
   }
 })
 
@@ -43,9 +47,14 @@ describe('<MiniCart /> v2', () => {
       </MinicartStateContext.Provider>
     )
 
-    await wait(async () => {
-      jest.runAllTimers()
-    })
+    await wait(
+      async () => {
+        jest.runAllTimers()
+      },
+      {
+        timeout: 1200,
+      }
+    )
 
     const expectedPixelEvent = {
       event: 'viewCart',
@@ -55,16 +64,21 @@ describe('<MiniCart /> v2', () => {
     expect(mockedUsePixelPush).toHaveBeenCalledWith(expectedPixelEvent)
   })
 
-	it('should trigger vtex:viewCart when cart is opened and match items when cart is with products', async () => {
+  it('should trigger vtex:viewCart when cart is opened and match items when cart is with products', async () => {
     render(
       <MinicartStateContext.Provider value={minicartMockContextValue}>
         <Minicart variation="drawer" />
       </MinicartStateContext.Provider>
     )
 
-    await wait(async () => {
-      jest.runAllTimers()
-    })
+    await wait(
+      async () => {
+        jest.runAllTimers()
+      },
+      {
+        timeout: 1200,
+      }
+    )
 
     const expectedPixelEvent = {
       event: 'viewCart',
@@ -73,5 +87,4 @@ describe('<MiniCart /> v2', () => {
 
     expect(mockedUsePixelPush).toHaveBeenCalledWith(expectedPixelEvent)
   })
-
-})
\ No newline at end of file
+})

From cad4b8d34ff2a1230636bfacc6089c8a0297f84b Mon Sep 17 00:00:00 2001
From: Alex Efremov <efremov.sakha@gmail.com>
Date: Mon, 5 Aug 2024 14:08:43 +0700
Subject: [PATCH 6/6] Revert back changes in the MiniCartV2 test and update a
 Minicart default state value

---
 react/Minicart.tsx                         |  2 +-
 react/legacy/__tests__/MiniCartV2.test.jsx | 22 ++++++----------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/react/Minicart.tsx b/react/Minicart.tsx
index 6edc1e88..df94ca24 100644
--- a/react/Minicart.tsx
+++ b/react/Minicart.tsx
@@ -61,8 +61,8 @@ export const Minicart: FC<MinicartProps> = ({
 
   const { orderForm }: OrderFormContext = useOrderForm()
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const { variation, open } = useMinicartState()
+  const [isDrawerOpen, setIsDrawerOpen] = useState(open ?? false)
   const { url: checkoutUrl } = useCheckoutURL()
 
   const onDrawerVisibilityChanged = useCallback(
diff --git a/react/legacy/__tests__/MiniCartV2.test.jsx b/react/legacy/__tests__/MiniCartV2.test.jsx
index 9a5dcc6c..0f813c36 100644
--- a/react/legacy/__tests__/MiniCartV2.test.jsx
+++ b/react/legacy/__tests__/MiniCartV2.test.jsx
@@ -47,14 +47,9 @@ describe('<MiniCart /> v2', () => {
       </MinicartStateContext.Provider>
     )
 
-    await wait(
-      async () => {
-        jest.runAllTimers()
-      },
-      {
-        timeout: 1200,
-      }
-    )
+    await wait(async () => {
+      jest.runAllTimers()
+    })
 
     const expectedPixelEvent = {
       event: 'viewCart',
@@ -71,14 +66,9 @@ describe('<MiniCart /> v2', () => {
       </MinicartStateContext.Provider>
     )
 
-    await wait(
-      async () => {
-        jest.runAllTimers()
-      },
-      {
-        timeout: 1200,
-      }
-    )
+    await wait(async () => {
+      jest.runAllTimers()
+    })
 
     const expectedPixelEvent = {
       event: 'viewCart',