Merge branch 'main' into PAY-5859

hlxsites · Feb 4, 2025 · 916441b · 916441b
2 parents b5d71fb + 0338293
commit 916441b
Show file tree

Hide file tree

Showing 16 changed files with 383 additions and 390 deletions.
diff --git a/blocks/dynamic-block/dynamic-block.css b/blocks/dynamic-block/dynamic-block.css
@@ -0,0 +1,3 @@
+.dynamic-block > div:not(:last-child) {
+    display: none;
+}
diff --git a/blocks/dynamic-block/dynamic-block.js b/blocks/dynamic-block/dynamic-block.js
@@ -0,0 +1,113 @@
+import { events } from '@dropins/tools/event-bus.js';
+import * as Cart from '@dropins/storefront-cart/api.js';
+import { fetchGraphQl } from '@dropins/tools/fetch-graphql.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { loadFragment } from '../fragment/fragment.js';
+
+const blocks = [];
+
+const getActiveRules = async () => {
+  try {
+    const response = await fetchGraphQl(
+      `query CUSTOMER_SEGMENTS($cartId: String!){
+          customerSegments(cartId: $cartId) {
+            name
+          }
+          CustomerGroup {
+            name
+          }
+          cart(cart_id: $cartId) {
+            rules {
+              name
+            }
+          }
+        }
+      `,
+      {
+        method: 'GET',
+        variables: {
+          cartId: Cart.getCartDataFromCache().id,
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Could not retrieve customer segments', error);
+  }
+  return [];
+};
+
+const segmentsMatched = (activeSegments, segments) => segments.filter(
+  (segment) => (activeSegments.includes(segment)),
+).length >= 1;
+
+const groupMatched = (activeGroup, groups) => groups.includes(activeGroup);
+
+const cartRulesMatched = (activeRules, rules) => rules.filter(
+  (rule) => (activeRules.includes(rule)),
+).length >= 1;
+
+const conditionsMatched = (activeRules, blockConfig) => {
+  const {
+    'customer-segments': customerSegments,
+    'customer-groups': customerGroups,
+    'cart-rules': cartRules,
+  } = blockConfig;
+
+  const activeSegments = activeRules.customerSegments?.map(
+    (segment) => segment.name,
+  );
+  const activeGroup = activeRules.CustomerGroup?.name;
+  const activeCartRules = activeRules.cart?.rules?.map(
+    (rule) => rule.name,
+  );
+
+  if (customerSegments !== undefined && !segmentsMatched(activeSegments, customerSegments.split(','))) {
+    return false;
+  }
+
+  if (customerGroups !== undefined && !groupMatched(activeGroup, customerGroups.split(','))) {
+    return false;
+  }
+
+  if (cartRules !== undefined && !cartRulesMatched(activeCartRules, cartRules.split(','))) {
+    return false;
+  }
+
+  return true;
+};
+
+const updateDynamicBlocksVisibility = async () => {
+  const activeRules = await getActiveRules();
+
+  blocks.forEach(async (blockConfig) => {
+    const index = blocks.indexOf(blockConfig);
+    const { fragment } = blockConfig;
+
+    const block = document.querySelector(`[data-dynamic-block-key="${index}"]`);
+    block.style.display = 'none';
+    if (conditionsMatched(activeRules, blockConfig)) {
+      if (fragment !== undefined) {
+        const content = await loadFragment(fragment);
+        const blockContent = document.createElement('div');
+        while (content.firstElementChild) blockContent.append(content.firstElementChild);
+        block.textContent = '';
+        block.append(blockContent);
+      }
+      block.style.display = '';
+    }
+  });
+};
+
+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();
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/tools/segments/dist/index.76406fbe.js b/tools/segments/dist/index.76406fbe.js
diff --git a/tools/segments/dist/index.e22faa19.js.map → tools/segments/dist/index.76406fbe.js.map b/tools/segments/dist/index.e22faa19.js.map → tools/segments/dist/index.76406fbe.js.map
diff --git a/tools/segments/dist/index.e22faa19.js b/tools/segments/dist/index.e22faa19.js
diff --git a/tools/segments/dist/index.html b/tools/segments/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.6bf80747.css"><meta charset="utf-8"><title>Customer Segments Picker</title><link rel="stylesheet" href="index.107f8a5c.css"></head><body> <div id="app"></div> <script type="module" src="index.e22faa19.js"></script> </body></html>
+<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.6bf80747.css"><meta charset="utf-8"><title>Customer Segments Picker</title><link rel="stylesheet" href="index.107f8a5c.css"></head><body> <div id="app"></div> <script type="module" src="index.76406fbe.js"></script> </body></html>
diff --git a/tools/segments/src/api/cartrules.graphql.js b/tools/segments/src/api/cartrules.graphql.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 Adobe
+ * All Rights Reserved.
+ */
+import executeGraphQlQuery from './query.graphql';
+import queryCache from './query.cache';
+
+const query = `
+  query {
+    allCartRules {
+      name
+    }
+  }
+`;
+
+const getCartRules = async (environment) => {
+  if (!queryCache.cartRules.length > 0) {
+    try {
+      const rules = await executeGraphQlQuery(query, environment);
+      rules?.allCartRules?.forEach(rule => {
+        queryCache.cartRules.push({
+          'name': rule.name,
+        });
+      });
+    } catch (err) {
+      console.error('Could not retrieve cart rules', err);
+    }
+  }
+  return queryCache.cartRules;
+}
+
+export default getCartRules;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.6bf80747.css"><meta charset="utf-8"><title>Customer Segments Picker</title><link rel="stylesheet" href="index.107f8a5c.css"></head><body> <div id="app"></div> <script type="module" src="index.e22faa19.js"></script> </body></html>
		<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.6bf80747.css"><meta charset="utf-8"><title>Customer Segments Picker</title><link rel="stylesheet" href="index.107f8a5c.css"></head><body> <div id="app"></div> <script type="module" src="index.76406fbe.js"></script> </body></html>