feat: improve order with shipping country code lock

Author: malessani

components/composite/StepCustomer/AddressInputGroup/index.tsx

@@ -10,7 +10,7 @@ import {
   AddressStateSelectName,
   BaseInputType,
 } from "@commercelayer/react-components"
-import { useContext, useEffect, useState } from "react"
+import { ChangeEvent, useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
 import tw from "twin.macro"
@@ -25,13 +25,15 @@ interface Props {
   fieldName: AddressInputName | AddressCountrySelectName | "email"
   resource: ResourceErrorType
   value?: string
+  openShippingAddress?: () => void
 }
 
 export const AddressInputGroup: React.FC<Props> = ({
   fieldName,
   resource,
   type,
   value,
+  openShippingAddress,
 }) => {
   const { t } = useTranslation()
 
@@ -86,6 +88,23 @@ export const AddressInputGroup: React.FC<Props> = ({
     setValueStatus(value || "")
   }, [value])
 
+  console.log(fieldName, isCountry, isState)
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (isCountry && fieldName === "billing_address_country_code") {
+      const countryCode = event.target.value
+      if (
+        !!countryCode &&
+        !!shippingCountryCodeLock &&
+        shippingCountryCodeLock !== countryCode &&
+        openShippingAddress
+      ) {
+        console.log("Apri shipping form")
+        openShippingAddress()
+      }
+    }
+  }
+
   function renderInput() {
     if (isCountry) {
       return (
@@ -99,6 +118,7 @@ export const AddressInputGroup: React.FC<Props> = ({
               label: t(`addressForm.${fieldName}_placeholder`),
               value: "",
             }}
+            onChange={handleChange}
             value={
               shippingCountryCodeLock &&
               fieldName === "shipping_address_country_code"

components/composite/StepCustomer/BillingAddressFormNew/index.tsx

@@ -8,10 +8,12 @@ import { AppContext } from "components/data/AppProvider"
 
 interface Props {
   billingAddress: Address | undefined
+  openShippingAddress: () => void
 }
 
 export const BillingAddressFormNew: React.FC<Props> = ({
   billingAddress,
+  openShippingAddress,
 }: Props) => {
   const appCtx = useContext(AppContext)
 
@@ -60,6 +62,7 @@ export const BillingAddressFormNew: React.FC<Props> = ({
           fieldName="billing_address_country_code"
           resource="billing_address"
           type="text"
+          openShippingAddress={openShippingAddress}
           value={billingAddress?.country_code || ""}
         />
       </Grid>

components/composite/StepCustomer/CheckoutAddresses.tsx

@@ -48,17 +48,23 @@ export const CheckoutAddresses: React.FC<Props> = ({
     !hasSameAddresses
   )
 
-  const handleToggleDifferentAddress = () => [
-    setShipToDifferentAddress(!shipToDifferentAddress),
-    setShippingAddressFill(undefined),
-  ]
+  const handleToggleDifferentAddress = () => {
+    return [
+      setShipToDifferentAddress(!shipToDifferentAddress),
+      setShippingAddressFill(undefined),
+    ]
+  }
 
   useEffect(() => {
-    if (shipToDifferentAddress) {
+    if (shipToDifferentAddress && hasSameAddresses) {
       setShippingAddressFill(undefined)
     }
   }, [shipToDifferentAddress])
 
+  const openShippingAddress = () => {
+    setShipToDifferentAddress(true)
+  }
+
   return (
     <Fragment>
       <AddressSectionEmail emailAddress={emailAddress} />
@@ -70,7 +76,10 @@ export const CheckoutAddresses: React.FC<Props> = ({
         </div>
         <BillingAddressForm autoComplete="on" errorClassName="hasError">
           <div className="mt-4">
-            <BillingAddressFormNew billingAddress={billingAddress} />
+            <BillingAddressFormNew
+              billingAddress={billingAddress}
+              openShippingAddress={openShippingAddress}
+            />
           </div>
         </BillingAddressForm>
         {isShipmentRequired && (

components/composite/StepCustomer/CheckoutCustomerAddresses.tsx

@@ -36,6 +36,7 @@ interface Props {
   hasCustomerAddresses: boolean
   emailAddress: string | undefined
   isLocalLoader: boolean
+  shippingCountryCodeLock: string | undefined
   handleSave: () => void
 }
 
@@ -51,6 +52,7 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
   hasCustomerAddresses,
   emailAddress,
   isLocalLoader,
+  shippingCountryCodeLock,
   handleSave,
 }: Props) => {
   const { t } = useTranslation()
@@ -81,7 +83,10 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
 
   useEffect(() => {
     if (shipToDifferentAddress && !hasCustomerAddresses) {
-      setShippingAddressFill(undefined)
+      // If billing and shipping are equivalent, show form but reset it
+      if (hasSameAddresses) {
+        setShippingAddressFill(undefined)
+      }
       setShowShippingAddressForm(true)
       setMountShippingAddressForm(true)
     }
@@ -136,6 +141,23 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
     setShipToDifferentAddress(!shipToDifferentAddress)
   }
 
+  const openShippingAddress = () => {
+    setShipToDifferentAddress(true)
+  }
+
+  const onSelect = (address: Address) => {
+    if (
+      !!shippingCountryCodeLock &&
+      address.country_code !== shippingCountryCodeLock
+    ) {
+      setShipToDifferentAddress(true)
+    }
+    localStorage.setItem(
+      "_save_billing_address_to_customer_address_book",
+      "false"
+    )
+  }
+
   return (
     <Fragment>
       <AddressSectionEmail readonly emailAddress={emailAddress as string} />
@@ -156,12 +178,7 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
                       <CustomerAddressCard
                         addressType="billing"
                         deselect={showBillingAddressForm}
-                        onSelect={() =>
-                          localStorage.setItem(
-                            "_save_billing_address_to_customer_address_book",
-                            "false"
-                          )
-                        }
+                        onSelect={onSelect}
                       />
                     </BillingAddressContainer>
                   </GridContainer>
@@ -192,6 +209,7 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
                   <>
                     <BillingAddressFormNew
                       billingAddress={billingAddressFill}
+                      openShippingAddress={openShippingAddress}
                     />
                     <AddressFormBottom
                       addressType="billing"

components/composite/StepCustomer/index.tsx

@@ -77,6 +77,7 @@ export const StepCustomer: React.FC<Props> = () => {
     isUsingNewBillingAddress,
     isUsingNewShippingAddress,
     hasCustomerAddresses,
+    shippingCountryCodeLock,
     refetchOrder,
   } = appCtx
 
@@ -132,6 +133,7 @@ export const StepCustomer: React.FC<Props> = () => {
                 isUsingNewBillingAddress={isUsingNewBillingAddress}
                 hasSameAddresses={hasSameAddresses}
                 isLocalLoader={isLocalLoader}
+                shippingCountryCodeLock={shippingCountryCodeLock}
                 handleSave={handleSave}
               />
             )}

components/ui/CustomerAddressCard/index.tsx

@@ -5,7 +5,7 @@ interface AddressCardProps {
   addressType: "shipping" | "billing"
   addresses?: AddressCollection[]
   deselect: boolean
-  onSelect?: () => void
+  onSelect?: (address: AddressCollection) => void
 }
 
 export const CustomerAddressCard: React.FC<AddressCardProps> = ({

cypress/integration/customer-address.spec.ts

@@ -390,7 +390,7 @@ describe("Checkout customer address", () => {
     })
   })
 
-  context("initial order with differend address", () => {
+  context("initial order with different address", () => {
     before(function () {
       cy.getTokenCustomer({
         username: email,
@@ -1030,7 +1030,7 @@ describe("Checkout customer address", () => {
     })
   })
 
-  context("initial order empty with country lock", () => {
+  context.only("initial order empty with country lock", () => {
     let requires_billing_info = false
     const emailTemp = faker.internet.email().toLocaleLowerCase()
     const passwordTemp = faker.internet.password()
@@ -1125,6 +1125,16 @@ describe("Checkout customer address", () => {
     })
 
     it("select first address and save", () => {
+      cy.dataCy("customer-billing-address").should(
+        "contain.text",
+        `${euAddress.firstName} ${euAddress.lastName}`
+      )
+
+      cy.dataCy("customer-billing-address").should(
+        "contain.text",
+        `${euAddress2.firstName} ${euAddress2.lastName}`
+      )
+
       cy.dataCy("customer-billing-address")
         .contains("p", euAddress.firstName)
         .click()
@@ -1154,12 +1164,12 @@ describe("Checkout customer address", () => {
       cy.wait("@deliveryLeadTimes")
     })
 
-    it("select second address and save is disabled", () => {
+    it("select second address and ship to different address should be enabled", () => {
       cy.dataCy("step_customer")
         .click()
         .should("have.attr", "data-status", "true")
 
-      cy.wait(1500)
+      cy.dataCy("shipping-address").should("not.be.visible")
 
       cy.dataCy("customer-billing-address")
         .contains("p", euAddress2.firstName)
@@ -1168,8 +1178,19 @@ describe("Checkout customer address", () => {
       cy.wait("@updateAddress", {
         timeout: 100000,
       })
+      cy.wait(1500)
+      cy.dataCy("shipping-address").should("be.visible")
+      cy.dataCy("shipping-address").should("contain", "Indirizzo di spedizione")
+      cy.dataCy("customer-shipping-address").should(
+        "contain",
+        `${euAddress.firstName} ${euAddress.lastName}`
+      )
+      cy.dataCy("customer-shipping-address").should(
+        "not.contain",
+        `${euAddress2.firstName} ${euAddress2.lastName}`
+      )
 
-      cy.dataCy("save-addresses-button").should("be.disabled")
+      cy.dataCy("save-addresses-button").should("be.enabled")
     })
 
     it("check billing information", () => {
@@ -1182,7 +1203,7 @@ describe("Checkout customer address", () => {
       cy.wait("@deliveryLeadTimes")
     })
 
-    it("add custom billing address and save is disabled", function () {
+    it("add custom billing address and save is enabled", function () {
       cy.dataCy("step_customer")
         .click()
         .should("have.attr", "data-status", "true")
@@ -1197,7 +1218,10 @@ describe("Checkout customer address", () => {
         requiresBillingInfo: requires_billing_info,
       })
 
-      cy.dataCy("save-addresses-button").should("be.disabled")
+      cy.dataCy("customer-shipping-address").should("contain", "GE (IT)")
+      cy.dataCy("customer-shipping-address").should("not.contain", "RE (FR)")
+
+      cy.dataCy("save-addresses-button").should("be.enabled")
     })
 
     it("change billing address country code and save", () => {

cypress/integration/guest-address.spec.ts

@@ -179,7 +179,7 @@ describe("Checkout guest address", () => {
     })
   })
 
-  context("initial order with differend address", () => {
+  context("initial order with different address", () => {
     before(function () {
       cy.createOrder("draft", {
         languageCode: "en",

package.json

@@ -44,8 +44,7 @@
     ]
   },
   "dependencies": {
-    "@commercelayer/react-components": "^3.0.1",
-    "@commercelayer/sdk": "2.3.14",
+    "@commercelayer/react-components": "^3.2.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
@@ -77,7 +76,7 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
-    "@types/node": "^17.0.12",
+    "@types/node": "^17.0.13",
     "@types/react": "^17.0.38",
     "@types/react-gtm-module": "^2.0.1",
     "@types/styled-components": "^5.1.21",

pages/api/settings.ts

@@ -115,6 +115,8 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       })
     } else if (order.status === "placed") {
       order = await cl.orders.retrieve(orderId)
+    } else {
+      return invalidateCheckout()
     }
   } catch (e) {
     console.log("error on retrieving or refreshing order:")