website/website/resources/ts/Pages/Profile/BillingTab.vue

<script lang="ts" setup>
import { Link } from '@inertiajs/vue3'
import { useForm } from '@inertiajs/vue3'
import type { UserProfile } from '@/types'

interface Props {
  profile: UserProfile | null
}

const props = defineProps<Props>()

const billingForm = useForm({
  billing_address_line1: props.profile?.billing_address_line1 ?? '',
  billing_address_line2: props.profile?.billing_address_line2 ?? '',
  billing_city: props.profile?.billing_city ?? '',
  billing_state: props.profile?.billing_state ?? '',
  billing_zip: props.profile?.billing_zip ?? '',
  billing_country: props.profile?.billing_country ?? '',
  tax_id: props.profile?.tax_id ?? '',
  company_vat: props.profile?.company_vat ?? '',
})

const countries: string[] = [
  'United States',
  'Canada',
  'United Kingdom',
  'Australia',
  'Germany',
  'France',
  'Netherlands',
  'Japan',
  'Singapore',
  'India',
  'Brazil',
]

const submitBilling = (): void => {
  billingForm.put('/profile/billing')
}

const resetBillingForm = (): void => {
  billingForm.reset()
  billingForm.clearErrors()
}
</script>

<template>
  <VRow>
    <!-- Payment Methods Link -->
    <VCol cols="12">
      <VCard>
        <VCardText class="d-flex align-center justify-space-between flex-wrap gap-4">
          <div>
            <h5 class="text-h5 mb-1">
              Payment Methods
            </h5>
            <p class="text-body-2 text-medium-emphasis mb-0">
              Manage your payment methods, view invoices, and transaction history.
            </p>
          </div>

          <Link
            href="/billing"
            class="text-decoration-none"
          >
            <VBtn>
              <VIcon
                icon="tabler-credit-card"
                start
              />
              Manage Payment Methods
            </VBtn>
          </Link>
        </VCardText>
      </VCard>
    </VCol>

    <!-- Billing Address -->
    <VCol cols="12">
      <VCard title="Billing Address">
        <VCardText>
          <VForm @submit.prevent="submitBilling">
            <VRow>
              <VCol cols="12">
                <VTextField
                  v-model="billingForm.billing_address_line1"
                  label="Billing Address"
                  placeholder="123 Main St"
                  :error-messages="billingForm.errors.billing_address_line1 ? [billingForm.errors.billing_address_line1] : []"
                />
              </VCol>

              <VCol cols="12">
                <VTextField
                  v-model="billingForm.billing_address_line2"
                  label="Address Line 2"
                  placeholder="Suite 100"
                  :error-messages="billingForm.errors.billing_address_line2 ? [billingForm.errors.billing_address_line2] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="billingForm.billing_city"
                  label="City"
                  placeholder="New York"
                  :error-messages="billingForm.errors.billing_city ? [billingForm.errors.billing_city] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="billingForm.billing_state"
                  label="State"
                  placeholder="New York"
                  :error-messages="billingForm.errors.billing_state ? [billingForm.errors.billing_state] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="billingForm.billing_zip"
                  label="Zip Code"
                  placeholder="10001"
                  :error-messages="billingForm.errors.billing_zip ? [billingForm.errors.billing_zip] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VSelect
                  v-model="billingForm.billing_country"
                  label="Country"
                  :items="countries"
                  placeholder="Select Country"
                  :error-messages="billingForm.errors.billing_country ? [billingForm.errors.billing_country] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="billingForm.tax_id"
                  label="Tax ID"
                  placeholder="123-45-6789"
                  :error-messages="billingForm.errors.tax_id ? [billingForm.errors.tax_id] : []"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <VTextField
                  v-model="billingForm.company_vat"
                  label="VAT Number"
                  placeholder="GB123456789"
                  :error-messages="billingForm.errors.company_vat ? [billingForm.errors.company_vat] : []"
                />
              </VCol>

              <VCol
                cols="12"
                class="d-flex flex-wrap gap-4"
              >
                <VBtn
                  type="submit"
                  :loading="billingForm.processing"
                  :disabled="billingForm.processing"
                >
                  Save changes
                </VBtn>
                <VBtn
                  color="secondary"
                  variant="tonal"
                  @click="resetBillingForm"
                >
                  Discard
                </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>