WIP

src/digital-components/checkbox-question/checkbox-question.vue

@@ -56,6 +56,7 @@ export default {
     .form-check-input {
         border: 1px solid $gray-500;
         border-radius: 2px;
+        min-width: 1rem; // Prevent squish
         &:checked {
             background-size: 125%;
             border: 1px solid $blue;

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

@@ -54,6 +54,13 @@
                             cmsWidgetName="CallOrTextWidget"
                             justifyText="left" />
                         <hr class="my-5" />
+                        <div class="d-flex flex-row checkbox-group">
+                            <checkboxQuestion
+                                class="mb-5 mt-2" />
+                            <textBlock
+                                cmsWidgetName="RecalUnderstandWidget"
+                                justifyText="left" />
+                        </div>
                     </div>
 
                     <paymentMethodQuestion
@@ -76,6 +83,8 @@
                         buttonSize
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 </div>
             </div>
         </div>
@@ -94,6 +103,8 @@ import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-drop
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 import alert from "@/ux-components/alert/alert";
 import textBlock from "@/digital-components/text-block/text-block";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Supporting Items
 import baseMixin from "@/mixins/base-mixin.js";
@@ -131,6 +142,9 @@ defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "paymentMethod",
+    props: {
+        recyclingModalCmsWidgetName: String,
+    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -674,11 +688,19 @@ export default {
         paymentMethodQuestion,
         reviewDropdown,
         textBlock,
+        checkboxQuestion,
+        contentGroupModal,
     },
 };
 </script>
 
 <style lang="scss" scoped>
+.checkbox-group {
+    align-items: start;
+    >* {
+        margin-top: 0;
+    }
+}
 .questions-about-service {
     .service-questions {
         font-weight: $font-weight-bold;