create new save progress components

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -43,6 +43,9 @@
                         :isForwardActionDisabled="!isMetaValid"
                         @back-clicked="handleBackButtonAction"
                         @ForwardClicked="handleForwardButtonAction" />
+
+                    <saveProgressModalQuestion
+                        modalWidgetName="SaveProgressModalWidget" />
                 </div>
             </div>
         </div>
@@ -57,6 +60,7 @@ import questionChain from "@/digital-components/question-chain/question-chain";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 
 export default {
     name: "questions-page",
@@ -99,6 +103,7 @@ export default {
         funnelSubHeader,
         navbar,
         loadingModal,
+        saveProgressModalQuestion,
     },
 };
 </script>

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

@@ -0,0 +1,112 @@
+<template>
+    <div class="save-progress-modal-question">
+        <buttonMain
+            ref="buttonMain"
+            :buttonText="buttonText"
+            loaderColor="white"
+            :suppressLoader="true"
+            @click-event="openModal" />
+        <modal
+            :ref="modalName"
+            :headerText="modalHeaderText"
+            :footerButtonText="modalButtonText"
+            @footer-button-event="saveProgress">
+            <p class="modal-body">{{ modalBodyText }}</p>
+            <saveProgressQuestion
+                ref="saveProgressQuestion"
+                v-model="userInput"
+                cmsWidgetName="SaveProgressQuestionWidget" />
+            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+        </modal>
+    </div>
+</template>
+
+<script>
+import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
+import modal from "@/digital-components/modal/modal";
+import { storeActions } from "@/constants/store-actions.js";
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+    name: "save-progress-modal-question",
+
+    data() {
+        return {
+            userInput: "",
+        };
+    },
+    props: {
+        modelValue: Object,
+        modalWidgetName: String,
+        pageName: String,
+    },
+    computed: {
+        buttonText() {
+            return this.getCmsContent(this.modalWidgetName, "SubheaderText");
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.modalWidgetName, "HeaderText");
+        },
+        modalBodyText() {
+            return this.getCmsContent(this.modalWidgetName, "BodyText");
+        },
+        modalButtonText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText");
+        },
+        modalDisclaimerText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText2");
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+    },
+    methods: {
+        openModal() {
+            this.modal.openModal();
+            this.modal.resetButtonStyle();
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        async saveProgress() {
+            console.log("Saving Progress! userInput is: ", this.userInput);
+
+            // save email address to store
+            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
+
+            // TODO send store call to send to new API (that triggers an email send)
+
+            // TODO hide button trigger and replace with success message
+
+        },
+    },
+
+    components: {
+        modal,
+        buttonMain,
+        saveProgressQuestion,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.applied-promo {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 24px;
+    color: $green;
+
+    .promo-code {
+        text-transform: uppercase;
+    }
+}
+.alert {
+    color: $red;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 24px;
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+    <textboxQuestion
+        ref="saveProgressInputTextQuestion"
+        :cmsWidgetName="cmsWidgetName"
+        v-model="value"
+        inputId="saveProgressUserInput"
+        questionAlignment="center"
+        cornerStyle="rounded"
+        :displayQuestionText="true"
+        isRequired
+        @input="validateEmail"
+        validationRules="email-address-required|email-address-format" />
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+//Supporting Files
+import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// Define Validation Rules
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+
+const EMAIL_REGEX = /[^a-zA-Z0-9_\-.+@]/g;
+
+export default {
+    name: "save-progress-question",
+    props: {
+        modelValue: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
+        validateEmail() {
+            setTimeout(() => {
+                this.value = this.value.replace(EMAIL_REGEX, "");
+            });
+        },
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>