From 6706600534718ae0999c07ca82151ee2ba2888e3 Mon Sep 17 00:00:00 2001
From: Sergii Ivashchenko <sivashch@adobe.com>
Date: Wed, 29 Jan 2025 14:40:31 +0000
Subject: [PATCH] LYNX-671: Personalisation implementation in boilerplate

---
 blocks/dynamic-block/dynamic-block.css |  3 ++
 blocks/dynamic-block/dynamic-block.js  | 61 ++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 blocks/dynamic-block/dynamic-block.css
 create mode 100644 blocks/dynamic-block/dynamic-block.js

diff --git a/blocks/dynamic-block/dynamic-block.css b/blocks/dynamic-block/dynamic-block.css
new file mode 100644
index 0000000000..def6abe3ad
--- /dev/null
+++ b/blocks/dynamic-block/dynamic-block.css
@@ -0,0 +1,3 @@
+.dynamic-block > div:not(:last-child) {
+    display: none;
+}
\ No newline at end of file
diff --git a/blocks/dynamic-block/dynamic-block.js b/blocks/dynamic-block/dynamic-block.js
new file mode 100644
index 0000000000..dc67285b76
--- /dev/null
+++ b/blocks/dynamic-block/dynamic-block.js
@@ -0,0 +1,61 @@
+import { events } from '@dropins/tools/event-bus.js';
+import * as Cart from '@dropins/storefront-cart/api.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { getConfigValue } from '../../scripts/configs.js';
+
+const blocks = [];
+
+const executeQuery = async (query, variables) => {
+  const apiCall = new URL(await getConfigValue('commerce-core-endpoint'));
+
+  apiCall.searchParams.append('query', query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '));
+  apiCall.searchParams.append('variables', variables ? JSON.stringify(variables) : null);
+
+  const response = await fetch(apiCall, {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  return response.ok ? (await response.json()).data : null;
+};
+
+const getCustomerSegments = async () => {
+  const query = `
+    query CUSTOMER_SEGMENTS($cartId: String!){
+      customerSegments(cartId: $cartId) {
+        name
+      }
+    }
+  `;
+  try {
+    const segments = await executeQuery(
+      query,
+      { cartId: Cart.getCartDataFromCache().id },
+    );
+    if (segments === null) {
+      return [];
+    }
+    return segments?.customerSegments?.map((segment) => segment.name);
+  } catch (error) {
+    console.error('Could not retrieve customer segments', error);
+  }
+  return [];
+};
+
+const updateDynamicBlocksVisibility = async () => {
+  const customerSegments = await getCustomerSegments();
+  blocks.forEach((blockConfig, index) => {
+    const { segment } = blockConfig;
+    const block = document.querySelector(`[data-dynamic-block-key="${index}"]`);
+    block.style.display = customerSegments.includes(segment) ? '' : 'none';
+  });
+};
+
+export default function decorate(block) {
+  block.style.display = 'none';
+  blocks.push(readBlockConfig(block));
+  block.setAttribute('data-dynamic-block-key', blocks.length - 1);
+}
+
+events.on('cart/initialized', () => { updateDynamicBlocksVisibility(); });
+events.on('cart/updated', () => { updateDynamicBlocksVisibility(); });