Checkout v1.0.0 beta1 and Order v1.0.0 beta4 (#235)

blocks/commerce-checkout/commerce-checkout.js

@@ -30,9 +30,9 @@ import { render as AccountProvider } from '@dropins/storefront-account/render.js
 // Cart Dropin
 import * as cartApi from '@dropins/storefront-cart/api.js';
 import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList.js';
+import Coupons from '@dropins/storefront-cart/containers/Coupons.js';
 import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.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
@@ -41,7 +41,6 @@ import BillToShippingAddress from '@dropins/storefront-checkout/containers/BillT
 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';
 import PlaceOrder from '@dropins/storefront-checkout/containers/PlaceOrder.js';
@@ -54,6 +53,7 @@ import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.
 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';
@@ -296,19 +296,17 @@ export default async function decorate(block) {
         if (!checked && billingFormRef?.current) {
           const { formData, isDataValid } = billingFormRef.current;
 
-          setAddressOnCart(
-            { data: formData, isDataValid },
-            checkoutApi.setBillingAddress,
-          );
+          setAddressOnCart({
+            api: checkoutApi.setBillingAddress,
+            debounceMs: DEBOUNCE_TIME,
+            placeOrderBtn: placeOrder,
+          })({ data: formData, isDataValid });
         }
       },
     })($billToShipping),
 
     CheckoutProvider.render(ShippingMethods, {
       hideOnVirtualCart: true,
-      onCheckoutDataUpdate: () => {
-        cartApi.refreshCart().catch(console.error);
-      },
     })($delivery),
 
     CheckoutProvider.render(PaymentMethods)($paymentMethods),
@@ -409,17 +407,14 @@ export default async function decorate(block) {
 
         return success;
       },
-      onPlaceOrder: async () => {
+      handlePlaceOrder: async ({ cartId }) => {
         await displayOverlaySpinner();
 
-        try {
-          await checkoutApi.placeOrder();
-        } catch (error) {
-          console.error(error);
-          throw error;
-        } finally {
-          await removeOverlaySpinner();
-        }
+        orderApi.placeOrder(cartId)
+          .catch(console.error)
+          .finally(() => {
+            removeOverlaySpinner();
+          });
       },
     })($placeOrder),
   ]);
@@ -719,7 +714,7 @@ export default async function decorate(block) {
 
     block.replaceChildren(orderConfirmationFragment);
 
-    const onSignUpClick = async ({ inputsDefaultValueSet, addressesData }) => {
+    const handleSignUpClick = async ({ inputsDefaultValueSet, addressesData }) => {
       const signUpForm = document.createElement('div');
       AuthProvider.render(SignUp, {
         routeSignIn: () => '/customer/login',
@@ -731,9 +726,10 @@ export default async function decorate(block) {
       await showModal(signUpForm);
     };
 
-    CheckoutProvider.render(OrderConfirmationHeader, {
+    OrderProvider.render(OrderHeader, {
+      handleEmailAvailability: checkoutApi.isEmailAvailable,
+      handleSignUpClick,
       orderData,
-      onSignUpClick,
     })($orderConfirmationHeader);
 
     OrderProvider.render(OrderStatus, { slots: { OrderActions: () => null } })(
@@ -811,7 +807,7 @@ export default async function decorate(block) {
     removeModal();
   };
 
-  const handleCheckoutOrder = async (orderData) => {
+  const handleOrderPlaced = async (orderData) => {
     // Clear address form data
     sessionStorage.removeItem(SHIPPING_ADDRESS_DATA_KEY);
     sessionStorage.removeItem(BILLING_ADDRESS_DATA_KEY);
@@ -834,6 +830,6 @@ export default async function decorate(block) {
 
   events.on('authenticated', handleAuthenticated);
   events.on('checkout/initialized', handleCheckoutInitialized, { eager: true });
-  events.on('checkout/order', handleCheckoutOrder);
   events.on('checkout/updated', handleCheckoutUpdated);
+  events.on('order/placed', handleOrderPlaced);
 }

package.json

@@ -38,8 +38,8 @@
     "@dropins/storefront-account": "1.0.0-beta3",
     "@dropins/storefront-auth": "1.0.0-beta2",
     "@dropins/storefront-cart": "1.0.0-beta2",
-    "@dropins/storefront-checkout": "0.1.0-alpha61",
-    "@dropins/storefront-order": "1.0.0-beta2",
+    "@dropins/storefront-checkout": "1.0.0-beta1",
+    "@dropins/storefront-order": "1.0.0-beta4",
     "@dropins/storefront-pdp": "1.0.0-beta3",
     "@dropins/tools": "^0.37.0"
   }

scripts/__dropins__/storefront-checkout/api.js

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

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

@@ -16,6 +16,4 @@
  *******************************************************************/
 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

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

@@ -24,7 +24,6 @@ export * from './getStoreConfig';
 export * from './initialize';
 export * from './initializeCheckout';
 export * from './isEmailAvailable';
-export * from './placeOrder';
 export * from './resetCheckout';
 export * from './setBillingAddress';
 export * from './setGuestEmailOnCart';

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

@@ -1,6 +1,6 @@
+import { Cart as CartModel, Customer as CustomerModel, OrderDataModel as OrderModel } from '../../data/models';
 import { Lang } from '@dropins/tools/types/elsie/src/i18n';
 import { Initializer, Model } from '@dropins/tools/types/elsie/src/lib';
-import { Cart as CartModel, Customer as CustomerModel, Order as OrderModel } from '../../data/models';
 
 export type ConfigProps = {
     langDefinitions?: Lang;