Merge pull request #66 from deco-sites/fix/events

fix: Events and remove Partytown
deco-sites · Nov 7, 2023 · d00dbde · d00dbde
2 parents f7b8ead + b289107
commit d00dbde
Show file tree

Hide file tree

Showing 19 changed files with 198 additions and 152 deletions.
diff --git a/components/Analytics.tsx b/components/Analytics.tsx
@@ -1,34 +1,63 @@
-import { sendEvent } from "$store/sdk/analytics.tsx";
 import type { AnalyticsEvent } from "apps/commerce/types.ts";
 import { scriptAsDataURI } from "apps/utils/dataURI.ts";
 
-const snippet = (id: string, event: AnalyticsEvent) => {
-  const element = document.getElementById(id);
-
-  if (!element) {
-    console.warn(
-      `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
-    );
-  } else {
-    element.addEventListener(
-      "click",
-      () => window.DECO.events.dispatch(event),
-    );
-  }
-};
-
 /**
  * This function is usefull for sending events on click. Works with both Server and Islands components
  */
 export const SendEventOnClick = <E extends AnalyticsEvent>({ event, id }: {
   event: E;
   id: string;
-}) => <script defer src={scriptAsDataURI(snippet, id, event)} />;
+}) => (
+  <script
+    defer
+    src={scriptAsDataURI(
+      (id: string, event: AnalyticsEvent) => {
+        const elem = document.getElementById(id);
 
-/**
- * This componente should be used when want to send event for rendered componentes.
- * This behavior is usefull for view_* events.
- */
-export const SendEventOnLoad = <E extends AnalyticsEvent>(
-  { event }: { event: E },
-) => <script defer src={scriptAsDataURI(sendEvent, event)} />;
+        if (!elem) {
+          return console.warn(
+            `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
+          );
+        }
+
+        elem.addEventListener("click", () => {
+          window.DECO.events.dispatch(event);
+        });
+      },
+      id,
+      event,
+    )}
+  />
+);
+
+export const SendEventOnView = <E extends AnalyticsEvent>(
+  { event, id }: { event: E; id: string },
+) => (
+  <script
+    defer
+    src={scriptAsDataURI(
+      (id: string, event: E) => {
+        const elem = document.getElementById(id);
+
+        if (!elem) {
+          return console.warn(
+            `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
+          );
+        }
+
+        const observer = new IntersectionObserver((items) => {
+          for (const item of items) {
+            if (!item.isIntersecting) continue;
+
+            window.DECO.events.dispatch(event);
+            observer.unobserve(elem);
+          }
+        });
+
+        observer.observe(elem);
+      },
+      id,
+      event,
+    )}
+  />
+);
diff --git a/components/header/Buttons/Cart/vtex.tsx b/components/header/Buttons/Cart/vtex.tsx
@@ -3,8 +3,12 @@ import Button from "./common.tsx";
 
 function CartButton() {
   const { loading, cart } = useCart();
-  const { totalizers = [], items = [], marketingData, storePreferencesData } =
-    cart.value ?? {};
+  const {
+    totalizers = [],
+    items = [],
+    marketingData,
+    storePreferencesData,
+  } = cart.value ?? {};
   const coupon = marketingData?.coupon ?? undefined;
   const currency = storePreferencesData?.currencyCode ?? "BRL";
   const total = totalizers.find((item) => item.id === "Items")?.value ?? 0;

diff --git a/components/minicart/common/CartItem.tsx b/components/minicart/common/CartItem.tsx
@@ -112,11 +112,11 @@ function CartItem(
             await onUpdateQuantity(quantity, index);
 
             if (analyticsItem) {
-              analyticsItem.quantity = diff;
-
               sendEvent({
                 name: diff < 0 ? "remove_from_cart" : "add_to_cart",
-                params: { items: [analyticsItem] },
+                params: {
+                  items: [{ ...analyticsItem, quantity: Math.abs(diff) }],
+                },
               });
             }
           })}

diff --git a/components/product/AddToCartButton/common.tsx b/components/product/AddToCartButton/common.tsx
@@ -1,28 +1,16 @@
 import Button from "$store/components/ui/Button.tsx";
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import { useUI } from "$store/sdk/useUI.ts";
+import { AddToCartParams } from "apps/commerce/types.ts";
 import { useState } from "preact/hooks";
 
 export interface Props {
   /** @description: sku name */
-  name: string;
-  productID: string;
-  productGroupID: string;
-  price: number;
-  discount: number;
-  url: string;
+  eventParams: AddToCartParams;
   onAddItem: () => Promise<void>;
 }
 
-const useAddToCart = ({
-  price,
-  name,
-  discount,
-  productGroupID,
-  productID,
-  url,
-  onAddItem,
-}: Props) => {
+const useAddToCart = ({ eventParams, onAddItem }: Props) => {
   const [loading, setLoading] = useState(false);
   const { displayCart } = useUI();
 
@@ -37,17 +25,7 @@ const useAddToCart = ({
 
       sendEvent({
         name: "add_to_cart",
-        params: {
-          items: [{
-            quantity: 1,
-            price,
-            item_url: url,
-            item_name: name,
-            discount: discount,
-            item_id: productID,
-            item_variant: name,
-          }],
-        },
+        params: eventParams,
       });
 
       displayCart.value = true;
@@ -56,14 +34,14 @@ const useAddToCart = ({
     }
   };
 
-  return { onClick, loading };
+  return { onClick, loading, "data-deco": "add-to-cart" };
 };
 
 export default function AddToCartButton(props: Props) {
   const btnProps = useAddToCart(props);
 
   return (
-    <Button {...btnProps} data-deco="add-to-cart" class="btn-primary">
+    <Button {...btnProps} class="btn-primary">
       Adicionar à Sacola
     </Button>
   );

diff --git a/components/product/AddToCartButton/linx.tsx b/components/product/AddToCartButton/linx.tsx
@@ -1,18 +1,21 @@
 import { useCart } from "apps/linx/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export type Props = Omit<BtnProps, "onAddItem" | "platform">;
+export type Props = Omit<BtnProps, "onAddItem"> & {
+  productID: string;
+  productGroupID: string;
+};
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productGroupID, productID, eventParams }: Props) {
   const { addItem } = useCart();
 
   return (
     <Button
-      {...props}
+      eventParams={eventParams}
       onAddItem={() =>
         addItem({
-          ProductID: props.productGroupID,
-          SkuID: props.productID,
+          ProductID: productGroupID,
+          SkuID: productID,
           Quantity: 1,
         })}
     />

diff --git a/components/product/AddToCartButton/shopify.tsx b/components/product/AddToCartButton/shopify.tsx
@@ -1,18 +1,20 @@
 import { useCart } from "apps/shopify/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export type Props = Omit<BtnProps, "onAddItem" | "platform">;
+export type Props = Omit<BtnProps, "onAddItem"> & {
+  productID: string;
+};
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productID, eventParams }: Props) {
   const { addItems } = useCart();
   const onAddItem = () =>
     addItems({
       lines: {
-        merchandiseId: props.productID,
+        merchandiseId: productID,
       },
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/vnda.tsx b/components/product/AddToCartButton/vnda.tsx
@@ -2,22 +2,25 @@ import { PropertyValue } from "apps/commerce/types.ts";
 import { useCart } from "apps/vnda/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  productID: string;
   additionalProperty: PropertyValue[];
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton(
+  { productID, additionalProperty, eventParams }: Props,
+) {
   const { addItem } = useCart();
   const onAddItem = () =>
     addItem({
       quantity: 1,
-      itemId: props.productID,
+      itemId: productID,
       attributes: Object.fromEntries(
-        props.additionalProperty.map(({ name, value }) => [name, value]),
+        additionalProperty.map(({ name, value }) => [name, value]),
       ),
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/vtex.tsx b/components/product/AddToCartButton/vtex.tsx
@@ -1,22 +1,23 @@
 import { useCart } from "apps/vtex/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+export interface Props extends Omit<BtnProps, "onAddItem"> {
   seller: string;
+  productID: string;
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ seller, productID, eventParams }: Props) {
   const { addItems } = useCart();
   const onAddItem = () =>
     addItems({
       orderItems: [{
-        id: props.productID,
-        seller: props.seller,
+        id: productID,
+        seller: seller,
         quantity: 1,
       }],
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/wake.tsx b/components/product/AddToCartButton/wake.tsx
@@ -1,19 +1,19 @@
 import { useCart } from "apps/wake/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-// deno-lint-ignore no-empty-interface
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  productID: string;
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productID, eventParams }: Props) {
   const { addItem } = useCart();
   const onAddItem = () =>
     addItem({
-      productVariantId: Number(props.productID),
+      productVariantId: Number(productID),
       quantity: 1,
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;