Bump Auth/Account to 1.0.3 and Order to 1.0.4

blocks/commerce-checkout/commerce-checkout.js

@@ -58,18 +58,20 @@ import OrderProductList from '@dropins/storefront-order/containers/OrderProductL
 import OrderStatus from '@dropins/storefront-order/containers/OrderStatus.js';
 import ShippingStatus from '@dropins/storefront-order/containers/ShippingStatus.js';
 import { render as OrderProvider } from '@dropins/storefront-order/render.js';
-import { getUserTokenCookie } from '../../scripts/initializers/index.js';
 
 // Block-level
 import createModal from '../modal/modal.js';
 
+// Scripts
+import { getUserTokenCookie } from '../../scripts/initializers/index.js';
 import {
   estimateShippingCost, getCartAddress,
   isCartEmpty,
   isCheckoutEmpty,
   scrollToElement,
   setAddressOnCart,
 } from '../../scripts/checkout.js';
+import { authPrivacyPolicyConsentSlot } from '../../scripts/constants.js';
 
 function createMetaTag(property, content, type) {
   if (!property || !type) {
@@ -250,7 +252,11 @@ export default async function decorate(block) {
               displayOverlaySpinner();
             },
           },
-          signUpFormConfig: {},
+          signUpFormConfig: {
+            slots: {
+              ...authPrivacyPolicyConsentSlot,
+            },
+          },
           resetPasswordFormConfig: {},
         })(signInForm);
 
@@ -738,6 +744,9 @@ export default async function decorate(block) {
         routeRedirectOnEmailConfirmationClose: () => '/customer/account',
         inputsDefaultValueSet,
         addressesData,
+        slots: {
+          ...authPrivacyPolicyConsentSlot,
+        },
       })(signUpForm);
 
       await showModal(signUpForm);

blocks/commerce-create-account/commerce-create-account.js

@@ -3,7 +3,11 @@
 import { SignUp } from '@dropins/storefront-auth/containers/SignUp.js';
 import { render as authRenderer } from '@dropins/storefront-auth/render.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
-import { CUSTOMER_ACCOUNT_PATH, CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+import {
+  authPrivacyPolicyConsentSlot,
+  CUSTOMER_ACCOUNT_PATH,
+  CUSTOMER_LOGIN_PATH,
+} from '../../scripts/constants.js';
 
 // Initialize
 import '../../scripts/initializers/auth.js';
@@ -16,6 +20,9 @@ export default async function decorate(block) {
       hideCloseBtnOnEmailConfirmation: true,
       routeSignIn: () => CUSTOMER_LOGIN_PATH,
       routeRedirectOnSignIn: () => CUSTOMER_ACCOUNT_PATH,
+      slots: {
+        ...authPrivacyPolicyConsentSlot,
+      },
     })(block);
   }
 }

blocks/header/header.css

@@ -377,7 +377,7 @@ header .nav-search-input .search_autocomplete .popover-container {
   }
 }
 
-/* TODO - CSS for authCombine demo (Auth Drop-In) */
+/* CSS for authCombine */
 #auth-combine-modal {
   position: fixed;
   top: 0;
@@ -410,7 +410,7 @@ header .nav-search-input .search_autocomplete .popover-container {
   }
 }
 
-/* TODO - CSS for auth dropdown demo (Auth Drop-In) */
+/* CSS for auth dropdown */
 
 .dropdown-wrapper.nav-tools-wrapper .nav-dropdown-button {
   font: var(--type-body-1-default-font) !important;

blocks/header/header.js

@@ -9,7 +9,6 @@ import { publishShoppingCartViewEvent } from '@dropins/storefront-cart/api.js';
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
-// TODO: Following two imports added for demo purpose (Auth Drop-In)
 import renderAuthCombine from './renderAuthCombine.js';
 import { renderAuthDropdown } from './renderAuthDropdown.js';
 
@@ -281,7 +280,6 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   block.append(navWrapper);
 
-  // TODO: Following statements added for demo purpose (Auth Drop-In)
   renderAuthCombine(
     navSections,
     () => !isDesktop.matches && toggleMenu(nav, navSections, false),

blocks/header/renderAuthCombine.js

@@ -1,5 +1,4 @@
 /* eslint-disable implicit-arrow-linebreak */
-// TODO - This module supposed to add link to authCombine container for demo purposes
 /* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
 import { render as authRenderer } from '@dropins/storefront-auth/render.js';
@@ -9,7 +8,11 @@ import * as authApi from '@dropins/storefront-auth/api.js';
 import { events } from '@dropins/tools/event-bus.js';
 import { Button } from '@dropins/tools/components.js';
 import { getCookie } from '../../scripts/configs.js';
-import { CUSTOMER_ACCOUNT_PATH, CUSTOMER_FORGOTPASSWORD_PATH, CUSTOMER_LOGIN_PATH } from '../../scripts/constants.js';
+import {
+  CUSTOMER_ACCOUNT_PATH,
+  CUSTOMER_FORGOTPASSWORD_PATH,
+  CUSTOMER_LOGIN_PATH,
+} from '../../scripts/constants.js';
 
 const signInFormConfig = {
   renderSignUpLink: true,
@@ -117,7 +120,7 @@ const resetPasswordFormConfig = {
   routeSignIn: () => CUSTOMER_LOGIN_PATH,
 };
 
-const onHeaderLinkClick = () => {
+const onHeaderLinkClick = (element) => {
   const viewportMeta = document.querySelector('meta[name="viewport"]');
   const originalViewportContent = viewportMeta.getAttribute('content');
 
@@ -135,18 +138,56 @@ const onHeaderLinkClick = () => {
   signInModal.setAttribute('id', 'auth-combine-modal');
   signInModal.classList.add('auth-combine-modal-overlay');
 
-  const closeModalWindow = (event) => {
-    if ((event.key === 'Escape' || event.key === 'Esc') && event.target.nodeName === 'BODY') {
-      signInModal.remove();
+  const trapFocus = (event) => {
+    if (!signInModal) return;
+
+    const key = event.key.toLowerCase();
+
+    if (key === 'escape') {
+      event.preventDefault();
+      signInModal.click();
+      element?.focus();
+      window.removeEventListener('keydown', trapFocus);
+      return;
+    }
+
+    const focusableElements = signInModal.querySelectorAll(
+      'input[name="email"], input, button, textarea, select, a[href], [tabindex]:not([tabindex="-1"])',
+    );
+
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (!signInModal.dataset.focusInitialized) {
+      signInModal.dataset.focusInitialized = 'true';
+      requestAnimationFrame(() => firstElement.focus(), 10);
+    }
+
+    if (key === 'tab' && event.shiftKey) {
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    } else if (key === 'tab') {
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      } else if (document.activeElement === signInModal) {
+        event.preventDefault();
+        firstElement.focus();
+      }
     }
   };
 
-  window.addEventListener('keydown', closeModalWindow);
+  window.addEventListener('keydown', trapFocus);
 
   signInModal.onclick = () => {
     signInModal.remove();
     document.body.style.overflow = 'auto';
     viewportMeta.setAttribute('content', originalViewportContent);
+    window.removeEventListener('keydown', trapFocus);
   };
 
   const signInForm = document.createElement('div');
@@ -170,8 +211,11 @@ const renderAuthCombine = (navSections, toggleMenu) => {
 
   const navListEl = navSections.querySelector('.default-content-wrapper > ul');
 
-  const listItems = navListEl.querySelectorAll('.default-content-wrapper > ul > li');
-  const accountLi = Array.from(listItems).find((li) => li.textContent.includes('Account'));
+  const listItems = navListEl.querySelectorAll(
+    '.default-content-wrapper > ul > li',
+  );
+  const accountLi = Array.from(listItems).find((li) =>
+    li.textContent.includes('Account'));
   const accountLiItems = accountLi.querySelectorAll('ul > li');
   const authCombineLink = accountLiItems[accountLiItems.length - 1];
 
@@ -180,7 +224,7 @@ const renderAuthCombine = (navSections, toggleMenu) => {
   authCombineLink.innerHTML = `<a href="#">${text}</a>`;
   authCombineLink.addEventListener('click', (event) => {
     event.preventDefault();
-    onHeaderLinkClick();
+    onHeaderLinkClick(accountLi);
 
     function getPopupElements() {
       const headerBlock = document.querySelector('.header.block');
@@ -197,11 +241,18 @@ const renderAuthCombine = (navSections, toggleMenu) => {
     }
 
     events.on('authenticated', (isAuthenticated) => {
-      const authCombineNavElement = document.querySelector('.authCombineNavElement');
+      const authCombineNavElement = document.querySelector(
+        '.authCombineNavElement',
+      );
       if (isAuthenticated) {
         const { headerLoginButton, popupElement, popupMenuContainer } = getPopupElements();
 
-        if (!authCombineNavElement || !headerLoginButton || !popupElement || !popupMenuContainer) {
+        if (
+          !authCombineNavElement
+          || !headerLoginButton
+          || !popupElement
+          || !popupMenuContainer
+        ) {
           return;
         }
 
@@ -210,7 +261,9 @@ const renderAuthCombine = (navSections, toggleMenu) => {
         popupElement.style.minWidth = '250px';
         if (headerLoginButton) {
           const spanElementText = headerLoginButton.querySelector('span');
-          spanElementText.textContent = `Hi, ${getCookie('auth_dropin_firstname')}`;
+          spanElementText.textContent = `Hi, ${getCookie(
+            'auth_dropin_firstname',
+          )}`;
         }
         popupMenuContainer.insertAdjacentHTML(
           'afterend',
@@ -222,7 +275,6 @@ const renderAuthCombine = (navSections, toggleMenu) => {
         );
       }
     });
-
     toggleMenu?.();
   });
 };

package.json

@@ -35,11 +35,11 @@
   "dependencies": {
     "@adobe/magento-storefront-event-collector": "^1.8.0",
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
-    "@dropins/storefront-account": "~1.0.2",
-    "@dropins/storefront-auth": "~1.0.2",
+    "@dropins/storefront-account": "~1.0.3",
+    "@dropins/storefront-auth": "~1.0.3",
     "@dropins/storefront-cart": "~1.0.2",
     "@dropins/storefront-checkout": "~1.0.0",
-    "@dropins/storefront-order": "~1.0.2",
+    "@dropins/storefront-order": "~1.0.4",
     "@dropins/storefront-pdp": "~1.0.0",
     "@dropins/tools": "^0.40.0"
   }

scripts/__dropins__/storefront-account/i18n/en_US.json.d.ts

@@ -60,7 +60,21 @@ declare const _default: {
           "actionEdit": "Edit",
           "cardLabelShipping": "Shipping",
           "cardLabelBilling": "Billing",
-          "defaultLabelText": "DEFAULT"
+          "defaultLabelText": "DEFAULT",
+          "ariaLabel": {
+            "editButton": {
+              "default": "Edit address",
+              "shipping": "Edit default shipping address",
+              "billing": "Edit default billing address",
+              "shippingAndBilling": "Edit address set as default for both shipping and billing"
+            },
+            "removeButton": {
+              "default": "Remove address",
+              "shipping": "Remove default shipping address",
+              "billing": "Remove default billing address",
+              "shippingAndBilling": "Remove address set as default for both shipping and billing"
+            }
+          }
         },
         "removeAddressModal": {
           "title": "Remove address",
@@ -110,7 +124,21 @@ declare const _default: {
           "actionEdit": "Edit",
           "cardLabelShipping": "Shipping",
           "cardLabelBilling": "Billing",
-          "defaultLabelText": "DEFAULT"
+          "defaultLabelText": "DEFAULT",
+          "ariaLabel": {
+            "editButton": {
+              "default": "Edit address",
+              "shipping": "Edit default shipping address",
+              "billing": "Edit default billing address",
+              "shippingAndBilling": "Edit address set as default for both shipping and billing"
+            },
+            "removeButton": {
+              "default": "Remove address",
+              "shipping": "Remove default shipping address",
+              "billing": "Remove default billing address",
+              "shippingAndBilling": "Remove address set as default for both shipping and billing"
+            }
+          }
         },
         "removeAddressModal": {
           "title": "Remove address",

scripts/__dropins__/storefront-account/lib/getAddressButtonAriaLabel.d.ts

@@ -0,0 +1,2 @@
+export declare const getAddressButtonAriaLabel: (defaultShipping?: boolean, defaultBilling?: boolean, translations?: Record<string, string>, type?: 'removeButton' | 'editButton') => string;
+//# sourceMappingURL=getAddressButtonAriaLabel.d.ts.map

scripts/__dropins__/storefront-account/lib/validationFields.d.ts

@@ -22,8 +22,8 @@ export declare const validateAlphanumeric: (value: string) => boolean;
 export declare const validateAlpha: (value: string) => boolean;
 export declare const validateEmail: (value: string) => boolean;
 export declare const validateDate: (value: string) => boolean;
-export declare const isDateWithinRange: (date: string, minTimestamp: number, maxTimestamp: number) => boolean;
-export declare const convertTimestampToDate: (timestamp: string) => string;
+export declare const isDateWithinRange: (date: string, minTimestamp?: number, maxTimestamp?: number) => boolean;
+export declare const convertTimestampToDate: (timestamp: string | null | undefined) => string;
 export declare const validateUrl: (url: string) => boolean;
 export declare const validateLength: (value: string, minLength: number, maxLength: number) => boolean;
 export declare const validationFields: (value: string, configs: ValidationFieldsConfig, translations: TranslationList, errorsList: ErrorsList) => {