perf: speed up checkout bootstrap

Author: malessani

components/composite/OrderSummary/CouponOrGiftCard/index.tsx

@@ -3,7 +3,7 @@ import {
   GiftCardOrCouponSubmit,
   GiftCardOrCouponForm,
 } from "@commercelayer/react-components"
-import { ErrorComponentProps } from "@commercelayer/react-components/lib/cjs/typings/errors"
+import { ErrorComponentProps } from "@commercelayer/react-components/lib/esm/typings/errors"
 import { useContext, useState } from "react"
 import { useTranslation } from "react-i18next"
 

components/composite/OrderSummary/LineItemTypes/index.tsx

@@ -8,7 +8,7 @@ import {
   LineItemOption,
   LineItemCode,
 } from "@commercelayer/react-components"
-import { LineItemType } from "@commercelayer/react-components/lib/cjs/typings"
+import { LineItemType } from "@commercelayer/react-components/lib/esm/typings"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
 import tw from "twin.macro"

components/composite/OrderSummary/index.tsx

@@ -11,9 +11,10 @@ import {
   GiftCardAmount,
 } from "@commercelayer/react-components"
 import { Trans, useTranslation } from "react-i18next"
+import "twin.macro"
 
 import { AppProviderData } from "components/data/AppProvider"
-import "twin.macro"
+import { LINE_ITEMS_SHOPPABLE } from "components/utils/constants"
 
 import { CouponOrGiftCard } from "./CouponOrGiftCard"
 import { LineItemTypes } from "./LineItemTypes"
@@ -50,7 +51,7 @@ export const OrderSummary: React.FC<Props> = ({ appCtx, readonly }) => {
             <SummarySubTitle>
               <LineItemsCount
                 data-cy="items-count"
-                typeAccepted={["skus", "gift_cards", "bundles"]}
+                typeAccepted={LINE_ITEMS_SHOPPABLE}
               >
                 {(props) => (
                   <span data-cy="items-count">
@@ -61,9 +62,9 @@ export const OrderSummary: React.FC<Props> = ({ appCtx, readonly }) => {
             </SummarySubTitle>
           </SummaryHeader>
         )}
-        <LineItemTypes type="skus" />
-        <LineItemTypes type="bundles" />
-        <LineItemTypes type="gift_cards" />
+        {LINE_ITEMS_SHOPPABLE.map((type) => (
+          <LineItemTypes type={type} key={type} />
+        ))}
       </LineItemsContainer>
       <TotalWrapper>
         <AmountSpacer />

components/composite/StepCustomer/AddressInputGroup/index.tsx

@@ -9,11 +9,11 @@ import {
   AddressInputName,
   AddressStateSelectName,
   BaseInputType,
-} from "@commercelayer/react-components/lib/cjs/typings"
+} from "@commercelayer/react-components/lib/esm/typings"
 import {
   ErrorComponentProps,
   ResourceErrorType,
-} from "@commercelayer/react-components/lib/cjs/typings/errors"
+} from "@commercelayer/react-components/lib/esm/typings/errors"
 import { useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"

components/composite/StepCustomer/AddressSectionEmail/index.tsx

@@ -1,5 +1,5 @@
 import { CustomerInput, Errors } from "@commercelayer/react-components"
-import { ErrorComponentProps } from "@commercelayer/react-components/lib/cjs/typings/errors"
+import { ErrorComponentProps } from "@commercelayer/react-components/lib/esm/typings/errors"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
 import tw from "twin.macro"

components/composite/StepPayment/CheckoutCustomerPayment.tsx

@@ -3,7 +3,7 @@ import {
   PaymentMethod,
   PaymentSource,
 } from "@commercelayer/react-components"
-import { CustomerSaveToWalletProps } from "@commercelayer/react-components/lib/cjs/components/PaymentSource"
+import { CustomerSaveToWalletProps } from "@commercelayer/react-components/lib/esm/components/PaymentSource"
 import { MouseEvent, useState } from "react"
 import { useTranslation } from "react-i18next"
 import "twin.macro"

components/composite/StepPlaceOrder/index.tsx

@@ -1,5 +1,5 @@
 import { PlaceOrderContainer } from "@commercelayer/react-components"
-import { ErrorComponentProps } from "@commercelayer/react-components/lib/cjs/typings/errors"
+import { ErrorComponentProps } from "@commercelayer/react-components/lib/esm/typings/errors"
 import { useRouter } from "next/router"
 import { useContext, useState } from "react"
 import { Trans, useTranslation } from "react-i18next"

components/composite/StepShipping/index.tsx

@@ -14,7 +14,7 @@ import {
   DeliveryLeadTime,
   ShipmentField,
 } from "@commercelayer/react-components"
-import { LineItemType } from "@commercelayer/react-components/lib/cjs/typings"
+import { LineItemType } from "@commercelayer/react-components/lib/esm/typings"
 import { ShippingMethod as ShippingMethodCollection } from "@commercelayer/sdk"
 import classNames from "classnames"
 import { useTranslation, Trans } from "next-i18next"
@@ -29,6 +29,7 @@ import { SpinnerIcon } from "components/ui/SpinnerIcon"
 import { StepContainer } from "components/ui/StepContainer"
 import { StepContent } from "components/ui/StepContent"
 import { StepHeader } from "components/ui/StepHeader"
+import { LINE_ITEMS_SHIPPABLE } from "components/utils/constants"
 
 import {
   ShippingWrapper,
@@ -89,7 +90,7 @@ export const StepHeaderShipping: React.FC<HeaderProps> = ({ step }) => {
   )
 }
 
-const ShippingLineItems: LineItemType[] = ["skus", "bundles"]
+const ShippingLineItems: LineItemType[] = LINE_ITEMS_SHIPPABLE
 
 export const StepShipping: React.FC<Props> = () => {
   const appCtx = useContext(AppContext)

components/data/AppProvider/fetchOrderById.ts

@@ -1,3 +1,4 @@
+import { TypeAccepted } from "@commercelayer/react-components/lib/esm/utils/getLineItemsCount"
 import CommerceLayer, {
   Order,
   Address,
@@ -15,6 +16,8 @@ import CommerceLayer, {
 } from "@commercelayer/sdk"
 import i18n from "i18next"
 
+import { LINE_ITEMS_SHIPPABLE } from "components/utils/constants"
+
 interface FetchOrderByIdProps {
   orderId: string
   accessToken: string
@@ -198,7 +201,7 @@ async function checkIfShipmentRequired(
     })
   ).line_items?.filter(
     (line_item) =>
-      (line_item.item_type === "skus" || line_item.item_type === "bundles") &&
+      LINE_ITEMS_SHIPPABLE.includes(line_item.item_type as TypeAccepted) &&
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       !line_item.item?.do_not_ship
@@ -226,6 +229,29 @@ export const fetchOrderById = async ({
   try {
     const fetchOrder = async () => {
       return cl.orders.retrieve(orderId, {
+        fields: {
+          orders: [
+            "id",
+            "guest",
+            "shipping_country_code_lock",
+            "customer_email",
+            "status",
+            "return_url",
+            "tax_included",
+            "requires_billing_info",
+            "total_amount_with_taxes_float",
+            "language_code",
+            "shipping_address",
+            "billing_address",
+            "shipments",
+            "payment_method",
+            "payment_source",
+            "customer",
+          ],
+          shipments: ["shipping_method"],
+          customer: ["customer_addresses"],
+          customer_addresses: ["address"],
+        },
         include: [
           "shipping_address",
           "billing_address",
@@ -409,9 +435,11 @@ export const fetchOrderById = async ({
       paymentMethod?.payment_source_type === "stripe_payments" ||
       paymentMethod?.payment_source_type === "braintree_payments"
 
-    const allAvailablePaymentMethods = (await cl.payment_methods.list()).filter(
-      ({ disabled_at }) => disabled_at === null
-    )
+    const allAvailablePaymentMethods = (
+      await cl.payment_methods.list({
+        fields: { payment_methods: ["disabled_at", "id"] },
+      })
+    ).filter(({ disabled_at }) => disabled_at === null)
 
     // If we have a customer with a single payment method
     // the payment method is automatically selected
@@ -420,7 +448,8 @@ export const fetchOrderById = async ({
       //! isGuest &&
       isPaymentRequired &&
       !hasPaymentMethod &&
-      allAvailablePaymentMethods.length === 1
+      allAvailablePaymentMethods.length === 1 &&
+      !order.payment_method?.id
     ) {
       try {
         await cl.orders.update({

components/data/GTMProvider/index.tsx

@@ -1,8 +1,10 @@
+import { TypeAccepted } from "@commercelayer/react-components/lib/esm/utils/getLineItemsCount"
 import CommerceLayer, { LineItem } from "@commercelayer/sdk"
 import { createContext, useEffect, useContext } from "react"
 import TagManager from "react-gtm-module"
 
 import { AppContext } from "components/data/AppProvider"
+import { LINE_ITEMS_SHOPPABLE } from "components/utils/constants"
 
 interface GTMProviderData {
   fireAddShippingInfo: () => Promise<void>
@@ -73,12 +75,6 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
 
   const fetchOrder = async () => {
     return cl.orders.retrieve(orderId, {
-      include: [
-        "line_items",
-        "shipments",
-        "shipments.shipping_method",
-        "payment_method",
-      ],
       fields: {
         orders: [
           "number",
@@ -89,7 +85,9 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
           "total_tax_amount_float",
           "payment_method",
         ],
+        payment_method: ["price_amount_float", "name"],
       },
+      include: ["payment_method"],
     })
   }
 
@@ -141,11 +139,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
         },
       })
     ).line_items?.filter((line_item) => {
-      return (
-        line_item.item_type === "skus" ||
-        line_item.item_type === "gift_cards" ||
-        line_item.item_type === "bundles"
-      )
+      return LINE_ITEMS_SHOPPABLE.includes(line_item.item_type as TypeAccepted)
     })
 
     return pushDataLayer({
@@ -223,11 +217,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
         },
       })
     ).line_items?.filter((line_item) => {
-      return (
-        line_item.item_type === "skus" ||
-        line_item.item_type === "gift_cards" ||
-        line_item.item_type === "bundles"
-      )
+      return LINE_ITEMS_SHOPPABLE.includes(line_item.item_type as TypeAccepted)
     })
 
     const paymentMethod = order.payment_method
@@ -262,11 +252,7 @@ export const GTMProvider: React.FC<GTMProviderProps> = ({
         },
       })
     ).line_items?.filter((line_item) => {
-      return (
-        line_item.item_type === "skus" ||
-        line_item.item_type === "gift_cards" ||
-        line_item.item_type === "bundles"
-      )
+      return LINE_ITEMS_SHOPPABLE.includes(line_item.item_type as TypeAccepted)
     })
 
     return pushDataLayer({