Checkout success page

blocks/commerce-checkout-success/commerce-checkout-success.css

@@ -0,0 +1,77 @@
+/* stylelint-disable selector-class-pattern */
+
+.order-confirmation {
+  display: grid;
+  align-items: start;
+  grid-template-columns: repeat(var(--grid-4-columns), 1fr);
+  grid-template-areas: 'main aside';
+  grid-column-gap: var(--grid-4-gutters);
+  margin-bottom: var(--spacing-xbig);
+  padding-top: var(--spacing-xxlarge);
+}
+
+.order-confirmation__main {
+  display: grid;
+  grid-row-gap: var(--spacing-xbig);
+  grid-column: 1 / span 7;
+}
+
+.order-confirmation__aside {
+  display: grid;
+  grid-row-gap: var(--spacing-xbig);
+  grid-column: 9 / span 4;
+}
+
+.order-confirmation__footer {
+  display: grid;
+  gap: var(--spacing-small);
+  text-align: center;
+}
+
+.order-confirmation__footer p {
+  margin: 0;
+}
+
+.order-confirmation__footer .order-confirmation-footer__continue-button {
+  margin: 0 auto;
+  text-align: center;
+  display: inline-block;
+}
+
+.order-confirmation-footer__contact-support {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  color: var(--color-neutral-700);
+}
+
+.order-confirmation-footer__contact-support a {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-brand-500);
+  cursor: pointer;
+}
+
+/* Hide empty blocks */
+.order-confirmation__block:empty {
+  display: none;
+}
+
+@media only screen and (width >= 320px) and (width <= 768px) {
+  .order-confirmation {
+    grid-template-columns: repeat(var(--grid-1-columns), 1fr);
+    padding-top: 0;
+  }
+
+  .order-confirmation__main,
+  .order-confirmation__aside {
+    grid-row-gap: var(--spacing-medium);
+  }
+
+  .order-confirmation > div {
+    grid-column: 1 / span 4;
+  }
+
+  .order-confirmation__block .dropin-card {
+    border: 0;
+  }
+}

blocks/commerce-checkout-success/commerce-checkout-success.js

@@ -0,0 +1,130 @@
+// Dropin Components
+import {
+  Button,
+  provider as UI,
+} from '@dropins/tools/components.js';
+
+// Auth Dropin
+import SignUp from '@dropins/storefront-auth/containers/SignUp.js';
+import { render as AuthProvider } from '@dropins/storefront-auth/render.js';
+
+// Order Dropin Modules
+import CustomerDetails from '@dropins/storefront-order/containers/CustomerDetails.js';
+import OrderCostSummary from '@dropins/storefront-order/containers/OrderCostSummary.js';
+import OrderHeader from '@dropins/storefront-order/containers/OrderHeader.js';
+import OrderProductList from '@dropins/storefront-order/containers/OrderProductList.js';
+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';
+
+// Block-level
+import createModal from '../modal/modal.js';
+
+let modal;
+async function showModal(content) {
+  modal = await createModal([content]);
+  modal.showModal();
+}
+
+export default async function decorate(block) {
+  // Initializers
+  import('../../scripts/initializers/order.js');
+
+  const orderConfirmationFragment = document.createRange()
+    .createContextualFragment(`
+      <div class="order-confirmation">
+        <div class="order-confirmation__main">
+          <div class="order-confirmation__block order-confirmation__header"></div>
+          <div class="order-confirmation__block order-confirmation__order-status"></div>
+          <div class="order-confirmation__block order-confirmation__shipping-status"></div>
+          <div class="order-confirmation__block order-confirmation__customer-details"></div>
+        </div>
+        <div class="order-confirmation__aside">
+          <div class="order-confirmation__block order-confirmation__order-cost-summary"></div>
+          <div class="order-confirmation__block order-confirmation__order-product-list"></div>
+          <div class="order-confirmation__block order-confirmation__footer"></div>
+        </div>
+      </div>
+  `);
+
+  // Order confirmation elements
+  const $orderConfirmationHeader = orderConfirmationFragment.querySelector(
+    '.order-confirmation__header',
+  );
+  const $orderStatus = orderConfirmationFragment.querySelector(
+    '.order-confirmation__order-status',
+  );
+  const $shippingStatus = orderConfirmationFragment.querySelector(
+    '.order-confirmation__shipping-status',
+  );
+  const $customerDetails = orderConfirmationFragment.querySelector(
+    '.order-confirmation__customer-details',
+  );
+  const $orderCostSummary = orderConfirmationFragment.querySelector(
+    '.order-confirmation__order-cost-summary',
+  );
+  const $orderProductList = orderConfirmationFragment.querySelector(
+    '.order-confirmation__order-product-list',
+  );
+  const $orderConfirmationFooter = orderConfirmationFragment.querySelector(
+    '.order-confirmation__footer',
+  );
+
+  block.replaceChildren(orderConfirmationFragment);
+
+  const handleSignUpClick = async ({ inputsDefaultValueSet, addressesData }) => {
+    const signUpForm = document.createElement('div');
+    AuthProvider.render(SignUp, {
+      routeSignIn: () => '/customer/login',
+      routeRedirectOnEmailConfirmationClose: () => '/customer/account',
+      inputsDefaultValueSet,
+      addressesData,
+    })(signUpForm);
+
+    await showModal(signUpForm);
+  };
+
+  OrderProvider.render(OrderHeader, {
+    // handleEmailAvailability: checkoutApi.isEmailAvailable,
+    handleSignUpClick,
+  })($orderConfirmationHeader);
+
+  OrderProvider.render(OrderStatus, { slots: { OrderActions: () => null } })(
+    $orderStatus,
+  );
+  OrderProvider.render(ShippingStatus)($shippingStatus);
+  OrderProvider.render(CustomerDetails)($customerDetails);
+  OrderProvider.render(OrderCostSummary)($orderCostSummary);
+  OrderProvider.render(OrderProductList)($orderProductList);
+
+  $orderConfirmationFooter.innerHTML = `
+      <div class="order-confirmation-footer__continue-button"></div>
+      <div class="order-confirmation-footer__contact-support">
+        <p>
+          Need help?
+          <a
+            href="/support"
+            rel="noreferrer"
+            class="order-confirmation-footer__contact-support-link"
+            data-testid="order-confirmation-footer__contact-support-link"
+          >
+            Contact us
+          </a>
+        </p>
+      </div>
+    `;
+
+  const $orderConfirmationFooterContinueBtn = $orderConfirmationFooter.querySelector(
+    '.order-confirmation-footer__continue-button',
+  );
+
+  UI.render(Button, {
+    children: 'Continue shopping',
+    'data-testid': 'order-confirmation-footer__continue-button',
+    className: 'order-confirmation-footer__continue-button',
+    size: 'medium',
+    variant: 'primary',
+    type: 'submit',
+    href: '/',
+  })($orderConfirmationFooterContinueBtn);
+}

blocks/modal/modal.js

@@ -1,7 +1,7 @@
 import { loadCSS, buildBlock } from '../../scripts/aem.js';
 
 export default async function createModal(contentNodes) {
-  await loadCSS('./blocks/modal/modal.css');
+  await loadCSS(`${window.location.origin}/blocks/modal/modal.css`);
   const dialog = document.createElement('dialog');
   dialog.setAttribute('tabindex', 1);
   dialog.setAttribute('role', 'dialog');