jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial blockout for modal

Browse source
This commit is contained in:
Chloe Herd 2023-08-10 16:49:26 -04:00
parent bc3b713e11
commit faee81ffc2
4 changed files with 101 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/phone-number-question/phone-number-question.vue
View file

@ -8,7 +8,7 @@
:mask="mask"
:isRequired="isRequired"
:validationRules="validationRulesForTextBoxQuestion"
cmsWidgetName="PhoneNumberQuestionWidget" />
:cmsWidgetName="cmsWidgetName" />
</div>
</template>

2
src/layouts/customer-details/customer-details.vue
View file

@ -25,7 +25,7 @@
validationRules="email-address-required|email-address-format" />
<phoneNumberQuestion
class="mb-4"
cmsWidgetName="phoneNumberQuestionWidget"
cmsWidgetName="PhoneNumberQuestionWidget"
v-model="phoneNumber"
isRequired
validationRules="phone-number-required" />

90
src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue Normal file
View file

@ -0,0 +1,90 @@
<template>
<transition name="fade" mode="out-in">
<div class="customer-details-question">
<modal
ref="CustomerDetailsModal"
headerText="Contact details"
footerButtonText="Save contact details"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
@isModalOpened="setModalStatus"
@footer-button-event="setContactDetails">
<template v-if="isModalOpened">
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerFirstNameWidget"
v-model="firstName"
ref="firstName"
customInputId="firstName"
validation-rules="" />
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerLastNameWidget"
v-model="lastName"
ref="lastName"
customInputId="lastName"
validation-rules="" />
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerEmailWidget"
v-model="emailAddress"
ref="emailAddress"
customInputId="emailAddress"
validation-rules="" />
<phoneNumberQuestion
class="mb-4"
cmsWidgetName="CustomerPhoneWidget"
v-model="phoneNumber"
ref="phoneNumber"
isRequired
validation-rules="" />
</template>
</modal>
</div>
</transition>
</template>
<script>
import modal from "@/digital-components/modal/modal";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
export default {
name: "customer-details-modal-question",
data() {
return {
isModalOpened: false,
firstName: "",
lastName: "",
emailAddress: "",
phoneNumber: "",
isSmsOptIn: false,
};
},
props: {},
computed: {
modal() {
return this.$refs.CustomerDetailsModal;
},
},
methods: {
openModal() {
this.modal.openModal();
},
closeModal() {
this.modal.closeModal();
},
onModalOpened() {},
onModalClosed() {},
setModalStatus(isOpened) {
this.isModalOpened = isOpened;
},
setContactDetails() {},
},
components: {
modal,
textboxQuestion,
phoneNumberQuestion,
},
};
</script>

11
src/layouts/review/review.vue
View file

@ -89,6 +89,8 @@
<hr class="my-0" />
</div>
<customerDetailsModalQuestion ref="customerDetailsModalQuestion" />
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
@back-clicked="backButtonAction"
@ -111,6 +113,8 @@ import serviceLocationReview from "@/layouts/review/review-sections/service-loca
import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
import customerDetailsModalQuestion from "@/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -183,7 +187,9 @@ export default {
this.$route
);
},
editCustomerDetails() {},
editCustomerDetails() {
this.$refs.customerDetailsModalQuestion.openModal();
},
},
computed: {
subHeaderTitle() {
@ -212,7 +218,7 @@ export default {
},
customerInfo() {
return this.$store.getters.order.customer;
}
},
},
components: {
funnelHeader,
@ -226,6 +232,7 @@ export default {
serviceLocationReview,
scheduleReview,
customerReview,
customerDetailsModalQuestion,
},
};
</script>