feat: override countries and states with organization config and pres…

…elect a default country

components/composite/StepCustomer/AddressInputGroup/index.tsx

@@ -2,6 +2,10 @@ import AddressCountrySelector from "@commercelayer/react-components/addresses/Ad
 import AddressInput from "@commercelayer/react-components/addresses/AddressInput"
 import AddressStateSelector from "@commercelayer/react-components/addresses/AddressStateSelector"
 import { Errors } from "@commercelayer/react-components/errors/Errors"
+import {
+  Country,
+  States,
+} from "@commercelayer/react-components/lib/esm/utils/countryStateCity"
 import { ChangeEvent, useContext, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
@@ -31,6 +35,9 @@ interface Props {
   resource: TResource
   required?: boolean
   value?: string
+  countries?: Country[] | undefined
+  defaultCountry?: string
+  states?: States[]
   pattern?: React.ComponentProps<typeof AddressInput>["pattern"]
   openShippingAddress?: (props: ShippingToggleProps) => void
 }
@@ -41,11 +48,18 @@ export const AddressInputGroup: React.FC<Props> = ({
   required,
   type,
   pattern,
+  countries,
+  defaultCountry,
+  states,
   value,
   openShippingAddress,
 }) => {
   const { t } = useTranslation()
 
+  console.log(countries)
+  console.log(states)
+  console.log(defaultCountry)
+  console.log(value)
   const messages: TMessages = [
     {
       code: "VALIDATION_ERROR",
@@ -122,11 +136,14 @@ export const AddressInputGroup: React.FC<Props> = ({
               value: "",
             }}
             onChange={handleChange}
+            countries={countries}
             value={
               shippingCountryCodeLock &&
               fieldName === "shipping_address_country_code"
                 ? shippingCountryCodeLock
-                : value
+                : value === "" || value == null
+                  ? defaultCountry
+                  : value
             }
             disabled={Boolean(
               shippingCountryCodeLock &&
@@ -144,6 +161,8 @@ export const AddressInputGroup: React.FC<Props> = ({
             selectClassName="form-select"
             inputClassName="form-input"
             data-testid={`input_${fieldName}`}
+            // @ts-expect-error missing
+            states={states}
             name={fieldName}
             value={value}
           />

components/composite/StepCustomer/BillingAddressFormNew/index.tsx

@@ -6,6 +6,7 @@ import tw from "twin.macro"
 import { ShippingToggleProps } from "components/composite/StepCustomer"
 import { AddressInputGroup } from "components/composite/StepCustomer/AddressInputGroup"
 import { AppContext } from "components/data/AppProvider"
+import { useSettingsOrInvalid } from "components/hooks/useSettingsOrInvalid"
 
 interface Props {
   billingAddress: NullableType<Address>
@@ -17,13 +18,18 @@ export const BillingAddressFormNew: React.FC<Props> = ({
   openShippingAddress,
 }: Props) => {
   const appCtx = useContext(AppContext)
+  const { settings } = useSettingsOrInvalid()
 
   if (!appCtx) {
     return null
   }
 
   const { requiresBillingInfo } = appCtx
 
+  const countries = settings?.config?.checkout?.billing_countries
+  const states = settings?.config?.checkout?.billing_states
+  const defaultCountry = settings?.config?.checkout?.default_country
+
   return (
     <Wrapper>
       <Grid>
@@ -64,6 +70,9 @@ export const BillingAddressFormNew: React.FC<Props> = ({
           fieldName="billing_address_country_code"
           resource="billing_address"
           type="text"
+          // @ts-expect-error missing type
+          countries={countries}
+          defaultCountry={defaultCountry}
           openShippingAddress={openShippingAddress}
           value={billingAddress?.country_code || ""}
         />
@@ -72,6 +81,8 @@ export const BillingAddressFormNew: React.FC<Props> = ({
         <AddressInputGroup
           fieldName="billing_address_state_code"
           resource="billing_address"
+          // @ts-expect-error missing type
+          states={states}
           type="text"
           value={billingAddress?.state_code || ""}
         />

components/composite/StepCustomer/ShippingAddressFormNew/index.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components"
 import tw from "twin.macro"
 
 import { AddressInputGroup } from "components/composite/StepCustomer/AddressInputGroup"
+import { useSettingsOrInvalid } from "components/hooks/useSettingsOrInvalid"
 
 interface Props {
   shippingAddress: NullableType<Address>
@@ -12,6 +13,12 @@ interface Props {
 export const ShippingAddressFormNew: React.FC<Props> = ({
   shippingAddress,
 }: Props) => {
+  const { settings } = useSettingsOrInvalid()
+
+  const countries = settings?.config?.checkout?.billing_countries
+  const states = settings?.config?.checkout?.billing_states
+  const defaultCountry = settings?.config?.checkout?.default_country
+
   return (
     <Fragment>
       <Grid>
@@ -56,6 +63,9 @@ export const ShippingAddressFormNew: React.FC<Props> = ({
         <AddressInputGroup
           fieldName="shipping_address_country_code"
           resource="shipping_address"
+          // @ts-expect-error missing type
+          countries={countries}
+          defaultCountry={defaultCountry}
           type="text"
           value={shippingAddress?.country_code || ""}
         />
@@ -65,6 +75,8 @@ export const ShippingAddressFormNew: React.FC<Props> = ({
         <AddressInputGroup
           fieldName="shipping_address_state_code"
           resource="shipping_address"
+          // @ts-expect-error missing type
+          states={states}
           type="text"
           value={shippingAddress?.state_code || ""}
         />

package.json

@@ -82,7 +82,6 @@
     "@playwright/test": "1.41.2",
     "@tailwindcss/forms": "^0.5.7",
     "@types/async-retry": "1.4.8",
-    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.12.3",
     "@types/react": "^18.2.74",
     "@types/react-gtm-module": "^2.0.3",

specs/e2e/guest-addresses.spec.ts

@@ -490,3 +490,92 @@ test.describe("email error validation", () => {
       .waitFor({ state: "visible" })
   })
 })
+
+test.describe("with custom countries for billing address", () => {
+  test.use({
+    defaultParams: {
+      order: "with-items",
+      lineItemsAttributes: [
+        { sku_code: "CANVASAU000000FFFFFF1824", quantity: 2 },
+      ],
+      organization: {
+        config: {
+          mfe: {
+            default: {
+              checkout: {
+                billing_countries: [
+                  {
+                    value: "ES",
+                    label: "Espana",
+                  },
+                  {
+                    value: "FR",
+                    label: "France",
+                  },
+                  {
+                    value: "IT",
+                    label: "Italia",
+                  },
+                  {
+                    value: "US",
+                    label: "Unites States of America",
+                  },
+                ],
+                default_country: "FR",
+                billing_states: {
+                  FR: [
+                    {
+                      value: "PA",
+                      label: "Paris",
+                    },
+                    {
+                      value: "LY",
+                      label: "Lyon",
+                    },
+                    {
+                      value: "NI",
+                      label: "Nice",
+                    },
+                    {
+                      value: "MA",
+                      label: "Marseille",
+                    },
+                    {
+                      value: "BO",
+                      label: "Bordeaux",
+                    },
+                  ],
+                  IT: [
+                    {
+                      value: "FI",
+                      label: "Firenze",
+                    },
+                    {
+                      value: "PO",
+                      label: "Prato",
+                    },
+                    {
+                      value: "LI",
+                      label: "Livorno",
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        },
+      },
+      orderAttributes: {
+        customer_email: customerEmail,
+      },
+    },
+  })
+
+  test("Checkout guest address", async ({ checkoutPage }) => {
+    await checkoutPage.checkOrderSummary("Order Summary")
+
+    await checkoutPage.checkStep("Customer", "open")
+
+    // await checkoutPage.page.pause()
+  })
+})

specs/fixtures/tokenizedPage.ts

@@ -272,7 +272,7 @@ const getOrder = async (
             ...address,
           } as AddressCreate)
           if (jwtIsSalesChannel(payload)) {
-            // @ts-expect-error sdf
+            // @ts-expect-error no customer_email needed
             const ca = await customerCl.customer_addresses.create({
               customer: customerCl.customers.relationship(
                 payload.owner?.id as string