From 3c4a85627728c9a557da1d2c01184dd1b3811c5e Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 15 Jul 2025 16:22:03 -0400
Subject: [PATCH] CASH-1042 WIP

---
 src/fmg-components/cart/cart.vue              |  6 ++---
 .../funnel-sub-header/funnel-sub-header.vue   | 13 +++++++----
 .../save-progress-modal-question.vue          |  8 +++----
 src/layouts/estimate/estimate.vue             |  3 ---
 src/layouts/payment-method/payment-method.vue | 22 +++++++------------
 .../review-dropdown/review-dropdown.vue       |  6 ++---
 src/layouts/quote/quote.vue                   |  9 +++++---
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../vin-information/vin-information.vue       |  6 ++---
 9 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index fb717d283..17e73c03e 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1316,11 +1316,11 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right center;
-            width: 16px;
-            height: 9px;
+            width: 24px;
+            height: 24px;
             display: inline-flex;
             position: relative;
             right: 0.75rem;
diff --git a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
index 2c117256b..e3e92a9bf 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -13,11 +13,9 @@
         </div>
         <div
             v-if="subText"
-            class="d-flex align-self-start align-self-md-center overflow-hidden mt-1">
+            class="d-flex align-self-center overflow-hidden mt-1">
             <p class="small fw-normal sub-text">
-                <span>
-                    {{ subText }}
-                </span>
+                <span v-html="boldedSubHeaderText"></span>
             </p>
         </div>
     </div>
@@ -40,6 +38,12 @@ export default {
         buttonBack,
     },
     computed: {
+        boldedSubHeaderText() {
+            return this.subText.replace(
+            /^Almost done!/,
+            '<span class="almost-done">Almost done!</span>'
+            );
+        },
         text() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
@@ -61,6 +65,7 @@ export default {
 <style lang="scss" scoped>
 h5 {
     line-height: 32px;
+    font-size: 1.25rem;
 
     button {
         color: inherit;
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index ef4677371..ea4a3d07e 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -118,13 +118,14 @@ export default {
     margin-bottom: 1.5rem;
     order: 2;
     text-align: center;
-    background: $blue-100;
+    background: $gray-100;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     height: 3rem;
     border-radius: 0.5rem;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
 
     &.progress-saved {
         background: none;
@@ -137,12 +138,11 @@ export default {
         border: none;
         font-weight: 900;
         font-size: 0.875rem;
-        text-align: center;
+        text-align: left;
         display: inline-block;
         width: auto;
         height: auto;
-        text-decoration: underline;
-        text-underline-offset: 0.25rem;
+        text-decoration: none;
         line-height: 1rem;
         padding: 1rem;
         margin: 0 auto;
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index a0cd1e711..065f09449 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -5,7 +5,6 @@
         <div class="container page-container-grouped-styles estimate">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div>
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
                         <div v-html="this.VinLookupQuestionBodyText2"></div>
@@ -41,7 +40,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
@@ -243,7 +241,6 @@ export default {
     },
     components: {
         funnelHeader,
-        funnelSubHeader,
         navbar,
         buttonQuestion,
         Form,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 806a67448..06f8871fe 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -53,7 +53,7 @@
 
                     <div
                         v-if="isRecalibrationOnOrder && shouldHideRecalibration"
-                        class="questions-about-service my-5">
+                        class="questions-about-service mt-5">
                         <textBlock
                             cmsWidgetName="QuestionsAboutYourServiceWidget"
                             justifyText="left"
@@ -63,7 +63,7 @@
                         <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 cmsWidgetName="RecalConfirmWidget"
-                                class="mb-5"
+                                class="mb-3"
                                 isRequired="true"
                                 v-model="isRecalAckOptIn"
                                 validationRules="recal-ack-required"
@@ -78,13 +78,6 @@
                         :isInsurance="isInsurance"
                         validationRules="payment-method-required" />
 
-                    <alert
-                        v-if="showHavePaymentReadyAlert"
-                        :isDismissible="false"
-                        alertClass="alert-info"
-                        cmsWidgetName="NoPiaDisclaimerWidget"
-                        shouldScrollToOnMount="false" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -766,11 +759,6 @@ export default {
 
             return false;
         },
-        showHavePaymentReadyAlert() {
-            return (
-                !this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
-            );
-        },
         totalAmountDue() {
             return getAmountDue(this.lineItems);
         },
@@ -903,6 +891,12 @@ export default {
     margin: 0;
 }
 .payment-method {
+    :deep(.almost-done) {
+        font-family: UrbanistSemibold;
+    }
+    :deep(h5) {
+        margin-bottom: 1rem;
+    }
     .recal-modal {
         :deep(.modal-body) {
             display: flex;
diff --git a/src/layouts/payment-method/review-dropdown/review-dropdown.vue b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
index e6088bb92..3aec6383b 100644
--- a/src/layouts/payment-method/review-dropdown/review-dropdown.vue
+++ b/src/layouts/payment-method/review-dropdown/review-dropdown.vue
@@ -157,11 +157,11 @@ export default {
     &:after {
         content: "";
         transition: all 0.5s ease;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right center;
-        width: 16px;
-        height: 9px;
+        width: 24px;
+        height: 24px;
         display: inline-flex;
         position: relative;
         right: 0.75rem;
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index e08dee6e3..cc8b5fffa 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -4,8 +4,12 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container quote position-relative">
             <div class="row justify-content-center">
-                <div class="col-md-6">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <cashOrInsuranceQuestion
                         ref="cashOrInsurance"
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
@@ -84,9 +88,8 @@
 
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
-                        justifyText="center"
                         typeStyle="caption"
-                        class="mb-5 quote-disclaimer" />
+                        class="mb-5 quote-disclaimer text-left text-md-center" />
                 </div>
             </div>
 
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ca77900fa..70450dd59 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,7 @@
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7"/>
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index a0eaf9536..f08196135 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -60,12 +60,12 @@ export default {
         &:after {
             content: "";
             transition: all 0.5s ease;
-            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right center;
             margin-left: 0.5rem;
-            width: 16px;
-            height: 9px;
+            width: 24px;
+            height: 24px;
             display: inline-flex;
         }
         &.active:after {