822 lines
28 KiB
Vue
822 lines
28 KiB
Vue
<script setup>
|
|
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
|
|
import Cart from '../layouts/components/cart.vue';
|
|
import CustomNav from '../layouts/components/navbar-custom.vue';
|
|
// import { useAppAbility } from '@/plugins/casl/useAppAbility';
|
|
import axios from '@axios';
|
|
import {
|
|
emailValidator,
|
|
requiredDate,
|
|
requiredEmail,
|
|
requiredLastName,
|
|
requiredName,
|
|
requiredPhone,
|
|
requiredValidator,
|
|
validUSAPhone
|
|
} from '@validators';
|
|
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
// const ability = useAppAbility()
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const emailExist = ref()
|
|
const isTopLoadingVisible = ref(false);
|
|
const isLoadingVisible = ref(false)
|
|
// const isPolicy = ref(false)
|
|
const isDisabled = ref(true)
|
|
const isDialogVisible = ref(false)
|
|
const refVForm = ref()
|
|
const name = ref()
|
|
const last_name = ref()
|
|
const termAndCondtiton = ref()
|
|
const receviceSMs = ref()
|
|
const email = ref(localStorage.getItem('email'))
|
|
const password = ref(localStorage.getItem('password'))
|
|
const dob = ref()
|
|
const address = ref()
|
|
const city = ref()
|
|
const phone = ref()
|
|
const state = ref()
|
|
const zipcode = ref()
|
|
const country = ref('United State')
|
|
const addressDetails = ref()
|
|
const registrationaddressDetails = ref()
|
|
const latitude = ref()
|
|
const longitude = ref()
|
|
const showAddressContainer = ref(true)
|
|
const isPolicy = ref(false);
|
|
const isCountryDisabled = ref(true);
|
|
const gender = ref(localStorage.getItem('gender'))
|
|
const maritalStatus = ref()
|
|
const height = ref()
|
|
const weight = ref()
|
|
const user_role = ref();
|
|
const products = JSON.parse(localStorage.getItem('cart_products'));
|
|
const labKits = JSON.parse(localStorage.getItem('labkits'));
|
|
const totalShipping = ref(0)
|
|
const totalAmount = ref(0)
|
|
const grandTotal = ref(0)
|
|
const prescreptionRequired = ref(false)
|
|
const shipping_price = ref(localStorage.getItem('shipping_price'))
|
|
const errors = computed(() => store.getters.getErrors)
|
|
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)
|
|
]);
|
|
const seetingPlanLogo = ref();
|
|
const settingSite = ref();
|
|
const genders = ref([
|
|
{ name: 'Male', abbreviation: 'Male' },
|
|
{ name: 'Female', abbreviation: 'Female' },
|
|
{ name: 'Other', abbreviation: 'Other' },
|
|
]);
|
|
|
|
const maritalStatuses = ref([
|
|
{ name: 'Single', abbreviation: 'Single' },
|
|
{ name: 'Married', abbreviation: 'Married' },
|
|
{ name: 'Divorced', abbreviation: 'Divorced' },
|
|
]);
|
|
|
|
const heights = ref([
|
|
{ name: '5 ft 0 in', abbreviation: '5 ft 0 in' },
|
|
{ name: '5 ft 1 in', abbreviation: '5 ft 1 in' },
|
|
{ name: '5 ft 2 in', abbreviation: '5 ft 2 in' },
|
|
{ name: '5 ft 3 in', abbreviation: '5 ft 3 in' },
|
|
{ name: '5 ft 4 in', abbreviation: '5 ft 4 in' },
|
|
{ name: '5 ft 5 in', abbreviation: '5 ft 5 in' },
|
|
{ name: '5 ft 6 in', abbreviation: '5 ft 6 in' },
|
|
{ name: '5 ft 7 in', abbreviation: '5 ft 7 in' },
|
|
{ name: '5 ft 8 in', abbreviation: '5 ft 8 in' },
|
|
{ name: '5 ft 9 in', abbreviation: '5 ft 9 in' },
|
|
{ name: '5 ft 10 in', abbreviation: '5 ft 10 in' },
|
|
{ name: '5 ft 11 in', abbreviation: '5 ft 11 in' },
|
|
{ name: '6 ft 0 in', abbreviation: '6 ft 0 in' },
|
|
{ name: '6 ft 1 in', abbreviation: '6 ft 1 in' },
|
|
{ name: '6 ft 2 in', abbreviation: '6 ft 2 in' },
|
|
{ name: '6 ft 3 in', abbreviation: '6 ft 3 in' },
|
|
{ name: '6 ft 4 in', abbreviation: '6 ft 4 in' },
|
|
{ name: '6 ft 5 in', abbreviation: '6 ft 5 in' },
|
|
{ name: '6 ft 6 in', abbreviation: '6 ft 6 in' },
|
|
{ name: '6 ft 7 in', abbreviation: '6 ft 7 in' },
|
|
{ name: '6 ft 8 in', abbreviation: '6 ft 8 in' },
|
|
{ name: '6 ft 9 in', abbreviation: '6 ft 9 in' },
|
|
{ name: '6 ft 10 in', abbreviation: '6 ft 10 in' },
|
|
{ name: '6 ft 11 in', abbreviation: '6 ft 11 in' },
|
|
{ name: '7 ft 0 in', abbreviation: '7 ft 0 in' },
|
|
]);
|
|
|
|
watch(isPolicy, (newVal) => {
|
|
isTopLoadingVisible.value = false;
|
|
// isDialogVisible.value = true;
|
|
// isPolicy.value = newVal
|
|
window.addEventListener('click', closeDialogOnOutsideClick);
|
|
// console.log('isPolicy changed to:', isPolicy.value);
|
|
});
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const onSubmit = async () => {
|
|
refVForm.value?.validate().then(async ({ valid: isValid }) => {
|
|
console.log('isValid ', isValid)
|
|
if (isValid) {
|
|
console.log('Age', calculateAge(dob.value))
|
|
store.dispatch('updateIsLoading', true)
|
|
if (calculateAge(dob.value) >= 18) {
|
|
store.dispatch('updateIsTonalSnackbar', false)
|
|
store.dispatch('updateErrorMessage', null)
|
|
await register()
|
|
console.log(store.getters.getErrors.email)
|
|
// console.log(store.getters.getPatient.id)
|
|
// if (store.getters.getPatient.id) {
|
|
if (!store.getters.getErrors.email) {
|
|
// await savePlan()
|
|
// console.log(store.getters.getRedirectTo)
|
|
// if (store.getters.getRedirectTo) {
|
|
// router.replace(route.query.to && route.query.to != '/register' ? String(route.query.to) : 'book-appointment')
|
|
// if (prescreptionRequired.value)
|
|
// router.replace(route.query.to && route.query.to != '/pre-register' ? String(route.query.to) : '/additional-information')
|
|
// else
|
|
router.replace(route.query.to && route.query.to != '/register' ? String(route.query.to) : '/checkout')
|
|
}
|
|
} else {
|
|
store.dispatch('updateIsLoading', false)
|
|
store.dispatch('updateIsTonalSnackbar', true)
|
|
store.dispatch('updateErrorMessage', 'You must be 18+')
|
|
}
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
const closeDialogOnOutsideClick = (event) => {
|
|
console.log(ref)
|
|
const dialogElement = ref.myDialog.$el;
|
|
if (!dialogElement.contains(event.target)) {
|
|
isDialogVisible.value = false;
|
|
window.removeEventListener('click', closeDialogOnOutsideClick);
|
|
}
|
|
};
|
|
onBeforeMount(() => {
|
|
products.forEach(product => {
|
|
if (product.is_prescription_required == 1) {
|
|
|
|
prescreptionRequired.value = true
|
|
} else {
|
|
|
|
prescreptionRequired.value = false
|
|
}
|
|
});
|
|
store.dispatch('updateCurrentPage', 'register')
|
|
localStorage.setItem('currentPage', 'register')
|
|
})
|
|
onMounted(async () => {
|
|
window.addEventListener('resize', checkIfMobile);
|
|
|
|
let setting = await axios.post('/api/settings', {})
|
|
settingSite.value = setting.data
|
|
seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('click', closeDialogOnOutsideClick);
|
|
});
|
|
|
|
const getAddressDetails = async (latitude, longitude) => {
|
|
const apiKey = 'AIzaSyBdqGrpK1HLNCZJueD7g3uUlKcLEDM_MmQ';
|
|
const geocodingApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${apiKey}`;
|
|
|
|
let adress = await axios(geocodingApiUrl)
|
|
console.log(adress.data)
|
|
addressDetails.value = adress.data.results[0];
|
|
const street_address = getAddressComponent('street_address');
|
|
const premise = getAddressComponent('premise');
|
|
const point_of_interest = getAddressComponent('point_of_interest');
|
|
const plus_code = getAddressComponent('plus_code');
|
|
const route = getAddressComponent('route');
|
|
const sublocality_level_1 = getAddressComponent('sublocality_level_1');
|
|
const city = getAddressComponent('locality');
|
|
const state = getAddressComponent('administrative_area_level_1');
|
|
const zip = getAddressComponent('postal_code');
|
|
const country = getAddressComponent('country');
|
|
// console.log("country", zip);
|
|
let addr = (street_address ? street_address + ', ' : '') +
|
|
(premise ? premise + ', ' : '') +
|
|
(point_of_interest ? point_of_interest + ', ' : '') +
|
|
(plus_code ? plus_code + ', ' : '') +
|
|
(route ? route + ', ' : '') +
|
|
(sublocality_level_1 ? sublocality_level_1 : '');
|
|
|
|
// Remove trailing comma and space if present
|
|
addr = addr.replace(/,\s*$/, '');
|
|
registrationaddressDetails.value = addr;
|
|
console.log(addressDetails.value.formatted_address)
|
|
console.log(addressDetails.value.address_components)
|
|
console.log(getAddressComponent('locality'))
|
|
console.log(getAddressComponent('administrative_area_level_1'))
|
|
console.log(getAddressComponent('postal_code'))
|
|
|
|
}
|
|
const getAddressComponent = (type) => {
|
|
if (addressDetails && addressDetails.value !== undefined) {
|
|
console.log('addressDetails', addressDetails.value)
|
|
const component = addressDetails.value.address_components.find(component =>
|
|
component.types.includes(type)
|
|
);
|
|
return component ? component.long_name : '';
|
|
} else {
|
|
showAddressContainer.value = true
|
|
errors.value.address = null
|
|
isLoadingVisible.value = false;
|
|
return
|
|
}
|
|
// return '';
|
|
}
|
|
const getCurrentDate = () => {
|
|
const today = new Date();
|
|
console.log("today", today);
|
|
const year = today.getFullYear();
|
|
let month = today.getMonth() + 1;
|
|
let day = today.getDate();
|
|
|
|
// Format the date to match the input type="date" format
|
|
month = month < 10 ? `0${month}` : month;
|
|
day = day < 10 ? `0${day}` : day;
|
|
|
|
return `${month}-${day}-${year}`;
|
|
};
|
|
const register = async () => {
|
|
console.log("Gender", gender.value);
|
|
await store.dispatch('registerPatient', {
|
|
first_name: name.value,
|
|
last_name: last_name.value,
|
|
phone_no: phone.value,
|
|
email: email.value,
|
|
gender: gender.value,
|
|
dob: dob.value,
|
|
password: password.value
|
|
})
|
|
}
|
|
|
|
const formatPhoneNumber = () => {
|
|
// Remove non-numeric characters from the input
|
|
const numericValue = phone.value.replace(/\D/g, '');
|
|
|
|
// Apply formatting logic
|
|
if (numericValue.length <= 10) {
|
|
phone.value = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
} else {
|
|
// Limit the input to a maximum of 14 characters
|
|
const truncatedValue = numericValue.slice(0, 10);
|
|
phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
}
|
|
};
|
|
const calculateAge = (dateOfBirth) => {
|
|
const today = new Date();
|
|
const birthDate = new Date(dateOfBirth);
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
const monthDiff = today.getMonth() - birthDate.getMonth();
|
|
|
|
if (
|
|
monthDiff < 0 ||
|
|
(monthDiff === 0 && today.getDate() < birthDate.getDate())
|
|
) {
|
|
age--;
|
|
}
|
|
|
|
return age;
|
|
};
|
|
const backFun = () => {
|
|
store.dispatch('updateIsLoading', true)
|
|
router.replace(route.query.to && route.query.to != '/register' ? String(route.query.to) : '/plans')
|
|
}
|
|
const isUserAuthenticate = () => {
|
|
|
|
user_role.value = localStorage.getItem('user_role');
|
|
if (user_role.value === 'agent') {
|
|
router.push('/provider/dashboard');
|
|
} else if (user_role.value === 'patient') {
|
|
router.push('/overview');
|
|
} else {
|
|
window.location.href = window.location.origin;
|
|
};
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup>
|
|
<!-- <HeaderTopBar></HeaderTopBar> -->
|
|
<VContainer fluid :class="isMobile ? '' : 'container-padding'">
|
|
<VRow style="min-height: 65px;"><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
|
|
<VRow no-gutters style="margin: 0px;height: 100vh;">
|
|
<VCol cols="12" md="6" class="bg-custom col-order-1"
|
|
:class="isMobile ? '' : 'pa-4'">
|
|
<Cart></Cart>
|
|
</VCol>
|
|
<VCol cols="12" md="6" class="bg-custom-color col-order-2"
|
|
:class="isMobile ? '' : 'pa-4'">
|
|
<VCard class="auth-card pa-2 rounded-5" style="" :class="isMobile ? 'second-card' : 'card-margin '">
|
|
<VCardItem class="py-2">
|
|
<VCardText class="p-0">
|
|
<!-- <VRow>
|
|
<VCol cols="12" lg="12" md="12" class="pb-10">
|
|
<div class="text-center mb-4 cursor-pointer"
|
|
style="width: 100%;position: relative;display: block; padding-top: 20px;">
|
|
<span class="text-center">
|
|
<VImg :src='seetingPlanLogo' width="250" height="50" class="logo-img" @click="isUserAuthenticate" />
|
|
</span>
|
|
</div>
|
|
</VCol>
|
|
</VRow> -->
|
|
<h5 class="text-h5 mb-1 text-left mb-4">
|
|
Basic Information
|
|
</h5>
|
|
<!-- <p class="mb-0 text-center">
|
|
Please complete the medical assessment form truthfully and thoroughly.<br> Your responses will aid the
|
|
healthcare
|
|
provider in determining the most suitable treatment plan for you.
|
|
</p> -->
|
|
</VCardText>
|
|
<VDialog v-model="store.getters.getIsLoading" 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>
|
|
<VSnackbar v-model="store.getters.getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat"
|
|
color="red">
|
|
{{ store.getters.getErrorMessage }}
|
|
</VSnackbar>
|
|
</VCardItem>
|
|
<VCardText>
|
|
|
|
<VForm ref="refVForm" @submit.prevent="onSubmit">
|
|
<VRow>
|
|
<!--<VCol cols="12" md="12" class="pb-0">
|
|
<h4>Contact Information</h4>
|
|
</VCol>-->
|
|
<VCol cols="12" md="12">
|
|
<VTextField v-model="email" label="Email Address" type="email" :rules="[requiredEmail, emailValidator]"
|
|
:error-messages="errors.email" density="comfortable" disabled />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="name" label="First Name" type="text" :rules="[requiredName]"
|
|
:error-messages="errors.name" density="comfortable" />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="last_name" label="Last Name" type="text" :rules="[requiredLastName]"
|
|
:error-messages="errors.last_name" density="comfortable" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="gender" label="Gender" :items="genders" item-title="name" item-value="abbreviation"
|
|
:rules="[requiredValidator]" :error-messages="errors.gender" density="comfortable">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="phone" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
|
:rules="[requiredPhone, validUSAPhone]" :error-messages="errors.phone"
|
|
placeholder="i.e. (000) 000-0000" @input="formatPhoneNumber" max="14" density="comfortable" />
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth" placeholder="Date of Birth"
|
|
type="date" :rules="[requiredDate]" :error-messages="errors.dob" density="comfortable" />
|
|
</VCol>
|
|
|
|
</VRow>
|
|
<!-- <VRow v-if="showAddressContainer">
|
|
<VCol cols="12" md="12">
|
|
<h4>Physical Address</h4>
|
|
</VCol>
|
|
<VCol cols="12" lg="12" md="12">
|
|
<VTextField v-model="address" label="Address" type="text" :rules="[requiredValidator]"
|
|
:error-messages="errors.address" />
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="city" label="City" type="text" :rules="[requiredValidator]"
|
|
:error-messages="errors.city" />
|
|
</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" lg="6" md="6">
|
|
<VTextField v-model="zipcode" label="Zip Code" type="number" :rules="[requiredValidator]"
|
|
:error-messages="errors.zipcode" />
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="country" label="Country" type="text" :disabled="isCountryDisabled"
|
|
:rules="[requiredValidator]" :error-messages="errors.country" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="12">
|
|
<h4>Personal Information</h4>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth" placeholder="Date of Birth"
|
|
type="date" :rules="[requiredDate]" :error-messages="errors.dob" />
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="gender" label="Select Gender" :items="genders" item-title="name"
|
|
item-value="abbreviation" :rules="[requiredValidator]" :error-messages="errors.gender">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="maritalStatus" label="Select Marital Status" :items="maritalStatuses" item-title="name"
|
|
item-value="abbreviation" :rules="[requiredValidator]" :error-messages="errors.maritalStatus">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<v-select v-model="height" label="Select Height" :items="heights" item-title="name"
|
|
item-value="abbreviation" :rules="[requiredValidator]" :error-messages="errors.height">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="weight" label="Weight" type="text" :rules="[requiredValidator]"
|
|
:error-messages="errors.weight" />
|
|
</VCol>
|
|
</VRow> -->
|
|
|
|
<VRow>
|
|
<VCol cols="v-col" class="pb-0">
|
|
<VCheckbox v-model="termAndCondtiton" :error-messages="errors.termAndCondtiton"
|
|
:rules="[requiredValidator]" label="I agree to the Terms and Conditions" />
|
|
<VCheckbox v-model="receviceSMs" :error-messages="errors.receviceSMs" :rules="[requiredValidator]"
|
|
label="I agree to receive via SMS news and special offers" />
|
|
<!-- <VCheckbox v-model="isPolicy" :error-messages="errors.isPolicy" :rules="[requiredValidator]"
|
|
label="I agree to the Privacy Policy" /> -->
|
|
<!-- <VCheckbox v-model="isPolicy" :rules="[requiredValidator]" :error-messages="errors.isPolicy">
|
|
<template v-slot:label>
|
|
<span class="text-muted">I agree to the Privacy Policy </span>
|
|
</template>
|
|
</VCheckbox> -->
|
|
<div class="d-flex align-items-center">
|
|
<div>
|
|
<VCheckbox v-model="isPolicy" ></VCheckbox>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted" style="cursor: pointer;">
|
|
I agree to the <a href="https://peptidewebmd.com/privacy-policy/" target="_blank">Privacy Policy</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</VCol>
|
|
<VCol class="text-center" cols="12">
|
|
<!-- <VBtn color="grey" class="text-center px-5" :class="isMobile ? '' : 'mr-2'" @click="backFun">Back</VBtn> -->
|
|
<VBtn type="submit" class="text-center px-5"
|
|
style="background-color: rgb(var(--v-theme-yellow-theme-button)) !important;" block>
|
|
Next
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
|
|
<VRow>
|
|
<!-- password -->
|
|
|
|
<!-- remember me checkbox -->
|
|
<!-- <VCol cols="12"> -->
|
|
<!-- <div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
|
|
<VCheckbox @click="openDialog" v-model="isPolicy" label="I agree to privacy policies" />
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<!-- login button -->
|
|
<!-- <VBtn block :disabled="isDisabled" type="submit">
|
|
Connect Live Chat
|
|
</VBtn> -->
|
|
<!-- </VCol> -->
|
|
<!-- <VCol cols="12" class="text-center text-base px-0 py-0 mb-3">
|
|
<span>Have an account yet?</span>
|
|
<RouterLink class="text-primary" to="/Login">
|
|
Login
|
|
</RouterLink>
|
|
</VCol> -->
|
|
<VDialog v-model="isDialogVisible" ref="myDialog" persistent width="500">
|
|
<!-- Activator -->
|
|
|
|
|
|
<!-- Dialog Content -->
|
|
<VCard title="">
|
|
<v-row>
|
|
<v-col class="pb-2">
|
|
<VCardText class="pb-0">
|
|
<h3>Policies</h3>
|
|
</VCardText>
|
|
</v-col>
|
|
<v-col class="text-right pt-0">
|
|
<v-btn icon color="transparent" small @click="[isDialogVisible = false, isPolicy = false]">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
</v-col>
|
|
</v-row>
|
|
<!-- <VDialog variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<VCardText class="pt-0">
|
|
This Privacy Policy describes how {{ settingSite.domain_name }}, Inc. collects
|
|
and
|
|
uses Personal Data
|
|
about
|
|
you through the
|
|
use of our Website, mobile applications, and through email, text, and other
|
|
electronic communications
|
|
between you and {{ settingSite.domain_name }}, Inc.
|
|
</VCardText>
|
|
|
|
<VCardText class="text-end pt-1">
|
|
<VBtn @click="[isDialogVisible = false, isPolicy = true, isDisabled = false]"
|
|
color="rgb(var(--v-theme-yellow))">
|
|
I accept
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</VRow>
|
|
</VForm>
|
|
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</VContainer>
|
|
<!-- <Footer></Footer> -->
|
|
</template>
|
|
<style scoped>
|
|
@media only screen and (max-width: 768px) {
|
|
.second-card{
|
|
margin-top: 20px;
|
|
}
|
|
.card-wid {
|
|
max-width: 600px !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
.col-order-1 {
|
|
order: 2;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 769px) {
|
|
.col-order-1 {
|
|
order: 1;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 2;
|
|
}
|
|
}
|
|
.container-padding{
|
|
padding: 0px;
|
|
}
|
|
.card-margin{
|
|
margin: 30px;
|
|
}
|
|
|
|
.total-font {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bg-custom {
|
|
background: #F3F3F3;
|
|
}
|
|
|
|
.bg-custom-color {
|
|
background: #E0F0E3;
|
|
}
|
|
|
|
.bg-white bg-change-bk .current-plan {
|
|
border: 2px solid rgb(var(--v-theme-primary));
|
|
}
|
|
|
|
.cut-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: line-through;
|
|
text-decoration-color: red;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.plan-card {
|
|
margin: 0rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-wid {
|
|
min-width: 600px;
|
|
}
|
|
|
|
.layout-wrapper {
|
|
justify-content: center;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ff2f2f;
|
|
font-size: 15px;
|
|
}
|
|
</style>
|
|
<style>
|
|
@import "@vendor/fonts/fontawesome.css";
|
|
@import "@vendor/fonts/tabler-icons.css";
|
|
@import "@vendor/css/rtl/core.css";
|
|
@import "@vendor/css/rtl/theme-default.css";
|
|
@import "@styles/css/demo.css";
|
|
@import "@vendor/libs/node-waves/node-waves.css";
|
|
@import "@vendor/css/pages/front-page-help-center.css";
|
|
@import "@vendor/css/pages/help-center-front-page.css";
|
|
|
|
.bg-custom {
|
|
background: #F3F3F3;
|
|
}
|
|
|
|
.bg-custom-color {
|
|
background: #E0F0E3;
|
|
}
|
|
|
|
.total-font {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.current-plan {
|
|
border: 2px solid rgb(var(--v-theme-primary));
|
|
}
|
|
|
|
.cut-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: line-through;
|
|
text-decoration-color: red;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.plan-card {
|
|
margin: 9rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.v-card.v-card--flat.v-theme--light.v-card--density-default.v-card--variant-elevated.text-center.search-header.rounded-0 {
|
|
block-size: 357px;
|
|
inset-block-start: -185px;
|
|
}
|
|
|
|
body {
|
|
display: block !important;
|
|
}
|
|
|
|
a.nav-link.fw-medium {
|
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
|
}
|
|
|
|
.light-style .layout-navbar .menu-text {
|
|
color: #5d596c !important;
|
|
}
|
|
|
|
span.app-brand-text.demo.menu-text.fw-bold.ms-2.ps-1 {
|
|
color: #5d596c !important;
|
|
}
|
|
|
|
.navbar.landing-navbar {
|
|
border-color: rgba(255, 255, 255, 68%) !important;
|
|
background: white;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
box-shadow: 0px 10px 10px #00000029;
|
|
}
|
|
|
|
.landing-footer .footer-top {
|
|
background-color: #1C5580;
|
|
border-radius: none !important;
|
|
/* background: url("/assets/img/front-pages/backgrounds/footer-bg-dark.png"); */
|
|
}
|
|
|
|
.footer-bottom.py-3 {
|
|
background-color: #282c3e;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-link,
|
|
.light-style .landing-footer .footer-text {
|
|
color: #d3d4dc !important;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-link,
|
|
.light-style .landing-footer .footer-text {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
a.footer-link {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
.light-style .landing-footer .footer-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.footer-text {
|
|
color: #d3d4dc;
|
|
}
|
|
|
|
@media (max-width: 355px) {
|
|
.first-section-pt {
|
|
margin-block-start: -121px !important;
|
|
}
|
|
}
|
|
|
|
.logo-img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* // @use "@core/scss/template/pages/page-auth.scss"; */
|
|
</style>
|