Integrate storefront-account and storefront-order dropins (#101)

* Move PR to new repo https://github.com/hlxsites/boilerplate-commerce-dropins/pull/108 * Move order initializer logic to dropins.js * eds-400 test new implemetation orderRenderer * eds-400 updated 1 * eds-400 updated template and fixed bugs * eds-300 updated OrderSearch component * eds-400 loop in web version * eds-400 test update error function * eds-400 updated backend path * eds-400 updated backend path * eds-400 updated backend 3 * eds-400 updated backend 4 * eds-400 updated link * updated * updated 2 * updated 3 * updated 4 * FIXED LINT * eds-400 reveted work version * updated 6 * Work variant * eds-400 updated OrderSearch component * eds-400 updated OrderSearch dropin * Minor styling fix * Minor styling fix * Minor styling fix * Fixed bug with render signIn * Added concole.log * updated props * test redirect to account * test commit * test errors event * remove old code * remove old code * updated dropin js * updated * updated * updated Dropin * updated * updated * revert old code * updated form * Updated dropin * updated Dropin * updated dropin * updated dropin * updated * updated * updated * updated * updated * updated * updated * updated * Fixed lint * updated * updated * updated * updated * updated * updated * updated * updated * updated * updated * updated * updated * updated * Fix Lint * updated * updated * updated * updated * updated * updated * updated * updated * Fixed Lint * Adjustments for headers * Rollback needless changes * Refactor dropins.js * Fix lint errors * Update versions * Minor adjustment * Update storefront-order build * Update tools version * Update storefront-order version * Minor adjustments after CR * Experiment * Rollback experiment * Adjust order/error handling, remove outdated condition * Testing fix for CustomerDetails * Rollback * Test CustomerDetails update * Test CustomerDetails update 2 * Fix sidebar styling * Drop updated CustomerDetails build * eds-259 updated after CR * eds-259 updated eslint * eds-259 updated dropin js * eds-259 modify functionality dropin js * eds-259 revert default functionality * eds-259 updated dropin js * eds-259 updated dropin js * eds-259 updated order dropin * eds-259 updated order dropin * eds-259 updated order dropin * eds-259 updated order dropin events.on('order/error') * eds-259 updated dropin js * eds-259 updated dropin js redirect * eds-259 updated dropin js redirect added isAccountPage validation * eds-259 updated dropin js redirect * eds-259 removed old code * eds-259 fixed urls - updated order version * Replace URLs with variables * Comment cypress test, leave TODO comment * Change cypress environment * Add cypress placeholders and TODO's * Bump versions * Update storefront-account version * Fix order-header * Refactor routing * Refactor routing 2 * Refactor routing 3 * Adjust header structure * Fix typo * Bump version --------- Co-authored-by: Konstantin Fandelyuk <[email protected]>
hlxsites · Oct 4, 2024 · 661baf1 · 661baf1
1 parent f5cd140
commit 661baf1
Show file tree

Hide file tree

Showing 333 changed files with 5,251 additions and 520 deletions.
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-1) solid var(--color-neutral-400);
+    border-radius: var(--shape-border-radius-1);
+    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-account/api/getCustomer.js b/blocks/commerce-account/api/getCustomer.js
diff --git a/blocks/commerce-account/commerce-account.css b/blocks/commerce-account/commerce-account.css