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

blocks/commerce-checkout/commerce-checkout.js

@@ -32,15 +32,16 @@ import { render as AccountProvider } from '@dropins/storefront-account/render.js
 import * as cartApi from '@dropins/storefront-cart/api.js';
 import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList.js';
 import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.js';
-import { OrderSummary } from '@dropins/storefront-cart/containers/OrderSummary.js';
-import { render as CartProvider } from '@dropins/storefront-cart/render.js';
+import OrderSummary from '@dropins/storefront-cart/containers/OrderSummary.js';
 import Coupons from '@dropins/storefront-cart/containers/Coupons.js';
+import { render as CartProvider } from '@dropins/storefront-cart/render.js';
 
 // Checkout Dropin
 import * as checkoutApi from '@dropins/storefront-checkout/api.js';
 import BillToShippingAddress from '@dropins/storefront-checkout/containers/BillToShippingAddress.js';
 import EstimateShipping from '@dropins/storefront-checkout/containers/EstimateShipping.js';
 import LoginForm from '@dropins/storefront-checkout/containers/LoginForm.js';
+import MergedCartBanner from '@dropins/storefront-checkout/containers/MergedCartBanner.js';
 import OrderConfirmationHeader from '@dropins/storefront-checkout/containers/OrderConfirmationHeader.js';
 import OutOfStock from '@dropins/storefront-checkout/containers/OutOfStock.js';
 import PaymentMethods from '@dropins/storefront-checkout/containers/PaymentMethods.js';
@@ -69,13 +70,11 @@ import {
   setAddressOnCart,
 } from '../../scripts/checkout.js';
 
-// Initializers
-import '../../scripts/initializers/account.js';
-import '../../scripts/initializers/auth.js';
-import '../../scripts/initializers/cart.js';
-import '../../scripts/initializers/checkout.js';
-
 export default async function decorate(block) {
+  // Initializers
+  import('../../scripts/initializers/account.js');
+  import('../../scripts/initializers/checkout.js');
+
   const DEBOUNCE_TIME = 1000;
   const LOGIN_FORM_NAME = 'login-form';
   const SHIPPING_FORM_NAME = 'selectedShippingAddress';
@@ -90,6 +89,7 @@ export default async function decorate(block) {
   const checkoutFragment = document.createRange().createContextualFragment(`
     <div class="checkout__wrapper">
       <div class="checkout__loader"></div>
+      <div class="checkout__merged-cart-banner"></div>
       <div class="checkout__content">
         <div class="checkout__main">
           <div class="checkout__block checkout__heading"></div>
@@ -104,16 +104,20 @@ export default async function decorate(block) {
           <div class="checkout__block checkout__billing-form"></div>
         </div>
         <div class="checkout__aside">
-          <div class="checkout__block checkout__block--aside checkout__order-summary"></div>
-          <div class="checkout__block checkout__block--aside checkout__cart-summary"></div>
+          <div class="checkout__block checkout__order-summary"></div>
+          <div class="checkout__block checkout__cart-summary"></div>
         </div>
-        <div class="checkout__place-order"></div>
+        <div class="checkout__block checkout__place-order"></div>
       </div>
     </div>
   `);
 
   const $content = checkoutFragment.querySelector('.checkout__content');
   const $loader = checkoutFragment.querySelector('.checkout__loader');
+  const $mergedCartBanner = checkoutFragment.querySelector(
+    '.checkout__merged-cart-banner',
+  );
+
   const $heading = checkoutFragment.querySelector('.checkout__heading');
   const $emptyCart = checkoutFragment.querySelector('.checkout__empty-cart');
   const $serverError = checkoutFragment.querySelector(
@@ -178,6 +182,7 @@ export default async function decorate(block) {
   };
 
   const [
+    _mergedCartBanner,
     _heading,
     _serverError,
     _outOfStock,
@@ -191,6 +196,8 @@ export default async function decorate(block) {
     _cartSummary,
     _placeOrder,
   ] = await Promise.all([
+    CheckoutProvider.render(MergedCartBanner)($mergedCartBanner),
+
     UI.render(Header, {
       title: 'Checkout',
       size: 'large',
@@ -246,12 +253,11 @@ export default async function decorate(block) {
       hideOnVirtualCart: true,
       onChange: (checked) => {
         $billingForm.style.display = checked ? 'none' : 'block';
-
-        if (!checked && billingFormRef.current) {
-          const isDataValid = billingFormRef.current.handleValidationSubmit();
+        if (!checked && billingFormRef?.current) {
+          const { formData, isDataValid } = billingFormRef.current;
 
           setAddressOnCart(
-            { data: billingFormRef.current.formData, isDataValid },
+            { data: formData, isDataValid },
             checkoutApi.setBillingAddress,
           );
         }
@@ -364,15 +370,15 @@ export default async function decorate(block) {
         return success;
       },
       onPlaceOrder: async () => {
-        displayOverlaySpinner();
+        await displayOverlaySpinner();
 
         try {
           await checkoutApi.placeOrder();
         } catch (error) {
           console.error(error);
           throw error;
         } finally {
-          removeOverlaySpinner();
+          await removeOverlaySpinner();
         }
       },
     })($placeOrder),
@@ -777,7 +783,7 @@ export default async function decorate(block) {
     if (data.isGuest) {
       await displayGuestAddressForms(data);
     } else {
-      removeOverlaySpinner();
+      await removeOverlaySpinner();
       await displayCustomerAddressForms(data);
     }
   };

blocks/modal/modal.css

@@ -3,11 +3,10 @@ body.modal-open {
 }
 
 .modal dialog {
-  --dialog-border-radius: 16px;
-
-  padding: 0;
+  --dialog-border-radius: var(--shape-border-radius-2);
+
   overscroll-behavior: none;
-  border: 1px solid #ccc;
+  border: var(--shape-border-width-1) solid var(--color-neutral-400);
   border-radius: var(--dialog-border-radius);
   width: 100vw;
 }
@@ -18,17 +17,6 @@ body.modal-open {
   max-height: calc(100dvh - 60px);
 }
 
-@media (width >= 600px) {
-  .modal dialog {
-    width: 80vw;
-    max-width: 730px;
-  }
-
-  .modal dialog .modal-content {
-    max-height: calc(100vh - 90px);
-  }
-}
-
 .modal dialog::backdrop {
   background-color: rgb(0 0 0 / 50%);
 }
@@ -37,17 +25,57 @@ body.modal-open {
   position: absolute;
   top: 0;
   right: 0;
-  width: 20px;
-  height: 100%;
-  max-height: 54px;
-  border-radius: 0 var(--dialog-border-radius) 0 0;
-  background-color: unset;
-  text-overflow: clip;
+  width: 48px;
+  height: 48px;
   margin: 0;
   border: none;
-  padding-right: 30px;
+  border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-brand-600);
+  line-height: 0;
+}
+
+.modal .close-button .icon.icon-close {
+  content: '';
+  width: 24px;
+  height: 24px;
+}
+
+.modal .close-button .icon.icon-close::before,
+.modal .close-button .icon.icon-close::after {
+  content: '';
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 24px;
+  height: 2px;
+  border-radius: var(--shape-border-radius-1);
+  background-color: currentcolor;
+}
+
+.modal .close-button .icon.icon-close::after {
+  transform: translate(-50%, -50%) rotate(-45deg)
+}
+
+.modal .close-button span {
+  cursor: pointer;
 }
 
 .modal dialog .section {
   padding: 0;
-}
+}
+
+@media (width >= 600px) {
+  .modal dialog {
+    width: 80vw;
+    max-width: 700px;
+  }
+
+  .modal dialog .modal-content {
+    max-height: calc(100vh - 90px);
+  }
+}

blocks/modal/modal.js

@@ -1,26 +1,11 @@
-/** ******************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
- *  Copyright 2024 Adobe
- *  All Rights Reserved.
- *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
- ****************************************************************** */
-
 import { loadCSS, buildBlock } from '../../scripts/aem.js';
 
-// eslint-disable-next-line import/prefer-default-export
 export default async function createModal(contentNodes) {
   await loadCSS('./blocks/modal/modal.css');
   const dialog = document.createElement('dialog');
+  dialog.setAttribute('tabindex', 1);
+  dialog.setAttribute('role', 'dialog');
+
   const dialogContent = document.createElement('div');
   dialogContent.classList.add('modal-content');
   dialogContent.append(...contentNodes);
@@ -29,13 +14,16 @@ export default async function createModal(contentNodes) {
   const closeButton = document.createElement('button');
   closeButton.classList.add('close-button');
   closeButton.setAttribute('aria-label', 'Close');
+  closeButton.setAttribute('data-dismiss', 'modal');
   closeButton.type = 'button';
   closeButton.innerHTML = '<span class="icon icon-close"></span>';
   closeButton.addEventListener('click', () => dialog.close());
   dialog.append(closeButton);
 
   // close dialog on clicks outside the dialog. https://stackoverflow.com/a/70593278/79461
   dialog.addEventListener('click', (event) => {
+    if (event.pointerType !== 'mouse') return;
+
     const dialogDimensions = dialog.getBoundingClientRect();
     if (
       event.clientX < dialogDimensions.left
@@ -56,6 +44,7 @@ export default async function createModal(contentNodes) {
   });
 
   block.append(dialog);
+
   return {
     block,
     removeModal: () => dialog.close(),
@@ -67,6 +56,17 @@ export default async function createModal(contentNodes) {
         dialogContent.scrollTop = 0;
       }, 0);
 
+      // Focus the first input when content is fully loaded using MutationObserver.
+      const observer = new MutationObserver(() => {
+        const firstInput = dialogContent.querySelector('input');
+        if (firstInput) {
+          firstInput.focus();
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(dialogContent, { childList: true, subtree: true });
+
       document.body.classList.add('modal-open');
     },
   };

build.mjs

@@ -6,4 +6,8 @@ overrideGQLOperations([
     npm: '@dropins/storefront-cart',
     operations: [],
   },
+  {
+    npm: '@dropins/storefront-checkout',
+    operations: [],
+  },
 ]);

package.json

@@ -38,7 +38,7 @@
     "@dropins/storefront-account": "0.1.0-alpha20",
     "@dropins/storefront-auth": "0.0.1-alpha25",
     "@dropins/storefront-cart": "0.10.0",
-    "@dropins/storefront-checkout": "0.1.0-alpha53",
+    "@dropins/storefront-checkout": "0.1.0-alpha57",
     "@dropins/storefront-order": "0.1.0-alpha21",
     "@dropins/storefront-pdp": "0.4.0",
     "@dropins/tools": "^0.36.0"

scripts/__dropins__/storefront-checkout/api.js

@@ -1,6 +1,6 @@
 /*! Copyright 2024 Adobe
 All Rights Reserved. */
-import{b as _,a as f,t as g}from"./chunks/synchronizeCheckout.js";import{c as N,e as Q,g as R,d as q,i as K,f as P,r as j,s as L}from"./chunks/synchronizeCheckout.js";import{M as m,c as C,d as o,e as S}from"./chunks/fetch-graphql.js";import{D as J,F as V,I as W,b as X,f as Z,a as tt,S as st,U as et,i as it,j as rt,k as at,r as nt,s as ot,g as pt,h as dt}from"./chunks/fetch-graphql.js";import{s as l,a as A,i as y}from"./chunks/store-config.js";import"./chunks/ServerErrorSignal.js";import"@dropins/tools/lib.js";import"@dropins/tools/event-bus.js";import{i as ht}from"./chunks/isEmailAvailable.js";import{p as mt}from"./chunks/placeOrder2.js";import{a as M}from"./chunks/setBillingAddress.js";import{s as ut}from"./chunks/setBillingAddress.js";import{s as ft}from"./chunks/setGuestEmailOnCart.js";import{s as St}from"./chunks/setPaymentMethod.js";import{CHECKOUT_DATA_FRAGMENT as I}from"./fragments.js";import{s as yt}from"./chunks/setShippingMethods.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/signals.js";const T=`
+import{t as _,a as A,b as g}from"./chunks/synchronizeCheckout.js";import{d as Q,c as R,g as q,e as K,i as P,f as j,r as L,s as Y}from"./chunks/synchronizeCheckout.js";import{s as m,M as u,a as C,d as p,b as S}from"./chunks/fetch-graphql.js";import{D as V,F as W,I as X,f as Z,c as tt,e as st,S as et,U as it,j as at,k as rt,l as nt,r as ot,g as pt,h as dt,i as ct}from"./chunks/fetch-graphql.js";import{a as y,i as M}from"./chunks/store-config.js";import"./chunks/ServerErrorSignal.js";import"@dropins/tools/lib.js";import{events as l}from"@dropins/tools/event-bus.js";import{i as gt}from"./chunks/isEmailAvailable.js";import{p as mt}from"./chunks/placeOrder2.js";import{a as I}from"./chunks/setBillingAddress.js";import{s as ft}from"./chunks/setBillingAddress.js";import{s as At}from"./chunks/setGuestEmailOnCart.js";import{s as St}from"./chunks/setPaymentMethod.js";import{CHECKOUT_DATA_FRAGMENT as T}from"./fragments.js";import{s as Mt}from"./chunks/setShippingMethods.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/signals.js";const v=`
   mutation estimateShippingMethods(
     $cartId: String!
     $address: EstimateAddressInput!
@@ -26,7 +26,7 @@ import{b as _,a as f,t as g}from"./chunks/synchronizeCheckout.js";import{c as N,
       error_message
     }
   }
-`,D=async r=>{var h;const s=l.cartId,{criteria:a}=r||{},{country_code:e,region_id:t,region_name:i,zip:n}=a||{},p=e||((h=A.value.data)==null?void 0:h.defaultCountry);if(!s)throw new m;if(!p)throw new C;const d=typeof t=="string"?parseInt(t,10):t,c=t||i?{...d&&{region_id:d},...i&&{region_code:i}}:void 0,u={country_code:p,...n&&{postcode:n},...c&&{region:c}};return await o({type:"mutation",query:T,options:{variables:{cartId:s,address:u}},path:"estimateShippingMethods",signalType:"estimateShippingMethods",transformer:_})},E=`
+`,D=async r=>{var h;const e=m.cartId,{criteria:n}=r||{},{country_code:i,region_id:t,region_name:s,zip:o}=n||{},a=i||((h=y.value.data)==null?void 0:h.defaultCountry);if(!e)throw new u;if(!a)throw new C;const d=typeof t=="string"?parseInt(t,10):t,c=t||s?{...d&&{region_id:d},...s&&{region_code:s}}:void 0,f={country_code:a,...o&&{postcode:o},...c&&{region:c}};return await p({type:"mutation",query:v,options:{variables:{cartId:e,address:f}},path:"estimateShippingMethods",signalType:"estimateShippingMethods",transformer:_})},E=`
   mutation setShippingAddress($input: SetShippingAddressesOnCartInput!) {
     setShippingAddressesOnCart(input: $input) {
       cart {
@@ -35,5 +35,5 @@ import{b as _,a as f,t as g}from"./chunks/synchronizeCheckout.js";import{c as N,
     }
   }
 
-  ${I}
-`,H=async({address:r,customerAddressId:s,pickupLocationCode:a})=>{const e=l.cartId;if(!e)throw new m;const t={cart_id:e,shipping_addresses:[]};if(s)t.shipping_addresses.push({customer_address_id:s});else if(a)t.shipping_addresses.push({pickup_location_code:a});else{if(!r)throw new S;t.shipping_addresses.push({address:f(r)})}const i=await o({type:"mutation",query:E,options:{variables:{input:t}},path:"setShippingAddressesOnCart.cart",signalType:"cart",transformer:g});return y.value?await o({type:"mutation",query:M,options:{variables:{input:{cart_id:e,billing_address:{same_as_shipping:!0}}}},path:"setBillingAddressOnCart.cart",signalType:"cart",transformer:g}):i};export{J as DEFAULT_COUNTRY,V as FetchError,W as InvalidArgument,X as MissingBillingAddress,m as MissingCart,C as MissingCountry,Z as MissingEmail,tt as MissingPaymentMethod,S as MissingShippinghAddress,st as STORE_CONFIG_DEFAULTS,et as UnexpectedError,N as authenticateCustomer,Q as config,D as estimateShippingMethods,it as fetchGraphQl,R as getCart,rt as getConfig,q as getCustomer,at as getStoreConfig,K as initialize,P as initializeCheckout,ht as isEmailAvailable,mt as placeOrder,nt as removeFetchGraphQlHeader,j as resetCheckout,ut as setBillingAddress,ot as setEndpoint,pt as setFetchGraphQlHeader,dt as setFetchGraphQlHeaders,ft as setGuestEmailOnCart,St as setPaymentMethod,H as setShippingAddress,yt as setShippingMethodsOnCart,L as synchronizeCheckout};
+  ${T}
+`,H=async({address:r,customerAddressId:e,pickupLocationCode:n})=>{const i=m.cartId;if(!i)throw new u;const t={cart_id:i,shipping_addresses:[]};if(e)t.shipping_addresses.push({customer_address_id:e});else if(n)t.shipping_addresses.push({pickup_location_code:n});else{if(!r)throw new S;t.shipping_addresses.push({address:A(r)})}const s=await p({type:"mutation",query:E,options:{variables:{input:t}},path:"setShippingAddressesOnCart.cart",signalType:"cart",transformer:g});if(!M.value)return l.emit("checkout/updated",s||null),s;const a=await p({type:"mutation",query:I,options:{variables:{input:{cart_id:i,billing_address:{same_as_shipping:!0}}}},path:"setBillingAddressOnCart.cart",signalType:"cart",transformer:g});return l.emit("checkout/updated",a||null),a};export{V as DEFAULT_COUNTRY,W as FetchError,X as InvalidArgument,Z as MissingBillingAddress,u as MissingCart,C as MissingCountry,tt as MissingEmail,st as MissingPaymentMethod,S as MissingShippinghAddress,et as STORE_CONFIG_DEFAULTS,it as UnexpectedError,Q as authenticateCustomer,R as config,D as estimateShippingMethods,at as fetchGraphQl,q as getCart,rt as getConfig,K as getCustomer,nt as getStoreConfig,P as initialize,j as initializeCheckout,gt as isEmailAvailable,mt as placeOrder,ot as removeFetchGraphQlHeader,L as resetCheckout,ft as setBillingAddress,pt as setEndpoint,dt as setFetchGraphQlHeader,ct as setFetchGraphQlHeaders,At as setGuestEmailOnCart,St as setPaymentMethod,H as setShippingAddress,Mt as setShippingMethodsOnCart,Y as synchronizeCheckout};

scripts/__dropins__/storefront-checkout/api/fragments.d.ts

@@ -16,4 +16,6 @@
  *******************************************************************/
 export { CHECKOUT_DATA_FRAGMENT } from './graphql/CheckoutDataFragment.graphql';
 export { CUSTOMER_FRAGMENT } from './graphql/CustomerFragment.graphql';
+export { ORDER_FRAGMENT } from './graphql/OrderFragment.graphql';
+export { ORDER_ITEM_FRAGMENT } from './graphql/OrderItemFragment.graphql';
 //# sourceMappingURL=fragments.d.ts.map