CASH-1042 WIP
This commit is contained in:
Bryan Mauger
parent
b4e91b376c
commit
89f8b15d1e
6 changed files with 89 additions and 85 deletions
|
|
@ -49,7 +49,7 @@ export const pageProgressMapper = {
|
||||||
step: 1,
|
step: 1,
|
||||||
},
|
},
|
||||||
quote: {
|
quote: {
|
||||||
percent: 39, //Must be 39
|
percent: 39, //The first Step 2 must be 39 so the animated bar lines up with the dot
|
||||||
step: 2,
|
step: 2,
|
||||||
},
|
},
|
||||||
"insurance-company": {
|
"insurance-company": {
|
||||||
|
|
@ -61,7 +61,7 @@ export const pageProgressMapper = {
|
||||||
step: 2,
|
step: 2,
|
||||||
},
|
},
|
||||||
schedule: {
|
schedule: {
|
||||||
percent: 70.5, //Must be 70.5
|
percent: 70.5, //The first Step 3 must be 70.5 so the animated bar lines up with the dot
|
||||||
step: 3,
|
step: 3,
|
||||||
},
|
},
|
||||||
"mobile-details": {
|
"mobile-details": {
|
||||||
|
|
@ -73,7 +73,7 @@ export const pageProgressMapper = {
|
||||||
step: 3,
|
step: 3,
|
||||||
},
|
},
|
||||||
"payment-method": {
|
"payment-method": {
|
||||||
percent: 92, //Must be 92
|
percent: 92, //The first Step 4 must be 92 so the animated bar lines up with the dot
|
||||||
step: 3,
|
step: 3,
|
||||||
},
|
},
|
||||||
payment: {
|
payment: {
|
||||||
|
|
|
||||||
|
|
@ -317,7 +317,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.custom-secondary {
|
.custom-secondary {
|
||||||
border-radius: .5rem;
|
border-radius: 0.5rem;
|
||||||
color: $blue;
|
color: $blue;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -326,7 +326,9 @@ export default {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px $blue;
|
box-shadow:
|
||||||
|
0 0 0 3px #ffffff,
|
||||||
|
0 0 0 5.5px $blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,12 +19,10 @@
|
||||||
v-if="showThisQuestionChain(questionsDatum, i)"
|
v-if="showThisQuestionChain(questionsDatum, i)"
|
||||||
:answerKey="questionsDatum.answerKey"
|
:answerKey="questionsDatum.answerKey"
|
||||||
:validationRules="validationRules" />
|
:validationRules="validationRules" />
|
||||||
<!-- Save your progress slot -->
|
<!-- Save your progress slot -->
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<navbar
|
<navbar
|
||||||
ref="navbar"
|
ref="navbar"
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
|
|
|
||||||
|
|
@ -5,80 +5,80 @@
|
||||||
<div class="container page-container-grouped-styles">
|
<div class="container page-container-grouped-styles">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<img :src="ScheduleConfirmationImage" />
|
<img :src="ScheduleConfirmationImage" />
|
||||||
<span v-html="ScheduleConfirmationText"></span>
|
<span v-html="ScheduleConfirmationText"></span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="emailtext mb-5" v-html="ConfirmationEmailText"></div>
|
|
||||||
|
|
||||||
<div class="main">
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
<div class="scheduleText">
|
|
||||||
<p>{{ ScheduleDateFormatted }}</p>
|
|
||||||
<p>{{ ScheduleTimeFormatted }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<addToCalendar
|
|
||||||
mobileWidgetName="AddToCalendar_Mobile"
|
|
||||||
inShopWidgetName="AddToCalendar_InShop"
|
|
||||||
dropOffWidgetName="AddToCalendar_DropOff"
|
|
||||||
overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
|
|
||||||
allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
|
|
||||||
sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
|
|
||||||
:serviceLocationFullAddress="ServiceLocationFullAddress"
|
|
||||||
:providerFullAddress="ProviderFullAddress"
|
|
||||||
:appointmentType="AppointmentType"
|
|
||||||
:scheduleDate="ScheduleDate"
|
|
||||||
:scheduleStartTime="ScheduleStartTime"
|
|
||||||
:scheduleEndTime="ScheduleEndTime" />
|
|
||||||
|
|
||||||
<div class="appointment-text" v-html="AppointmentWordingText"></div>
|
|
||||||
|
|
||||||
<textBlock
|
|
||||||
:customText="AppointmentDuration"
|
|
||||||
justifyText="center"
|
|
||||||
typeStyle="medium"
|
|
||||||
class="duration-text-block" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3" v-if="shouldDisplayFosterLove">
|
|
||||||
<donationBlock
|
|
||||||
cmsWidgetName="DonationWidget"
|
|
||||||
v-model="donationAmount"
|
|
||||||
:donationValues="donationValues"
|
|
||||||
:showDonationSuccess="showDonationSuccess"
|
|
||||||
:showDonationError="showDonationError"
|
|
||||||
@DonationAddedEvent="addDonationToOrder"
|
|
||||||
ref="donationBlock" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="mt-5 mb-0" />
|
|
||||||
|
|
||||||
<cart
|
|
||||||
v-if="ShowCart"
|
|
||||||
:damage="damageInfo"
|
|
||||||
:availableVaps="vaps"
|
|
||||||
:allowItemRemoval="false"
|
|
||||||
v-model="lineItemsWithoutDonation"
|
|
||||||
:donationCartItem="donationLineItem"
|
|
||||||
:showAsPaid="isPia"
|
|
||||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
|
||||||
:isInsurance="isInsurance"
|
|
||||||
:insuranceDeductible="currentDeductible"
|
|
||||||
:insuranceCompanyName="insuranceCompanyName"
|
|
||||||
:showInsuranceCoverageAs="showInsuranceCoverageAs"
|
|
||||||
:shouldHideRecalibration="shouldHideRecalibration"
|
|
||||||
:isExpandedOnLoad="false"
|
|
||||||
:isItac="isItac"
|
|
||||||
:isNoComp="isNoComp"
|
|
||||||
:isMSRFeeApplicable="isMSRFeeApplicable" />
|
|
||||||
|
|
||||||
<hr class="mt-4 mb-5" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="emailtext mb-5" v-html="ConfirmationEmailText"></div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<div class="scheduleText">
|
||||||
|
<p>{{ ScheduleDateFormatted }}</p>
|
||||||
|
<p>{{ ScheduleTimeFormatted }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<addToCalendar
|
||||||
|
mobileWidgetName="AddToCalendar_Mobile"
|
||||||
|
inShopWidgetName="AddToCalendar_InShop"
|
||||||
|
dropOffWidgetName="AddToCalendar_DropOff"
|
||||||
|
overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
|
||||||
|
allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
|
||||||
|
sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
|
||||||
|
:serviceLocationFullAddress="ServiceLocationFullAddress"
|
||||||
|
:providerFullAddress="ProviderFullAddress"
|
||||||
|
:appointmentType="AppointmentType"
|
||||||
|
:scheduleDate="ScheduleDate"
|
||||||
|
:scheduleStartTime="ScheduleStartTime"
|
||||||
|
:scheduleEndTime="ScheduleEndTime" />
|
||||||
|
|
||||||
|
<div class="appointment-text" v-html="AppointmentWordingText"></div>
|
||||||
|
|
||||||
|
<textBlock
|
||||||
|
:customText="AppointmentDuration"
|
||||||
|
justifyText="center"
|
||||||
|
typeStyle="medium"
|
||||||
|
class="duration-text-block" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3" v-if="shouldDisplayFosterLove">
|
||||||
|
<donationBlock
|
||||||
|
cmsWidgetName="DonationWidget"
|
||||||
|
v-model="donationAmount"
|
||||||
|
:donationValues="donationValues"
|
||||||
|
:showDonationSuccess="showDonationSuccess"
|
||||||
|
:showDonationError="showDonationError"
|
||||||
|
@DonationAddedEvent="addDonationToOrder"
|
||||||
|
ref="donationBlock" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="mt-5 mb-0" />
|
||||||
|
|
||||||
|
<cart
|
||||||
|
v-if="ShowCart"
|
||||||
|
:damage="damageInfo"
|
||||||
|
:availableVaps="vaps"
|
||||||
|
:allowItemRemoval="false"
|
||||||
|
v-model="lineItemsWithoutDonation"
|
||||||
|
:donationCartItem="donationLineItem"
|
||||||
|
:showAsPaid="isPia"
|
||||||
|
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||||
|
:isInsurance="isInsurance"
|
||||||
|
:insuranceDeductible="currentDeductible"
|
||||||
|
:insuranceCompanyName="insuranceCompanyName"
|
||||||
|
:showInsuranceCoverageAs="showInsuranceCoverageAs"
|
||||||
|
:shouldHideRecalibration="shouldHideRecalibration"
|
||||||
|
:isExpandedOnLoad="false"
|
||||||
|
:isItac="isItac"
|
||||||
|
:isNoComp="isNoComp"
|
||||||
|
:isMSRFeeApplicable="isMSRFeeApplicable" />
|
||||||
|
|
||||||
|
<hr class="mt-4 mb-5" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -610,7 +610,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding: 1.5rem 0 .5rem 0;
|
padding: 1.5rem 0 0.5rem 0;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -215,4 +215,3 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,9 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||||
|
<hr class="my-3" />
|
||||||
|
<reviewBlock :content="AppointmentTimeAndDate" @edit-clicked="editClicked" class="d-flex" />
|
||||||
|
<hr class="my-3" />
|
||||||
<div class="mobile-location-questions">
|
<div class="mobile-location-questions">
|
||||||
<div class="address-questions-container">
|
<div class="address-questions-container">
|
||||||
<mobileAddressQuestions
|
<mobileAddressQuestions
|
||||||
|
|
@ -47,6 +50,7 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||||
import { Form } from "vee-validate";
|
import { Form } from "vee-validate";
|
||||||
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
|
import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
|
||||||
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
|
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
|
||||||
|
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
//Supporting files
|
//Supporting files
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
|
|
@ -146,8 +150,8 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
headerText() {
|
AppointmentTimeAndDate() {
|
||||||
return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
|
return this.getCmsContent("AppointmentTimeAndDate", "BodyText");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -159,6 +163,7 @@ export default {
|
||||||
funnelSubHeader,
|
funnelSubHeader,
|
||||||
Form,
|
Form,
|
||||||
loadingModal,
|
loadingModal,
|
||||||
|
reviewBlock,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue