Merge pull request #1668 from Safelite/feature/csr-1899

Changes

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

@@ -1,7 +1,13 @@
 <template>
     <div class="row"></div>
     <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
-        <div class="row d-flex flex-row-reverse justify-content-between align-items-center vw-100">
+        <div
+            class="row d-flex justify-content-between vw-100"
+            :class="[
+                buttonSize
+                    ? 'flex-column align-items-stretch'
+                    : 'flex-row-reverse align-items-center',
+            ]">
             <div
                 :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
                 id="stacked">
@@ -19,7 +25,10 @@
                     data-bs-dismiss="modal"
                     v-if="!isSubmitHidden" />
             </div>
-            <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
+            <div
+                v-if="!isBackButtonHidden"
+                class="col-auto link-col py-1 text-break"
+                :class="[buttonSize ? 'back-centered-below mt-5' : '']">
                 <textLink
                     linkType="navigation"
                     :text="backLink"
@@ -108,6 +117,12 @@ export default {
     .col button {
         width: 100%;
     }
+
+    .back-centered-below {
+        display: flex;
+        justify-content: center;
+    }
+
     @media only screen and (min-width: 340px) {
         .col,
         .col-auto,
@@ -115,6 +130,12 @@ export default {
             width: auto;
             justify-content: flex-end;
         }
+
+        .back-centered-below {
+            display: flex;
+            justify-content: center;
+        }
+
         .btn-primary {
             width: auto;
         }

src/layouts/payment-method/payment-method.vue

@@ -67,6 +67,7 @@
                         ref="navbar"
                         :isForwardActionDisabled="!meta.valid"
                         :isBackButtonHidden="shouldHideBackButton"
+                        buttonSize
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -369,17 +370,10 @@ export default {
             );
         },
         getPaymentMethodFromStore() {
-            const isPia = store.getters.order.payment.isPia;
+            const piaType = store.getters.order.payment.piaType;
+            const isPia = store.getters.order.payment.isPia && !!piaType;
 
-            if (isPia === null || isPia === undefined) {
-                return null;
-            }
-
-            if (isPia) {
-                return store.getters.order.payment.piaType;
-            } else {
-                return paymentMethods.LATER;
-            }
+            return isPia ? piaType : paymentMethods.LATER;
         },
         updateFooterButtonText(newValue) {
             this.$refs.navbar.updateButtonText(newValue);