Skip to content

Commit

Permalink
Merge branch 'develop' into DATA-6271
Browse files Browse the repository at this point in the history
  • Loading branch information
mitre10 authored Nov 20, 2024
2 parents 108268a + 1b9957c commit f74c61e
Show file tree
Hide file tree
Showing 35 changed files with 581 additions and 540 deletions.
288 changes: 143 additions & 145 deletions blocks/commerce-checkout/commerce-checkout.css

Large diffs are not rendered by default.

42 changes: 24 additions & 18 deletions blocks/commerce-checkout/commerce-checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand All @@ -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>
Expand All @@ -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(
Expand Down Expand Up @@ -178,6 +182,7 @@ export default async function decorate(block) {
};

const [
_mergedCartBanner,
_heading,
_serverError,
_outOfStock,
Expand All @@ -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',
Expand Down Expand Up @@ -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,
);
}
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -777,7 +783,7 @@ export default async function decorate(block) {
if (data.isGuest) {
await displayGuestAddressForms(data);
} else {
removeOverlaySpinner();
await removeOverlaySpinner();
await displayCustomerAddressForms(data);
}
};
Expand Down
74 changes: 51 additions & 23 deletions blocks/modal/modal.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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%);
}
Expand All @@ -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);
}
}
36 changes: 18 additions & 18 deletions blocks/modal/modal.js
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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
Expand All @@ -56,6 +44,7 @@ export default async function createModal(contentNodes) {
});

block.append(dialog);

return {
block,
removeModal: () => dialog.close(),
Expand All @@ -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');
},
};
Expand Down
4 changes: 4 additions & 0 deletions build.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,8 @@ overrideGQLOperations([
npm: '@dropins/storefront-cart',
operations: [],
},
{
npm: '@dropins/storefront-checkout',
operations: [],
},
]);
16 changes: 8 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
"@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.35.0"
"@dropins/tools": "^0.36.0"
}
}
8 changes: 4 additions & 4 deletions scripts/__dropins__/storefront-checkout/api.js
Original file line number Diff line number Diff line change
@@ -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!
Expand All @@ -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 {
Expand All @@ -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};
2 changes: 2 additions & 0 deletions scripts/__dropins__/storefront-checkout/api/fragments.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading

0 comments on commit f74c61e

Please sign in to comment.