🛒 Commerce Dropins 🛒 (#95)

* [chore] create develop branch from dropin fork (#94)

* Remove .d.ts files from deployment (#98)

* USF-876: tests events (#96)

* adds check for staging to host

Signed-off-by: Stephen Rugh <[email protected]>

* Upgrade Checkout and Order confirmation dropins to latest versions (#99)

* Upgrade checkout to alpha49 (#100)

* Remove copyright from checkout block files

* Lint fix

* fix flaky cypress (#112)

* EDS-406 Auth | Fix auth modal (or point to issue) (#107)

* eds-406 fixed problem connect with dialog

* eds-406 fixed Lint

---------

Co-authored-by: Abrasimov Yaroslav <[email protected]>

* [chore]: fixing cypress (#116)

* 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]>

* fix cypress (#127)

* fix cypress

* update

* chore: fix cypress for ls changed classname (#133)

Signed-off-by: Stephen Rugh <[email protected]>

* Fix issue with incorrect order token param (#129)

* Fix issue with incorrect order token param

* fix cypress

---------

Co-authored-by: Devagouda Patil <[email protected]>
Co-authored-by: Devagouda <[email protected]>

* Update Cart to 0.7.0 (#136)

* Update cart beta

* Use exact sdk version

* revert sdk

* Update cart to 0.7.0

* Dropin Build Tools (GraphQl Operations Extensibility) (#106)

* build-tools

* updated alpha package

* latest alpha

* nump

* Update auth, order and account dropins (#132)

* Update auth dropin

* eds-416 fixed error date

* eds-405 updated auth dropin and fixed bug connect with date

* eds-405 updated auth dropin

* eds-405 updated auth dropin 3

* eds-405 updated auth dropin 4

* eds-405 updated auth dropin 5

* eds-405 updated auth dropin

* eds-405 updated auth dropin

* Update auth dropin

* Update order dropin

* Update account dropin

* eds-416 added new account update

* eds-416 revert checnges

* updates cypress tests to use camelCase as per auth dropin changes

Signed-off-by: Stephen Rugh <[email protected]>

* Update auth and account dropins

---------

Signed-off-by: Stephen Rugh <[email protected]>
Co-authored-by: Konstantin Fandelyuk <[email protected]>
Co-authored-by: Stephen Rugh <[email protected]>

* Moved appending the .appear class to the body until after the LCP is finished to prevent a checkout error from occuring (#140)

Co-authored-by: Preston Choate <[email protected]>

* Franklin -> EDS (#139)

Signed-off-by: Stephen Rugh <[email protected]>

* improve product recommendations events (#141)

* Cart Container (#142)

* refactored to single Block Cart

* Update commerce-cart.css

* Update commerce-cart.js

* wrap in promise all

* fixed loading issue

* fixed cypress tests

* npm audit fixes

Signed-off-by: Stephen Rugh <[email protected]>

* fixed layout (#145)

* fix merge

Signed-off-by: Stephen Rugh <[email protected]>

* Dropins Initializer (#149)

* wip initializer poc

* initialize cart globally

* initialize globally

* fixed loop redirect

* pdp initializer

* await

* mountImmediately

* bump

* fixed lint issues

* clean up

* bump

* Update Cart to 0.8.0 (#151)

* Update cart beta

* Update use betatwo

* update cart to 0.8.0

* Fix 404.html not loading (#156)

* sets shopperContext on page load based on user token presence (#153)

* adds security scan domain verification tag for boilerplate environment

Signed-off-by: Stephen Rugh <[email protected]>

* fix missed merge property not properly updated

Signed-off-by: Stephen Rugh <[email protected]>

* fix: set body to display:none initially (#160)

Co-authored-by: Stephen <[email protected]>

* Integrate Order Cancellation: storefront-order/v0.1.0-alpha15 (#154)

* placeholders integration (#166)

* placeholders integration

* log error

* preload and cache placeholders

* Update head.html

* only initialize event collection when not prerendering (#168)

* overloaded adding state caused a2c button to change when wishlist button clicked (#170)

* add custom label (#169)

* Update Cart to 0.9.0 (#171)

* Update cart beta1

* Update to cart 0.9.0

* Update order and account dropins integration (#161)

* Update order and account dropins integration

* Fix lint issues

* Adjust TODO comments

* Integrate placeholders approach for static text

* Logout redirect fix

* Bump storefront-order version

* Return details (#163)

Implement return-details page

* Bump storefront-order version

* Update placeholders, remove debug code

* Adjust placeholders approach

* Adjust placeholders approach (once again)

* await initializers (#173)

* Placeholder metadata (#175)

* Merge PREX bugfix from main into develop (#179)

* fixed placeholders (#172)

* Fix PRex on cart page (#178)

* Fix linting issue

---------

Co-authored-by: Carlos A. Cabrera <[email protected]>
Co-authored-by: Mark J. Becker <[email protected]>

* fixed PREX (width) layout (#182)

* updating experiment plugin (#188)

* Checkout drop in version to 0.1.0-alpha53 (#165)

* Enable tracking (#190)

* Manually update order and account builds

* Add tracking support

* Update packages

* Update package.lock

* Experimentation Plugin must load before Drop-ins initialization (#193)

* experimentation must load before dropins initialization

* Update scripts.js

* Remove checkout experimentation block (#200)

* Cart Dropin Version 0.10.0 (#201)

* Create return page (#204)

* Integrate CreateReturn container

* Add order build (manually)

* Update dependencies

* Manually add alpha20 build (test)

* Manually add alpha20 build (test)

* Install latest version of storefront-order dropin

* Install latest order dropin version

---------

Co-authored-by: Konstantin Fandelyuk <[email protected]>

* USF 1629 - Add coupon container in cart (#162)

* Add coupon container in cart

* fix lint

* Add coupon slot to checkout

* Fix lint

---------

Co-authored-by: Eric Oeur <[email protected]>

* update packages to 0.36.0 (#208)

* Checkout drop in version to 0.1.0-alpha57 (#206)

* [PDP] add Magento metadata as query parameters instead of headers (#198)

* add query parameters instead of headers

* add Magento metadata as query parameters instead of headers

* fix formating

* refactor code as in comments

* remove unused import

* Build picker

---------

Co-authored-by: Mark J. Becker <[email protected]>

* Bump storefront-order v0.1.0-alpha23 (#209)

* Bump storefront-order v0.1.0-alpha23

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Bump storefront-order v0.1.0-alpha23

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* rm unnecessary file

---------

Co-authored-by: Sergii Ivashchenko <[email protected]>

* Extend order initializer logic (#212)

* Bump storefront-order v0.1.0-alpha23

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Order initializer adjustment

* Extend order initializer logic

* Fix routing bug

* Update storefront-order

* Fix auth bug

---------

Co-authored-by: Elisea Cornejo <[email protected]>
Co-authored-by: Sergii Ivashchenko <[email protected]>

* Bump Checkout drop in version to 0.1.0-alpha58 (#213)

* update checkout order handling to include order number in URL (#214)

* PDP Containers (#135)

* PDP containers

* merge

* fix

* fixed height in overlay

* bump

* layout

* promsie all

* fixes

* Promise.all

* testin w/o promise all

* Revert "testin w/o promise all"

This reverts commit b3d8faa.

* update

* Update scripts.js

* Update product-details.js

* test: disable placeholders

* Update scripts.js

* Update product-details.js

* placeholders

* moved to variable

* settings needs to be set once

* Update head.html

* extra berak line

* promtoe jsonldp

* fixed linting issues

* initialDat

* initialization

* set jsonld on lcp

* fixes

* fix lint

* fixed selections

* moved initializer

* reverting

* removed spaces

* clean up

* optionsUIDs

* getOptionsUIDsFromUrl

* promise

* prefetch placeholders

* preload

* render concurrently

* wip initializer poc

* initialize cart globally

* initialize globally

* fixed loop redirect

* pdp initializer

* await

* mountImmediately

* bump

* fixed lint issues

* clean up

* fix lint errors

* fixed cypress tests

* preloads

* preloads

* Update product-details.js

* valid

* Update package.json

* updated PDP drop-in version

* bug fixes

* removed custom pdp

* bump

* load css first

* pre-initialize pdp

* preload product image

* Update pdp.js

* Update pdp.js

* Update pdp.js

---------

Co-authored-by: Daniela Neagu <[email protected]>

* Preloaders (#218)

* Disable bfcache

* Update head.html

* test w/o recaptcha

* moved recaptcha post lcp

* Update head.html

* Fix import safari (#219)

* Disable bfcache

* Update scripts.js

* Bump Checkout drop in version to 0.1.0-alpha60 (#220)

* Redirect to home from order confirmation when signing out and improve checkout layout (#221)

* refactor checkAndRedirect function to handle multiple redirections and handle /order-details path

* move place order button to main column

---------

Co-authored-by: OscarMerino <[email protected]>

* Accessibility Fixes (#226)

* Disable bfcache

* removed uncessary logs

* fixed accesibility error

* fixed accessibility issues

* prex label

* Bump order-dropin alpha26 release (#228)

* Bump Checkout drop in version to 0.1.0-alpha61 (#225)

* USF-1783 - Disable viewport auto-zoom (#230)

* Auth VoiceOver (#231)

* Auth dropdown WCAG adjustments
---------

Co-authored-by: Abrasimov Yaroslav <[email protected]>

* Fixes non-existing product 404 (#234)

* Fix 404 styles (#236)

* Add cypress test for cart event - part of USF 1654 (#227)

* Add add-to-cart event test

* update

* Add all required context

* chore: recs test against /gear not product (#239)

Signed-off-by: Stephen Rugh <[email protected]>

* Auth / Order / Account - 1.0.0 (#242)

* Install 1.0.0 version of account dropin

* Install 1.0.0 version of order dropin

* Install 1.0.0 version of auth dropin

* Update cart to v1.0.0-beta1 (#243)

* update cart to one beta

* [Bugfix]: Shopping Cart View event published too often (#241)

* Add manual API call to trigger publishing shopping cart view event

* Fix linting issues

* Cart version bump

* Update cart to beta2

* Bugfix: Update product routing logic to use top level sku

---------

Co-authored-by: James Calcaben <[email protected]>

* Checkout v1.0.0 beta1 and Order v1.0.0 beta4 (#235)

* Checkout v1.0.0 beta3 (#245)

* eds-517 fix bug auth combine modal (#246)

Co-authored-by: Yaroslav Abrasimov <[email protected]>

* Update order, account and auth dropins (#247)

* Update order, account and auth dropins

* Added Cypress test to check the ACDL place-order event (#249)

* Upgrade Checkout and Order dropins to latest versions (#250)

* update packages to 0.38.0 (#251)

* update auth dropdown navigation (#253)

* update auth dropdown navigation

* update auth dropdown navigation spec

* Package and readme changes for 1.0.0

* bump dropins to 1.0.0* (#261)

* bump dropins to 1.0.0

Signed-off-by: Stephen Rugh <[email protected]>

* cart to 1.0.1

Signed-off-by: Stephen Rugh <[email protected]>

---------

Signed-off-by: Stephen Rugh <[email protected]>

---------

Signed-off-by: Stephen Rugh <[email protected]>
Co-authored-by: Mark J. Becker <[email protected]>
Co-authored-by: OscarMerino <[email protected]>
Co-authored-by: Devagouda <[email protected]>
Co-authored-by: KostiantynFandeliuk <[email protected]>
Co-authored-by: Abrasimov Yaroslav <[email protected]>
Co-authored-by: Konstantin Fandelyuk <[email protected]>
Co-authored-by: Daniela Neagu <[email protected]>
Co-authored-by: Devagouda Patil <[email protected]>
Co-authored-by: Chuting (Christina) Yan <[email protected]>
Co-authored-by: Carlos A. Cabrera <[email protected]>
Co-authored-by: Preston Choate <[email protected]>
Co-authored-by: Dirk Rudolph <[email protected]>
Co-authored-by: Marc Ginesta <[email protected]>
Co-authored-by: James Calcaben <[email protected]>
Co-authored-by: Sergii Ivashchenko <[email protected]>
Co-authored-by: Eric Oeur <[email protected]>
Co-authored-by: Anthoula Wojczak <[email protected]>
Co-authored-by: Cristian <[email protected]>
Co-authored-by: eliseacornejo <[email protected]>
Co-authored-by: Sergii Ivashchenko <[email protected]>
Co-authored-by: Emi Pallarès <[email protected]>
Co-authored-by: Natxo Cabré <[email protected]>
Co-authored-by: Mike <[email protected]>

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