forked from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
LYNX-670: Sidekick plugin for browsing and combining personalisation …
…criteria (#281)
- Loading branch information
Showing
16 changed files
with
516 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
Oops, something went wrong.