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

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

Browse source 
Feature/ssr 135
This commit is contained in:
Kulbhushan Kaushik 2022-12-30 10:50:48 -05:00 committed by GitHub
commit 3c52c6ed05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 183 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common-components/site-sub-header/site-sub-header.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
<h5 class="text-center fw-normal mb-0" :class="headerColor">
<h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
<span>
{{ content }}
</span>
@ -13,7 +13,7 @@
</h5>
</div>
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
<p class="text-center small fw-normal mb-0">
<p class="text-center small fw-normal mb-0 subheader-secondary">
<span>
{{ subText }}
</span>

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

@ -1,35 +1,89 @@
<template>
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="Header"/>
<siteSubHeader cmsWidgetName="SubHeader"/>
<div class="row mt-2">
<textboxQuestion
type="date"
cmsWidgetName="dmgDate"
v-model="test"
inputId="dmgDate"
isRequired
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
/>
</div>
<div class="row mt-2 mb-4">
<div class="col">
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-2 mb-4">
<textboxQuestion
id="damageCauseField"
id="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
v-model="policyNumber"
validationRules="policy-number-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="policyZipField"
cmsWidgetName="PolicyZipQuestion"
v-model="policyZip"
validationRules="policy-zip-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
type="date"
cmsWidgetName="DateOfLossQuestion"
v-model="test"
inputId="dateOfLossField"
isRequired
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
validationRules="loss-date-required"
/>
</div>
<div class="row mt-2 mb-4">
<dropdownQuestion
cmsWidgetName="DamageCauseQuestion"
v-model="damageCause"
ref="damageCause"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
validationRules="loss-cause-required"
placeholderText="Select an option"
includeSelectIcon
disableAutoFill
validationRules="damage-cause-required" />
/>
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="damageCity"
validationRules="loss-city-required" />
</div>
<div class="row mt-2 mb-4">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="state"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
placeholderText="Select an option"
/>
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
v-model="phoneNumber"
validationRules="phone-number-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="emailField"
cmsWidgetName="EmailAddressQuestion"
v-model="email"
validationRules="email-address-required" />
</div>
<div class="row mt-2 mb-4">
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
<buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
</div>
</div>
</Form>
</template>
<script>
@ -42,13 +96,25 @@
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';
//define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
export default {
name: "welcome-page",
mixins: [BaseFormMixin],
emits: ['update:modelValue'], // The component emits an event
props: {
modelValue: {
@ -79,12 +145,102 @@
vm.setCmsContent(resultMap.cmsContent);
});
},
computed:{
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
const answerArray = [];
for (let answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
answerArray.push(answer.Name);
}
}
return answerArray;
},
stateOptions: {
get: function () {
return {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
},
},
},
components: {
siteHeader,
siteSubHeader,
buttonQuestionModal,
textboxQuestion,
dropdownQuestion,
siteFooter
},
}
</script>
<style lang="scss">
.subheader-primary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px !important;
margin-top: 16px;
}
.subheader-secondary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px;
color: #000000 !important;
margin-bottom: 16px !important;
}
</style>