1776 lines
82 KiB
Vue
1776 lines
82 KiB
Vue
<script setup>
|
|
import axios from '@axios';
|
|
import OrderSummary from '@images/pages/healthcare-wellness-wellbeing-first-aid-box-word-graphic.jpg';
|
|
import {
|
|
cardNumberValidator,
|
|
cvvValidator,
|
|
expiryValidator,
|
|
requiredValidator
|
|
} from '@validators';
|
|
import moment from 'moment-timezone';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const disableNext = ref(false)
|
|
const isTimeSlot = ref()
|
|
const isDialogVisible = ref(false)
|
|
const isLoadingVisible = ref(false)
|
|
const isScheduleDialogVisible = ref(false)
|
|
const isEventScheduleDialogVisible = ref(false);
|
|
const currentDialoagkey = ref('')
|
|
const cardValue = ref(8);
|
|
const rowValue = ref(5);
|
|
const date = ref(new Date().toISOString().substr(0, 10));
|
|
const activeSlot = ref(false);
|
|
const patientName = ref('')
|
|
const patientEmail = ref('')
|
|
const firstName = ref('')
|
|
const lastName = ref('')
|
|
const email = ref('')
|
|
const phone = ref('')
|
|
const dob = ref('')
|
|
const address = ref('')
|
|
const apt = ref('')
|
|
const city = ref('')
|
|
const state = ref('')
|
|
const zipcode = ref('')
|
|
const billingaddress = ref('')
|
|
const billingapt = ref('')
|
|
const billingcity = ref('')
|
|
const billingstate = ref('')
|
|
const billingzipcode = ref('')
|
|
const termAndCondtiton = ref(true)
|
|
const billingSection = ref(false)
|
|
const schedule_consultant = ref(true)
|
|
const order_complete = ref(false);
|
|
const cardNumber = ref('')
|
|
const expiry = ref('')
|
|
const cvv = ref('')
|
|
const cart = ref('')
|
|
const patientInfoForm = ref()
|
|
const paymentForm = ref()
|
|
const questionForm = ref()
|
|
const uploadFilesRef = ref()
|
|
const refForm = ref()
|
|
const selectTimeZone = ref("America/Los_Angeles")
|
|
const formattedbookingTime = ref()
|
|
// const stimeZone = ref("America/Los_Angeles PST (-08:00)")
|
|
const step = ref(1)
|
|
const steps = ref([
|
|
{ step: 1, complete: false, editable: true },
|
|
{ step: 2, complete: false, editable: true },
|
|
{ step: 3, complete: false, editable: true },
|
|
{ step: 4, complete: false, editable: true },
|
|
// Add more steps as needed
|
|
])
|
|
const auth_information = ref();
|
|
const dob_auth_person = ref();
|
|
const relationship_auth_person = ref();
|
|
const patient_concent_Signature = ref();
|
|
const appointment_cancel_Signature = ref();
|
|
const medicare_disclaimer_Signature = ref();
|
|
const telehealth_concent_Signature = ref();
|
|
const secondary_contact_Signature = ref();
|
|
const current_scHeduleTime = moment().format('HH:mm:ss');
|
|
const timezone = ref([]);
|
|
const filterDate = ref([]);
|
|
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 orderStored = ref(false)
|
|
let previousStep = step.value;
|
|
const isFormValid = ref(false);
|
|
const patient_concent = ref(false);
|
|
const appointment_cancel = ref(false);
|
|
const medicare_disclaimer = ref(false);
|
|
const telehealth_concent = ref(false);
|
|
const secondary_contact = ref(false);
|
|
const isCalander = ref(true);
|
|
const calanderFormatedDate = ref();
|
|
const orderDate = ref();
|
|
const isScheduleEvent = ref(false);
|
|
const calanderSelectedDate = ref(new Date());
|
|
const scheduleDate = ref();
|
|
const selectTimeSlot = ref();
|
|
const chooseDate = ref([]);
|
|
const uploadFiles = ref([]);
|
|
|
|
const gender = ref()
|
|
const maritalStatus = ref()
|
|
const height = ref()
|
|
const weight = 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' },
|
|
]);
|
|
const errors = ref({
|
|
name: undefined,
|
|
last_name: undefined,
|
|
phone: undefined,
|
|
email: undefined,
|
|
dob: undefined,
|
|
address: undefined,
|
|
city: undefined,
|
|
state: undefined,
|
|
zipcode: undefined,
|
|
country: undefined,
|
|
termAndCondtiton: undefined,
|
|
receviceSMs: undefined,
|
|
isPolicy: undefined
|
|
|
|
})
|
|
const isAMPM = ref(true);
|
|
const additionalButtonsShown = ref(new Array(5).fill(false));
|
|
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const timeSlot = (index) => {
|
|
// Reset visibility of the last shown additional buttons
|
|
const lastShownIndex = additionalButtonsShown.value.findIndex((shown) => shown);
|
|
if (lastShownIndex !== -1) {
|
|
additionalButtonsShown.value[lastShownIndex] = false;
|
|
}
|
|
|
|
// Toggle the visibility of the additional buttons for the clicked time slot
|
|
additionalButtonsShown.value[index] = true;
|
|
};
|
|
|
|
const nextButton = (timeSlot) => {
|
|
// console.log('nextButton', timeSlot);
|
|
// const [time, period] = timeSlot.split(' ');
|
|
// const [hours, minutes] = time.split(':').map(Number);
|
|
// let totalSeconds = (hours % 12) * 3600 + minutes * 60;
|
|
// console.log("period", period);
|
|
// if (period.toLowerCase() === 'pm') {
|
|
// totalSeconds += 12 * 3600;
|
|
// }
|
|
// selectTimeSlot.value = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00`;
|
|
selectTimeSlot.value = timeSlot;
|
|
isCalander.value = false;
|
|
isScheduleEvent.value = true;
|
|
// Handle the logic for the "Next" button, if needed
|
|
// console.log(`Next button clicked for ${index}:00 pm`);
|
|
};
|
|
const openDialog = (question_key) => {
|
|
currentDialoagkey.value = question_key;
|
|
isDialogVisible.value = true;
|
|
window.addEventListener('click', closeDialogOnOutsideClick);
|
|
};
|
|
const closeDialogOnOutsideClick = (event) => {
|
|
const dialogElement = refs.myDialog.$el;
|
|
if (!dialogElement.contains(event.target)) {
|
|
isDialogVisible.value = false;
|
|
window.removeEventListener('click', closeDialogOnOutsideClick);
|
|
}
|
|
};
|
|
const billingAddressShow = () => {
|
|
if (billingSection.value == false) {
|
|
billingSection.value = true;
|
|
} else {
|
|
billingSection.value = false;
|
|
}
|
|
|
|
}
|
|
const questions = ref([
|
|
{
|
|
question_key: 'why_interested_hrt',
|
|
question: "What aspects of hormone replacement therapy (HRT) intrigue you?",
|
|
type: "text",
|
|
},
|
|
{
|
|
question_key: 'goal_loss_weight',
|
|
question: "Is your objective with the program to achieve weight loss?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'what_biological_sex',
|
|
question: "What is your assigned sex at birth?",
|
|
type: "radio",
|
|
options: ["Male", "Female"],
|
|
},
|
|
{
|
|
question_key: '3_years_physical_test',
|
|
question: "Have you undergone a comprehensive physical examination by a medical professional within the past three years, which included assessments of vital signs such as weight, blood pressure, and heart rate?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'medical_problems',
|
|
question: "Did you experience any medical issues? If so, could you please elaborate?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'have_prostate_cancer',
|
|
question: "Have you ever received a diagnosis of prostate cancer?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'what_height',
|
|
question: "How tall are you?",
|
|
type: "dropdown",
|
|
options: ["5 ft 1 in",
|
|
"5 ft 2 in",
|
|
"5 ft 3 in",
|
|
"5 ft 4 in",
|
|
"5 ft 5 in",
|
|
"5 ft 6 in",
|
|
"5 ft 7 in",
|
|
"5 ft 8 in",
|
|
],
|
|
},
|
|
{
|
|
question_key: 'whight',
|
|
question: "What is your weight?",
|
|
type: "text",
|
|
},
|
|
{
|
|
question_key: 'birthdate',
|
|
question: "When were you born?",
|
|
type: "date",
|
|
sub_title: 'To proceed with medication, kindly input your accurate date of birth using the format mm/dd/yyyy.'
|
|
},
|
|
{
|
|
question_key: 'past_harmone_treatments',
|
|
question: "Have you been prescribed any hormone treatments currently or in the past?",
|
|
type: "radio",
|
|
options: ["thyroid_medication", "testosterone_treatment", "estrogen_blocker", "hgh", "ipamoreline", "colomipheine", "hcg", "other", "none"],
|
|
},
|
|
{
|
|
question_key: 'take_medications',
|
|
question: "Are you currently using or have you used any over-the-counter or prescription medications, excluding hormone treatments? (Please note that your responses will be cross-checked against prescription and insurance records. Failure to disclose current prescriptions and/or medical conditions may result in disapproval for your safety.)",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'have_medications_allegies',
|
|
question: "Do you have any allergies to medications?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'plan_children',
|
|
question: "Do you intend to have children at some point in the future?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'partner_pregnant',
|
|
question: "Is your partner currently pregnant or breastfeeding?",
|
|
type: "radio",
|
|
options: ["Yes", "No", "not applicab_e"],
|
|
},
|
|
{
|
|
question_key: 'experience_ed',
|
|
question: "Are you currently experiencing any erectile dysfunction (ED) issues?",
|
|
type: "radio",
|
|
options: ["never", "almost_never", "occasionally", "almost_always", "always"],
|
|
},
|
|
{
|
|
question_key: 'thyroid_disorders',
|
|
question: "Have you ever been diagnosed with thyroid disorders such as hypothyroidism (underactive thyroid), hyperthyroidism (overactive thyroid), Hashimoto's Disease, or Graves' Disease?",
|
|
type: "radio",
|
|
options: ["Yes", "No"],
|
|
},
|
|
{
|
|
question_key: 'family_history',
|
|
question: "Does your family have a history of any of the following disorders?",
|
|
type: "radio",
|
|
options: ["drug_alcohol", "cancer", "heart_disease", "thyroid_disease", "low_testosterone",
|
|
"none"],
|
|
},
|
|
{
|
|
question_key: 'patient_concent',
|
|
question: "Please read and accept",
|
|
linktext: "Patient Content",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'appointment_cancel',
|
|
question: "Please read and accept",
|
|
linktext: "Appointment Cancel",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'medicare_disclaimer',
|
|
question: "Please read and accept",
|
|
linktext: "Medicare Disclaimer",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'telehealth_concent',
|
|
question: "Please read and accept",
|
|
linktext: "Telehealth Concent",
|
|
type: "signalCheckbox",
|
|
},
|
|
{
|
|
question_key: 'secondary_contact',
|
|
question: "Please read and accept",
|
|
linktext: "Secondary Contact Disclosure(optional)",
|
|
type: "signalCheckbox",
|
|
},
|
|
|
|
]);
|
|
const answers = ref([]);
|
|
const patientId = localStorage.getItem('patient_id');
|
|
onMounted(async () => {
|
|
window.addEventListener('resize', checkIfMobile);
|
|
// console.log("calanderSelectedDate", moment().format('YYYY-MM-DD HH:mm:ss'));
|
|
// let time = moment().format('HH:mm:ss');
|
|
// console.log("time", time);
|
|
const timezones = reactive(moment.tz.names().map(timezone => {
|
|
const offset = moment.tz(timezone).utcOffset();
|
|
const offsetHours = Math.abs(Math.floor(offset / 60));
|
|
const offsetMinutes = Math.abs(offset % 60);
|
|
const offsetSign = offset < 0 ? '-' : '+';
|
|
const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
|
|
const now = moment().tz(timezone);
|
|
const nowformattedOffset = now.format('Z');
|
|
const nowformattedTimezone = now.format('z');
|
|
const formattedTime = now.format('hh:mm A');
|
|
// console.log(timezone + ' - ' + nowformattedTimezone + ' - (' + nowformattedOffset + ')'); // Output: EST
|
|
if (isAMPM.value == false) {
|
|
return {
|
|
name: timezone + ' (' + nowformattedOffset + ') ',
|
|
abbreviation: timezone,
|
|
};
|
|
} else {
|
|
return {
|
|
name: timezone + ' (' + nowformattedOffset + ') ',
|
|
abbreviation: timezone,
|
|
};
|
|
|
|
}
|
|
|
|
}));
|
|
// await handleDateInput();
|
|
timezone.value = timezones;
|
|
|
|
await getPatientDetails()
|
|
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', checkIfMobile);
|
|
});
|
|
const getPatientDetails = async () => {
|
|
await axios.post('/api/get-patient-detail/' + patientId)
|
|
.then(response => {
|
|
// console.log("patient-detail", response.data)
|
|
let patientdata = response.data.patient
|
|
|
|
firstName.value = patientdata.first_name
|
|
lastName.value = patientdata.last_name
|
|
email.value = patientdata.email
|
|
phone.value = patientdata.phone_no
|
|
dob.value = patientdata.dob
|
|
// address.value = ''
|
|
// city.value = ''
|
|
// state.value = patientdata.state
|
|
// zipcode.value = 'sadasd'
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
const getOrderDetails = async () => {
|
|
await axios.post('/api/store-order-data/' + localStorage.getItem('cart_id'))
|
|
.then(response => {
|
|
console.log(response.data.cart)
|
|
let cartdata = response.data.cart
|
|
|
|
firstName.value = cartdata.first_name
|
|
lastName.value = cartdata.last_name
|
|
email.value = cartdata.email
|
|
phone.value = cartdata.phone
|
|
dob.value = cartdata.date_of_birth
|
|
address.value = cartdata.shipping_address1
|
|
apt.value = cartdata.shipping_address2
|
|
city.value = cartdata.shipping_city
|
|
state.value = cartdata.shipping_state
|
|
zipcode.value = cartdata.shipping_zipcode
|
|
billingaddress.value = cartdata.billing_address1
|
|
billingapt.value = cartdata.billing_address2
|
|
billingcity.value = cartdata.billing_city
|
|
billingstate.value = cartdata.billing_state
|
|
billingzipcode.value = cartdata.billing_zipcode
|
|
if (billingaddress.value) {
|
|
termAndCondtiton.value = true
|
|
billingSection.value = true
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// console.error(error);
|
|
});
|
|
};
|
|
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 cardNumberFormat = () => {
|
|
cardNumber.value = cardNumber.value.replace(/\D/g, '').substring(0, 16);
|
|
|
|
}
|
|
const formatExpiry = () => {
|
|
// Automatically format the input to MM/YY format
|
|
expiry.value = expiry.value.replace(/\D/g, '').slice(0, 4).replace(/(\d{2})(\d{2})/, '$1/$2');
|
|
}
|
|
const handleCVVInput = () => {
|
|
// Remove non-digit characters from input
|
|
cvv.value = cvv.value.replace(/\D/g, '');
|
|
}
|
|
const steeperAction = () => {
|
|
return step.value == 4;
|
|
};
|
|
watch(
|
|
() => step.value,
|
|
async (newStep) => {
|
|
if (newStep === 3) {
|
|
isCalander.value = true;
|
|
isScheduleEvent.value = false;
|
|
}
|
|
if (newStep === 4) {
|
|
|
|
}
|
|
|
|
if (newStep === 1) {
|
|
cardValue.value = 8;
|
|
}
|
|
if (newStep === 1 && newStep > previousStep) {
|
|
cardValue.value = 8;
|
|
console.log('Performing actions for Step One');
|
|
|
|
} else if (newStep === 2 && newStep > previousStep) {
|
|
cardValue.value = 10;
|
|
|
|
console.log('2 ', await validatePayment())
|
|
if (!(await validatePayment())) {
|
|
step.value = previousStep;
|
|
return
|
|
}
|
|
await updatePatientAddress()
|
|
await saveOrderInfo()
|
|
await processPayment()
|
|
console.log('Performing actions for Step Two');
|
|
} else if (newStep === 3 && newStep > previousStep) {
|
|
|
|
cardValue.value = 10;
|
|
console.log('3 ', await validateQuestion())
|
|
if (!(await validateQuestion())) {
|
|
step.value = previousStep;
|
|
return
|
|
}
|
|
|
|
saveAnswers()
|
|
|
|
console.log('Performing actions for Step Three');
|
|
|
|
} else if (newStep === 4 && newStep > previousStep) {
|
|
|
|
cardValue.value = 10;
|
|
|
|
console.log('3 ', await validateFiles())
|
|
if (!(await validateFiles())) {
|
|
step.value = previousStep;
|
|
return
|
|
}
|
|
scheduleDate.value = '';
|
|
chooseDate.value = [];
|
|
calanderFormatedDate.value;
|
|
isScheduleDialogVisible.value = true;
|
|
await updatePatientInfo()
|
|
console.log('Performing actions for Step 4');
|
|
|
|
|
|
|
|
} // Update the previousStep variable
|
|
previousStep = newStep;
|
|
}
|
|
);
|
|
const validateOrderInfo = async () => {
|
|
const { valid: isValid } = await patientInfoForm.value?.validate();
|
|
console.log('isValid ', isValid);
|
|
return isValid;
|
|
};
|
|
|
|
const updatePatientAddress = async () => {
|
|
console.log('updatePatientAddress');
|
|
await axios.post('/api/update-patient/' + patientId, {
|
|
|
|
address: address.value,
|
|
city: city.value,
|
|
state: state.value,
|
|
zip_code: zipcode.value,
|
|
country: 'United States',
|
|
|
|
}).then(r => {
|
|
console.log("updated patient ", r.data);
|
|
}).catch(e => {
|
|
console.log(e.response);
|
|
const { errors: formErrors } = e.response.data.errors;
|
|
console.error("Error", e.response.data.errors)
|
|
});
|
|
}
|
|
const saveOrderInfo = async () => {
|
|
console.log('saveOrderInfo');
|
|
await axios.post('/api/store-order-data', {
|
|
first_name: firstName.value,
|
|
last_name: lastName.value,
|
|
email: email.value,
|
|
phone: phone.value,
|
|
// date_of_birth: dob.value,
|
|
patient_id: patientId,
|
|
shipping_address1: address.value,
|
|
shipping_address2: apt.value,
|
|
shipping_city: city.value,
|
|
shipping_state: state.value,
|
|
shipping_zipcode: zipcode.value,
|
|
shipping_country: '',
|
|
billing_address1: billingaddress.value,
|
|
billing_address2: billingapt.value,
|
|
billing_city: billingcity.value,
|
|
billing_state: billingstate.value,
|
|
billing_zipcode: billingzipcode.value,
|
|
billing_country: "",
|
|
shipping_amount: 0,
|
|
total_amount: 99.00
|
|
|
|
}).then(r => {
|
|
localStorage.setItem('cart_id', r.data.cart.id)
|
|
console.log("store order", r.data);
|
|
orderStored.value = true
|
|
}).catch(e => {
|
|
console.log(e.response);
|
|
const { errors: formErrors } = e.response.data.errors;
|
|
console.error("Error", e.response.data.errors)
|
|
});
|
|
|
|
}
|
|
|
|
|
|
const validatePayment = async () => {
|
|
const { valid: isValid } = await paymentForm.value?.validate();
|
|
console.log('isValid ', isValid);
|
|
return isValid;
|
|
};
|
|
|
|
const updatePatientInfo = async () => {
|
|
console.log('updatePatientInfo');
|
|
await axios.post('/api/update-patient/' + patientId, {
|
|
|
|
dob: dob.value,
|
|
gender: gender.value,
|
|
marital_status: maritalStatus.value,
|
|
height: height.value,
|
|
weight: weight.value,
|
|
|
|
}).then(r => {
|
|
console.log("updated patient ", r.data);
|
|
}).catch(e => {
|
|
console.log(e.response);
|
|
const { errors: formErrors } = e.response.data.errors;
|
|
console.error("Error", e.response.data.errors)
|
|
});
|
|
}
|
|
|
|
const processPayment = async () => {
|
|
await axios.post('/api/process-payment')
|
|
.then(response => {
|
|
console.log(response.data)
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
const validateQuestion = async () => {
|
|
const { valid: isValid } = await questionForm.value?.validate();
|
|
console.log('isValid ', isValid);
|
|
return isValid;
|
|
};
|
|
|
|
const validateFiles = async () => {
|
|
const { valid: isValid } = await uploadFilesRef.value?.validate();
|
|
console.log('isValid ', isValid);
|
|
return isValid;
|
|
};
|
|
|
|
const saveAnswers = async () => {
|
|
const patient_id = localStorage.getItem('patient_id');
|
|
const jsonData = {
|
|
questions: questions.value.reduce((accumulator, question, index) => {
|
|
const answerValue = answers.value[question.question_key];
|
|
|
|
if (answerValue !== undefined) {
|
|
accumulator.push({
|
|
question_key: question.question_key,
|
|
type: question.type,
|
|
answer: answerValue,
|
|
});
|
|
}
|
|
|
|
return accumulator;
|
|
}, []),
|
|
};
|
|
let qaData = Array({ 'answers': jsonData.questions });
|
|
console.log('answers ', JSON.stringify(qaData));
|
|
// You can send the jsonData to your server or use it as needed
|
|
axios.post('/api/medical-history-question-post/' + patient_id,
|
|
{
|
|
answers: jsonData.questions
|
|
}
|
|
)
|
|
.then(response => {
|
|
console.log('answer api', response.data)
|
|
// console.log(chooseDate);
|
|
order_complete.value = true;
|
|
localStorage.setItem('isLogin', 'true')
|
|
localStorage.setItem('profileCompleted', '0')
|
|
})
|
|
.catch(error => {
|
|
// console.error(error);
|
|
});
|
|
};
|
|
|
|
const abc = computed(() => {
|
|
console.log("Step", step.value);
|
|
});
|
|
const hideActions = ref();
|
|
const selectedTimeZoneName = computed(() => {
|
|
|
|
// Find the selected time zone in the array and return its name
|
|
const chosenTimeZone = timezone.value.find(zone => zone.abbreviation === selectTimeZone.value);
|
|
return chosenTimeZone ? chosenTimeZone.name : '';
|
|
});
|
|
|
|
const selectedStateName = computed(() => {
|
|
const selectedState = states.value.find(s => s.abbreviation === state.value);
|
|
|
|
return selectedState ? selectedState.name : '';
|
|
});
|
|
const patientScheduleInfo = ref()
|
|
const scheduleSubmit = () => {
|
|
|
|
patientScheduleInfo.value?.validate().then(({ valid: isValid }) => {
|
|
console.log('isValid ', isValid)
|
|
if (isValid)
|
|
scheduleEvent()
|
|
})
|
|
};
|
|
|
|
|
|
const scheduleEvent = async () => {
|
|
isTimeSlot.value = '';
|
|
// console.log("sdsadsd", selectTimeZone.value);
|
|
const patient_id = localStorage.getItem('patient_id');
|
|
const access_token = localStorage.getItem('access_token');
|
|
isLoadingVisible.value = true;
|
|
// console.log("isAMPM", isAMPM.value);
|
|
if (isAMPM.value) { //24 hours
|
|
isTimeSlot.value = selectTimeSlot.value + ":00"
|
|
// console.log("timeSlot", isTimeSlot.value);
|
|
} else { //Am pm
|
|
let timeString = selectTimeSlot.value;
|
|
|
|
// Parse the time string into a Moment.js object
|
|
let timeMoment = moment(timeString, 'hh:mm A');
|
|
|
|
// Format the Moment.js object to the desired format ":02:00:00"
|
|
isTimeSlot.value = timeMoment.format('hh:mm:ss');
|
|
|
|
// console.log("formattedTimeAsif", isTimeSlot.value);
|
|
}
|
|
// const parsedTime = moment(selectTimeSlot.value, ['hh:mm A', 'HH:mm A'], true);
|
|
// console.log("parsedTime", parsedTime);
|
|
// Format the time string to "HH:mm:ss"H:i:s
|
|
// formattedbookingTime.value = parsedTime.format('HH:mm:ii');
|
|
// console.log("formattedbookingTime", formattedbookingTime.value);
|
|
await axios.post('/api/book-appointment', {
|
|
patient_id: patient_id,
|
|
patient_name: patientName.value,
|
|
patient_email: patientEmail.value,
|
|
appointment_date: calanderFormatedDate.value,
|
|
appointment_time: isTimeSlot.value,
|
|
timezone: selectTimeZone.value
|
|
}, {
|
|
headers: {
|
|
'Authorization': `Bearer ${access_token}`,
|
|
}
|
|
})
|
|
.then(response => {
|
|
hideActions.value = steeperAction();
|
|
console.log("action", hideActions.value);
|
|
console.log('Response:', response.data);
|
|
const appointmentDetail = response.data.appointment;
|
|
localStorage.setItem('patient_appointment_id', appointmentDetail.id);
|
|
// isEventScheduleDialogVisible.value = true;
|
|
isCalander.value = false;
|
|
isScheduleEvent.value = false;
|
|
schedule_consultant.value = false;
|
|
order_complete.value = true;
|
|
localStorage.setItem('isLogin', 'true')
|
|
isLoadingVisible.value = false;
|
|
})
|
|
.catch(error => {
|
|
|
|
console.error('Error:', error);
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const minDate = computed(() => {
|
|
const today = new Date();
|
|
return new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
});
|
|
|
|
const maxDate = computed(() => {
|
|
const threeMonthsLater = new Date();
|
|
threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
|
|
return new Date(
|
|
threeMonthsLater.getFullYear(),
|
|
threeMonthsLater.getMonth(),
|
|
threeMonthsLater.getDate()
|
|
);
|
|
});
|
|
const isEventClose = () => {
|
|
isEventScheduleDialogVisible.value = false;
|
|
isLoadingVisible.value = true;
|
|
router.push('/overview');
|
|
}
|
|
const handleDateInput = () => {
|
|
chooseDate.value = [];
|
|
isLoadingVisible.value = true;
|
|
scheduleDate.value = '';
|
|
console.log("calanderDate", calanderSelectedDate.value);
|
|
const access_token = localStorage.getItem('access_token');
|
|
console.log(access_token);
|
|
const selectedDate = new Date(calanderSelectedDate.value);
|
|
const year = selectedDate.getFullYear();
|
|
const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0'); // Adding 1 because months are zero-indexed
|
|
const day = selectedDate.getDate().toString().padStart(2, '0');
|
|
calanderFormatedDate.value = `${year}-${month}-${day}`;
|
|
orderDate.value = `${month}-${day}-${year}`;
|
|
const formattedDate = new Intl.DateTimeFormat('en-US', {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
}).format(calanderSelectedDate.value);
|
|
scheduleDate.value = formattedDate;
|
|
console.log("formattedDate", calanderFormatedDate.value, formattedDate);
|
|
if (calanderFormatedDate.value) {
|
|
axios.post('/api/available-slots/' + calanderFormatedDate.value, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${access_token}`,
|
|
'Accept': 'application/json',
|
|
}
|
|
})
|
|
.then(response => {
|
|
// Handle the successful response here
|
|
// console.log('Response:', response.data);
|
|
// let apiData = response.data.available_slots;
|
|
let scheduleTime = selectTimeZone.value;
|
|
|
|
chooseDate.value = response.data.available_slots;
|
|
getTimeSlots(chooseDate.value, scheduleTime);
|
|
isLoadingVisible.value = false;
|
|
})
|
|
.catch(error => {
|
|
// Handle errors here
|
|
console.error('Error:', error);
|
|
});
|
|
} else {
|
|
chooseDate.value = [];
|
|
}
|
|
};
|
|
|
|
const getTimeSlots = (availableSlot, timezone) => {
|
|
|
|
let offestTimeZone = timezone;
|
|
// console.log('timezone', offestTimeZone);
|
|
// Get the current time in the specified timezone
|
|
const now = moment();
|
|
|
|
// Define the time slots (adjust as needed)
|
|
const timeSlots = availableSlot;
|
|
|
|
// Initialize an array to store the current time slots
|
|
const convertedSlots = {};
|
|
|
|
// Convert each time slot to the specified timezone
|
|
for (const [key, value] of Object.entries(availableSlot)) {
|
|
|
|
let slot = value;
|
|
// console.log('slot', slot);
|
|
const concateDate = calanderFormatedDate.value + ' ' + slot;
|
|
// console.log('concateDate', concateDate);
|
|
|
|
const originalTime = moment.utc(concateDate, 'YYYY-MM-DD HH:mm:ss');
|
|
// console.log("originalTime", originalTime.format('YYYY-MM-DD HH:mm:ss'));
|
|
const convertedTime = originalTime.tz(timezone);
|
|
let converted_date = convertedTime.format('YYYY-MM-DD');
|
|
// console.log("convertedTime", convertedTime.format('YYYY-MM-DD HH:mm:ss'));
|
|
if (converted_date == calanderFormatedDate.value) {
|
|
if (isAMPM.value) {
|
|
convertedSlots[key] = convertedTime.format('HH:mm');
|
|
} else {
|
|
convertedSlots[key] = convertedTime.format('hh:mm A');
|
|
}
|
|
|
|
}
|
|
// const convertedTimee = moment.utc(concateDate, 'HH:mm:ss').utcOffset(offsetSign * offsetMinutes);
|
|
|
|
|
|
// console.log(`Converted timee (${offestTimeZone}): ${convertedTime.format('HH:mm:ss')}`);
|
|
// let start_date = moment.utc(concateDate + " 00:00:00", "YYYY-MM-DD HH:mm:ss").utcOffset(timezoneComponents[0]).format("YYYY-MM-DD HH:mm:ss");
|
|
}
|
|
// console.log('convertedSlots', convertedSlots);
|
|
chooseDate.value = convertedSlots;
|
|
// console.log('convertedSlots', convertedSlots);
|
|
// console.log('chooseDate', chooseDate.value);
|
|
// Return the converted time slots
|
|
return convertedSlots;
|
|
};
|
|
const getCurrentDate = () => {
|
|
const today = new Date();
|
|
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 `${year}-${month}-${day}`;
|
|
};
|
|
|
|
const handleContinueClick = (currentDialoagkey) => {
|
|
isDialogVisible.value = false; // Hide the dialog
|
|
answers.value[currentDialoagkey] = true; // Update the answers object
|
|
};
|
|
|
|
const handleSwitchChange = async () => {
|
|
timezone.value = [];
|
|
if (isAMPM.value == false) {
|
|
const timezones = reactive(moment.tz.names().map(timezone => {
|
|
const offset = moment.tz(timezone).utcOffset();
|
|
const offsetHours = Math.abs(Math.floor(offset / 60));
|
|
const offsetMinutes = Math.abs(offset % 60);
|
|
const offsetSign = offset < 0 ? '-' : '+';
|
|
const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
|
|
const now = moment().tz(timezone);
|
|
const nowformattedOffset = now.format('Z');
|
|
const nowformattedTimezone = now.format('z');
|
|
const formattedTime = now.format('hh:mm A');
|
|
return {
|
|
name: timezone + ' (' + formattedTime + ') ',
|
|
abbreviation: timezone
|
|
};
|
|
}));
|
|
timezone.value = timezones;
|
|
|
|
} else {
|
|
const timezones = reactive(moment.tz.names().map(timezone => {
|
|
const offset = moment.tz(timezone).utcOffset();
|
|
const offsetHours = Math.abs(Math.floor(offset / 60));
|
|
const offsetMinutes = Math.abs(offset % 60);
|
|
const offsetSign = offset < 0 ? '-' : '+';
|
|
const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
|
|
const now = moment().tz(timezone);
|
|
const nowformattedOffset = now.format('Z');
|
|
const nowformattedTimezone = now.format('z');
|
|
const formattedTime = now.format('hh:mm A');
|
|
return {
|
|
name: timezone + ' (' + formattedTime + ') ',
|
|
abbreviation: timezone
|
|
};
|
|
}));
|
|
|
|
|
|
timezone.value = timezones;
|
|
}
|
|
await handleDateInput();
|
|
|
|
}
|
|
// const noSlotsAvailable = ref(false);
|
|
const filteredSlots = computed(() => {
|
|
const today = new Date();
|
|
const todayDateString = today.toISOString().substr(0, 10); // Get today's date in YYYY-MM-DD format
|
|
// console.log("todayDateString", todayDateString);
|
|
const formattedDate = new Intl.DateTimeFormat('en-US', {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
}).format(calanderSelectedDate.value);
|
|
scheduleDate.value = formattedDate;
|
|
let isTodaySlotAvailable = false;
|
|
const entries = Object.entries(chooseDate.value)
|
|
// console.log("entries", entries);
|
|
for (const slotDate of entries) {
|
|
if (calanderFormatedDate.value === todayDateString) {
|
|
filterDate.value.push(slotDate);
|
|
} else {
|
|
return chooseDate.value;
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
|
|
const handleTimeZoneChange = () => {
|
|
// Do something with the new selected time zone value
|
|
console.log('Selected time zone:', selectTimeZone.value);
|
|
};
|
|
const nextStep = async () => {
|
|
console.log('step', step.value)
|
|
if (step.value == 1) {
|
|
console.log('1 ', await validatePayment())
|
|
if (!(await validatePayment())) {
|
|
step.value = previousStep;
|
|
return
|
|
}
|
|
isLoadingVisible.value = true
|
|
await updatePatientAddress()
|
|
await saveOrderInfo()
|
|
await processPayment()
|
|
console.log('Performing actions for Step Two');
|
|
isLoadingVisible.value = false
|
|
step.value++;
|
|
|
|
}
|
|
|
|
if (step.value == 2) {
|
|
console.log('2 ', await validateQuestion())
|
|
if (!(await validateQuestion())) {
|
|
step.value = previousStep;
|
|
return
|
|
}
|
|
isLoadingVisible.value = true
|
|
await saveAnswers()
|
|
isLoadingVisible.value = false
|
|
disableNext.value = true
|
|
}
|
|
|
|
};
|
|
|
|
const prevStep = () => {
|
|
step.value--;
|
|
};
|
|
</script>
|
|
<template class="mx-4 mb-3">
|
|
<section>
|
|
<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 class="mx-lg-3 mx-0 mt-4">
|
|
<VCol cols="12" lg="12" md="12">
|
|
<router-link to="/" class="text-center" style="width: 100%;position: relative;display: block;">
|
|
<span class="text-center">
|
|
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
|
|
fill="#7367F0" />
|
|
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
|
|
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
|
|
fill="#7367F0" />
|
|
</svg>
|
|
</span>
|
|
<span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">HGH</span>
|
|
</router-link>
|
|
</VCol>
|
|
<VCol cols="12" :lg="cardValue" md="6" class="mb-5">
|
|
<VCard>
|
|
<v-stepper :hide-actions="true" alt-labels hide-details v-model="step" :step="step"
|
|
:items="['', '']">
|
|
<template v-slot:item.1>
|
|
<v-card class="p-0" title="" flat>
|
|
<h4>Payment Information</h4>
|
|
<VForm ref="paymentForm" @submit.prevent="() => { }">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VRow>
|
|
<VCol cols="12" lg="12" md="12">
|
|
<VTextField v-model="cardNumber" label="Credit Card Number*"
|
|
:rules="[requiredValidator, cardNumberValidator]"
|
|
placeholder="xxxxxxxxxxxxxxxx" @input="cardNumberFormat" />
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="expiry" label="Expiration Date*"
|
|
:rules="[requiredValidator, expiryValidator]"
|
|
placeholder="MM/YY" @input="formatExpiry" />
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="cvv" :rules="[requiredValidator, cvvValidator]"
|
|
label="CVV*" maxlength="3" @input="handleCVVInput" />
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<svg v-if="!isMobile" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="auto"
|
|
height="150" viewBox="0 0 256 256" xml:space="preserve">
|
|
|
|
<defs>
|
|
</defs>
|
|
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
|
|
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
|
|
<path
|
|
d="M 81.159 25.776 l -0.9 -10.05 c -0.101 -1.123 -1.092 -1.952 -2.215 -1.851 L 1.86 20.698 c -1.123 0.101 -1.952 1.092 -1.851 2.215 l 4.128 46.09 c 0.101 1.123 1.092 1.952 2.215 1.851 l 3.076 -0.276 L 81.159 25.776 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(176,182,188); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<path
|
|
d="M 9.428 74.189 c 0 1.074 0.871 1.944 1.944 1.944 h 76.683 c 1.074 0 1.944 -0.871 1.944 -1.944 V 49.73 c -26.255 -4.947 -53.138 -4.734 -80.572 0 V 74.189 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(64,89,107); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<path
|
|
d="M 88.056 25.776 H 11.372 c -1.074 0 -1.944 0.871 -1.944 1.945 v 7.719 c 26.857 6.175 53.715 6.175 80.572 0 v -7.719 C 90 26.647 89.129 25.776 88.056 25.776 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(64,89,107); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<rect x="9.43" y="35.44" rx="0" ry="0" width="80.57" height="14.29"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " />
|
|
<path
|
|
d="M 51.045 60.484 H 19.469 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 31.576 c 0.553 0 1 0.447 1 1 S 51.598 60.484 51.045 60.484 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<path
|
|
d="M 37.707 68.001 H 19.469 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 18.238 c 0.552 0 1 0.447 1 1 S 38.259 68.001 37.707 68.001 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<path
|
|
d="M 51.045 68.001 h -8.574 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 8.574 c 0.553 0 1 0.447 1 1 S 51.598 68.001 51.045 68.001 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
<path
|
|
d="M 81.153 58.484 H 65.638 c -0.553 0 -1 0.447 -1 1 v 7.517 c 0 0.553 0.447 1 1 1 h 15.516 c 0.553 0 1 -0.447 1 -1 v -7.517 C 82.153 58.932 81.706 58.484 81.153 58.484 z"
|
|
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
|
|
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
|
</g>
|
|
</svg>
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="12">
|
|
<p>Payments processed in the United States. Card information secured
|
|
by SSL
|
|
128
|
|
bit encryption.</p>
|
|
</VCol>
|
|
</VRow>
|
|
<v-card class="p-0" title="" flat>
|
|
<h4>Billing Information</h4>
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="address" label="Address"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="apt" label="APT/Suite #" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="city" label="City" :rules="[requiredValidator]" />
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="state" label="Select State" :items="states"
|
|
item-title="name" item-value="abbreviation"
|
|
:rules="[requiredValidator]" :error-messages="errors.state">
|
|
</v-select>
|
|
<!-- <VTextField v-model="state" :rules="[requiredValidator]" label="State" /> -->
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<VTextField type="number" v-model="zipcode" :rules="[requiredValidator]"
|
|
label="ZipCode" />
|
|
</VCol>
|
|
</VRow>
|
|
</v-card>
|
|
<!-- <VRow>
|
|
<VCol cols="12" md="5" class="mt-3">
|
|
<VCheckbox v-model="termAndCondtiton" @click=billingAddressShow
|
|
label="Billing Address same as shipping." />
|
|
</VCol>
|
|
</VRow> -->
|
|
|
|
<v-card class="p-0 mt-2" flat v-if="billingSection">
|
|
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="billingaddress" label="Address"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="billingapt" label="APT/Suite #" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="billingcity" label="City"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
<!-- <VRow>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="email" label="Email"
|
|
:rules="[requiredValidator, emailValidator]" />
|
|
</VCol>
|
|
<VCol cols="6">
|
|
<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" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="6">
|
|
<VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth"
|
|
placeholder="Date of Birth" type="date" :rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow> -->
|
|
</v-card>
|
|
</VForm>
|
|
</v-card>
|
|
|
|
</template>
|
|
<template v-slot:item.2>
|
|
<v-card title="" flat>
|
|
<h5 v-if="!order_complete">Please fill the assesment form carefully.</h5>
|
|
<VForm v-if="!order_complete" ref="questionForm" @submit.prevent="() => { }">
|
|
<div>
|
|
<v-row v-for="(q, index) in questions " :key="index">
|
|
<v-col>
|
|
<template v-if="q.type === 'text'">
|
|
<p><b>{{ q.question }}</b></p>
|
|
<v-text-field v-model="answers[q.question_key]"
|
|
:rules="[requiredValidator]" />
|
|
</template>
|
|
<template v-if="q.type === 'date'">
|
|
<p><b>{{ q.question }}</b></p>
|
|
<v-text-field class="col-lg-4" :max="getCurrentDate()"
|
|
:type="q.type" :rules="[requiredValidator]"
|
|
v-model="answers[q.question_key]" />
|
|
</template>
|
|
<template v-if="q.type === 'signalCheckbox'">
|
|
<!-- <div class="d-flex">
|
|
<div>
|
|
<VCheckbox v-model="answers[q.question_key]"
|
|
@click="openDialog(q.question_key)">
|
|
</VCheckbox>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted">{{ q.question }} <b class="text-reset"
|
|
@click="openDialog(q.question_key)"> {{
|
|
q.linktext }}</b></span>
|
|
</div>
|
|
</div> -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox"
|
|
v-model="answers[q.question_key]"
|
|
@click="openDialog(q.question_key)">
|
|
<label class="form-check-label" for="flexCheckDisabled">
|
|
{{ q.question }} <b class="text-reset"
|
|
style="cursor: pointer;"
|
|
@click="openDialog(q.question_key)">{{
|
|
q.linktext }}</b>
|
|
</label>
|
|
</div>
|
|
<!-- <div class="d-flex align-items-center">
|
|
<div>
|
|
<VCheckbox v-model="answers[q.question_key]"
|
|
@click="openDialog(q.question_key)"></VCheckbox>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-muted">
|
|
{{ q.question }}
|
|
<b class="text-reset" style="cursor: pointer;"
|
|
@click="openDialog(q.question_key)">{{
|
|
q.linktext }}</b>
|
|
</span>
|
|
</div>
|
|
</div> -->
|
|
</template>
|
|
<template v-else-if="q.type === 'radio'">
|
|
<p><b>{{ q.question }}</b></p>
|
|
<v-checkbox v-for="( option, optionIndex ) in q.options "
|
|
:key="optionIndex" v-model="answers[q.question_key]"
|
|
:label="option" :value="option"></v-checkbox>
|
|
</template>
|
|
<template v-else-if="q.type === 'dropdown'">
|
|
<p><b>{{ q.question }}</b></p>
|
|
<v-select v-model="answers[q.question_key]" :items="q.options"
|
|
label="Select"></v-select>
|
|
|
|
</template>
|
|
<template v-else-if="q.type === 'checkbox'">
|
|
<p><b>{{ q.question }}</b></p>
|
|
<v-checkbox v-model="answers[q.question_key]"
|
|
:label="q.label"></v-checkbox>
|
|
<v-checkbox v-for="( option, optionIndex ) in q.options "
|
|
:key="optionIndex" :value="option"
|
|
v-model="answers[q.question_key]" :label="option"></v-checkbox>
|
|
</template>
|
|
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</VForm>
|
|
<VCardText v-if="order_complete">
|
|
<VRow>
|
|
<VCol cols="12" lg="12" md="12">
|
|
<h2 class="text-center mt-2"><span
|
|
class=" badge badge-center rounded-pill bg-success p-0 me-2"><i
|
|
class="ti ti-check ti-xs"></i></span>
|
|
Your Order is Complete
|
|
</h2>
|
|
<div class="v-col v-col-12 text-center w-100">
|
|
<img class="img-fluid text-center"
|
|
src="assets/img/pages/7xm.xyz325616.jpg" alt="Medical Expert Image"
|
|
style="width: 100%; max-height: 300px; object-fit: cover;">
|
|
</div>
|
|
|
|
<VCol cols="12">
|
|
<VCardText>
|
|
<p>We've emailed your order confirmation to you.</p>
|
|
<p>When your hormone test kit ships, we'll notify you via email and
|
|
text. We'll also send you appointment
|
|
reminders via email and text before your online
|
|
consultation.</p>
|
|
<p><b>Please note that we charge a $59 fee for any missed
|
|
appointments.</b></p>
|
|
<p>If you need to reschedule or cancel, please do so at least 24
|
|
hours
|
|
prior to your appointment. For
|
|
questions,
|
|
text Member Support at (243)-445-0088</p>
|
|
</VCardText>
|
|
|
|
</VCol>
|
|
<VCol cols="12 mb-3" class="text-center">
|
|
<RouterLink to="/overview">
|
|
<VBtn> Access Member Portral</VBtn>
|
|
</RouterLink>
|
|
|
|
</VCol>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
</v-card>
|
|
</template>
|
|
<VRow>
|
|
<VCol col="12" md="6">
|
|
<v-btn color="grey" @click="prevStep" :disabled="step === 1" v-if="!disableNext"
|
|
class="m-4">Previous</v-btn>
|
|
</VCol>
|
|
<VCol col="12" md="6">
|
|
<v-btn @click="nextStep" v-if="!disableNext" class="float-right m-4">Next</v-btn>
|
|
</VCol>
|
|
</VRow>
|
|
<VDialog v-model="isScheduleDialogVisible" refs="myDialog" persistent width="500">
|
|
<VCard>
|
|
<VCardItem>
|
|
<VCardTitle class="pt-0 text-center text-dark"><b>Next Step:</b> </VCardTitle>
|
|
<VCardTitle class="pt-0 text-center text-dark text-wrap"><b>Schedule Your eClinic
|
|
Consultation</b>
|
|
</VCardTitle>
|
|
|
|
<VCardText class="pt-2 pb-0 px-0">
|
|
|
|
In your virtual meeting with your medical professional, you will receive details
|
|
about your treatment plan. This will include instructions on medication
|
|
administration and helpful tips for achieving the best results.
|
|
</VCardText>
|
|
|
|
<VCardTitle class="text-center m-3">
|
|
<VBtn color="error" class="text-center"
|
|
@click="isScheduleDialogVisible = false">
|
|
Schedule
|
|
Now</VBtn>
|
|
</VCardTitle>
|
|
|
|
</VCardItem>
|
|
|
|
|
|
</VCard>
|
|
</VDialog>
|
|
<VDialog v-model="isDialogVisible" refs="myDialog" persistent width="500">
|
|
<!-- Dialog Content -->
|
|
<VCard>
|
|
<VCardText v-if="currentDialoagkey == 'patient_concent'"
|
|
title="Male Harmone therapy Patient consent">
|
|
|
|
<!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<VCardText class="pt-0"><b>Med Excel Clinic, P.A. ("Hgh HRT")</b>
|
|
</VCardText>
|
|
<VCardText><b>Nature of Hormone replacement and supplements therapy</b>
|
|
</VCardText>
|
|
<VDivider class="m-0"></VDivider>
|
|
<VCardText class="scrollable-text px-0 py-3">
|
|
I hereby give my consent to be treated using hormone replacement
|
|
therapy.
|
|
(antioxidants), and other medications prescribed to aid in improving my
|
|
overall health. I further consent to receive hormone replacement
|
|
therapy.
|
|
|
|
|
|
</VCardText>
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="patient_concent_Signature"
|
|
label="Full Name Signature" :rules="[requiredValidator]" />
|
|
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="date" type="date" disabled label="date"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
<VCardText class="text-end pt-0 mt-5">
|
|
<VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
|
|
Continue
|
|
</VBtn>
|
|
</VCardText>
|
|
|
|
|
|
</VCardText>
|
|
<VCardText v-if="currentDialoagkey == 'appointment_cancel'" title="">
|
|
<v-card-title class="p-0">
|
|
<span class="headline"><b>Medical Provider consultation
|
|
cancellation</b></span>
|
|
</v-card-title>
|
|
<VDivider></VDivider>
|
|
<!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<VCardText class="scrollable-text px-0 py-3">
|
|
I acknowledge that Hgh Medical charges a $59 for missed
|
|
appiontments.
|
|
</VCardText>
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="appointment_cancel_Signature"
|
|
label="Full Name Signature" :rules="[requiredValidator]" />
|
|
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="date" type="date" disabled label="date"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
<VCardText class="text-end pt-0 mt-5">
|
|
<VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
|
|
Continue
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCardText>
|
|
<VCardText v-if="currentDialoagkey == 'medicare_disclaimer'">
|
|
<v-card-title class="p-0">
|
|
<span class="headline"><b>DISCLAIMER OF MEDICARE / <br> INSURANCE
|
|
BENEFIT</b></span>
|
|
</v-card-title>
|
|
<VDivider></VDivider>
|
|
<!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<VCardText class="scrollable-text px-0 py-3">
|
|
The patient acknowledge Hgh HRT or any of its
|
|
representatives
|
|
have made no representation or warranty that the treatment or any
|
|
portion
|
|
thereof qualifies or will qualify for reimbursement or assignment under
|
|
any
|
|
other government or private insurance program.
|
|
</VCardText>
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="medicare_disclaimer_Signature"
|
|
label="Full Name Signature" :rules="[requiredValidator]" />
|
|
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="date" type="date" disabled label="date"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
|
|
</VCardText>
|
|
<VCardText class="text-end pt-0 mt-5">
|
|
<VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
|
|
Continue
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCardText>
|
|
<VCardText v-if="currentDialoagkey == 'telehealth_concent'" title="">
|
|
<v-card-title class="p-0">
|
|
<span class="headline"><b>Hgh Medical, P.A. Telehealth <br> Informed
|
|
Consent</b></span>
|
|
</v-card-title>
|
|
<VDivider></VDivider>
|
|
<!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<VCardText class="scrollable-text px-0 py-3">
|
|
Telehealth involves the use of secure electronic communications,
|
|
information technology, or other means to enable a healthcare provider
|
|
and
|
|
a patient at different locations to communicate and share individual
|
|
patient
|
|
health information for the purpose of rendering clinical care. This
|
|
"Telehealth Informed Consent" informs the patient ("patient," "you")
|
|
</VCardText>
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="telehealth_concent_Signature"
|
|
label="Full Name Signature" :rules="[requiredValidator]" />
|
|
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="date" type="date" disabled label="date"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
|
|
</VCardText>
|
|
<VCardText class="text-end pt-0 mt-5">
|
|
<VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
|
|
Continue
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCardText>
|
|
<VCardText v-if="currentDialoagkey == 'secondary_contact'" title="">
|
|
<!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
|
|
<v-card-title class="p-0">
|
|
<span class="headline"><b>Secondary Disclosure</b></span>
|
|
</v-card-title>
|
|
<VDivider></VDivider>
|
|
<VCardText class="scrollable-text pt-0 px-0 py-0">
|
|
Hgh HRT , PC is not permitted by law to provide information
|
|
</VCardText>
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="12" md="6">
|
|
<VTextField v-model="auth_information"
|
|
label="Authorize Release of Medical Information to (enter name) "
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="dob_auth_person" type="date"
|
|
:max="getCurrentDate()" label="DOB of authorized person above "
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField v-model="relationship_auth_person"
|
|
label="Relationship of authorize person"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
|
|
<VCardText class="p-0">
|
|
<VRow>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="secondary_contact_Signature"
|
|
label="Full Name Signature" :rules="[requiredValidator]" />
|
|
|
|
</VCol>
|
|
<VCol cols="12" lg="6" md="6">
|
|
<VTextField v-model="date" type="date" disabled label="date"
|
|
:rules="[requiredValidator]" />
|
|
</VCol>
|
|
</VRow>
|
|
|
|
</VCardText>
|
|
<VCardText class="text-end pt-0 mt-5">
|
|
<VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
|
|
Continue
|
|
</VBtn>
|
|
</VCardText>
|
|
|
|
|
|
</VCardText>
|
|
</VCard>
|
|
|
|
</VDialog>
|
|
</v-stepper>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
|
|
<VCol cols="12" lg="3" md="6" class="d-none d-sm-block" v-if="step == 1">
|
|
<VCard>
|
|
<VCardItem class="px-2 py-2">
|
|
<VCardTitle>Order Summary</VCardTitle>
|
|
</VCardItem>
|
|
<VImg :src="OrderSummary" cover />
|
|
<VCardText>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="accordion" id="accordionExample">
|
|
<ul class="list-unstyled">
|
|
<li class="pb-2">
|
|
<h>
|
|
<span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
|
|
class="ti ti-check ti-xs"></i></span>
|
|
eClinic Consultation
|
|
</h>
|
|
</li>
|
|
<li class="pb-2">
|
|
<h>
|
|
<span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
|
|
class="ti ti-check ti-xs"></i></span>
|
|
Hormone Test kit
|
|
</h>
|
|
</li>
|
|
<li class="pb-2">
|
|
<h>
|
|
<span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
|
|
class="ti ti-check ti-xs"></i></span>
|
|
Treatment Plan
|
|
</h>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VDivider></VDivider>
|
|
<VRow>
|
|
<VCol cols="6">
|
|
<b>Shipping</b>
|
|
</VCol>
|
|
<VCol cols="6">
|
|
<b class="text-right">Free</b>
|
|
</VCol>
|
|
</VRow>
|
|
<VRow>
|
|
<VCol cols="6">
|
|
<b>Total</b>
|
|
</VCol>
|
|
<VCol cols="6">
|
|
<b>$99</b>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</section>
|
|
</template>
|
|
<style>
|
|
@media (max-width: 600px) {
|
|
.v-stepper-header {
|
|
display: none;
|
|
}
|
|
|
|
.v-stepper-item:not(.v-stepper-item--selected) {
|
|
display: none;
|
|
}
|
|
|
|
.v-stepper-item:active(.v-stepper-item--selected) {
|
|
align-items: center;
|
|
}
|
|
|
|
.v-stepper--alt-labels .v-stepper-header {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slot-date {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.timezoneDropDown .v-input__control input {
|
|
column-gap: 0px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.slot-date {
|
|
padding-top: 10px;
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
.backButton {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fade-slide-enter-active,
|
|
.fade-slide-leave-active {
|
|
transition: opacity 0.5s, transform 0.5s;
|
|
}
|
|
|
|
.fade-slide-enter,
|
|
.fade-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.fade-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* Animation for the active button */
|
|
.fade-slide-enter-active.active,
|
|
.fade-slide-leave-active.active {
|
|
transition: opacity 0.5s, transform 0.5s;
|
|
}
|
|
|
|
.fade-slide-enter.active,
|
|
.fade-slide-leave-to.active {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.scrollable-text {
|
|
min-height: 50px;
|
|
/* Set the maximum height you desire */
|
|
overflow: auto;
|
|
/* Enable vertical scrolling */
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.text-container {
|
|
margin-left: 10px;
|
|
/* Adjust the margin as needed */
|
|
flex: 1;
|
|
/* Allow the text container to grow and take remaining space */
|
|
}
|
|
</style>
|