From 247de9ccca38bb41375306120af2f1f65813388b Mon Sep 17 00:00:00 2001
From: usingtechnology <39388115+usingtechnology@users.noreply.github.com>
Date: Tue, 8 Oct 2024 09:50:57 -0700
Subject: [PATCH 1/4] FORMS-1325: Update Ext API Tech docs link (#1513)

Signed-off-by: Jason Sherman <tools@usingtechnolo.gy>
---
 app/frontend/src/components/forms/manage/ExternalAPIs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/frontend/src/components/forms/manage/ExternalAPIs.vue b/app/frontend/src/components/forms/manage/ExternalAPIs.vue
index 93d4da611..b63997fca 100644
--- a/app/frontend/src/components/forms/manage/ExternalAPIs.vue
+++ b/app/frontend/src/components/forms/manage/ExternalAPIs.vue
@@ -25,7 +25,7 @@ export default {
       externalAPIStatusCodes: [],
       items: [],
       techdocsLink:
-        'https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities',
+        'https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Integrations/Calling-External-API/',
       editDialog: {
         title: '',
         item: {

From edb95e5f985406cc83489ec1975c2d520c2fa940 Mon Sep 17 00:00:00 2001
From: Walter Moar <Walter.Moar@gov.bc.ca>
Date: Wed, 9 Oct 2024 08:12:36 -0700
Subject: [PATCH 2/4] fix: FORMS-1303 rate limit file, form, submission (#1511)

Applying API rate limiting to all the routes under /file, /form, and /submission. Previously the rate limiting was only applied to routes that allowed API Key access.
---
 app/src/forms/file/routes.js                  |  3 +-
 app/src/forms/form/routes.js                  | 53 ++++++++++---------
 app/src/forms/submission/routes.js            | 11 ++--
 app/tests/unit/forms/file/routes.spec.js      |  4 +-
 app/tests/unit/forms/form/routes.spec.js      | 26 ++++-----
 .../unit/forms/submission/routes.spec.js      | 20 +++----
 6 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/app/src/forms/file/routes.js b/app/src/forms/file/routes.js
index 0f302a56c..ae65e0b19 100644
--- a/app/src/forms/file/routes.js
+++ b/app/src/forms/file/routes.js
@@ -9,6 +9,7 @@ const controller = require('./controller');
 const { currentFileRecord, hasFileCreate, hasFilePermissions } = require('./middleware/filePermissions');
 const fileUpload = require('./middleware/upload').fileUpload;
 
+routes.use(rateLimiter);
 routes.use(currentUser);
 
 routes.param('fileId', validateParameter.validateFileId);
@@ -17,7 +18,7 @@ routes.post('/', hasFileCreate, fileUpload.upload, async (req, res, next) => {
   await controller.create(req, res, next);
 });
 
-routes.get('/:fileId', rateLimiter, apiAccess, currentFileRecord, hasFilePermissions([P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:fileId', apiAccess, currentFileRecord, hasFilePermissions([P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.read(req, res, next);
 });
 
diff --git a/app/src/forms/form/routes.js b/app/src/forms/form/routes.js
index 7c2a8deaa..d462e338b 100644
--- a/app/src/forms/form/routes.js
+++ b/app/src/forms/form/routes.js
@@ -8,6 +8,7 @@ const rateLimiter = require('../common/middleware').apiKeyRateLimiter;
 const validateParameter = require('../common/middleware/validateParameter');
 const controller = require('./controller');
 
+routes.use(rateLimiter);
 routes.use(currentUser);
 
 routes.param('documentTemplateId', validateParameter.validateDocumentTemplateId);
@@ -23,31 +24,31 @@ routes.post('/', async (req, res, next) => {
   await controller.createForm(req, res, next);
 });
 
-routes.get('/:formId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.readForm(req, res, next);
 });
 
-routes.get('/:formId/documentTemplates', rateLimiter, apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_READ]), async (req, res, next) => {
+routes.get('/:formId/documentTemplates', apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_READ]), async (req, res, next) => {
   await controller.documentTemplateList(req, res, next);
 });
 
-routes.post('/:formId/documentTemplates', rateLimiter, apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_CREATE]), async (req, res, next) => {
+routes.post('/:formId/documentTemplates', apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_CREATE]), async (req, res, next) => {
   await controller.documentTemplateCreate(req, res, next);
 });
 
-routes.delete('/:formId/documentTemplates/:documentTemplateId', rateLimiter, apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_DELETE]), async (req, res, next) => {
+routes.delete('/:formId/documentTemplates/:documentTemplateId', apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_DELETE]), async (req, res, next) => {
   await controller.documentTemplateDelete(req, res, next);
 });
 
-routes.get('/:formId/documentTemplates/:documentTemplateId', rateLimiter, apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_READ]), async (req, res, next) => {
+routes.get('/:formId/documentTemplates/:documentTemplateId', apiAccess, hasFormPermissions([P.DOCUMENT_TEMPLATE_READ]), async (req, res, next) => {
   await controller.documentTemplateRead(req, res, next);
 });
 
-routes.get('/:formId/export', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:formId/export', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.export(req, res, next);
 });
 
-routes.post('/:formId/export/fields', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
+routes.post('/:formId/export/fields', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.exportWithFields(req, res, next);
 });
 
@@ -63,75 +64,75 @@ routes.get('/:formId/options', async (req, res, next) => {
   await controller.readFormOptions(req, res, next);
 });
 
-routes.get('/:formId/version', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId/version', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.readPublishedForm(req, res, next);
 });
 
-routes.put('/:formId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.FORM_UPDATE]), async (req, res, next) => {
+routes.put('/:formId', apiAccess, hasFormPermissions([P.FORM_READ, P.FORM_UPDATE]), async (req, res, next) => {
   await controller.updateForm(req, res, next);
 });
 
-routes.delete('/:formId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.FORM_DELETE]), async (req, res, next) => {
+routes.delete('/:formId', apiAccess, hasFormPermissions([P.FORM_READ, P.FORM_DELETE]), async (req, res, next) => {
   await controller.deleteForm(req, res, next);
 });
 
-routes.get('/:formId/submissions', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:formId/submissions', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.listFormSubmissions(req, res, next);
 });
 
-routes.get('/:formId/versions/:formVersionId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId/versions/:formVersionId', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.readVersion(req, res, next);
 });
 
-routes.get('/:formId/versions/:formVersionId/fields', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId/versions/:formVersionId/fields', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.readVersionFields(req, res, next);
 });
 
-routes.post('/:formId/versions/:formVersionId/publish', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
+routes.post('/:formId/versions/:formVersionId/publish', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
   await controller.publishVersion(req, res, next);
 });
 
-routes.get('/:formId/versions/:formVersionId/submissions', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:formId/versions/:formVersionId/submissions', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.listSubmissions(req, res, next);
 });
 
-routes.post('/:formId/versions/:formVersionId/submissions', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_CREATE]), async (req, res, next) => {
+routes.post('/:formId/versions/:formVersionId/submissions', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_CREATE]), async (req, res, next) => {
   await controller.createSubmission(req, res, next);
 });
 
-routes.post('/:formId/versions/:formVersionId/multiSubmission', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_CREATE]), async (req, res, next) => {
+routes.post('/:formId/versions/:formVersionId/multiSubmission', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_CREATE]), async (req, res, next) => {
   await controller.createMultiSubmission(req, res, next);
 });
 
-routes.get('/:formId/versions/:formVersionId/submissions/discover', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), (req, res, next) => {
+routes.get('/:formId/versions/:formVersionId/submissions/discover', apiAccess, hasFormPermissions([P.FORM_READ, P.SUBMISSION_READ]), (req, res, next) => {
   controller.listSubmissionFields(req, res, next);
 });
 
-routes.get('/:formId/drafts', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_READ]), async (req, res, next) => {
+routes.get('/:formId/drafts', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_READ]), async (req, res, next) => {
   await controller.listDrafts(req, res, next);
 });
 
-routes.post('/:formId/drafts', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
+routes.post('/:formId/drafts', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
   await controller.createDraft(req, res, next);
 });
 
-routes.get('/:formId/drafts/:formVersionDraftId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_READ]), async (req, res, next) => {
+routes.get('/:formId/drafts/:formVersionDraftId', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_READ]), async (req, res, next) => {
   await controller.readDraft(req, res, next);
 });
 
-routes.put('/:formId/drafts/:formVersionDraftId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_UPDATE]), async (req, res, next) => {
+routes.put('/:formId/drafts/:formVersionDraftId', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_UPDATE]), async (req, res, next) => {
   await controller.updateDraft(req, res, next);
 });
 
-routes.delete('/:formId/drafts/:formVersionDraftId', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_DELETE]), async (req, res, next) => {
+routes.delete('/:formId/drafts/:formVersionDraftId', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_DELETE]), async (req, res, next) => {
   await controller.deleteDraft(req, res, next);
 });
 
-routes.post('/:formId/drafts/:formVersionDraftId/publish', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
+routes.post('/:formId/drafts/:formVersionDraftId/publish', apiAccess, hasFormPermissions([P.FORM_READ, P.DESIGN_CREATE]), async (req, res, next) => {
   await controller.publishDraft(req, res, next);
 });
 
-routes.get('/:formId/statusCodes', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId/statusCodes', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.getStatusCodes(req, res, next);
 });
 
@@ -155,7 +156,7 @@ routes.get('/formcomponents/proactivehelp/list', async (req, res, next) => {
   await controller.listFormComponentsProactiveHelp(req, res, next);
 });
 
-routes.get('/:formId/csvexport/fields', rateLimiter, apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
+routes.get('/:formId/csvexport/fields', apiAccess, hasFormPermissions([P.FORM_READ]), async (req, res, next) => {
   await controller.readFieldsForCSVExport(req, res, next);
 });
 
diff --git a/app/src/forms/submission/routes.js b/app/src/forms/submission/routes.js
index 821c4bacc..17d973105 100644
--- a/app/src/forms/submission/routes.js
+++ b/app/src/forms/submission/routes.js
@@ -7,13 +7,14 @@ const rateLimiter = require('../common/middleware').apiKeyRateLimiter;
 const validateParameter = require('../common/middleware/validateParameter');
 const controller = require('./controller');
 
+routes.use(rateLimiter);
 routes.use(currentUser);
 
 routes.param('documentTemplateId', validateParameter.validateDocumentTemplateId);
 routes.param('formId', validateParameter.validateFormId);
 routes.param('formSubmissionId', validateParameter.validateFormSubmissionId);
 
-routes.get('/:formSubmissionId', rateLimiter, apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:formSubmissionId', apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.read(req, res, next);
 });
 
@@ -21,7 +22,7 @@ routes.put('/:formSubmissionId', hasSubmissionPermissions([P.SUBMISSION_UPDATE])
   await controller.update(req, res, next);
 });
 
-routes.delete('/:formSubmissionId', rateLimiter, apiAccess, hasSubmissionPermissions([P.SUBMISSION_DELETE]), async (req, res, next) => {
+routes.delete('/:formSubmissionId', apiAccess, hasSubmissionPermissions([P.SUBMISSION_DELETE]), async (req, res, next) => {
   await controller.delete(req, res, next);
 });
 
@@ -45,7 +46,7 @@ routes.post('/:formSubmissionId/notes', hasSubmissionPermissions([P.SUBMISSION_R
   await controller.addNote(req, res, next);
 });
 
-routes.get('/:formSubmissionId/status', rateLimiter, apiAccess, hasSubmissionPermissions([P.SUBMISSION_REVIEW]), async (req, res, next) => {
+routes.get('/:formSubmissionId/status', apiAccess, hasSubmissionPermissions([P.SUBMISSION_REVIEW]), async (req, res, next) => {
   await controller.getStatus(req, res, next);
 });
 
@@ -69,11 +70,11 @@ routes.get('/:formSubmissionId/edits', hasSubmissionPermissions([P.SUBMISSION_RE
   await controller.listEdits(req, res, next);
 });
 
-routes.get('/:formSubmissionId/template/:documentTemplateId/render', rateLimiter, apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
+routes.get('/:formSubmissionId/template/:documentTemplateId/render', apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.templateRender(req, res, next);
 });
 
-routes.post('/:formSubmissionId/template/render', rateLimiter, apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
+routes.post('/:formSubmissionId/template/render', apiAccess, hasSubmissionPermissions([P.SUBMISSION_READ]), async (req, res, next) => {
   await controller.templateUploadAndRender(req, res, next);
 });
 
diff --git a/app/tests/unit/forms/file/routes.spec.js b/app/tests/unit/forms/file/routes.spec.js
index d474948ca..19a00ed35 100644
--- a/app/tests/unit/forms/file/routes.spec.js
+++ b/app/tests/unit/forms/file/routes.spec.js
@@ -80,7 +80,7 @@ describe(`${basePath}`, () => {
     expect(filePermissions.currentFileRecord).toBeCalledTimes(0);
     expect(filePermissions.hasFileCreate).toBeCalledTimes(1);
     expect(hasFilePermissionsMock).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(upload.fileUpload.upload).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateFileId).toBeCalledTimes(0);
@@ -103,7 +103,7 @@ describe(`${basePath}/:id`, () => {
     expect(filePermissions.currentFileRecord).toBeCalledTimes(1);
     expect(filePermissions.hasFileCreate).toBeCalledTimes(0);
     expect(hasFilePermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(upload.fileUpload.upload).toBeCalledTimes(0);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateFileId).toBeCalledTimes(1);
diff --git a/app/tests/unit/forms/form/routes.spec.js b/app/tests/unit/forms/form/routes.spec.js
index def2835b8..74eb678d3 100644
--- a/app/tests/unit/forms/form/routes.spec.js
+++ b/app/tests/unit/forms/form/routes.spec.js
@@ -83,7 +83,7 @@ describe(`${basePath}`, () => {
     expect(controller.listForms).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(0);
     expect(mockJwtServiceProtect).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(0);
@@ -102,7 +102,7 @@ describe(`${basePath}`, () => {
     expect(controller.createForm).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(0);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(0);
@@ -188,7 +188,7 @@ describe(`${basePath}/:formId/apiKey`, () => {
     expect(controller.deleteApiKey).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -207,7 +207,7 @@ describe(`${basePath}/:formId/apiKey`, () => {
     expect(controller.readApiKey).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -226,7 +226,7 @@ describe(`${basePath}/:formId/apiKey`, () => {
     expect(controller.createOrReplaceApiKey).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -250,7 +250,7 @@ describe(`${basePath}/:formId/apiKey/filesApiAccess`, () => {
     expect(controller.filesApiKeyAccess).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -516,7 +516,7 @@ describe(`${basePath}/:formId/emailTemplate`, () => {
     expect(controller.createOrUpdateEmailTemplate).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -540,7 +540,7 @@ describe(`${basePath}/:formId/emailTemplates`, () => {
     expect(controller.readEmailTemplates).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -612,7 +612,7 @@ describe(`${basePath}/:formId/options`, () => {
     expect(controller.readFormOptions).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(0);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -684,7 +684,7 @@ describe(`${basePath}/:formId/subscriptions`, () => {
     expect(controller.readFormSubscriptionDetails).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -703,7 +703,7 @@ describe(`${basePath}/:formId/subscriptions`, () => {
     expect(controller.createOrUpdateSubscriptionDetails).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(1);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(1);
@@ -920,7 +920,7 @@ describe(`${basePath}/formcomponents/proactivehelp/imageUrl/:componentId`, () =>
     expect(controller.getFCProactiveHelpImageUrl).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(0);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(0);
@@ -943,7 +943,7 @@ describe(`${basePath}/formcomponents/proactivehelp/list`, () => {
     expect(controller.listFormComponentsProactiveHelp).toBeCalledTimes(1);
     expect(hasFormPermissionsMock).toBeCalledTimes(0);
     expect(mockJwtServiceProtect).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
     expect(validateParameter.validateFormId).toBeCalledTimes(0);
diff --git a/app/tests/unit/forms/submission/routes.spec.js b/app/tests/unit/forms/submission/routes.spec.js
index 5e80ff0a9..3e3daf62c 100644
--- a/app/tests/unit/forms/submission/routes.spec.js
+++ b/app/tests/unit/forms/submission/routes.spec.js
@@ -118,7 +118,7 @@ describe(`${basePath}/:formSubmissionId`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.update).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -142,7 +142,7 @@ describe(`${basePath}/:formSubmissionId/:formId/submissions`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.deleteMultipleSubmissions).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -166,7 +166,7 @@ describe(`${basePath}/:formSubmissionId/:formId/submissions/restore`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.restoreMultipleSubmissions).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(1);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -189,7 +189,7 @@ describe(`${basePath}/:formSubmissionId/edits`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.listEdits).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -212,7 +212,7 @@ describe(`${basePath}/:formSubmissionId/email`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.email).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -235,7 +235,7 @@ describe(`${basePath}/:formSubmissionId/notes`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.getNotes).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -253,7 +253,7 @@ describe(`${basePath}/:formSubmissionId/notes`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.addNote).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -276,7 +276,7 @@ describe(`${basePath}/:formSubmissionId/options`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.readOptions).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(0);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -299,7 +299,7 @@ describe(`${basePath}/:formSubmissionId/restore`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.restore).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);
@@ -340,7 +340,7 @@ describe(`${basePath}/:formSubmissionId/status`, () => {
     expect(apiAccess).toBeCalledTimes(0);
     expect(controller.addStatus).toBeCalledTimes(1);
     expect(hasSubmissionPermissionsMock).toBeCalledTimes(1);
-    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(0);
+    expect(rateLimiter.apiKeyRateLimiter).toBeCalledTimes(1);
     expect(userAccess.currentUser).toBeCalledTimes(1);
     expect(userAccess.filterMultipleSubmissions).toBeCalledTimes(0);
     expect(validateParameter.validateDocumentTemplateId).toBeCalledTimes(0);

From 92ebb7c005d09fe53b6d885ba4a50dd034cce275 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Wed, 9 Oct 2024 09:14:09 -0700
Subject: [PATCH 3/4] refactor: Forms 1120 composition api designer (#1502)

* Updated some files

FormDisclaimer, FormSettings, FormsTable have been updated to the composition API and tests have been updated with improved coverage

* Update FloatButton.vue

Initial upgrade to composition API. This is not working yet, there appear to be recursive issues. This entire template may need to be refactored..

* FloatButton refactored

FloatButton is completely refactored. Need to fix the tests.

* Update FloatButton.vue

Added in the cypress test attributes

* Update FloatButton

Fixed existing FloatButton tests

* Update FloatButton

Full coverage of the view.

* Update FormDesigner

FormDesigner is updated to the composition API but the CSS completely gets changed when this view is rendered.. Perhaps this entire view needs to be refactored.

* Update FormDesigner

Cleaned up FormDesigner, fixed the issue with the styling being broken. The styling in FloatButton was overriding the parent view.

* Update FloatButton.vue

Fixes the colours for FloatButton buttons that are disabled

* Update FormDesigner

Added some test coverage for the FormDesigner

* Update FormDesigner

many tests cases written, mostly with regards to patch history and formio event handling

* Update FormDesigner

FormDesigner tests are almost at 100% coverage. just missing a test for when the language is changed.

* Update FormViewerActions

FormViewerActions was updated to the composition API and full test coverage added

* Update FormViewer.vue

FormViewer is updated to the composition API. This may need to be refactored as there's so much going on in this file.

* Update FormViewer test coverage

Added many lines of test coverage for FormViewer

* Update FormViewer.spec.js

Added many more lines of code coverage

* Update FormViewer tests

FormViewer tests have more coverage, fixed some tests.
---
 .../src/components/designer/FloatButton.vue   |  807 ++----
 .../src/components/designer/FormDesigner.vue  | 1306 ++++-----
 .../components/designer/FormDisclaimer.vue    |   15 +-
 .../src/components/designer/FormSettings.vue  |   34 +-
 .../src/components/designer/FormViewer.vue    | 2158 +++++++--------
 .../components/designer/FormViewerActions.vue |  151 +-
 .../src/components/designer/FormsTable.vue    |  125 +-
 app/frontend/src/composables/form.js          |   11 +
 app/frontend/src/utils/constants.js           |   88 +
 app/frontend/src/views/form/Create.vue        |    6 +-
 app/frontend/src/views/form/Design.vue        |   12 +-
 .../components/designer/FloatButton.spec.js   |  300 ++-
 .../components/designer/FormDesigner.spec.js  | 1340 ++++++++++
 .../designer/FormDisclaimer.spec.js           |   36 +-
 .../components/designer/FormViewer.spec.js    | 2346 ++++++++++++++++-
 .../designer/FormViewerActions.spec.js        |  193 ++
 .../components/designer/FormsTable.spec.js    |   63 +
 .../tests/unit/views/form/Create.spec.js      |   13 -
 .../tests/unit/views/form/Design.spec.js      |    8 -
 19 files changed, 6294 insertions(+), 2718 deletions(-)
 create mode 100644 app/frontend/tests/unit/components/designer/FormDesigner.spec.js
 create mode 100644 app/frontend/tests/unit/components/designer/FormViewerActions.spec.js
 create mode 100644 app/frontend/tests/unit/components/designer/FormsTable.spec.js

diff --git a/app/frontend/src/components/designer/FloatButton.vue b/app/frontend/src/components/designer/FloatButton.vue
index e59d81cd5..72b8ab737 100644
--- a/app/frontend/src/components/designer/FloatButton.vue
+++ b/app/frontend/src/components/designer/FloatButton.vue
@@ -1,624 +1,337 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
+import { computed, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
-import { useFormStore } from '~/store/form';
+const { locale, t } = useI18n({ useScope: 'global' });
 
-export default {
-  props: {
-    formId: {
-      type: String,
-      default: null,
-    },
-    draftId: {
-      type: String,
-      default: null,
-    },
-    saving: {
-      type: Boolean,
-      default: false,
-    },
-    undoEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    redoEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    saved: {
-      type: Boolean,
-      default: false,
-    },
-    isFormSaved: Boolean,
-    canSave: Boolean,
-    savedStatus: {
-      type: String,
-      default: null,
-    },
-    placement: {
-      type: String,
-      default: 'bottom-right',
-    },
-    fabItemsGap: {
-      type: String,
-      default: '13px',
-    },
-    size: {
-      type: String,
-      default: 'medium',
-    },
-    fabZIndex: {
-      type: Number,
-      default: 1000,
-    },
-    positionOffset: {
-      type: Object,
-      validator: function (value) {
-        // The value must match one of these strings
-        return ['top', 'bottom', 'right', 'left'].includes(
-          ...Object.keys(value)
-        );
-      },
-      default: () => {
-        return { bottom: true, right: true };
-      },
-    },
-    newVersion: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['undo', 'redo', 'save'],
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
+const router = useRouter();
 
-    return { t, locale };
+const properties = defineProps({
+  formId: {
+    type: String,
+    default: null,
   },
-  data() {
-    return {
-      fabItemsDirection: 'column-reverse',
-      isFABActionsOpen: true,
-      fabItemsPosition: {},
-      fabItemsSize: 36,
-      fabItemsIconsSize: 31,
-
-      //base fab item variable start
-      baseFABItemName: this.$t('trans.floatButton.collapse'),
-      baseIconName: 'mdi:mdi-close',
-      baseIconColor: '#ffffff', //end
-
-      // fab items icons variables start
-      fabItemsColor: '#1A5A96',
-      fabItemsInverColor: '#ffffff',
-      disabledInvertedFabItemsColor: '#707070C1',
-      disabledFabItemsColor: '#707070C1', // end
-
-      savedMsg: this.$t('trans.floatButton.save'),
-      scrollIconName: 'mdi:mdi-arrow-down',
-      scrollName: this.$t('trans.floatButton.bottom'),
-    };
+  canSave: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-    computedStyles() {
-      let baseStyles = {
-        display: 'flex',
-        width: '92px',
-        flexDirection: this.fabItemsDirection,
-        gap: this.fabItemsGap,
-        zIndex: this.fabZIndex,
-        position: 'fixed',
-        right: '0',
-        bottom: '20px',
-      };
-
-      let conditionalStyles = {};
-      let fabItemsPosition = { ...this.fabItemsPosition };
-
-      switch (this.$i18n.locale) {
-        case 'uk':
-          baseStyles.width = '111px';
-          fabItemsPosition.right = '-.3vw';
-          break;
-      }
-
-      return [baseStyles, fabItemsPosition, conditionalStyles];
-    },
-    isPublishEnabled() {
-      return this.newVersion ? false : this.formId && this.draftId;
-    },
-    isManageEnabled() {
-      return this.formId;
-    },
+  draftId: {
+    type: String,
+    default: null,
+  },
+  isFormSaved: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    size() {
-      this.setSizes();
-    },
-    savedStatus(value) {
-      switch (value) {
-        case 'Saved':
-          this.savedMsg = this.$t('trans.floatButton.saved');
-          break;
-        case 'Save':
-          this.savedMsg = this.$t('trans.floatButton.save');
-          break;
-        case 'Saving':
-          this.savedMsg = this.$t('trans.floatButton.saving');
-          break;
-        case 'Not Saved':
-          this.savedMsg = this.$t('trans.floatButton.notSaved');
-          break;
-      }
-    },
+  isManageEnabled: {
+    type: Boolean,
+    default: false,
   },
-  created() {
-    window.addEventListener('scroll', this.handleScroll);
+  isSaving: {
+    type: Boolean,
+    default: false,
   },
-  mounted() {
-    window.scrollTo(0, 0);
-    this.setPosition();
-    this.setSizes();
+  undoEnabled: {
+    type: Boolean,
+    default: false,
   },
-  unmounted() {
-    window.removeEventListener('scroll', this.handleScroll);
+  redoEnabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toParent(name) {
-      this.$emit(name);
-    },
-    onOpenFABActionItems() {
-      if (this.isFABActionsOpen) {
-        this.baseIconName = 'mdi:mdi-menu';
-        this.isFABActionsOpen = false;
-        this.baseFABItemName = this.$t('trans.floatButton.actions');
-      } else {
-        this.baseIconName = 'mdi:mdi-close';
-        this.isFABActionsOpen = true;
-        this.baseFABItemName = this.$t('trans.floatButton.collapse');
-      }
-    },
+  newVersion: {
+    type: Boolean,
+    default: false,
+  },
+  savedStatus: {
+    type: String,
+    default: null,
+  },
+});
 
-    gotoPreview() {
-      let route = this.$router.resolve({
-        name: 'FormPreview',
-        query: { f: this.formId, d: this.draftId },
-      });
-      window.open(route.href);
-    },
-    setSizes() {
-      switch (this.size) {
-        case 'x-large':
-          this.fabItemsSize = 52;
-          this.fabItemsIconsSize = 47;
-          break;
-        case 'large':
-          this.fabItemsSize = 44;
-          this.fabItemsIconsSize = 39;
-          break;
-        case 'medium':
-          this.fabItemsSize = 36;
-          this.fabItemsIconsSize = 31;
-          break;
-        case 'small':
-          this.fabItemsSize = 28;
-          this.fabItemsIconsSize = 18;
-          break;
-        default:
-          this.fabItemsSize = 36;
-          this.fabItemsIconsSize = 31;
-      }
-    },
+const emit = defineEmits(['redo', 'save', 'undo']);
 
-    //checks if FAB is placed at the top right or top left of the screen
-    topLeftRight() {
-      if (this.placement === 'top-right' || this.placement === 'top-left') {
-        this.fabItemsDirection = 'column';
-      }
-    },
+const isAtTopOfPage = ref(true);
+const isCollapsed = ref(false);
 
-    //checks if FAB is placed at the bottom right or bottom left of the screen
-    bottomLeftRight() {
-      if (
-        this.placement === 'bottom-right' ||
-        this.placement === 'bottom-left'
-      ) {
-        this.fabItemsDirection = 'column-reverse';
-      }
-    },
+// We need to handle scroll through an event listener because computed values do not update on a scroll event
+window.addEventListener('scroll', onEventScroll);
 
-    // set where on the screen FAB will be displayed
-    setPosition() {
-      this.fabItemsPosition = {};
+onUnmounted(() => {
+  window.removeEventListener('scroll', onEventScroll);
+});
 
-      this.bottomLeftRight();
-      this.topLeftRight();
+// This is the icon for the button that lets you scroll to the bottom or top of the page
+const SCROLL_ICON = computed(() => {
+  if (!isAtTopOfPage.value) {
+    return 'mdi:mdi-arrow-up';
+  }
+  return 'mdi:mdi-arrow-down';
+});
 
-      if (this.positionOffset && Object.keys(this.positionOffset).length > 0) {
-        Object.assign(this.fabItemsPosition, this.positionOffset);
-        return;
-      }
-      switch (this.placement) {
-        case 'bottom-right':
-          this.fabItemsPosition.right = '-.5vw';
-          this.fabItemsPosition.bottom = '7vh';
-          break;
-        case 'bottom-left':
-          this.fabItemsPosition.left = '5vw';
-          this.fabItemsPosition.bottom = '4vh';
-          break;
-        case 'top-left':
-          this.fabItemsPosition.left = '5vw';
-          this.fabItemsPosition.top = '4vh';
-          break;
-        case 'top-right':
-          this.fabItemsPosition.right = '1vw';
-          this.fabItemsPosition.top = '8vh';
-          break;
-        default:
-          this.fabItemsPosition.right = '5vw';
-          this.fabItemsPosition.bottom = '4vh';
-      }
-    },
+// This is the text for the button that lets you scroll to the bottom or top of the page
+const SCROLL_TEXT = computed(() => {
+  if (!isAtTopOfPage.value) {
+    return t('trans.floatButton.top');
+  }
+  return t('trans.floatButton.bottom');
+});
 
-    // callback function for window scroll event
-    handleScroll() {
-      if (window.scrollY === 0) {
-        this.scrollIconName = 'mdi:mdi-arrow-down';
-        this.scrollName = this.$t('trans.floatButton.bottom');
-      } else if (
-        window.pageYOffset + window.innerHeight >=
-        document.documentElement.scrollHeight - 50
-      ) {
-        this.scrollIconName = 'mdi:mdi-arrow-up';
-        this.scrollName = this.$t('trans.floatButton.top');
-      }
-    },
+// This is the icon for the button that lets you collapse the actions
+const COLLAPSE_ICON = computed(() => {
+  if (!isCollapsed.value) {
+    return 'mdi:mdi-close';
+  }
+  return 'mdi:mdi-menu';
+});
 
-    // function for click scroll event
-    onHandleScroll() {
-      if (window.scrollY === 0) {
-        this.bottomScroll();
-      } else if (
-        this.scrollName === this.$t('trans.floatButton.bottom') &&
-        window.scrollY > 0
-      ) {
-        this.bottomScroll();
-      } else if (
-        this.scrollName === this.$t('trans.floatButton.top') &&
-        window.scrollY > 0
-      ) {
-        this.topScroll();
-      } else {
-        this.topScroll();
-      }
-    },
-    topScroll() {
-      window.scrollTo(0, 0);
-      this.scrollIconName = 'mdi:mdi-arrow-down';
-      this.scrollName = this.$t('trans.floatButton.bottom');
-    },
-    bottomScroll() {
-      window.scrollTo({
-        left: 0,
-        top: document.body.scrollHeight,
-        behavior: 'smooth',
-      });
-      this.scrollIconName = 'mdi:mdi-arrow-up';
-      this.scrollName = this.$t('trans.floatButton.top');
-    },
-  },
-};
+// This is the text for the button that lets you collapse the actions
+const COLLAPSE_TEXT = computed(() => {
+  if (!isCollapsed.value) {
+    return t('trans.floatButton.collapse');
+  }
+  return t('trans.floatButton.actions');
+});
+
+// This is the text for the button that lets you save
+const SAVE_TEXT = computed(() => {
+  if (properties.savedStatus === 'Saved') {
+    return t('trans.floatButton.saved');
+  } else if (properties.savedStatus === 'Saving') {
+    return t('trans.floatButton.saving');
+  } else if (properties.savedStatus === 'Not Saved') {
+    return t('trans.floatButton.notSaved');
+  }
+  return t('trans.floatButton.save');
+});
+
+const isManageEnabled = computed(() => properties.formId);
+
+const isPublishEnabled = computed(() =>
+  properties.newVersion ? false : properties.formId && properties.draftId
+);
+
+function onEventScroll() {
+  isAtTopOfPage.value = window.scrollY === 0 ? true : false;
+}
+
+function onClickCollapse() {
+  isCollapsed.value = !isCollapsed.value;
+}
+
+function onClickSave() {
+  emit('save');
+}
+
+function onClickScroll() {
+  window.scrollTo({
+    left: 0,
+    top: isAtTopOfPage.value ? document.body.scrollHeight : 0,
+    behavior: 'smooth',
+  });
+}
+
+function goToPreview() {
+  let route = router.resolve({
+    name: 'FormPreview',
+    query: { f: properties.formId, d: properties.draftId },
+  });
+  window.open(route.href);
+}
+
+defineExpose({
+  COLLAPSE_ICON,
+  COLLAPSE_TEXT,
+  isAtTopOfPage,
+  isCollapsed,
+  onClickCollapse,
+  onClickSave,
+  onClickScroll,
+  onEventScroll,
+  SAVE_TEXT,
+  SCROLL_ICON,
+  SCROLL_TEXT,
+});
 </script>
 
 <template>
-  <div :class="{ 'dir-rtl': isRTL }" :style="computedStyles">
-    <div class="fabAction" :lang="locale" @click="onOpenFABActionItems">
-      <div class="text" :lang="locale" v-text="baseFABItemName" />
-      <v-btn
-        class="fabItemsInverColor"
-        :size="fabItemsSize"
-        :title="baseFABItemName"
-      >
-        <v-icon
-          :color="baseIconColor"
-          :size="fabItemsIconsSize"
-          :icon="baseIconName"
-        >
-        </v-icon>
+  <div class="d-flex flex-column float-button">
+    <div class="fab d-flex flex-column">
+      <span :lang="locale">{{ SCROLL_TEXT }}</span>
+      <v-btn class="ma-2" density="compact" icon @click="onClickScroll">
+        <v-icon :icon="SCROLL_ICON"></v-icon>
       </v-btn>
     </div>
-    <div
-      v-if="isFABActionsOpen"
-      :style="[
-        { display: 'flex', flexDirection: fabItemsDirection, gap: fabItemsGap },
-      ]"
-    >
+    <div v-if="!isCollapsed">
+      <div class="fab d-flex flex-column" data-cy="saveButton">
+        <span :lang="locale">{{ SAVE_TEXT }}</span>
+        <v-btn
+          :disabled="!properties.canSave && properties.isFormSaved"
+          class="ma-2"
+          density="compact"
+          icon
+          @click="onClickSave"
+        >
+          <v-icon
+            v-if="!properties.isSaving"
+            icon="mdi:mdi-content-save"
+          ></v-icon>
+          <v-progress-circular v-else indeterminate></v-progress-circular>
+        </v-btn>
+      </div>
+      <div
+        class="fab d-flex flex-column"
+        :class="{
+          'disabled-router': !properties.formId || !properties.draftId,
+        }"
+        data-cy="previewRouterLink"
+        @click="goToPreview"
+      >
+        <span :lang="locale">{{ $t('trans.floatButton.preview') }}</span>
+        <v-btn
+          :disabled="!(!properties.formId || !properties.draftId)"
+          class="ma-2"
+          density="compact"
+          icon
+        >
+          <v-icon icon="mdi:mdi-eye"></v-icon>
+        </v-btn>
+      </div>
+      <div class="fab d-flex flex-column" data-cy="undoButton">
+        <span :lang="locale">{{ $t('trans.floatButton.undo') }}</span>
+        <v-btn
+          :disabled="!properties.undoEnabled"
+          class="ma-2"
+          density="compact"
+          icon
+          @click="$emit('undo')"
+        >
+          <v-icon icon="mdi:mdi-undo"></v-icon>
+        </v-btn>
+      </div>
+      <div class="fab d-flex flex-column" data-cy="redoButton">
+        <span :lang="locale">{{ $t('trans.floatButton.redo') }}</span>
+        <v-btn
+          :disabled="!properties.redoEnabled"
+          class="ma-2"
+          density="compact"
+          icon
+          @click="$emit('redo')"
+        >
+          <v-icon icon="mdi:mdi-redo"></v-icon>
+        </v-btn>
+      </div>
       <router-link
         v-slot="{ navigate }"
         :to="{
-          name: 'PublishForm',
-          query: { f: formId, fd: true, d: draftId },
+          name: 'FormManage',
+          query: { f: properties.formId, fd: false, d: properties.draftId },
         }"
         custom
       >
         <div
-          ref="publishRouterLink"
-          role="link"
-          data-cy="publishRouterLink"
-          :class="{ fabAction: true, 'disabled-router': !isPublishEnabled }"
+          class="fab d-flex flex-column"
+          :class="{ 'disabled-router': !isManageEnabled }"
+          data-cy="settingsRouterLink"
         >
-          <div
-            class="text"
-            :lang="locale"
-            v-text="$t('trans.floatButton.publish')"
-          />
+          <span :lang="locale">{{ $t('trans.floatButton.manage') }}</span>
           <v-btn
-            :class="{
-              fabItemsInverColor: isPublishEnabled,
-              disabledInvertedFabItemsColor: !isPublishEnabled,
-            }"
-            :size="fabItemsSize"
-            :title="$t('trans.floatButton.publish')"
+            :disabled="!isManageEnabled"
+            class="ma-2 inverted-colour"
+            density="compact"
+            icon
             @click="navigate"
           >
-            <v-icon
-              :color="
-                isPublishEnabled
-                  ? fabItemsInverColor
-                  : disabledInvertedFabItemsColor
-              "
-              :size="fabItemsIconsSize"
-              icon="mdi:mdi-file-upload"
-            >
-            </v-icon>
+            <v-icon icon="mdi:mdi-cog"></v-icon>
           </v-btn>
         </div>
       </router-link>
       <router-link
         v-slot="{ navigate }"
         :to="{
-          name: 'FormManage',
-          query: { f: formId, fd: false, d: draftId },
+          name: 'PublishForm',
+          query: { f: properties.formId, fd: true, d: properties.draftId },
         }"
         custom
       >
         <div
-          ref="settingsRouterLink"
+          class="fab d-flex flex-column"
+          :class="{ 'disabled-router': !isPublishEnabled }"
+          data-cy="publishRouterLink"
           role="link"
-          data-cy="settingsRouterLink"
-          :class="{ fabAction: true, 'disabled-router': !isManageEnabled }"
         >
-          <div
-            class="text"
-            :lang="locale"
-            v-text="$t('trans.floatButton.manage')"
-          />
+          <span :lang="locale">{{ $t('trans.floatButton.publish') }}</span>
           <v-btn
-            :class="{
-              fabItemsInverColor: isManageEnabled,
-              disabledInvertedFabItemsColor: !isManageEnabled,
-            }"
-            :size="fabItemsSize"
-            :title="$t('trans.floatButton.manage')"
+            :disabled="!isPublishEnabled"
+            class="ma-2 inverted-colour"
+            density="compact"
+            icon
             @click="navigate"
           >
-            <v-icon
-              :color="
-                isManageEnabled
-                  ? fabItemsInverColor
-                  : disabledInvertedFabItemsColor
-              "
-              :size="fabItemsIconsSize"
-              icon="mdi:mdi-cog"
-            >
-            </v-icon>
+            <v-icon icon="mdi:mdi-file-upload"></v-icon>
           </v-btn>
         </div>
       </router-link>
-
-      <div
-        ref="redoButton"
-        class="fabAction"
-        data-cy="redoButton"
-        :class="{ 'disabled-router': !redoEnabled }"
-      >
-        <div
-          class="text"
-          :lang="locale"
-          v-text="$t('trans.floatButton.redo')"
-        />
-        <v-btn
-          class="fabItems"
-          :size="fabItemsSize"
-          :title="$t('trans.floatButton.redo')"
-          @click="toParent('redo')"
-        >
-          <v-icon
-            :color="redoEnabled ? fabItemsColor : disabledFabItemsColor"
-            :size="fabItemsIconsSize"
-            icon="mdi:mdi-redo"
-          >
-          </v-icon>
-        </v-btn>
-      </div>
-      <div
-        ref="undoButton"
-        class="fabAction"
-        data-cy="undoButton"
-        :class="{ 'disabled-router': !undoEnabled }"
-      >
-        <div
-          class="text"
-          :lang="locale"
-          v-text="$t('trans.floatButton.undo')"
-        />
-        <v-btn
-          class="fabItems"
-          :size="fabItemsSize"
-          :title="$t('trans.floatButton.undo')"
-          @click="toParent('undo')"
-        >
-          <v-icon
-            :color="undoEnabled ? fabItemsColor : disabledFabItemsColor"
-            :size="fabItemsIconsSize"
-            icon="mdi:mdi-undo"
-          >
-          </v-icon>
-        </v-btn>
-      </div>
-      <div
-        ref="previewRouterLink"
-        class="fabAction"
-        :class="{ 'disabled-router': !formId || !draftId }"
-        @click="gotoPreview"
-      >
-        <div
-          class="text"
-          :lang="locale"
-          v-text="$t('trans.floatButton.preview')"
-        />
-        <v-btn
-          class="fabItems"
-          :size="fabItemsSize"
-          :title="$t('trans.floatButton.preview')"
-        >
-          <v-icon
-            :color="formId ? fabItemsColor : disabledFabItemsColor"
-            :size="fabItemsIconsSize"
-            icon="mdi:mdi-eye"
-          >
-          </v-icon>
-        </v-btn>
-      </div>
-      <div
-        ref="saveButton"
-        class="fabAction"
-        data-cy="saveButton"
-        :class="{ 'disabled-router': isFormSaved && !canSave }"
-      >
-        <div class="text" :lang="locale">{{ savedMsg }}</div>
-        <v-btn
-          class="fabItems"
-          :size="fabItemsSize"
-          :title="savedMsg"
-          @click="canSave ? toParent('save') : null"
-        >
-          <v-icon
-            v-if="!saving"
-            :color="
-              !isFormSaved && canSave ? fabItemsColor : disabledFabItemsColor
-            "
-            :size="fabItemsIconsSize"
-            dark
-            icon="mdi:mdi-content-save"
-          >
-          </v-icon>
-
-          <v-progress-circular
-            v-if="saving"
-            indeterminate
-            color="#1A5A96"
-            size="25"
-          ></v-progress-circular>
-        </v-btn>
-      </div>
-      <div class="fabAction">
-        <div :lang="locale">{{ scrollName }}</div>
-
-        <v-btn
-          class="fabItems"
-          :size="fabItemsSize"
-          :title="scrollName"
-          @click="onHandleScroll"
-        >
-          <v-icon
-            :color="fabItemsColor"
-            :size="fabItemsIconsSize"
-            :icon="scrollIconName"
-          >
-          </v-icon>
-        </v-btn>
-      </div>
     </div>
-    <div v-if="!isFABActionsOpen" class="fabAction">
-      <div :lang="locale">{{ scrollName }}</div>
+    <div class="fab d-flex flex-column">
+      <span :lang="locale">{{ COLLAPSE_TEXT }}</span>
       <v-btn
-        class="fabItems"
-        :size="fabItemsSize"
-        :title="scrollName"
-        @click="onHandleScroll"
+        class="ma-2 inverted-colour"
+        density="compact"
+        icon
+        @click="onClickCollapse"
       >
-        <v-icon
-          :color="fabItemsColor"
-          :size="fabItemsIconsSize"
-          :icon="scrollIconName"
-        >
-        </v-icon>
+        <v-icon :icon="COLLAPSE_ICON"></v-icon>
       </v-btn>
     </div>
   </div>
 </template>
 
-<style>
-/* disable router-link */
-.disabled-router {
-  pointer-events: none;
+<style lang="scss">
+.float-button {
+  min-width: 80px;
+  padding-right: 20px;
+  padding-bottom: 40px;
 }
 
-.fabAction {
-  display: flex;
+.fab {
   justify-content: center;
-  flex-direction: column;
   align-items: center;
   align-content: center;
-  overflow: hidden;
-  width: auto;
-  height: auto;
-  pointer-events: cursor;
-  color: #313132;
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
   font-family: BCSans !important;
-  cursor: pointer;
-  border-radius: 100%;
-}
 
-.fabItemsInverColor {
-  background: #1a5a96 0% 0% no-repeat padding-box;
-  border-radius: 100%;
-  box-shadow: 0px 3px 6px #00000029;
-  transition: background 1s;
-}
+  .v-btn {
+    margin-top: 2px !important;
+    margin-bottom: 12px !important;
+  }
 
-.fabItemsInverColor:hover {
-  background: #003366 0% 0% no-repeat padding-box;
-  border: none;
-}
+  .v-icon {
+    font-size: 18px;
+    color: #1a5a96;
+  }
 
-.disabledInvertedFabItemsColor {
-  border-radius: 100%;
-  box-shadow: 0px 3px 6px #00000029;
-  transition: background 1s;
-}
+  .v-btn.v-btn--disabled {
+    background-color: white;
+  }
 
-.fabItems {
-  background: #ffffff 0% 0% no-repeat padding-box;
-  border: 1px solid #70707063;
-  transition: border 1s;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  border-radius: 100%;
-  box-shadow: 0px 3px 6px #00000029;
-}
+  .v-btn.v-btn--disabled .v-btn__overlay {
+    background-color: rgba(0, 0, 0, 0.26);
+  }
 
-.fabItems:hover {
-  border: 1px solid #003366;
-}
-.text {
-  text-align: center;
+  .v-btn--disabled .v-icon {
+    color: #707070c1 !important;
+  }
+
+  .inverted-colour {
+    background: #1a5a96;
+  }
+
+  .inverted-colour .v-icon {
+    color: white;
+  }
 }
 </style>
diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
index 7abbab56c..4f459b20b 100644
--- a/app/frontend/src/components/designer/FormDesigner.vue
+++ b/app/frontend/src/components/designer/FormDesigner.vue
@@ -1,771 +1,596 @@
-<script>
+<script setup>
 import { FormBuilder } from '@formio/vue';
 import { compare, applyPatch, deepClone } from 'fast-json-patch';
-import { mapActions, mapState } from 'pinia';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
 import FloatButton from '~/components/designer/FloatButton.vue';
-import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
+import { exportFormSchema, importFormSchemaFromFile } from '~/composables/form';
 import formioIl8next from '~/internationalization/trans/formio/formio.json';
 import templateExtensions from '~/plugins/templateExtensions';
-import { formService } from '~/services';
+import { formService, userService } from '~/services';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
-import { IdentityMode } from '~/utils/constants';
+import { FormDesignerBuilderOptions, IdentityMode } from '~/utils/constants';
 import { generateIdps } from '~/utils/transformUtils';
-import { userService } from '../../services';
-
-export default {
-  components: {
-    BaseInfoCard,
-    FormBuilder,
-    FloatButton,
-    ProactiveHelpPreviewDialog,
-  },
-  props: {
-    draftId: {
-      type: String,
-      default: null,
-    },
-    formId: {
-      type: String,
-      default: null,
-    },
-    saved: {
-      type: Boolean,
-      default: false,
-    },
-    newVersion: {
-      type: Boolean,
-      default: false,
-    },
-    isSavedStatus: {
-      type: String,
-      default: 'Save',
-    },
-    versionId: {
-      type: String,
-      default: null,
-    },
-  },
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
 
-    return { t, locale };
+const { locale, t } = useI18n({ useScope: 'global' });
+const router = useRouter();
+
+const properties = defineProps({
+  draftId: {
+    type: String,
+    default: null,
   },
-  data() {
-    return {
-      canSave: false,
-      component: {},
-      displayVersion: 1,
-      formSchema: {
-        display: 'form',
-        type: 'form',
-        components: [],
-      },
-      isFormSaved: !this.newVersion,
-      patch: {
-        componentAddedStart: false,
-        componentRemovedStart: false,
-        componentMovedStart: false,
-        history: [],
-        index: -1,
-        MAX_PATCHES: 30,
-        originalSchema: null,
-        redoClicked: false,
-        undoClicked: false,
-      },
-      reRenderFormIo: 0,
-      savedStatus: this.isSavedStatus,
-      saving: false,
-      showHelpLinkDialog: false,
-    };
+  formId: {
+    type: String,
+    default: null,
   },
-  computed: {
-    ...mapState(useFormStore, [
-      'fcProactiveHelpGroupList',
-      'fcProactiveHelpImageUrl',
-      'builder',
-      'form',
-      'isRTL',
-      'userLabels',
-    ]),
-    ...mapState(useAuthStore, ['tokenParsed', 'user']),
-    ID_MODE() {
-      return IdentityMode;
-    },
-    designerOptions() {
-      return {
-        sanitizeConfig: {
-          addTags: ['iframe'],
-          ALLOWED_TAGS: ['iframe'],
-        },
-        noDefaultSubmitButton: false,
-        builder: {
-          basic: false,
-          premium: false,
-          layoutControls: {
-            title: 'Basic Layout',
-            default: true,
-            weight: 10,
-            components: {
-              simplecols2: true,
-              simplecols3: true,
-              simplecols4: true,
-              simplecontent: true,
-              simplefieldset: false,
-              simpleheading: false,
-              simplepanel: true,
-              simpleparagraph: false,
-              simpletabs: true,
-            },
-          },
-          entryControls: {
-            title: 'Basic Fields',
-            weight: 20,
-            components: {
-              simplecheckbox: true,
-              simplecheckboxes: true,
-              simpledatetime: true,
-              simpleday: true,
-              simpleemail: true,
-              simplenumber: true,
-              simplephonenumber: true,
-              simpleradios: true,
-              simpleselect: true,
-              simpletextarea: true,
-              simpletextfield: true,
-              simpletime: false,
-            },
-          },
-          layout: {
-            title: 'Advanced Layout',
-            weight: 30,
-          },
-          advanced: {
-            title: 'Advanced Fields',
-            weight: 40,
-            components: {
-              // Need to re-define Formio basic fields here
-              // To disable fields make it false here
-              // textfield: true,
-              // textarea: true,
-              // number: true,
-              // password: true,
-              // checkbox: true,
-              // selectboxes: true,
-              // select: true,
-              // radio: true,
-              // button: true,
-              email: false,
-              url: false,
-              phoneNumber: false,
-              tags: false,
-              address: false,
-              datetime: false,
-              day: false,
-              time: false,
-              currency: false,
-              survey: false,
-              signature: false,
-              // Prevent duplicate appearance of orgbook component
-              orgbook: false,
-              bcaddress: false,
-              simplebcaddress: false,
-            },
-          },
-          data: {
-            title: 'Advanced Data',
-            weight: 50,
-          },
-          customControls: {
-            title: 'BC Government',
-            weight: 60,
-            components: {
-              orgbook: true,
-              simplefile: this.form.userType !== this.ID_MODE.PUBLIC,
-              bcaddress: true,
-              simplebcaddress: true,
-            },
-          },
-        },
-        language: this.lang ? this.lang : 'en',
-        i18n: formioIl8next,
-        templates: templateExtensions,
-        evalContext: {
-          token: this.tokenParsed,
-          user: this.user,
-        },
-      };
-    },
+  saved: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    form(newValue, oldValue) {
-      if (newValue.userType !== oldValue.userType) {
-        this.reRenderFormIo += 1;
-      }
-    },
-    lang(value) {
-      if (value) {
-        this.reRenderFormIo += 1;
-      }
-    },
+  newVersion: {
+    type: Boolean,
+    default: false,
   },
-  created() {
-    if (this.formId) {
-      Promise.all([this.fetchForm(this.formId), this.getFormSchema()]);
-    }
+  isSavedStatus: {
+    type: String,
+    default: 'Save',
   },
-  async mounted() {
-    // load up headers for any External API calls
-    // from components (component makes calls during design phase).
-    await this.setProxyHeaders();
-    if (!this.formId) {
-      // We are creating a new form, so we obtain the original schema here.
-      this.patch.originalSchema = deepClone(this.formSchema);
-    }
+  versionId: {
+    type: String,
+    default: null,
   },
+});
 
-  methods: {
-    ...mapActions(useFormStore, [
-      'fetchForm',
-      'setDirtyFlag',
-      'getFCProactiveHelpImageUrl',
-    ]),
-    async setProxyHeaders() {
-      try {
-        let response = await formService.getProxyHeaders({
-          formId: this.formId,
-          versionId: this.versionId,
-        });
-        // error checking for response
-        sessionStorage.setItem(
-          'X-CHEFS-PROXY-DATA',
-          response.data['X-CHEFS-PROXY-DATA']
-        );
-      } catch (error) {
-        // need error handling
-      }
-    },
-    async getFormSchema() {
-      try {
-        let res;
-        if (this.versionId) {
-          // Making a new draft from a previous version
-          res = await formService.readVersion(this.formId, this.versionId);
-        } else if (this.draftId) {
-          // Editing an existing draft
-          res = await formService.readDraft(this.formId, this.draftId);
-        }
-        this.formSchema = {
-          ...this.formSchema,
-          ...res.data.schema,
-        };
-        if (this.patch.history.length === 0) {
-          // We are fetching an existing form, so we get the original schema here because
-          // using the original schema in the mount will give you the default schema
-          this.patch.originalSchema = deepClone(this.formSchema);
-        }
-        this.reRenderFormIo += 1;
-      } catch (error) {
-        const notificationStore = useNotificationStore();
-        notificationStore.addNotification({
-          text: this.$t('trans.formDesigner.formLoadErrMsg'),
-          consoleError: this.$t('trans.formDesigner.formLoadConsoleErrMsg', {
-            formId: this.formId,
-            versionId: this.versionId,
-            draftId: this.draftId,
-            error: error,
-          }),
-        });
-      }
-      // get a version number to show in header
-      this.displayVersion = this.form.versions.length + 1;
-    },
+const canSave = ref(false);
+const formSchema = ref({
+  display: 'form',
+  type: 'form',
+  components: [],
+});
+const isFormSaved = ref(!properties.newVersion);
+const patch = ref({
+  componentAddedStart: false,
+  componentRemovedStart: false,
+  componentMovedStart: false,
+  history: [],
+  index: -1,
+  MAX_PATCHES: 30,
+  originalSchema: null,
+  redoClicked: false,
+  undoClicked: false,
+});
+const reRenderFormIo = ref(0);
+const savedStatus = ref(properties.isSavedStatus);
+const saving = ref(false);
 
-    async loadFile(event) {
-      try {
-        const file = event.target.files[0];
-        const fileReader = new FileReader();
-        fileReader.addEventListener('load', () => {
-          this.formSchema = JSON.parse(fileReader.result);
-          this.addPatchToHistory();
-          this.patch.undoClicked = false;
-          this.patch.redoClicked = false;
-          this.resetHistoryFlags();
-          // Key-changing to force a re-render of the formio component when we want to load a new schema after the page is already in
-          this.reRenderFormIo += 1;
-        });
-        fileReader.readAsText(file);
-      } catch (error) {
-        const notificationStore = useNotificationStore();
-        notificationStore.addNotification({
-          text: this.$t('trans.formDesigner.formSchemaImportErrMsg'),
-          consoleError: this.$t(
-            'trans.formDesigner.formSchemaImportConsoleErrMsg',
-            {
-              error: error,
-            }
-          ),
-        });
-      }
-    },
-    onExportClick() {
-      let snek = this.form.snake;
-      if (!this.form.snake) {
-        snek = this.form.name
-          .replace(/\s+/g, '_')
-          .replace(/[^-_0-9a-z]/gi, '')
-          .toLowerCase();
-      }
+const authStore = useAuthStore();
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
 
-      const a = document.createElement('a');
-      a.href = `data:application/json;charset=utf-8,${encodeURIComponent(
-        JSON.stringify(this.formSchema)
-      )}`;
-      a.download = `${snek}_schema.json`;
-      a.style.display = 'none';
-      a.classList.add('hiddenDownloadTextElement');
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    },
+const { tokenParsed, user } = storeToRefs(authStore);
+const { form, isRTL, userLabels } = storeToRefs(formStore);
 
-    // ---------------------------------------------------------------------------------------------------
-    // FormIO event handlers
-    // ---------------------------------------------------------------------------------------------------
-    init() {
-      this.setDirtyFlag(false);
-      // Since change is triggered during loading
-      this.onFormLoad();
-    },
-    onChangeMethod(changed, flags, modified) {
-      // Don't call an unnecessary action if already dirty
-      if (!this.form.isDirty) this.setDirtyFlag(true);
+watch(form, (newFormValue, oldFormValue) => {
+  if (newFormValue.userType != oldFormValue.userType) {
+    reRenderFormIo.value += 1;
+  }
+});
 
-      this.onSchemaChange(changed, flags, modified);
-    },
-    onRenderMethod() {
-      const el = document.querySelector('input.builder-sidebar_search:focus');
-      if (el && el === '') this.reRenderFormIo += 1;
-      this.setDirtyFlag(false);
-    },
-    onAddSchemaComponent(_info, _parent, _path, _index, isNew) {
-      if (isNew) {
-        // Component Add Start, the user can still cancel/remove the add
-        this.patch.componentAddedStart = true;
-      } else {
-        // The user has initiated a move
-        this.patch.componentMovedStart = true;
-      }
-    },
-    onRemoveSchemaComponent() {
-      // Component remove start
-      this.patch.componentRemovedStart = true;
-    },
+watch(locale, (value) => {
+  if (value) {
+    reRenderFormIo.value += 1;
+  }
+});
 
-    onFormLoad() {
-      // Contains the names of every category of components
-      let builder = this.$refs.formioForm.builder.instance.builder;
-      if (Object.keys(this.fcProactiveHelpGroupList).length > 0) {
-        for (const [groupName, elements] of Object.entries(
-          this.fcProactiveHelpGroupList
-        )) {
-          let extractedElementsNames = this.extractPublishedElement(elements);
-          for (const [key, builderElements] of Object.entries(builder)) {
-            if (groupName === builderElements.title) {
-              let containerId = `group-container-${key}`;
-              let containerEl = document.getElementById(containerId);
-              if (containerEl) {
-                for (let i = 0; i < containerEl.children.length; i++) {
-                  let elementName = containerEl.children[i].textContent.trim();
-                  if (extractedElementsNames.includes(elementName)) {
-                    // Append the info el
-                    let child = document.createElement('i');
-
-                    child.setAttribute(
-                      'class',
-                      'fa fa-info-circle info-helper'
-                    );
-                    child.style.float = 'right';
-                    child.style.fontSize = '14px';
-                    child.addEventListener('click', function () {
-                      this.showHelperClicked(elementName, groupName);
-                    });
-                    containerEl.children[i].appendChild(child);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    extractPublishedElement(elements) {
-      let publishedComponentsNames = [];
-      for (let element of elements) {
-        if (element.status) {
-          publishedComponentsNames.push(element.componentName);
-        }
-      }
-      return publishedComponentsNames;
-    },
+onMounted(async () => {
+  if (properties.formId) {
+    await formStore.fetchForm(properties.formId);
+    await getFormSchema();
+  }
 
-    async showHelperClicked(elementName, groupName) {
-      const elements = this.fcProactiveHelpGroupList[groupName];
-      this.component = elements.find(
-        (element) => element.componentName === elementName
-      );
-      await this.getFCProactiveHelpImageUrl(this.component.id);
-      this.onShowClosePreviewDialog();
+  // load up headers for any External API calls
+  // from components (component makes calls during design phase).
+  await setProxyHeaders();
+  if (!properties.formId) {
+    // We are creating a new form, so we obtain the original schema here.
+    patch.value.originalSchema = deepClone(formSchema.value);
+  }
+});
+
+const designerOptions = computed(() => {
+  return {
+    sanitizeConfig: {
+      addTags: ['iframe'],
+      ALLOWED_TAGS: ['iframe'],
+    },
+    noDefaultSubmitButton: false,
+    builder: {
+      ...FormDesignerBuilderOptions,
+      customControls: {
+        ...FormDesignerBuilderOptions.customControls,
+        components: {
+          ...FormDesignerBuilderOptions.customControls.components,
+          simplefile: form.value.userType !== ID_MODE.value.PUBLIC,
+        },
+      },
     },
-    onShowClosePreviewDialog() {
-      this.showHelpLinkDialog = !this.showHelpLinkDialog;
+    language: locale.value ? locale.value : 'en',
+    i18n: formioIl8next,
+    templates: templateExtensions,
+    evalContext: {
+      token: tokenParsed.value,
+      user: user.value,
     },
-    // ----------------------------------------------------------------------------------/ FormIO Handlers
-
-    // ---------------------------------------------------------------------------------------------------
-    // Patch History
-    // ---------------------------------------------------------------------------------------------------
-    onSchemaChange(_changed, flags, modified) {
-      // If the form changed but was not done so through the undo
-      // or redo button
-      if (!this.patch.undoClicked && !this.patch.redoClicked) {
-        // flags and modified are defined when a component is added
-        if (flags !== undefined && modified !== undefined) {
-          // Component was pasted here or edited and saved
-          if (this.patch.componentAddedStart) {
-            this.addPatchToHistory();
-          } else {
-            // Tab changed, Edit saved, paste occurred
-            if (typeof modified == 'boolean') {
-              // Tab changed
-              this.resetHistoryFlags();
-            } else {
-              // Edit saved or paste occurred
-              this.addPatchToHistory();
-            }
-          }
-          this.canSave = true;
-          modified?.components?.map((comp) => {
-            if (comp.key === 'form') {
-              const notificationStore = useNotificationStore();
-              const msg = this.$t('trans.formDesigner.fieldnameError', {
-                label: comp.label,
-              });
-              notificationStore.addNotification({
-                text: msg,
-                consoleError: msg,
-              });
-              this.canSave = false;
-            }
-          });
-        } else {
-          // If we removed a component but not during an add action
-          if (
-            (!this.patch.componentAddedStart &&
-              this.patch.componentRemovedStart) ||
-            this.patch.componentMovedStart
-          ) {
-            // Component was removed or moved
-            this.addPatchToHistory();
-          }
-        }
+  };
+});
+
+const DISPLAY_VERSION = computed(() =>
+  form.value?.versions?.length ? form.value.versions.length + 1 : 1
+);
+
+const ID_MODE = computed(() => IdentityMode);
+
+// ---------------------------------------------------------------------------------------------------
+// FormIO event handlers
+// ---------------------------------------------------------------------------------------------------
+function init() {
+  formStore.setDirtyFlag(false);
+}
+
+function onChangeMethod(changed, flags, modified) {
+  // Don't call an unnecessary action if already dirty
+  if (!form.value.isDirty) formStore.setDirtyFlag(true);
+
+  onSchemaChange(changed, flags, modified);
+}
+
+function onRenderMethod() {
+  const el = document.querySelector('input.builder-sidebar_search:focus');
+  if (el === '') reRenderFormIo.value += 1;
+  formStore.setDirtyFlag(false);
+}
+
+function onAddSchemaComponent(_info, _parent, _path, _index, isNew) {
+  if (isNew) {
+    // Component Add Start, the user can still cancel/remove the add
+    patch.value.componentAddedStart = true;
+  } else {
+    // The user has initiated a move
+    patch.value.componentMovedStart = true;
+  }
+}
+
+function onRemoveSchemaComponent() {
+  // Component remove start
+  patch.value.componentRemovedStart = true;
+}
+// ----------------------------------------------------------------------------------/ FormIO Handlers
+
+// ---------------------------------------------------------------------------------------------------
+// Patch History
+// ---------------------------------------------------------------------------------------------------
+function onSchemaChange(_changed, flags, modified) {
+  // If the form changed but was not done so through the undo
+  // or redo button
+  if (!patch.value.undoClicked && !patch.value.redoClicked) {
+    // flags and modified are defined when a component is added
+    if (flags !== undefined && modified !== undefined) {
+      // Component was added into the form and save was clicked
+      if (patch.value.componentAddedStart) {
+        addPatchToHistory();
       } else {
-        // We pressed undo or redo, so we just ignore
-        // adding the action to the history
-        this.patch.undoClicked = false;
-        this.patch.redoClicked = false;
-        this.resetHistoryFlags();
-      }
-    },
-    addPatchToHistory() {
-      // Determine if there is even a difference with the action
-      const frm = this.getPatch(this.patch.index + 1);
-      const ptch = compare(frm, this.formSchema);
-
-      if (ptch.length > 0) {
-        this.canSave = true;
-        this.savedStatus = 'Save';
-        this.isFormSaved = false;
-        // Remove any actions past the action we were on
-        this.patch.index += 1;
-        if (this.patch.history.length > 0) {
-          this.patch.history.length = this.patch.index;
-        }
-        // Add the patch to the history
-        this.patch.history.push(ptch);
-
-        // If we've exceeded the limit on actions
-        if (this.patch.history.length > this.patch.MAX_PATCHES) {
-          // We need to set the original schema to the first patch
-          const newHead = this.getPatch(0);
-          this.patch.originalSchema = newHead;
-          this.patch.history.shift();
-          --this.patch.index;
+        // Tab changed, Edit saved, paste occurred
+        if (typeof modified == 'boolean') {
+          // Tab changed
+          resetHistoryFlags();
+        } else {
+          // Edit saved or paste occurred
+          addPatchToHistory();
         }
       }
-      this.resetHistoryFlags();
-    },
-    getPatch(idx) {
-      // Generate the form from the original schema
-      let frm = deepClone(this.patch.originalSchema);
-      if (this.patch.index > -1 && this.patch.history.length > 0) {
-        // Apply all patches until we reach the requested patch
-        for (let i = -1; i < idx; i++) {
-          let ptch = this.patch.history[i + 1];
-          if (ptch !== undefined) {
-            // remove reactivity from the form so we don't affect the original schema
-            frm = deepClone(applyPatch(frm, ptch).newDocument);
-          }
+      canSave.value = true;
+      modified?.components?.map((comp) => {
+        if (comp.key === 'form') {
+          const notificationStore = useNotificationStore();
+          const msg = t('trans.formDesigner.fieldnameError', {
+            label: comp.label,
+          });
+          notificationStore.addNotification({
+            text: msg,
+            consoleError: msg,
+          });
+          canSave.value = false;
         }
+      });
+    } else {
+      // If we removed a component but not during an add action
+      if (
+        (!patch.value.componentAddedStart &&
+          patch.value.componentRemovedStart) ||
+        patch.value.componentMovedStart
+      ) {
+        // Component was removed or moved
+        addPatchToHistory();
       }
-      return frm;
-    },
-    async undoPatchFromHistory() {
-      // Only allow undo if there was an action made
-      if (this.canUndoPatch()) {
-        this.savedStatus = 'Save';
-        this.isFormSaved = false;
-        this.canSave = true;
-        // Flag for formio to know we are setting the form
-        this.patch.undoClicked = true;
-        this.formSchema = this.getPatch(--this.patch.index);
-        this.reRenderFormIo += 1;
-      }
-    },
-    async redoPatchFromHistory() {
-      // Only allow redo if there was an action made
-      if (this.canRedoPatch()) {
-        this.savedStatus = 'Save';
-        this.isFormSaved = false;
-        this.canSave = true;
-        // Flag for formio to know we are setting the form
-        this.patch.redoClicked = true;
-        this.formSchema = this.getPatch(++this.patch.index);
-        this.reRenderFormIo += 1;
-      }
-    },
-    resetHistoryFlags(flag = false) {
-      this.patch.componentAddedStart = flag;
-      this.patch.componentMovedStart = flag;
-      this.patch.componentRemovedStart = flag;
-    },
-    canUndoPatch() {
-      return (
-        this.patch.history.length &&
-        this.patch.index >= 0 &&
-        this.patch.index < this.patch.history.length
-      );
-    },
-    canRedoPatch() {
-      return (
-        this.patch.history.length &&
-        this.patch.index < this.patch.history.length - 1
-      );
-    },
-    undoEnabled() {
-      return this.canUndoPatch();
-    },
-    redoEnabled() {
-      return this.canRedoPatch();
-    },
+    }
+  } else {
+    // We pressed undo or redo, so we just ignore
+    // adding the action to the history
+    patch.value.undoClicked = false;
+    patch.value.redoClicked = false;
+    resetHistoryFlags();
+  }
+}
 
-    // ---------------------------------------------------------------------------------------------------
-    // Saving the Schema
-    // ---------------------------------------------------------------------------------------------------
-    async submitFormSchema() {
-      this.saving = true;
-      await this.setDirtyFlag(false);
-      try {
-        this.saving = true;
-        this.savedStatus = 'Saving';
-
-        // Once the form is done disable the "leave site/page" messages so they can quit without getting whined at
-        await this.setDirtyFlag(false);
-
-        if (this.formId) {
-          if (this.versionId) {
-            // If creating a new draft from an existing version
-            await this.schemaCreateDraftFromVersion();
-          } else if (this.draftId) {
-            // If updating an existing draft
-            await this.schemaUpdateExistingDraft();
-          }
-        } else {
-          // If creating a new form, add the form and a draft
-          await this.schemaCreateNew();
-        }
+function addPatchToHistory() {
+  // Determine if there is even a difference with the action
+  const frm = getPatch(patch.value.index + 1);
+  const ptch = compare(frm, formSchema.value);
+
+  if (ptch.length > 0) {
+    canSave.value = true;
+    savedStatus.value = 'Save';
+    isFormSaved.value = false;
+    // Remove any actions past the action we were on
+    patch.value.index += 1;
+    if (patch.value.history.length > 0) {
+      patch.value.history.length = patch.value.index;
+    }
+    // Add the patch to the history
+    patch.value.history.push(ptch);
+
+    // If we've exceeded the limit on actions
+    if (patch.value.history.length > patch.value.MAX_PATCHES) {
+      // We need to set the original schema to the first patch
+      const newHead = getPatch(0);
+      patch.value.originalSchema = newHead;
+      patch.value.history.shift();
+      --patch.value.index;
+    }
+  }
+  resetHistoryFlags();
+}
 
-        this.savedStatus = 'Saved';
-        this.isFormSaved = true;
-        this.canSave = false;
-      } catch (error) {
-        await this.setDirtyFlag(true);
-        const notificationStore = useNotificationStore();
-        this.savedStatus = 'Not Saved';
-        this.isFormSaved = false;
-        notificationStore.addNotification({
-          text: this.$t('trans.formDesigner.formDesignSaveErrMsg'),
-          consoleError: this.$t(
-            'trans.formDesigner.formSchemaImportConsoleErrMsg',
-            {
-              formId: this.formId,
-              versionId: this.versionId,
-              draftId: this.draftId,
-              error: error,
-            }
-          ),
-        });
-      } finally {
-        this.saving = false;
+function getPatch(idx) {
+  // Generate the form from the original schema
+  let frm = deepClone(patch.value.originalSchema);
+  if (patch.value.index > -1 && patch.value.history.length > 0) {
+    // Apply all patches until we reach the requested patch
+    for (let i = -1; i < idx; i++) {
+      let ptch = patch.value.history[i + 1];
+      if (ptch !== undefined) {
+        // remove reactivity from the form so we don't affect the original schema
+        frm = deepClone(applyPatch(frm, ptch).newDocument);
       }
-    },
-    async onUndoClick() {
-      this.undoPatchFromHistory();
-    },
-    async onRedoClick() {
-      this.redoPatchFromHistory();
-    },
+    }
+  }
+  return frm;
+}
 
-    async schemaCreateNew() {
-      const response = await formService.createForm({
-        name: this.form.name,
-        description: this.form.description,
-        schema: this.formSchema,
-        identityProviders: generateIdps({
-          idps: this.form.idps,
-          userType: this.form.userType,
-        }),
-        sendSubmissionReceivedEmail: this.form.sendSubmissionReceivedEmail,
-        enableSubmitterDraft: this.form.enableSubmitterDraft,
-        enableCopyExistingSubmission: this.form.enableCopyExistingSubmission,
-        wideFormLayout: this.form.wideFormLayout,
-        enableStatusUpdates: this.form.enableStatusUpdates,
-        showSubmissionConfirmation: this.form.showSubmissionConfirmation,
-        submissionReceivedEmails: this.form.submissionReceivedEmails,
-        reminder_enabled: false,
-        deploymentLevel: this.form.deploymentLevel,
-        ministry: this.form.ministry,
-        apiIntegration: this.form.apiIntegration,
-        useCase: this.form.useCase,
-        labels: this.form.labels,
-      });
-      // update user labels with any new added labels
-      if (
-        this.form.labels.some((label) => this.userLabels.indexOf(label) === -1)
-      ) {
-        const response = await userService.updateUserLabels(this.form.labels);
-        this.userLabels = response.data;
+async function undoPatchFromHistory() {
+  // Only allow undo if there was an action made
+  if (canUndoPatch()) {
+    savedStatus.value = 'Save';
+    isFormSaved.value = false;
+    canSave.value = true;
+    // Flag for formio to know we are setting the form
+    patch.value.undoClicked = true;
+    formSchema.value = getPatch(--patch.value.index);
+    reRenderFormIo.value += 1;
+  }
+}
+
+async function redoPatchFromHistory() {
+  // Only allow redo if there was an action made
+  if (canRedoPatch()) {
+    savedStatus.value = 'Save';
+    isFormSaved.value = false;
+    canSave.value = true;
+    // Flag for formio to know we are setting the form
+    patch.value.redoClicked = true;
+    formSchema.value = getPatch(++patch.value.index);
+    reRenderFormIo.value += 1;
+  }
+}
+
+function resetHistoryFlags(flag = false) {
+  patch.value.componentAddedStart = flag;
+  patch.value.componentMovedStart = flag;
+  patch.value.componentRemovedStart = flag;
+}
+
+function canUndoPatch() {
+  return (
+    patch.value.history.length &&
+    patch.value.index >= 0 &&
+    patch.value.index < patch.value.history.length
+  );
+}
+
+function canRedoPatch() {
+  return (
+    patch.value.history.length &&
+    patch.value.index < patch.value.history.length - 1
+  );
+}
+
+function undoEnabled() {
+  return canUndoPatch();
+}
+
+function redoEnabled() {
+  return canRedoPatch();
+}
+// ----------------------------------------------------------------------------------/ Patch History
+
+// ---------------------------------------------------------------------------------------------------
+// Saving the Schema
+// ---------------------------------------------------------------------------------------------------
+async function submitFormSchema() {
+  try {
+    saving.value = true;
+    savedStatus.value = 'Saving';
+
+    // Once the form is done disable the "leave site/page" messages so they can quit without getting whined at
+    await formStore.setDirtyFlag(false);
+
+    if (properties.formId) {
+      if (properties.versionId) {
+        // If creating a new draft from an existing version
+        await schemaCreateDraftFromVersion();
+      } else if (properties.draftId) {
+        // If updating an existing draft
+        await schemaUpdateExistingDraft();
       }
+    } else {
+      // If creating a new form, add the form and a draft
+      await schemaCreateNew();
+    }
 
-      // Navigate back to this page with ID updated
-      this.$router
-        .push({
-          name: 'FormDesigner',
-          query: {
-            f: response.data.id,
-            d: response.data.draft.id,
-            sv: true,
-            svs: 'Saved',
-          },
-        })
-        .catch(() => {});
-    },
-    async schemaCreateDraftFromVersion() {
-      const { data } = await formService.createDraft(this.formId, {
-        schema: this.formSchema,
-        formVersionId: this.versionId,
-      });
+    savedStatus.value = 'Saved';
+    isFormSaved.value = true;
+    canSave.value = false;
+  } catch (error) {
+    await formStore.setDirtyFlag(true);
+    savedStatus.value = 'Not Saved';
+    isFormSaved.value = false;
+    notificationStore.addNotification({
+      text: t('trans.formDesigner.formDesignSaveErrMsg'),
+      consoleError: t('trans.formDesigner.formSchemaImportConsoleErrMsg', {
+        formId: properties.formId,
+        versionId: properties.versionId,
+        draftId: properties.draftId,
+        error: error,
+      }),
+    });
+  } finally {
+    saving.value = false;
+  }
+}
 
-      // Navigate back to this page with ID updated
-      this.$router.push({
-        name: 'FormDesigner',
-        query: {
-          f: this.formId,
-          d: data.id,
-          sv: true,
-          svs: 'Saved',
-        },
-      });
-    },
-    async schemaUpdateExistingDraft() {
-      await formService.updateDraft(this.formId, this.draftId, {
-        schema: this.formSchema,
-      });
+async function onUndoClick() {
+  undoPatchFromHistory();
+}
 
-      // Update this route with saved flag
-      this.$router.replace({
-        name: 'FormDesigner',
-        query: { ...this.$route.query, sv: true, svs: 'Saved' },
-      });
-    },
+async function onRedoClick() {
+  redoPatchFromHistory();
+}
 
-    // ----------------------------------------------------------------------------------/ Patch History
-  },
-};
-</script>
+async function schemaCreateNew() {
+  const response = await formService.createForm({
+    name: form.value.name,
+    description: form.value.description,
+    schema: formSchema.value,
+    identityProviders: generateIdps({
+      idps: form.value.idps,
+      userType: form.value.userType,
+    }),
+    sendSubmissionReceivedEmail: form.value.sendSubmissionReceivedEmail,
+    enableSubmitterDraft: form.value.enableSubmitterDraft,
+    enableCopyExistingSubmission: form.value.enableCopyExistingSubmission,
+    wideFormLayout: form.value.wideFormLayout,
+    enableStatusUpdates: form.value.enableStatusUpdates,
+    showSubmissionConfirmation: form.value.showSubmissionConfirmation,
+    submissionReceivedEmails: form.value.submissionReceivedEmails,
+    reminder_enabled: false,
+    deploymentLevel: form.value.deploymentLevel,
+    ministry: form.value.ministry,
+    apiIntegration: form.value.apiIntegration,
+    useCase: form.value.useCase,
+    labels: form.value.labels,
+  });
+  // update user labels with any new added labels
+  if (
+    form.value.labels.some((label) => userLabels.value.indexOf(label) === -1)
+  ) {
+    const userLabelResponse = await userService.updateUserLabels(
+      form.value.labels
+    );
+    userLabels.value = userLabelResponse.data;
+  }
+
+  // Navigate back to this page with ID updated
+  router.push({
+    name: 'FormDesigner',
+    query: {
+      f: response.data.id,
+      d: response.data.draft.id,
+      sv: true,
+      svs: 'Saved',
+    },
+  });
+}
+
+async function schemaCreateDraftFromVersion() {
+  const { data } = await formService.createDraft(properties.formId, {
+    schema: formSchema.value,
+    formVersionId: properties.versionId,
+  });
+
+  // Navigate back to this page with ID updated
+  router.push({
+    name: 'FormDesigner',
+    query: {
+      f: properties.formId,
+      d: data.id,
+      sv: true,
+      svs: 'Saved',
+    },
+  });
+}
 
+async function schemaUpdateExistingDraft() {
+  await formService.updateDraft(properties.formId, properties.draftId, {
+    schema: formSchema.value,
+  });
+
+  // Update this route with saved flag
+  router.replace({
+    name: 'FormDesigner',
+    query: { ...router.currentRoute.value.query, sv: true, svs: 'Saved' },
+  });
+}
+// ----------------------------------------------------------------------------------/ Saving the Schema
+async function setProxyHeaders() {
+  try {
+    let response = await formService.getProxyHeaders({
+      formId: properties.formId,
+      versionId: properties.versionId,
+    });
+    // error checking for response
+    sessionStorage.setItem(
+      'X-CHEFS-PROXY-DATA',
+      response.data['X-CHEFS-PROXY-DATA']
+    );
+  } catch (error) {
+    notificationStore.addNotification({
+      text: 'Failed to set proxy headers',
+      consoleError: error,
+    });
+  }
+}
+
+async function getFormSchema() {
+  try {
+    let res;
+    if (properties.versionId) {
+      // Making a new draft from a previous version
+      res = await formService.readVersion(
+        properties.formId,
+        properties.versionId
+      );
+    } else if (properties.draftId) {
+      // Editing an existing draft
+      res = await formService.readDraft(properties.formId, properties.draftId);
+    }
+    formSchema.value = {
+      ...formSchema.value,
+      ...res.data.schema,
+    };
+    if (patch.value.history.length === 0) {
+      // We are fetching an existing form, so we get the original schema here because
+      // using the original schema in the mount will give you the default schema
+      patch.value.originalSchema = deepClone(formSchema.value);
+    }
+    reRenderFormIo.value += 1;
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formDesigner.formLoadErrMsg'),
+      consoleError: t('trans.formDesigner.formLoadConsoleErrMsg', {
+        formId: properties.formId,
+        versionId: properties.versionId,
+        draftId: properties.draftId,
+        error: error,
+      }),
+    });
+  }
+}
+
+async function loadFile(event) {
+  try {
+    const result = await importFormSchemaFromFile(event.target.files[0]);
+
+    formSchema.value = JSON.parse(result);
+    addPatchToHistory();
+    patch.value.undoClicked = false;
+    patch.value.redoClicked = false;
+    resetHistoryFlags();
+    // Key-changing to force a re-render of the formio component when we want to load a new schema after the page is already in
+    reRenderFormIo.value += 1;
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formDesigner.formSchemaImportErrMsg'),
+      consoleError: t('trans.formDesigner.formSchemaImportConsoleErrMsg', {
+        error: error,
+      }),
+    });
+  }
+}
+
+defineExpose({ designerOptions, reRenderFormIo });
+</script>
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
-    <div
-      class="mt-6 d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse gapRow"
-    >
+    <div class="d-flex flex-wrap">
       <!-- page title -->
-      <div :lang="locale">
+      <div :lang="locale" class="flex-1-0">
         <h1>{{ $t('trans.formDesigner.formDesign') }}</h1>
         <h3 v-if="form.name">{{ form.name }}</h3>
-        <em :lang="locale"
-          >{{ $t('trans.formDesigner.version') }} : {{ displayVersion }}</em
-        >
       </div>
       <!-- buttons -->
-      <div>
-        <v-tooltip location="bottom">
-          <template #activator="{ props }">
-            <v-btn
-              class="mx-1"
-              color="primary"
-              icon
-              size="x-small"
-              v-bind="props"
-              :title="$t('trans.formDesigner.exportDesign')"
-              @click="onExportClick"
-            >
-              <v-icon icon="mdi:mdi-download"></v-icon>
-            </v-btn>
-          </template>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-column ma-2" style="align-items: center">
           <span :lang="locale">{{
             $t('trans.formDesigner.exportDesign')
           }}</span>
-        </v-tooltip>
-        <v-tooltip location="bottom">
-          <template #activator="{ props }">
-            <v-btn
-              class="mx-1"
-              color="primary"
-              icon
-              size="x-small"
-              v-bind="props"
-              :title="$t('trans.formDesigner.importDesign')"
-              @click="$refs.uploader.click()"
-            >
-              <v-icon icon="mdi:mdi-publish"></v-icon>
-              <input
-                ref="uploader"
-                class="d-none"
-                type="file"
-                accept=".json"
-                @change="loadFile"
-              />
-            </v-btn>
-          </template>
+          <v-btn
+            class="mx-1"
+            color="primary"
+            icon
+            size="x-small"
+            :title="$t('trans.formDesigner.exportDesign')"
+            @click="exportFormSchema(form.name, formSchema, form.snake)"
+          >
+            <v-icon icon="mdi:mdi-download"></v-icon>
+          </v-btn>
+        </div>
+        <div class="d-flex flex-column ma-2" style="align-items: center">
           <span :lang="locale">{{
             $t('trans.formDesigner.importDesign')
           }}</span>
-        </v-tooltip>
+          <v-btn
+            class="mx-1"
+            color="primary"
+            icon
+            size="x-small"
+            :title="$t('trans.formDesigner.importDesign')"
+            @click="$refs.uploader.click()"
+          >
+            <v-icon icon="mdi:mdi-publish"></v-icon>
+            <input
+              ref="uploader"
+              class="d-none"
+              type="file"
+              accept=".json"
+              @change="loadFile"
+            />
+          </v-btn>
+        </div>
+      </div>
+    </div>
+    <div>
+      <!-- page version -->
+      <div :lang="locale">
+        <em :lang="locale"
+          >{{ $t('trans.formDesigner.version') }} : {{ DISPLAY_VERSION }}</em
+        >
       </div>
     </div>
     <BaseInfoCard class="my-6" :class="{ 'dir-rtl': isRTL }">
@@ -789,7 +614,6 @@ export default {
       ></p>
     </BaseInfoCard>
     <FormBuilder
-      ref="formioForm"
       :key="reRenderFormIo"
       :form="formSchema"
       :options="designerOptions"
@@ -800,30 +624,18 @@ export default {
       @initialized="init"
       @addComponent="onAddSchemaComponent"
       @removeComponent="onRemoveSchemaComponent"
-      @formLoad="onFormLoad"
-    />
-    <ProactiveHelpPreviewDialog
-      :show-dialog="showHelpLinkDialog"
-      :component="component"
-      :fc-proactive-help-image-url="fcProactiveHelpImageUrl"
-      @close-dialog="onShowClosePreviewDialog"
     />
     <FloatButton
-      placement="bottom-right"
-      :base-f-a-b-items-b-g-color="'#ffffff'"
-      :base-f-a-b-icon-color="'#1976D2'"
-      :base-f-a-b-border-color="'#C0C0C0'"
-      :fab-z-index="1"
-      :size="'small'"
-      fab-items-gap="7px"
-      :saving="saving"
+      class="position-fixed bottom-0"
+      style="right: 0"
       :saved-status="savedStatus"
-      :saved="saved"
       :is-form-saved="isFormSaved"
+      :new-version="newVersion"
+      :is-saving="saving"
+      :saved="saved"
       :can-save="canSave"
       :form-id="formId"
       :draft-id="draftId"
-      :new-version="newVersion"
       :undo-enabled="undoEnabled() === 0 ? false : undoEnabled()"
       :redo-enabled="redoEnabled() === 0 ? false : redoEnabled()"
       @undo="onUndoClick"
@@ -832,37 +644,3 @@ export default {
     />
   </div>
 </template>
-
-<style lang="scss">
-/* disable router-link */
-.disabled-router {
-  pointer-events: none;
-}
-
-.formSubmit {
-  background-color: red;
-}
-
-.formExport {
-  position: sticky;
-  top: 0;
-  right: 0;
-
-  position: -webkit-sticky;
-}
-
-.formImport {
-  position: sticky;
-  top: 0;
-  right: 0;
-
-  position: -webkit-sticky;
-}
-.formSetting {
-  position: sticky;
-  top: 0;
-  right: 0;
-
-  position: -webkit-sticky;
-}
-</style>
diff --git a/app/frontend/src/components/designer/FormDisclaimer.vue b/app/frontend/src/components/designer/FormDisclaimer.vue
index 7863a8c3f..6a96c71ee 100644
--- a/app/frontend/src/components/designer/FormDisclaimer.vue
+++ b/app/frontend/src/components/designer/FormDisclaimer.vue
@@ -1,19 +1,12 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
 import { useFormStore } from '~/store/form';
 
-export default {
-  setup() {
-    const { locale } = useI18n({ useScope: 'global' });
+const { locale } = useI18n({ useScope: 'global' });
 
-    return { locale };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-  },
-};
+const { isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
diff --git a/app/frontend/src/components/designer/FormSettings.vue b/app/frontend/src/components/designer/FormSettings.vue
index 634d3c2e9..deb8c434f 100644
--- a/app/frontend/src/components/designer/FormSettings.vue
+++ b/app/frontend/src/components/designer/FormSettings.vue
@@ -1,31 +1,21 @@
-<script>
-import { mapState, mapWritableState } from 'pinia';
-import FormAccessSettings from '~/components/designer/settings/FormAccessSettings.vue';
+<script setup>
+import { storeToRefs } from 'pinia';
+
 import FormGeneralSettings from '~/components/designer/settings/FormGeneralSettings.vue';
+import FormAccessSettings from '~/components/designer/settings/FormAccessSettings.vue';
 import FormFunctionalitySettings from '~/components/designer/settings/FormFunctionalitySettings.vue';
-import FormScheduleSettings from '~/components/designer/settings/FormScheduleSettings.vue';
 import FormSubmissionSettings from '~/components/designer/settings/FormSubmissionSettings.vue';
+import FormScheduleSettings from '~/components/designer/settings/FormScheduleSettings.vue';
 import { useFormStore } from '~/store/form';
 
-export default {
-  components: {
-    FormAccessSettings,
-    FormGeneralSettings,
-    FormFunctionalitySettings,
-    FormScheduleSettings,
-    FormSubmissionSettings,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    ...mapWritableState(useFormStore, ['form']),
-    ...mapState(useFormStore, ['isFormPublished', 'isRTL']),
-  },
-};
+});
+
+const { form, isFormPublished, isRTL } = storeToRefs(useFormStore());
 </script>
 
 <template>
diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index 74ddcc4c4..42c6714e2 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -1,8 +1,17 @@
-<script>
+<script setup>
 import { Form } from '@formio/vue';
 import _ from 'lodash';
-import { mapActions, mapState } from 'pinia';
+import { storeToRefs } from 'pinia';
+import {
+  computed,
+  onBeforeUpdate,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import FormViewerActions from '~/components/designer/FormViewerActions.vue';
@@ -21,1130 +30,1127 @@ import {
 } from '~/utils/transformUtils';
 import { FormPermissions, NotificationTypes } from '~/utils/constants';
 
-export default {
-  components: {
-    BaseDialog,
-    formio: Form,
-    FormViewerActions,
-    FormViewerMultiUpload,
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const router = useRouter();
+
+const emit = defineEmits(['submission-updated']);
+
+const properties = defineProps({
+  displayTitle: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    displayTitle: {
-      type: Boolean,
-      default: false,
-    },
-    draftId: {
-      type: String,
-      default: null,
-    },
-    formId: {
-      type: String,
-      default: null,
-    },
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    preview: Boolean,
-    staffEditMode: {
-      type: Boolean,
-      default: false,
-    },
-    saved: {
-      type: Boolean,
-      default: false,
-    },
-    submissionId: {
-      type: String,
-      default: null,
-    },
-    versionId: {
-      type: String,
-      default: null,
-    },
-    isDuplicate: {
-      type: Boolean,
-      default: false,
-    },
+  draftId: {
+    type: String,
+    default: null,
   },
-  emits: ['submission-updated'],
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
-
-    return { t, locale };
+  formId: {
+    type: String,
+    default: null,
   },
-  data() {
-    return {
-      allowSubmitterToUploadFile: false,
-      block: false,
-      bulkFile: false,
-      confirmSubmit: false,
-      currentForm: {},
-      downloadTimeout: null,
-      doYouWantToSaveTheDraft: false,
-      forceNewTabLinks: true,
-      form: {},
-      formDataEntered: false,
-      formElement: undefined,
-      formFields: [],
-      formSchema: {},
-      isFormScheduleExpired: false,
-      isLateSubmissionAllowed: false,
-      isLoading: false,
-      json_csv: {
-        data: [],
-        file_name: String,
-      },
-      loadingSubmission: false,
-      permissions: [],
-      reRenderFormIo: 0,
-      saveDraftDialog: false,
-      saveDraftState: 0,
-      saving: false,
-      sbdMessage: {
-        message: String,
-        error: Boolean,
-        upload_state: Number,
-        response: [],
-        file_name: String,
-        typeError: Number,
-      },
-      showModal: false,
-      showSubmitConfirmDialog: false,
-      submission: { data: { lateEntry: false } },
-      submissionRecord: {},
-      version: 0,
-      versionIdToSubmitTo: this.versionId,
-      isAuthorized: true,
-    };
+  readOnly: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    ...mapState(useAppStore, ['config']),
-    ...mapState(useAuthStore, [
-      'authenticated',
-      'keycloak',
-      'tokenParsed',
-      'user',
-    ]),
-    ...mapState(useFormStore, ['downloadedFile', 'isRTL']),
-
-    formScheduleExpireMessage() {
-      return this.$t('trans.formViewer.formScheduleExpireMessage');
-    },
-    formUnauthorizedMessage() {
-      return this.$t('trans.formViewer.formUnauthorizedMessage');
-    },
-    NOTIFICATIONS_TYPES() {
-      return NotificationTypes;
-    },
-    viewerOptions() {
-      // Force recomputation of viewerOptions after rerendered formio to prevent duplicate submission update calls
-      this.reRenderFormIo;
-
-      return {
-        sanitizeConfig: {
-          addTags: ['iframe'],
-          ALLOWED_TAGS: ['iframe'],
-        },
-        templates: templateExtensions,
-        readOnly: this.readOnly,
-        hooks: {
-          beforeSubmit: this.onBeforeSubmit,
-        },
-        // pass in options for custom components to use
-        componentOptions: {
-          simplefile: {
-            config: this.config,
-            chefsToken: this.getCurrentAuthHeader,
-            deleteFile: this.deleteFile,
-            getFile: this.getFile,
-            uploadFile: this.uploadFile,
-          },
-        },
-        evalContext: {
-          token: this.tokenParsed,
-          user: this.user,
-        },
-      };
-    },
-    canSaveDraft() {
-      return (
-        !this.readOnly &&
-        this.permissions.includes(FormPermissions.SUBMISSION_UPDATE)
-      );
-    },
+  preview: Boolean,
+  staffEditMode: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    lang() {
-      this.reRenderFormIo += 1;
-    },
+  saved: {
+    type: Boolean,
+    default: false,
   },
-  async mounted() {
-    // load up headers for any External API calls
-    // from components.
-    await this.setProxyHeaders();
-    if (this.submissionId && this.isDuplicate) {
-      // Run when make new submission from existing one called. Get the
-      // published version of form, and then get the submission data.
-      await this.getFormSchema();
-      await this.getFormData();
-    } else if (this.submissionId && !this.isDuplicate) {
-      await this.getFormData();
-    } else {
-      this.showModal = true;
-      await this.getFormSchema();
-    }
-    window.addEventListener('beforeunload', this.beforeWindowUnload);
-
-    this.reRenderFormIo += 1;
+  submissionId: {
+    type: String,
+    default: null,
   },
-  beforeUnmount() {
-    window.removeEventListener('beforeunload', this.beforeWindowUnload);
-    clearTimeout(this.downloadTimeout);
+  versionId: {
+    type: String,
+    default: null,
   },
-  beforeUpdate() {
-    if (this.forceNewTabLinks) {
-      attachAttributesToLinks(this.formSchema.components);
-    }
+  isDuplicate: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    ...mapActions(useFormStore, ['downloadFile']),
-    ...mapActions(useNotificationStore, ['addNotification']),
-    isFormPublic: isFormPublic,
-    getCurrentAuthHeader() {
-      return `Bearer ${this.keycloak.token}`;
-    },
-    async getFormData() {
-      function iterate(obj, stack, fields, propNeeded) {
-        //Get property path from nested object
-        for (let property in obj) {
-          const innerObject = obj[property];
-
-          if (propNeeded === property) {
-            fields = fields + stack + '.' + property;
-            return fields.replace(/^\./, '');
-          } else if (Array.isArray(innerObject)) {
-            // When the form contains a Data Grid there will be an array that
-            // needs to be checked, and an array of properties to be unset.
-            const fieldsArray = [];
-            for (let i = 0; i < innerObject.length; i++) {
-              const next = iterate(
-                innerObject[i],
-                stack + '.' + property + '[' + i + ']',
-                fields,
-                propNeeded
-              );
-
-              if (next) {
-                fieldsArray.push(next);
-              }
-            }
-
-            if (fieldsArray.length > 0) {
-              return fieldsArray;
-            }
-          } else if (typeof innerObject === 'object') {
-            return iterate(
-              innerObject,
-              stack + '.' + property,
-              fields,
-              propNeeded
-            );
-          }
-        }
-      }
+});
 
-      function deleteFieldData(fieldcomponent, submission) {
-        if (Object.prototype.hasOwnProperty.call(fieldcomponent, 'columns')) {
-          // It's a layout component that has columns.
-          fieldcomponent.columns.map((subComponent) => {
-            deleteFieldData(subComponent, submission);
-          });
-        } else if (
-          Object.prototype.hasOwnProperty.call(fieldcomponent, 'components')
-        ) {
-          // It's a layout component that has subcomponents, such as a panel.
-          fieldcomponent.components.map((subComponent) => {
-            deleteFieldData(subComponent, submission);
-          });
-        } else if (fieldcomponent?.validate?.isUseForCopy === false) {
-          const fieldPath = iterate(submission, '', '', fieldcomponent.key);
-          if (Array.isArray(fieldPath)) {
-            for (let path of fieldPath) {
-              _.unset(submission, path);
-            }
-          } else if (fieldPath) {
-            _.unset(submission, fieldPath);
-          }
-        }
-      }
+const block = ref(false);
+const bulkFile = ref(false);
+const chefForm = ref(null);
+const confirmSubmit = ref(false);
+const currentForm = ref({});
+const downloadTimeout = ref(null);
+const doYouWantToSaveTheDraft = ref(false);
+const forceNewTabLinks = ref(true);
+const form = ref({});
+const formDataEntered = ref(false);
+const formElement = ref(undefined);
+const formFields = ref([]);
+const formSchema = ref({});
+const isFormScheduleExpired = ref(false);
+const isLateSubmissionAllowed = ref(false);
+const isLoading = ref(false);
+const json_csv = ref({
+  data: [],
+  file_name: String,
+});
+const loadingSubmission = ref(false);
+const permissions = ref([]);
+const reRenderFormIo = ref(0);
+const saveDraftDialog = ref(false);
+const saveDraftState = ref(0);
+const saving = ref(false);
+const sbdMessage = ref({
+  message: String,
+  error: Boolean,
+  upload_state: Number,
+  response: [],
+  file_name: String,
+  typeError: Number,
+});
+const showModal = ref(false);
+const showSubmitConfirmDialog = ref(false);
+const submission = ref({ data: { lateEntry: false } });
+const submissionRecord = ref({});
+const version = ref(0);
+const versionIdToSubmitTo = ref(properties.versionId);
+const isAuthorized = ref(true);
 
-      try {
-        this.loadingSubmission = true;
-        const response = await formService.getSubmission(this.submissionId);
-        this.submissionRecord = Object.assign({}, response.data.submission);
-        this.submission = this.submissionRecord.submission;
-        this.showModal =
-          this.submission.data.submit ||
-          this.submission.data.state == 'submitted' ||
-          !this.submissionRecord.draft ||
-          this.readOnly
-            ? false
-            : true;
-        this.form = response.data.form;
-        this.versionIdToSubmitTo = this.versionIdToSubmitTo
-          ? this.versionIdToSubmitTo
-          : response.data?.version?.id;
-        if (!this.isDuplicate) {
-          //As we know this is a Submission from existing one so we will wait for the latest version to be set on the getFormSchema
-          this.formSchema = response.data.version.schema;
-          this.version = response.data.version.version;
-        } else {
-          if (
-            response.data?.version?.schema?.components &&
-            response.data?.version?.schema?.components.length
-          ) {
-            response.data.version.schema.components.map((component) => {
-              deleteFieldData(component, this.submission); //Delete all the fields data that are not enabled for duplication
-            });
-          }
-        }
-        // Get permissions
-        if (!this.staffEditMode && !isFormPublic(this.form)) {
-          const permRes = await rbacService.getUserSubmissions({
-            formSubmissionId: this.submissionId,
-          });
-          this.permissions = permRes.data[0] ? permRes.data[0].permissions : [];
-        }
-      } catch (error) {
-        this.addNotification({
-          text: this.$t('trans.formViewer.getUsersSubmissionsErrMsg'),
-          consoleError: this.$t(
-            'trans.formViewer.getUsersSubmissionsConsoleErrMsg',
-            { submissionId: this.submissionId, error: error }
-          ),
-        });
-      } finally {
-        this.loadingSubmission = false;
-      }
-    },
-    async setProxyHeaders() {
-      try {
-        let response = await formService.getProxyHeaders({
-          formId: this.formId,
-          versionId: this.versionId,
-          submissionId: this.submissionId,
-        });
-        // error checking for response
-        sessionStorage.setItem(
-          'X-CHEFS-PROXY-DATA',
-          response.data['X-CHEFS-PROXY-DATA']
-        );
-      } catch (error) {
-        // need error handling
-      }
-    },
-    // Get the form definition/schema
-    async getFormSchema() {
-      try {
-        let response = undefined;
-        if (this.versionId) {
-          this.versionIdToSubmitTo = this.versionId;
-          // If getting for a specific older version of the form
-          response = await formService.readVersion(this.formId, this.versionId);
-          if (!response.data || !response.data.schema) {
-            throw new Error(
-              this.$t('trans.formViewer.readVersionErrMsg', {
-                versionId: this.versionId,
-              })
-            );
-          }
-          this.form = response.data;
-          this.version = response.data.version;
-          this.formSchema = response.data.schema;
-        } else if (this.draftId) {
-          // If getting for a specific draft version of the form for preview
-          response = await formService.readDraft(this.formId, this.draftId);
-          if (!response.data || !response.data.schema) {
-            throw new Error(
-              this.$t('trans.formViewer.readDraftErrMsg', {
-                draftId: this.draftId,
-              })
-            );
-          }
-          this.form = response.data;
-          this.formSchema = response.data.schema;
-        } else {
-          // If getting the HEAD form version (IE making a new submission)
-          response = await formService.readPublished(this.formId);
-          if (
-            !response.data ||
-            !response.data.versions ||
-            !response.data.versions[0]
-          ) {
-            this.$router.push({
-              name: 'Alert',
-              query: {
-                text: this.$t('trans.formViewer.alertRouteMsg'),
-                type: 'info',
-              },
-            });
-            return;
-          }
-          this.form = response.data;
-          this.version = response.data.versions[0].version;
-          this.versionIdToSubmitTo = response.data.versions[0].id;
-          this.formSchema = response.data.versions[0].schema;
-
-          if (response.data.schedule && response.data.schedule.expire) {
-            let formScheduleStatus = response.data.schedule;
-            this.isFormScheduleExpired = formScheduleStatus.expire;
-            this.isLateSubmissionAllowed =
-              formScheduleStatus.allowLateSubmissions;
-            this.formScheduleExpireMessage = formScheduleStatus.message;
-          }
-        }
-      } catch (error) {
-        if (this.authenticated) {
-          // if 401 error, the user is not authorized to view the form
-          if (error.response && error.response.status === 401) {
-            this.isAuthorized = false;
-          } else {
-            // throw a generic error message
-            this.addNotification({
-              text: this.$t('trans.formViewer.fecthingFormErrMsg'),
-              consoleError: this.$t(
-                'trans.formViewer.fecthingFormConsoleErrMsg',
-                {
-                  versionId: this.versionId,
-                  error: error,
-                }
-              ),
-            });
-          }
-        }
-      }
-    },
-    toggleBlock(e) {
-      this.block = e;
-    },
-    formChange(e) {
-      // if draft check validation on render
-      if (this.submissionRecord.draft) {
-        this.$refs.chefForm.formio.checkValidity(null, true, null, false);
-      }
-      if (e.changed != undefined && !e.changed.flags.fromSubmission) {
-        this.formDataEntered = true;
-      }
+const appStore = useAppStore();
+const authStore = useAuthStore();
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
 
-      // Seems to be the only place the form changes on load
-      this.jsonManager();
-    },
-    jsonManager() {
-      this.json_csv.file_name = 'template_' + this.form.name + '_' + Date.now();
-      if (this.$refs.chefForm?.formio) {
-        this.formElement = this.$refs.chefForm.formio;
-        this.json_csv.data = [
-          JSON.parse(JSON.stringify(this.formElement._data)),
-          JSON.parse(JSON.stringify(this.formElement._data)),
-        ];
-      }
+const { config } = storeToRefs(appStore);
+const { authenticated, keycloak, tokenParsed, user } = storeToRefs(authStore);
+const { downloadedFile, isRTL } = storeToRefs(formStore);
+
+const formScheduleExpireMessage = computed(() =>
+  t('trans.formViewer.formScheduleExpireMessage')
+);
+
+const formUnauthorizedMessage = computed(() =>
+  t('trans.formViewer.formUnauthorizedMessage')
+);
+
+const NOTIFICATIONS_TYPES = computed(() => NotificationTypes);
+
+const viewerOptions = computed(() => {
+  // Force recomputation of viewerOptions after rerendered formio to prevent duplicate submission update calls
+  reRenderFormIo.value;
+
+  return {
+    sanitizeConfig: {
+      addTags: ['iframe'],
+      ALLOWED_TAGS: ['iframe'],
     },
-    resetMessage() {
-      this.sbdMessage.message = undefined;
-      this.sbdMessage.error = false;
-      this.sbdMessage.upload_state = 0;
-      this.sbdMessage.response = [];
-      this.sbdMessage.file_name = undefined;
-      this.sbdMessage.typeError = -1;
-      this.block = false;
+    templates: templateExtensions,
+    readOnly: properties.readOnly,
+    hooks: {
+      beforeSubmit: onBeforeSubmit,
     },
-    async saveBulkData(submissions) {
-      const payload = {
-        draft: true,
-        submission: Object.freeze({ data: submissions }),
-      };
-      this.block = true;
-      this.sendMultiSubmissionData(payload);
+    // pass in options for custom components to use
+    componentOptions: {
+      simplefile: {
+        config: config.value,
+        chefsToken: getCurrentAuthHeader,
+        deleteFile: deleteFile,
+        getFile: getFile,
+        uploadFile: uploadFile,
+      },
     },
-    async sendMultiSubmissionData(body) {
-      try {
-        this.saving = true;
-        let response = await formService.createMultiSubmission(
-          this.formId,
-          this.versionIdToSubmitTo,
-          body
-        );
-        if ([200, 201].includes(response.status)) {
-          // all is good, flag no errors and carry on...
-          // store our submission result...
-          this.sbdMessage.message = this.$t(
-            'trans.formViewer.multiDraftUploadSuccess'
-          );
-          this.sbdMessage.error = false;
-          this.sbdMessage.upload_state = 10;
-          this.sbdMessage.response = [];
-          this.block = false;
-          this.saving = false;
-          this.addNotification({
-            text: this.sbdMessage.message,
-            ...NotificationTypes.SUCCESS,
-          });
-        } else {
-          this.sbdMessage.message = this.$t(
-            'trans.formViewer.failedResSubmissn',
-            {
-              status: response.status,
-            }
-          );
-          this.sbdMessage.error = true;
-          this.sbdMessage.upload_state = 10;
-          this.block = false;
-          this.sbdMessage.response = [
-            { error_message: this.$t('trans.formViewer.errSubmittingForm') },
-          ];
-          this.sbdMessage.file_name =
-            'error_report_' + this.form.name + '_' + Date.now();
-          this.saving = false;
-          this.$t('trans.formViewer.errSubmittingForm');
-          throw new Error(
-            this.$t('trans.formViewer.failedResSubmissn', {
-              status: response.status,
-            })
-          );
-        }
-      } catch (error) {
-        this.saving = false;
-        this.block = false;
-        this.setFinalError(error);
-        this.addNotification({
-          text: this.sbdMessage.message,
-          consoleError: this.$t('trans.formViewer.errorSavingFile', {
-            fileName: this.json_csv.file_name,
-            error: error,
-          }),
-        });
-      }
+    evalContext: {
+      token: tokenParsed.value,
+      user: user.value,
     },
-    async setFinalError(error) {
-      try {
-        if (error.response.data != undefined) {
-          this.sbdMessage.message =
-            error.response.data.title == undefined
-              ? this.$t('trans.formViewer.errSubmittingForm')
-              : error.response.data.title;
-          this.sbdMessage.error = true;
-          this.sbdMessage.upload_state = 10;
-          this.sbdMessage.response =
-            error.response.data.reports == undefined
-              ? [
-                  {
-                    error_message: this.$t(
-                      'trans.formViewer.errSubmittingForm'
-                    ),
-                  },
-                ]
-              : await this.formatResponse(error.response.data.reports);
-          this.sbdMessage.file_name =
-            'error_report_' + this.form.name + '_' + Date.now();
-        } else {
-          this.sbdMessage.message = this.$t(
-            'trans.formViewer.errSubmittingForm'
+  };
+});
+
+const canSaveDraft = computed(
+  () =>
+    !properties.readOnly &&
+    permissions.value.includes(FormPermissions.SUBMISSION_UPDATE)
+);
+
+watch(locale, () => {
+  reRenderFormIo.value += 1;
+});
+
+onMounted(async () => {
+  // load up headers for any External API calls
+  // from components.
+  await setProxyHeaders();
+  if (properties.submissionId && properties.isDuplicate) {
+    // Run when make new submission from existing one called. Get the
+    // published version of form, and then get the submission data.
+    await getFormSchema();
+    await getFormData();
+  } else if (properties.submissionId && !properties.isDuplicate) {
+    await getFormData();
+  } else {
+    showModal.value = true;
+    await getFormSchema();
+  }
+  window.addEventListener('beforeunload', beforeWindowUnload);
+
+  reRenderFormIo.value += 1;
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', beforeWindowUnload);
+  clearTimeout(downloadTimeout.value);
+});
+
+onBeforeUpdate(() => {
+  if (forceNewTabLinks.value) {
+    attachAttributesToLinks(formSchema.value.components);
+  }
+});
+
+function getCurrentAuthHeader() {
+  return `Bearer ${keycloak.value.token}`;
+}
+
+async function getFormData() {
+  function iterate(obj, stack, fields, propNeeded) {
+    //Get property path from nested object
+    for (let property in obj) {
+      const innerObject = obj[property];
+
+      if (propNeeded === property) {
+        fields = fields + stack + '.' + property;
+        return fields.replace(/^\./, '');
+      } else if (Array.isArray(innerObject)) {
+        // When the form contains a Data Grid there will be an array that
+        // needs to be checked, and an array of properties to be unset.
+        const fieldsArray = [];
+        for (let i = 0; i < innerObject.length; i++) {
+          const next = iterate(
+            innerObject[i],
+            stack + '.' + property + '[' + i + ']',
+            fields,
+            propNeeded
           );
-          this.sbdMessage.error = true;
-          this.sbdMessage.upload_state = 10;
-          this.sbdMessage.response = [
-            { error_message: this.$t('trans.formViewer.errSubmittingForm') },
-          ];
-          this.sbdMessage.file_name =
-            'error_report_' + this.form.name + '_' + Date.now();
-        }
-      } catch (error_2) {
-        this.sbdMessage.message = this.$t('trans.formViewer.errSubmittingForm');
-        this.sbdMessage.error = true;
-        this.sbdMessage.upload_state = 10;
-        this.sbdMessage.response = [
-          { error_message: this.$t('trans.formViewer.errSubmittingForm') },
-        ];
-        this.sbdMessage.file_name =
-          'error_report_' + this.form.name + '_' + Date.now();
-      }
-    },
-    buildValidationFromComponent(obj) {
-      if (obj?.component?.validate) {
-        let validatorIdentity = '';
-        Object.keys(obj.component.validate).forEach((validity) => {
-          switch (validity) {
-            case 'maxSelectedCount':
-              if (obj.component.validate.maxSelectedCount) {
-                validatorIdentity +=
-                  '|maxSelectedCount:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'minSelectedCount':
-              if (obj.component.validate.minSelectedCount) {
-                validatorIdentity +=
-                  '|minSelectedCount:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'multiple':
-              if (obj.component.validate.multiple) {
-                validatorIdentity +=
-                  '|multiple:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'onlyAvailableItems':
-              if (obj.component.validate.onlyAvailableItems) {
-                validatorIdentity +=
-                  '|onlyAvailableItems:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'required':
-              if (obj.component.validate.required) {
-                validatorIdentity +=
-                  '|required:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'strictDateValidation':
-              if (obj.component.validate.strictDateValidation) {
-                validatorIdentity +=
-                  '|strictDateValidation:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'unique':
-              if (obj.component.validate.unique) {
-                validatorIdentity +=
-                  '|unique:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'custom':
-              if (obj.component.validate.custom.length) {
-                validatorIdentity +=
-                  '|custom:' +
-                  obj.component.validate[validity].trim().replaceAll(',', '‚');
-              }
-              break;
-
-            case 'customMessage':
-              if (obj.component.validate.customMessage) {
-                validatorIdentity +=
-                  '|customMessage:' +
-                  obj.component.validate[validity].trim().replaceAll(',', '‚');
-              }
-              break;
-
-            case 'customPrivate':
-              if (obj.component.validate.customPrivate) {
-                validatorIdentity +=
-                  '|customPrivate:' + obj.component.validate[validity].trim();
-              }
-              break;
-
-            case 'json':
-              if (obj.component.validate.json) {
-                validatorIdentity +=
-                  '|json:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'pattern':
-              if (obj.component.validate.pattern) {
-                validatorIdentity +=
-                  '|pattern:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'maxWords':
-              if (obj.component.validate.maxWords) {
-                validatorIdentity +=
-                  '|maxWords:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'minWords':
-              if (obj.component.validate.minWords) {
-                validatorIdentity +=
-                  '|minWords:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'maxLength':
-              if (obj.component.validate.maxLength) {
-                validatorIdentity +=
-                  '|maxLength:' + obj.component.validate[validity];
-              }
-              break;
-
-            case 'minLength':
-              if (obj.component.validate.minLength) {
-                validatorIdentity +=
-                  '|minLength:' + obj.component.validate[validity];
-              }
-              break;
-
-            default:
-              validatorIdentity +=
-                '|' + validity + ':' + obj.component.validate[validity];
-              break;
-          }
-        });
-        return validatorIdentity.replace(/^\|/, '');
-      } else if (obj?.messages[0]?.context?.validator) {
-        return obj.messages[0].context.validator;
-      } else {
-        return 'Unknown';
-      }
-    },
 
-    async frontendFormatResponse(response) {
-      let newResponse = [];
-
-      for (const item of response) {
-        if (item != null && item != undefined) {
-          for (const obj of item.errors) {
-            let error = {};
-
-            if (obj.component != undefined) {
-              error = {
-                submission: item.submission,
-                key: obj.component.key,
-                label: obj.component.label,
-                validator: this.buildValidationFromComponent(obj),
-                error_message: obj.message,
-              };
-            } else {
-              error = {
-                submission: item.submission,
-                key: null,
-                label: null,
-                validator: null,
-                error_message: obj.message,
-              };
-            }
-
-            newResponse.push(error);
+          if (next) {
+            fieldsArray.push(next);
           }
         }
-      }
-
-      return newResponse;
-    },
 
-    async formatResponse(response) {
-      let newResponse = [];
-      await response.forEach((item, index) => {
-        if (item != null && item != undefined) {
-          item.details.forEach((obj) => {
-            let error = {};
-            if (obj.context != undefined) {
-              error = Object({
-                ' submission': index,
-                ' key': obj.context.key,
-                ' label': obj.context.label,
-                ' validator': obj.context.validator,
-                error_message: obj.message,
-              });
-            } else {
-              error = Object({
-                ' submission': index,
-                ' key': null,
-                ' label': null,
-                ' validator': null,
-                error_message: obj.message,
-              });
-            }
-            newResponse.push(error);
-          });
-        }
-      });
-      return newResponse;
-    },
-    async setError(error) {
-      this.sbdMessage = error;
-
-      try {
-        if (error.response.data != undefined) {
-          this.sbdMessage.message =
-            error.response.data.title == undefined
-              ? 'An error occurred submitting this form'
-              : error.response.data.title;
-          this.sbdMessage.error = true;
-          this.sbdMessage.upload_state = 10;
-          this.sbdMessage.response =
-            error.response.data.reports == undefined
-              ? [{ error_message: 'An error occurred submitting this form' }]
-              : await this.frontendFormatResponse(error.response.data.reports);
-          this.sbdMessage.file_name =
-            'error_report_' + this.form.name + '_' + Date.now();
-        } else {
-          this.sbdMessage.message = 'An error occurred submitting this form';
-          this.sbdMessage.error = true;
-          this.sbdMessage.upload_state = 10;
-          this.sbdMessage.response = [
-            { error_message: 'An error occurred submitting this form' },
-          ];
-          this.sbdMessage.file_name =
-            'error_report_' + this.form.name + '_' + Date.now();
+        if (fieldsArray.length > 0) {
+          return fieldsArray;
         }
-      } catch (error_2) {
-        this.sbdMessage.message = 'An error occurred submitting this form';
-        this.sbdMessage.error = true;
-        this.sbdMessage.upload_state = 10;
-        this.sbdMessage.response = [
-          { error_message: 'An error occurred submitting this form' },
-        ];
-        this.sbdMessage.file_name =
-          'error_report_' + this.form.name + '_' + Date.now();
-      }
-    },
-    async saveDraft() {
-      try {
-        this.saving = true;
-
-        const response = await this.sendSubmission(true, this.submission);
-        if (this.submissionId) {
-          // Editing an existing draft
-          // Update this route with saved flag
-          if (!this.saved) {
-            this.$router.replace({
-              name: 'UserFormDraftEdit',
-              query: { ...this.$route.query, sv: true },
-            });
-          }
-          this.saving = false;
-        } else {
-          // Creating a new submission in draft state
-          // Go to the user form draft page
-          this.$router.push({
-            name: 'UserFormDraftEdit',
-            query: {
-              s: response.data.id,
-              sv: true,
-            },
-          });
-        }
-        this.showSubmitConfirmDialog = false;
-        this.saveDraftDialog = false;
-      } catch (error) {
-        this.addNotification({
-          text: this.$t('trans.formViewer.savingDraftErrMsg'),
-          consoleError: this.$t('trans.formViewer.fecthingFormConsoleErrMsg', {
-            submissionId: this.submissionId,
-            error: error,
-          }),
-        });
-      }
-    },
-    async sendSubmission(isDraft, sub) {
-      sub.data.lateEntry =
-        this.form?.schedule?.expire !== undefined &&
-        this.form.schedule.expire === true
-          ? this.form.schedule.allowLateSubmissions
-          : false;
-      const body = {
-        draft: isDraft,
-        submission: sub,
-      };
-
-      let response;
-      //let's check if this is a submission from existing one, If isDuplicate then create new submission if now isDuplicate then update the submission
-      if (this.submissionId && !this.isDuplicate) {
-        // Updating an existing submission
-        response = await formService.updateSubmission(this.submissionId, body);
-      } else {
-        // Adding a new submission
-        response = await formService.createSubmission(
-          this.formId,
-          this.versionIdToSubmitTo,
-          body
-        );
-      }
-      return response;
-    },
-    onFormRender() {
-      if (this.isLoading) this.isLoading = false;
-    },
-    // -----------------------------------------------------------------------------------------
-    // FormIO Events
-    // -----------------------------------------------------------------------------------------
-    // https://help.form.io/developers/form-renderer#form-events
-    // event order is:
-    // onSubmitButton
-    // onBeforeSubmit
-    // if no errors: onSubmit -> onSubmitDone
-    // else onSubmitError
-    onSubmitButton(event) {
-      if (this.preview) {
-        alert(this.$t('trans.formViewer.submissionsPreviewAlert'));
-        return;
-      }
-      // this is our first event in the submission chain.
-      // most important thing here is ensuring that the formio form does not have an action, or else it POSTs to that action.
-      // console.info('onSubmitButton()') ; // eslint-disable-line no-console
-      this.currentForm = event.instance.parent.root;
-      this.currentForm.form.action = undefined;
-
-      // if form has drafts enabled in form settings, show 'confirm submit?' dialog
-      if (this.form.enableSubmitterDraft) {
-        this.showSubmitConfirmDialog = true;
-      }
-    },
-    // If the confirm modal pops up on drafts
-    continueSubmit() {
-      this.confirmSubmit = true;
-      this.showSubmitConfirmDialog = false;
-    },
-    // formIO hook, prior to a submission occurring
-    // We can cancel a formIO submission event here, or go on
-    async onBeforeSubmit(submission, next) {
-      // dont do anything if previewing the form
-      if (this.preview) {
-        // Force re-render form.io to reset submit button state
-        this.reRenderFormIo += 1;
-        return;
+      } else if (typeof innerObject === 'object') {
+        return iterate(innerObject, stack + '.' + property, fields, propNeeded);
       }
+    }
+  }
 
-      // if form has drafts enabled in form setttings,
-      if (this.form.enableSubmitterDraft) {
-        // while 'confirm submit?' dialog is open..
-        while (this.showSubmitConfirmDialog) {
-          // await a promise that never resolves to block this thread
-          await new Promise((resolve) => setTimeout(resolve, 500));
-        }
-        if (this.confirmSubmit) {
-          this.confirmSubmit = false; // clear for next attempt
-          next();
-        } else {
-          // Force re-render form.io to reset submit button state
-          this.reRenderFormIo += 1;
+  function deleteFieldData(fieldcomponent, submission) {
+    if (Object.prototype.hasOwnProperty.call(fieldcomponent, 'columns')) {
+      // It's a layout component that has columns.
+      fieldcomponent.columns.map((subComponent) => {
+        deleteFieldData(subComponent, submission);
+      });
+    } else if (
+      Object.prototype.hasOwnProperty.call(fieldcomponent, 'components')
+    ) {
+      // It's a layout component that has subcomponents, such as a panel.
+      fieldcomponent.components.map((subComponent) => {
+        deleteFieldData(subComponent, submission);
+      });
+    } else if (fieldcomponent?.validate?.isUseForCopy === false) {
+      const fieldPath = iterate(submission, '', '', fieldcomponent.key);
+      if (Array.isArray(fieldPath)) {
+        for (let path of fieldPath) {
+          _.unset(submission, path);
         }
-      } else {
-        next();
+      } else if (fieldPath) {
+        _.unset(submission, fieldPath);
       }
-    },
-    // FormIO submit event
-    // eslint-disable-next-line no-unused-vars
-    async onSubmit(sub) {
-      if (this.preview) {
-        alert(this.$t('trans.formViewer.submissionsPreviewAlert'));
-        this.confirmSubmit = false;
-        return;
+    }
+  }
+
+  try {
+    loadingSubmission.value = true;
+    const response = await formService.getSubmission(properties.submissionId);
+    submissionRecord.value = Object.assign({}, response.data.submission);
+    submission.value = submissionRecord.value.submission;
+    showModal.value =
+      submission.value.data.submit ||
+      submission.value.data.state == 'submitted' ||
+      !submissionRecord.value.draft ||
+      properties.readOnly
+        ? false
+        : true;
+    form.value = response.data.form;
+    versionIdToSubmitTo.value = versionIdToSubmitTo.value
+      ? versionIdToSubmitTo.value
+      : response.data?.version?.id;
+    if (!properties.isDuplicate) {
+      //As we know this is a Submission from existing one so we will wait for the latest version to be set on the getFormSchema
+      formSchema.value = response.data.version.schema;
+      version.value = response.data.version.version;
+    } else {
+      if (
+        response.data?.version?.schema?.components &&
+        response.data?.version?.schema?.components.length
+      ) {
+        response.data.version.schema.components.map((component) => {
+          deleteFieldData(component, submission.value); //Delete all the fields data that are not enabled for duplication
+        });
       }
+    }
+    // Get permissions
+    if (!properties.staffEditMode && !isFormPublic(form.value)) {
+      const permRes = await rbacService.getUserSubmissions({
+        formSubmissionId: properties.submissionId,
+      });
+      permissions.value = permRes.data[0] ? permRes.data[0].permissions : [];
+    }
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formViewer.getUsersSubmissionsErrMsg'),
+      consoleError: t('trans.formViewer.getUsersSubmissionsConsoleErrMsg', {
+        submissionId: properties.submissionId,
+        error: error,
+      }),
+    });
+  } finally {
+    loadingSubmission.value = false;
+  }
+}
 
-      const errors = await this.doSubmit(sub);
+async function setProxyHeaders() {
+  try {
+    let response = await formService.getProxyHeaders({
+      formId: properties.formId,
+      versionId: properties.versionId,
+      submissionId: properties.submissionId,
+    });
+    // error checking for response
+    sessionStorage.setItem(
+      'X-CHEFS-PROXY-DATA',
+      response.data['X-CHEFS-PROXY-DATA']
+    );
+  } catch (error) {
+    // need error handling
+  }
+}
 
-      // if we are here, the submission has been saved to our db
-      // the passed in submission is the formio submission, not our db persisted submission record...
-      // fire off the submitDone event.
-      if (errors) {
-        this.addNotification({
-          text: errors,
-          consoleError: this.$t('trans.formViewer.submissionsSubmitErrMsg', {
-            errors: errors,
-          }),
-        });
-      } else {
-        this.currentForm.events.emit('formio.submitDone');
+// Get the form definition/schema
+async function getFormSchema() {
+  try {
+    let response = undefined;
+    if (properties.versionId) {
+      versionIdToSubmitTo.value = properties.versionId;
+      // If getting for a specific older version of the form
+      response = await formService.readVersion(
+        properties.formId,
+        properties.versionId
+      );
+      if (!response.data || !response.data.schema) {
+        throw new Error(
+          t('trans.formViewer.readVersionErrMsg', {
+            versionId: properties.versionId,
+          })
+        );
       }
-    },
-    // Not a formIO event, our saving routine to POST the submission to our API
-    async doSubmit(sub) {
-      // since we are not using formio api
-      // we should do the actual submit here, and return any error that occurrs to handle in the submit event
-      let errMsg = undefined;
-      try {
-        const response = await this.sendSubmission(false, sub);
-
-        if ([200, 201].includes(response.status)) {
-          // all is good, flag no errors and carry on...
-          // store our submission result...
-          this.submissionRecord = Object.assign(
-            {},
-            this.submissionId && this.isDuplicate //Check if this submission is creating with the existing one
-              ? response.data
-              : this.submissionId && !this.isDuplicate
-              ? response.data.submission
-              : response.data
-          );
-        } else {
-          throw new Error(
-            this.$t('trans.formViewer.sendSubmissionErrMsg', {
-              status: response.status,
-            })
-          );
-        }
-      } catch (error) {
-        console.error(error); // eslint-disable-line no-console
-        errMsg = this.$t('trans.formViewer.errMsg');
-      } finally {
-        this.confirmSubmit = false;
+      form.value = response.data;
+      version.value = response.data.version;
+      formSchema.value = response.data.schema;
+    } else if (properties.draftId) {
+      // If getting for a specific draft version of the form for preview
+      response = await formService.readDraft(
+        properties.formId,
+        properties.draftId
+      );
+      if (!response.data || !response.data.schema) {
+        throw new Error(
+          t('trans.formViewer.readDraftErrMsg', {
+            draftId: properties.draftId,
+          })
+        );
       }
-      return errMsg;
-    },
-    async onSubmitDone() {
-      // huzzah!
-      // really nothing to do, the formio button has consumed the event and updated its display
-      // is there anything here for us to do?
-      // console.info('onSubmitDone()') ; // eslint-disable-line no-console
-      if (this.staffEditMode) {
-        // updating an existing submission on the staff side
-        this.$emit('submission-updated');
-      } else {
-        // User created new submission
-        this.$router.push({
-          name: 'FormSuccess',
+      form.value = response.data;
+      formSchema.value = response.data.schema;
+    } else {
+      // If getting the HEAD form version (IE making a new submission)
+      response = await formService.readPublished(properties.formId);
+      if (
+        !response ||
+        !response.data ||
+        !response.data.versions ||
+        !response.data.versions[0]
+      ) {
+        router.push({
+          name: 'Alert',
           query: {
-            s: this.submissionRecord.id,
+            text: t('trans.formViewer.alertRouteMsg'),
+            type: 'info',
           },
         });
-      }
-    },
-    // Custom Event triggered from buttons with Action type "Event"
-    onCustomEvent(event) {
-      alert(
-        this.$t('trans.formViewer.customEventAlert', { event: event.type })
-      );
-    },
-    switchView() {
-      if (!this.bulkFile) {
-        this.showdoYouWantToSaveTheDraftModalForSwitch();
         return;
       }
-      this.bulkFile = !this.bulkFile;
-    },
-    showdoYouWantToSaveTheDraftModalForSwitch() {
-      this.saveDraftState = 1;
-      if (this.formDataEntered && this.showModal) {
-        this.doYouWantToSaveTheDraft = true;
-      } else {
-        this.leaveThisPage();
-      }
-    },
-    showdoYouWantToSaveTheDraftModal() {
-      if (!this.bulkFile) {
-        this.saveDraftState = 0;
-        if (
-          (this.submissionId == undefined || this.formDataEntered) &&
-          this.showModal &&
-          this.form.enableSubmitterDraft
-        ) {
-          this.doYouWantToSaveTheDraft = true;
-        } else this.leaveThisPage();
-      } else {
-        this.leaveThisPage();
-      }
-    },
-    leaveThisPage() {
-      if (this.saveDraftState == 0 || this.bulkFile) {
-        this.$router.push({
-          name: 'UserSubmissions',
-          query: { f: this.form.id },
-        });
-      } else {
-        this.bulkFile = !this.bulkFile;
+      form.value = response.data;
+      version.value = response.data.versions[0].version;
+      versionIdToSubmitTo.value = response.data.versions[0].id;
+      formSchema.value = response.data.versions[0].schema;
+
+      if (response.data.schedule && response.data.schedule.expire) {
+        let formScheduleStatus = response.data.schedule;
+        isFormScheduleExpired.value = formScheduleStatus.expire;
+        isLateSubmissionAllowed.value = formScheduleStatus.allowLateSubmissions;
       }
-    },
-    yes() {
-      this.saveDraftFromModal(true);
-    },
-    no() {
-      this.saveDraftFromModal(false);
-    },
-    saveDraftFromModal(event) {
-      this.doYouWantToSaveTheDraft = false;
-      if (event) {
-        this.saveDraftFromModalNow();
+    }
+  } catch (error) {
+    if (authenticated.value) {
+      // if 401 error, the user is not authorized to view the form
+      if (error.response && error.response.status === 401) {
+        isAuthorized.value = false;
       } else {
-        this.leaveThisPage();
-      }
-    },
-    // Custom Event triggered from buttons with Action type "Event"
-    async saveDraftFromModalNow() {
-      try {
-        this.saving = true;
-        await this.sendSubmission(true, this.submission);
-        this.saving = false;
-        // Creating a new submission in draft state
-        // Go to the user form draft page
-        this.leaveThisPage();
-        this.showSubmitConfirmDialog = false;
-      } catch (error) {
-        this.addNotification({
-          text: this.$t('trans.formViewer.submittingDraftErrMsg'),
-          consoleError: this.$t('trans.formViewer.submittingDraftConsErrMsg', {
-            submissionId: this.submissionId,
+        // throw a generic error message
+        notificationStore.addNotification({
+          text: t('trans.formViewer.fecthingFormErrMsg'),
+          consoleError: t('trans.formViewer.fecthingFormConsoleErrMsg', {
+            versionId: properties.versionId,
             error: error,
           }),
         });
       }
-    },
-    closeBulkYesOrNo() {
-      this.doYouWantToSaveTheDraft = false;
-    },
-    beforeWindowUnload(e) {
-      if (!this.preview && !this.readOnly) {
-        e.preventDefault();
-        e.returnValue = '';
+    }
+  }
+}
+
+function toggleBlock(e) {
+  block.value = e;
+}
+
+function formChange(e) {
+  // if draft check validation on render
+  if (submissionRecord.value.draft) {
+    chefForm.value.formio.checkValidity(null, true, null, false);
+  }
+  if (e.changed != undefined && !e.changed.flags.fromSubmission) {
+    formDataEntered.value = true;
+  }
+
+  // Seems to be the only place the form changes on load
+  jsonManager();
+}
+
+function jsonManager() {
+  json_csv.value.file_name = 'template_' + form.value.name + '_' + Date.now();
+  if (chefForm.value?.formio) {
+    formElement.value = chefForm.value.formio;
+    json_csv.value.data = [
+      JSON.parse(JSON.stringify(formElement.value._data)),
+      JSON.parse(JSON.stringify(formElement.value._data)),
+    ];
+  }
+}
+
+function resetMessage() {
+  sbdMessage.value.message = undefined;
+  sbdMessage.value.error = false;
+  sbdMessage.value.upload_state = 0;
+  sbdMessage.value.response = [];
+  sbdMessage.value.file_name = undefined;
+  sbdMessage.value.typeError = -1;
+  block.value = false;
+}
+
+async function saveBulkData(submissions) {
+  const payload = {
+    draft: true,
+    submission: Object.freeze({ data: submissions }),
+  };
+  block.value = true;
+  sendMultiSubmissionData(payload);
+}
+
+async function sendMultiSubmissionData(body) {
+  try {
+    saving.value = true;
+    let response = await formService.createMultiSubmission(
+      properties.formId,
+      versionIdToSubmitTo.value,
+      body
+    );
+    if ([200, 201].includes(response.status)) {
+      // all is good, flag no errors and carry on...
+      // store our submission result...
+      sbdMessage.value.message = t('trans.formViewer.multiDraftUploadSuccess');
+      sbdMessage.value.error = false;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response = [];
+      block.value = false;
+      saving.value = false;
+      notificationStore.addNotification({
+        text: sbdMessage.value.message,
+        ...NotificationTypes.SUCCESS,
+      });
+    } else {
+      sbdMessage.value.message = t('trans.formViewer.failedResSubmissn', {
+        status: response.status,
+      });
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      block.value = false;
+      sbdMessage.value.response = [
+        { error_message: t('trans.formViewer.errSubmittingForm') },
+      ];
+      sbdMessage.value.file_name =
+        'error_report_' + form.value.name + '_' + Date.now();
+      saving.value = false;
+      throw new Error(
+        t('trans.formViewer.failedResSubmissn', {
+          status: response.status,
+        })
+      );
+    }
+  } catch (error) {
+    saving.value = false;
+    block.value = false;
+    setFinalError(error);
+    notificationStore.addNotification({
+      text: sbdMessage.value.message,
+      consoleError: t('trans.formViewer.errorSavingFile', {
+        fileName: json_csv.value.file_name,
+        error: error,
+      }),
+    });
+  }
+}
+
+async function setFinalError(error) {
+  try {
+    if (error.response.data != undefined) {
+      sbdMessage.value.message =
+        error.response.data.title == undefined
+          ? t('trans.formViewer.errSubmittingForm')
+          : error.response.data.title;
+      sbdMessage.value.response =
+        error.response.data.reports == undefined
+          ? [
+              {
+                error_message: t('trans.formViewer.errSubmittingForm'),
+              },
+            ]
+          : await formatResponse(error.response.data.reports);
+    } else {
+      sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
+      sbdMessage.value.response = [
+        { error_message: t('trans.formViewer.errSubmittingForm') },
+      ];
+    }
+  } catch (error_2) {
+    sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
+    sbdMessage.value.response = [
+      { error_message: t('trans.formViewer.errSubmittingForm') },
+    ];
+  } finally {
+    sbdMessage.value.error = true;
+    sbdMessage.value.upload_state = 10;
+    sbdMessage.value.file_name =
+      'error_report_' + form.value.name + '_' + Date.now();
+  }
+}
+
+function buildValidationFromComponent(obj) {
+  if (obj?.component?.validate) {
+    let validatorIdentity = '';
+    Object.keys(obj.component.validate).forEach((validity) => {
+      switch (validity) {
+        case 'maxSelectedCount':
+          if (obj.component.validate.maxSelectedCount) {
+            validatorIdentity +=
+              '|maxSelectedCount:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'minSelectedCount':
+          if (obj.component.validate.minSelectedCount) {
+            validatorIdentity +=
+              '|minSelectedCount:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'multiple':
+          if (obj.component.validate.multiple) {
+            validatorIdentity +=
+              '|multiple:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'onlyAvailableItems':
+          if (obj.component.validate.onlyAvailableItems) {
+            validatorIdentity +=
+              '|onlyAvailableItems:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'required':
+          if (obj.component.validate.required) {
+            validatorIdentity +=
+              '|required:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'strictDateValidation':
+          if (obj.component.validate.strictDateValidation) {
+            validatorIdentity +=
+              '|strictDateValidation:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'unique':
+          if (obj.component.validate.unique) {
+            validatorIdentity += '|unique:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'custom':
+          if (obj.component.validate.custom.length) {
+            validatorIdentity +=
+              '|custom:' +
+              obj.component.validate[validity].trim().replaceAll(',', '‚');
+          }
+          break;
+
+        case 'customMessage':
+          if (obj.component.validate.customMessage) {
+            validatorIdentity +=
+              '|customMessage:' +
+              obj.component.validate[validity].trim().replaceAll(',', '‚');
+          }
+          break;
+
+        case 'customPrivate':
+          if (obj.component.validate.customPrivate) {
+            validatorIdentity +=
+              '|customPrivate:' + obj.component.validate[validity].trim();
+          }
+          break;
+
+        case 'json':
+          if (obj.component.validate.json) {
+            validatorIdentity += '|json:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'pattern':
+          if (obj.component.validate.pattern) {
+            validatorIdentity += '|pattern:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'maxWords':
+          if (obj.component.validate.maxWords) {
+            validatorIdentity +=
+              '|maxWords:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'minWords':
+          if (obj.component.validate.minWords) {
+            validatorIdentity +=
+              '|minWords:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'maxLength':
+          if (obj.component.validate.maxLength) {
+            validatorIdentity +=
+              '|maxLength:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'minLength':
+          if (obj.component.validate.minLength) {
+            validatorIdentity +=
+              '|minLength:' + obj.component.validate[validity];
+          }
+          break;
+
+        default:
+          validatorIdentity +=
+            '|' + validity + ':' + obj.component.validate[validity];
+          break;
       }
-    },
-    async deleteFile(file) {
-      const fileId = file?.data?.id
-        ? file.data.id
-        : file?.id
-        ? file.id
-        : undefined;
-      return fileService.deleteFile(fileId);
-    },
-    async getFile(fileId, options = {}) {
-      await this.downloadFile(fileId, options);
-      if (this.downloadedFile && this.downloadedFile.headers) {
-        let data;
-
-        if (
-          this.downloadedFile.headers['content-type'].includes(
-            'application/json'
-          )
-        ) {
-          data = JSON.stringify(this.downloadedFile.data);
+    });
+    return validatorIdentity.replace(/^\|/, '');
+  } else if (obj?.messages[0]?.context?.validator) {
+    return obj.messages[0].context.validator;
+  } else {
+    return 'Unknown';
+  }
+}
+
+async function frontendFormatResponse(response) {
+  let newResponse = [];
+
+  for (const item of response) {
+    if (item != null && item != undefined) {
+      for (const obj of item.errors) {
+        let error = {};
+
+        if (obj.component != undefined) {
+          error = {
+            submission: item.submission,
+            key: obj.component.key,
+            label: obj.component.label,
+            validator: buildValidationFromComponent(obj),
+            error_message: obj.message,
+          };
         } else {
-          data = this.downloadedFile.data;
+          error = {
+            submission: item.submission,
+            key: null,
+            label: null,
+            validator: null,
+            error_message: obj.message,
+          };
         }
 
-        if (typeof data === 'string') {
-          data = new Blob([data], {
-            type: this.downloadedFile.headers['content-type'],
+        newResponse.push(error);
+      }
+    }
+  }
+
+  return newResponse;
+}
+
+async function formatResponse(response) {
+  let newResponse = [];
+  await response.forEach((item, index) => {
+    if (item != null && item != undefined) {
+      item.details.forEach((obj) => {
+        let error = {};
+        if (obj.context != undefined) {
+          error = Object({
+            submission: index,
+            key: obj.context.key,
+            label: obj.context.label,
+            validator: obj.context.validator,
+            error_message: obj.message,
+          });
+        } else {
+          error = Object({
+            submission: index,
+            key: null,
+            label: null,
+            validator: null,
+            error_message: obj.message,
           });
         }
+        newResponse.push(error);
+      });
+    }
+  });
+  return newResponse;
+}
 
-        // don't need to blob because it's already a blob
-        const url = window.URL.createObjectURL(data);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = getDisposition(
-          this.downloadedFile.headers['content-disposition']
-        );
-        a.style.display = 'none';
-        a.classList.add('hiddenDownloadTextElement');
-        document.body.appendChild(a);
-        a.click();
-        this.downloadTimeout = setTimeout(() => {
-          document.body.removeChild(a);
-          URL.revokeObjectURL(a.href);
+async function setError(error) {
+  sbdMessage.value = error;
+
+  try {
+    if (error.response.data != undefined) {
+      sbdMessage.value.message =
+        error.response.data.title == undefined
+          ? 'An error occurred submitting this form'
+          : error.response.data.title;
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response =
+        error.response.data.reports == undefined
+          ? [{ error_message: 'An error occurred submitting this form' }]
+          : await frontendFormatResponse(error.response.data.reports);
+      sbdMessage.value.file_name =
+        'error_report_' + form.value.name + '_' + Date.now();
+    } else {
+      sbdMessage.value.message = 'An error occurred submitting this form';
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response = [
+        { error_message: 'An error occurred submitting this form' },
+      ];
+      sbdMessage.value.file_name =
+        'error_report_' + form.value.name + '_' + Date.now();
+    }
+  } catch (error_2) {
+    sbdMessage.value.message = 'An error occurred submitting this form';
+    sbdMessage.value.error = true;
+    sbdMessage.value.upload_state = 10;
+    sbdMessage.value.response = [
+      { error_message: 'An error occurred submitting this form' },
+    ];
+    sbdMessage.value.file_name =
+      'error_report_' + form.value.name + '_' + Date.now();
+  }
+}
+
+async function saveDraft() {
+  try {
+    saving.value = true;
+
+    const response = await sendSubmission(true, submission.value);
+    if (properties.submissionId && properties.submissionId !== null) {
+      // Editing an existing draft
+      // Update this route with saved flag
+      if (!properties.saved) {
+        await router.replace({
+          name: 'UserFormDraftEdit',
+          query: { ...router.currentRoute.value.query, sv: true },
         });
       }
-    },
-    async uploadFile(file, config = {}) {
-      return fileService.uploadFile(file, config);
-    },
-  },
-};
+      saving.value = false;
+    } else {
+      // Creating a new submission in draft state
+      // Go to the user form draft page
+      await router.push({
+        name: 'UserFormDraftEdit',
+        query: {
+          s: response.data.id,
+          sv: true,
+        },
+      });
+    }
+    showSubmitConfirmDialog.value = false;
+    saveDraftDialog.value = false;
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formViewer.savingDraftErrMsg'),
+      consoleError: t('trans.formViewer.fecthingFormConsoleErrMsg', {
+        submissionId: properties.submissionId,
+        error: error,
+      }),
+    });
+  }
+}
+
+async function sendSubmission(isDraft, sub) {
+  sub.data.lateEntry =
+    form.value?.schedule?.expire !== undefined &&
+    form.value.schedule.expire === true
+      ? form.value.schedule.allowLateSubmissions
+      : false;
+  const body = {
+    draft: isDraft,
+    submission: sub,
+  };
+
+  let response;
+  //let's check if this is a submission from existing one, If isDuplicate then create new submission if now isDuplicate then update the submission
+  if (properties.submissionId && !properties.isDuplicate) {
+    // Updating an existing submission
+    response = await formService.updateSubmission(
+      properties.submissionId,
+      body
+    );
+  } else {
+    // Adding a new submission
+    response = await formService.createSubmission(
+      properties.formId,
+      versionIdToSubmitTo.value,
+      body
+    );
+  }
+
+  return response;
+}
+
+function onFormRender() {
+  if (isLoading.value) isLoading.value = false;
+}
+
+// -----------------------------------------------------------------------------------------
+// FormIO Events
+// -----------------------------------------------------------------------------------------
+// https://help.form.io/developers/form-renderer#form-events
+// event order is:
+// onSubmitButton
+// onBeforeSubmit
+// if no errors: onSubmit -> onSubmitDone
+// else onSubmitError
+function onSubmitButton(event) {
+  if (properties.preview) {
+    alert(t('trans.formViewer.submissionsPreviewAlert'));
+    return;
+  }
+  // this is our first event in the submission chain.
+  // most important thing here is ensuring that the formio form does not have an action, or else it POSTs to that action.
+  // console.info('onSubmitButton()') ; // eslint-disable-line no-console
+  currentForm.value = event.instance.parent.root;
+  currentForm.value.form.action = undefined;
+
+  // if form has drafts enabled in form settings, show 'confirm submit?' dialog
+  if (form.value.enableSubmitterDraft) {
+    showSubmitConfirmDialog.value = true;
+  }
+}
+
+// If the confirm modal pops up on drafts
+function continueSubmit() {
+  confirmSubmit.value = true;
+  showSubmitConfirmDialog.value = false;
+}
+
+// formIO hook, prior to a submission occurring
+// We can cancel a formIO submission event here, or go on
+async function onBeforeSubmit(submission, next) {
+  // dont do anything if previewing the form
+  if (properties.preview) {
+    // Force re-render form.io to reset submit button state
+    reRenderFormIo.value += 1;
+    return;
+  }
+
+  // if form has drafts enabled in form setttings,
+  if (form.value.enableSubmitterDraft) {
+    let timeout;
+    // while 'confirm submit?' dialog is open..
+    while (showSubmitConfirmDialog.value) {
+      // await a promise that never resolves to block this thread
+      await new Promise((resolve) => (timeout = setTimeout(resolve, 500)));
+    }
+    if (confirmSubmit.value) {
+      confirmSubmit.value = false; // clear for next attempt
+      clearTimeout(timeout);
+      next();
+    } else {
+      // Force re-render form.io to reset submit button state
+      reRenderFormIo.value += 1;
+    }
+  } else {
+    next();
+  }
+}
+
+// FormIO submit event
+// eslint-disable-next-line no-unused-vars
+async function onSubmit(sub) {
+  if (properties.preview) {
+    alert(t('trans.formViewer.submissionsPreviewAlert'));
+    confirmSubmit.value = false;
+    return;
+  }
+
+  const errors = await doSubmit(sub);
+
+  // if we are here, the submission has been saved to our db
+  // the passed in submission is the formio submission, not our db persisted submission record...
+  // fire off the submitDone event.
+  if (errors) {
+    notificationStore.addNotification({
+      text: errors,
+      consoleError: t('trans.formViewer.submissionsSubmitErrMsg', {
+        errors: errors,
+      }),
+    });
+  } else {
+    currentForm.value.events.emit('formio.submitDone');
+  }
+}
+
+// Not a formIO event, our saving routine to POST the submission to our API
+async function doSubmit(sub) {
+  // since we are not using formio api
+  // we should do the actual submit here, and return any error that occurrs to handle in the submit event
+  let errMsg = undefined;
+  try {
+    const response = await sendSubmission(false, sub);
+
+    if ([200, 201].includes(response.status)) {
+      // all is good, flag no errors and carry on...
+      // store our submission result...
+      submissionRecord.value = Object.assign(
+        {},
+        properties.submissionId && properties.isDuplicate //Check if this submission is creating with the existing one
+          ? response.data
+          : properties.submissionId && !properties.isDuplicate
+          ? response.data.submission
+          : response.data
+      );
+    } else {
+      throw new Error(
+        t('trans.formViewer.sendSubmissionErrMsg', {
+          status: response.status,
+        })
+      );
+    }
+  } catch (error) {
+    console.error(error); // eslint-disable-line no-console
+    errMsg = t('trans.formViewer.errMsg');
+  } finally {
+    confirmSubmit.value = false;
+  }
+  return errMsg;
+}
+
+async function onSubmitDone() {
+  // huzzah!
+  // really nothing to do, the formio button has consumed the event and updated its display
+  // is there anything here for us to do?
+  // console.info('onSubmitDone()') ; // eslint-disable-line no-console
+  if (properties.staffEditMode) {
+    // updating an existing submission on the staff side
+    emit('submission-updated');
+  } else {
+    // User created new submission
+    router.push({
+      name: 'FormSuccess',
+      query: {
+        s: submissionRecord.value.id,
+      },
+    });
+  }
+}
+
+// Custom Event triggered from buttons with Action type "Event"
+function onCustomEvent(event) {
+  alert(t('trans.formViewer.customEventAlert', { event: event.type }));
+}
+
+function switchView() {
+  if (!bulkFile.value) {
+    showdoYouWantToSaveTheDraftModalForSwitch();
+    return;
+  }
+  bulkFile.value = !bulkFile.value;
+}
+
+function showdoYouWantToSaveTheDraftModalForSwitch() {
+  saveDraftState.value = 1;
+  if (formDataEntered.value && showModal.value) {
+    doYouWantToSaveTheDraft.value = true;
+  } else {
+    leaveThisPage();
+  }
+}
+
+function showdoYouWantToSaveTheDraftModal() {
+  if (!bulkFile.value) {
+    saveDraftState.value = 0;
+    if (
+      (properties.submissionId == undefined || formDataEntered.value) &&
+      showModal.value &&
+      form.value.enableSubmitterDraft
+    ) {
+      doYouWantToSaveTheDraft.value = true;
+    } else leaveThisPage();
+  } else {
+    leaveThisPage();
+  }
+}
+
+function leaveThisPage() {
+  if (saveDraftState.value == 0 || bulkFile.value) {
+    router.push({
+      name: 'UserSubmissions',
+      query: { f: form.value.id },
+    });
+  } else {
+    bulkFile.value = !bulkFile.value;
+  }
+}
+
+function yes() {
+  saveDraftFromModal(true);
+}
+
+function no() {
+  saveDraftFromModal(false);
+}
+
+function saveDraftFromModal(event) {
+  doYouWantToSaveTheDraft.value = false;
+  if (event) {
+    saveDraftFromModalNow();
+  } else {
+    leaveThisPage();
+  }
+}
+
+// Custom Event triggered from buttons with Action type "Event"
+async function saveDraftFromModalNow() {
+  try {
+    saving.value = true;
+    await sendSubmission(true, submission.value);
+    saving.value = false;
+    // Creating a new submission in draft state
+    // Go to the user form draft page
+    leaveThisPage();
+    showSubmitConfirmDialog.value = false;
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formViewer.submittingDraftErrMsg'),
+      consoleError: t('trans.formViewer.submittingDraftConsErrMsg', {
+        submissionId: properties.submissionId,
+        error: error,
+      }),
+    });
+  }
+}
+
+function closeBulkYesOrNo() {
+  doYouWantToSaveTheDraft.value = false;
+}
+
+function beforeWindowUnload(e) {
+  if (!properties.preview && !properties.readOnly) {
+    e.preventDefault();
+    e.returnValue = '';
+  }
+}
+
+async function deleteFile(file) {
+  const fileId = file?.data?.id ? file.data.id : file?.id ? file.id : undefined;
+  return fileService.deleteFile(fileId);
+}
+
+async function getFile(fileId, options = {}) {
+  await formStore.downloadFile(fileId, options);
+  if (downloadedFile.value && downloadedFile.value.headers) {
+    let data;
+
+    if (
+      downloadedFile.value.headers['content-type'].includes('application/json')
+    ) {
+      data = JSON.stringify(downloadedFile.value.data);
+    } else {
+      data = downloadedFile.value.data;
+    }
+
+    if (typeof data === 'string') {
+      data = new Blob([data], {
+        type: downloadedFile.value.headers['content-type'],
+      });
+    }
+
+    // don't need to blob because it's already a blob
+    const url = window.URL.createObjectURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = getDisposition(
+      downloadedFile.value.headers['content-disposition']
+    );
+    a.style.display = 'none';
+    a.classList.add('hiddenDownloadTextElement');
+    document.body.appendChild(a);
+    a.click();
+    downloadTimeout.value = setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(a.href);
+    });
+  }
+}
+
+async function uploadFile(file, config = {}) {
+  return fileService.uploadFile(file, config);
+}
 </script>
 
 <template>
@@ -1297,7 +1303,7 @@ export default {
             @toggleBlock="toggleBlock"
           />
 
-          <formio
+          <Form
             v-if="!bulkFile"
             :key="reRenderFormIo"
             ref="chefForm"
diff --git a/app/frontend/src/components/designer/FormViewerActions.vue b/app/frontend/src/components/designer/FormViewerActions.vue
index 157893406..cd274f32b 100644
--- a/app/frontend/src/components/designer/FormViewerActions.vue
+++ b/app/frontend/src/components/designer/FormViewerActions.vue
@@ -1,98 +1,87 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ManageSubmissionUsers from '~/components/forms/submission/ManageSubmissionUsers.vue';
 import PrintOptions from '~/components/forms/PrintOptions.vue';
 import { FormPermissions } from '~/utils/constants';
+
 import { useFormStore } from '~/store/form';
 
-export default {
-  components: {
-    ManageSubmissionUsers,
-    PrintOptions,
+const { locale } = useI18n({ useScope: 'global' });
+
+const setWideLayout = inject('setWideLayout');
+defineEmits(['save-draft', 'switchView', 'showdoYouWantToSaveTheDraftModal']);
+
+const properties = defineProps({
+  block: {
+    type: Boolean,
+    default: false,
   },
-  inject: ['setWideLayout'],
-  props: {
-    block: {
-      type: Boolean,
-      default: false,
-    },
-    bulkFile: {
-      type: Boolean,
-      default: false,
-    },
-    allowSubmitterToUploadFile: {
-      type: Boolean,
-      default: false,
-    },
-    draftEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    formId: {
-      type: String,
-      default: undefined,
-    },
-    isDraft: {
-      type: Boolean,
-      default: false,
-    },
-    permissions: {
-      type: Array,
-      default: () => [],
-    },
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    submissionId: {
-      type: String,
-      default: undefined,
-    },
-    submission: {
-      type: Object,
-      default: undefined,
-    },
-    wideFormLayout: {
-      type: Boolean,
-      default: false,
-    },
+  bulkFile: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['save-draft', 'switchView', 'showdoYouWantToSaveTheDraftModal'],
-  setup() {
-    const { locale } = useI18n({ useScope: 'global' });
-
-    return { locale };
+  allowSubmitterToUploadFile: {
+    type: Boolean,
+    default: false,
+  },
+  draftEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  formId: {
+    type: String,
+    default: undefined,
+  },
+  isDraft: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      isWideLayout: false,
-    };
+  permissions: {
+    type: Array,
+    default: () => [],
   },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-    canSaveDraft() {
-      return !this.readOnly;
-    },
-    showEditToggle() {
-      return (
-        this.readOnly &&
-        this.permissions.includes(FormPermissions.SUBMISSION_UPDATE)
-      );
-    },
+  readOnly: {
+    type: Boolean,
+    default: false,
   },
-  async mounted() {
-    // set wide layout
-    this.setWideLayout(this.isWideLayout);
+  submissionId: {
+    type: String,
+    default: undefined,
   },
-  methods: {
-    toggleWideLayout() {
-      this.isWideLayout = !this.isWideLayout;
-      this.setWideLayout(this.isWideLayout);
-    },
+  submission: {
+    type: Object,
+    default: undefined,
   },
-};
+  wideFormLayout: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isWideLayout = ref(false);
+
+const formStore = useFormStore();
+
+const { isRTL } = storeToRefs(formStore);
+
+const canSaveDraft = computed(() => !properties.readOnly);
+const showEditToggle = computed(
+  () =>
+    properties.readOnly &&
+    properties.permissions.includes(FormPermissions.SUBMISSION_UPDATE)
+);
+
+onMounted(() => {
+  setWideLayout(isWideLayout.value);
+});
+
+function toggleWideLayout() {
+  isWideLayout.value = !isWideLayout.value;
+  setWideLayout(isWideLayout.value);
+}
 </script>
 
 <template>
diff --git a/app/frontend/src/components/designer/FormsTable.vue b/app/frontend/src/components/designer/FormsTable.vue
index 6bf7aecb3..9fa350128 100644
--- a/app/frontend/src/components/designer/FormsTable.vue
+++ b/app/frontend/src/components/designer/FormsTable.vue
@@ -1,79 +1,72 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
-import BaseDialog from '~/components/base/BaseDialog.vue';
 import { checkFormManage, checkSubmissionView } from '~/utils/permissionUtils';
 
-export default {
-  components: {
-    BaseDialog,
-  },
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
+const { locale, t } = useI18n({ useScope: 'global' });
 
-    return { t, locale };
-  },
-  data() {
-    return {
-      formId: null,
-      showDescriptionDialog: false,
-      loading: true,
-      formDescription: null,
-      search: null,
-      sortBy: [{ key: 'name', order: 'asc' }],
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['formList', 'isRTL']),
-    ...mapState(useAuthStore, ['user']),
-    ...mapState(useIdpStore, ['isPrimary']),
-    headers() {
-      return [
-        {
-          title: this.$t('trans.formsTable.formTitle'),
-          align: 'start',
-          key: 'name',
-          width: '1%',
-        },
-        {
-          title: this.$t('trans.formsTable.action'),
-          align: 'end',
-          key: 'actions',
-          filterable: false,
-          sortable: false,
-          width: '1%',
-        },
-      ];
-    },
-    canCreateForm() {
-      return this.isPrimary(this.user.idp?.code);
-    },
-    filteredFormList() {
-      return this.formList.filter(
-        (f) =>
-          checkFormManage(f.permissions) || checkSubmissionView(f.permissions)
-      );
-    },
-  },
-  async mounted() {
-    await this.getFormsForCurrentUser();
-    this.loading = false;
+const formId = ref(null);
+const showDescriptionDialog = ref(false);
+const loading = ref(true);
+const formDescription = ref(null);
+const search = ref(null);
+const sortBy = ref([{ key: 'name', order: 'asc' }]);
+
+const formStore = useFormStore();
+const idpStore = useIdpStore();
+
+const { formList, isRTL } = storeToRefs(formStore);
+const { user } = storeToRefs(useAuthStore());
+
+const headers = computed(() => [
+  {
+    title: t('trans.formsTable.formTitle'),
+    align: 'start',
+    key: 'name',
+    width: '1%',
   },
-  methods: {
-    ...mapActions(useFormStore, ['getFormsForCurrentUser']),
-    checkFormManage: checkFormManage,
-    checkSubmissionView: checkSubmissionView,
-    onDescriptionClick(fId, fDescription) {
-      this.formId = fId;
-      this.formDescription = fDescription;
-      this.showDescriptionDialog = true;
-    },
+  {
+    title: t('trans.formsTable.action'),
+    align: 'end',
+    key: 'actions',
+    filterable: false,
+    sortable: false,
+    width: '1%',
   },
-};
+]);
+
+const canCreateForm = computed(() =>
+  idpStore.isPrimary(user?.value?.idp?.code)
+);
+
+const filteredFormList = computed(() =>
+  formList.value.filter(
+    (f) => checkFormManage(f.permissions) || checkSubmissionView(f.permissions)
+  )
+);
+
+onMounted(async () => {
+  await formStore.getFormsForCurrentUser();
+  loading.value = false;
+});
+
+function onDescriptionClick(fId, fDescription) {
+  formId.value = fId;
+  formDescription.value = fDescription;
+  showDescriptionDialog.value = true;
+}
+
+defineExpose({
+  formId,
+  formDescription,
+  onDescriptionClick,
+  showDescriptionDialog,
+});
 </script>
 
 <template>
diff --git a/app/frontend/src/composables/form.js b/app/frontend/src/composables/form.js
index c62395b20..3b02517b8 100644
--- a/app/frontend/src/composables/form.js
+++ b/app/frontend/src/composables/form.js
@@ -20,3 +20,14 @@ export function exportFormSchema(formName, formSchema, snake) {
 
   return { snek };
 }
+
+export function importFormSchemaFromFile(file) {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      resolve(fileReader.result);
+    };
+    fileReader.onerror = reject;
+    fileReader.readAsText(file);
+  });
+}
diff --git a/app/frontend/src/utils/constants.js b/app/frontend/src/utils/constants.js
index f55b8e7e5..7d9bdcbc4 100755
--- a/app/frontend/src/utils/constants.js
+++ b/app/frontend/src/utils/constants.js
@@ -237,3 +237,91 @@ export const FormComponentProactiveHelpValues = Object.freeze({
   ],
   'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
 });
+
+export const FormDesignerBuilderOptions = Object.freeze({
+  basic: false,
+  premium: false,
+  layoutControls: {
+    title: 'Basic Layout',
+    default: true,
+    weight: 10,
+    components: {
+      simplecols2: true,
+      simplecols3: true,
+      simplecols4: true,
+      simplecontent: true,
+      simplefieldset: false,
+      simpleheading: false,
+      simplepanel: true,
+      simpleparagraph: false,
+      simpletabs: true,
+    },
+  },
+  entryControls: {
+    title: 'Basic Fields',
+    weight: 20,
+    components: {
+      simplecheckbox: true,
+      simplecheckboxes: true,
+      simpledatetime: true,
+      simpleday: true,
+      simpleemail: true,
+      simplenumber: true,
+      simplephonenumber: true,
+      simpleradios: true,
+      simpleselect: true,
+      simpletextarea: true,
+      simpletextfield: true,
+      simpletime: false,
+    },
+  },
+  layout: {
+    title: 'Advanced Layout',
+    weight: 30,
+  },
+  advanced: {
+    title: 'Advanced Fields',
+    weight: 40,
+    components: {
+      // Need to re-define Formio basic fields here
+      // To disable fields make it false here
+      // textfield: true,
+      // textarea: true,
+      // number: true,
+      // password: true,
+      // checkbox: true,
+      // selectboxes: true,
+      // select: true,
+      // radio: true,
+      // button: true,
+      email: false,
+      url: false,
+      phoneNumber: false,
+      tags: false,
+      address: false,
+      datetime: false,
+      day: false,
+      time: false,
+      currency: false,
+      survey: false,
+      signature: false,
+      // Prevent duplicate appearance of orgbook component
+      orgbook: false,
+      bcaddress: false,
+      simplebcaddress: false,
+    },
+  },
+  data: {
+    title: 'Advanced Data',
+    weight: 50,
+  },
+  customControls: {
+    title: 'BC Government',
+    weight: 60,
+    components: {
+      orgbook: true,
+      bcaddress: true,
+      simplebcaddress: true,
+    },
+  },
+});
diff --git a/app/frontend/src/views/form/Create.vue b/app/frontend/src/views/form/Create.vue
index bc94be225..d341f25d6 100644
--- a/app/frontend/src/views/form/Create.vue
+++ b/app/frontend/src/views/form/Create.vue
@@ -55,19 +55,19 @@ formStore.resetForm();
         <v-stepper-item
           :title="$t('trans.baseStepper.setUpForm')"
           value="1"
-          :complete="step == 1"
+          :complete="step == 0"
         />
         <v-divider />
         <v-stepper-item
           :title="$t('trans.baseStepper.designForm')"
           value="2"
-          :complete="step > 1"
+          :complete="step > 0"
         />
         <v-divider />
         <v-stepper-item
           :title="$t('trans.baseStepper.manageForm')"
           value="3"
-          :complete="step > 2"
+          :complete="step > 1"
         />
       </v-stepper-header>
       <v-stepper-window>
diff --git a/app/frontend/src/views/form/Design.vue b/app/frontend/src/views/form/Design.vue
index 9b4b284a0..24c779d38 100644
--- a/app/frontend/src/views/form/Design.vue
+++ b/app/frontend/src/views/form/Design.vue
@@ -1,9 +1,8 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { onMounted } from 'vue';
-import { computed, ref } from 'vue';
-import { nextTick } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
+
 import FormDesigner from '~/components/designer/FormDesigner.vue';
 import { useFormStore } from '~/store/form';
 import { AppPermissions } from '~/utils/constants';
@@ -42,9 +41,6 @@ const APP_PERMS = computed(() => AppPermissions);
 
 onMounted(async () => {
   await formStore.listFCProactiveHelp();
-  nextTick(() => {
-    onFormLoad();
-  });
 });
 
 onBeforeRouteLeave((_to, _from, next) => {
@@ -56,10 +52,6 @@ onBeforeRouteLeave((_to, _from, next) => {
       )
     : next();
 });
-
-function onFormLoad() {
-  if (formDesigner.value) formDesigner.value.onFormLoad();
-}
 </script>
 
 <template>
diff --git a/app/frontend/tests/unit/components/designer/FloatButton.spec.js b/app/frontend/tests/unit/components/designer/FloatButton.spec.js
index 6e0aa14e4..0ebc1071d 100644
--- a/app/frontend/tests/unit/components/designer/FloatButton.spec.js
+++ b/app/frontend/tests/unit/components/designer/FloatButton.spec.js
@@ -1,14 +1,33 @@
-import { mount, RouterLinkStub } from '@vue/test-utils';
+// @vitest-environment happy-dom
+import { mount, RouterLinkStub, shallowMount } from '@vue/test-utils';
 import { setActivePinia, createPinia } from 'pinia';
-import { expect, vi } from 'vitest';
+import { beforeEach, expect, vi } from 'vitest';
+import { useRouter } from 'vue-router';
 
 import FloatButton from '~/components/designer/FloatButton.vue';
 
 window.scrollTo = vi.fn();
 
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    resolve: () => {},
+  })),
+}));
+
 describe('FloatButton.vue', () => {
   const pinia = createPinia();
   setActivePinia(pinia);
+  const resolve = vi.fn();
+
+  beforeEach(() => {
+    resolve.mockReset();
+    resolve.mockImplementationOnce(() => {
+      return {
+        href: '/#',
+      };
+    });
+    useRouter.mockReset();
+  });
 
   it('renders', () => {
     const wrapper = mount(FloatButton, {
@@ -32,6 +51,240 @@ describe('FloatButton.vue', () => {
     expect(wrapper.html()).toContain('bottom');
   });
 
+  it('unmounted should remove the scroll event listener', async () => {
+    const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    await wrapper.unmount();
+
+    expect(removeEventListenerSpy).toBeCalledTimes(1);
+    expect(removeEventListenerSpy).toBeCalledWith(
+      'scroll',
+      wrapper.vm.onEventScroll
+    );
+  });
+
+  it('SCROLL_ICON will be up if we are not at the top of the page and down otherwise', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SCROLL_ICON).toEqual('mdi:mdi-arrow-down');
+    wrapper.vm.isAtTopOfPage = false;
+    expect(wrapper.vm.SCROLL_ICON).toEqual('mdi:mdi-arrow-up');
+  });
+
+  it('SCROLL_TEXT will be the top translation if we are not at the top of the page and bottom otherwise', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SCROLL_TEXT).toEqual('trans.floatButton.bottom');
+    wrapper.vm.isAtTopOfPage = false;
+    expect(wrapper.vm.SCROLL_TEXT).toEqual('trans.floatButton.top');
+  });
+
+  it('COLLAPSE_ICON will be close if we are not at collapsed and menu otherwise', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.COLLAPSE_ICON).toEqual('mdi:mdi-close');
+    wrapper.vm.isCollapsed = true;
+    expect(wrapper.vm.COLLAPSE_ICON).toEqual('mdi:mdi-menu');
+  });
+
+  it('COLLAPSE_TEXT will be the collapse translation if we are not collapsed and actions otherwise', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.COLLAPSE_TEXT).toEqual('trans.floatButton.collapse');
+    wrapper.vm.isCollapsed = true;
+    expect(wrapper.vm.COLLAPSE_TEXT).toEqual('trans.floatButton.actions');
+  });
+
+  it('SAVE_TEXT will match the savedStatus property otherwise it is just save', async () => {
+    let wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SAVE_TEXT).toEqual('trans.floatButton.save');
+    wrapper = shallowMount(FloatButton, {
+      props: {
+        savedStatus: 'Saved',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SAVE_TEXT).toEqual('trans.floatButton.saved');
+    wrapper = shallowMount(FloatButton, {
+      props: {
+        savedStatus: 'Saving',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SAVE_TEXT).toEqual('trans.floatButton.saving');
+    wrapper = shallowMount(FloatButton, {
+      props: {
+        savedStatus: 'Not Saved',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.SAVE_TEXT).toEqual('trans.floatButton.notSaved');
+  });
+
+  it('onEventScroll sets isAtTopOfPage to true if window scroll is at 0, false otherwise', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    wrapper.vm.onEventScroll();
+    expect(wrapper.vm.isAtTopOfPage).toBe(true);
+    window.scrollY = 1;
+    wrapper.vm.onEventScroll();
+    expect(wrapper.vm.isAtTopOfPage).toBe(false);
+  });
+
+  it('onClickCollapse will toggle the value of isCollapsed', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    expect(wrapper.vm.isCollapsed).toBeFalsy();
+    wrapper.vm.onClickCollapse();
+    expect(wrapper.vm.isCollapsed).toBeTruthy();
+  });
+
+  it('onClickSave will emit save', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    wrapper.vm.onClickSave();
+    expect(wrapper.emitted()).toHaveProperty('save');
+  });
+
+  it('onClickScroll will scroll the window to either the top or bottom depending on if we are at the top of the page or not', async () => {
+    const wrapper = shallowMount(FloatButton, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: {
+            name: 'RouterLink',
+            template: '<div class="router-link-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+    const scrollToSpy = vi.spyOn(window, 'scrollTo');
+    wrapper.vm.onClickScroll();
+    expect(scrollToSpy).toHaveBeenCalledTimes(1);
+    expect(scrollToSpy).toBeCalledWith({
+      left: 0,
+      top: document.body.scrollHeight,
+      behavior: 'smooth',
+    });
+    wrapper.vm.isAtTopOfPage = false;
+    scrollToSpy.mockReset();
+    wrapper.vm.onClickScroll();
+    expect(scrollToSpy).toHaveBeenCalledTimes(1);
+    expect(scrollToSpy).toBeCalledWith({
+      left: 0,
+      top: 0,
+      behavior: 'smooth',
+    });
+  });
+
   it('test that undo event was triggered', async () => {
     const wrapper = mount(FloatButton, {
       global: {
@@ -45,9 +298,8 @@ describe('FloatButton.vue', () => {
       },
     });
 
-    expect(wrapper.find({ ref: 'undoButton' }).exists()).toBeTruthy();
-
-    const buttonWrapper = wrapper.find({ ref: 'undoButton' });
+    const buttonWrapper = wrapper.find('[data-cy="undoButton"]');
+    expect(buttonWrapper.exists()).toBeTruthy();
     buttonWrapper.trigger('click');
 
     wrapper.vm.$emit('undo');
@@ -70,9 +322,8 @@ describe('FloatButton.vue', () => {
       },
     });
 
-    expect(wrapper.find({ ref: 'redoButton' }).exists()).toBeTruthy();
-
-    const buttonWrapper = wrapper.find({ ref: 'redoButton' });
+    const buttonWrapper = wrapper.find('[data-cy="redoButton"]');
+    expect(buttonWrapper.exists()).toBeTruthy();
     buttonWrapper.trigger('click');
 
     wrapper.vm.$emit('redo');
@@ -95,9 +346,8 @@ describe('FloatButton.vue', () => {
       },
     });
 
-    expect(wrapper.find({ ref: 'saveButton' }).exists()).toBe(true);
-
-    const buttonWrapper = wrapper.find({ ref: 'saveButton' });
+    const buttonWrapper = wrapper.find('[data-cy="saveButton"]');
+    expect(buttonWrapper.exists()).toBeTruthy();
     buttonWrapper.trigger('click');
 
     wrapper.vm.$emit('save');
@@ -107,7 +357,7 @@ describe('FloatButton.vue', () => {
     expect(wrapper.emitted().save.length).toBe(1);
   });
 
-  it('test that publish button was click', async () => {
+  it('test that publish button was clicked', async () => {
     const wrapper = mount(FloatButton, {
       RouterLink: RouterLinkStub,
       props: {
@@ -133,7 +383,7 @@ describe('FloatButton.vue', () => {
     // that is tested by the vue-router team already
   });
 
-  it('test that manage button was click', async () => {
+  it('test that manage button was clicked', async () => {
     const wrapper = mount(FloatButton, {
       RouterLink: RouterLinkStub,
       props: {
@@ -159,19 +409,14 @@ describe('FloatButton.vue', () => {
     // that is tested by the vue-router team already
   });
 
-  it('test that preview button was click', async () => {
-    const mockRouter = {
-      resolve: vi.fn(),
-    };
-
+  it('test that preview button was clicked', async () => {
     window.open = vi.fn();
+    window.open.mockImplementationOnce(() => {});
+    useRouter.mockImplementationOnce(() => ({
+      resolve,
+    }));
 
-    mockRouter.resolve.mockImplementationOnce(() => {
-      return {
-        href: '',
-      };
-    });
-
+    // Preview only works if there is no form id or draft id
     const wrapper = mount(FloatButton, {
       RouterLink: RouterLinkStub,
       props: {
@@ -186,19 +431,16 @@ describe('FloatButton.vue', () => {
             template: '<div class="router-link-stub"><slot /></div>',
           },
         },
-        mocks: {
-          $router: mockRouter,
-        },
       },
     });
 
-    await wrapper.find({ ref: 'previewRouterLink' }).trigger('click');
+    await wrapper.find('[data-cy="previewRouterLink"]').trigger('click');
 
     await wrapper.vm.$nextTick();
 
     // We don't need to test that the router-link worked
     // that is tested by the vue-router team already
-    expect(mockRouter.resolve).toHaveBeenCalledTimes(1);
+    expect(resolve).toHaveBeenCalledTimes(1);
   });
 
   it('Publish button is enabled if it is not a new draft version and there is a form id and draft id', () => {
diff --git a/app/frontend/tests/unit/components/designer/FormDesigner.spec.js b/app/frontend/tests/unit/components/designer/FormDesigner.spec.js
new file mode 100644
index 000000000..fb7143576
--- /dev/null
+++ b/app/frontend/tests/unit/components/designer/FormDesigner.spec.js
@@ -0,0 +1,1340 @@
+// @vitest-environment happy-dom
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { beforeEach, vi } from 'vitest';
+import { useRouter } from 'vue-router';
+
+import FormDesigner from '~/components/designer/FormDesigner.vue';
+import * as formComposables from '~/composables/form';
+import formioIl8next from '~/internationalization/trans/formio/formio.json';
+import templateExtensions from '~/plugins/templateExtensions';
+import { formService, userService } from '~/services';
+import { useAuthStore } from '~/store/auth';
+import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
+import { FormDesignerBuilderOptions, IdentityMode } from '~/utils/constants';
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    push: () => {},
+    replace: () => {},
+  })),
+}));
+
+const STUBS = {
+  RouterLink: {
+    name: 'RouterLink',
+    template: '<div class="router-link-stub"><slot /></div>',
+  },
+};
+
+describe('FormDesigner.vue', () => {
+  useRouter.mockReturnValue({
+    currentRoute: {
+      query: '',
+    },
+  });
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const authStore = useAuthStore(pinia);
+  const formStore = useFormStore(pinia);
+  const notificationStore = useNotificationStore(pinia);
+  const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+  const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+  const getProxyHeadersSpy = vi.spyOn(formService, 'getProxyHeaders');
+  const readVersionSpy = vi.spyOn(formService, 'readVersion');
+  const readDraftSpy = vi.spyOn(formService, 'readDraft');
+  const setDirtyFlagSpy = vi.spyOn(formStore, 'setDirtyFlag');
+
+  beforeEach(() => {
+    authStore.$reset();
+    formStore.$reset();
+    notificationStore.$reset();
+
+    authStore.keycloak = {
+      tokenParsed: {
+        email: 'email@email.com',
+        name: 'lucy',
+      },
+      userName: 'userName',
+      token: 'token',
+      fullName: 'fullName',
+    };
+
+    fetchFormSpy.mockReset();
+    fetchFormSpy.mockImplementationOnce(() => {
+      formStore.form = {
+        id: '00329319-f1da-45c7-a956-9c765dcf36d1',
+        name: 'Test Form',
+        description: '',
+        active: true,
+        labels: ['test-label'],
+        createdBy: 'TEST@idir',
+        createdAt: '2024-09-09T21:18:52.706Z',
+        updatedBy: null,
+        updatedAt: '2024-09-09T21:18:52.697Z',
+        showSubmissionConfirmation: true,
+        submissionReceivedEmails: [],
+        enableStatusUpdates: true,
+        enableSubmitterDraft: true,
+        schedule: {
+          enabled: null,
+          scheduleType: null,
+          openSubmissionDateTime: null,
+          keepOpenForTerm: null,
+          keepOpenForInterval: null,
+          closingMessageEnabled: null,
+          closingMessage: null,
+          closeSubmissionDateTime: null,
+          repeatSubmission: {
+            enabled: null,
+            repeatUntil: null,
+            everyTerm: null,
+            everyIntervalType: null,
+          },
+          allowLateSubmissions: {
+            enabled: null,
+            forNext: {
+              term: null,
+              intervalType: null,
+            },
+          },
+        },
+        reminder_enabled: false,
+        enableCopyExistingSubmission: true,
+        allowSubmitterToUploadFile: false,
+        subscribe: {
+          enabled: null,
+        },
+        deploymentLevel: 'development',
+        ministry: 'AF',
+        apiIntegration: true,
+        useCase: 'application',
+        sendSubmissionReceivedEmail: false,
+        wideFormLayout: true,
+        enableDocumentTemplates: false,
+        versions: [],
+        identityProviders: [],
+        snake: 'test_form',
+        idps: [],
+        userType: 'team',
+      };
+    });
+
+    addNotificationSpy.mockReset();
+    addNotificationSpy.mockImplementation(() => {});
+
+    getProxyHeadersSpy.mockReset();
+    getProxyHeadersSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          'X-CHEFS-PROXY-DATA': '',
+        },
+      };
+    });
+
+    readVersionSpy.mockReset();
+    readVersionSpy.mockImplementation(() => {
+      return {
+        data: {
+          schema: {},
+        },
+      };
+    });
+    readDraftSpy.mockReset();
+    readDraftSpy.mockImplementation(() => {
+      return {
+        data: {
+          schema: {},
+        },
+      };
+    });
+
+    setDirtyFlagSpy.mockReset();
+    setDirtyFlagSpy.mockImplementation(() => {});
+
+    formStore.form.isDirty = false;
+  });
+
+  it('when the form is changed, it will increment reRenderFormIo', async () => {
+    const wrapper = shallowMount(FormDesigner, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.form = {};
+
+    await flushPromises();
+
+    expect(wrapper.vm.reRenderFormIo).toEqual(1);
+  });
+
+  describe('onMounted', () => {
+    it('onMounted, if there is a form id it will fetchForm and getFormSchema, if no versionId or draftId is set, it will throw an error', async () => {
+      shallowMount(FormDesigner, {
+        props: {
+          formId: '123',
+        },
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(fetchFormSpy).toBeCalledTimes(1);
+      expect(getProxyHeadersSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(readVersionSpy).toBeCalledTimes(0);
+    });
+
+    it('onMounted, if there is a form id it will fetchForm and getFormSchema, if there is a version id will call readVersion', async () => {
+      readVersionSpy.mockImplementationOnce(() => {
+        return {
+          data: {
+            schema: {},
+          },
+        };
+      });
+
+      shallowMount(FormDesigner, {
+        props: {
+          formId: '123',
+          versionId: '123',
+        },
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+      expect(fetchFormSpy).toBeCalledTimes(1);
+      expect(getProxyHeadersSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+      expect(readVersionSpy).toBeCalledTimes(1);
+      expect(readDraftSpy).toBeCalledTimes(0);
+    });
+
+    it('onMounted, if there is a form id it will fetchForm and getFormSchema, if there is a draft id will call readDraft', async () => {
+      shallowMount(FormDesigner, {
+        props: {
+          formId: '123',
+          draftId: '123',
+        },
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+      expect(fetchFormSpy).toBeCalledTimes(1);
+      expect(getProxyHeadersSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+      expect(readVersionSpy).toBeCalledTimes(0);
+      expect(readDraftSpy).toBeCalledTimes(1);
+    });
+  });
+
+  it('setProxyHeaders will addNotification if an error occurs', async () => {
+    const wrapper = shallowMount(FormDesigner, {
+      props: {
+        formId: '123',
+        draftId: '123',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    getProxyHeadersSpy.mockReset();
+    getProxyHeadersSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    await wrapper.vm.setProxyHeaders();
+    expect(getProxyHeadersSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('onMounted, patch originalSchema should be a clone of the formSchema', async () => {
+    const wrapper = shallowMount(FormDesigner, {
+      props: {
+        formId: '123',
+        draftId: '123',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.patch.originalSchema).toEqual(null);
+
+    await flushPromises();
+
+    expect(wrapper.vm.patch.originalSchema).toEqual({
+      components: [],
+      display: 'form',
+      type: 'form',
+    });
+  });
+
+  it('designerOptions returns certain values depending on userType or locale', async () => {
+    const wrapper = shallowMount(FormDesigner, {
+      props: {
+        formId: '123',
+        draftId: '123',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.designerOptions).toEqual({
+      sanitizeConfig: {
+        addTags: ['iframe'],
+        ALLOWED_TAGS: ['iframe'],
+      },
+      noDefaultSubmitButton: false,
+      builder: {
+        ...FormDesignerBuilderOptions,
+        customControls: {
+          ...FormDesignerBuilderOptions.customControls,
+          components: {
+            ...FormDesignerBuilderOptions.customControls.components,
+            simplefile: formStore.form.userType !== IdentityMode.PUBLIC,
+          },
+        },
+      },
+      language: 'en',
+      i18n: formioIl8next,
+      templates: templateExtensions,
+      evalContext: {
+        token: authStore.tokenParsed,
+        user: authStore.user,
+      },
+    });
+  });
+
+  it('DISPLAY_VERSION returns the design version for a form + 1 or 1 if it is a new form', async () => {
+    const wrapper = shallowMount(FormDesigner, {
+      props: {
+        formId: '123',
+        draftId: '123',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.form.versions = [{}, {}];
+    await flushPromises();
+
+    expect(wrapper.vm.DISPLAY_VERSION).toEqual(3);
+  });
+
+  describe('submitFormSchema will setDirtyFlag', () => {
+    it('and call schemaCreateNew if there is no formId', async () => {
+      const push = vi.fn();
+      useRouter.mockImplementationOnce(() => ({
+        push,
+      }));
+      const updateUserLabelsSpy = vi.spyOn(userService, 'updateUserLabels');
+      updateUserLabelsSpy.mockImplementation(() => {
+        return {
+          data: [],
+        };
+      });
+      const createFormSpy = vi.spyOn(formService, 'createForm');
+      const createDraftSpy = vi.spyOn(formService, 'createDraft');
+      const updateDraftSpy = vi.spyOn(formService, 'updateDraft');
+      createFormSpy.mockImplementation(() => {
+        return {
+          data: {
+            id: '123',
+            draft: {
+              id: '123',
+            },
+          },
+        };
+      });
+      formStore.userLabels = ['test-label-update'];
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.submitFormSchema();
+
+      expect(setDirtyFlagSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+      expect(createFormSpy).toBeCalledTimes(1);
+      expect(createDraftSpy).toBeCalledTimes(0);
+      expect(updateDraftSpy).toBeCalledTimes(0);
+      expect(push).toBeCalledTimes(1);
+      expect(updateUserLabelsSpy).toBeCalledTimes(1);
+    });
+    it('and call schemaCreateDraftFromVersion if there is a formId and version id', async () => {
+      const push = vi.fn();
+      useRouter.mockImplementationOnce(() => ({
+        push,
+      }));
+      const createFormSpy = vi.spyOn(formService, 'createForm');
+      const createDraftSpy = vi.spyOn(formService, 'createDraft');
+      const updateDraftSpy = vi.spyOn(formService, 'updateDraft');
+      createDraftSpy.mockImplementation(() => {
+        return {
+          data: {
+            id: '123',
+          },
+        };
+      });
+      const wrapper = shallowMount(FormDesigner, {
+        props: {
+          formId: '123',
+          versionId: '123',
+        },
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.submitFormSchema();
+
+      expect(setDirtyFlagSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+      expect(createFormSpy).toBeCalledTimes(0);
+      expect(createDraftSpy).toBeCalledTimes(1);
+      expect(updateDraftSpy).toBeCalledTimes(0);
+      expect(push).toBeCalledTimes(1);
+    });
+    it('and call schemaUpdateExistingDraft if there is a formId and draft id', async () => {
+      const replace = vi.fn();
+      useRouter.mockImplementation(() => ({
+        replace,
+        currentRoute: { value: { query: '' } },
+      }));
+      const createFormSpy = vi.spyOn(formService, 'createForm');
+      const createDraftSpy = vi.spyOn(formService, 'createDraft');
+      const updateDraftSpy = vi.spyOn(formService, 'updateDraft');
+      updateDraftSpy.mockImplementation(() => {});
+      const wrapper = shallowMount(FormDesigner, {
+        props: {
+          formId: '123',
+          draftId: '123',
+        },
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.submitFormSchema();
+
+      expect(setDirtyFlagSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+      expect(createFormSpy).toBeCalledTimes(0);
+      expect(createDraftSpy).toBeCalledTimes(0);
+      expect(updateDraftSpy).toBeCalledTimes(1);
+      expect(replace).toBeCalledTimes(1);
+    });
+    test('if an error is caught, it will setDirtyFlag again and addNotification', async () => {
+      const push = vi.fn();
+      useRouter.mockImplementationOnce(() => ({
+        push,
+      }));
+      const createFormSpy = vi.spyOn(formService, 'createForm');
+      const createDraftSpy = vi.spyOn(formService, 'createDraft');
+      const updateDraftSpy = vi.spyOn(formService, 'updateDraft');
+      createFormSpy.mockImplementation(() => {
+        throw new Error();
+      });
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.submitFormSchema();
+
+      expect(setDirtyFlagSpy).toBeCalledTimes(2);
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(createFormSpy).toBeCalledTimes(1);
+      expect(createDraftSpy).toBeCalledTimes(0);
+      expect(updateDraftSpy).toBeCalledTimes(0);
+      expect(push).toBeCalledTimes(0);
+    });
+  });
+
+  describe('patch history', () => {
+    it('canUndoPatch will return true if there is patch history, if the current action is not at the beginning and the current index is less than the number of actions in the history', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(wrapper.vm.canUndoPatch()).toBeFalsy();
+      expect(wrapper.vm.undoEnabled()).toBeFalsy();
+      wrapper.vm.patch.history = [{ id: '123' }, { id: '124' }];
+      expect(wrapper.vm.canUndoPatch()).toBeFalsy();
+      expect(wrapper.vm.undoEnabled()).toBeFalsy();
+      wrapper.vm.patch.index = 1;
+      expect(wrapper.vm.canUndoPatch()).toBeTruthy();
+      expect(wrapper.vm.undoEnabled()).toBeTruthy();
+    });
+    it('canRedoPatch will return true if there is patch history, if the current action is not at the end of the action history', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(wrapper.vm.canRedoPatch()).toBeFalsy();
+      expect(wrapper.vm.redoEnabled()).toBeFalsy();
+      wrapper.vm.patch.history = [{ id: '123' }, { id: '124' }];
+      wrapper.vm.patch.index = 1;
+      expect(wrapper.vm.canRedoPatch()).toBeFalsy();
+      expect(wrapper.vm.redoEnabled()).toBeFalsy();
+      wrapper.vm.patch.index = 0;
+      expect(wrapper.vm.canRedoPatch()).toBeTruthy();
+      expect(wrapper.vm.redoEnabled()).toBeTruthy();
+    });
+    it('resetHistoryFlags should set componentAddedStart, componentMovedStart, componentRemovedStart to whatever flag is passed, false default', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.resetHistoryFlags();
+      expect(wrapper.vm.patch.componentAddedStart).toBeFalsy();
+      expect(wrapper.vm.patch.componentMovedStart).toBeFalsy();
+      expect(wrapper.vm.patch.componentRemovedStart).toBeFalsy();
+      wrapper.vm.resetHistoryFlags(true);
+      expect(wrapper.vm.patch.componentAddedStart).toBeTruthy();
+      expect(wrapper.vm.patch.componentMovedStart).toBeTruthy();
+      expect(wrapper.vm.patch.componentRemovedStart).toBeTruthy();
+    });
+    it('getPatch will return the form at a specific point in history, not just the changes', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      expect(wrapper.vm.getPatch(0)).toEqual({
+        components: [
+          {
+            id: '123',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.getPatch(1)).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.getPatch(2)).toEqual({
+        components: [{}],
+        display: 'form',
+        type: 'form',
+      });
+    });
+    it('undoPatchFromHistory will revert a change', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      // formSchema is the current form that the FormBuilder is modifying, this is at index 1
+      wrapper.vm.formSchema = {
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      };
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      wrapper.vm.undoPatchFromHistory();
+      expect(wrapper.vm.savedStatus).toEqual('Save');
+      expect(wrapper.vm.isFormSaved).toEqual(false);
+      expect(wrapper.vm.canSave).toEqual(true);
+      expect(wrapper.vm.patch.undoClicked).toEqual(true);
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '123',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      // formSchema is the current form that the FormBuilder is modifying, this is at index 1
+      wrapper.vm.formSchema = {
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      };
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      wrapper.vm.onUndoClick();
+      expect(wrapper.vm.savedStatus).toEqual('Save');
+      expect(wrapper.vm.isFormSaved).toEqual(false);
+      expect(wrapper.vm.canSave).toEqual(true);
+      expect(wrapper.vm.patch.undoClicked).toEqual(true);
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '123',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.reRenderFormIo).toEqual(2);
+    });
+    it('undoPatchFromHistory will revert a change', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      // formSchema is the current form that the FormBuilder is modifying, this is at index 1
+      wrapper.vm.formSchema = {
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      };
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      wrapper.vm.undoPatchFromHistory();
+      expect(wrapper.vm.savedStatus).toEqual('Save');
+      expect(wrapper.vm.isFormSaved).toEqual(false);
+      expect(wrapper.vm.canSave).toEqual(true);
+      expect(wrapper.vm.patch.undoClicked).toEqual(true);
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '123',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+    });
+    it('redoPatchFromHistory will move forward in history', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      // formSchema is the current form that the FormBuilder is modifying, this is at index 1
+      wrapper.vm.formSchema = {
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      };
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      wrapper.vm.redoPatchFromHistory();
+      expect(wrapper.vm.savedStatus).toEqual('Save');
+      expect(wrapper.vm.isFormSaved).toEqual(false);
+      expect(wrapper.vm.canSave).toEqual(true);
+      expect(wrapper.vm.patch.redoClicked).toEqual(true);
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [{}],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+
+      wrapper.vm.patch.index = 1;
+      wrapper.vm.originalSchema = {
+        components: [],
+        display: 'form',
+        type: 'form',
+      };
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'replace', path: '/components/0/id', value: '124' }],
+        [{ op: 'remove', path: '/components/0/id' }],
+      ];
+      // formSchema is the current form that the FormBuilder is modifying, this is at index 1
+      wrapper.vm.formSchema = {
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      };
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [
+          {
+            id: '124',
+          },
+        ],
+        display: 'form',
+        type: 'form',
+      });
+      wrapper.vm.onRedoClick();
+      expect(wrapper.vm.savedStatus).toEqual('Save');
+      expect(wrapper.vm.isFormSaved).toEqual(false);
+      expect(wrapper.vm.canSave).toEqual(true);
+      expect(wrapper.vm.patch.redoClicked).toEqual(true);
+      expect(wrapper.vm.formSchema).toEqual({
+        components: [{}],
+        display: 'form',
+        type: 'form',
+      });
+      expect(wrapper.vm.reRenderFormIo).toEqual(2);
+    });
+    it('addPatchToHistory will add the changes to the history', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.patch.index = 0;
+      wrapper.vm.patch.history = [
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+      ];
+      expect(wrapper.vm.patch.history).toEqual([
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+      ]);
+      wrapper.vm.addPatchToHistory();
+      expect(wrapper.vm.patch.history).toEqual([
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+        [{ op: 'remove', path: '/components/0' }],
+      ]);
+      wrapper.vm.formSchema = {
+        components: [{ id: '123' }],
+        display: 'form',
+        type: 'form',
+      };
+      // Removes the head of the patch history
+      wrapper.vm.patch.MAX_PATCHES = 1;
+      // Adding patch to history here should clear out actions in the history
+      // greater than the index, since we're at index -1
+      wrapper.vm.addPatchToHistory();
+      expect(wrapper.vm.patch.history).toEqual([
+        [{ op: 'remove', path: '/components/0' }],
+        [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+      ]);
+      expect(wrapper.vm.patch.originalSchema).toEqual({
+        components: [{ id: '123' }],
+        display: 'form',
+        type: 'form',
+      });
+    });
+    describe('onSchemaChange', () => {
+      it('undo was clicked or redo was clicked', async () => {
+        const wrapper = shallowMount(FormDesigner, {
+          props: {},
+          global: {
+            plugins: [pinia],
+            stubs: STUBS,
+          },
+        });
+        await flushPromises();
+        wrapper.vm.patch.undoClicked = true;
+        wrapper.vm.patch.redoClicked = true;
+        wrapper.vm.onSchemaChange(
+          [
+            {
+              components: [{ id: '123' }],
+              display: 'form',
+              type: 'form',
+            },
+          ],
+          undefined,
+          undefined
+        );
+        expect(wrapper.vm.patch.undoClicked).toBeFalsy();
+        expect(wrapper.vm.patch.redoClicked).toBeFalsy();
+        expect(wrapper.vm.patch.componentAddedStart).toBeFalsy();
+        expect(wrapper.vm.patch.componentMovedStart).toBeFalsy();
+        expect(wrapper.vm.patch.componentRemovedStart).toBeFalsy();
+      });
+      describe('undo/redo was not clicked', () => {
+        describe('flags/modified are undefined', () => {
+          it('we removed or moved a component but not during an add action', async () => {
+            const wrapper = shallowMount(FormDesigner, {
+              props: {},
+              global: {
+                plugins: [pinia],
+                stubs: STUBS,
+              },
+            });
+            await flushPromises();
+            wrapper.vm.patch.index = 0;
+            wrapper.vm.formSchema = {
+              components: [
+                {
+                  id: '123',
+                },
+              ],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.patch.history = [
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ];
+            expect(wrapper.vm.patch.history).toEqual([
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ]);
+
+            wrapper.vm.formSchema = {
+              components: [],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.patch.componentAddedStart = false;
+            wrapper.vm.patch.componentRemovedStart = true;
+            // Simulate a remove action
+            wrapper.vm.onSchemaChange(
+              [
+                {
+                  components: [],
+                  display: 'form',
+                  type: 'form',
+                },
+              ],
+              undefined,
+              undefined
+            );
+            expect(wrapper.vm.patch.history).toEqual([
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+              [{ op: 'remove', path: '/components/0' }],
+            ]);
+
+            wrapper.vm.patch.index = 0;
+            wrapper.vm.formSchema = {
+              components: [
+                {
+                  id: '123',
+                  components: [{ id: '124' }],
+                },
+              ],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.patch.history = [
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ];
+            expect(wrapper.vm.patch.history).toEqual([
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ]);
+
+            wrapper.vm.formSchema = {
+              components: [
+                {
+                  id: '123',
+                  components: [],
+                },
+                {
+                  id: '124',
+                },
+              ],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.patch.componentAddedStart = false;
+            wrapper.vm.patch.componentRemovedStart = false;
+            wrapper.vm.patch.componentMovedStart = true;
+            // Simulate a move action
+            wrapper.vm.onSchemaChange(
+              [
+                {
+                  components: [{ id: '123', components: [] }, { id: '124' }],
+                  display: 'form',
+                  type: 'form',
+                },
+              ],
+              undefined,
+              undefined
+            );
+            expect(wrapper.vm.patch.history).toEqual([
+              [
+                {
+                  op: 'add',
+                  path: '/components/0',
+                  value: { id: '123' },
+                },
+              ],
+              [
+                { op: 'add', path: '/components/0/components', value: [] },
+                { op: 'add', path: '/components/1', value: { id: '124' } },
+              ],
+            ]);
+          });
+        });
+        describe('flags/modified are defined', () => {
+          it('component was added and save was clicked', async () => {
+            const wrapper = shallowMount(FormDesigner, {
+              props: {},
+              global: {
+                plugins: [pinia],
+                stubs: STUBS,
+              },
+            });
+            await flushPromises();
+            wrapper.vm.patch.undoClicked = false;
+            wrapper.vm.patch.redoClicked = false;
+            wrapper.vm.patch.componentAddedStart = true;
+            wrapper.vm.patch.componentMovedStart = false;
+            wrapper.vm.patch.componentRemovedStart = false;
+            wrapper.vm.patch.index = -1;
+            wrapper.vm.formSchema = {
+              components: [{ id: '123' }],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.onSchemaChange(
+              { id: '123' },
+              { id: '123' },
+              { components: [{ id: '123' }], display: 'form', type: 'form' }
+            );
+            // Add patch to history should be called
+            expect(wrapper.vm.patch.history).toEqual([
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ]);
+            expect(addNotificationSpy).toBeCalledTimes(0);
+          });
+          it('component was added and save was clicked it should add a notification if one of the components uses a reserved property name', async () => {
+            const wrapper = shallowMount(FormDesigner, {
+              props: {},
+              global: {
+                plugins: [pinia],
+                stubs: STUBS,
+              },
+            });
+            await flushPromises();
+            wrapper.vm.patch.undoClicked = false;
+            wrapper.vm.patch.redoClicked = false;
+            wrapper.vm.patch.componentAddedStart = true;
+            wrapper.vm.patch.componentMovedStart = false;
+            wrapper.vm.patch.componentRemovedStart = false;
+            wrapper.vm.patch.index = -1;
+            wrapper.vm.formSchema = {
+              components: [{ id: '123' }],
+              display: 'form',
+              type: 'form',
+            };
+            wrapper.vm.onSchemaChange(
+              { id: '123' },
+              { id: '123' },
+              {
+                components: [{ id: '123', key: 'form' }],
+                display: 'form',
+                type: 'form',
+              }
+            );
+            // Add patch to history should be called
+            expect(wrapper.vm.patch.history).toEqual([
+              [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+            ]);
+            expect(addNotificationSpy).toBeCalledTimes(1);
+          });
+        });
+        it('component was edited and save was clicked or paste occurred', async () => {
+          const wrapper = shallowMount(FormDesigner, {
+            props: {},
+            global: {
+              plugins: [pinia],
+              stubs: STUBS,
+            },
+          });
+          await flushPromises();
+          wrapper.vm.patch.undoClicked = false;
+          wrapper.vm.patch.redoClicked = false;
+          wrapper.vm.patch.componentAddedStart = false;
+          wrapper.vm.patch.componentMovedStart = false;
+          wrapper.vm.patch.componentRemovedStart = false;
+          wrapper.vm.patch.index = -1;
+          wrapper.vm.formSchema = {
+            components: [{ id: '123' }],
+            display: 'form',
+            type: 'form',
+          };
+          wrapper.vm.onSchemaChange(
+            { id: '123' },
+            { id: '123' },
+            { components: [{ id: '123' }], display: 'form', type: 'form' }
+          );
+          // Add patch to history should be called
+          expect(wrapper.vm.patch.history).toEqual([
+            [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+          ]);
+          expect(addNotificationSpy).toBeCalledTimes(0);
+        });
+      });
+      it('tab was changed, so form is not really changed, resetHistoryFlags', async () => {
+        const wrapper = shallowMount(FormDesigner, {
+          props: {},
+          global: {
+            plugins: [pinia],
+            stubs: STUBS,
+          },
+        });
+        await flushPromises();
+        wrapper.vm.patch.undoClicked = false;
+        wrapper.vm.patch.redoClicked = false;
+        wrapper.vm.patch.componentAddedStart = false;
+        wrapper.vm.patch.componentMovedStart = false;
+        wrapper.vm.patch.componentRemovedStart = false;
+        wrapper.vm.patch.index = -1;
+        wrapper.vm.formSchema = {
+          components: [{ id: '123' }],
+          display: 'form',
+          type: 'form',
+        };
+        wrapper.vm.onSchemaChange({ id: '123' }, { id: '123' }, false);
+        expect(wrapper.vm.patch.history).toEqual([]);
+        expect(addNotificationSpy).toBeCalledTimes(0);
+        expect(wrapper.vm.patch.componentAddedStart).toBeFalsy();
+        expect(wrapper.vm.patch.componentMovedStart).toBeFalsy();
+        expect(wrapper.vm.patch.componentRemovedStart).toBeFalsy();
+      });
+    });
+  });
+
+  describe('formio event handlers', () => {
+    it('init should call setDirtyFlag to false', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.init();
+
+      expect(setDirtyFlagSpy).toBeCalledTimes(1);
+      expect(setDirtyFlagSpy).toBeCalledWith(false);
+    });
+
+    it('onChangeMethod will setDirtyFlag to true if the form is not dirty', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.form.isDirty = true;
+      wrapper.vm.onChangeMethod();
+
+      expect(wrapper.vm.form.isDirty).toBeTruthy();
+    });
+
+    it('onRenderMethod will setDirtyFlag to false', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      const querySelectorSpy = vi.spyOn(document, 'querySelector');
+      querySelectorSpy.mockImplementationOnce(() => {
+        return '';
+      });
+
+      await flushPromises();
+
+      wrapper.vm.onRenderMethod();
+
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+      expect(wrapper.vm.form.isDirty).toBeFalsy();
+    });
+
+    it('onAddSchemaComponent will set componentAddedStart to true if the isNew flag is true', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(wrapper.vm.patch.componentAddedStart).toBeFalsy();
+      expect(wrapper.vm.patch.componentMovedStart).toBeFalsy();
+
+      wrapper.vm.onAddSchemaComponent(
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        false
+      );
+
+      expect(wrapper.vm.patch.componentMovedStart).toBeTruthy();
+
+      wrapper.vm.onAddSchemaComponent(
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        true
+      );
+      expect(wrapper.vm.patch.componentAddedStart).toBeTruthy();
+    });
+
+    it('onRemoveSchemaComponent will set componentRemovedStart to true', async () => {
+      const wrapper = shallowMount(FormDesigner, {
+        props: {},
+        global: {
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(wrapper.vm.patch.componentRemovedStart).toBeFalsy();
+
+      wrapper.vm.onRemoveSchemaComponent();
+
+      expect(wrapper.vm.patch.componentRemovedStart).toBeTruthy();
+    });
+  });
+
+  it('loadFile will set the form schema and add to patch history', async () => {
+    const importFormSchemaFromFileSpy = vi.spyOn(
+      formComposables,
+      'importFormSchemaFromFile'
+    );
+    importFormSchemaFromFileSpy.mockImplementationOnce(() => {
+      return Promise.resolve(
+        JSON.stringify({
+          components: [
+            {
+              id: '123',
+            },
+          ],
+          display: 'form',
+          type: 'form',
+        })
+      );
+    });
+    const wrapper = shallowMount(FormDesigner, {
+      props: {},
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.loadFile({ target: { files: [0] } });
+
+    expect(wrapper.vm.patch.history).toEqual([
+      [{ op: 'add', path: '/components/0', value: { id: '123' } }],
+    ]);
+  });
+
+  it('loadFile will addNotification if an error occurs', async () => {
+    const importFormSchemaFromFileSpy = vi.spyOn(
+      formComposables,
+      'importFormSchemaFromFile'
+    );
+    importFormSchemaFromFileSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const wrapper = shallowMount(FormDesigner, {
+      props: {},
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.loadFile({ target: { files: [0] } });
+
+    expect(wrapper.vm.patch.history).toEqual([]);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/designer/FormDisclaimer.spec.js b/app/frontend/tests/unit/components/designer/FormDisclaimer.spec.js
index a3b93b09b..94d1a0747 100644
--- a/app/frontend/tests/unit/components/designer/FormDisclaimer.spec.js
+++ b/app/frontend/tests/unit/components/designer/FormDisclaimer.spec.js
@@ -1,14 +1,26 @@
 import { createTestingPinia } from '@pinia/testing';
 import { mount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
 import { describe, expect, it } from 'vitest';
 
+import { useFormStore } from '~/store/form';
 import FormDisclaimer from '~/components/designer/FormDisclaimer.vue';
 
 describe('FormDisclaimer.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+
+    formStore.isRTL = false;
+  });
+
   it('renders', () => {
     const wrapper = mount(FormDisclaimer, {
       global: {
-        plugins: [createTestingPinia()],
+        plugins: [pinia],
       },
     });
     expect(wrapper.text())
@@ -19,5 +31,27 @@ describe('FormDisclaimer.vue', () => {
       .toContain('trans.formDisclaimer.formIntention')
       .toContain('trans.formDisclaimer.privacyOfficer')
       .toContain('trans.formDisclaimer.assement');
+
+    expect(wrapper.html()).not.toContain('mr-6');
+  });
+
+  it('renders with mr-6 if RTL is true', () => {
+    formStore.isRTL = true;
+
+    const wrapper = mount(FormDisclaimer, {
+      global: {
+        plugins: [pinia],
+      },
+    });
+    expect(wrapper.text())
+      .toContain('trans.formDisclaimer.disclaimerAndStatement')
+      .toContain('trans.formDisclaimer.privacyLaw')
+      .toContain('trans.formDisclaimer.disclosure')
+      .toContain('trans.formDisclaimer.consent')
+      .toContain('trans.formDisclaimer.formIntention')
+      .toContain('trans.formDisclaimer.privacyOfficer')
+      .toContain('trans.formDisclaimer.assement');
+
+    expect(wrapper.html()).toContain('mr-6');
   });
 });
diff --git a/app/frontend/tests/unit/components/designer/FormViewer.spec.js b/app/frontend/tests/unit/components/designer/FormViewer.spec.js
index 77c8f0090..b1bc4b02c 100644
--- a/app/frontend/tests/unit/components/designer/FormViewer.spec.js
+++ b/app/frontend/tests/unit/components/designer/FormViewer.spec.js
@@ -1,32 +1,75 @@
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
-import { flushPromises, mount } from '@vue/test-utils';
-import { createRouter, createWebHistory } from 'vue-router';
+import { flushPromises, shallowMount } from '@vue/test-utils';
 import { beforeEach, expect, vi } from 'vitest';
+import { useRouter } from 'vue-router';
+import { nextTick, ref } from 'vue';
 
-import getRouter from '~/router';
 import FormViewer from '~/components/designer/FormViewer.vue';
+import templateExtensions from '~/plugins/templateExtensions';
+import { fileService, formService, rbacService } from '~/services';
+import { useAppStore } from '~/store/app';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
+import { FormPermissions, IdentityMode } from '~/utils/constants';
+import * as transformUtils from '~/utils/transformUtils';
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    push: () => {},
+    replace: () => {},
+  })),
+}));
+
+const STUBS = {
+  BaseDialog: true,
+  FormViewerMultiUpload: true,
+  VSkeletonLoader: {
+    name: 'VSkeletonLoader',
+    template: '<div class="v-skeleton-loader-stub"><slot /></div>',
+  },
+  VContainer: {
+    name: 'VContainer',
+    template: '<div class="v-container-stub"><slot /></div>',
+  },
+  formio: {
+    name: 'formio',
+    template: '<div class="formio-stub"><slot /></div>',
+  },
+};
 
 describe('FormViewer.vue', () => {
   const formId = '123-456';
 
   const pinia = createTestingPinia();
 
-  const router = createRouter({
-    history: createWebHistory(),
-    routes: getRouter().getRoutes(),
-  });
-
   setActivePinia(pinia);
+  const appStore = useAppStore(pinia);
   const authStore = useAuthStore(pinia);
   const formStore = useFormStore(pinia);
+  const notificationStore = useNotificationStore(pinia);
+
+  const getProxyHeadersSpy = vi.spyOn(formService, 'getProxyHeaders');
+  const readVersionSpy = vi.spyOn(formService, 'readVersion');
+  const readDraftSpy = vi.spyOn(formService, 'readDraft');
+  const readPublishedSpy = vi.spyOn(formService, 'readPublished');
+  const getSubmissionSpy = vi.spyOn(formService, 'getSubmission');
+  const getUserSubmissionsSpy = vi.spyOn(rbacService, 'getUserSubmissions');
+  const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+  const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+  const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+  const alertSpy = vi.spyOn(window, 'alert');
+  const downloadFileSpy = vi.spyOn(formStore, 'downloadFile');
+  const getDispositionSpy = vi.spyOn(transformUtils, 'getDisposition');
 
   beforeEach(() => {
+    appStore.$reset();
     authStore.$reset();
     formStore.$reset();
-
+    authStore.authenticated = true;
     authStore.keycloak = {
       tokenParsed: {
         identity_provider: 'idir',
@@ -41,18 +84,141 @@ describe('FormViewer.vue', () => {
         email: 'test@test.com',
       },
       authenticated: true,
+      token: 'TOKEN',
     };
+
+    addNotificationSpy.mockReset();
+
+    getProxyHeadersSpy.mockReset();
+    readVersionSpy.mockReset();
+    readDraftSpy.mockReset();
+    readPublishedSpy.mockReset();
+    getSubmissionSpy.mockReset();
+    getUserSubmissionsSpy.mockReset();
+
+    addEventListenerSpy.mockReset();
+    removeEventListener.mockReset();
+    alertSpy.mockReset();
+    downloadFileSpy.mockReset();
+    getDispositionSpy.mockReset();
+
+    getProxyHeadersSpy.mockImplementation(() => {
+      return {
+        data: {
+          'X-CHEFS-PROXY-DATA': '',
+        },
+      };
+    });
+    readVersionSpy.mockImplementation(() => {});
+    readDraftSpy.mockImplementation(() => {});
+    readPublishedSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          versions: [
+            {
+              version: 1,
+              id: '123',
+              schema: {},
+            },
+          ],
+          schedule: {
+            expire: true,
+            allowLateSubmissions: false,
+            message: 'schedule status message',
+          },
+        },
+      };
+    });
+    getSubmissionSpy.mockImplementation(() => {
+      return {
+        data: {
+          submission: {
+            submission: {
+              data: {
+                submit: true,
+                state: 'submitted',
+              },
+            },
+            draft: false,
+          },
+          form: {
+            identityProviders: [
+              {
+                code: IdentityMode.PUBLIC,
+              },
+            ],
+          },
+          version: {
+            id: '123',
+            schema: {
+              components: [],
+            },
+            version: 1,
+          },
+        },
+      };
+    });
+    getUserSubmissionsSpy.mockImplementation(() => {
+      return {
+        data: [
+          {
+            permissions: [],
+          },
+        ],
+      };
+    });
+    getDispositionSpy.mockImplementation(() => {});
+  });
+
+  it('formScheduleExpireMessage returns the formScheduleExpireMessage translation', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.formScheduleExpireMessage).toEqual(
+      'trans.formViewer.formScheduleExpireMessage'
+    );
+  });
+
+  it('formUnauthorizedMessage returns the formUnauthorizedMessage translation', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.formUnauthorizedMessage).toEqual(
+      'trans.formViewer.formUnauthorizedMessage'
+    );
   });
 
-  it('renders', async () => {
-    const getFormSchemaSpy = vi.spyOn(FormViewer.methods, 'getFormSchema');
-    const leaveThisPageSpy = vi.spyOn(FormViewer.methods, 'leaveThisPage');
+  it('viewerOptions returns default values', async () => {
     formStore.form = {
       name: 'This is a form title',
     };
-    getFormSchemaSpy.mockImplementation(() => {});
-    leaveThisPageSpy.mockImplementation(() => {});
-    const wrapper = mount(FormViewer, {
+    const wrapper = shallowMount(FormViewer, {
       props: {
         formId: formId,
         displayTitle: true,
@@ -61,129 +227,2135 @@ describe('FormViewer.vue', () => {
         provide: {
           setWideLayout: vi.fn(),
         },
-        plugins: [router, pinia],
-        stubs: {
-          BaseDialog: true,
-          FormViewerMultiUpload: true,
-          VSkeletonLoader: {
-            name: 'VSkeletonLoader',
-            template: '<div class="v-skeleton-loader-stub"><slot /></div>',
-          },
-          VContainer: {
-            name: 'VContainer',
-            template: '<div class="v-container-stub"><slot /></div>',
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.viewerOptions).toEqual({
+      sanitizeConfig: {
+        addTags: ['iframe'],
+        ALLOWED_TAGS: ['iframe'],
+      },
+      templates: templateExtensions,
+      readOnly: false,
+      hooks: {
+        beforeSubmit: wrapper.vm.onBeforeSubmit,
+      },
+      // pass in options for custom components to use
+      componentOptions: {
+        simplefile: {
+          config: appStore.config,
+          chefsToken: wrapper.vm.getCurrentAuthHeader,
+          deleteFile: wrapper.vm.deleteFile,
+          getFile: wrapper.vm.getFile,
+          uploadFile: wrapper.vm.uploadFile,
+        },
+      },
+      evalContext: {
+        token: authStore.tokenParsed,
+        user: authStore.user,
+      },
+    });
+  });
+
+  it('canSaveDraft will return true if it is not read only and permissions includes SUBMISSION_UPDATE', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.permissions = [FormPermissions.SUBMISSION_UPDATE];
+
+    expect(wrapper.vm.canSaveDraft).toBeTruthy();
+  });
+
+  it('onMounted', () => {
+    it('will add event listener beforeunload will show modal and getFormSchema', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
           },
-          formio: {
-            name: 'formio',
-            template: '<div class="formio-stub"><slot /></div>',
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(readPublishedSpy).toBeCalledTimes(1);
+      expect(getSubmissionSpy).toBeCalledTimes(0);
+      expect(wrapper.vm.showModal).toBeTruthy();
+      expect(addEventListenerSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+    });
+    it('if submission id and it is not a duplicate, it should call getFormData', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
           },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      expect(readPublishedSpy).toBeCalledTimes(0);
+      expect(getSubmissionSpy).toBeCalledTimes(1);
+      expect(wrapper.vm.showModal).toBeFalsy();
+      expect(addEventListenerSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledTimes(0);
+    });
+  });
+  it('if submission id and it is a duplicate, it should call getFormSchema and getFormData', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: true,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
         },
+        plugins: [pinia],
+        stubs: STUBS,
       },
     });
 
-    wrapper.setData({ form: { name: 'This is a form title' } });
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    expect(readPublishedSpy).toBeCalledTimes(1);
+    expect(getSubmissionSpy).toBeCalledTimes(1);
+    expect(wrapper.vm.showModal).toBeFalsy();
+    expect(addEventListenerSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('onBeforeUnmount should call window removeEventListener', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
 
     await flushPromises();
 
-    expect(wrapper.html()).toContain(formStore.form.name);
+    wrapper.unmount();
+
+    await flushPromises();
+    expect(removeEventListenerSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(0);
   });
 
-  it('when navigating away, it should not show the modal for submissions with drafts disabled', async () => {
-    const getFormSchemaSpy = vi.spyOn(FormViewer.methods, 'getFormSchema');
-    const leaveThisPageSpy = vi.spyOn(FormViewer.methods, 'leaveThisPage');
-    formStore.form = {
-      name: 'This is a form title',
-    };
-    getFormSchemaSpy.mockImplementation(() => {});
-    leaveThisPageSpy.mockImplementation(() => {});
-    const wrapper = mount(FormViewer, {
+  it('getCurrentAuthHeader should return the bearer token', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.getCurrentAuthHeader()).toEqual(
+      `Bearer ${authStore.keycloak.token}`
+    );
+  });
+
+  it('getFormData calls getSubmission and getUserSubmissions', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    await wrapper.vm.getFormData();
+
+    expect(getSubmissionSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('getFormData calls getSubmission and getUserSubmissions', async () => {
+    const wrapper = shallowMount(FormViewer, {
       props: {
         formId: formId,
-        submissionId: '1',
         displayTitle: true,
+        readOnly: true,
       },
       global: {
         provide: {
           setWideLayout: vi.fn(),
         },
-        plugins: [router, pinia],
-        stubs: {
-          BaseDialog: true,
-          FormViewerMultiUpload: true,
-          VSkeletonLoader: {
-            name: 'VSkeletonLoader',
-            template: '<div class="v-skeleton-loader-stub"><slot /></div>',
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+    getSubmissionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          submission: {
+            submission: {
+              data: {
+                submit: false,
+                state: 'draft',
+              },
+            },
+            draft: true,
           },
-          VContainer: {
-            name: 'VContainer',
-            template: '<div class="v-container-stub"><slot /></div>',
+          form: {
+            identityProviders: [
+              {
+                code: IdentityMode.PUBLIC,
+              },
+            ],
           },
-          formio: {
-            name: 'formio',
-            template: '<div class="formio-stub"><slot /></div>',
+          version: {
+            id: '123',
+            schema: {
+              components: [],
+            },
+            version: 1,
           },
         },
-      },
+      };
     });
 
-    wrapper.setData({
-      form: { name: 'This is a form title', enableSubmitterDraft: false },
+    await wrapper.vm.getFormData();
+
+    expect(getSubmissionSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('getFormData addsNotification if an error is thrown', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
     });
 
     await flushPromises();
 
-    wrapper.vm.showdoYouWantToSaveTheDraftModal();
+    addNotificationSpy.mockReset();
 
-    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeFalsy();
+    getSubmissionSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+
+    await wrapper.vm.getFormData();
+
+    expect(getSubmissionSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(1);
   });
 
-  it('when navigating away, it should show the modal for submissions with drafts enabled', async () => {
-    const getFormSchemaSpy = vi.spyOn(FormViewer.methods, 'getFormSchema');
-    const leaveThisPageSpy = vi.spyOn(FormViewer.methods, 'leaveThisPage');
-    formStore.form = {
-      name: 'This is a form title',
-    };
-    getFormSchemaSpy.mockImplementation(() => {});
-    leaveThisPageSpy.mockImplementation(() => {});
-    const wrapper = mount(FormViewer, {
+  it('getFormData will call deleteFieldData if the submission is a duplicate and the response version schema has components', async () => {
+    const wrapper = shallowMount(FormViewer, {
       props: {
         formId: formId,
         displayTitle: true,
+        isDuplicate: true,
+        staffEditMode: false,
       },
       global: {
         provide: {
           setWideLayout: vi.fn(),
         },
-        plugins: [router, pinia],
-        stubs: {
-          BaseDialog: true,
-          FormViewerMultiUpload: true,
-          VSkeletonLoader: {
-            name: 'VSkeletonLoader',
-            template: '<div class="v-skeleton-loader-stub"><slot /></div>',
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    getSubmissionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          submission: {
+            submission: {
+              data: {
+                submit: false,
+                state: 'draft',
+              },
+            },
+            draft: true,
           },
-          VContainer: {
-            name: 'VContainer',
-            template: '<div class="v-container-stub"><slot /></div>',
+          form: {
+            identityProviders: [
+              {
+                code: IdentityMode.TEAM,
+              },
+            ],
           },
-          formio: {
-            name: 'formio',
-            template: '<div class="formio-stub"><slot /></div>',
+          version: {
+            id: '123',
+            schema: {
+              components: [
+                {
+                  type: 'textfield',
+                },
+              ],
+            },
+            version: 1,
           },
         },
+      };
+    });
+
+    await wrapper.vm.getFormData();
+  });
+
+  it('calls readPublished by default', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
       },
     });
 
-    wrapper.setData({
-      bulkFile: false,
-      form: { name: 'This is a form title', enableSubmitterDraft: true },
-      showModal: true,
+    await flushPromises();
+
+    readPublishedSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    await wrapper.vm.getFormSchema();
+
+    expect(readPublishedSpy).toBeCalledTimes(1);
+    expect(readVersionSpy).toBeCalledTimes(0);
+    expect(readDraftSpy).toBeCalledTimes(0);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+  it('calls readPublished by default, and pushes to router if there are no versions', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
     });
 
     await flushPromises();
 
-    wrapper.vm.showdoYouWantToSaveTheDraftModal();
+    readPublishedSpy.mockReset();
+    addNotificationSpy.mockReset();
 
-    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeTruthy();
+    readPublishedSpy.mockImplementationOnce(() => {
+      return {};
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(push).toBeCalledTimes(1);
+    expect(readPublishedSpy).toBeCalledTimes(1);
+    expect(readVersionSpy).toBeCalledTimes(0);
+    expect(readDraftSpy).toBeCalledTimes(0);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+  it('calls readVersion if there is a versionId', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        versionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    readVersionSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    readVersionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {},
+        },
+      };
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(readPublishedSpy).toBeCalledTimes(0);
+    expect(readVersionSpy).toBeCalledTimes(1);
+    expect(readDraftSpy).toBeCalledTimes(0);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+  it('readVersion will throw an error if the response does not contain a schema', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        versionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    readVersionSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    readVersionSpy.mockImplementationOnce(() => {
+      return {};
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(readPublishedSpy).toBeCalledTimes(0);
+    expect(readVersionSpy).toBeCalledTimes(1);
+    expect(readDraftSpy).toBeCalledTimes(0);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+  it('calls readDraft if there is a draftId', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    readDraftSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    readDraftSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {},
+        },
+      };
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(readPublishedSpy).toBeCalledTimes(0);
+    expect(readVersionSpy).toBeCalledTimes(0);
+    expect(readDraftSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+  it('readDraft will throw an error if the response does not contain a schema', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    readDraftSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    readDraftSpy.mockImplementationOnce(() => {
+      return {};
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(readPublishedSpy).toBeCalledTimes(0);
+    expect(readVersionSpy).toBeCalledTimes(0);
+    expect(readDraftSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+  it('if the error response is a 401 then it will set isAuthorized to false', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    readDraftSpy.mockReset();
+    addNotificationSpy.mockReset();
+
+    readDraftSpy.mockImplementationOnce(() => {
+      throw {
+        response: {
+          status: 401,
+        },
+      };
+    });
+
+    await wrapper.vm.getFormSchema();
+
+    expect(wrapper.vm.isAuthorized).toBeFalsy();
+    expect(readPublishedSpy).toBeCalledTimes(0);
+    expect(readVersionSpy).toBeCalledTimes(0);
+    expect(readDraftSpy).toBeCalledTimes(1);
+    expect(getUserSubmissionsSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('toggleBlock will set the block variable to true or false', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.toggleBlock(true);
+    expect(wrapper.vm.block).toBeTruthy();
+    wrapper.vm.toggleBlock(false);
+    expect(wrapper.vm.block).toBeFalsy();
+  });
+
+  it('formChange will call jsonManager', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const checkValidity = vi.fn();
+
+    wrapper.vm.submissionRecord = {
+      draft: true,
+    };
+
+    wrapper.vm.chefForm = {
+      formio: {
+        checkValidity,
+        _data: {
+          components: [],
+        },
+      },
+    };
+
+    wrapper.vm.formChange({
+      changed: {
+        flags: {
+          fromSubmission: false,
+        },
+      },
+    });
+    expect(checkValidity).toBeCalledTimes(1);
+    expect(wrapper.vm.formDataEntered).toBeTruthy();
+    expect(wrapper.vm.formElement).toEqual({
+      checkValidity,
+      _data: { components: [] },
+    });
+  });
+
+  it('resetMessage will reset sbdMessage to default values', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.sbdMessage = {
+      message: '',
+      error: '',
+      upload_state: 1,
+      response: ['something'],
+      file_name: '',
+      typeError: 0,
+    };
+    wrapper.vm.block = true;
+
+    wrapper.vm.resetMessage();
+
+    expect(wrapper.vm.sbdMessage).toEqual({
+      message: undefined,
+      error: false,
+      upload_state: 0,
+      response: [],
+      file_name: undefined,
+      typeError: -1,
+    });
+    expect(wrapper.vm.block).toBeFalsy();
+  });
+
+  describe('saveBulkData and sendMultiSubmissionData', () => {
+    it('sendMultiSubmissionData sets success message for sbdMessage and addsNotification on success', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.sendMultiSubmissionData({});
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewer.multiDraftUploadSuccess',
+        color: 'success',
+        icon: 'mdi:mdi-check-circle',
+        type: 'success',
+      });
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(wrapper.vm.sbdMessage).toEqual({
+        file_name: String,
+        typeError: Number,
+        message: 'trans.formViewer.multiDraftUploadSuccess',
+        error: false,
+        upload_state: 10,
+        response: [],
+      });
+      expect(wrapper.vm.block).toBeFalsy();
+      expect(wrapper.vm.saving).toBeFalsy();
+    });
+    it('saveBulkData will call sendMultiSubmissionData with the submissions given', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.saveBulkData([
+        {
+          id: '123',
+        },
+        {
+          id: '124',
+        },
+      ]);
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(createMultiSubmissionSpy).toBeCalledWith(formId, 1, {
+        draft: true,
+        submission: {
+          data: [
+            {
+              id: '123',
+            },
+            {
+              id: '124',
+            },
+          ],
+        },
+      });
+    });
+    it('sendMultiSubmissionData sets failure message for sbdMessage and addsNotification if response status does not contain status 200 or 201', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+      addNotificationSpy.mockReset();
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 500,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.sendMultiSubmissionData({});
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewer.errSubmittingForm',
+        consoleError: 'trans.formViewer.errorSavingFile',
+      });
+      expect(addNotificationSpy).toBeCalledTimes(1);
+    });
+  });
+
+  describe('setFinalError', () => {
+    it('by default it will set sbdMessage message, error, upload_state, response', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {},
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual(
+        'trans.formViewer.errSubmittingForm'
+      );
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          error_message: 'trans.formViewer.errSubmittingForm',
+        },
+      ]);
+    });
+    it('if error.response.data is not undefined then it will give a default message if response reports is undefined', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {
+          data: {
+            title: 'some title',
+          },
+        },
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          error_message: 'trans.formViewer.errSubmittingForm',
+        },
+      ]);
+    });
+    it('if error.response.data is not undefined then it will format that error message', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {
+          data: {
+            title: 'some title',
+            reports: [
+              {
+                details: [
+                  {
+                    message: 'an error occurred',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          key: null,
+          label: null,
+          submission: 0,
+          validator: null,
+          error_message: 'an error occurred',
+        },
+      ]);
+    });
+  });
+
+  it('saveDraft will call updateSubmission and replace the route if there is a submission id and it is not a duplicate', async () => {
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {});
+    const replace = vi.fn();
+
+    useRouter.mockImplementationOnce(() => ({
+      currentRoute: ref({
+        query: '',
+      }),
+      replace,
+    }));
+
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.saveDraft();
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+    expect(replace).toBeCalledTimes(1);
+  });
+
+  it('saveDraft will call createSubmission and push the route if there is a submission id and it is a duplicate', async () => {
+    const createSubmissionSpy = vi.spyOn(formService, 'createSubmission');
+    createSubmissionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          id: '123',
+        },
+      };
+    });
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        isDuplicate: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.saveDraft();
+    expect(createSubmissionSpy).toBeCalledTimes(1);
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('saveDraft will addNotification if an error occurs', async () => {
+    const createSubmissionSpy = vi.spyOn(formService, 'createSubmission');
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    createSubmissionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          id: '123',
+        },
+      };
+    });
+    updateSubmissionSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const replace = vi.fn();
+
+    useRouter.mockImplementationOnce(() => ({
+      currentRoute: ref({
+        query: '',
+      }),
+      replace,
+    }));
+
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    await wrapper.vm.saveDraft();
+    expect(createSubmissionSpy).toBeCalledTimes(0);
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+    expect(replace).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('onFormRender will set loading to false if it is loading', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.isLoading = true;
+    wrapper.vm.onFormRender();
+    expect(wrapper.vm.isLoading).toBeFalsy();
+  });
+
+  it('onSubmitButton will alert if it the form is a preview', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+        preview: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    alertSpy.mockImplementationOnce(() => {});
+
+    wrapper.vm.onSubmitButton({ instance: { parent: { root: '' } } });
+
+    expect(alertSpy).toBeCalledTimes(1);
+  });
+
+  it('onSubmitButton will show the submitConfirmDialog if enableSubmitterDraft is enabled', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    alertSpy.mockImplementationOnce(() => {});
+
+    wrapper.vm.form.enableSubmitterDraft = true;
+
+    wrapper.vm.onSubmitButton({
+      instance: {
+        parent: {
+          root: {
+            form: {
+              action: 'something',
+            },
+          },
+        },
+      },
+    });
+
+    expect(wrapper.vm.showSubmitConfirmDialog).toBeTruthy();
+  });
+
+  it('continueSubmit will set confirmSubmit to true and showSubmitConfirmDialog to false', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        isDuplicate: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.continueSubmit();
+
+    expect(wrapper.vm.confirmSubmit).toBeTruthy();
+    expect(wrapper.vm.showSubmitConfirmDialog).toBeFalsy();
+  });
+
+  describe('onBeforeSubmit', async () => {
+    it('if preview, it will just increment reRenderFormIo', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+          preview: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.reRenderFormIo = 0;
+
+      const next = vi.fn();
+
+      await wrapper.vm.onBeforeSubmit({}, next);
+
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+    });
+    it('if enableSubmitterDraft is disabled, it will just call next', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.form.enableSubmitterDraft = false;
+
+      const next = vi.fn();
+
+      await wrapper.vm.onBeforeSubmit({}, next);
+
+      expect(next).toBeCalledTimes(1);
+    });
+    it('if enableSubmitterDraft is enabled, it will reRenderFormIo if confirmSubmit is false', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.form.enableSubmitterDraft = true;
+      wrapper.vm.reRenderFormIo = 0;
+
+      const next = vi.fn();
+
+      vi.useFakeTimers();
+      await wrapper.vm.onBeforeSubmit({}, next);
+      expect(next).toBeCalledTimes(0);
+      expect(wrapper.vm.reRenderFormIo).toEqual(1);
+      vi.useRealTimers();
+    });
+    it('if enableSubmitterDraft is enabled, it will call next if confirmSubmit is true', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.form.enableSubmitterDraft = true;
+      wrapper.vm.reRenderFormIo = 0;
+      wrapper.vm.confirmSubmit = true;
+      wrapper.vm.showSubmitConfirmDialog = true;
+
+      const next = vi.fn();
+
+      vi.useFakeTimers();
+      wrapper.vm.onBeforeSubmit({}, next);
+      vi.advanceTimersByTime(500);
+      wrapper.vm.showSubmitConfirmDialog = false;
+      await nextTick();
+      expect(next).toBeCalledTimes(1);
+      expect(wrapper.vm.reRenderFormIo).toEqual(0);
+      expect(wrapper.vm.confirmSubmit).toBeFalsy();
+      vi.useRealTimers();
+    });
+  });
+
+  describe('doSubmit', () => {
+    it('if it is not a duplicate it will set the submissionRecord to the responses data submission', async () => {
+      const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+      updateSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+          data: {
+            submission: { testKey: 'testValue' },
+          },
+        };
+      });
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+          isDuplicate: false,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.doSubmit({
+        data: {
+          lateEntry: false,
+        },
+      });
+
+      expect(wrapper.vm.submissionRecord).toEqual({ testKey: 'testValue' });
+    });
+    it('if status code 200 or 201 is not in the response, it will throw an error', async () => {
+      const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+      updateSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 500,
+          data: {
+            submission: {},
+          },
+        };
+      });
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+          isDuplicate: false,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      const consoleErrorSpy = vi.spyOn(console, 'error');
+      consoleErrorSpy.mockImplementationOnce(() => {});
+
+      const errMsg = await wrapper.vm.doSubmit({
+        data: {
+          lateEntry: false,
+        },
+      });
+
+      expect(consoleErrorSpy).toBeCalledTimes(1);
+      expect(errMsg).toEqual('trans.formViewer.errMsg');
+    });
+  });
+
+  describe('onSubmit', () => {
+    it('if preview, it will alert and set confirmSubmit to false', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+          preview: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.reRenderFormIo = 0;
+
+      alertSpy.mockImplementationOnce(() => {});
+
+      await wrapper.vm.onSubmit({});
+
+      expect(alertSpy).toBeCalledTimes(1);
+      expect(wrapper.vm.confirmSubmit).toBeFalsy();
+    });
+    it('if there are no errors it will call the currentForm.events.emit function', async () => {
+      const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+      updateSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+          data: {
+            submission: { testKey: 'testValue' },
+          },
+        };
+      });
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      const emit = vi.fn();
+
+      wrapper.vm.currentForm = {
+        events: {
+          emit: emit,
+        },
+      };
+      await wrapper.vm.onSubmit({
+        data: {
+          lateEntry: false,
+        },
+      });
+
+      expect(emit).toBeCalledTimes(1);
+    });
+    it('if there are errors it will addNotification', async () => {
+      const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+      updateSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 500,
+          data: {
+            submission: { testKey: 'testValue' },
+          },
+        };
+      });
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          submissionId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      await wrapper.vm.onSubmit({
+        data: {
+          lateEntry: false,
+        },
+      });
+
+      expect(addNotificationSpy).toBeCalledTimes(1);
+    });
+  });
+
+  it('onSubmitDone will emit submission-updated if staffEditMode is true', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        staffEditMode: true,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.onSubmitDone();
+
+    expect(wrapper.emitted()).toHaveProperty('submission-updated');
+  });
+
+  it('onSubmitDone will push to router if staffEditMode is false', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+        staffEditMode: false,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.onSubmitDone();
+
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('onCustomEvent will just make an alert right now', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.onCustomEvent({ type: 'custom' });
+
+    expect(alertSpy).toBeCalledTimes(1);
+  });
+
+  it('leaveThisPage will push to router if saveDraftState is 0 or if there is a bulkFile value', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.saveDraftState = 0;
+
+    wrapper.vm.leaveThisPage();
+
+    expect(push).toBeCalledTimes(1);
+    push.mockReset();
+
+    wrapper.vm.saveDraftState = 1;
+    wrapper.vm.bulkFile = true;
+
+    wrapper.vm.leaveThisPage();
+
+    expect(push).toBeCalledTimes(1);
+    push.mockReset();
+
+    wrapper.vm.saveDraftState = 1;
+    wrapper.vm.bulkFile = false;
+
+    wrapper.vm.leaveThisPage();
+
+    expect(push).toBeCalledTimes(0);
+    expect(wrapper.vm.bulkFile).toBeTruthy();
+  });
+
+  it('yes will call saveDraftFromModal', async () => {
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {});
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.yes();
+
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+  });
+
+  it('no will call leaveThisPage', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.no();
+
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('showdoYouWantToSaveTheDraftModalForSwitch will set doYouWantToSaveTheDraft to true if the form had data entered and showModal is true', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.formDataEntered = true;
+    wrapper.vm.showModal = true;
+
+    wrapper.vm.showdoYouWantToSaveTheDraftModalForSwitch();
+
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeTruthy();
+
+    wrapper.vm.formDataEntered = false;
+    wrapper.vm.showModal = false;
+    wrapper.vm.doYouWantToSaveTheDraft = false;
+
+    wrapper.vm.showdoYouWantToSaveTheDraftModalForSwitch();
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeFalsy();
+    // leaveThisPage will just toggle bulkFile
+    expect(wrapper.vm.bulkFile).toBeTruthy();
+  });
+
+  it('showdoYouWantToSaveTheDraftModal will set doYouWantToSaveTheDraft to true it is not a bulk upload, if (submissionId is not undefined or the form had data entered) and enableSubmitterDraft is enabled', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: undefined,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.showModal = true;
+    wrapper.vm.form.enableSubmitterDraft = true;
+
+    wrapper.vm.showdoYouWantToSaveTheDraftModal();
+
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeTruthy();
+  });
+
+  it('showdoYouWantToSaveTheDraftModal will call leaveThisPage otherwise', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: undefined,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.showModal = false;
+    wrapper.vm.form.enableSubmitterDraft = true;
+
+    wrapper.vm.showdoYouWantToSaveTheDraftModal();
+
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeFalsy();
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('showdoYouWantToSaveTheDraftModal will call leaveThisPage if bulkFile is enabled', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: undefined,
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.bulkFile = true;
+
+    wrapper.vm.showdoYouWantToSaveTheDraftModal();
+
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeFalsy();
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('switchView will call showdoYouWantToSaveTheDraftModalForSwitch and does not toggle bulkFile if bulkFile is false', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.formDataEntered = true;
+    wrapper.vm.showModal = true;
+    wrapper.vm.bulkFile = false;
+
+    wrapper.vm.switchView();
+
+    expect(wrapper.vm.bulkFile).toBeFalsy();
+  });
+
+  it('switchView will call toggle bulkFile if bulkFile is true', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.formDataEntered = false;
+    wrapper.vm.showModal = false;
+    wrapper.vm.bulkFile = true;
+
+    wrapper.vm.switchView();
+
+    expect(wrapper.vm.bulkFile).toBeFalsy();
+  });
+
+  it('saveDraftFromModalNow will call sendSubmission and then leaveThisPage', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {});
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    await wrapper.vm.saveDraftFromModalNow();
+
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('saveDraftFromModalNow will call addNotification if an error occurs', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    await wrapper.vm.saveDraftFromModalNow();
+
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('saveDraftFromModal will call saveDraftFromModalNow if there is an event', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    wrapper.vm.saveDraftFromModal({});
+
+    expect(updateSubmissionSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('saveDraftFromModal will call leaveThisPage if there is no event', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
+    updateSubmissionSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    addNotificationSpy.mockReset();
+
+    wrapper.vm.bulkFile = true;
+
+    wrapper.vm.saveDraftFromModal();
+
+    expect(updateSubmissionSpy).toBeCalledTimes(0);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+    expect(push).toBeCalledTimes(1);
+  });
+
+  it('closeBulkYesOrNo sets doYouWantToSaveTheDraft to false', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.doYouWantToSaveTheDraft = true;
+
+    wrapper.vm.closeBulkYesOrNo();
+
+    expect(wrapper.vm.doYouWantToSaveTheDraft).toBeFalsy();
+  });
+
+  it('beforeWindowUnload calls the events preventDefault and sets returnValue to an empty string if preview is disabled and it is not read only', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const preventDefault = vi.fn();
+
+    wrapper.vm.beforeWindowUnload({
+      preventDefault: preventDefault,
+      returnValue: 'return some value',
+    });
+
+    expect(preventDefault).toBeCalledTimes(1);
+  });
+
+  it('deleteFile will call fileServices deleteFile', async () => {
+    const deleteFileSpy = vi.spyOn(fileService, 'deleteFile');
+    deleteFileSpy.mockImplementation(() => {});
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.deleteFile('asdf');
+    expect(deleteFileSpy).toBeCalledWith(undefined);
+    await wrapper.vm.deleteFile({ id: '123' });
+    expect(deleteFileSpy).toBeCalledWith('123');
+    await wrapper.vm.deleteFile({ data: { id: '123' } });
+    expect(deleteFileSpy).toBeCalledWith('123');
+  });
+
+  it('getFile will call form stores downloadFile for json', async () => {
+    let createObjectURLSpy = vi.spyOn(window.URL, 'createObjectURL');
+    createObjectURLSpy.mockImplementation((data) => data);
+    downloadFileSpy.mockImplementationOnce(() => {
+      formStore.downloadedFile = {
+        headers: {
+          'content-type': 'application/json',
+          'content-disposition': 'attachment; filename="test.json"',
+        },
+        data: {
+          testKey: 'testValue',
+        },
+      };
+    });
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.getFile('asdf');
+    expect(downloadFileSpy).toBeCalledTimes(1);
+    expect(getDispositionSpy).toBeCalledTimes(1);
+  });
+
+  it('getFile will call form stores downloadFile for other file types', async () => {
+    let createObjectURLSpy = vi.spyOn(window.URL, 'createObjectURL');
+    createObjectURLSpy.mockImplementation((data) => data);
+    downloadFileSpy.mockImplementationOnce(() => {
+      formStore.downloadedFile = {
+        headers: {
+          'content-type': 'text/csv',
+          'content-disposition': 'attachment; filename="test.csv"',
+        },
+        data: 'cell1,cell2,cell3',
+      };
+    });
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.getFile('asdf');
+    expect(downloadFileSpy).toBeCalledTimes(1);
+    expect(getDispositionSpy).toBeCalledTimes(1);
+  });
+
+  it('uploadFile will call fileServices uploadFile', async () => {
+    const uploadFileSpy = vi.spyOn(fileService, 'uploadFile');
+    uploadFileSpy.mockImplementation(() => {});
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        submissionId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.uploadFile('this is a file object');
+    expect(uploadFileSpy).toBeCalledTimes(1);
   });
 });
diff --git a/app/frontend/tests/unit/components/designer/FormViewerActions.spec.js b/app/frontend/tests/unit/components/designer/FormViewerActions.spec.js
new file mode 100644
index 000000000..8fc41321d
--- /dev/null
+++ b/app/frontend/tests/unit/components/designer/FormViewerActions.spec.js
@@ -0,0 +1,193 @@
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useFormStore } from '~/store/form';
+import FormViewerActions from '~/components/designer/FormViewerActions.vue';
+import { FormPermissions } from '~/utils/constants';
+
+const STUBS = {
+  RouterLink: {
+    name: 'RouterLink',
+    template: '<div class="router-link-stub"><slot /></div>',
+  },
+  VBtn: {
+    template: '<div class="v-btn-stub"><slot /></div>',
+  },
+  VTooltip: {
+    name: 'VTooltip',
+    template: '<div class="v-tooltip-stub"><slot /></div>',
+  },
+  VIcon: {
+    template: '<div class="v-icon-stub"><slot /></div>',
+  },
+  ManageSubmissionUsers: {
+    template: '<div class="manage-submission-users-stub"><slot /></div>',
+  },
+};
+
+describe('FormDisclaimer.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+
+    formStore.isRTL = false;
+  });
+
+  it('renders', () => {
+    const wrapper = mount(FormViewerActions, {
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain('trans.formViewerActions.wideLayout');
+    expect(wrapper.text()).toContain('trans.printOptions.print');
+  });
+
+  it('showEditToggle returns true if readOnly is true and permissions includes SUBMISSION_UPDATE', async () => {
+    const wrapper = shallowMount(FormViewerActions, {
+      props: {
+        readOnly: true,
+        permissions: [FormPermissions.SUBMISSION_UPDATE],
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.showEditToggle).toBeTruthy();
+  });
+
+  it('toggleWideLayout will toggle isWideLayout and call setWideLayout', async () => {
+    const setWideLayout = vi.fn();
+    setWideLayout.mockImplementation(() => {});
+    const wrapper = shallowMount(FormViewerActions, {
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: setWideLayout,
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    setWideLayout.mockReset();
+
+    wrapper.vm.toggleWideLayout();
+    expect(wrapper.vm.isWideLayout).toBeTruthy();
+    expect(setWideLayout).toBeCalledTimes(1);
+  });
+
+  it('renders if submitters can upload submissions and it is single submission', () => {
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        allowSubmitterToUploadFile: true,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain(
+      'trans.formViewerActions.switchMultiSubmssn'
+    );
+  });
+
+  it('renders if submitters can upload submissions and it is single submission', () => {
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        allowSubmitterToUploadFile: true,
+        bulkFile: true,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain(
+      'trans.formViewerActions.switchSingleSubmssn'
+    );
+  });
+
+  it('renders if canSaveDraft and draftEnabled is true and it is not bulkFile', () => {
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        canSaveDraft: true,
+        draftEnabled: true,
+        bulkFile: false,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain('trans.formViewerActions.saveAsADraft');
+  });
+
+  it('renders if showEditToggle, isDraft, and draftEnabled is true', () => {
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        readOnly: true,
+        permissions: [FormPermissions.SUBMISSION_UPDATE],
+        draftEnabled: true,
+        isDraft: true,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain('trans.formViewerActions.editThisDraft');
+  });
+
+  it('renders if submissionId exists and draftEnabled is true', () => {
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        submissionId: '123',
+        draftEnabled: true,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.html()).toContain('manage-submission-users-stub');
+  });
+});
diff --git a/app/frontend/tests/unit/components/designer/FormsTable.spec.js b/app/frontend/tests/unit/components/designer/FormsTable.spec.js
new file mode 100644
index 000000000..14ccad66d
--- /dev/null
+++ b/app/frontend/tests/unit/components/designer/FormsTable.spec.js
@@ -0,0 +1,63 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { describe, expect, it } from 'vitest';
+
+import { useAuthStore } from '~/store/auth';
+import { useFormStore } from '~/store/form';
+import { useIdpStore } from '~/store/identityProviders';
+import FormsTable from '~/components/designer/FormsTable.vue';
+
+describe('FormsTable.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const authStore = useAuthStore(pinia);
+  const formStore = useFormStore(pinia);
+  const idpStore = useIdpStore(pinia);
+
+  beforeEach(() => {
+    authStore.$reset();
+    formStore.$reset();
+    idpStore.$reset();
+
+    formStore.isRTL = false;
+  });
+
+  it('renders', () => {
+    const wrapper = mount(FormsTable, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: RouterLinkStub,
+          BaseDialog: true,
+        },
+      },
+    });
+    expect(wrapper.text()).toContain('trans.formsTable.myForms');
+  });
+
+  it('onDescriptionClick should set the description values', () => {
+    const fId = '1';
+    const fDescription = 'description';
+
+    const wrapper = mount(FormsTable, {
+      global: {
+        plugins: [pinia],
+        stubs: {
+          RouterLink: RouterLinkStub,
+          BaseDialog: true,
+        },
+      },
+    });
+
+    expect(wrapper.vm.formId).toBe(null);
+    expect(wrapper.vm.formDescription).toBe(null);
+    expect(wrapper.vm.showDescriptionDialog).toBeFalsy();
+
+    wrapper.vm.onDescriptionClick(fId, fDescription);
+
+    expect(wrapper.vm.formId).toBe(fId);
+    expect(wrapper.vm.formDescription).toBe(fDescription);
+    expect(wrapper.vm.showDescriptionDialog).toBeTruthy();
+  });
+});
diff --git a/app/frontend/tests/unit/views/form/Create.spec.js b/app/frontend/tests/unit/views/form/Create.spec.js
index baf063a73..600c2fb2b 100644
--- a/app/frontend/tests/unit/views/form/Create.spec.js
+++ b/app/frontend/tests/unit/views/form/Create.spec.js
@@ -19,7 +19,6 @@ vi.mock('vue-router', () => ({
 
 describe('Create.vue', () => {
   const onBeforeRouteLeaveSpy = vi.spyOn(VueRouter, 'onBeforeRouteLeave');
-  const onFormLoad = vi.fn();
   const mockWindowConfirm = vi.spyOn(window, 'confirm');
   const pinia = createTestingPinia();
   setActivePinia(pinia);
@@ -58,9 +57,6 @@ describe('Create.vue', () => {
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
-            methods: {
-              onFormLoad,
-            },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
           VForm: {
@@ -131,9 +127,6 @@ describe('Create.vue', () => {
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
-            methods: {
-              onFormLoad,
-            },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
           VStepper: {
@@ -194,9 +187,6 @@ describe('Create.vue', () => {
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
-            methods: {
-              onFormLoad,
-            },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
           VStepper: {
@@ -262,9 +252,6 @@ describe('Create.vue', () => {
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
-            methods: {
-              onFormLoad,
-            },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
           VStepper: {
diff --git a/app/frontend/tests/unit/views/form/Design.spec.js b/app/frontend/tests/unit/views/form/Design.spec.js
index 74365ff19..5bf05f3ed 100644
--- a/app/frontend/tests/unit/views/form/Design.spec.js
+++ b/app/frontend/tests/unit/views/form/Design.spec.js
@@ -15,7 +15,6 @@ vi.mock('vue-router', () => ({
 }));
 
 describe('Design.vue', () => {
-  const onFormLoad = vi.fn();
   const mockWindowConfirm = vi.spyOn(window, 'confirm');
   const pinia = createTestingPinia();
   setActivePinia(pinia);
@@ -42,15 +41,8 @@ describe('Design.vue', () => {
           },
           FormDesigner: {
             name: 'FormDesigner',
-            methods: {
-              onFormLoad,
-            },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
-          BaseSecure: {
-            name: 'BaseSecure',
-            template: '<div class="base-secure-stub"><slot /></div>',
-          },
         },
       },
     });

From 4536b3f1f0957b80dc1450cd7307b30ea7130a1c Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Wed, 9 Oct 2024 09:26:53 -0700
Subject: [PATCH 4/4] Added column persistence to MySubmissionsTable (#1507)

MySubmissionsTable now persists the column selection for the currently active form in local storage.
---
 app/frontend/package-lock.json                | 95 +++++++++++++++++++
 app/frontend/package.json                     |  1 +
 .../src/components/forms/SubmissionsTable.vue |  2 -
 .../forms/submission/MySubmissionsTable.vue   | 33 +++++--
 app/frontend/src/store/form.js                |  2 +
 .../submission/MySubmissionsTable.spec.js     | 12 ++-
 6 files changed, 134 insertions(+), 11 deletions(-)

diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index 8c883d704..c1730e50d 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "@vueuse/core": "^11.1.0",
         "axios": "^1.4.0",
         "bootstrap-scss": "^5.3.1",
         "crypto-js": "^4.1.1",
@@ -1075,6 +1076,12 @@
       "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
       "devOptional": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -1347,6 +1354,94 @@
         "vuetify": "^3.0.0"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+      "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "11.1.0",
+        "@vueuse/shared": "11.1.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+      "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+      "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 76a987ddd..e405c8cc5 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -35,6 +35,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.4.0",
     "bootstrap-scss": "^5.3.1",
     "crypto-js": "^4.1.1",
diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
index 4cc954038..dc97e9eee 100644
--- a/app/frontend/src/components/forms/SubmissionsTable.vue
+++ b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -27,7 +27,6 @@ const debounceTime = ref(300);
 const deleteItem = ref({});
 // Show only deleted items
 const deletedOnly = ref(false);
-const filterData = ref([]);
 const search = ref('');
 const filterIgnore = ref([
   {
@@ -503,7 +502,6 @@ async function restoreMultipleSubs() {
 
 async function updateFilter(data) {
   showColumnsDialog.value = false;
-  filterData.value = data;
   let preferences = {
     columns: [],
   };
diff --git a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
index 28a150531..a8206efd9 100644
--- a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
+++ b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
@@ -16,7 +16,6 @@ const properties = defineProps({
   },
 });
 
-const filterData = ref([]);
 const filterIgnore = ref([
   {
     key: 'confirmationId',
@@ -32,7 +31,8 @@ const showColumnsDialog = ref(false);
 
 const formStore = useFormStore();
 
-const { form, formFields, submissionList, isRTL } = storeToRefs(formStore);
+const { form, formFields, mySubmissionPreferences, submissionList, isRTL } =
+  storeToRefs(formStore);
 
 //------------------------ TABLE HEADERS
 // These are headers that will be available by default for the
@@ -102,11 +102,11 @@ const HEADERS = computed(() => {
   let headers = BASE_HEADERS.value;
 
   // The user selected some columns
-  if (filterData.value.length > 0) {
+  if (USER_PREFERENCES.value.length > 0) {
     headers = headers.filter(
       (header) =>
         // It must be in the user selected columns
-        filterData.value.some((fd) => fd === header.key) ||
+        USER_PREFERENCES.value.some((up) => up === header.key) ||
         // except if it's in the filter ignore
         filterIgnore.value.some((fd) => fd.key === header.key)
     );
@@ -181,6 +181,21 @@ const isCopyFromExistingSubmissionEnabled = computed(
   () => form.value && form.value.enableCopyExistingSubmission
 );
 
+// These are columns that the user has previously selected
+// through the select columns dialog. These are columns
+// that they wish to see in the table in this view.
+const USER_PREFERENCES = computed(() => {
+  let preselectedData = [];
+  if (
+    mySubmissionPreferences.value?.preferences?.formId &&
+    mySubmissionPreferences.value.preferences.formId == properties.formId &&
+    mySubmissionPreferences.value?.preferences?.columns
+  ) {
+    preselectedData = mySubmissionPreferences.value.preferences.columns;
+  }
+  return preselectedData;
+});
+
 onBeforeMount(async () => {
   await Promise.all([
     await formStore.fetchForm(properties.formId),
@@ -280,14 +295,20 @@ async function populateSubmissionsTable() {
 }
 
 async function updateFilter(data) {
-  filterData.value = data;
+  let preferences = {
+    formId: properties.formId,
+    columns: [],
+  };
+  data.forEach((d) => {
+    preferences.columns.push(d);
+  });
+  mySubmissionPreferences.value.preferences = preferences;
   showColumnsDialog.value = false;
 }
 
 defineExpose({
   BASE_FILTER_HEADERS,
   BASE_HEADERS,
-  filterData,
   filterIgnore,
   getCurrentStatus,
   getStatusDate,
diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
index 739ddbff7..2b6d9813c 100644
--- a/app/frontend/src/store/form.js
+++ b/app/frontend/src/store/form.js
@@ -1,3 +1,4 @@
+import { useLocalStorage } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { i18n } from '~/internationalization';
 import {
@@ -116,6 +117,7 @@ export const useFormStore = defineStore('form', {
     subscriptionData: genInitialSubscribeDetails(),
     totalSubmissions: 0,
     userFormPreferences: {},
+    mySubmissionPreferences: useLocalStorage('mySubmissionPreferences', {}),
     version: {},
     userLabels: [],
   }),
diff --git a/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js b/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js
index efb9afaa9..f8b854c5c 100644
--- a/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js
+++ b/app/frontend/tests/unit/components/forms/submission/MySubmissionsTable.spec.js
@@ -39,6 +39,12 @@ describe('MySubmissionsTable.vue', () => {
       ],
     };
     formStore.formFields = [];
+    formStore.mySubmissionPreferences = {
+      preferences: {
+        formId: formId,
+        columns: [],
+      },
+    };
   });
 
   it('renders', async () => {
@@ -171,7 +177,7 @@ describe('MySubmissionsTable.vue', () => {
     };
     formStore.formFields = ['formField1', 'formField2'];
 
-    wrapper.vm.filterData = [
+    formStore.mySubmissionPreferences.preferences.columns = [
       'createdBy',
       'username',
       'status',
@@ -732,12 +738,12 @@ describe('MySubmissionsTable.vue', () => {
 
     wrapper.vm.showColumnsDialog = true;
 
-    expect(wrapper.vm.filterData).toEqual([]);
+    expect(formStore.mySubmissionPreferences.preferences.columns).toEqual([]);
     expect(wrapper.vm.showColumnsDialog).toBeTruthy();
 
     wrapper.vm.updateFilter(['createdBy']);
 
-    expect(wrapper.vm.filterData).toEqual(['createdBy']);
+    expect(formStore.mySubmissionPreferences.preferences.columns).toEqual(['createdBy']);
     expect(wrapper.vm.showColumnsDialog).toBeFalsy();
   });
 });