fix: ignore shipping_country_code_lock for order with digital products only

Author: malessani

@typings/checkout.d.ts

@@ -13,6 +13,7 @@ interface CheckoutSettings {
   orderNumber: number
   validCheckout: true
   isGuest: boolean
+  isShipmentRequired: boolean
   endpoint: string
   domain: string
   slug: string

components/composite/CheckoutContainer/index.tsx

@@ -25,6 +25,7 @@ const CheckoutContainer = ({ settings, children }: Props): JSX.Element => {
         <AppProvider
           orderId={settings.orderId}
           isGuest={settings.isGuest}
+          isShipmentRequired={settings.isShipmentRequired}
           accessToken={settings.accessToken}
           slug={settings.slug}
           domain={settings.domain}

components/composite/StepCustomer/index.tsx

@@ -108,10 +108,12 @@ export const StepCustomer: React.FC<Props> = () => {
     forceShipping,
     disableToggle,
   }: ShippingToggleProps) => {
-    if (forceShipping) {
-      setShipToDifferentAddress(true)
+    if (isShipmentRequired) {
+      if (forceShipping) {
+        setShipToDifferentAddress(true)
+      }
+      setDisabledShipToDifferentAddress(disableToggle)
     }
-    setDisabledShipToDifferentAddress(disableToggle)
   }
 
   const handleSave = async (params: { success: boolean; order?: Order }) => {

components/data/AppProvider/index.tsx

@@ -11,7 +11,6 @@ import { ActionType, reducer } from "components/data/AppProvider/reducer"
 import {
   calculateSettings,
   checkAndSetDefaultAddressForOrder,
-  checkIfShipmentRequired,
   fetchOrder,
   FetchOrderByIdResponse,
 } from "components/data/AppProvider/utils"
@@ -88,6 +87,7 @@ interface AppProviderProps {
   slug: string
   orderId: string
   isGuest: boolean
+  isShipmentRequired: boolean
   accessToken: string
   children?: ChildrenType
 }
@@ -96,6 +96,7 @@ export const AppProvider: React.FC<AppProviderProps> = ({
   children,
   orderId,
   isGuest,
+  isShipmentRequired,
   accessToken,
   slug,
   domain,
@@ -121,7 +122,6 @@ export const AppProvider: React.FC<AppProviderProps> = ({
     }
     dispatch({ type: ActionType.START_LOADING })
     const order = await getOrderFromRef()
-    const isShipmentRequired = await checkIfShipmentRequired(cl, orderId)
 
     const addressInfos = await checkAndSetDefaultAddressForOrder({
       cl,
@@ -161,8 +161,6 @@ export const AppProvider: React.FC<AppProviderProps> = ({
     dispatch({ type: ActionType.START_LOADING })
     const currentOrder = order ?? (await getOrderFromRef())
 
-    const isShipmentRequired = await checkIfShipmentRequired(cl, orderId)
-
     const others = calculateSettings(
       currentOrder,
       isShipmentRequired,

components/data/AppProvider/utils.ts

@@ -16,7 +16,6 @@ import {
 } from "@commercelayer/sdk"
 
 import { AppStateData } from "components/data/AppProvider"
-import { LINE_ITEMS_SHIPPABLE } from "components/utils/constants"
 
 export type LineItemType =
   | "gift_cards"
@@ -283,32 +282,6 @@ export const fetchOrder = async (cl: CommerceLayerClient, orderId: string) => {
   })
 }
 
-export async function checkIfShipmentRequired(
-  cl: CommerceLayerClient,
-  orderId: string
-): Promise<boolean> {
-  const lineItems = (
-    await cl.orders.retrieve(orderId, {
-      fields: {
-        line_items: ["item_type", "item"],
-      },
-      include: ["line_items", "line_items.item"],
-    })
-  ).line_items?.filter(
-    (line_item) =>
-      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
-  )
-
-  if (lineItems?.length === undefined) {
-    return false
-  }
-  // riguardare
-  return lineItems.length > 0
-}
-
 export function isPaymentRequired(order: Order) {
   return !(order.total_amount_with_taxes_float === 0)
 }

specs/e2e/guest-addresses.spec.ts

@@ -1,7 +1,7 @@
 import { faker } from "@faker-js/faker"
 
 import { test, expect } from "../fixtures/tokenizedPage"
-import { euAddress, euAddress2 } from "../utils/addresses"
+import { euAddress, euAddress2, usAddress } from "../utils/addresses"
 
 const customerEmail = faker.internet.email().toLocaleLowerCase()
 
@@ -263,6 +263,45 @@ test.describe("with customer email and shipping country code lock", () => {
   })
 })
 
+test.describe("with digital product and shipping country code lock", () => {
+  test.use({
+    defaultParams: {
+      order: "digital",
+      orderAttributes: {
+        customer_email: customerEmail,
+        shipping_country_code_lock: "IT",
+      },
+    },
+  })
+
+  test.skip("Checkout different country code address", async ({
+    checkoutPage,
+  }) => {
+    await checkoutPage.checkOrderSummary("Order Summary")
+
+    const email = await checkoutPage.getCustomerMail()
+
+    await expect(email).toHaveValue(customerEmail)
+
+    await checkoutPage.checkStep("Customer", "open")
+
+    await checkoutPage.setBillingAddress()
+
+    await checkoutPage.selectCountry("billing_address", "FR")
+    await checkoutPage.page.fill(
+      "[data-testid=input_billing_address_state_code]",
+      "PA"
+    )
+
+    await checkoutPage.isVisibleShipToDifferentAddress(false)
+
+    await checkoutPage.checkButton({ type: "Customer", status: "enabled" })
+
+    await checkoutPage.save("Customer")
+    await checkoutPage.checkStep("Customer", "close")
+  })
+})
+
 test.describe("with shipping country code lock and different address", () => {
   test.use({
     defaultParams: {

specs/fixtures/CheckoutPage.ts

@@ -226,6 +226,17 @@ export class CheckoutPage {
     )
   }
 
+  async isVisibleShipToDifferentAddress(visible: boolean) {
+    const element = this.page.locator(
+      "[data-testid=button-ship-to-different-address]"
+    )
+    if (visible) {
+      await expect(element).toBeVisible()
+    } else {
+      await expect(element).toBeHidden()
+    }
+  }
+
   async useCustomerCard() {
     const element = this.page.getByTestId("customer-card")
     await expect(element).toBeVisible({ timeout: 10000 })

utils/getSettings.ts

@@ -8,7 +8,10 @@ import retry from "async-retry"
 import jwt_decode from "jwt-decode"
 
 import { TypeAccepted } from "components/data/AppProvider/utils"
-import { LINE_ITEMS_SHOPPABLE } from "components/utils/constants"
+import {
+  LINE_ITEMS_SHIPPABLE,
+  LINE_ITEMS_SHOPPABLE,
+} from "components/utils/constants"
 
 const RETRIES = 2
 
@@ -107,9 +110,9 @@ async function getOrder(
           "privacy_url",
           "line_items",
         ],
-        line_items: ["item_type"],
+        line_items: ["item_type", "item"],
       },
-      include: ["line_items"],
+      include: ["line_items", "line_items.item"],
     })
   )
 }
@@ -205,6 +208,14 @@ export const getSettings = async ({
     return invalidateCheckout()
   }
 
+  const isShipmentRequired = (order.line_items || []).some(
+    (line_item) =>
+      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
+  )
+
   if (order.status === "draft" || order.status === "pending") {
     // Logic to refresh the order is documented here: https://github.com/commercelayer/mfe-checkout/issues/356
     if (!paymentReturn && (!order.autorefresh || (!isGuest && order.guest))) {
@@ -231,6 +242,7 @@ export const getSettings = async ({
     slug,
     orderNumber: order.number || 0,
     orderId: order.id,
+    isShipmentRequired,
     validCheckout: true,
     logoUrl: organization.logo_url,
     companyName: organization.name || "Test company",