CASH-1042 WIP confirmation page changes.

src/fmg-components/nav-bar/nav-bar.vue

@@ -28,7 +28,7 @@
             <div
                 v-if="!isBackButtonHidden"
                 class="col-auto link-col py-1 text-break"
-                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
+                :class="[buttonSize ? 'mt-5' : '']">
                 <textLink
                     linkType="navigation"
                     :text="backLink"
@@ -134,11 +134,6 @@ export default {
         width: 100%;
     }
 
-    .back-centered-below {
-        display: flex;
-        justify-content: center;
-    }
-
     @media only screen and (min-width: 340px) {
         .col,
         .col-auto,
@@ -147,11 +142,6 @@ export default {
             justify-content: flex-end;
         }
 
-        .back-centered-below {
-            display: flex;
-            justify-content: center;
-        }
-
         .btn-primary {
             width: auto;
         }

src/layouts/confirmation/confirmation.vue

@@ -1,22 +1,17 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles position-relative">
+        <loadingModal notFullScreen ref="loadingModal" />
-            <div>
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                <div class="container-fluid pb-2">
+        <div class="container page-container-grouped-styles">
-                    <div class="row justify-content-center">
+            <div class="row">
-                        <div class="col-md-6">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                            <funnelHeader
-                                cmsWidgetName="FunnelHeaderWidget"
-                                ref="funnelHeader"
-                                hideSalesforceWebchatLaunchButton />
-                        </div>
-                    </div>
-                    <div class="row justify-content-center">
-                        <div class="col-md-6 col-xl-4">
                             <div class="header-container">
                                 <img :src="ScheduleConfirmationImage" />
                                 <span v-html="ScheduleConfirmationText"></span>
                             </div>
+
+                            <div class="emailtext mb-5" v-html="ConfirmationEmailText"></div>
+                            
                             <div class="main">
                                 <div></div>
 
@@ -48,7 +43,18 @@
                                     class="duration-text-block" />
                             </div>
 
-                            <hr class="mt-4 mb-0" />
+                            <div class="mt-3" v-if="shouldDisplayFosterLove">
+                                <donationBlock
+                                    cmsWidgetName="DonationWidget"
+                                    v-model="donationAmount"
+                                    :donationValues="donationValues"
+                                    :showDonationSuccess="showDonationSuccess"
+                                    :showDonationError="showDonationError"
+                                    @DonationAddedEvent="addDonationToOrder"
+                                    ref="donationBlock" />
+                            </div>
+
+                            <hr class="mt-5 mb-0" />
 
                             <cart
                                 v-if="ShowCart"
@@ -69,38 +75,15 @@
                                 :isNoComp="isNoComp"
                                 :isMSRFeeApplicable="isMSRFeeApplicable" />
 
-                            <div class="mt-3" v-if="shouldDisplayFosterLove">
+                            <hr class="mt-4 mb-5" />
-                                <donationBlock
-                                    cmsWidgetName="DonationWidget"
-                                    v-model="donationAmount"
-                                    :donationValues="donationValues"
-                                    :showDonationSuccess="showDonationSuccess"
-                                    :showDonationError="showDonationError"
-                                    @DonationAddedEvent="addDonationToOrder"
-                                    ref="donationBlock" />
-                            </div>
-
-                            <hr class="mb-5" />
-
-                            <div class="emailtext" v-html="ConfirmationEmailText"></div>
-
-                            <navbar
-                                cmsWidgetName="FunnelFooterWidget"
-                                ref="navbar"
-                                isBackButtonHidden="true"
-                                @ForwardClicked="forwardButtonAction"
-                                :buttonSize="true" />
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
     </Form>
 </template>
 <script>
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 import cart from "@/fmg-components/cart/cart";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -591,7 +574,6 @@ export default {
     components: {
         funnelHeader,
         Form,
-        navbar,
         addToCalendar,
         cart,
         textBlock,
@@ -627,8 +609,8 @@ export default {
 .header-container {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
-    padding: 1.5rem 0;
+    padding: 1.5rem 0 .5rem 0;
 
     p {
         display: inline-block;

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -57,6 +57,9 @@ export default {
         font-size: 0.875rem;
     }
     .vin-toggle {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:after {
             content: "";
             transition: all 0.5s ease;