From f7347ff61fbdb3dcdbce29f90c7b4c7339d9002c Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Thu, 1 Aug 2024 13:05:56 -0400 Subject: [PATCH 1/4] formatting only --- src/styles/common-error-styles.scss | 378 +++++++++++++++------------- 1 file changed, 202 insertions(+), 176 deletions(-) diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 1464a401..ed69b1fd 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,189 +1,215 @@ html { - .has-error { - // START HOVER - &.list-button-horizontal, - &.list-button, - &.list-button.list-group, - &.list-card - &.option-label { - border: 1px solid $red; - position: relative; - z-index: 4; + .has-error { - .button-content { - border: none; - } + // START HOVER + &.list-button-horizontal, + &.list-button, + &.list-button.list-group, + &.list-card &.option-label { + border: 1px solid $red; + position: relative; + z-index: 4; - &:hover { - @include box-shadow-hover($red-200); - z-index: 5; - } - input[type="radio"]:focus + .list-button-content { - box-shadow: 0 0 0 2.5px $red; - } - } + .button-content { + border: none; + } - &.list-card { - border: 1px solid $red; - } - - &.ui-radio { - &:hover { - input[type="radio"], - input[type="checkbox"] { - @include box-shadow-hover($red-200); - } - } - } - .form-check-input { - &:focus { - box-shadow: 0 0 0 2.5px $red; - } - } - // END HOVER + &:hover { + @include box-shadow-hover($red-200); + z-index: 5; + } - &.list-button, - &.list-card { - color: $red; + input[type="radio"]:focus+.list-button-content { + box-shadow: 0 0 0 2.5px $red; + } + } - input[type="checkbox"]:focus + label, - input[type="radio"]:focus + label { - box-shadow: 0 0 0 2.5px $red; - } - input[type="checkbox"]:checked + label { - box-shadow: 0 0 0 1px $red; - } - &:hover { - border-radius: 0.5rem; - } - } - &.list-button-horizontal { - color: $red; - input[type="checkbox"]:focus + label, - input[type="radio"]:focus + label { - box-shadow: 0 0 1px $red; - } - } + &.list-card { + border: 1px solid $red; + } - &.grid-item { - input[type="radio"] { - + label { - border: 1px solid $red; - &:hover { - background-color: $blue-100; - box-shadow: 0px 0px 0px 4px $red-200; - } - } - } - } - &.ui-radio, - &.ui-checkbox { - input[type="checkbox"], - input[type="radio"], - input[type="radio"] + label:before, - input[type="checkbox"] + label:before { - border: 1px solid $red; - background-color: initial; - } - input[type="checkbox"]:checked + label:before { - border: 1px solid $blue; - } - } - &.textbox-question, - &.dropdown-question { - p { - color: $red; - } - input, - input.form-control, - select, - select.form-select { - border: 1px solid $red; - &:focus { - border: 1px solid transparent; - box-shadow: 0 0 0 2.5px $red; - } + &.ui-radio { + &:hover { - &:hover { - box-shadow: 0px 0px 0px 4px $red-200; - border-radius: 0.5rem; - border: 1px solid $red; - } - } - select, - select.form-select { - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 0.75rem center; - background-size: 16px 12px; - } - } - } - //Restore to default style if alert box is present - .alertError { - .has-error { - &.list-button, - &.list-card { - border: 1px solid $gray-500; - input:not(:focus) { - + label { - border: none; - box-shadow: 0 0 0 1px $gray-500; - border-radius: 0.5rem; - } - } - input:checked:focus { - + label { - border: none; - box-shadow: 0 0 0 2.5px $blue; - border-radius: 0.5rem; - } - } - input:checked:not(:focus) { - + label { - box-shadow: 0 0 0 1px $blue; - border-radius: 0.5rem; - } - } - input:focus { - border: 1px solid $gray-500; - + label { - box-shadow: 0 0 0 2.5px transparent; - } - } - &:hover { - box-shadow: 0 0 0 4px $blue-300; - + label { - box-shadow: 0 0 0 2.5px transparent; - border: 1px solid $blue; - } - } - } - } - } + input[type="radio"], + input[type="checkbox"] { + @include box-shadow-hover($red-200); + } + } + } - .form-test-error { - color: $red; - font-size: 0.875rem; - font-weight: 500; - } - + .form-check-input { + &:focus { + box-shadow: 0 0 0 2.5px $red; + } + } - .form-test-invalid { - &.btn.btn-primary { - color: $gray-600; - background: $gray-200; - cursor: pointer; - pointer-events: all; - font-weight: $font-weight-normal; + // END HOVER + + &.list-button, + &.list-card { + color: $red; + + input[type="checkbox"]:focus+label, + input[type="radio"]:focus+label { + box-shadow: 0 0 0 2.5px $red; + } + + input[type="checkbox"]:checked+label { + box-shadow: 0 0 0 1px $red; + } + + &:hover { + border-radius: 0.5rem; + } + } + + &.list-button-horizontal { + color: $red; + + input[type="checkbox"]:focus+label, + input[type="radio"]:focus+label { + box-shadow: 0 0 1px $red; + } + } + + &.grid-item { + input[type="radio"] { + +label { + border: 1px solid $red; + + &:hover { + background-color: $blue-100; + box-shadow: 0px 0px 0px 4px $red-200; + } + } + } + } + + &.ui-radio, + &.ui-checkbox { + + input[type="checkbox"], + input[type="radio"], + input[type="radio"]+label:before, + input[type="checkbox"]+label:before { + border: 1px solid $red; + background-color: initial; + } + + input[type="checkbox"]:checked+label:before { + border: 1px solid $blue; + } + } + + &.textbox-question, + &.dropdown-question { + p { + color: $red; + } + + input, + input.form-control, + select, + select.form-select { + border: 1px solid $red; + + &:focus { + border: 1px solid transparent; + box-shadow: 0 0 0 2.5px $red; + } + + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: 0.5rem; + border: 1px solid $red; + } + } + + select, + select.form-select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + } + } } - &.btn.btn-primary:hover, - &.btn.btn-primary:focus { - background: $gray-200; - box-shadow: none; + + //Restore to default style if alert box is present + .alertError { + .has-error { + + &.list-button, + &.list-card { + border: 1px solid $gray-500; + + input:not(:focus) { + +label { + border: none; + box-shadow: 0 0 0 1px $gray-500; + border-radius: 0.5rem; + } + } + + input:checked:focus { + +label { + border: none; + box-shadow: 0 0 0 2.5px $blue; + border-radius: 0.5rem; + } + } + + input:checked:not(:focus) { + +label { + box-shadow: 0 0 0 1px $blue; + border-radius: 0.5rem; + } + } + + input:focus { + border: 1px solid $gray-500; + + +label { + box-shadow: 0 0 0 2.5px transparent; + } + } + + &:hover { + box-shadow: 0 0 0 4px $blue-300; + + +label { + box-shadow: 0 0 0 2.5px transparent; + border: 1px solid $blue; + } + } + } + } } - &.btn.btn-primary:focus-visible { - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700; + + .form-test-error { + color: $red; + font-size: 0.875rem; + font-weight: 500; } -} -} + + .form-test-invalid { + &.btn.btn-primary { + color: $gray-600; + background: $gray-200; + cursor: pointer; + pointer-events: all; + font-weight: $font-weight-normal; + } + + &.btn.btn-primary:hover, + &.btn.btn-primary:focus { + background: $gray-200; + box-shadow: none; + } + + &.btn.btn-primary:focus-visible { + box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $gray-700; + } + } +} \ No newline at end of file From 7d485f5937898ff0ad84025363817102ad8e4b82 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Thu, 1 Aug 2024 13:23:41 -0400 Subject: [PATCH 2/4] service package updates rearrange package order add red border on continue error when nothing selected collapse on mobile --- .../service-package-question.vue | 10 ++-- .../service-package-radio.vue | 55 ++++++++++++------- src/styles/common-error-styles.scss | 13 +++++ 3 files changed, 54 insertions(+), 24 deletions(-) diff --git a/src/layouts/service-packages/service-package-question/service-package-question.vue b/src/layouts/service-packages/service-package-question/service-package-question.vue index bad1f443..87fa7bbd 100644 --- a/src/layouts/service-packages/service-package-question/service-package-question.vue +++ b/src/layouts/service-packages/service-package-question/service-package-question.vue @@ -50,7 +50,7 @@ export default { data() { return { servicePackageRadio, - selectedPackageName: packageNames.TIER_ONE + selectedPackageName: '' }; }, computed: { @@ -64,10 +64,6 @@ export default { servicePackageAnswers() { if (!this.cmsWidgetName) return []; const cmsAnswersContent = []; - cmsAnswersContent.push({ - Name: 'TierOne', - cmsWidgetName: 'EconomyServicePackage' - }); if (this.shouldDisplayTierTwoPackage) { cmsAnswersContent.push({ Name: 'TierTwo', @@ -78,6 +74,10 @@ export default { Name: 'TierThree', cmsWidgetName: 'PremiumServicePackage' }); + cmsAnswersContent.push({ + Name: 'TierOne', + cmsWidgetName: 'EconomyServicePackage' + }); // if cms content has not yet loaded, skip if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') || this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') { diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue index 5465bad6..83426fd7 100644 --- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue +++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue @@ -7,17 +7,20 @@ :class="[buttonLabelSubCopy ? 'has-subheader' : '']" for="testradio">
-

- - -

-

+

+ + +

+

+

+
+
  • Date: Thu, 1 Aug 2024 14:08:19 -0400 Subject: [PATCH 3/4] update min size with sub text given current css, needs to be 86px to prevent a small blip of sizing when going from standard to another choice. --- .../service-package-radio/service-package-radio.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue index 83426fd7..3a035bf4 100644 --- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue +++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue @@ -148,7 +148,7 @@ export default { } &.has-subheader { - min-height: 80px; + min-height: 86px; } &:before { From 6c855b73a4bc171c2d69ce407f0b787e6e060d0e Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 5 Aug 2024 08:30:33 -0500 Subject: [PATCH 4/4] SSR-1127 Continue flow on load session fail --- src/store/index.js | 145 +++++++++++++++++++--------------------- src/store/store.spec.js | 15 ----- 2 files changed, 69 insertions(+), 91 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 4a911552..3d33c91c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1375,90 +1375,83 @@ export const useMainStore = defineStore({ async loadSession(duplicate) { const { order, issConfig } = this; - try { - const response = await globalMethods.callHttpClient({ - method: endpoints.LoadSession.method, - endpoint: endpoints.LoadSession.url, - payload: { - referralNumber: duplicate.referralNumber, - referralDate: duplicate.responseDate, - parentAccountNumber: issConfig.parentAccountNumber, - referralCorrelationId: duplicate.correlationId + const response = await globalMethods.callHttpClient({ + method: endpoints.LoadSession.method, + endpoint: endpoints.LoadSession.url, + payload: { + referralNumber: duplicate.referralNumber, + referralDate: duplicate.responseDate, + parentAccountNumber: issConfig.parentAccountNumber, + referralCorrelationId: duplicate.correlationId + } + }); + const { data } = response; + if (!data) { + return; + } + + if (this.isPolicyLookupSuccessful) { + order.customer.address.streetAddress = data.customer?.address?.streetAddress; + order.customer.address.streetAddress2 = data.customer?.address?.streetAddress2; + order.customer.address.city = data.customer?.address?.city; + order.customer.address.state = data.customer?.address?.state; + order.customer.address.zipCode = data.customer?.address?.zipCode; + + order.contactInfo.firstName = data?.customer?.firstName; + order.contactInfo.lastName = data?.customer?.lastName; + order.contactInfo.emailAddress = data?.customer?.emailAddress; + order.contactInfo.homePhone = data?.customer?.homePhone; + order.contactInfo.servicephone = data?.customer?.servicePhone; + order.contactInfo.alternativePhone = data?.customer?.alternativePhone; + order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn; + + if (data.insuranceCoverage) { + order.insuranceCoverage.coverageType = data?.insuranceCoverage?.coverageType; + order.insuranceCoverage.coverageStatus = data?.insuranceCoverage?.coverageStatus; + order.insuranceCoverage.claimNumber = data?.insuranceCoverage?.claimNumber; + } else if (data?.payment?.insuranceCoverage) { + if (data?.payment?.insuranceCoverage?.isVerified) { + order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED; } - }); - const { data } = response; - if (!data) { - // TODO how should we handle this case? - return response; + order.insuranceCoverage.claimNumber = data?.payment?.insuranceCoverage?.claimNumber; } - if (this.isPolicyLookupSuccessful) { - order.customer.address.streetAddress = data.customer?.address?.streetAddress; - order.customer.address.streetAddress2 = data.customer?.address?.streetAddress2; - order.customer.address.city = data.customer?.address?.city; - order.customer.address.state = data.customer?.address?.state; - order.customer.address.zipCode = data.customer?.address?.zipCode; - - order.contactInfo.firstName = data?.customer?.firstName; - order.contactInfo.lastName = data?.customer?.lastName; - order.contactInfo.emailAddress = data?.customer?.emailAddress; - order.contactInfo.homePhone = data?.customer?.homePhone; - order.contactInfo.servicephone = data?.customer?.servicePhone; - order.contactInfo.alternativePhone = data?.customer?.alternativePhone; - order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn; - - if (data.insuranceCoverage) { - order.insuranceCoverage.coverageType = data?.insuranceCoverage?.coverageType; - order.insuranceCoverage.coverageStatus = data?.insuranceCoverage?.coverageStatus; - order.insuranceCoverage.claimNumber = data?.insuranceCoverage?.claimNumber; - } else if (data?.payment?.insuranceCoverage) { - if (data?.payment?.insuranceCoverage?.isVerified) { - order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED; - } - order.insuranceCoverage.claimNumber = data?.payment?.insuranceCoverage?.claimNumber; - } - - if (order.policy.vehicles.length !== 0 && data.vehicle?.carId) { - order.vehicle.registration.licensePlate = data?.vehicle?.licensePlateNumber; - if (data.vehicle.vin) { - const vehicle = order.policy.vehicles.find((v) => v.vin === data.vehicle.vin); - if (vehicle) { - const vehicleResponse = await this.lookupVehicleByVin(vehicle.vin); - if (vehicleResponse) { - this.updateVehicle({ - ...vehicleResponse.data, - policyVehicleId: vehicle.id, - vin: vehicle.vin - }); - this.updateVehicleCoverage({ - noCoverage: noCoverageForSelectedVehicle(vehicle), - deductible: deductibleForSelectedVehicle(vehicle), - repairWaived: repairWaivedForSelectedVehicle(vehicle), - endorsements: endorsementsForSelectedVehicle(vehicle) - }); - } + if (order.policy.vehicles.length !== 0 && data.vehicle?.carId) { + order.vehicle.registration.licensePlate = data?.vehicle?.licensePlateNumber; + if (data.vehicle.vin) { + const vehicle = order.policy.vehicles.find((v) => v.vin === data.vehicle.vin); + if (vehicle) { + const vehicleResponse = await this.lookupVehicleByVin(vehicle.vin); + if (vehicleResponse) { + this.updateVehicle({ + ...vehicleResponse.data, + policyVehicleId: vehicle.id, + vin: vehicle.vin + }); + this.updateVehicleCoverage({ + noCoverage: noCoverageForSelectedVehicle(vehicle), + deductible: deductibleForSelectedVehicle(vehicle), + repairWaived: repairWaivedForSelectedVehicle(vehicle), + endorsements: endorsementsForSelectedVehicle(vehicle) + }); } } - - order.vehicle.year = data.vehicle.year; - order.vehicle.make = data.vehicle.make; - order.vehicle.model = data.vehicle.model; - order.vehicle.style = data.vehicle.style; } - } - order.referralNumber = data?.referralNumber; - order.referralDate = data?.referralDate; - order.referralCorrelationId = data?.referralCorrelationId; - order.referralSequenceNumber = data?.referralSequenceNumber; - order.eon = data?.eon; - order.loadedFromDupeCheck = true; - order.loadedSessionClearedPreviousData = false; - return data; - } catch (ex) { - // TODO how should we handle this case? - throw ex; + order.vehicle.year = data.vehicle.year; + order.vehicle.make = data.vehicle.make; + order.vehicle.model = data.vehicle.model; + order.vehicle.style = data.vehicle.style; + } } + + order.referralNumber = data?.referralNumber; + order.referralDate = data?.referralDate; + order.referralCorrelationId = data?.referralCorrelationId; + order.referralSequenceNumber = data?.referralSequenceNumber; + order.eon = data?.eon; + order.loadedFromDupeCheck = true; + order.loadedSessionClearedPreviousData = false; }, updateCreditCardToken(token) { this.order.payment.creditCardToken.subscriptionId = token.subscriptionId; diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 866e5773..e461b626 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -1107,21 +1107,6 @@ describe('Store', () => { endpoint: endpoints.LoadSession.url })); }); - it('Returns expected response object', async () => { - // Arrange - const response = { data: { ReferralNumber: getRandomString(6, 6) } }; - globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response)); - const duplicate = { - referralNumber: getRandomString(6, 6), - referralCorrelationId: getRandomGuid() - }; - - // Act - const result = store.loadSession(duplicate); - - // Asserts - await expect(result).resolves.toBe(response.data); - }); it('sets expected vehicle data', async () => { // Arrange globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(fullApiResponse));