Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/hlxsites/aem-boilerplate…
Browse files Browse the repository at this point in the history 
…-commerce into pdp-containers
  • Loading branch information
@fnhipster
fnhipster committed Nov 22, 2024
2 parents 168d3f2 + b92c237 commit 0a06248
Show file tree
Hide file tree
Showing 25 changed files with 328 additions and 339 deletions.
292 changes: 146 additions & 146 deletions blocks/commerce-checkout/commerce-checkout.css
View file

Large diffs are not rendered by default.

168 changes: 93 additions & 75 deletions blocks/commerce-checkout/commerce-checkout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
// Dropin Tools
import { events } from '@dropins/tools/event-bus.js';
import { initializers } from '@dropins/tools/initializer.js';
import { debounce } from '@dropins/tools/lib.js';

// Dropin Components
import {
Expand Down Expand Up @@ -65,16 +64,57 @@ import { getUserTokenCookie } from '../../scripts/initializers/index.js';
import createModal from '../modal/modal.js';

import {
getCartAddress,
estimateShippingCost, getCartAddress,
scrollToElement,
setAddressOnCart,
} from '../../scripts/checkout.js';

function createMetaTag(property, content, type) {
if (!property || !type) {
return;
}
let meta = document.head.querySelector(`meta[${type}="${property}"]`);
if (meta) {
if (!content) {
meta.remove();
return;
}
meta.setAttribute(type, property);
meta.setAttribute('content', content);
return;
}
if (!content) {
return;
}
meta = document.createElement('meta');
meta.setAttribute(type, property);
meta.setAttribute('content', content);
document.head.appendChild(meta);
}

function setMetaTags(dropin) {
createMetaTag('title', dropin);
createMetaTag('description', dropin);
createMetaTag('keywords', dropin);

createMetaTag('og:description', dropin);
createMetaTag('og:title', dropin);
createMetaTag('og:url', window.location.href, 'property');
}

export default async function decorate(block) {
// Initializers
import('../../scripts/initializers/account.js');
import('../../scripts/initializers/checkout.js');

setMetaTags('Checkout');
document.title = 'Checkout';

events.on('checkout/order', () => {
setMetaTags('Order Confirmation');
document.title = 'Order Confirmation';
});

const DEBOUNCE_TIME = 1000;
const LOGIN_FORM_NAME = 'login-form';
const SHIPPING_FORM_NAME = 'selectedShippingAddress';
Expand Down Expand Up @@ -194,7 +234,7 @@ export default async function decorate(block) {
billingFormSkeleton,
_orderSummary,
_cartSummary,
_placeOrder,
placeOrder,
] = await Promise.all([
CheckoutProvider.render(MergedCartBanner)($mergedCartBanner),

Expand Down Expand Up @@ -423,21 +463,22 @@ export default async function decorate(block) {
sessionStorage.removeItem(SHIPPING_ADDRESS_DATA_KEY);
}

// when shipping address form is empty
if (!cartShippingAddress) {
checkoutApi.estimateShippingMethods();

events.emit('checkout/estimate-shipping-address', {
address: {},
isValid: false,
});
}

shippingFormSkeleton.remove();

let prevEstimateShippingData = {};
let isFirstRenderShipping = true;
const hasCartShippingAddress = Boolean(data.shippingAddresses?.[0]);

const setShippingAddressOnCart = setAddressOnCart({
api: checkoutApi.setShippingAddress,
debounceMs: DEBOUNCE_TIME,
placeOrderBtn: placeOrder,
});

const estimateShippingCostOnCart = estimateShippingCost({
api: checkoutApi.estimateShippingMethods,
debounceMs: DEBOUNCE_TIME,
});

shippingForm = await AccountProvider.render(AddressForm, {
addressesFormTitle: 'Shipping address',
className: 'checkout-shipping-form__address-form',
Expand All @@ -448,50 +489,12 @@ export default async function decorate(block) {
countryCode: storeConfig.defaultCountry,
},
isOpen: true,
onChange: debounce((values) => {
if (!isFirstRenderShipping || !hasCartShippingAddress) {
setAddressOnCart(values, checkoutApi.setShippingAddress);
}

const { data, isDataValid } = values;

onChange: (values) => {
const syncAddress = !isFirstRenderShipping || !hasCartShippingAddress;
if (syncAddress) setShippingAddressOnCart(values);
if (!hasCartShippingAddress) estimateShippingCostOnCart(values);
if (isFirstRenderShipping) isFirstRenderShipping = false;

if (hasCartShippingAddress || isDataValid) return;

if (
prevEstimateShippingData.countryCode === data.countryCode
&& prevEstimateShippingData.regionCode === data.region.regionCode
&& prevEstimateShippingData.regionId === data.region.regionId
&& prevEstimateShippingData.postcode === data.postcode
) {
return;
}

const criteria = {
country_code: data.countryCode,
region_name: String(data.region.regionCode || ''),
region_id: String(data.region.regionId || ''),
};
checkoutApi.estimateShippingMethods({ criteria });

events.emit('checkout/estimate-shipping-address', {
address: {
country_id: data.countryCode,
region: String(data.region.regionCode || ''),
region_id: String(data.region.regionId || ''),
postcode: data.postcode,
},
isValid: isDataValid,
});

prevEstimateShippingData = {
countryCode: data.countryCode,
regionCode: data.region.regionCode,
regionId: data.region.regionId,
postcode: data.postcode,
};
}, DEBOUNCE_TIME),
},
showBillingCheckBox: false,
showFormLoader: false,
showShippingCheckBox: false,
Expand All @@ -514,6 +517,12 @@ export default async function decorate(block) {
let isFirstRenderBilling = true;
const hasCartBillingAddress = Boolean(data.billingAddress);

const setBillingAddressOnCart = setAddressOnCart({
api: checkoutApi.setBillingAddress,
debounceMs: DEBOUNCE_TIME,
placeOrderBtn: placeOrder,
});

billingForm = await AccountProvider.render(AddressForm, {
addressesFormTitle: 'Billing address',
className: 'checkout-billing-form__address-form',
Expand All @@ -524,13 +533,11 @@ export default async function decorate(block) {
countryCode: storeConfig.defaultCountry,
},
isOpen: true,
onChange: debounce((values) => {
if (!isFirstRenderBilling || !hasCartBillingAddress) {
setAddressOnCart(values, checkoutApi.setBillingAddress);
}

onChange: (values) => {
const canSetBillingAddressOnCart = !isFirstRenderBilling || !hasCartBillingAddress;
if (canSetBillingAddressOnCart) setBillingAddressOnCart(values);
if (isFirstRenderBilling) isFirstRenderBilling = false;
}, DEBOUNCE_TIME),
},
showBillingCheckBox: false,
showFormLoader: false,
showShippingCheckBox: false,
Expand Down Expand Up @@ -581,20 +588,24 @@ export default async function decorate(block) {
const hasCartShippingAddress = Boolean(data.shippingAddresses?.[0]);
let isFirstRenderShipping = true;

const setShippingAddressOnCart = setAddressOnCart({
api: checkoutApi.setShippingAddress,
debounceMs: DEBOUNCE_TIME,
placeOrderBtn: placeOrder,
});

shippingAddresses = await AccountProvider.render(Addresses, {
addressFormTitle: 'Deliver to new address',
defaultSelectAddressId: shippingAddressId,
formName: SHIPPING_FORM_NAME,
forwardFormRef: shippingFormRef,
inputsDefaultValueSet,
minifiedView: false,
onAddressData: debounce((values) => {
if (!isFirstRenderShipping || !hasCartShippingAddress) {
setAddressOnCart(values, checkoutApi.setShippingAddress);
}

onAddressData: (values) => {
const canSetShippingAddressOnCart = !isFirstRenderShipping || !hasCartShippingAddress;
if (canSetShippingAddressOnCart) setShippingAddressOnCart(values);
if (isFirstRenderShipping) isFirstRenderShipping = false;
}, DEBOUNCE_TIME),
},
selectable: true,
selectShipping: true,
showBillingCheckBox: false,
Expand Down Expand Up @@ -631,20 +642,24 @@ export default async function decorate(block) {
const hasCartBillingAddress = Boolean(data.billingAddress);
let isFirstRenderBilling = true;

const setBillingAddressOnCart = setAddressOnCart({
api: checkoutApi.setBillingAddress,
debounceMs: DEBOUNCE_TIME,
placeOrderBtn: placeOrder,
});

billingAddresses = await AccountProvider.render(Addresses, {
addressFormTitle: 'Bill to new address',
defaultSelectAddressId: billingAddressId,
formName: BILLING_FORM_NAME,
forwardFormRef: billingFormRef,
inputsDefaultValueSet,
minifiedView: false,
onAddressData: debounce((values) => {
if (!isFirstRenderBilling || !hasCartBillingAddress) {
setAddressOnCart(values, checkoutApi.setBillingAddress);
}

onAddressData: (values) => {
const canSetBillingAddressOnCart = !isFirstRenderBilling || !hasCartBillingAddress;
if (canSetBillingAddressOnCart) setBillingAddressOnCart(values);
if (isFirstRenderBilling) isFirstRenderBilling = false;
}, DEBOUNCE_TIME),
},
selectable: true,
selectBilling: true,
showBillingCheckBox: false,
Expand All @@ -657,6 +672,9 @@ export default async function decorate(block) {

// Define the Layout for the Order Confirmation
const displayOrderConfirmation = async (orderData) => {
// Scroll to the top of the page
window.scrollTo(0, 0);

const orderConfirmationFragment = document.createRange()
.createContextualFragment(`
<div class="order-confirmation">
Expand Down
6 changes: 4 additions & 2 deletions package-lock.json
View file

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

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-alpha57",
"@dropins/storefront-checkout": "0.1.0-alpha58",
"@dropins/storefront-order": "0.1.0-alpha24",
"@dropins/storefront-pdp": "1.0.0-beta1",
"@dropins/tools": "^0.36.0"
Expand Down
3 changes: 0 additions & 3 deletions scripts/__dropins__/storefront-checkout/chunks/Heading.js
View file

This file was deleted.

8 changes: 0 additions & 8 deletions scripts/__dropins__/storefront-checkout/components/Heading/Heading.d.ts
View file

This file was deleted.

19 changes: 0 additions & 19 deletions scripts/__dropins__/storefront-checkout/components/Heading/index.d.ts
View file

This file was deleted.

6 changes: 0 additions & 6 deletions scripts/__dropins__/storefront-checkout/components/OverlayLoader/OverlayLoader.d.ts
View file

This file was deleted.

18 changes: 0 additions & 18 deletions scripts/__dropins__/storefront-checkout/components/OverlayLoader/index.d.ts
View file

This file was deleted.

2 changes: 1 addition & 1 deletion scripts/__dropins__/storefront-checkout/components/PlaceOrder/PlaceOrder.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FunctionComponent } from 'preact';
import { HTMLAttributes } from 'preact/compat';

export interface PlaceOrderProps extends HTMLAttributes<HTMLButtonElement> {
export interface PlaceOrderProps extends HTMLAttributes<HTMLDivElement> {
disabled?: boolean;
onClick: (event: Event) => Promise<void>;
}
Expand Down
4 changes: 1 addition & 3 deletions scripts/__dropins__/storefront-checkout/components/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,11 @@
*******************************************************************/
export * from './BillToShippingAddress';
export * from './EstimateShipping';
export * from './Heading';
export * from './LoginForm';
export * from './OrderConfirmationHeader';
export * from './OutOfStock';
export * from './OverlayLoader';
export * from './PaymentMethods';
export * from './PlaceOrder';
export * from './ServerError';
export * from './ShippingMethods';
export * from './OrderConfirmationHeader';
//# sourceMappingURL=index.d.ts.map
Loading

0 comments on commit 0a06248

Please sign in to comment.