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

Update various components for compatibility

Browse source
This commit is contained in:
Chloe Herd 2026-07-24 13:29:19 -04:00
parent 0779026d0d
commit 73671f908c
7 changed files with 96 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/digital-components/date-picker/date-picker.vue
View file

@ -114,11 +114,9 @@
</label>
</div>
</div>
<loader
class="date-picker-loader"
:class="[loadingStatus !== 'none' ? 'show-loader' : '']"
loaderColor="blue"
loaderPosition="center" />
<div v-if="loadingStatus !== 'none'" class="date-picker-loader">
<loader loaderColor="blue" loaderPosition="center" />
</div>
<div class="row form-test-error" id="date-of-month-error">
<ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
</div>
@ -742,15 +740,6 @@ export default {
</script>
<style lang="scss" scoped>
.date-picker-loader {
opacity: 0;
max-height: 0;
&.show-loader {
opacity: 1;
max-height: none;
}
}
.date-picker {
position: relative;
flex-grow: 0;
@ -769,7 +758,13 @@ export default {
font-family: UrbanistSemiBold;
}
}
.loader {
.date-picker-loader {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
:deep(.loader) {
height: 2rem;
width: calc(100% - 1.5rem);
@ -778,6 +773,7 @@ export default {
height: 1.5rem;
}
}
}
.month {
margin: 0 auto 1rem auto;
position: relative;

1
src/digital-components/modal/modal.vue
View file

@ -39,6 +39,7 @@
:id="modalId + '-modalbtn'"
ref="modalButtonMain"
loaderColor="white"
loaderPosition="center"
:isDisabled="footerButtonDisabled"
:buttonText="footerButtonText"
@click-event="validateAndEmit"

7
src/digital-components/textbox-question/textbox-question.vue
View file

@ -65,10 +65,9 @@
data-test="image-upload"
@change="imageChanged" />
</label>
<loader
v-show="isImageProcessing"
loaderColor="blue"
class="loading-icon"></loader>
<span v-if="isImageProcessing" class="loading-icon">
<loader loaderColor="blue" />
</span>
</template>
</template>
</div>

1
src/experiment-components/donation-block.vue
View file

@ -50,6 +50,7 @@
ref="buttonMain"
:buttonText="DonationAddButtonCopy"
loaderColor="blue"
loaderPosition="center"
class="w-100 mb-2 custom-secondary"
@click-event="handleDonationAction" />
</div>

60
src/fmg-components/save-progress-popup-question/save-progress-popup-question.spec.js
View file

@ -233,6 +233,66 @@ describe("save-progress-popup-question ", () => {
});
});
describe("footer button suppression", () => {
test("should suppress the modal footer button on the phone tab", async () => {
const { wrapper } = setupMocks({
props: {
modalWidgetName: "SaveProgressPopupWidget",
},
});
wrapper.vm.selectContactMethod("PhoneAnswer");
await wrapper.vm.$nextTick();
expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
});
test("should show the modal footer button on the email tab before save", () => {
const { wrapper } = setupMocks({
props: {
modalWidgetName: "SaveProgressPopupWidget",
},
});
expect(wrapper.vm.isFooterButtonSuppressed).toBe(false);
});
test("should suppress the modal footer button after a successful email save", async () => {
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
const { wrapper } = setupMocks({
props: {
modalWidgetName: "SaveProgressPopupWidget",
pageName: "quote",
},
});
wrapper.vm.dispatchStoreAction = dispatchStoreAction;
wrapper.vm.userInput = "test@example.com";
await wrapper.vm.saveProgress();
expect(wrapper.vm.isFooterButtonSuppressed).toBe(true);
});
test("should reset the modal footer button loader before suppressing it after save", async () => {
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);
const { wrapper } = setupMocks({
props: {
modalWidgetName: "SaveProgressPopupWidget",
pageName: "quote",
},
});
wrapper.vm.dispatchStoreAction = dispatchStoreAction;
wrapper.vm.userInput = "test@example.com";
wrapper.vm.modal.resetButtonStyle = jest.fn();
await wrapper.vm.saveProgress();
expect(wrapper.vm.modal.resetButtonStyle).toHaveBeenCalled();
});
});
describe("saveProgress", () => {
test("should save phone number and sms consent when phone tab is selected", async () => {
const dispatchStoreAction = jest.fn().mockResolvedValue(undefined);

19
src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
View file

@ -7,7 +7,7 @@
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalButtonText"
:isFooterButtonPrimary="true"
:isFooterButtonSuppressed="isPhoneTabSelected && !isProgressSaved"
:isFooterButtonSuppressed="isFooterButtonSuppressed"
@footer-button-event="saveProgress">
<p class="modal-body-inner">{{ modalBodyText }}</p>
<fieldset class="save-progress-popup-question__tabs">
@ -71,9 +71,14 @@
ref="phoneSendButton"
:isPrimary="true"
class="w-100 modal-footer-button"
loaderColor="white"
loaderPosition="center"
:buttonText="modalButtonText"
@click-event="validatePhoneAndSave" />
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
<p
v-if="!isProgressSaved"
class="modal-disclaimer"
v-html="modalDisclaimerText"></p>
</template>
<alert
class="my-4"
@ -193,6 +198,9 @@ export default {
isPhoneTabSelected() {
return this.contactMethod === saveProgressPopupContactMethods.PHONE;
},
isFooterButtonSuppressed() {
return this.isProgressSaved || this.isPhoneTabSelected;
},
phoneQuestionWidgetName() {
return PHONE_QUESTION_WIDGET;
},
@ -272,6 +280,9 @@ export default {
// send store call to send to new API (that triggers an email/SMS send)
await saveQuote({ pageNameToLog: this.pageName });
this.modal?.resetButtonStyle();
this.resetPhoneSendButtonStyle();
// hide save progress button; show success message alert
this.savedContactMethod = this.contactMethod;
this.isProgressSaved = true;
@ -528,10 +539,6 @@ export default {
}
&.progress-saved {
.modal-footer-button,
.modal-disclaimer {
display: none;
}
.skip-button {
margin-bottom: 0;
}

4
src/layouts/service-location/shop-question/shop-question-popup.vue
View file

@ -32,10 +32,10 @@
:isRequired="false"
:validationRules="''" />
</form>
<div v-show="isLoading" class="loader-wrapper">
<div v-if="isLoading" class="loader-wrapper">
<loader loaderColor="blue" loaderPosition="center" />
</div>
<div v-show="!isLoading">
<div v-if="!isLoading">
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"