Merge branch 'main' into da-live-preview

.eslintignore

@@ -3,9 +3,9 @@ scripts/htm.js
 scripts/acdl
 tools/picker
 tools/pdp-metadata
-scripts/dropins
 scripts/__dropins__
 scripts/commerce-events-collector.js
 scripts/commerce-events-sdk.js
 scripts/widgets
 plugins/
+cypress/

.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: '^_' }],
   },
 };

.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

.gitignore

@@ -9,4 +9,4 @@ helix-importer-ui
 *.bak
 .idea
 # Ignore .map files in scripts/__dropins__/ directory and all its subdirectories
-scripts/__dropins__/**/*.map
+scripts/__dropins__/**/*.map

.hlxignore

@@ -1,10 +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/*

.npmrc

@@ -0,0 +1,2 @@
+; force @adobe namespaced packages to be installed from npmjs.org
+@adobe:registry=https://registry.npmjs.org

404.html

@@ -7,7 +7,8 @@
     {
         "imports": {
             "@dropins/tools/": "/scripts/__dropins__/tools/",
-            "@dropins/storefront-pdp/": "/scripts/__dropins__/storefront-pdp/"
+            "@dropins/storefront-cart/": "/scripts/__dropins__/storefront-cart/",
+            "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
         }
     }
   </script>
@@ -41,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 {

README.md

@@ -8,9 +8,21 @@ https://experienceleague.adobe.com/developer/commerce/storefront/
 - 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)
@@ -30,7 +42,7 @@ 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. Add your Adobe Commerce SaaS configuration in the `configs.xlsx` sheet in your content repository.
 1. Install all dependencies using `npm i`.

blocks/commerce-account-header/commerce-account-header.css

@@ -0,0 +1,3 @@
+body.columns main > .section > div.commerce-account-header-wrapper {
+    margin-bottom: 0;
+}

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);
+}

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;
+}

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;
+}

blocks/commerce-addresses/commerce-addresses.css

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

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);
+  }
+}

blocks/commerce-cart/commerce-cart.css

@@ -1 +1,32 @@
-/* stylelint-disable no-empty-source */
+/* stylelint-disable selector-class-pattern */
+
+.commerce-cart {
+  padding: var(--spacing-large) 0;
+}
+
+.cart__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-4-gutters);
+}
+
+.cart__wrapper[hidden],
+.cart__empty-cart[hidden] {
+  display: none;
+}
+
+@media (width >= 900px) {
+  .cart__wrapper {
+    flex-direction: row;
+  }
+
+  .cart__left-column {
+    flex: 1;
+    flex-basis: 70%;
+  }
+
+  .cart__right-column {
+    flex: 1;
+    flex-basis: auto;
+  }
+}