rejuvallife/resources/js/views/pages/account-settings/DeliveryAddress.vue

<script setup>
import axios from '@axios';
import {
  requiredState,
  requiredValidator,
} from '@validators';
import { onMounted } from 'vue';
const errors = ref({
  address: undefined,
  city: undefined,
  state: undefined,
  zipcode: undefined,
  country: undefined,

})
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const addressVForm = ref()
const address = ref()
const apt = ref()
const city = ref()
const state = ref()
const zipcode = ref()
const country = ref('United State')
const states = ref([
  { name: 'Howland Island', abbreviation: 'UM-84' },
  { name: 'Delaware', abbreviation: 'DE' },
  { name: 'Maryland', abbreviation: 'MD' },
  { name: 'Baker Island', abbreviation: 'UM-81' },
  { name: 'Kingman Reef', abbreviation: 'UM-89' },
  { name: 'New Hampshire', abbreviation: 'NH' },
  { name: 'Wake Island', abbreviation: 'UM-79' },
  { name: 'Kansas', abbreviation: 'KS' },
  { name: 'Texas', abbreviation: 'TX' },
  { name: 'Nebraska', abbreviation: 'NE' },
  { name: 'Vermont', abbreviation: 'VT' },
  { name: 'Jarvis Island', abbreviation: 'UM-86' },
  { name: 'Hawaii', abbreviation: 'HI' },
  { name: 'Guam', abbreviation: 'GU' },
  { name: 'United States Virgin Islands', abbreviation: 'VI' },
  { name: 'Utah', abbreviation: 'UT' },
  { name: 'Oregon', abbreviation: 'OR' },
  { name: 'California', abbreviation: 'CA' },
  { name: 'New Jersey', abbreviation: 'NJ' },
  { name: 'North Dakota', abbreviation: 'ND' },
  { name: 'Kentucky', abbreviation: 'KY' },
  { name: 'Minnesota', abbreviation: 'MN' },
  { name: 'Oklahoma', abbreviation: 'OK' },
  { name: 'Pennsylvania', abbreviation: 'PA' },
  { name: 'New Mexico', abbreviation: 'NM' },
  { name: 'American Samoa', abbreviation: 'AS' },
  { name: 'Illinois', abbreviation: 'IL' },
  { name: 'Michigan', abbreviation: 'MI' },
  { name: 'Virginia', abbreviation: 'VA' },
  { name: 'Johnston Atoll', abbreviation: 'UM-67' },
  { name: 'West Virginia', abbreviation: 'WV' },
  { name: 'Mississippi', abbreviation: 'MS' },
  { name: 'Northern Mariana Islands', abbreviation: 'MP' },
  { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
  { name: 'Massachusetts', abbreviation: 'MA' },
  { name: 'Connecticut', abbreviation: 'CT' },
  { name: 'Florida', abbreviation: 'FL' },
  { name: 'District of Columbia', abbreviation: 'DC' },
  { name: 'Midway Atoll', abbreviation: 'UM-71' },
  { name: 'Navassa Island', abbreviation: 'UM-76' },
  { name: 'Indiana', abbreviation: 'IN' },
  { name: 'Wisconsin', abbreviation: 'WI' },
  { name: 'Wyoming', abbreviation: 'WY' },
  { name: 'South Carolina', abbreviation: 'SC' },
  { name: 'Arkansas', abbreviation: 'AR' },
  { name: 'South Dakota', abbreviation: 'SD' },
  { name: 'Montana', abbreviation: 'MT' },
  { name: 'North Carolina', abbreviation: 'NC' },
  { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
  { name: 'Puerto Rico', abbreviation: 'PR' },
  { name: 'Colorado', abbreviation: 'CO' },
  { name: 'Missouri', abbreviation: 'MO' },
  { name: 'New York', abbreviation: 'NY' },
  { name: 'Maine', abbreviation: 'ME' },
  { name: 'Tennessee', abbreviation: 'TN' },
  { name: 'Georgia', abbreviation: 'GA' },
  { name: 'Louisiana', abbreviation: 'LA' },
  { name: 'Nevada', abbreviation: 'NV' },
  { name: 'Iowa', abbreviation: 'IA' },
  { name: 'Idaho', abbreviation: 'ID' },
  { name: 'Rhode Island', abbreviation: 'RI' },
  { name: 'Washington', abbreviation: 'WA' },
  { name: 'Ohio', abbreviation: 'OH' },
  // ... (add the rest of the states)
]);

onMounted(async () => {
  await getPatientInfo()
})

const getPatientInfo = async () => {
  const patient_id = localStorage.getItem('patient_id')
  const access_token = localStorage.getItem('access_token');
  isLoadingVisible.value = true;
  await axios.post('/api/agent-last-appointment-detail/' + patient_id, {
    headers: {
      'Authorization': `Bearer ${access_token}`,
    }
  })
    .then(response => {
      console.log('Response:', response.data);
      if (response.data) {
        let patientData = response.data.patient

        address.value = patientData.address;
        city.value = patientData.city
        state.value = patientData.state
        zipcode.value = patientData.zip_code
        isLoadingVisible.value = false;
      } else {
        isLoadingVisible.value = false;
      }
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

const onSubmit = () => {
  addressVForm.value?.validate().then(async ({ valid: isValid }) => {
    console.log('isValid ', isValid)
    if (isValid)
      await saveAddress()
  })
}
const saveAddress = async () => {
  isLoadingVisible.value = true;
  await axios.post('/api/update-patient-detail', {
    address: address.value,
    city: city.value,
    state: state.value,
    zip_code: zipcode.value,
    country: country.value,

  }).then(r => {
    console.log("Address Save", r.data);
    isTonalSnackbarVisible.value = true;
    patientResponse.value = r.data.message;
    isLoadingVisible.value = false;
  }).catch(e => {
    console.log(e.response);
    const { errors: formErrors } = e.response.data.errors;
    errors.value = e.response.data.errors;
    isLoadingVisible.value = false;
    console.error("Error", e.response.data.errors)
  });
}
</script>

<template>
  <VSnackbar v-model="isTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="success">
    {{ patientResponse }}
  </VSnackbar>

  <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
    <VCardText class="" style="color: white !important;">
      <div class="demo-space-x">
        <VProgressCircular :size="40" color="primary" indeterminate />
      </div>
    </VCardText>
  </VDialog>
  <VRow>
    <VCol cols="12">
      <VCard>
        <VCardText>
          <VForm ref="addressVForm" @submit.prevent="onSubmit">
            <VCardText>
              <VRow>
                <VCol cols="12" md="12">
                  <VTextField v-model="address" label="Street Name" :rules="[requiredValidator]"
                    :error-messages="errors.address" />
                </VCol>

                <VCol cols="12" md="6">
                  <VTextField v-model="apt" label="Apt Suit etc" />
                </VCol>

                <VCol cols="12" md="6">
                  <v-select v-model="state" label="Select State" :items="states" item-title="name"
                    item-value="abbreviation" :rules="[requiredState]" :error-messages="errors.state"></v-select>
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField v-model="city" label="City" :rules="[requiredValidator]" :error-messages="errors.city" />
                </VCol>
                <VCol cols="12" md="6">
                  <VTextField v-model="zipcode" label="ZIP Code" :rules="[requiredValidator]"
                    :error-messages="errors.zipcode" />
                </VCol>
              </VRow>
            </VCardText>

            <!-- 👉 Action Buttons -->
            <VCardText class="d-flex flex-wrap gap-4">
              <VBtn type="submit">Save changes</VBtn>

              <!-- <VBtn type="reset" color="secondary" variant="tonal">
                Reset
              </VBtn> -->
            </VCardText>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>