LYNX-759: Separate requests for customer group and segment

blocks/targeted-block/condition-matcher.js

@@ -1,5 +1,5 @@
 function rulesMatched(activeRules, rules) {
-  return activeRules && rules.some((rule) => activeRules.includes(rule));
+  return activeRules && rules.some((rule) => activeRules.includes(rule.trim()));
 }
 
 const groupMatched = (activeGroup, groups) => groups.includes(activeGroup);
@@ -13,14 +13,14 @@ export default function conditionsMatched(activeRules, blockConfig) {
   } = blockConfig;
 
   const activeSegments = activeRules.customerSegments?.map(
-    (segment) => segment.name,
+    (segment) => segment.name.trim(),
   );
-  const activeGroup = activeRules.customerGroup?.name;
-  const activeCartRules = activeRules.cart?.rules?.map(
-    (rule) => rule.name,
+  const activeGroup = activeRules.customerGroup?.name.trim();
+  const activeCartRules = activeRules.cart?.map(
+    (rule) => rule.name.trim(),
   );
   const activePriceRules = activeRules.catalogPriceRules?.rules?.map(
-    (rule) => rule.name,
+    (rule) => rule.name.trim(),
   );
 
   if (customerSegments !== undefined && !rulesMatched(activeSegments, customerSegments.split(','))) {

blocks/targeted-block/graphql.js

@@ -0,0 +1,119 @@
+import { fetchGraphQl, setFetchGraphQlHeader } from '@dropins/tools/fetch-graphql.js';
+import { getHeaders } from '../../scripts/configs.js';
+
+const addCartHeaders = async () => {
+  const cartHeaders = await getHeaders('cart');
+  cartHeaders.keys().forEach((key) => {
+    setFetchGraphQlHeader(key, cartHeaders[key]);
+  });
+};
+
+const getCustomerGroups = async () => {
+  try {
+    addCartHeaders();
+    const response = await fetchGraphQl(
+      `query {
+          customerGroup {
+            name
+          }
+        }
+      `,
+      {
+        method: 'GET',
+      },
+    );
+    return response.data?.customerGroup;
+  } catch (error) {
+    console.error('Could not retrieve customer groups', error);
+  }
+  return [];
+};
+
+const getCustomerSegments = async () => {
+  try {
+    addCartHeaders();
+    const response = await fetchGraphQl(
+      `query {
+          customer {
+            segments {
+              name
+            }
+          }
+        }
+      `,
+      {
+        method: 'GET',
+      },
+    );
+    return response.data?.customer?.segments || [];
+  } catch (error) {
+    console.error('Could not retrieve customer segments', error);
+  }
+  return [];
+};
+
+const getCartRules = async (cartId) => {
+  try {
+    addCartHeaders();
+    const response = await fetchGraphQl(
+      `query TB_GET_CUSTOMER_SEGMENTS_CART_RULES($cartId: String!){
+          customerSegments(cartId: $cartId) {
+            name
+          }
+          cart(cart_id: $cartId) {
+            rules {
+              name
+            }
+          }
+        }
+      `,
+      {
+        method: 'GET',
+        variables: { cartId },
+      },
+    );
+    return response.data || [];
+  } catch (error) {
+    console.error('Could not retrieve customer cart rules', error);
+  }
+  return [];
+};
+
+const getCatalogPriceRules = async (sku) => {
+  try {
+    const query = `query TB_GET_CATALOG_PRICE_RULES($sku: String!) {
+          products(filter: {
+            sku: {
+              eq: $sku
+            } 
+          })
+          {
+            items {
+              rules {
+                name
+              }
+            }
+          }
+        }
+      `;
+    addCartHeaders();
+    const response = await fetchGraphQl(
+      query,
+      {
+        method: 'GET',
+        variables: { sku },
+      },
+    );
+    return response.data?.products?.items[0];
+  } catch (error) {
+    console.error(`Could not retrieve catalog price rules for ${sku}`, error);
+  }
+  return [];
+};
+
+export {
+  getCustomerGroups,
+  getCustomerSegments,
+  getCartRules,
+  getCatalogPriceRules,
+};

blocks/targeted-block/targeted-block.js

@@ -1,26 +1,42 @@
 import { events } from '@dropins/tools/event-bus.js';
 import * as Cart from '@dropins/storefront-cart/api.js';
-import { getActiveRules, getCatalogPriceRules } from './qraphql.js';
+import {
+  getCustomerGroups,
+  getCustomerSegments,
+  getCartRules,
+  getCatalogPriceRules,
+} from './graphql.js';
 import conditionsMatched from './condition-matcher.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
+import { getUserTokenCookie } from '../../scripts/initializers/index.js';
 
 const blocks = [];
 const displayedBlockTypes = [];
 
 const updateTargetedBlocksVisibility = async () => {
-  const activeRules = (Cart.getCartDataFromCache() === null) ? {
+  const activeRules = {
     customerSegments: [],
-    customerGroup: [],
-    cart: {
-      rules: [],
-    },
+    customerGroup: await getCustomerGroups(),
+    cart: [],
     catalogPriceRules: [],
-  } : await getActiveRules(Cart.getCartDataFromCache().id);
+  };
+
+  if (Cart.getCartDataFromCache() !== null) {
+    const cartId = Cart.getCartDataFromCache().id || null;
+    if (cartId) {
+      const response = await getCartRules(cartId);
+      activeRules.cart = response.cart?.rules || [];
+      activeRules.customerSegments = response.customerSegments || [];
+    }
+  }
+
+  if (Cart.getCartDataFromCache() === null && getUserTokenCookie()) {
+    activeRules.customerSegments = await getCustomerSegments();
+  }
 
   // eslint-disable-next-line no-underscore-dangle
   const productData = events._lastEvent?.['pdp/data']?.payload ?? null;
-
   if (productData?.sku) {
     activeRules.catalogPriceRules = await getCatalogPriceRules(productData.sku);
   }
@@ -53,6 +69,10 @@ export default function decorate(block) {
   block.setAttribute('data-targeted-block-key', blocks.length - 1);
 }
 
+events.on('cart/reset', () => {
+  updateTargetedBlocksVisibility();
+}, { eager: true });
+
 events.on('cart/initialized', () => {
   updateTargetedBlocksVisibility();
 }, { eager: true });