From c821fc7d83a9738c1e326256a4524bb841c2fc90 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Mon, 16 Feb 2026 17:11:56 -0500 Subject: [PATCH] INSR-7759: Some payment-method parity updates - Payment method question button now matches Heritage - Recalibration is now its own line item - Some other general updates to structure and formatting of page --- .../icons/chevron-circle_review_dropdown.png | Bin 0 -> 1973 bytes src/constants/progress-bar-mapper.js | 5 +- src/helpers/cart-helper.js | 15 +++ .../cart-dropdown/cart-dropdown.vue | 109 ++++++++++-------- .../payment-method-list-button.vue | 82 +++++-------- .../payment-method-question.vue | 3 +- src/layouts/payment-method/payment-method.vue | 74 +++++++++--- .../review-dropdown/review-dropdown.vue | 23 ++-- 8 files changed, 174 insertions(+), 137 deletions(-) create mode 100644 src/assets/img/icons/chevron-circle_review_dropdown.png diff --git a/src/assets/img/icons/chevron-circle_review_dropdown.png b/src/assets/img/icons/chevron-circle_review_dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..c2360997b00dfc6b1964e4222e666b6b215a7418 GIT binary patch literal 1973 zcmV;m2TJ&fP)Px+Z%IT!RA>d|TU%@tRTw_!>~blw5J+gt#XyLGC^0-}Vl=ftOi%~}>4LFJg24yE zgTCM;5n3l(AO=OFi7|Lds1G&*+lo*wAy`3_kf<-j5E5Q|0Je*$<+c=N=Jo8JSQFKH`oRU$MVrO|q=tBx7+B?`Wo3_l?y8ym(x=j@JT z>d{Z+19FsEc}m$k&n(01|_ z%L3fcmRf9@EXkN`EH{u~_4z3g7p-Y+)sMmS-CCgl&)Sxnb~`I~(y(iBo2)#Cg6B5)WZ*ba%kMO%&lEycwH&R@1t(V#JUL^F1)^Mz|W^I;D+sorpjz~zm)Px zKV#LDbIwomnwpjAca~i#7Dv$`jh-C|U;z*vf>;rAXuuf8!@Xzi;1Fy6)w8o5(hhTSh67-L~$~_NX|^bW6QlhSuVg>RAjUA93dDEpPq6W zvcIN=KddfJTs?>t)F=RphMJVe;%GES4>xGti%i|?Q3sG51YE#KEm<2 z!dEdB05`ODExdob9#>oyWXQ%Gww#LsV9CrkD(JPUrtR3QcNm!pX~>I_Z{Dj4)8-sW zgczTJ%t@|?DJ?Tm~R#IBkcLT20^`l`Ew&6q7^@>H+vD3gRXl&23 zGyTfaGVhAr5HZPf;1Fs1pq$}dI(tDqJv4KR}rngi^I z8Cq(lYCN4x^hnNMWb_$OWhK*O1GZpOtqb3Xfo5M<463f323BDmf7rPJ%Cym*bJt+U zXKOtTs(L1w=%$`oOMF9>l|UP?0b6Pv_=Io7pvrt{I_eSDS&y%#hk}%Ivqttfa$c&m zFPZpOaIu~m(^O@?w6&KN>tRFHg)jJ|o}H`80?~A?MLnE9*a}p`sYEm1BW5;xY^HW( zic`WEO)_885Zb`VfhrrC<`Q*KSJiZVTZ(ch*U+Z-(KGMnNPpOyv zHzu5I%IP|Tflb(k52qvqMOZOul?@oKkukiY|J{>27j_1d*_zl%OTx`g?mY^!O#A8& z?{RV^*n&;iR%M}R!iq^N9jdZtCD}yF)bD3&z2j9e4b|;5WL*gcn%t6*srs-1Thx?I zsw^~3Sh4UpAKHLNMVeHexn*4Kny>xgIt-_8Y8!o{cND5onI@=r3v|AKy08ITs;nFu zSh4Vk6tESLWJ~`t&h1&G^|}tnGwq4Dxey=Y4`meq>Yy%-yrrtFTpCzux758v*Nvm) z8uO}8@8;g7N1I#rzQ6-5Le}h&v6E-JI_aHV<7KaGo)AmuvlKrS<@(ni6aqhaHnm&R zr0?esI?$~YSYX6u8G+j}H07VM2O4FW-ov$@8L2M_2<`H`AINe#){@j)sZ1^~0;|>X zG`73Sv{$q`fnHzV+C|@E?*}sIcuS+<4r0s=HM$xU$quJzY;t3LYw9CaCC8H+Req#2 zc5lE)PhptVx9&SYt-L%^M;^wgrN0^*kGDZ|N7s||sd&{xEm9V}zX$u;SFeE4!eoMb zP?35W!WaM!=yxyT?|y)_K-#bsdKdyaSN&=9oj&kWw6raxr3yW4wS-{SP(yjNJh;ea z$Kn7?OTS*~@=m+LNG=15{p1i>9Du>V4LADNkManA`tw*EFkFCfVvZYbq0%!B(^Vvp zCL#>#=|3WJ0S42$8zK2yD38d8V)we=0W6MLS_N0PW#4Y%tyB5KobJeMUH!^XF?#m! zpfaxW(T?ZzAU)jwBUZ#*EY6~Uad#2d`9=b0#E4k^?pqcGjF!UP#oDPgi>cUAtmUdK z>p+Zt_bd@((RWw{Vcl@!atCE2d>cxwTM-(Gewv_=Bn)c5B)~BGzq%j}z?klF!;M<1 zYAZ7MMhruJdJyMOPsu%OH item.requiresRecalibration); + const recalibrationLineItems = itemsWithRecalibration.map((item) => { + return item.childParts?.find((child) => child.partType === partTypeStrings.RECALIBRATION || child.partType === partTypeStrings.ADAS_RECALIBRATION) ?? {}; + }); + + return getPriceOfLineItems(recalibrationLineItems); +} diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index fa106ffe..fe3183b9 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -1,20 +1,30 @@ @@ -128,6 +128,7 @@ import { getCartTotal, getDeductible, getLineItems, getMobileFeeLineItem, + getRecalibrationTotal, getRecycleFeeLineItem, getSalesTax, getServiceLineItems, getSubtotal, isOrderITAC, isOrderNoComp, isOrderUnverified @@ -136,7 +137,6 @@ import { getPriceOfLineItems, getTaxOfLineItems } from '@/helpers/price-calculat import { processIfStatements } from '@/helpers/cms-content-helper'; const VERIFYING_COVERAGE = 'Verifying coverage'; -const RECYCLING_MODAL_REF_NAME = 'RecycleModal'; export default { name: 'confirmation-cart', @@ -148,7 +148,6 @@ export default { props: { readOnly: Boolean, showAsPaid: Boolean, - recyclingModalCmsWidgetName: String, submittedOrder: Object }, data() { @@ -158,6 +157,7 @@ export default { amountPaid: 'AmountPaidTextWidget', deductible: 'DeductibleWidget', basePrice: 'BasePriceWidget', + recalibration: 'RecalibrationWidget', subtotal: 'SubtotalWidget', salesTax: 'SalesTaxWidget', recycleFee: 'RecycleFeeWidget', @@ -167,8 +167,7 @@ export default { warrantyText: 'WarrantyCartItemTextWidget', guaranteeText: 'GuaranteeCartItemTextWidget' }, - cartItemType, - RECYCLING_MODAL_REF_NAME + cartItemType }; }, computed: { @@ -181,9 +180,18 @@ export default { deductible() { return getDeductible(this.cartOrder); }, + isDeductibleOnly() { + return this.deductible > 0 && this.subTotal === this.deductible; + }, showDeductibleCartItem() { return this.isUnverified || (!this.isNoComp && !this.isITAC); }, + showRecalibrationCartItem() { + return this.recalibrationPrice > 0; + }, + recalibrationPrice() { + return getRecalibrationTotal(this.cartOrder); + }, lineItems() { return getLineItems(this.cartOrder); }, @@ -191,7 +199,8 @@ export default { return getRecycleFeeLineItem(this.cartOrder); }, servicePrice() { - return getPriceOfLineItems(getServiceLineItems(this.cartOrder)) ?? 0; + const price = getPriceOfLineItems(getServiceLineItems(this.cartOrder)) ?? 0; + return price - this.recalibrationPrice; }, isUnverified() { return isOrderUnverified(this.cartOrder); @@ -327,6 +336,9 @@ export default { this.getCustomValueFromString ); }, + recalibrationLabel() { + return this.getCmsContent(this.widget.recalibration, widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, subtotalLabel() { return this.getCmsContent(this.widget.subtotal, widgetFields.TEXT_BLOCK_WIDGET.TEXT); }, @@ -452,8 +464,6 @@ export default { diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue index 0f834cbc..c3601cbf 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue @@ -2,32 +2,30 @@ -
+ buttonWrapperClasses="list-group base-input-button list-button d-flex flex-column w-100 no-hover"> +
+
+ + + + {{ getInlineAltText(token) }} + + + {{ token }} + + +
-
-

- - - - {{ getInlineAltText(token) }} - - - {{ token }} - - -

-
@@ -78,48 +76,26 @@ export default { outline: none; input[type="radio"], input[type="checkbox"] { - position: static; //override bootstrap - - &:focus-visible + .list-button-content { - box-shadow: 0 0 0 2.5px $blue; - } - &:focus + .list-button-content { - box-shadow: 0 0 0 2.5px $blue; - } &:checked + .list-button-content { + background: $background-color-selected; + border-color: $heritage-blue-primary; + font-weight: 600; color: $black; - font-weight: 500; - background: $blue-100; - box-shadow: 0 0 0 1px $blue; - } - &:checked:focus + .list-button-content { - box-shadow: 0 0 0 2.5px $blue; - } - &:checked + .list-button-content p, - &:checked + .list-button-content span { - font-weight: 500; - } - &:checked + .list-button-content span:nth-child(2) { - font-weight: 400; - color: $gray-600; } } } .list-button-content { - color: $gray-600; + color: $darker-gray; + font-weight: 400; position: relative; background: $white; transition: all 150ms linear; - border-radius: $border-radius-lg; - border: 1px solid $gray-500; + border-radius: 3.75rem; + border: 1px solid #CACBCC; width: 100%; outline: none; - - span { - &.small { - font-size: $font-size-xsm; - color: $gray-550; - } - } + padding: .625rem 2rem; + height: 2.875rem; + margin-bottom: .75rem; } diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index d8376879..33d82adf 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -19,6 +19,7 @@ import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import widgetFields from '@/constants/cms-widget-fields.js'; import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue'; +import { markRaw } from 'vue'; export default { name: 'payment-method-question', @@ -33,7 +34,7 @@ export default { emits: ['update:modelValue'], data() { return { - paymentMethodListButton + paymentMethodListButton: markRaw(paymentMethodListButton) }; }, computed: { diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index ba1f761b..8b675e33 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -12,21 +12,24 @@
+ + class="subheader" + cmsWidgetName="SiteSubHeaderWidget" />
-
+
-
+
+ -
+
$page-side-padding: 1.5rem; -.iss-heritage-container-width { +#app .iss-heritage-container-width { + .iss-heritage-content-container-width { + @include media-breakpoint-up(md) { + width: 58.33333333%; + } + } .payment-method-container { position: relative; min-height: 1px; padding-left: .9375rem; padding-right: .9375rem; + + .alert-warning { + margin-top: 1.25rem; + margin-bottom: 0rem; + } + + .subheader { + margin-top: 1.25rem; + + :deep(strong) { + color: $black; + font-weight: 600; + } + + :deep(.subheader-secondary) { + margin-top: .625rem; + + p { + margin-bottom: 0; + } + } + } + + .section-divider { + margin-top: 1.5rem; + margin-bottom: 1.875rem; + } + + .pia-divider { + margin-top: .5rem; + margin-bottom: .75rem; + } } } - -.main-content-container { - padding: 0; -} - -.page-container-grouped-styles { - overflow: auto; -} diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue index d1504da4..d48b55f3 100644 --- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue +++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue @@ -1,7 +1,7 @@