From 375cd9544fbb36b2fc6eb9a651a64adf82c2451a Mon Sep 17 00:00:00 2001
From: Yair Dovrat <yair@cloudflare.com>
Date: Fri, 24 Nov 2023 12:05:23 +0100
Subject: [PATCH] add ecommerce and clean manager event listeners

---
 assets/Pinterest.svg |  16 +++++
 src/index.ts         | 136 ++++++++++++++++++++++++++++++-------------
 2 files changed, 113 insertions(+), 39 deletions(-)
 create mode 100644 assets/Pinterest.svg

diff --git a/assets/Pinterest.svg b/assets/Pinterest.svg
new file mode 100644
index 0000000..9ebab6f
--- /dev/null
+++ b/assets/Pinterest.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144 144" enable-background="new 0 0 144 144" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#BD081C" d="M71.9,5.4C35.1,5.4,5.3,35.2,5.3,72c0,28.2,17.5,52.3,42.3,62c-0.6-5.3-1.1-13.3,0.2-19.1
+			c1.2-5.2,7.8-33.1,7.8-33.1s-2-4-2-9.9c0-9.3,5.4-16.2,12-16.2c5.7,0,8.4,4.3,8.4,9.4c0,5.7-3.6,14.3-5.5,22.2
+			c-1.6,6.6,3.3,12,9.9,12c11.8,0,20.9-12.5,20.9-30.5c0-15.9-11.5-27.1-27.8-27.1c-18.9,0-30.1,14.2-30.1,28.9
+			c0,5.7,2.2,11.9,5,15.2c0.5,0.7,0.6,1.2,0.5,1.9c-0.5,2.1-1.6,6.6-1.8,7.5c-0.3,1.2-1,1.5-2.2,0.9c-8.3-3.9-13.5-16-13.5-25.8
+			c0-21,15.3-40.3,44-40.3c23.1,0,41,16.5,41,38.4c0,22.9-14.5,41.4-34.5,41.4c-6.7,0-13.1-3.5-15.3-7.6c0,0-3.3,12.7-4.1,15.8
+			c-1.5,5.8-5.6,13-8.3,17.5c6.2,1.9,12.8,3,19.7,3c36.8,0,66.6-29.8,66.6-66.6C138.5,35.2,108.7,5.4,71.9,5.4z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/index.ts b/src/index.ts
index 102e690..be23806 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,76 @@ export type RequestBodyType = {
   ed?: string
 }
 
+// Should we make EcommerceType part of ComponentSettings? It will be used on every MC with ecommerce support
+type EcommerceType = {
+  order_id: number | string
+  currency: string
+  revenue: number | string
+  total: number | string
+  value: number | string
+  quantity: number | string
+  products: Product[] | null
+  checkout_id: number | string
+  affiliation: string
+  shipping: number | string
+  tax: number | string
+  discount: number | string
+  coupon: string
+  creative: string
+  query: string
+  step: number | string
+  payment_type: string
+}
+
+// Should we make Product part of ComponentSettings? It will be used on every MC with ecommerce support
+export type Product = {
+  product_id: number | string
+  sku: number | string
+  name: string
+  category: string
+  brand: string
+  price: number | string
+  quantity: number
+  variant: string
+  currency: string
+  value: number | string
+  position: number | string
+  coupon: number | string
+}
+
+const mapEcommerceData = (ecommerce: EcommerceType) => {
+  const transformedProductData: Record<string, string | number> = {}
+  if (!ecommerce.products) {
+    return
+  } else {
+    ecommerce.products.forEach((product, index) => {
+      ;[
+        'product_id',
+        'sku',
+        'category',
+        'name',
+        'brand',
+        'variant',
+        'price',
+      ].forEach(prop => {
+        const key = `product_${prop}[${index}]`
+        transformedProductData[key] =
+          product[prop as keyof Product] || product.sku
+      })
+    })
+  }
+
+  const ecommerceData = {
+    order_id: ecommerce.order_id,
+    currency: ecommerce.currency,
+    value: ecommerce.revenue || ecommerce.total || ecommerce.value,
+    order_quantity: ecommerce.quantity,
+    ...transformedProductData,
+  }
+
+  return ecommerceData
+}
+
 export const getRequestBody = (
   eventType: string,
   event: MCEvent,
@@ -44,7 +114,7 @@ export const getRequestBody = (
     event: eventType,
   }
 
-  const { 'pd[em]': pdem, tid, ...cleanPayload } = payload
+  const { 'pd[em]': pdem, tid, ecommerce, ...cleanPayload } = payload
 
   // pd - partner data
   if (pdem) {
@@ -53,11 +123,29 @@ export const getRequestBody = (
 
   requestBody['pd[tm]'] = payload.tm || 'pinterest-mc'
 
+  // match  event types to Pinterest's default
+
+  if (ecommerce) {
+    switch (eventType) {
+      case 'Product Added':
+        requestBody.event = 'addtocart'
+        break
+      case 'Order Completed':
+        requestBody.event = 'checkout'
+        break
+    }
+    // include all ecommerce parameters
+
+    const ecommerceData: any = mapEcommerceData(ecommerce) // not sure how to get read of this any!
+    for (const key in ecommerceData) {
+      cleanPayload[key] = ecommerceData[key]
+    }
+  }
+
   if (Object.keys(cleanPayload).length) {
-    // event data
+    // event data is created, note that it also holds the ecommerce parameters
     requestBody['ed'] = JSON.stringify(cleanPayload)
   }
-
   return requestBody
 }
 
@@ -86,43 +174,13 @@ export const handler = (
 }
 
 export default async function (manager: Manager, settings: ComponentSettings) {
-  manager.addEventListener('pageview', event => {
-    handler('pagevisit', event, settings)
-  })
-
-  manager.addEventListener('addtocart', event => {
-    handler('addtocart', event, settings)
-  })
-
-  manager.addEventListener('checkout', event => {
-    handler('checkout', event, settings)
-  })
-
-  manager.addEventListener('lead', event => {
-    handler('lead', event, settings)
-  })
-
-  manager.addEventListener('signup', event => {
-    handler('signup', event, settings)
-  })
-
-  manager.addEventListener('viewcategory', event => {
-    handler('viewcategory', event, settings)
-  })
-  manager.addEventListener('watchvideo', event => {
-    handler('watchVideo', event, settings)
-  })
-
-  manager.addEventListener('custom', event => {
-    handler('custom', event, settings)
-  })
-
-  manager.addEventListener('search', event => {
-    handler('search', event, settings)
+  manager.addEventListener('event', event => {
+    const eventType = event.payload.ev
+    handler(eventType, event, settings)
   })
 
-  manager.addEventListener('userdefinedevent', event => {
-    const userDefinedEvent: string = event.payload.userDefinedEvent
-    handler(userDefinedEvent, event, settings)
+  manager.addEventListener('ecommerce', event => {
+    const eventType = event.payload.ev
+    handler(eventType, event, settings)
   })
 }