diff --git a/playwright-tests/.npmrc b/playwright-tests/.npmrc index 44002a41d..13a1273bf 100644 --- a/playwright-tests/.npmrc +++ b/playwright-tests/.npmrc @@ -1,3 +1,3 @@ -registry=https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/ -always-auth=true -//pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/:_authToken=${NPM_TOKEN} \ No newline at end of file +registry=https://pkgs.dev.azure.com/Safelite/Digital/_packaging/DigitalQA/npm/registry/ + +always-auth=true \ No newline at end of file diff --git a/playwright-tests/tests/CashRepairInShopAfterPay.ts b/playwright-tests/tests/CashRepairInShopAfterPay.ts index 1beced679..bd5ff6abd 100644 --- a/playwright-tests/tests/CashRepairInShopAfterPay.ts +++ b/playwright-tests/tests/CashRepairInShopAfterPay.ts @@ -42,7 +42,7 @@ const cashRepairInShopAfterPayTests: ITestCase[] = []; const tc = { name: `CashRepairInShopAfterPay`, - tags: ['@E2E','@CashRepairInShopAfterPay', '@test_report', '@CASH', '@CASH-836'], + tags: ['@E2E','@CashRepairInShopAfterPay', '@test_report', '@CASH', '@CASH-1187'], testData: cashRepairInShopAfterPayData }; cashRepairInShopAfterPayTests.push(tc); diff --git a/playwright-tests/tests/CashRepairInShopPayPal.ts b/playwright-tests/tests/CashRepairInShopPayPal.ts index a2e7351f1..2a36127f4 100644 --- a/playwright-tests/tests/CashRepairInShopPayPal.ts +++ b/playwright-tests/tests/CashRepairInShopPayPal.ts @@ -42,7 +42,7 @@ const cashRepairInShopPayPalTests: ITestCase[] = []; const tc = { name: `CashRepairInShopPayPal`, - tags: ['@E2E','@CashRepairInShopPayPal', '@test_report', '@CASH', '@CASH-836'], + tags: ['@E2E','@CashRepairInShopPayPal', '@test_report', '@CASH'], testData: cashRepairInShopPayPalData }; cashRepairInShopPayPalTests.push(tc); diff --git a/playwright-tests/tests/CashRepairMobileCreditCard.ts b/playwright-tests/tests/CashRepairMobileCreditCard.ts index 1e379439f..b776f7fa5 100644 --- a/playwright-tests/tests/CashRepairMobileCreditCard.ts +++ b/playwright-tests/tests/CashRepairMobileCreditCard.ts @@ -55,7 +55,7 @@ const cashRepairMobileCCTests: ITestCase[] = []; const tc = { name: `CashRepairMobileCreditCard`, - tags: ['@E2E','@CashRepairMobileCreditCard', '@test_report', '@CASH', '@CASH-836'], + tags: ['@E2E','@CashRepairMobileCreditCard', '@test_report', '@CASH'], testData: cashRepairMobileCCData }; cashRepairMobileCCTests.push(tc); diff --git a/playwright-tests/tests/InsuranceAcuityPaypal.ts b/playwright-tests/tests/InsuranceAcuityPaypal.ts index b70c60e2d..0a97fc794 100644 --- a/playwright-tests/tests/InsuranceAcuityPaypal.ts +++ b/playwright-tests/tests/InsuranceAcuityPaypal.ts @@ -90,7 +90,7 @@ const insuranceAcuityPaypalTests: ITestCase[] = []; const tc = { name: `InsuranceAcuityPaypal`, - tags: ['@E2E','@InsuranceAcuityPaypal', '@test_report', '@Insurance'], + tags: ['@E2E','@InsuranceAcuityPaypal', '@test_report', '@Insurance', '@CASH-1187'], testData: insuranceAcuityPaypalData }; insuranceAcuityPaypalTests.push(tc); diff --git a/playwright-tests/tests/alert-validation/alert0001_HeavyTruck.ts b/playwright-tests/tests/alert-validation/alert0001_HeavyTruck.ts index 3ec0ff648..e81038f44 100644 --- a/playwright-tests/tests/alert-validation/alert0001_HeavyTruck.ts +++ b/playwright-tests/tests/alert-validation/alert0001_HeavyTruck.ts @@ -46,7 +46,7 @@ const heavyTruckTests: ITestCase[] = []; const tc: ITestCase = { name: `alert0001 Heavy Truck`, - tags: ['@Alert', '@HeavyTruck', '@test_report'], + tags: ['@Alert', '@HeavyTruck', '@test_report', '@CASH-1187'], testData: heavyTruckData }; diff --git a/playwright-tests/tests/alert-validation/alert0003_SplitWindshield.ts b/playwright-tests/tests/alert-validation/alert0003_SplitWindshield.ts index d63bb5fcf..e79c0c175 100644 --- a/playwright-tests/tests/alert-validation/alert0003_SplitWindshield.ts +++ b/playwright-tests/tests/alert-validation/alert0003_SplitWindshield.ts @@ -64,7 +64,7 @@ vehiclesToTest.forEach((vehicle, index) => { const tc = { name: `alert0003_${vehicle.make.toLowerCase()}_${vehicle.model.toLowerCase()} Windshield selected, when vehicle has split windshield - ${vehicle.make} ${vehicle.model} ${vehicle.year}`, - tags: ['@Alert', '@SplitWindshield', '@test_report', `@${vehicle.make.toLowerCase()}`, '@CASH-836'], + tags: ['@Alert', '@SplitWindshield', '@test_report', `@${vehicle.make.toLowerCase()}`], testData: testData }; diff --git a/playwright-tests/tests/alert-validation/alert0004_RepairOnly.ts b/playwright-tests/tests/alert-validation/alert0004_RepairOnly.ts index d01bb91f8..d4f1c2545 100644 --- a/playwright-tests/tests/alert-validation/alert0004_RepairOnly.ts +++ b/playwright-tests/tests/alert-validation/alert0004_RepairOnly.ts @@ -33,7 +33,7 @@ const repairOnlyTests: ITestCase[] = []; const tc = { name: `alert0004 Replace selected when not offered`, - tags: ['@Alert', '@RepairOnly', '@test_report', '@CASH-836'], + tags: ['@Alert', '@RepairOnly', '@test_report', '@CASH-1187'], testData: repairOnlyData }; repairOnlyTests.push(tc); diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index a605df285..e47350565 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -194,16 +194,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item { margin-bottom: 2px; } -@media (min-width: 500px) { - .form-group { - width: 80%; - } -} -@media (min-width: 800px) { - .form-group { - width: 60%; - } -} .list-group { margin-bottom: 20px; padding-left: 0; diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index ec72ae1b9..b3b4b21ce 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -188,17 +188,6 @@ margin-bottom: 2px; } - @media (min-width: 500px) { - .form-group { - width: 80%; - } - } - @media (min-width: 800px) { - .form-group { - width: 60%; - } - } - .list-group { margin-bottom: 20px; padding-left: 0; diff --git a/src/assets/img/icons/question-mark-icon-blue.svg b/src/assets/img/icons/question-mark-icon-blue.svg new file mode 100644 index 000000000..6b75c70d6 --- /dev/null +++ b/src/assets/img/icons/question-mark-icon-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js index 50b353151..f177b6cf7 100644 --- a/src/constants/progress-bar-mapper.js +++ b/src/constants/progress-bar-mapper.js @@ -1,28 +1,95 @@ -const pagePercentageMapper = { - vehicle: 4, - "vehicle-damage": 16, - estimate: 28, - "service-zip": 32, - "vin-lookup": 32, - "license-plate-lookup": 32, - "address-lookup": 32, - "address-vehicles": 36, - "part-questions": 40, - "molding-questions": 40, - "vehicle-parts": 40, - "capability-questions": 40, - quote: 48, - "insurance-company": 52, - // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED - // "service-location": 60, - schedule: 64, - "mobile-details": 76, - "customer-details": 84, - "payment-method": 92, - payment: 96, - confirmation: 100, +export const pageProgressMapper = { + //Combine progress bar slide percent and button steps + vehicle: { + percent: 7, + step: 1, + }, + "vehicle-damage": { + percent: 10, + step: 1, + }, + estimate: { + percent: 14, + step: 1, + }, + "service-zip": { + percent: 18, + step: 1, + }, + "vin-lookup": { + percent: 18, + step: 1, + }, + "license-plate-lookup": { + percent: 18, + step: 1, + }, + "address-lookup": { + percent: 18, + step: 1, + }, + "address-vehicles": { + percent: 25, + step: 1, + }, + "part-questions": { + percent: 30, + step: 1, + }, + "molding-questions": { + percent: 30, + step: 1, + }, + "vehicle-parts": { + percent: 30, + step: 1, + }, + "capability-questions": { + percent: 30, + step: 1, + }, + quote: { + percent: 39, //Must be 39 + step: 2, + }, + "insurance-company": { + percent: 52, + step: 2, + }, + "service-location": { + percent: 60, + step: 2, + }, + schedule: { + percent: 70.5, //Must be 70.5 + step: 3, + }, + "mobile-details": { + percent: 76, + step: 3, + }, + "customer-details": { + percent: 84, + step: 3, + }, + "payment-method": { + percent: 92, //Must be 92 + step: 3, + }, + payment: { + percent: 96, + step: 4, + }, + confirmation: { + percent: 100, + step: 4, + }, }; export const getProgressBarPercentage = (page) => { - return pagePercentageMapper[page] || 0; + return pageProgressMapper[page]?.percent || 0; +}; + +export const getProgressBarStep = (page) => { + return pageProgressMapper[page]?.step || 1; }; diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 2eaf204ad..82fbf424c 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com ">
{{ questionText }} @@ -83,10 +83,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
-
+
({ buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index a2ee0b3c1..bb55e61ec 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -152,6 +152,7 @@ export default { border: 1px solid $gray-500; border-radius: 0.5rem; min-height: 3rem; + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); @include media-breakpoint-up(md) { min-height: 3.5rem; } diff --git a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue index 41f9d2d8a..e05ff408a 100644 --- a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue +++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue @@ -66,19 +66,18 @@ export default { .btn { &.btn-primary { position: relative; - background: linear-gradient(270deg, $blue 0%, $blue-800 100%); + background: $red; border: none; - border-radius: $border-radius-lg; color: $white; justify-content: center; font-weight: 500; @media (hover: hover) { - background: linear-gradient(270deg, $blue 0%, $blue-800 100%); + background: $red; } &:focus { box-shadow: 0 0 0 3px, - 0 0 0 5.5px $blue-700; + 0 0 0 5.5px $red; } &:focus, // Mouse, touch, stylus focus &:focus-visible { @@ -86,27 +85,26 @@ export default { outline: none; box-shadow: 0 0 0 3px, - 0 0 0 5.5px $blue-700; + 0 0 0 5.5px $red; color: $white; - background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); + background: $red; } &:disabled { background: $gray-200 !important; - background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important; + background: $red !important; color: $gray-600 !important; font-weight: 400; height: 48px; border: none; - border-radius: $border-radius-lg; cursor: pointer; pointer-events: all; } &.has-loader { color: $white; - background: $blue-700; + background: $red; box-shadow: 0 0 0 3px, - 0 0 0 5.5px $blue-700; + 0 0 0 5.5px $red; pointer-events: none; } &.delay { @@ -117,8 +115,7 @@ export default { &.btn-secondary { position: relative; background: transparent; - border: 1px solid $blue; - border-radius: $border-radius-lg; + border: 1px solid $red; color: $blue; font-weight: 500; transition: all 150ms linear; @@ -133,7 +130,7 @@ export default { outline: none; box-shadow: 0 0 0 3px $white, - 0 0 0 5.5px $blue-700; + 0 0 0 5.5px $red; color: $white; @include blue-gradient; } @@ -142,14 +139,12 @@ export default { color: $gray-550 !important; font-weight: 400; height: 48px; - border: 1px solid $gray-550; - border-radius: $border-radius-lg; + border: 1px solid $red; cursor: pointer; pointer-events: all; } &.has-loader { color: $white; - @include blue-gradient; pointer-events: none; } &.delay { diff --git a/src/digital-components/sierra-webchat/sierra-webchat.vue b/src/digital-components/sierra-webchat/sierra-webchat.vue index 77e5675f1..cc88b5433 100644 --- a/src/digital-components/sierra-webchat/sierra-webchat.vue +++ b/src/digital-components/sierra-webchat/sierra-webchat.vue @@ -44,21 +44,40 @@ export default { }, getSierraContext() { const glassDamage = store.getters?.order?.damage?.glassToReplace; - const glassType = - glassDamage && glassDamage.length > 0 - ? glassDamage.length > 1 - ? "Multiglass" - : glassDamage[0].glassType // todo: clarify? - : ""; + let glassType = ""; + for (let i = 0; i < glassDamage?.length; i++) { + if (i !== 0) { + glassType += "/"; + } + glassType += glassDamage[i].glassLocation; + } - const damageType = store.getters.order?.damage?.isRepair ? "repair" : "replace"; + const hasGlassDamage = glassDamage?.length > 0; + const hasRepairFlag = store.getters.order?.damage?.isRepair; - const paymentType = store.getters.oreder?.payment?.isInsurance ? "insurance" : "cash"; + let damageType = ""; + if (hasRepairFlag) { + damageType = "repair"; + } else if (hasGlassDamage) { + damageType = "replace"; + } + + const isInsurance = store.getters.order?.payment?.isInsurance; + + let paymentType = ""; + if (isInsurance) { + paymentType = "insurance"; + } else if (isInsurance !== null && isInsurance !== undefined) { + paymentType = "cash"; + } const glassParts = store.getters.order?.lineItems?.glassParts; - const partId = glassParts && glassParts.length > 0 ? glassParts[0].partId : ""; + const partNumber = glassParts && glassParts.length > 0 ? glassParts[0].partNumber : ""; - const packageData = deepClone(store.getters?.pageData(routeData.QUOTE.name)); + const packageData = deepClone(store.getters?.pageData(routeData.QUOTE.name)?.packages); + + const recalFlag = store.getters?.isRecalibrationOnOrder; + const displayRecalFlag = glassParts?.length > 0 ? recalFlag : ""; return { current_page: this.pageName, @@ -66,13 +85,13 @@ export default { vehicle_make: store.getters.order?.vehicle?.make ?? "", vehicle_model: store.getters.order?.vehicle?.model ?? "", vehicle_style: store.getters.order?.vehicle?.style ?? "", - service_zip: store.getters.order?.serviceLocation?.serviceZip ?? "", + service_zip: store.getters.order?.serviceLocation?.zipCode ?? "", glass_type: glassType ?? "", damage_type: damageType ?? "", payment_type: paymentType ?? "", quote: packageData ?? [], - part_id: partId ?? "", - recalibration: store.getters?.isRecalibrationOnOrder ?? "", + part_id: partNumber ?? "", + recalibration: displayRecalFlag ?? "", }; }, launchSierraChat() { diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 7df4436f1..9aa41e64e 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -337,6 +337,7 @@ export default { border-radius: 0.5rem; min-height: 3rem; padding: 0.75rem 1rem; + box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); @include media-breakpoint-up(md) { padding: 1rem; min-height: 3.5rem; diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index fb717d283..fa2401952 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -10,7 +10,7 @@ href="javascript:void(0)" class="col d-flex justify-content-between py-0"> {{ OrderDetailsText }} - + {{ getLineItemAmount(amountDue, showCoverageAsPending) }} @@ -83,16 +83,13 @@ :text="removeLinkText" href="javascript:void(0)" @click-event="removeItem(cartItem.cartItemType, cartItem.category)" /> - {{ recycleFeeCartItem.name }} + + Info Icon +
-
-
-
- -
-
- -
-
-
-
-
- +
+ +
+
+ +
+
-
- -
-
- -