fix: add item_id to dataLayer for bundles

Author: malessani

components/data/GTMProvider/index.tsx

@@ -88,6 +88,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
           orders: ["line_items"],
           line_items: [
             "sku_code",
+            "bundle_code",
             "name",
             "total_amount_float",
             "currency_code",

specs/e2e/GTM.spec.ts

@@ -37,6 +37,11 @@ test.describe("multi shipments", () => {
     expect(dataLayer[0].ecommerce.currency).toBe("EUR")
     expect(dataLayer[0].ecommerce.value).toBe(244)
     expect(dataLayer[0].ecommerce.items?.length).toBe(2)
+    expect(
+      dataLayer[0].ecommerce.items?.filter(
+        (item) => item?.item_id === "CANVASAU000000FFFFFF1824"
+      )
+    ).toHaveLength(1)
 
     await checkoutPage.checkStep("Shipping", "open")
     await checkoutPage.page.waitForTimeout(TIMEOUT)
@@ -362,3 +367,79 @@ test.describe("with digital products", () => {
     expect(dataLayer[0].ecommerce.tax).toBe(3.3)
   })
 })
+
+test.describe("with bundle", () => {
+  const customerEmail = faker.internet.email().toLocaleLowerCase()
+
+  test.use({
+    defaultParams: {
+      order: "with-items",
+      orderAttributes: {
+        customer_email: customerEmail,
+      },
+      organization: {
+        gtm_id_test: "GTM-123456",
+      },
+      lineItemsAttributes: [{ bundle_code: "SHIRTSETSINGLE", quantity: 1 }],
+      addresses: {
+        billingAddress: euAddress,
+        sameShippingAddress: true,
+      },
+    },
+  })
+
+  test("check payment and purchase", async ({ checkoutPage }) => {
+    await checkoutPage.checkOrderSummary("Order Summary")
+    let dataLayer = await checkoutPage.getDataLayer("begin_checkout")
+    expect(dataLayer.length).toBe(1)
+    expect(dataLayer[0].ecommerce.currency).toBe("EUR")
+    expect(dataLayer[0].ecommerce.value).toBe(105)
+    expect(
+      dataLayer[0].ecommerce.items?.filter(
+        (item) => item?.item_id === "SHIRTSETSINGLE"
+      )
+    ).toHaveLength(1)
+
+    expect(dataLayer[0].ecommerce.items?.length).toBe(1)
+
+    await checkoutPage.checkStep("Shipping", "open")
+
+    await checkoutPage.selectShippingMethod({ text: "Standard Shipping" })
+
+    await checkoutPage.save("Shipping")
+
+    dataLayer = await checkoutPage.getDataLayer("add_shipping_info")
+    expect(dataLayer.length).toBe(1)
+    expect(dataLayer[0].ecommerce.currency).toBe("EUR")
+    expect(dataLayer[0].ecommerce.shipping_tier).toBe("Standard Shipping")
+    expect(dataLayer[0].ecommerce.value).toBe(0)
+    expect(dataLayer[0].ecommerce.items?.length).toBe(2)
+
+    await checkoutPage.selectPayment("stripe")
+
+    await checkoutPage.setPayment("stripe")
+
+    await checkoutPage.save("Payment")
+
+    dataLayer = await checkoutPage.getDataLayer("add_payment_info")
+    expect(dataLayer.length).toBe(1)
+    expect(dataLayer[0].ecommerce.currency).toBe("EUR")
+    expect(dataLayer[0].ecommerce.payment_type).toBe("Stripe Payment")
+    expect(dataLayer[0].ecommerce.value).toBe(10)
+    expect(dataLayer[0].ecommerce.items?.length).toBe(1)
+
+    dataLayer = await checkoutPage.getDataLayer("purchase")
+    expect(dataLayer.length).toBe(1)
+    expect(dataLayer[0].ecommerce.currency).toBe("EUR")
+    expect(dataLayer[0].ecommerce.value).toBe(115)
+    expect(dataLayer[0].ecommerce.shipping).toBe(0)
+    expect(dataLayer[0].ecommerce.tax).toBe(0)
+
+    const orderNumber = await checkoutPage.getOrderNumber()
+
+    expect(dataLayer[0].ecommerce.transaction_id).toBe(
+      parseInt(orderNumber.replace("#", ""))
+    )
+    expect(dataLayer[0].ecommerce.items?.length).toBe(1)
+  })
+})