Merge remote-tracking branch 'origin/feature/CASH-1184' into feature/CASH-1184

src/digital-components/phone-number-question/phone-number-question.vue

@@ -6,6 +6,7 @@
             :max-length="12"
             v-model="selectedValue"
             :mask="mask"
+            placeholderText="###-###-####"
             :isRequired="isRequired"
             :validationRules="validationRulesForTextBoxQuestion"
             :cmsWidgetName="cmsWidgetName" />

src/fmg-components/cart/cart.vue

@@ -3,7 +3,9 @@
         <div class="px-0" v-if="isCartReadyToLoad">
             <div
                 class="row vin-toggle flex align-items-center pt-4"
-                :class="[isExpanded ? 'expanded' : '']"
+                :class="[
+                    isCollapsible ? (isExpanded ? 'expanded' : '') : 'expanded non-collapsible',
+                ]"
                 @click="toggleIsExpanded()">
                 <a
                     aria-label="expand cart"
@@ -208,6 +210,7 @@ export default {
         isItac: Boolean,
         isNoComp: Boolean,
         isExpandedOnLoad: Boolean,
+        isCollapsible: { type: Boolean, default: true },
         isMSRFeeApplicable: Boolean,
         donationCartItem: Object,
     },
@@ -1182,6 +1185,11 @@ export default {
         font-weight: 500;
         line-height: 1.625;
     }
+    .non-collapsible {
+        .amount-due {
+            display: none;
+        }
+    }
     .amount-due {
         color: $green;
 
@@ -1283,23 +1291,26 @@ export default {
         margin-top: 0.5rem;
     }
     .vin-toggle {
-        &:after {
-            content: "";
-            transition: all 0.5s ease;
-            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: 24px;
-            height: 24px;
-            display: inline-flex;
-            position: relative;
-            right: 0.75rem;
-            margin: 0.5rem 0 0.5rem 1rem;
-            cursor: pointer;
-        }
-        &.expanded:after {
-            transform: rotate(180deg);
+        &:not(.non-collapsible) {
+            &:after {
+                content: "";
+                transition: all 0.5s ease;
+                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: 24px;
+                height: 24px;
+                display: inline-flex;
+                position: relative;
+                right: 0.75rem;
+                margin: 0.5rem 0 0.5rem 1rem;
+                cursor: pointer;
+            }
+            &.expanded:after {
+                transform: rotate(180deg);
+            }
         }
+
         &.expanded + .cart-panel {
             max-height: 650px;
             transition: all 150ms ease-in;
@@ -1307,6 +1318,13 @@ export default {
             padding: 1rem 0 0.5rem;
             visibility: visible;
         }
+
+        &.non-collapsible {
+            & > a {
+                cursor: default;
+            }
+        }
+
         a {
             font-family: UrbanistSemibold;
             text-decoration: none;

src/layouts/customer-details/customer-details.vue

@@ -4,7 +4,10 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
+                    <funnelSubHeader
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        class="mt-4 mb-5"
+                        alignLeft />
                     <textboxQuestion
                         isRequired
                         class="mb-4"

src/layouts/payment/payment.vue

@@ -53,7 +53,7 @@
                                 :showInsuranceCoverageAs="showInsuranceCoverageAs"
                                 :isItac="isItac"
                                 :isNoComp="isNoComp"
-                                :isExpandedOnLoad="true" />
+                                :isCollapsible="false" />
 
                             <button
                                 v-if="showSwitchPaymentMethod"
@@ -936,6 +936,7 @@ export default {
     }
     & > #cart-container {
         flex-basis: 36%;
+        margin-top: 2rem;
     }
 
     @include media-breakpoint-down(lg) {
@@ -946,6 +947,7 @@ export default {
         }
         & > #cart-container {
             flex-basis: 100%;
+            margin: 0 0.5rem;
 
             & > button#submit-payment {
                 display: none;