useBillingCustomerDataForm() — supabase Function Reference

Architecture documentation for the useBillingCustomerDataForm() function in useBillingCustomerDataForm.ts from the supabase codebase.

Function typescript ContentManagement AccessControl calls 1 called by 1

Entity Profile

ContentManagement→ AccessControl→ useBillingCustomerDataForm() — supabase Function Reference

Dependency Diagram

graph TD
  1a045fde_de7d_a598_5955_195969fbbafd["useBillingCustomerDataForm()"]
  a9e7e54d_7b41_3549_2112_ff1656aa2dbc["BillingCustomerData()"]
  a9e7e54d_7b41_3549_2112_ff1656aa2dbc -->|calls| 1a045fde_de7d_a598_5955_195969fbbafd
  787b8322_4159_2ec1_90a5_9113923fa0a0["sanitizeTaxIdValue()"]
  1a045fde_de7d_a598_5955_195969fbbafd -->|calls| 787b8322_4159_2ec1_90a5_9113923fa0a0
  style 1a045fde_de7d_a598_5955_195969fbbafd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/useBillingCustomerDataForm.ts lines 22–132

export function useBillingCustomerDataForm({
  initialCustomerData,
  onCustomerDataChange,
}: UseBillingAddressFormProps) {
  const form = useForm<BillingCustomerDataFormValues>({
    resolver: zodResolver(BillingCustomerDataSchema),
    defaultValues: {
      billing_name: initialCustomerData?.billing_name || '',
      line1: initialCustomerData?.line1 || '',
      line2: initialCustomerData?.line2 || '',
      city: initialCustomerData?.city || '',
      state: initialCustomerData?.state || '',
      postal_code: initialCustomerData?.postal_code || '',
      country: initialCustomerData?.country || '',
      tax_id_type: initialCustomerData?.tax_id_type || '',
      tax_id_value: initialCustomerData?.tax_id_value || '',
      tax_id_name: initialCustomerData?.tax_id_name || '',
    },
  })

  // Update form when initialAddress changes
  useEffect(() => {
    if (initialCustomerData) {
      form.reset({
        billing_name: initialCustomerData.billing_name || '',
        line1: initialCustomerData.line1 || '',
        line2: initialCustomerData.line2 || '',
        city: initialCustomerData.city || '',
        state: initialCustomerData.state || '',
        postal_code: initialCustomerData.postal_code || '',
        country: initialCustomerData.country || '',
        tax_id_type: initialCustomerData?.tax_id_type || '',
        tax_id_value: initialCustomerData?.tax_id_value || '',
        tax_id_name: initialCustomerData?.tax_id_name || '',
      })
    }
  }, [initialCustomerData])

  const handleSubmit = async (values: BillingCustomerDataFormValues) => {
    const trimmedValues = Object.entries(values).reduce((acc, [key, value]) => {
      acc[key as keyof BillingCustomerDataFormValues] =
        typeof value === 'string' ? value.trim() : value
      return acc
    }, {} as BillingCustomerDataFormValues)

    const addressPayload = !trimmedValues.line1 ? null : trimmedValues

    const selectedTaxId = TAX_IDS.find((option) => option.name === values.tax_id_name)

    onCustomerDataChange({
      address: addressPayload
        ? {
            line1: trimmedValues.line1!,
            line2: trimmedValues.line2,
            city: trimmedValues.city,
            state: trimmedValues.state,
            postal_code: trimmedValues.postal_code,
            country: trimmedValues.country!,
          }
        : undefined,
      billing_name: trimmedValues.billing_name,
      tax_id:
        selectedTaxId && values.tax_id_type?.length && values.tax_id_value?.length
          ? {
              type: values.tax_id_type,
              value: sanitizeTaxIdValue({
                value: values.tax_id_value,
                name: form.getValues().tax_id_name,
              }),
              country: selectedTaxId?.countryIso2,
            }
          : null,
    })
  }

  const handleReset = () => {
    if (initialCustomerData) {
      form.reset({
        billing_name: initialCustomerData.billing_name || '',
        line1: initialCustomerData.line1 || '',
        line2: initialCustomerData.line2 || '',
        city: initialCustomerData.city || '',
        state: initialCustomerData.state || '',
        postal_code: initialCustomerData.postal_code || '',
        country: initialCustomerData.country || '',
        tax_id_type: initialCustomerData?.tax_id_type || '',
        tax_id_value: initialCustomerData?.tax_id_value || '',
        tax_id_name: initialCustomerData?.tax_id_name || '',
      })
    } else {
      form.reset({
        line1: '',
        line2: '',
        city: '',
        state: '',
        postal_code: '',
        country: '',
        tax_id_type: '',
        tax_id_value: '',
        tax_id_name: '',
      })
    }
  }

  return {
    form,
    handleSubmit,
    handleReset,
    isDirty: form.formState.isDirty,
  }
}