feat: New update function to ga4 ecommerce events (#107)

#### What is the purpose of this pull request?

Implements the update function working as described on
[docs](https://developers.google.com/tag-manager/ecommerce-ga4?hl=pt-br#measure_promotion_clicks)
and following the line implemented in
[faststore](https://github.com/vtex-sites/nextjs.store/blob/chore/add-sentry/src/sdk/analytics/index.tsx#L18:L18),
isolating the event data and update the event with the correct body

#### What problem is this solving?

Send the events to `window.dataLayer` in the correct format

#### How should this be manually tested?
check if the events in dataLayer are in the correct format `{event: ...,
ecommerce: { ... } }`
#### Screenshots or example usage

#### Types of changes

* [ ] Bug fix (a non-breaking change which fixes an issue)
* [X] New feature (a non-breaking change which adds functionality)
* [ ] Breaking change (fix or feature that would cause existing
functionality to change)
* [ ] Requires change to documentation, which has been updated
accordingly.

react/modules/gaEvents.ts

@@ -45,7 +45,7 @@ export function viewItem(eventData: PixelMessage['data']) {
     items: [item],
   }
 
-  updateEcommerce(eventName, data)
+  updateEcommerce(eventName, { ecommerce: data })
 }
 
 export function viewItemList(eventData: PixelMessage['data']) {
@@ -62,7 +62,7 @@ export function viewItemList(eventData: PixelMessage['data']) {
     items,
   }
 
-  updateEcommerce(eventName, data)
+  updateEcommerce(eventName, { ecommerce: data })
 }
 
 export function selectItem(eventData: PixelMessage['data']) {
@@ -100,7 +100,7 @@ export function selectItem(eventData: PixelMessage['data']) {
     items: [item],
   }
 
-  updateEcommerce(eventName, data)
+  updateEcommerce(eventName, { ecommerce: data })
 }
 
 export function selectPromotion(eventData: PixelMessage['data']) {
@@ -116,5 +116,5 @@ export function selectPromotion(eventData: PixelMessage['data']) {
     promotion_name: promotion.name,
   }
 
-  updateEcommerce(eventName, data)
+  updateEcommerce(eventName, { ecommerce: data })
 }

react/modules/updateEcommerce.ts

@@ -4,25 +4,7 @@ export default function updateEcommerce(
   eventName: string,
   data: Record<string, unknown>
 ) {
-  const eventIndex = window.dataLayer.findIndex(
-    gtmEvent => gtmEvent.event && gtmEvent.event === eventName
-  )
+  push({ ecommerce: null, ecommerceV2: null })
 
-  if (eventIndex >= 0) {
-    window.dataLayer.splice(eventIndex, 1)
-  }
-
-  if (Object.keys(data).includes('ecommerce')) {
-    const ecommerceNullIndex = window.dataLayer.findIndex(
-      gtmEvent => gtmEvent.ecommerce === null
-    )
-
-    if (ecommerceNullIndex >= 0) {
-      window.dataLayer.splice(ecommerceNullIndex, 1)
-    }
-
-    push({ ecommerce: null })
-  }
-
-  push(data)
+  data.event ? push(data) : push({ event: eventName, ...data })
 }