From a3bbe41286fe1a75f8eecb9137e944dac3dda02b Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:41:52 -0700
Subject: [PATCH] refactor: Forms 1124 composition api infolinks (#1473)

* Update GeneralLayout and FormComponentsProactiveHelp

GeneralLayout has been updated to the composition API with almost full coverage, did not add coverage for the HTML
FormComponentsProactiveHelp was updated to the composition API but no coverage was added, it was just confusing deciphering what was happening in the file so it was refactored.

* Update ProactiveHelpDialog

ProactiveHelpDialog updated to the composition API and test coverage has been added excluding FileReader testing and vue watch changes.

* Update ProactiveHelpDialog.vue

awaiting addFCProactiveHelp

* Update ProactiveHelpPreviewDialog

ProactiveHelpPreviewDialog is updated to the composition API and should have coverage excluding the watch variable
---
 .../admin/FormComponentsProactiveHelp.vue     | 224 ++++---------
 .../components/infolinks/GeneralLayout.vue    | 302 +++++++++---------
 .../infolinks/ProactiveHelpDialog.vue         | 265 ++++++++-------
 .../infolinks/ProactiveHelpPreviewDialog.vue  |  57 ++--
 app/frontend/src/utils/constants.js           |  65 ++++
 .../admin/FormComponentsProactiveHelp.spec.js |  25 +-
 .../infolinks/GeneralLayout.spec.js           | 297 +++++++++++++++--
 .../infolinks/ProactiveHelpDialog.spec.js     | 212 +++++++++++-
 .../ProactiveHelpPreviewDialog.spec.js        |  45 ++-
 9 files changed, 963 insertions(+), 529 deletions(-)

diff --git a/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue b/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
index 844c89b78..e424f2922 100644
--- a/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
+++ b/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
@@ -1,172 +1,80 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import GeneralLayout from '~/components/infolinks/GeneralLayout.vue';
 import { useAdminStore } from '~/store/admin';
+import { FormComponentProactiveHelpValues } from '~/utils/constants';
 
-export default {
-  components: {
-    GeneralLayout,
-  },
-  data() {
-    return {
-      layout: {
-        'Basic Layout': [
-          'Text/Images',
-          'Columns - 2',
-          'Columns - 3',
-          'Columns - 4',
-          'Tabs',
-          'Panel',
-        ],
-        'Basic Fields': [
-          'Text Field',
-          'Multi-line Text',
-          'Select List',
-          'Checkbox',
-          'Checkbox Group',
-          'Radio Group',
-          'Number',
-          'Phone Number',
-          'Email',
-          'Date / Time',
-          'Day',
-        ],
-        'Advanced Layout': [
-          'HTML Element',
-          'Content',
-          'Columns',
-          'Field Set',
-          'Panel',
-          'Table',
-          'Tabs',
-          'Well',
-        ],
-        'Advanced Fields': [
-          'Text Field',
-          'Email',
-          'Text Area',
-          'Url',
-          'Number',
-          'Phone Number',
-          'Tags',
-          'Address',
-          'Password',
-          'Date / Time',
-          'Checkbox',
-          'Day',
-          'Time',
-          'Select Boxes',
-          'Select',
-          'Currency',
-          'Radio',
-          'Survey',
-          'Signature',
-        ],
-        'Advanced Data': [
-          'Hidden',
-          'Container',
-          'Data Map',
-          'Data Grid',
-          'Edit Grid',
-          'Tree',
-        ],
-        'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
-      },
-      isPanelOpened: new Map(),
-      groupComponentsList: [],
-    };
-  },
-  computed: {
-    ...mapState(useAdminStore, ['fcProactiveHelp', 'fcProactiveHelpGroupList']),
-    groupList() {
-      return this.extractGroups();
-    },
-  },
-  watch: {
-    fcProactiveHelp() {
-      this.listFCProactiveHelp();
-    },
-  },
-  mounted() {
-    this.listFCProactiveHelp();
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['listFCProactiveHelp']),
-    onExpansionPanelClick(groupName) {
-      if (
-        this.isPanelOpened.get(groupName) === undefined ||
-        !this.isPanelOpened.get(groupName)
-      ) {
-        this.isPanelOpened.set(groupName, true);
-        this.groupComponentsList = this.extractGroupComponents(groupName);
-      } else {
-        this.isPanelOpened.set(groupName, false);
-      }
+const loading = ref(false);
 
-      for (let key of this.isPanelOpened.keys()) {
-        if (key !== groupName) {
-          this.isPanelOpened.set(key, false);
-        }
-      }
-    },
-
-    //extract form builder layout groups.
-    extractGroups() {
-      let allgroups = [];
-      for (let [title] of Object.entries(this.layout)) {
-        if (title) {
-          allgroups.push(title);
-        }
-      }
-      return allgroups;
-    },
-
-    //extract all components in the select group in form builder
-    extractGroupComponents(groupName) {
-      let groupComponents = [];
-      for (let [title, components] of Object.entries(this.layout)) {
-        if (title && title === groupName && components) {
-          for (let componentName of components) {
-            groupComponents.push({ componentName: componentName });
-          }
-        }
+const adminStore = useAdminStore();
+
+const { fcProactiveHelp, fcProactiveHelpGroupList } = storeToRefs(adminStore);
+const formComponentGroupNames = computed(() =>
+  Object.keys(FormComponentProactiveHelpValues).filter((name) => name !== '')
+);
+
+watch(fcProactiveHelp, async () => {
+  await refreshData();
+});
+
+onMounted(async () => {
+  await refreshData();
+});
+
+async function refreshData() {
+  loading.value = true;
+  await adminStore.listFCProactiveHelp();
+  loading.value = false;
+}
+
+//extract all components in the select group in form builder
+function extractGroupComponents(groupName) {
+  let groupComponents = [];
+  for (let [title, components] of Object.entries(
+    FormComponentProactiveHelpValues
+  )) {
+    if (title && title === groupName && components) {
+      for (let componentName of components) {
+        groupComponents.push({ componentName: componentName });
       }
-      return groupComponents;
-    },
-  },
-};
+    }
+  }
+  return groupComponents;
+}
 </script>
 
 <template>
   <div class="mt-5">
-    <v-expansion-panels
-      class="nrmc-expand-collapse"
-      data-cy="info_link_expansion_panels"
-    >
-      <v-expansion-panel
-        v-for="(groupName, index) in groupList"
-        :key="index"
-        @click="onExpansionPanelClick(groupName)"
+    <v-skeleton-loader :loading="loading">
+      <v-expansion-panels
+        class="nrmc-expand-collapse"
+        data-cy="info_link_expansion_panels"
       >
-        <v-expansion-panel-title>
-          <div class="header">
-            <strong>{{ groupName }}</strong>
-          </div>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <GeneralLayout
-            :group-name="groupName"
-            :layout-list="groupComponentsList"
-            :components-list="
-              fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
-                ? fcProactiveHelpGroupList[groupName]
-                : []
-            "
-          />
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
+        <v-expansion-panel
+          v-for="(groupName, index) in formComponentGroupNames"
+          :key="index"
+        >
+          <v-expansion-panel-title>
+            <div class="header">
+              <strong>{{ groupName }}</strong>
+            </div>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <GeneralLayout
+              :group-name="groupName"
+              :form-component-names="extractGroupComponents(groupName)"
+              :form-component-data="
+                fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
+                  ? fcProactiveHelpGroupList[groupName]
+                  : []
+              "
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-skeleton-loader>
   </div>
 </template>
 
diff --git a/app/frontend/src/components/infolinks/GeneralLayout.vue b/app/frontend/src/components/infolinks/GeneralLayout.vue
index 10284a5f4..002279cd9 100644
--- a/app/frontend/src/components/infolinks/GeneralLayout.vue
+++ b/app/frontend/src/components/infolinks/GeneralLayout.vue
@@ -1,138 +1,144 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref } from 'vue';
 
 import ProactiveHelpDialog from '~/components/infolinks/ProactiveHelpDialog.vue';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
 import { useFormStore } from '~/store/form';
 import { useAdminStore } from '~/store/admin';
 
-export default {
-  components: {
-    ProactiveHelpDialog,
-    ProactiveHelpPreviewDialog,
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const properties = defineProps({
+  // This is a list of the components that exist in this grouping
+  formComponentNames: {
+    type: Array,
+    required: true,
   },
-  props: {
-    layoutList: {
-      type: Array,
-      required: true,
-    },
-    componentsList: {
-      type: Array,
-      default: () => [],
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
+  // This is the actual component data
+  formComponentData: {
+    type: Array,
+    default: () => [],
   },
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
-
-    return { t, locale };
+  groupName: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      component: {},
-      componentName: '',
-      loading: false,
-      publish: [],
-      publishStatus: 'UNPUBLISHED',
-      showDialog: false,
-      showPreviewDialog: false,
-    };
+});
+
+const component = ref({});
+const loading = ref(false);
+const publish = ref([]);
+const showEditProactiveHelpDialog = ref(false);
+const showPreviewDialog = ref(false);
+
+const adminStore = useAdminStore();
+const formStore = useFormStore();
+
+const { fcProactiveHelpImageUrl } = storeToRefs(adminStore);
+const { isRTL } = storeToRefs(formStore);
+
+const headers = computed(() => [
+  {
+    title: t('trans.generalLayout.formTitle'),
+    align: 'start',
+    key: 'componentName',
+    width: '1%',
   },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-    ...mapState(useAdminStore, ['fcProactiveHelpImageUrl']),
-    headers() {
-      return [
-        {
-          title: this.$t('trans.generalLayout.formTitle'),
-          align: 'start',
-          key: 'componentName',
-          width: '1%',
-        },
-        {
-          title: this.$t('trans.generalLayout.actions'),
-          align: 'end',
-          key: 'actions',
-          filterable: false,
-          sortable: false,
-          width: '1%',
-        },
-      ];
-    },
+  {
+    title: t('trans.generalLayout.actions'),
+    align: 'end',
+    key: 'actions',
+    filterable: false,
+    sortable: false,
+    width: '1%',
   },
-  mounted() {
-    let idx = 0;
-    for (let layoutItem of this.layoutList) {
-      for (let component of this.componentsList) {
-        if (component.componentName === layoutItem.componentName) {
-          this.publish[idx] = component.status;
-        }
+]);
+
+onMounted(() => {
+  for (let [
+    idx,
+    formComponentName,
+  ] of properties.formComponentNames.entries()) {
+    for (let formComponentData of properties.formComponentData) {
+      if (formComponentData.componentName === formComponentName.componentName) {
+        publish.value[idx] = formComponentData.status;
       }
-      idx++;
     }
-  },
-  methods: {
-    ...mapActions(useAdminStore, [
-      'getFCProactiveHelpImageUrl',
-      'updateFCProactiveHelpStatus',
-    ]),
-    //used to open form component help information dialog
-    onDialog() {
-      this.showDialog = !this.showDialog;
-    },
+  }
+});
 
-    //used to open form component help information preview dialog
-    onPreviewDialog() {
-      this.showPreviewDialog = !this.showPreviewDialog;
-    },
+// Toggles the visibility of the edit proactive help dialog
+function toggleEditProactiveHelpDialog() {
+  showEditProactiveHelpDialog.value = !showEditProactiveHelpDialog.value;
+}
 
-    canDisabled(compName) {
-      return (
-        this.componentsList.filter(
-          (component) => component.componentName === compName
-        ).length == 0
-      );
-    },
+// Should preview the proactive help dialog
+function togglePreviewDialog() {
+  showPreviewDialog.value = !showPreviewDialog.value;
+}
 
-    onOpenDialog(compName) {
-      this.getComponent(compName);
-      this.onDialog();
-    },
+function isPreviewEnabled(compName) {
+  return (
+    properties.formComponentData.filter((component) => {
+      return component.componentName === compName;
+    }).length == 0
+  );
+}
 
-    async onOpenPreviewDialog(compName) {
-      const item = this.componentsList.find(
-        (item) => item.componentName === compName
-      );
-      await this.getFCProactiveHelpImageUrl(item.id);
-      this.getComponent(item.componentName);
-      this.onPreviewDialog();
-    },
+function onOpenEditDialog(compName) {
+  setComponent(compName);
+  toggleEditProactiveHelpDialog();
+}
 
-    getComponent(compName) {
-      if (compName) {
-        this.componentName = compName;
-        this.component = this.componentsList.find((obj) => {
-          return obj.componentName === this.componentName;
-        });
-      }
-    },
+async function onOpenPreviewDialog(compName) {
+  loading.value = true;
+  const item = properties.formComponentData.find(
+    (item) => item.componentName === compName
+  );
+  await adminStore.getFCProactiveHelpImageUrl(item.id);
+  setComponent(item.componentName);
+  togglePreviewDialog();
+  loading.value = false;
+}
 
-    onSwitchChange(compName, index) {
-      for (const comp of this.componentsList) {
-        if (comp.componentName === compName) {
-          this.updateFCProactiveHelpStatus({
-            componentId: comp.id,
-            publishStatus: this.publish[index],
-          });
-        }
-      }
-    },
-  },
-};
+/*
+ * Sets the component data for the dialogs to use.
+ *
+ * @param compName The name of the component
+ */
+function setComponent(compName) {
+  if (compName) {
+    component.value = properties.formComponentData.find((obj) => {
+      return obj.componentName === compName;
+    });
+  }
+}
+
+async function onSwitchChange(compName, index) {
+  loading.value = true;
+  for (const comp of properties.formComponentData) {
+    if (comp.componentName === compName) {
+      await adminStore.updateFCProactiveHelpStatus({
+        componentId: comp.id,
+        publishStatus: publish.value[index],
+      });
+    }
+  }
+  loading.value = false;
+}
+
+defineExpose({
+  component,
+  isPreviewEnabled,
+  onOpenEditDialog,
+  onOpenPreviewDialog,
+  onSwitchChange,
+  publish,
+  showEditProactiveHelpDialog,
+  toggleEditProactiveHelpDialog,
+});
 </script>
 
 <template>
@@ -143,7 +149,7 @@ export default {
       hide-default-header
       hide-default-footer
       disable-pagination
-      :items="layoutList"
+      :items="formComponentNames"
       :loading="loading"
       :loading-text="$t('trans.generalLayout.loadingText')"
       :lang="locale"
@@ -164,7 +170,7 @@ export default {
               size="small"
               variant="text"
               :title="$t('trans.generalLayout.edit')"
-              @click="onOpenDialog(item.componentName)"
+              @click="onOpenEditDialog(item.componentName)"
             >
               <v-icon icon="mdi:mdi-pencil-box-outline"></v-icon>
               <span
@@ -181,7 +187,7 @@ export default {
               color="primary"
               variant="text"
               size="small"
-              :disabled="canDisabled(item.componentName)"
+              :disabled="isPreviewEnabled(item.componentName)"
               :title="$t('trans.generalLayout.preview')"
               @click="onOpenPreviewDialog(item.componentName)"
             >
@@ -195,55 +201,45 @@ export default {
             </v-btn>
           </div>
           <div>
-            <v-btn
-              data-cy="status_button"
-              color="primary"
-              variant="text"
-              size="small"
-              :title="
-                publish[index]
-                  ? $t('trans.generalLayout.published')
-                  : $t('trans.generalLayout.unpublished')
-              "
-              :disabled="canDisabled(item.componentName)"
+            <v-switch
+              v-model="publish[index]"
+              :class="{ 'dir-ltl': isRTL }"
+              density="compact"
+              hide-details
+              color="success"
+              @update:model-value="onSwitchChange(item.componentName, index)"
             >
-              <v-switch
-                v-model="publish[index]"
-                :class="{ 'dir-ltl': isRTL }"
-                density="compact"
-                hide-details
-                color="success"
-                @update:model-value="onSwitchChange(item.componentName, index)"
-              ></v-switch>
-              <span
-                style="width: 120px !important; font-size: 16px"
-                class="d-none d-sm-flex"
-                :lang="locale"
-                >{{
-                  publish[index]
-                    ? $t('trans.generalLayout.published')
-                    : $t('trans.generalLayout.unpublished')
-                }}</span
-              >
-            </v-btn>
+              <template #label>
+                <span
+                  style="width: 120px !important; font-size: 16px"
+                  class="d-none d-sm-flex"
+                  :lang="locale"
+                  >{{
+                    publish[index]
+                      ? $t('trans.generalLayout.published')
+                      : $t('trans.generalLayout.unpublished')
+                  }}</span
+                >
+              </template>
+            </v-switch>
           </div>
         </div>
       </template>
     </v-data-table>
     <ProactiveHelpDialog
-      v-if="showDialog"
-      :show-dialog="showDialog"
+      v-if="showEditProactiveHelpDialog"
+      :show-dialog="showEditProactiveHelpDialog"
       :group-name="groupName"
-      :component-name="componentName"
+      :component-name="component.componentName"
       :component="component"
-      @close-dialog="onDialog"
+      @close-dialog="toggleEditProactiveHelpDialog"
     />
     <ProactiveHelpPreviewDialog
       v-if="showPreviewDialog"
       :show-dialog="showPreviewDialog"
       :fc-proactive-help-image-url="fcProactiveHelpImageUrl"
       :component="component"
-      @close-dialog="onPreviewDialog"
+      @close-dialog="togglePreviewDialog"
     />
   </div>
 </template>
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
index 99b54a85b..3aff3a9d8 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
@@ -1,131 +1,154 @@
-<script>
-import { mapState, mapActions } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
-export default {
-  props: {
-    showDialog: { type: Boolean, required: true },
-    component: { type: Object, default: () => {} },
-    componentName: { type: String, require: true, default: '' },
-    groupName: { type: String, required: true },
-  },
-  emits: ['close-dialog'],
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const properties = defineProps({
+  showDialog: { type: Boolean, required: true },
+  component: { type: Object, default: () => {} },
+  componentName: { type: String, require: true, default: '' },
+  groupName: { type: String, required: true },
+});
+
+const emit = defineEmits(['close-dialog']);
 
-    return { t, locale };
+const adminStore = useAdminStore();
+const formStore = useFormStore();
+
+const { isRTL } = storeToRefs(formStore);
+
+const componentId = ref(
+  properties.component?.id ? properties.component.id : undefined
+);
+const componentName = ref(
+  properties.component?.componentName
+    ? properties.component.componentName
+    : properties.componentName
+);
+const description = ref(
+  properties.component?.description ? properties.component.description : ''
+);
+const dialog = ref(properties.showDialog);
+const files = ref([]);
+const isLinkEnabled = ref(
+  properties.component?.isLinkEnabled ? properties.component.isLinkEnabled : ''
+);
+const image = ref('');
+const imageSizeError = ref(false);
+const imageName = ref(
+  properties.component?.imageName ? properties.component.imageName : ''
+);
+const imagePlaceholder = ref(
+  properties.component?.imageName ? properties.component.imageName : undefined
+);
+const linkError = ref(false);
+const moreHelpInfoLink = ref(
+  properties.component?.externalLink ? properties.component.externalLink : ''
+);
+const rules = ref([
+  (value) => {
+    return (
+      !value ||
+      !value.length ||
+      value[0].size < 500000 ||
+      t('trans.proactiveHelpDialog.largeImgTxt')
+    );
   },
-  data() {
-    return {
-      componentId: this?.component?.id ? this.component.id : undefined,
-      componentName_: this?.component?.componentName
-        ? this.component.componentName
-        : this.componentName,
-      description: this?.component?.description
-        ? this.component.description
-        : '',
-      dialog: this.showDialog,
-      files: [],
-      isLinkEnabled: this?.component?.isLinkEnabled
-        ? this.component.isLinkEnabled
-        : '',
-      image: '',
-      imageSizeError: false,
-      imageName: this?.component?.imageName ? this.component.imageName : '',
-      imagePlaceholder: this?.component?.imageName
-        ? this.component.imageName
-        : undefined,
-      linkError: false,
-      moreHelpInfoLink: this?.component?.externalLink
-        ? this.component.externalLink
-        : '',
-      rules: [
-        (value) => {
-          return (
-            !value ||
-            !value.length ||
-            value[0].size < 500000 ||
-            this.$t('trans.proactiveHelpDialog.largeImgTxt')
-          );
-        },
-      ],
+]);
+
+watch(
+  () => properties.showDialog,
+  (value) => {
+    dialog.value = value;
+  }
+);
+
+watch(componentName, (value) => {
+  componentName.value = value;
+});
+
+function onCloseDialog() {
+  resetDialog();
+  emit('close-dialog');
+}
+
+function validateLinkUrl() {
+  let error = false;
+  linkError.value = false;
+  if (isLinkEnabled.value && moreHelpInfoLink.value === '') {
+    error = true;
+    linkError.value = true;
+  }
+  return error;
+}
+
+async function selectImage() {
+  imageSizeError.value = false;
+  const img = files.value[0];
+  if (img.size > 500000) {
+    imageSizeError.value = true;
+  } else {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      image.value = e.target.result;
+      imageName.value = img.name;
     };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-  },
-  watch: {
-    showDialog(value) {
-      this.dialog = value;
-    },
-    componentName_(value) {
-      this.componentName_ = value;
-    },
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['addFCProactiveHelp']),
-    onCloseDialog() {
-      this.resetDialog();
-      this.$emit('close-dialog');
-    },
-    validateLinkUrl() {
-      let error = false;
-      this.linkError = false;
-      if (this.isLinkEnabled && this.moreHelpInfoLink === '') {
-        error = true;
-        this.linkError = true;
-      }
-      return error;
-    },
-    async selectImage() {
-      const img = this.files[0];
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        this.image = e.target.result;
-        this.imageName = img.name;
-      };
-      if (img) {
-        await reader.readAsDataURL(img);
-      }
-    },
-    submit() {
-      if (!this.validateLinkUrl()) {
-        this.imageName = this.image !== '' ? this.imageName : '';
-        this.moreHelpInfoLink = !this.isLinkEnabled
-          ? ''
-          : this.moreHelpInfoLink;
-        this.addFCProactiveHelp({
-          componentId: this.componentId,
-          componentName: this.componentName_,
-          image: this.image,
-          externalLink: this.moreHelpInfoLink,
-          groupName: this.groupName,
-          description: this.description,
-          status:
-            this.component && this.component.status
-              ? this.component.status
-              : false,
-          isLinkEnabled: this.isLinkEnabled,
-          imageName: this.imageName,
-        });
-        this.onCloseDialog();
-      }
-    },
-    resetDialog() {
-      this.componentName_ = '';
-      this.moreHelpInfoLink = '';
-      this.isLinkEnabled = false;
-      this.image = '';
-      this.imageName = '';
-      this.imagePlaceholder = undefined;
-      this.linkError = false;
-      this.description = '';
-    },
-  },
-};
+    if (img) {
+      await reader.readAsDataURL(img);
+    }
+  }
+}
+
+async function submit() {
+  if (!validateLinkUrl()) {
+    imageName.value = image.value !== '' ? imageName.value : '';
+    moreHelpInfoLink.value = !isLinkEnabled.value ? '' : moreHelpInfoLink.value;
+    await adminStore.addFCProactiveHelp({
+      componentId: componentId.value,
+      componentName: componentName.value,
+      image: image.value,
+      externalLink: moreHelpInfoLink.value,
+      groupName: properties.groupName,
+      description: description.value,
+      status:
+        properties.component && properties.component.status
+          ? properties.component.status
+          : false,
+      isLinkEnabled: isLinkEnabled.value,
+      imageName: imageName.value,
+    });
+    onCloseDialog();
+  }
+}
+
+function resetDialog() {
+  componentName.value = '';
+  moreHelpInfoLink.value = '';
+  isLinkEnabled.value = false;
+  image.value = '';
+  imageName.value = '';
+  imagePlaceholder.value = undefined;
+  linkError.value = false;
+  description.value = '';
+}
+
+defineExpose({
+  files,
+  imageSizeError,
+  isLinkEnabled,
+  linkError,
+  moreHelpInfoLink,
+  onCloseDialog,
+  resetDialog,
+  rules,
+  selectImage,
+  validateLinkUrl,
+});
 </script>
 
 <template>
@@ -173,7 +196,7 @@ export default {
             >
               {{ $t('trans.proactiveHelpDialog.componentName') }}
             </span>
-            <span class="blueColorWrapper" v-text="componentName_" />
+            <span class="blueColorWrapper" v-text="componentName" />
           </v-row>
           <v-row class="mt-1" no-gutters>
             <v-col>
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
index dc66afe6d..ded3203ff 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
@@ -1,40 +1,31 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 
-import { useFormStore } from '~/store/form';
+const { locale } = useI18n({ useScope: 'global' });
 
-export default {
-  props: {
-    showDialog: { type: Boolean, required: true },
-    component: { type: Object, default: () => {} },
-    fcProactiveHelpImageUrl: undefined,
-  },
-  emits: ['close-dialog'],
-  setup() {
-    const { locale } = useI18n({ useScope: 'global' });
+const properties = defineProps({
+  showDialog: { type: Boolean, required: true },
+  component: { type: Object, default: () => {} },
+  fcProactiveHelpImageUrl: undefined,
+});
 
-    return { locale };
-  },
-  data() {
-    return {
-      dialog: this.showDialog,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-  },
-  watch: {
-    showDialog(value) {
-      this.dialog = value;
-    },
-  },
-  methods: {
-    onCloseDialog() {
-      this.$emit('close-dialog');
-    },
-  },
-};
+const emit = defineEmits(['close-dialog']);
+
+const dialog = ref(properties.showDialog);
+
+watch(
+  () => properties.showDialog,
+  (value) => {
+    dialog.value = value;
+  }
+);
+
+function onCloseDialog() {
+  emit('close-dialog');
+}
+
+defineExpose({ onCloseDialog });
 </script>
 
 <template>
diff --git a/app/frontend/src/utils/constants.js b/app/frontend/src/utils/constants.js
index 83efe0333..f55b8e7e5 100755
--- a/app/frontend/src/utils/constants.js
+++ b/app/frontend/src/utils/constants.js
@@ -172,3 +172,68 @@ export const ExportLargeData = Object.freeze({
   MAX_RECORDS: 300, // Maximum number of submissions after that we gonna upload the export to Cloud and send user a download link via email
   MAX_FIELDS: 30, // Maximum number of fields in a form after that we gonna upload the export to Cloud and send user a download link via email
 });
+
+/** Constants for the form components proactive help */
+export const FormComponentProactiveHelpValues = Object.freeze({
+  'Basic Layout': [
+    'Text/Images',
+    'Columns - 2',
+    'Columns - 3',
+    'Columns - 4',
+    'Tabs',
+    'Panel',
+  ],
+  'Basic Fields': [
+    'Text Field',
+    'Multi-line Text',
+    'Select List',
+    'Checkbox',
+    'Checkbox Group',
+    'Radio Group',
+    'Number',
+    'Phone Number',
+    'Email',
+    'Date / Time',
+    'Day',
+  ],
+  'Advanced Layout': [
+    'HTML Element',
+    'Content',
+    'Columns',
+    'Field Set',
+    'Panel',
+    'Table',
+    'Tabs',
+    'Well',
+  ],
+  'Advanced Fields': [
+    'Text Field',
+    'Email',
+    'Text Area',
+    'Url',
+    'Number',
+    'Phone Number',
+    'Tags',
+    'Address',
+    'Password',
+    'Date / Time',
+    'Checkbox',
+    'Day',
+    'Time',
+    'Select Boxes',
+    'Select',
+    'Currency',
+    'Radio',
+    'Survey',
+    'Signature',
+  ],
+  'Advanced Data': [
+    'Hidden',
+    'Container',
+    'Data Map',
+    'Data Grid',
+    'Edit Grid',
+    'Tree',
+  ],
+  'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
+});
diff --git a/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js b/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
index 8a6c095e9..fefcc1482 100644
--- a/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
+++ b/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
@@ -1,23 +1,25 @@
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { expect, vi } from 'vitest';
 
 import FormComponentsProactiveHelp from '~/components/admin/FormComponentsProactiveHelp.vue';
+import { useAdminStore } from '~/store/admin';
+import { FormComponentProactiveHelpValues } from '~/utils/constants';
 
 describe('Dashboard.vue', () => {
   const pinia = createTestingPinia();
   setActivePinia(pinia);
-  const extractGroupComponentsSpy = vi.spyOn(
-    FormComponentsProactiveHelp.methods,
-    'extractGroupComponents'
-  );
+  const adminStore = useAdminStore(pinia);
+  const listFCProactiveHelpSpy = vi.spyOn(adminStore, 'listFCProactiveHelp');
+  listFCProactiveHelpSpy.mockImplementation(() => {});
   beforeEach(() => {
-    extractGroupComponentsSpy.mockReset();
+    adminStore.$reset();
+    listFCProactiveHelpSpy.mockReset();
   });
 
   afterAll(() => {
-    extractGroupComponentsSpy.mockRestore();
+    listFCProactiveHelpSpy.mockRestore();
   });
 
   it('renders', async () => {
@@ -30,7 +32,12 @@ describe('Dashboard.vue', () => {
       },
     });
 
-    wrapper.vm.onExpansionPanelClick('Basic Layout');
-    expect(extractGroupComponentsSpy).toHaveBeenCalledTimes(1);
+    await flushPromises();
+
+    expect(listFCProactiveHelpSpy).toHaveBeenCalledTimes(1);
+
+    for (let [title] of Object.entries(FormComponentProactiveHelpValues)) {
+      expect(wrapper.html()).toContain(title);
+    }
   });
 });
diff --git a/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js b/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
index 1b4112791..8f7dad40f 100644
--- a/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
@@ -1,17 +1,20 @@
 // @vitest-environment happy-dom
 // happy-dom is required to access window.location
 
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
-import { expect, vi } from 'vitest';
+import { beforeEach, expect, vi } from 'vitest';
 
 import getRouter from '~/router';
 import GeneralLayout from '~/components/infolinks/GeneralLayout.vue';
+import { useAdminStore } from '~/store/admin';
+import { faL } from '@fortawesome/free-solid-svg-icons';
 
 describe('GeneralLayout.vue', () => {
   const pinia = createTestingPinia();
+  const adminStore = useAdminStore(pinia);
   const router = createRouter({
     history: createWebHistory(),
     routes: getRouter().getRoutes(),
@@ -19,18 +22,29 @@ describe('GeneralLayout.vue', () => {
 
   setActivePinia(pinia);
 
-  it('onOpenDialog()', async () => {
-    const getComponentSpy = vi.spyOn(GeneralLayout.methods, 'getComponent');
-    const onDialogSpy = vi.spyOn(GeneralLayout.methods, 'onDialog');
+  beforeEach(() => {
+    adminStore.$reset();
+  });
+
+  it('renders', async () => {
     const wrapper = mount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -42,21 +56,32 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onOpenDialog('Text Field');
-    //expect(getComponentSpy).toHaveBeenCalledTimes(1);
-    //expect(onDialogSpy).toHaveBeenCalledTimes(1);
+
+    await flushPromises();
+
+    expect(wrapper.html()).toContain('Text/Images');
+    expect(wrapper.html()).toContain('Columns - 2');
   });
 
-  it('onPreviewDialog()', async () => {
-    const wrapper = mount(GeneralLayout, {
+  it('toggleProactiveHelpDialog should toggle the boolean for showProactiveHelpDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -68,20 +93,102 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onPreviewDialog();
-    //expect(wrapper.vm.showPreviewDialog).toBe(true);
+
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeFalsy();
+    wrapper.vm.toggleEditProactiveHelpDialog();
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeTruthy();
   });
 
-  it('onDialog()', async () => {
-    const wrapper = mount(GeneralLayout, {
+  it('togglePreviewDialog should toggle the boolean for showPreviewDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    expect(wrapper.vm.showPreviewDialog).toBeFalsy();
+    wrapper.vm.togglePreviewDialog();
+    expect(wrapper.vm.showPreviewDialog).toBeTruthy();
+  });
+
+  it('isPreviewEnabled takes a component name and returns true if an admin has previously set data for a form component proactive help and false otherwise', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    expect(wrapper.vm.isPreviewEnabled('Text/Images')).toBeFalsy();
+    expect(wrapper.vm.isPreviewEnabled('Columns - 2')).toBeTruthy();
+  });
+
+  it('onOpenEditDialog should set the component data and toggle the boolean for showProactiveHelpDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -93,7 +200,129 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onDialog();
-    //expect(wrapper.vm.showDialog).toBe(true);
+
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeFalsy();
+    expect(wrapper.vm.component).toEqual({});
+    wrapper.vm.onOpenEditDialog('Text/Images');
+    expect(wrapper.vm.component).toEqual({
+      componentName: 'Text/Images',
+      description:
+        'See Also: Content component and HTML Element component in the "advanced layout" section',
+      externalLink: 'http://link.com',
+      groupName: 'Basic Layout',
+      id: '123-456',
+      imageName: 'image.jpeg',
+      isLinkEnabled: true,
+      status: true,
+    });
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeTruthy();
+  });
+
+  it('onOpenPreviewDialog should get the image URL, set the component data and toggle the boolean for showPreviewDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    const getFCProactiveHelpImageUrlSpy = vi.spyOn(
+      adminStore,
+      'getFCProactiveHelpImageUrl'
+    );
+    getFCProactiveHelpImageUrlSpy.mockImplementation(() => {});
+
+    expect(wrapper.vm.showPreviewDialog).toBeFalsy();
+    expect(wrapper.vm.component).toEqual({});
+    await wrapper.vm.onOpenPreviewDialog('Text/Images');
+    expect(getFCProactiveHelpImageUrlSpy).toBeCalledTimes(1);
+    expect(getFCProactiveHelpImageUrlSpy).toBeCalledWith('123-456');
+    expect(wrapper.vm.component).toEqual({
+      componentName: 'Text/Images',
+      description:
+        'See Also: Content component and HTML Element component in the "advanced layout" section',
+      externalLink: 'http://link.com',
+      groupName: 'Basic Layout',
+      id: '123-456',
+      imageName: 'image.jpeg',
+      isLinkEnabled: true,
+      status: true,
+    });
+    expect(wrapper.vm.showPreviewDialog).toBeTruthy();
+  });
+
+  it('onSwitchChange will set the published status for a component based on the switch value', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    const updateFCProactiveHelpStatusSpy = vi.spyOn(
+      adminStore,
+      'updateFCProactiveHelpStatus'
+    );
+    updateFCProactiveHelpStatusSpy.mockImplementation(() => {});
+    await wrapper.vm.onSwitchChange('Text/Images', 0);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledTimes(1);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledWith({
+      componentId: '123-456',
+      publishStatus: true,
+    });
+    wrapper.vm.publish[0] = false;
+    updateFCProactiveHelpStatusSpy.mockReset();
+    await wrapper.vm.onSwitchChange('Text/Images', 0);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledTimes(1);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledWith({
+      componentId: '123-456',
+      publishStatus: false,
+    });
   });
 });
diff --git a/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js b/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
index d64797a30..15b24e2f0 100644
--- a/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
@@ -1,18 +1,55 @@
 // @vitest-environment happy-dom
 // happy-dom is required to access window.location
 
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
 import { expect, vi } from 'vitest';
-import { nextTick } from 'vue';
 
 import getRouter from '~/router';
 import ProactiveHelpDialog from '~/components/infolinks/ProactiveHelpDialog.vue';
+import { useAdminStore } from '~/store/admin';
+
+const STUBS = {
+  VRow: {
+    template: '<div class="v-row-stub"><slot /></div>',
+  },
+  VCol: {
+    template: '<div class="v-col-stub"><slot /></div>',
+  },
+  VDialog: {
+    template: '<div class="v-dialog-stub"><slot /></div>',
+  },
+  VCard: {
+    template: '<div class="v-card-stub"><slot /></div>',
+  },
+  VContainer: {
+    template: '<div class="v-container-stub"><slot /></div>',
+  },
+  VTextField: {
+    template: '<div class="v-text-field-stub"><slot /></div>',
+  },
+  VCheckbox: {
+    template: '<div class="v-checkbox-stub"><slot /></div>',
+  },
+  VTextArea: {
+    template: '<div class="v-text-area-stub"><slot /></div>',
+  },
+  VIcon: {
+    template: '<div class="v-icon-stub"><slot /></div>',
+  },
+  VFileInput: {
+    template: '<div class="v-file-input-stub"><slot /></div>',
+  },
+  VBtn: {
+    template: '<div class="v-btn-stub"><slot /></div>',
+  },
+};
 
 describe('ProactiveHelpDialog.vue', () => {
   const pinia = createTestingPinia();
+  const adminStore = useAdminStore(pinia);
   const router = createRouter({
     history: createWebHistory(),
     routes: getRouter().getRoutes(),
@@ -20,8 +57,176 @@ describe('ProactiveHelpDialog.vue', () => {
 
   setActivePinia(pinia);
 
-  it('resetDialog', async () => {
+  it('renders', async () => {
     const wrapper = mount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        componentName: 'content',
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.html()).toContain('content');
+  });
+
+  it('rules should return largeImgTxt if it fails', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    expect(wrapper.vm.rules[0]([{ size: 5000000 }])).toEqual(
+      'trans.proactiveHelpDialog.largeImgTxt'
+    );
+  });
+
+  it('onCloseDialog should call resetDialog and emit close-dialog', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    wrapper.vm.onCloseDialog();
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
+
+  it('validateLinkUrl should return true and set linkError to true if isLinkEnabled and moreHelpInfoLink is blank otherwise false', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    expect(wrapper.vm.validateLinkUrl()).toBeFalsy();
+    expect(wrapper.vm.linkError).toBeFalsy();
+    wrapper.vm.isLinkEnabled = true;
+    wrapper.vm.moreHelpInfoLink = '';
+    expect(wrapper.vm.validateLinkUrl()).toBeTruthy();
+    expect(wrapper.vm.linkError).toBeTruthy();
+  });
+
+  it('selectImage will set imageSizeError to true if the image size is too large', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    wrapper.vm.files = [{ size: 50000000 }];
+    await wrapper.vm.selectImage();
+    expect(wrapper.vm.imageSizeError).toBeTruthy();
+  });
+
+  it('selectImage will set imageSizeError to true if the image size is too large', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    window.FileReader = function () {
+      this.readAsDataURL = vi.fn();
+      this.onerror = null;
+    };
+
+    wrapper.vm.files = [{ size: 1 }];
+
+    await wrapper.vm.selectImage();
+    expect(wrapper.vm.imageSizeError).toBeFalsy();
+  });
+
+  it('submit will call addFCProactiveHelp then emit close-dialog', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    const addFCProactiveHelpSpy = vi.spyOn(adminStore, 'addFCProactiveHelp');
+    addFCProactiveHelpSpy.mockImplementation(() => {});
+
+    await wrapper.vm.submit();
+
+    expect(addFCProactiveHelpSpy).toBeCalledTimes(1);
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
+
+  it('resetDialog', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
       props: {
         component: {
           componentName: 'content',
@@ -38,7 +243,6 @@ describe('ProactiveHelpDialog.vue', () => {
     });
 
     wrapper.vm.resetDialog();
-    await nextTick();
     expect(wrapper.vm.description).toBe('');
   });
 });
diff --git a/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js b/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
index 1eb4add91..c82038574 100644
--- a/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
@@ -1,16 +1,13 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
-import { beforeEach, expect, vi } from 'vitest';
+import { expect } from 'vitest';
 
-import { rbacService } from '~/services';
 import getRouter from '~/router';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
-import { useFormStore } from '~/store/form';
 
 describe('ProactiveHelpPreviewDialog.vue', () => {
-  const getSubmissionUsersSpy = vi.spyOn(rbacService, 'getSubmissionUsers');
   const pinia = createTestingPinia();
   const router = createRouter({
     history: createWebHistory(),
@@ -18,20 +15,8 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
   });
 
   setActivePinia(pinia);
-  const formStore = useFormStore(pinia);
-
-  beforeEach(() => {
-    getSubmissionUsersSpy.mockReset();
-    formStore.$reset();
-  });
-
-  afterAll(() => {
-    getSubmissionUsersSpy.mockRestore();
-  });
 
   it('renders', () => {
-    formStore.form.name = 'myForm';
-    getSubmissionUsersSpy.mockImplementation(() => ({ data: [] }));
     const wrapper = mount(ProactiveHelpPreviewDialog, {
       props: {
         component: {
@@ -55,4 +40,30 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
 
     expect(wrapper.text()).toContain('content').toContain('dump description');
   });
+
+  it('onCloseDialog should emit close-dialog', () => {
+    const wrapper = shallowMount(ProactiveHelpPreviewDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump description',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          VDialog: {
+            name: 'VDialog',
+            template: '<div class="v-dialog-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.onCloseDialog();
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
 });