adobe · cod40403 · Oct 30, 2023 · Oct 30, 2023 · Nov 1, 2023 · Nov 1, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,11 @@
-helix-importer-ui
+helix-importer-ui
+scripts/htm.js
+scripts/acdl
+tools/picker
+tools/pdp-metadata
+scripts/__dropins__
+scripts/commerce-events-collector.js
+scripts/commerce-events-sdk.js
+scripts/widgets
+plugins/
+cypress/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,5 +14,13 @@ module.exports = {
     'import/extensions': ['error', { js: 'always' }], // require js file extensions in imports
     'linebreak-style': ['error', 'unix'], // enforce unix linebreaks
     'no-param-reassign': [2, { props: false }], // allow modifying properties of param
+    'no-use-before-define': [2, { functions: false }],
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error', 'info', 'debug'],
+      },
+    ],
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
   },
 };
diff --git a/.github/workflows/run-e2e-tests.yaml b/.github/workflows/run-e2e-tests.yaml
@@ -0,0 +1,25 @@
+name: Cypress E2E Tests
+on: push
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install root dependencies
+        run: npm ci
+      - name: Start server in the background
+        run: npm start &
+
+      - name: Install Cypress and run tests
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: cypress
+          browser: chrome
+          wait-on: 'http://localhost:3000'
+          config: baseUrl=http://localhost:3000
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,12 @@
 .hlx/*
 coverage/*
 logs/*
-node_modules/*
+node_modules
+.parcel-cache
 
 helix-importer-ui
 .DS_Store
 *.bak
 .idea
+# Ignore .map files in scripts/__dropins__/ directory and all its subdirectories
+scripts/__dropins__/**/*.map
diff --git a/.hlxignore b/.hlxignore
@@ -1,7 +1,13 @@
 .*
 *.md
+*.d.ts
 karma.config.js
 LICENSE
 package.json
 package-lock.json
 test/*
+postinstall.js
+build.mjs
+tools/picker/src/*
+cypress/
+tools/pdp-metadata/*
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+; force @adobe namespaced packages to be installed from npmjs.org
+@adobe:registry=https://registry.npmjs.org
diff --git a/404.html b/404.html
@@ -3,13 +3,22 @@
 
 <head>
   <title>Page not found</title>
+  <script type="importmap">
+    {
+        "imports": {
+            "@dropins/tools/": "/scripts/__dropins__/tools/",
+            "@dropins/storefront-cart/": "/scripts/__dropins__/storefront-cart/",
+            "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
+        }
+    }
+  </script>
   <script type="text/javascript">
     window.isErrorPage = true;
     window.errorCode = '404';
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">
-  <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
+  <script src="/scripts/scripts.js" type="module"></script>
   <script type="module">
     window.addEventListener('load', () => {
       if (document.referrer) {
@@ -33,9 +42,13 @@
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
       align-items: center;
+      display: flex;
+      margin: 0 auto;
+      max-width: 1264px;
+      min-height: calc(100vh - var(--nav-height));
+      padding: 0 32px;
+      width: 100%;
     }
 
     main.error .error-number {

diff --git a/README.md b/README.md
@@ -1,13 +1,28 @@
-# Your Project's Title...
-Your project's description...
+# Edge Delivery Services + Adobe Commerce Boilerplate
+This project boilerplate is for Edge Delivery Services projects that integrate with Adobe Commerce.
+
+## Documentation
+https://experienceleague.adobe.com/developer/commerce/storefront/
 
 ## Environments
 - Preview: https://main--{repo}--{owner}.aem.page/
 - Live: https://main--{repo}--{owner}.aem.live/
 
+## Pre-requisites
+
+Out of the box, this project template uses a pre-configured Adobe Commerce environment. If you want to use your own Adobe Commerce environment, you'll need to update the `configs.xlsx` file in your content repository to have values that match your environment.
+
+Additionally, you need to have the following modules and customizations installed on your environment:
+
+1. magento/magento-extra-graphql: Commerce module required for Cart and Checkout Drop-Ins.
+1. magento/module-data-services-graphql: Commerce module with functionality necessary for adding context to events.
+1. magento/module-page-builder-product-recommendations: Commerce module required for PRex Widget
+1. magento/module-visual-product-recommendations: Commerce module required for PRex Widget
+<!-- 1. TODO: Add further prereqs.  -->
+
 ## Documentation
 
-Before using the aem-boilerplate, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically:
+Before using the boilerplate, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically:
 1. [Developer Tutorial](https://www.aem.live/developer/tutorial)
 2. [The Anatomy of a Project](https://www.aem.live/developer/anatomy-of-a-project)
 3. [Web Performance](https://www.aem.live/developer/keeping-it-100)
@@ -27,8 +42,15 @@ npm run lint
 
 ## Local development
 
-1. Create a new repository based on the `aem-boilerplate` template and add a mountpoint in the `fstab.yaml`
+1. Create a new repository based on the `aem-boilerplate-commerce` template and add a mountpoint in the `fstab.yaml`
 1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
-1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
-1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
-1. Open the `{repo}` directory in your favorite IDE and start coding :)
+1. Add your Adobe Commerce SaaS configuration in the `configs.xlsx` sheet in your content repository.
+1. Install all dependencies using `npm i`.
+1. Start AEM Proxy: `npm run up` (opens your browser at `http://localhost:3000`)
+1. Open the `{repo}` directory in your favorite IDE and start coding :)
+
+## Changelog
+
+Major changes are described and documented as part of pull requests and tracked via the `changelog` tag. To keep your project up to date, please follow this list:
+
+https://github.com/hlxsites/aem-boilerplate-commerce/issues?q=label%3Achangelog+is%3Aclosed
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -8,7 +8,7 @@
 }
 
 .cards > ul > li {
-  border: 1px solid #dadada;
+  border: 1px solid var(--color-neutral-500);
   background-color: var(--background-color);
 }
 

diff --git a/blocks/commerce-account-header/commerce-account-header.css b/blocks/commerce-account-header/commerce-account-header.css
@@ -0,0 +1,3 @@
+body.columns main > .section > div.commerce-account-header-wrapper {
+    margin-bottom: 0;
+}
diff --git a/blocks/commerce-account-header/commerce-account-header.js b/blocks/commerce-account-header/commerce-account-header.js
@@ -0,0 +1,14 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { Header, provider as uiProvider } from '@dropins/tools/components.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+
+export default function decorate(block) {
+  const {
+    title = 'My account',
+  } = readBlockConfig(block);
+
+  block.innerHTML = '';
+
+  return uiProvider.render(Header, { title })(block);
+}
diff --git a/blocks/commerce-account-sidebar/commerce-account-sidebar.css b/blocks/commerce-account-sidebar/commerce-account-sidebar.css
@@ -0,0 +1,59 @@
+@media (width >= 900px) {
+    body.columns main > .section.commerce-account-sidebar-container {
+        max-width: var(--column-width);
+    }
+}
+
+.commerce-account-sidebar-wrapper .commerce-account-sidebar .commerce-account-sidebar-item {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-medium);
+    margin-bottom: var(--spacing-small);
+    border: var(--shape-border-width-2) solid var(--color-neutral-400);
+    border-radius: var(--shape-border-radius-2);
+    text-decoration: none;
+}
+
+.commerce-account-sidebar-wrapper .commerce-account-sidebar .commerce-account-sidebar-item-active {
+    border-color: var(--color-neutral-800);
+    background-color: var(--color-neutral-200);
+}
+
+.commerce-account-sidebar-item-icon {
+    flex: 0 0 auto;
+    margin-right: var(--spacing-small);
+}
+
+.commerce-account-sidebar-item-icon > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.commerce-account-sidebar-item-content {
+    flex: 1 1 auto;
+}
+
+.commerce-account-sidebar-item-title {
+    font: var(--type-button-1-font);
+    margin: 0 0 var(--spacing-xxsmall);
+    border: none;
+    text-decoration: none;
+}
+
+.commerce-account-sidebar-item-subtitle {
+    font: var(--type-button-2-font);
+    margin: 0;
+    text-decoration: none;
+}
+
+.commerce-account-sidebar-item-arrow {
+    flex: 0 0 auto;
+    margin-left: var(--spacing-small);
+}
+
+.commerce-account-sidebar-item-arrow > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/blocks/commerce-account-sidebar/commerce-account-sidebar.js b/blocks/commerce-account-sidebar/commerce-account-sidebar.js
@@ -0,0 +1,80 @@
+import { Icon, provider as uiProvider } from '@dropins/tools/components.js';
+import { render as accountRenderer } from '@dropins/storefront-account/render.js';
+import { loadFragment } from '../fragment/fragment.js';
+import { CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
+
+export default async function decorate(block) {
+  const fragment = await loadFragment('/customer/sidebar-fragment');
+  const sidebarItemsConfig = fragment.querySelectorAll('.default-content-wrapper > ol > li');
+  const sidebarItems = Array.from(sidebarItemsConfig).map((item) => {
+    const itemParams = Array.from(item.querySelectorAll('ol > li'));
+    const itemConfig = {
+      itemTitle: item.childNodes[0]?.textContent.trim() || 'Default Title',
+      itemSubtitle: itemParams[0]?.innerText || '',
+      itemLink: itemParams[1]?.innerText || '#',
+      itemIcon: itemParams[2]?.innerText || 'Placeholder',
+    };
+
+    const menuItemEl = document.createElement('a');
+    menuItemEl.classList.add('commerce-account-sidebar-item');
+    menuItemEl.href = itemConfig.itemLink;
+
+    const isItemActive = (
+      itemConfig.itemLink === CUSTOMER_ORDERS_PATH
+        ? window.location.href.includes(CUSTOMER_ORDERS_PATH)
+        : window.location.href.includes(itemConfig.itemLink)
+    );
+    if (isItemActive) {
+      menuItemEl.classList.add('commerce-account-sidebar-item-active');
+    }
+
+    const iconEl = createMenuItemIcon(itemConfig.itemIcon);
+    const contentEl = createMenuItemContent(itemConfig.itemTitle, itemConfig.itemSubtitle);
+    const arrowEl = createMenuItemArrow();
+
+    menuItemEl.appendChild(iconEl);
+    menuItemEl.appendChild(contentEl);
+    menuItemEl.appendChild(arrowEl);
+
+    return menuItemEl;
+  });
+
+  block.innerHTML = '';
+  sidebarItems.forEach((el) => {
+    block.appendChild(el);
+  });
+}
+
+function createMenuItemIcon(iconSource) {
+  const iconEl = document.createElement('div');
+  iconEl.classList.add('commerce-account-sidebar-item-icon');
+  accountRenderer.render(Icon, { source: iconSource, size: 32 })(iconEl);
+  return iconEl;
+}
+
+function createMenuItemContent(title, subtitle) {
+  const contentEl = document.createElement('div');
+  contentEl.classList.add('commerce-account-sidebar-item-content');
+
+  const titleEl = document.createElement('p');
+  titleEl.classList.add('commerce-account-sidebar-item-title');
+  titleEl.innerText = title;
+
+  const subtitleEl = document.createElement('p');
+  subtitleEl.classList.add('commerce-account-sidebar-item-subtitle');
+  subtitleEl.innerText = subtitle;
+
+  contentEl.appendChild(titleEl);
+  contentEl.appendChild(subtitleEl);
+  return contentEl;
+}
+
+function createMenuItemArrow() {
+  const arrowEl = document.createElement('div');
+  arrowEl.classList.add('commerce-account-sidebar-item-arrow');
+  uiProvider.render(Icon, {
+    source: 'ChevronRight',
+    size: 32,
+  })(arrowEl);
+  return arrowEl;
+}
diff --git a/blocks/commerce-addresses/commerce-addresses.css b/blocks/commerce-addresses/commerce-addresses.css
@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */
diff --git a/blocks/commerce-addresses/commerce-addresses.js b/blocks/commerce-addresses/commerce-addresses.js
@@ -0,0 +1,27 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { Addresses } from '@dropins/storefront-account/containers/Addresses.js';
+import { render as accountRenderer } from '@dropins/storefront-account/render.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
+import { CUSTOMER_ADDRESS_PATH, CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+
+// Initialize
+import '../../scripts/initializers/account.js';
+
+export default async function decorate(block) {
+  const {
+    'minified-view': minifiedViewConfig = 'false',
+  } = readBlockConfig(block);
+
+  if (!checkIsAuthenticated()) {
+    window.location.href = CUSTOMER_LOGIN_PATH;
+  } else {
+    await accountRenderer.render(Addresses, {
+      minifiedView: minifiedViewConfig === 'true',
+      withActionsInMinifiedView: false,
+      withActionsInFullSizeView: true,
+      routeAddressesPage: () => CUSTOMER_ADDRESS_PATH,
+    })(block);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		; force @adobe namespaced packages to be installed from npmjs.org
		@adobe:registry=https://registry.npmjs.org