hlxsites · sivaschenko · Jan 28, 2025 · Jan 17, 2025 · Jan 17, 2025 · Jan 17, 2025
diff --git a/.eslintignore b/.eslintignore
@@ -2,6 +2,7 @@ helix-importer-ui
 scripts/htm.js
 scripts/acdl
 tools/picker
+tools/segments
 tools/pdp-metadata
 scripts/__dropins__
 scripts/commerce-events-collector.js

diff --git a/tools/segments/config-dev.json b/tools/segments/config-dev.json
@@ -0,0 +1,80 @@
+{
+  "total": 18,
+  "offset": 0,
+  "limit": 18,
+  "data": [
+    {
+      "key": "commerce.headers.cs.Magento-Customer-Group",
+      "value": "b6589fc6ab0dc82cf12099d1c2d40ab994e8410c"
+    },
+    {
+      "key": "commerce.headers.cs.Magento-Environment-Id",
+      "value": "0a9ae65d-c1a5-49f6-af64-1ec1ff47ab52"
+    },
+    {
+      "key": "commerce.headers.cs.Magento-Store-Code",
+      "value": "main_website_store"
+    },
+    {
+      "key": "commerce.headers.cs.Magento-Store-View-Code",
+      "value": "default"
+    },
+    {
+      "key": "commerce.headers.cs.Magento-Website-Code",
+      "value": "base"
+    },
+    {
+      "key": "commerce.headers.cs.x-api-key",
+      "value": "9753cd30401a477e816ed850c4f77e18"
+    },
+    {
+      "key": "commerce-base-currency-code",
+      "value": "USD"
+    },
+    {
+      "key": "commerce-core-endpoint",
+      "value": "http://adobecommerce247.local/graphql"
+    },
+    {
+      "key": "commerce-endpoint",
+      "value": "http://adobecommerce247.local/graphql"
+    },
+    {
+      "key": "commerce-environment",
+      "value": "Testing"
+    },
+    {
+      "key": "commerce-store-id",
+      "value": "1"
+    },
+    {
+      "key": "commerce-store-name",
+      "value": "Main Website Store"
+    },
+    {
+      "key": "commerce-store-url",
+      "value": "http://adobecommerce247.local/"
+    },
+    {
+      "key": "commerce-store-view-id",
+      "value": "1"
+    },
+    {
+      "key": "commerce-store-view-name",
+      "value": "Default Store View"
+    },
+    {
+      "key": "commerce-website-id",
+      "value": "1"
+    },
+    {
+      "key": "commerce-website-name",
+      "value": "Main Website"
+    }
+  ],
+  "columns": [
+    "key",
+    "value"
+  ],
+  ":type": "sheet"
+}
diff --git a/tools/segments/dist/index.107f8a5c.css b/tools/segments/dist/index.107f8a5c.css
diff --git a/tools/segments/dist/index.107f8a5c.css.map b/tools/segments/dist/index.107f8a5c.css.map
diff --git a/tools/segments/dist/index.353ecf70.js b/tools/segments/dist/index.353ecf70.js
diff --git a/tools/segments/dist/index.353ecf70.js.map b/tools/segments/dist/index.353ecf70.js.map
diff --git a/tools/segments/dist/index.6bf80747.css b/tools/segments/dist/index.6bf80747.css
diff --git a/tools/segments/dist/index.6bf80747.css.map b/tools/segments/dist/index.6bf80747.css.map
diff --git a/tools/segments/dist/index.html b/tools/segments/dist/index.html
@@ -0,0 +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.353ecf70.js"></script> </body></html>
diff --git a/tools/segments/package.json b/tools/segments/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "franklin-personalisation-picker",
+  "version": "1.0.0",
+  "description": "",
+  "source": "src/index.html",
+  "scripts": {
+    "watch": "parcel watch",
+    "start": "parcel src/index.html",
+    "prebuild": "rm -rf dist",
+    "build": "parcel build --public-url '.' --dist-dir dist src/index.html"
+  },
+  "author": "Rafal Janicki <[email protected]>",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@parcel/transformer-inline-string": "^2.10.1",
+    "parcel": "^2.10.1",
+    "process": "^0.11.10"
+  },
+  "dependencies": {
+    "@adobe/react-spectrum": "^3.31.1",
+    "@spectrum-icons/illustrations": "^3.6.7",
+    "@spectrum-icons/ui": "^3.6.1",
+    "@spectrum-icons/workflow": "^4.2.6",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
+  }
+}
diff --git a/tools/segments/src/index.html b/tools/segments/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8"/>
+  <title>Customer Segments Picker</title>
+  <link rel="stylesheet" href="styles.css"/>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="index.js"></script>
+</body>
+
+</html>
diff --git a/tools/segments/src/index.js b/tools/segments/src/index.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import Picker from './picker.js';
+import customerSegmentsQuery from './queries/segments.graphql.js';
+
+import './styles.css';
+
+/**
+ * Object containing all configuration files that should be exposed in the picker.
+ */
+const configFiles = {
+  'prod': 'https://main--aem-boilerplate-commerce--hlxsites.hlx.live/configs.json?sheet=prod',
+  'stage': 'https://main--aem-boilerplate-commerce--hlxsites.hlx.live/configs-stage.json',
+  'dev': 'http://localhost:3000/tools/segments/config-dev.json',
+}
+/**
+ * Default configuration to be loaded.
+ */
+const defaultConfig = 'stage';
+
+async function executeCustomerSegmentsQuery(query, config, variables = {}) {
+  const headers = {
+    'Content-Type': 'application/json',
+    'x-api-key': config['commerce.headers.cs.x-api-key'],
+    'Magento-Customer-Group': config['commerce.headers.cs.Magento-Customer-Group'],
+    'Magento-Environment-Id': config['commerce.headers.cs.Magento-Environment-Id'],
+    'Magento-Store-Code': config['commerce.headers.cs.Magento-Store-Code'],
+    'Magento-Store-View-Code': config['commerce.headers.cs.Magento-Store-View-Code'],
+    'Magento-Website-Code': config['commerce.headers.cs.Magento-Website-Code'],
+  };
+
+  const apiCall = new URL(config['commerce-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,
+  });
+
+  if (!response.ok) {
+    return null;
+  }
+
+  const queryResponse = await response.json();
+  return queryResponse.data;
+}
+
+const getCustomerSegments = async (config) => {
+  let customerSegments = [];
+  try {
+    const segments = await executeCustomerSegmentsQuery(customerSegmentsQuery, config);
+    segments?.allCustomerSegments?.forEach(segment => {
+      customerSegments.push({
+        'key': segment.name,
+        'name': segment.name,
+        'apply_to': segment.apply_to,
+      });
+    });
+  } catch (err) {
+    console.error('Could not retrieve customer segments', err);
+  }
+  return customerSegments;
+}
+
+const personalisationCategories = [
+  {
+    'key': 'segments',
+    'title': 'Customer Segments',
+    'initializer': getCustomerSegments,
+  },
+  // {
+  //   'key': 'groups',
+  //   'title': 'Customer Groups',
+  //   'initializer': null,
+  // },
+  // {
+  //   'key': 'cartRules',
+  //   'title': 'Cart Rules',
+  //   'initializer': null,
+  // },
+  // {
+  //   'key': 'catalogRules',
+  //   'title': 'Catalog Rules',
+  //   'initializer': null,
+  // },
+  // {
+  //   'key': 'utmParams',
+  //   'title': 'UTM URL Parameters',
+  //   'initializer': null,
+  // },
+];
+
+
+const app = document.getElementById("app");
+if (app) {
+  ReactDOM.render(<Picker
+    personalisationCategories={personalisationCategories}
+    configFiles={configFiles}
+    defaultConfig={defaultConfig}/>, app);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +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.353ecf70.js"></script> </body></html>