fix: Reset form properly when isBusiness changes

src/components/AddressInput.tsx

@@ -63,7 +63,7 @@ const AddressInput: FunctionComponent<AddressInputProps> = (props) => {
       setHasError(false)
     }
   }, [value, billingAddress?.errors, shippingAddress?.errors])
-  let mandatoryField = billingAddress.isBusiness
+  const mandatoryField = billingAddress?.isBusiness
     ? businessMandatoryField(p.name, billingAddress.isBusiness)
     : businessMandatoryField(p.name, shippingAddress.isBusiness)
   const reqField = required !== undefined ? required : mandatoryField

src/components/AddressesContainer.tsx

@@ -33,7 +33,7 @@ export type AddressesContainerProps = {
 const AddressesContainer: FunctionComponent<AddressesContainerProps> = (
   props
 ) => {
-  const { children, shipToDifferentAddress = false, isBusiness = false } = props
+  const { children, shipToDifferentAddress = false, isBusiness } = props
   const [state, dispatch] = useReducer(addressReducer, addressInitialState)
   const { order, orderId, updateOrder } = useContext(OrderContext)
   const config = useContext(CommerceLayerContext)

src/components/AdyenPayment.tsx

@@ -158,7 +158,7 @@ const AdyenPayment: FunctionComponent<AdyenPaymentProps> = ({
           handleSubmit(ref.current as any, adyenCheckout)
         setPaymentRef({ ref })
       }
-      let browserInfo = getBrowserInfo()
+      const browserInfo = getBrowserInfo()
       const attributes: any = {
         payment_request_data: {
           payment_method: state.data.paymentMethod,

src/components/BillingAddressForm.tsx

@@ -16,6 +16,7 @@ import components from '#config/components'
 import OrderContext from '#context/OrderContext'
 import { Address } from '@commercelayer/sdk'
 import { getSaveBillingAddressToAddressBook } from '#utils/localStorage'
+import { businessMandatoryField } from '#utils/validateFormFields'
 
 const propTypes = components.BillingAddressForm.propTypes
 
@@ -36,6 +37,7 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
     ...p
   } = props
   const { validation, values, errors, reset: resetForm } = useRapidForm()
+  // const [formType, setFormType] = useState<'customer' | 'business'>('customer')
   const { setAddressErrors, setAddress, isBusiness } =
     useContext(AddressesContext)
   const {
@@ -85,6 +87,11 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
       setAddressErrors([], 'billing_address')
       for (const name in values) {
         const field = values[name]
+        const mandatory = businessMandatoryField(
+          name as AddressInputName,
+          isBusiness
+        )
+        if (!mandatory) delete values[name]
         if (field?.value) {
           values[name.replace('billing_address_', '')] = field.value
           delete values[name]
@@ -97,6 +104,7 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
           })
         }
       }
+      console.log('values', values)
       setAddress({
         values: {
           ...values,
@@ -123,15 +131,7 @@ const BillingAddressForm: FunctionComponent<BillingAddressFormProps> = (
         setAddress({ values: {} as Address, resource: 'billing_address' })
       }
     }
-  }, [errors, values, reset, include, includeLoaded])
-  useEffect(() => {
-    if (ref) {
-      ref.current?.reset()
-      resetForm({ target: ref.current } as any)
-      setAddressErrors([], 'billing_address')
-      setAddress({ values: {} as Address, resource: 'billing_address' })
-    }
-  }, [isBusiness])
+  }, [errors, values, reset, include, includeLoaded, isBusiness])
   const setValue = (
     name: AddressField | AddressInputName | AddressCountrySelectName,
     value: any

src/components/SaveAddressesButton.tsx

@@ -51,9 +51,9 @@ const SaveAddressesButton: FunctionComponent<SaveAddressesButtonProps> = (
     saveAddresses,
     billingAddressId,
     shippingAddressId,
-    isBusiness,
+    // isBusiness,
   } = useContext(AddressContext)
-  console.log('isBusiness', isBusiness)
+  // console.log('isBusiness', isBusiness)
   const { order } = useContext(OrderContext)
   const { addresses, isGuest } = useContext(CustomerContext)
   const [forceDisable, setForceDisable] = useState(disabled)
@@ -83,7 +83,6 @@ const SaveAddressesButton: FunctionComponent<SaveAddressesButtonProps> = (
     shipping_address,
     shippingAddressId,
   })
-  debugger
   const disable =
     disabled ||
     customerEmail ||

src/components/ShippingAddressForm.tsx

@@ -16,6 +16,7 @@ import components from '#config/components'
 import OrderContext from '#context/OrderContext'
 import { Address } from '@commercelayer/sdk'
 import { getSaveShippingAddressToAddressBook } from '#utils/localStorage'
+import { businessMandatoryField } from '#utils/validateFormFields'
 
 const propTypes = components.ShippingAddressForm.propTypes
 
@@ -84,6 +85,11 @@ const ShippingAddressForm: FunctionComponent<ShippingAddressFormProps> = (
       setAddressErrors([], 'shipping_address')
       for (const name in values) {
         const field = values[name]
+        const mandatory = businessMandatoryField(
+          name as AddressInputName,
+          isBusiness
+        )
+        if (!mandatory) delete values[name]
         if (field?.value) {
           values[name.replace('shipping_address_', '')] = field.value
           delete values[name]
@@ -122,7 +128,15 @@ const ShippingAddressForm: FunctionComponent<ShippingAddressFormProps> = (
         setAddress({ values: {} as Address, resource: 'shipping_address' })
       }
     }
-  }, [values, errors, shipToDifferentAddress, reset, include, includeLoaded])
+  }, [
+    values,
+    errors,
+    shipToDifferentAddress,
+    reset,
+    include,
+    includeLoaded,
+    isBusiness,
+  ])
   useEffect(() => {
     if (ref) {
       ref.current?.reset()

src/context/CustomerContext.ts

@@ -18,7 +18,9 @@ export const defaultCustomerContext = {
   saveCustomerUser: async (): Promise<void> => {
     return
   },
-  getCustomerPaymentSources: async (): Promise<void> => {},
+  getCustomerPaymentSources: async (): Promise<void> => {
+    return
+  },
   setCustomerErrors,
   setCustomerEmail,
 }

src/utils/addressesManager.ts

@@ -18,7 +18,6 @@ export const billingAddressController: BillingAddressController = ({
   requiresBillingInfo,
 }) => {
   let billingDisable = !isEmpty(errors) || isEmpty(billing_address)
-  debugger
   if (isEmpty(errors) && !isEmpty(billing_address)) {
     let billingInfo = [...addressFields]
     if (requiresBillingInfo) billingInfo = [...billingInfo, 'billing_info']

src/utils/validateFormFields.ts

@@ -95,7 +95,7 @@ export interface FieldsExist {
 }
 
 export const fieldsExist: FieldsExist = (address, schema = addressFields) => {
-  console.log('address', address)
+  // console.log('address', address)
   if (!address['business']) {
     const required = without(schema, 'line_2', 'company')
     const validAddress = keys(address).filter((k) =>
@@ -111,34 +111,44 @@ export const fieldsExist: FieldsExist = (address, schema = addressFields) => {
   }
 }
 
-type CustomerOptionalField = Extract<
-  AddressInputName,
-  | 'billing_address_line_2'
-  | 'billing_address_company'
-  | 'shipping_address_line_2'
-  | 'shipping_address_company'
->
+type CustomerOptionalField =
+  | Extract<
+      AddressInputName,
+      | 'billing_address_line_2'
+      | 'billing_address_company'
+      | 'shipping_address_line_2'
+      | 'shipping_address_company'
+    >
+  | 'company'
+  | 'line_2'
 
-type BusinessOptionalField = Extract<
-  AddressInputName,
-  | 'billing_address_first_name'
-  | 'billing_address_last_name'
-  | 'shipping_address_first_name'
-  | 'shipping_address_last_name'
->
+type BusinessOptionalField =
+  | Extract<
+      AddressInputName,
+      | 'billing_address_first_name'
+      | 'billing_address_last_name'
+      | 'shipping_address_first_name'
+      | 'shipping_address_last_name'
+    >
+  | 'first_name'
+  | 'last_name'
 
 const businessOptionalFields: BusinessOptionalField[] = [
   'billing_address_first_name',
   'billing_address_last_name',
   'shipping_address_first_name',
   'shipping_address_last_name',
+  'first_name',
+  'last_name',
 ]
 
 const customerOptionalFields: CustomerOptionalField[] = [
   'billing_address_company',
-  'shipping_address_company',
   'billing_address_line_2',
+  'shipping_address_company',
   'shipping_address_line_2',
+  'company',
+  'line_2',
 ]
 
 export function businessMandatoryField(