WIP donation component.

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -205,7 +205,7 @@ export default {
             }
         }
     }
-    
+
     .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -219,7 +219,7 @@ export default {
             .textbox-question {
                 padding: 0;
                 margin: 0 0 1.5rem 0;
-                
+
                 label {
                     text-align: left;
                     font-weight: 900;
@@ -258,7 +258,7 @@ export default {
 
     &.progress-saved {
         .modal-footer-button,
-        .modal-disclaimer  {
+        .modal-disclaimer {
             display: none;
         }
         .skip-button {

src/layouts/confirmation/confirmation.vue

@@ -64,10 +64,9 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
-                                <div class="mt-3">
+                            <div class="mt-3">
-                                <donationBlock
+                                <donationBlock cmsWidgetName="DonationWidget" />
-                                    cmsWidgetName="DonationWidget" />
+                            </div>
-                                </div>
 
                             <hr class="mb-5" />
 
@@ -113,7 +112,7 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
 import { containsRecalParts } from "@/helpers/recal-helper.js";
-import donationBlock from "../../fmg-components/donation-block/donation-block.vue";
+import donationBlock from "@/fmg-components/donation-block/donation-block.vue";
 
 export default {
     name: "confirmation",
@@ -122,13 +121,13 @@ export default {
 
         // send part question data to SPS API for logging
         const orderFromStore = await deepClone(store.getters.order);
-        const ctu = orderFromStore.serviceLocation?.zipCodeCtu
+        const ctu = orderFromStore.serviceLocation?.zipCodeCtu;
 
         const partsOrQuestions = orderFromStore.damage?.partQuestionAnswers;
 
-        partsOrQuestions.forEach(pqa => {
+        partsOrQuestions.forEach((pqa) => {
             const payloadPartQuestions = [];
-            pqa.answeredQuestions.forEach(answer => {
+            pqa.answeredQuestions.forEach((answer) => {
                 payloadPartQuestions.push({
                     questionSeq: answer?.questionNum,
                     questionText: answer?.questionText,
@@ -138,24 +137,18 @@ export default {
             });
 
             const payload = {
-            eon: orderFromStore.eon,
+                eon: orderFromStore.eon,
-            ctu: ctu,
+                ctu: ctu,
-            workOrderId: orderFromStore.workOrderId,
+                workOrderId: orderFromStore.workOrderId,
-            workOrderNumber: orderFromStore.workOrderNumber,
+                workOrderNumber: orderFromStore.workOrderNumber,
-            carId: orderFromStore.vehicle.carId,
+                carId: orderFromStore.vehicle.carId,
-            glassLocation: pqa?.glassLocation,
+                glassLocation: pqa?.glassLocation,
-            partQuestions: payloadPartQuestions,
+                partQuestions: payloadPartQuestions,
-        };
+            };
-
-        baseMixin.methods.dispatchStoreAction(
-            storeActions.LOG_PART_QUESTIONS,
-            payload,
-            false
-        );
 
+            baseMixin.methods.dispatchStoreAction(storeActions.LOG_PART_QUESTIONS, payload, false);
         });
 
-
         // Create order
         await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER); // This nulls the Store order
 
@@ -503,7 +496,7 @@ export default {
         addToCalendar,
         cart,
         textBlock,
-        donationBlock
+        donationBlock,
     },
 };
 </script>

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

@@ -37,7 +37,7 @@
                         :isItac="isItac"
                         :isNoComp="isNoComp"
                         :isExpandedOnLoad="false" />
-            
+
                     <hr />
 
                     <div>

src/store/index.js

@@ -1448,16 +1448,7 @@ export const actions = {
 
     logPartQuestions(
         context,
-        {
+        { eon, ctu, workOrderId, workOrderNumber, carId, glassLocation, partQuestions, userAgent }
-            eon,
-            ctu,
-            workOrderId,
-            workOrderNumber,
-            carId,
-            glassLocation,
-            partQuestions,
-            userAgent,
-        }
     ) {
         var payload = {
             applicationName: applicationConfig.APPLICATION_NAME,
@@ -1468,15 +1459,14 @@ export const actions = {
             carId: carId,
             glassLocation: glassLocation,
             partQuestions: partQuestions,
-            userAgent: navigator.userAgent
+            userAgent: navigator.userAgent,
         };
 
-        return globalMethods
+        return globalMethods.callHttpClient({
-            .callHttpClient({
+            method: endpoints.LogPartQuestions.method,
-                method: endpoints.LogPartQuestions.method,
+            endpoint: endpoints.LogPartQuestions.url,
-                endpoint: endpoints.LogPartQuestions.url,
+            payload: payload,
-                payload: payload,
+        });
-            });
     },
 
     // Misc Actions

src/ux-components/button-main/button-main.vue

@@ -156,5 +156,48 @@ export default {
             transition: background 0s 0s ease-in-out;
         }
     }
+    &.btn-success {
+        position: relative;
+        background: $green-100;
+        border: 1px solid $green-400;
+        border-radius: $border-radius-lg;
+        color: $black;
+        font-weight: 500;
+        transition: all 150ms linear;
+        height: 3rem;
+        &:hover {
+            color: $black;
+            background: $green-200;
+        }
+        &:focus, // Mouse, touch, stylus focus
+        &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow:
+                0 0 0 3px $white,
+                0 0 0 5.5px $green-400;
+            color: $black;
+            background: $green-100;
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            @include blue-gradient;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
 }
 </style>