rejuvallife/resources/js/pages/additional-information.vue
2024-10-27 02:14:52 +05:00

749 lines
30 KiB
Vue

<script setup>
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
import cardiologyCategory from '@/views/pages/questionere/form-category';
import formview from '@/views/pages/questionere/form.vue';
import CustomNav from '../layouts/components/navbar-custom.vue';
import axios from '@axios';
import {
requiredValidator
} from '@validators';
import { onBeforeMount, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import Cart from '../layouts/components/cart.vue';
const store = useStore()
const router = useRouter()
const route = useRoute()
// const categoryName = 'doctor_intake_request';
// const currentForm = cardiologyCategory[categoryName.replace(/[\s_]/g, '')]
const planName = ref(null)
const planAmount = ref(null)
const list_one_title = ref(null)
const list_sub_title = ref(null)
const list_two_title = ref(null)
const prescription_required = ref(null)
const shipping_price = ref(null)
const categoryName = ref(null);
const currentForm = ref(null);
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px
const currentDialoagkey = ref('')
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const questionForm = ref()
const answers = ref([]);
const storeAnswers = ref();
const isDialogVisible = ref(false)
const patient_id = localStorage.getItem('patient_id')
const access_token = store.access_token;
const seetingPlanLogo = ref(null);
const redirectTo = '/thankyou'
const redirectBack = '/review-appointment'
const patientExist = localStorage.getItem('exist')
const products = JSON.parse(localStorage.getItem('cart_products'));
const productCategoryName = ref(null)
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 Applicable"],
},
{
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",
},
]);
onBeforeMount(async () => {
store.dispatch('updateIsLoading', true)
store.dispatch('updateCurrentPage', 'additional-information')
localStorage.setItem('currentPage', 'additional-information')
await store.dispatch('getPatientInfo')
await store.dispatch('getPlanInfo')
// await store.dispatch('getPatientAppointment')
await store.dispatch('getAdditionalInformation')
planName.value = store.getters.getPatientPlan.plan_name
planAmount.value = store.getters.getPatientPlan.plan_amount
list_one_title.value = store.getters.getPatientPlan.list_one_title
list_sub_title.value = store.getters.getPatientPlan.list_sub_title
list_two_title.value = store.getters.getPatientPlan.list_two_title
prescription_required.value = store.getters.getPatientPlan.prescription_required
shipping_price.value = store.getters.getPatientPlan.shipping_price
storeAnswers.value = store.getters.getAdditionalInformation.answers
if (storeAnswers.value) {
let tempAns = storeAnswers.value
for (let answer of tempAns) {
answers.value[answer.question_key] = answer.answer
}
}
let productsData = products.filter(item => item.title !== "Doctor Visit")
productsData.forEach(product => {
if(product.category_name)
productCategoryName.value = product.category_name.toLowerCase().replace(/\s+|-/g, '_')
})
console.log('---->', productCategoryName.value)
if (productCategoryName.value) {
categoryName.value = productCategoryName.value
} else {
categoryName.value = 'weight_loss';
}
currentForm.value = cardiologyCategory[categoryName.value.replace(/[\s_]/g, '')]
store.dispatch('updateIsLoading', false)
})
const validateQuestion = async () => {
const { valid: isValid } = await questionForm.value?.validate();
console.log('isValid ', isValid);
if (isValid)
saveAnswers()
};
onMounted(async () => {
window.addEventListener('resize', checkIfMobile);
let setting = await axios.post('/api/settings', {})
// console.log(setting.data)
seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
})
// Detach event listener on component unmount
onUnmounted(() => {
window.removeEventListener('resize', checkIfMobile);
});
const checkIfMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
const saveAnswers = async () => {
isLoadingVisible.value = true;
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));
await store.dispatch('saveAdditionalInformation', {
answers: jsonData.questions,
})
router.replace(route.query.to && route.query.to != '/additional-information' ? String(route.query.to) : '/thankyou')
};
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 `${month}-${day}-${year}`;
};
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 handleContinueClick = (currentDialoagkey) => {
isDialogVisible.value = false; // Hide the dialog
answers.value[currentDialoagkey] = true; // Update the answers object
};
const backFun = () => {
store.dispatch('updateIsLoading', true)
router.replace(route.query.to && route.query.to != '/additional-information' ? String(route.query.to) : '/review-appointment')
}
</script>
<template>
<StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup>
<!-- <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> -->
<VRow><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
<VRow
style="min-height: 100dvh; margin: 0px;"
:style="isMobile ? { marginTop: '90px' } : { marginTop: '60px' }"
>
<!-- <VCol cols="12" md="5" class="bg-custom col-order-1"
:class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
<Cart></Cart>
</VCol> -->
<VCol cols="12" md="12" class="bg-custom-color col-order-2"
:class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
<!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
<VCard class="auth-card pa-2 rounded-5" style="" :class="isMobile ? '' : 'card-wid'">
<VRow class=" mx-0 gy-3 px-lg-5">
<VCol cols="12" lg="12" md="12">
<router-link to="/" class="text-center mb-2 mt-2"
style="width: 100%;position: relative;display: block;padding-top: 20px;">
<span class="text-center">
<VImg :src="seetingPlanLogo" width="250" height="50" class="logo-img" />
<!-- <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>
</router-link>
</VCol>
<VCol cols="12" md="12">
<!-- 👉 Title and subtitle -->
<div class="text-left">
<h5 class="text-h5 pricing-title mb-0">
Doctor Intake Request
</h5>
<p>Please complete the medical intake form before your appointment to ensure a smooth consultation with the doctor.</p>
</div>
</VCol>
<VCol cols="12" md="12">
<formview v-if="currentForm" :questionCategory="categoryName" :steps="currentForm.steps"
:schema="currentForm.schema" :redirectTo="redirectTo" :redirectBack="redirectBack"
:finishLabel="'All done'" :newForm="true" :returningUser="patientExist">
</formview>
</VCol>
</VRow>
<VRow>
<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>
</VRow>
</VCard>
</VCol>
</VRow>
</template>
<style scoped>
@media only screen and (max-width: 768px) {
.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;
}
}
.total-font {
font-size: 20px;
margin-bottom: 5px;
}
.bg-custom {
background: #fffeee;
}
.bg-custom-color {
background: #fedfde;
}
.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 {
max-width: 600px;
border-radius: 10px !important;
}
.layout-wrapper {
justify-content: center;
}
.error-message {
color: #ff2f2f;
font-size: 15px;
}
</style>
<style lang="scss">
.bg-custom {
background: #fffeee;
}
.bg-custom-color {
background: #fedfde;
}
.total-font {
font-size: 20px;
margin-bottom: 5px;
}
.card-title {
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.v-list-item-title {
white-space: inherit !important;
;
}
.logo-img {
display: block;
position: relative;
margin: 0 auto;
}
.v-list {
min-height: 168px;
}
@media (min-width: 320px) and (max-width: 768px) {
.v-container {
padding: 0px !important;
}
.auth-wrapper {
padding: 0px !important;
}
.input-width {
max-width: 100% !important;
}
}
// .input-width {
// max-width: 50%;
// }
.form-check-input[type=checkbox] {
border-radius: 0.25em;
}
.form-check .form-check-input {
float: left;
margin-right: 0.5em;
}
.form-check-input {
cursor: pointer;
}
.form-check-input {
width: 1.2em;
height: 1.2em;
margin-top: 0.135em;
vertical-align: top;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 2px solid #dbdade;
appearance: none;
}
.form-check .form-check-input:checked,
.form-check .form-check-input[type=checkbox]:indeterminate {
box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
}
.form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='13' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
background-color: #7367f0;
border-color: #7367f0;
}
.form-check-input:checked {
background-color: #7367f0;
border-color: #7367f0;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
}
</style>