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

Merge pull request #94 from Safelite/feature/SSR-135

Browse source 
Feature/ssr 135
This commit is contained in:
Kulbhushan Kaushik 2023-01-06 12:32:27 -05:00 committed by GitHub
commit 3f2cbc1673
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 223 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/common-components/button-question/button-question.vue
View file

@ -271,4 +271,21 @@ export default {
} }
} }
} }
.welcome {
.question-text {
span {
text-align: left;
margin: 0 0 0.25rem 0;
}
}
.question-text {
margin: 0;
}
fieldset {
.ui-radio {
margin: 0;
}
}
}
</style> </style>

2
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -65,6 +65,7 @@ export default {
handleBlur, handleBlur,
handleChange, handleChange,
meta, meta,
errors
} = useField(props.inputId, props.validationRules, fieldOptions); } = useField(props.inputId, props.validationRules, fieldOptions);
return { return {
@ -72,6 +73,7 @@ export default {
handleBlur, handleBlur,
handleChange, handleChange,
meta, meta,
errors
}; };
}, },
computed: { computed: {

10
src/common-components/site-footer/site-footer.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div> <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
</div>
<div class="row">
<img id="siteFooterImage" :src="footerImageURL" />
</div>
<footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox"> <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
<div class="row d-flex flex-row-reverse align-items-center vw-100"> <div class="row d-flex flex-row-reverse align-items-center vw-100">
<div class="col button-col d-flex" id="stacked"> <div class="col button-col d-flex" id="stacked">
@ -73,6 +77,10 @@ export default {
? this.customButtontext ? this.customButtontext
: this.getCmsContent(this.cmsWidgetName, "ForwardButtonText"); : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
}, },
footerImageURL()
{
return this.getCmsContent(this.cmsWidgetName, "FooterImageURL");
}
}, },
methods: { methods: {
onResize() { onResize() {

14
src/constants/error-messages.js
View file

@ -24,14 +24,16 @@ const errorMessages = {
VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q", VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
OPTION_REQUIRED: "Please select an option", OPTION_REQUIRED: "Please select an option",
VEHICLE_REQUIRED: "Please select a vehicle", VEHICLE_REQUIRED: "Please select a vehicle",
POLICY_NUMBER_REQUIRED: "Please enter policy number", POLICY_NUMBER_REQUIRED: "Please enter your policy number",
PHONE_NUMBER_REQUIRED: "Please enter phone number", PHONE_NUMBER_REQUIRED: "Please enter phone number",
POLICY_ZIP_REQUIRED: "Please enter policy zip", PHONE_NUMBER_FORMAT: "Please enter your phone number. The format must be ###-###-####",
POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP", POLICY_ZIP_REQUIRED: "Please enter your policy zip",
POLICY_ZIP_FORMAT: "Please enter a valid ZIP",
LOSS_CAUSE_REQUIRED: "Please enter loss cause", LOSS_CAUSE_REQUIRED: "Please enter loss cause",
LOSS_CITY_REQUIRED: "Please enter loss city", LOSS_CITY_REQUIRED: "Please enter a city",
LOSS_STATE_REQUIRED: "Please enter loss state", LOSS_STATE_REQUIRED: "Please select an option",
LOSS_DATE_REQUIRED: "Please enter a loss date" LOSS_DATE_REQUIRED: "Please enter a loss date",
DAMAGE_OPTION_REQUIRED: "Please select an option"
}; };
export { errorMessages }; export { errorMessages };

261
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,103 +1,156 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles overflow-auto welcome">
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <div class="col">
id="policyNumberField" <textboxQuestion
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion" cmsWidgetName="PolicyNumberQuestion"
v-model="policyNumber" v-model="welcomePageModel.policyNumber"
isRequired
disableAutoFill
validationRules="policy-number-required" /> validationRules="policy-number-required" />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <div class="col">
id="policyZipField" <textboxQuestion
inputId="policyZipField"
cmsWidgetName="PolicyZipQuestion" cmsWidgetName="PolicyZipQuestion"
v-model="policyZip" ref="policyZip"
validationRules="policy-zip-required" /> v-model="welcomePageModel.policyZipCode"
isRequired
disableAutoFill
mask="#####"
validationRules="policy-zip-required|policy-zip-format" />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <div class="col">
type="date" <textboxQuestion
cmsWidgetName="DateOfLossQuestion" type="date"
v-model="test" cmsWidgetName="DateOfLossQuestion"
inputId="dateOfLossField" v-model="welcomePageModel.dateOfLoss"
isRequired inputId="dateOfLossField"
disableAutoFill isRequired
:max="new Date().toJSON().slice(0,10)" disableAutoFill
:min="'1972-12-01'" :max="new Date().toJSON().slice(0,10)"
validationRules="loss-date-required" :min="'1972-12-01'"
validationRules="loss-date-required"
/> />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row">
<dropdownQuestion <div class="col">
cmsWidgetName="DamageCauseQuestion" <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
v-model="damageCause" </div>
ref="damageCause" </div>
inputId="damageCauseQuestionField" <div class="row mt-4">
:options="DamageCauseOptions" <div class="col">
validationRules="loss-cause-required" <dropdownQuestion
placeholderText="Select an option" cmsWidgetName="DamageCauseQuestion"
v-model="welcomePageModel.damageCause"
ref="damageCause"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
validationRules="loss-cause-required"
/> />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <div class="col">
id="damageCityField" <textboxQuestion
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion" cmsWidgetName="DamageCityQuestion"
v-model="damageCity" v-model="welcomePageModel.damageCity"
isRequired
disableAutoFill
validationRules="loss-city-required" /> validationRules="loss-city-required" />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<dropdownQuestion <div class="col">
cmsWidgetName="DamageStateQuestion" <dropdownQuestion
v-model="state" cmsWidgetName="DamageStateQuestion"
ref="state" v-model="welcomePageModel.damageState"
inputId="8fdf9dc2e13e430eb57529499dceb3eb" ref="state"
:options="stateOptions" inputId="8fdf9dc2e13e430eb57529499dceb3eb"
validationRules="loss-state-required" :options="stateOptions"
placeholderText="Select an option" validationRules="loss-state-required"
isRequired
disableAutoFill
/> />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <buttonQuestion
id="phoneNumberField" cmsWidgetName="GlassOnlyQuestion"
v-model="welcomePageModel.isDamageGlassOnly"
inputId = "isDamageGlassOnly"
:answers="DamageGlassOnlyOptions"
:questionText="DamageGlassOnlyQuestion"
buttonTypeString="listButtonHorizontal"
validationRules="damage-option-required"
isRequired
disableAutoFill/>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion" cmsWidgetName="PhoneNumberQuestion"
v-model="phoneNumber" v-model="welcomePageModel.phoneNumber"
validationRules="phone-number-required" /> validationRules="phone-number-required"
isRequired
mask="###-###-####"
disableAutoFill />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<textboxQuestion <div class="col">
id="emailField" <textboxQuestion
inputId="emailField"
cmsWidgetName="EmailAddressQuestion" cmsWidgetName="EmailAddressQuestion"
v-model="email" v-model="welcomePageModel.email"
validationRules="email-address-required" /> validationRules="email-address-required|email-address-format"
isRequired
disableAutoFill />
</div>
</div> </div>
<div class="row mt-2 mb-4"> <div class="row mt-4">
<site-footer <div class="col">
<site-footer
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
</div>
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
// Components
import siteHeader from '@/common-components/site-header/site-header'; import siteHeader from '@/common-components/site-header/site-header';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header'; import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
import siteFooter from "@/common-components/site-footer/site-footer";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import buttonQuestion from "@/common-components/button-question/button-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import textBlock from "@/common-components/text-block/text-block";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import { defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import siteFooter from "@/common-components/site-footer/site-footer";
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
//define validation rules //define validation rules
@ -110,21 +163,47 @@
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED)); defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED)); defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
defineRule("policy-zip-format",
regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT)
);
defineRule("email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
defineRule("phone-number-format",
regex(
/\A[0-9]{3}-[0-9]{3}-[0-9]{4}\z/,
errorMessages.PHONE_NUMBER_FORMAT
)
);
export default { export default {
name: "welcome-page", name: "welcome-page",
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
emits: ['update:modelValue'], // The component emits an event data: {
props: { modelValue: {
modelValue: { type: Object,
type: Object, default: () => ({
default: () => ({ welcomePageModel: {
lossState: "", policyNumber: "",
}), policyZipCode: "",
}, dateOfLoss: "",
validationRules: String, damageCause: "",
}, damageState: "",
damageCity: "",
isDamageGlassOnly: "",
phoneNumber: "",
email: ""
},
}),
},
},
async beforeRouteEnter(to, from, next) async beforeRouteEnter(to, from, next)
{ {
// Call APIs // Call APIs
@ -145,6 +224,16 @@
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
methods:
{
async forwardButtonAction() {
return this.navigateForward();
},
navigateForward() {
},
},
computed:{ computed:{
DamageCauseOptions() { DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers"); const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
@ -156,6 +245,14 @@
} }
return answerArray; return answerArray;
}, },
DamageGlassOnlyOptions()
{
return this.getCmsContent("GlassOnlyQuestion", "Answers");
},
DamageGlassOnlyQuestion()
{
return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
},
stateOptions: { stateOptions: {
get: function () { get: function () {
return { return {
@ -213,14 +310,24 @@
}; };
}, },
}, },
welcomePageModel: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
}, },
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
buttonQuestionModal, buttonQuestion,
textboxQuestion, textboxQuestion,
dropdownQuestion, dropdownQuestion,
siteFooter siteFooter,
textBlock,
Form,
}, },
} }
</script> </script>
@ -242,5 +349,9 @@
color: #000000 !important; color: #000000 !important;
margin-bottom: 16px !important; margin-bottom: 16px !important;
} }
.my-2
{
margin-bottom: 0rem !important;
}
</style> </style>