Checkout success page (#266)

* add new commerce-checkout-success block

* include email availability check

* bump version of @dropins/storefront-order to v1.0.1-beta1

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,146 @@
+// 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 * as orderApi from '@dropins/storefront-order/api.js';
+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: async (email) => {
+      const { data } = await orderApi.fetchGraphQl(
+        `
+        query isEmailAvailable($email: String!) {
+          isEmailAvailable(email: $email) {
+            is_email_available
+          }
+        }`,
+        {
+          method: 'GET',
+          variables: { email },
+        },
+      );
+
+      return Boolean(data?.isEmailAvailable?.is_email_available);
+    },
+    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');

package.json

@@ -39,7 +39,7 @@
     "@dropins/storefront-auth": "~1.0.0",
     "@dropins/storefront-cart": "~1.0.1",
     "@dropins/storefront-checkout": "~1.0.0",
-    "@dropins/storefront-order": "~1.0.0",
+    "@dropins/storefront-order": "v1.0.1-beta1",
     "@dropins/storefront-pdp": "~1.0.0",
     "@dropins/tools": "^0.38.0"
   }

scripts/__dropins__/storefront-order/api/cancelOrder/graphql/cancelOrderMutation.d.ts

@@ -1,2 +1,17 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export declare const CANCEL_ORDER_MUTATION: string;
 //# sourceMappingURL=cancelOrderMutation.d.ts.map

scripts/__dropins__/storefront-order/api/confirmGuestReturn/confirmGuestReturn.d.ts

@@ -1,2 +1,17 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export declare const confirmGuestReturn: (orderId: string, confirmationKey: string) => Promise<void>;
 //# sourceMappingURL=confirmGuestReturn.d.ts.map

scripts/__dropins__/storefront-order/api/confirmGuestReturn/graphql/confirmGuestReturn.graphql.d.ts

@@ -1,2 +1,17 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export declare const CONFIRM_RETURN_GUEST_ORDER: string;
 //# sourceMappingURL=confirmGuestReturn.graphql.d.ts.map

scripts/__dropins__/storefront-order/api/confirmGuestReturn/index.d.ts

@@ -1,2 +1,17 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export * from './confirmGuestReturn';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-order/api/fetch-graphql/fetch-graphql.d.ts

@@ -1,3 +1,18 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export declare const setEndpoint: (endpoint: string) => void, setFetchGraphQlHeader: (key: string, value: string | null) => void, removeFetchGraphQlHeader: (key: string) => void, setFetchGraphQlHeaders: (header: import('@adobe/fetch-graphql').Header) => void, fetchGraphQl: <T = any>(query: string, options?: import('@adobe/fetch-graphql').FetchOptions | undefined) => Promise<{
     errors?: import('@adobe/fetch-graphql').FetchQueryError | undefined;
     data: T;

scripts/__dropins__/storefront-order/api/fetch-graphql/index.d.ts

@@ -1,2 +1,17 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export * from './fetch-graphql';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,18 @@
+/********************************************************************
+ * 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.
+ *******************************************************************/
 export { REQUEST_RETURN_ORDER_FRAGMENT } from './graphql/RequestReturnOrderFragment.graphql';
 export { ADDRESS_FRAGMENT } from './graphql/CustomerAddressFragment.graphql';
 export { PRODUCT_DETAILS_FRAGMENT, PRICE_DETAILS_FRAGMENT, GIFT_CARD_DETAILS_FRAGMENT, ORDER_ITEM_DETAILS_FRAGMENT, BUNDLE_ORDER_ITEM_DETAILS_FRAGMENT, } from './graphql/OrderItemsFragment.graphql';