udp-stencil-component-library 25.18.2-beta.7 → 25.18.2-beta.9

package/dist/collection/components/forms/udp-forms/udp-forms-renderer/udp-forms-renderer.js

@@ -2,31 +2,29 @@ import { h } from "@stencil/core";
 import { throttle } from "lodash";
 import { getCurrentTenantId } from "../../../../udp-utilities/tenant/tenantUtils";
 import { fetchLatestForms } from "../udp-forms-list/udp-form-api-utils";
-import { UdpFormsTypeEnum, UdpFormsPageIdEnum, UdpFormsSubmissionStatusEnum, UdpFormsFieldTypeEnum } from "../udp-forms-utils/enums";
+import { UdpFormsTypeEnum, UdpFormsPageIdEnum, UdpFormsSubmissionStatusEnum } from "../udp-forms-utils/enums";
 import { buildEmptyCurrentValues } from "../udp-forms-utils/utils";
 import { FormSubmissionHandlerFactory } from "../udp-forms-utils/form-submission-handler/FormSubmissionHandlerFactory";
 import { UdpFormHandler } from "../udp-forms-utils/form-handler/UdpFormHandler";
 import { UdpFormSubmission } from "../udp-forms-utils/classes/UdpFormSubmission";
 import { UdpForm } from "../udp-forms-utils/classes/UdpForm";
-import { v4 as uuidv4 } from "uuid";
-import { applyUrlSeedValuesForAll, initializeDynamicSections, initializeDynamicSectionsWithUrlContext, findRepeatGroupKeys } from "./udp-forms-renderer-utils";
+import { applyUrlSeedValuesForAll, initializeDynamicSections, initializeDynamicSectionsWithUrlContext, replaceUrlWithSubmissionId, enqueueSnackbarSuccess, enqueueSnackbarError } from "./udp-forms-renderer-utils/utils";
+import { computeDeleteRepeatableSection, computeDuplicateRepeatableSection } from "./udp-forms-renderer-utils/repeated-section-utils";
+import { applyQuestionCommentCrud } from "./udp-forms-renderer-utils/comments-crud-utils";
 export class UdpFormsRenderer {
     constructor() {
         this.isPublic = false;
         this.autoSaveDelay = 2000; // Debounce delay for auto-save in milliseconds (currently disabled)
         this.urlContext = {}; // additional context from URL if needed, eg. generic1, gernic2, generic3, or any initial prepopulated values for form inputs. eg section1.question1 = 'some value'
         this.currentValues = {}; // values of the current form state
-        this.formInputSeedValues = {}; // support for a initial set of values to seed the form with
         this.submitSuccessful = false;
         this.isLoading = false;
         this.isSaving = false;
         this.isSubmitted = false;
-        this.saveErrorMessage = null;
         this.dynamicSections = [];
         this.isUpdatingSections = false;
         this.reRenderKey = 0;
-        this.isFormDirty = false;
-        this.isUserUpdatedSections = false;
+        this.hasUnsavedChanges = false;
         this.sideSheetFollowUpFormsList = []; // used for follow up forms. 
         this.followUpSideSheetTotalItems = 0; // used for follow up forms. 
         this.isFollowUpFormsSideSheetOpen = false; // used for follow up forms.
@@ -46,9 +44,19 @@ export class UdpFormsRenderer {
         };
         this.followUpParentSectionKey = ''; // used for follow up forms.
         this.followUpParentQuestionKey = ''; // used for follow up forms.
+        // Feature flags for public mode. Keep capabilities in the handlers,
+        // but disable UX / automatic flows for now.
+        this.publicFeatures = {
+            allowDraftSave: false, // public cannot save and return later
+            allowComments: true, // public can add comments locally; persistence handled by backend rules
+            allowFollowUpForms: false, // public does not support follow-up forms
+        };
         this.handleLaunchFollowUpFormSideSheet = async (e) => {
             try {
-                await this.performBackgroundSaveAndUpdateLocalSubmissionState(this.udpFormSubmission.data.submissionResponseData);
+                // Public forms do not support follow-up forms.
+                if (this.isPublic) {
+                    return;
+                }
                 this.followUpParentSectionKey = e.detail.sectionKey;
                 this.followUpParentQuestionKey = e.detail.questionKey;
                 await this.loadFollowUpForms(this.followUpParentSectionKey, this.followUpParentQuestionKey);
@@ -67,75 +75,20 @@ export class UdpFormsRenderer {
             this.isUpdatingSections = true;
             this.isLoading = true;
             try {
-                const sectionToClone = this.dynamicSections[index];
-                if (!sectionToClone)
-                    return;
-                const cloningSectionName = sectionToClone.name;
-                // Find existing repeat group indices
-                const repeatKeys = findRepeatGroupKeys(cloningSectionName, this.currentValues);
-                const nextRepeatIndex = repeatKeys.length > 0 ? Math.max(...repeatKeys) + 1 : 2;
-                const clonedSection = Object.assign(Object.assign({}, structuredClone(sectionToClone)), { formQuestions: sectionToClone.formQuestions.map(q => {
-                        const newQuestionObj = structuredClone(q);
-                        newQuestionObj.questionIdentifierKey = `${cloningSectionName}_${nextRepeatIndex}.${q.name}`;
-                        return newQuestionObj;
-                    }), isOriginalSection: false, sectionPositionSuffix: nextRepeatIndex });
-                // Find the last index of this section group
-                let insertAtIndex = index;
-                for (let i = index + 1; i < this.dynamicSections.length; i++) {
-                    const s = this.dynamicSections[i];
-                    if (s.name === cloningSectionName) {
-                        insertAtIndex = i;
-                    }
-                    else {
-                        break;
-                    }
-                }
-                // Insert after the last repeat of the section group
-                this.dynamicSections = [
-                    ...this.dynamicSections.slice(0, insertAtIndex + 1),
-                    clonedSection,
-                    ...this.dynamicSections.slice(insertAtIndex + 1),
-                ];
-                // Create new initial values structure
-                const newCurrentValues = structuredClone(this.udpFormSubmission.data.submissionResponseData);
-                clonedSection.formQuestions.forEach(q => {
-                    var _a, _b, _c, _d;
-                    const newSectionNameWithSuffix = `${cloningSectionName}_${nextRepeatIndex}`;
-                    const newQuestionName = q.name;
-                    if (!newCurrentValues[newSectionNameWithSuffix]) {
-                        newCurrentValues[newSectionNameWithSuffix] = {};
-                    }
-                    // Preserve only Paragraph values from the source section; clear others
-                    let value = '';
-                    if (q.fieldTypeId === UdpFormsFieldTypeEnum.Paragraph) {
-                        // Determine source section key (the section being duplicated)
-                        const sourceSectionKey = sectionToClone.isOriginalSection
-                            ? cloningSectionName
-                            : `${cloningSectionName}_${sectionToClone.sectionPositionSuffix}`;
-                        const sourceVal = (_c = (_b = (_a = this.udpFormSubmission.data.submissionResponseData) === null || _a === void 0 ? void 0 : _a[sourceSectionKey]) === null || _b === void 0 ? void 0 : _b[newQuestionName]) === null || _c === void 0 ? void 0 : _c.value;
-                        let fieldProps = q === null || q === void 0 ? void 0 : q.fieldProperties;
-                        if (typeof fieldProps === 'string') {
-                            try {
-                                fieldProps = JSON.parse(fieldProps || '{}');
-                            }
-                            catch (_e) {
-                                fieldProps = {};
-                            }
-                        }
-                        const paragraphDefault = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.paragraphText) !== null && _d !== void 0 ? _d : '';
-                        value = sourceVal !== null && sourceVal !== void 0 ? sourceVal : paragraphDefault;
-                    }
-                    newCurrentValues[newSectionNameWithSuffix][newQuestionName] = { value, comments: [], metadata: {} };
+                const { nextDynamicSections, nextValues } = computeDuplicateRepeatableSection({
+                    dynamicSections: this.dynamicSections,
+                    values: structuredClone(this.udpFormSubmission.data.submissionResponseData || {}),
+                    index,
                 });
-                // This will trigger a complete form re-render
-                this.currentValues = Object.assign({}, newCurrentValues);
-                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, newCurrentValues);
+                this.dynamicSections = nextDynamicSections;
+                this.currentValues = Object.assign({}, nextValues);
+                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, nextValues);
                 this.triggerFormRerender();
             }
             finally {
                 this.isUpdatingSections = false;
                 this.isLoading = false;
-                this.isUserUpdatedSections = true;
+                this.hasUnsavedChanges = true;
             }
         };
         /**
@@ -150,137 +103,90 @@ export class UdpFormsRenderer {
             this.isUpdatingSections = true;
             this.isLoading = true;
             try {
-                const deleteSectionName = sectionToDelete.name;
-                const deleteSuffix = sectionToDelete.sectionPositionSuffix;
-                const sectionKeyToDelete = `${deleteSectionName}_${deleteSuffix}`;
-                const newCurrentValues = Object.assign({}, this.udpFormSubmission.data.submissionResponseData);
-                delete newCurrentValues[sectionKeyToDelete];
-                // Remove the section from dynamicSections
-                const updatedSections = structuredClone(this.dynamicSections);
-                updatedSections.splice(index, 1);
-                // Shift all later repeatable sections backward by 1
-                updatedSections.forEach(section => {
-                    if (section.name !== deleteSectionName ||
-                        section.isOriginalSection ||
-                        section.sectionPositionSuffix <= deleteSuffix) {
-                        return;
-                    }
-                    const oldSuffix = section.sectionPositionSuffix;
-                    const oldSectionKey = `${deleteSectionName}_${oldSuffix}`;
-                    const newSuffix = oldSuffix - 1;
-                    const newSectionKey = `${deleteSectionName}_${newSuffix}`;
-                    // Update suffix
-                    section.sectionPositionSuffix = newSuffix;
-                    // Update questionIdentifierKeys
-                    section.formQuestions = section.formQuestions.map(q => {
-                        const newSectionQuestion = structuredClone(q);
-                        newSectionQuestion.questionIdentifierKey = `${newSectionKey}.${q.name}`;
-                        return newSectionQuestion;
-                    });
-                    // Move data in initial values
-                    if (newCurrentValues[oldSectionKey]) {
-                        newCurrentValues[newSectionKey] = structuredClone(newCurrentValues[oldSectionKey]);
-                        delete newCurrentValues[oldSectionKey];
-                    }
+                const { nextDynamicSections, nextValues } = computeDeleteRepeatableSection({
+                    dynamicSections: this.dynamicSections,
+                    values: Object.assign({}, (this.udpFormSubmission.data.submissionResponseData || {})),
+                    index,
                 });
-                this.dynamicSections = updatedSections;
-                this.currentValues = Object.assign({}, newCurrentValues);
-                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, newCurrentValues);
+                this.dynamicSections = nextDynamicSections;
+                this.currentValues = Object.assign({}, nextValues);
+                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, nextValues);
                 this.triggerFormRerender();
             }
             finally {
                 this.isUpdatingSections = false;
                 this.isLoading = false;
-                this.isUserUpdatedSections = true;
+                this.hasUnsavedChanges = true;
             }
         };
         /**
          * Auto save (background save)
          */
         this.performBackgroundSaveAndUpdateLocalSubmissionState = async (values) => {
-            var _a;
-            this.saveErrorMessage = null;
+            return this.performBackgroundSaveAndUpdateLocalSubmissionStateInternal(values);
+        };
+        this.performBackgroundSaveAndUpdateLocalSubmissionStateInternal = async (values, opts) => {
+            var _a, _b;
+            const allowUrlReplace = (_a = opts === null || opts === void 0 ? void 0 : opts.allowUrlReplace) !== null && _a !== void 0 ? _a : !this.isPublic;
+            const forceCreateDraftIfMissingId = (_b = opts === null || opts === void 0 ? void 0 : opts.forceCreateDraftIfMissingId) !== null && _b !== void 0 ? _b : false;
+            // Public mode: disable draft save flows by default
+            if (this.isPublic && !this.publicFeatures.allowDraftSave && !forceCreateDraftIfMissingId) {
+                return;
+            }
             try {
-                const updatedUdpFormSubmission = await this.formSubmissionHandler.saveCurrentFormSubmissionState(values, this.udpFormSubmission);
-                this.udpFormSubmission = updatedUdpFormSubmission;
-                this.currentValues = Object.assign({}, (((_a = updatedUdpFormSubmission.data) === null || _a === void 0 ? void 0 : _a.submissionResponseData) || {}));
-                if (!new URLSearchParams(window.location.search).has('udpf_submissionId')) {
+                await this.formSubmissionHandler.saveCurrentFormSubmissionState(values, this.udpFormSubmission);
+                await this.refreshSubmissionAndSyncState();
+                if (allowUrlReplace && !new URLSearchParams(window.location.search).has('udpf_submissionId')) {
                     // replace the current entry's query string with udpf_submissionId without needing to know the path
-                    this.replaceUrlWithSubmissionId(updatedUdpFormSubmission.id);
+                    replaceUrlWithSubmissionId(this.udpFormSubmission.id, this.history);
                 }
             }
             catch (error) {
-                this.saveErrorMessage = 'Failed to save form data';
             }
             finally {
                 this.isSaving = false;
-                this.isUserUpdatedSections = false;
-                this.isFormDirty = false;
+                this.hasUnsavedChanges = false;
             }
         };
+        this.refreshSubmissionAndSyncState = async () => {
+            var _a, _b;
+            if (!((_a = this.udpFormSubmission) === null || _a === void 0 ? void 0 : _a.id))
+                return;
+            const updated = await this.formSubmissionHandler.fetchAndPopulateUdpFormSubmissionObj(this.udpFormSubmission);
+            this.udpFormSubmission = updated;
+            this.currentValues = Object.assign({}, (((_b = updated.data) === null || _b === void 0 ? void 0 : _b.submissionResponseData) || {}));
+            this.isSubmitted = updated.status === UdpFormsSubmissionStatusEnum.Submitted;
+        };
         /**
-         * Handle the user saving or deleting a comment
+         * Handle the user saving or deleting a comment (pre-submit, private forms only)
          */
-        this.handleCommmentUpdate = async (values) => {
-            var _a;
-            this.isSaving = true;
-            this.saveErrorMessage = null;
-            try {
-                const updatedUdpFormSubmission = await this.formSubmissionHandler.saveFormSubmissionComments(values, this.udpFormSubmission);
-                this.udpFormSubmission = updatedUdpFormSubmission;
-                this.currentValues = Object.assign({}, (((_a = updatedUdpFormSubmission.data) === null || _a === void 0 ? void 0 : _a.submissionResponseData) || {}));
-                this.enqueueSnackbar('Saved sucessfully.', {
-                    variant: 'success',
-                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
-                });
-            }
-            catch (error) {
-                this.enqueueSnackbar('There was an error saving.', {
-                    variant: 'error',
-                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
-                });
-            }
-            finally {
-                this.isSaving = false;
-                this.isUserUpdatedSections = false;
-                this.isFormDirty = false;
-            }
-        };
+        // NOTE: comment saves for non-submitted owner flows are now handled by the standard
+        // draft save path (manual/background save). Dedicated comment endpoints are used
+        // only for:
+        // 1) submitted submissions, OR
+        // 2) non-owner viewers adding/updating/deleting comments.
         /**
-         * Manual save function - debounced to 5 seconds
+         * Manual save function - debounced to 5 seconds (private forms only)
          */
         this.handleManualSave = async (values) => {
-            // Only save if handler supports it and user is authenticated
-            // if (!this.formSubmissionHandler.supportsAutoSave() || !this.userId || !this.formSubmissionHandler.saveCurrentFormSubmissionState) {
-            //   return;
-            // }
-            var _a;
+            if (this.isPublic && !this.publicFeatures.allowDraftSave)
+                return;
             this.isSaving = true;
-            this.saveErrorMessage = null;
             try {
-                const updatedUdpFormSubmission = await this.formSubmissionHandler.saveCurrentFormSubmissionState(values, this.udpFormSubmission);
-                this.udpFormSubmission = updatedUdpFormSubmission;
-                this.currentValues = Object.assign({}, (((_a = updatedUdpFormSubmission.data) === null || _a === void 0 ? void 0 : _a.submissionResponseData) || {}));
+                await this.formSubmissionHandler.saveCurrentFormSubmissionState(values, this.udpFormSubmission);
+                await this.refreshSubmissionAndSyncState();
                 if (!new URLSearchParams(window.location.search).has('udpf_submissionId')) {
                     // replace the current entry's query string with udpf_submissionId without needing to know the path
-                    this.replaceUrlWithSubmissionId(updatedUdpFormSubmission.id);
+                    replaceUrlWithSubmissionId(this.udpFormSubmission.id, this.history);
                 }
-                this.enqueueSnackbar('Form saved successfully.', {
-                    variant: 'success',
-                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
-                });
+                enqueueSnackbarSuccess('Form saved successfully.', this.enqueueSnackbar);
             }
             catch (error) {
-                this.enqueueSnackbar('There was an error saving this form', {
-                    variant: 'error',
-                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
-                });
-                this.saveErrorMessage = 'Failed to save form data';
+                enqueueSnackbarError('There was an error saving this form', this.enqueueSnackbar);
             }
             finally {
                 this.isSaving = false;
-                this.isUserUpdatedSections = false;
-                this.isFormDirty = false;
+                this.hasUnsavedChanges = false;
             }
         };
         this.handleFormChange = (values) => {
@@ -347,7 +253,9 @@ export class UdpFormsRenderer {
             // Listen for launchFollowUpFormSideSheet event from udp-question
             this.el.addEventListener('launchFollowUpFormSideSheet', (e) => this.handleLaunchFollowUpFormSideSheet(e));
             this.el.addEventListener('formDirtyChange', (e) => {
-                this.isFormDirty = e.detail;
+                // Preserve any previously-detected unsaved changes (e.g. repeatable section add/delete)
+                // so a later false emission doesn't hide the save icon.
+                this.hasUnsavedChanges = this.hasUnsavedChanges || e.detail;
             });
         }
     }
@@ -356,17 +264,24 @@ export class UdpFormsRenderer {
         this.isLoading = true;
         try {
             // Get client user info if available
-            const user = (_a = this.getUserCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-            if (user) {
-                this.clientUserInfo.id = user.id || null;
-                this.clientUserInfo.displayName = user.name || null;
-                this.clientUserInfo.email = user.email || null;
+            if (this.isPublic) {
+                this.clientUserInfo.id = '00000000-0000-0000-0000-000000000001';
+                this.clientUserInfo.displayName = 'Anonymous';
+            }
+            else {
+                const user = (_a = this.getUserCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                if (user) {
+                    this.clientUserInfo.id = user.id || null;
+                    this.clientUserInfo.displayName = user.name || null;
+                    this.clientUserInfo.email = user.email || null;
+                }
             }
             this.formSubmissionHandler = FormSubmissionHandlerFactory.create(this.isPublic, this.clientUserInfo.id);
             this.udpFormSubmission = new UdpFormSubmission({ id: this.submissionId, formId: this.formId, formVersion: this.version, unityUserId: this.clientUserInfo.id, generic1: this.urlContext.generic1, generic2: this.urlContext.generic2, generic3: this.urlContext.generic3 });
             // fetch existing submission from Udp.FormSubmission if submissionId is provided 
             // take exisitng object, and populate with db values, and return new obj with updated values
             if (this.submissionId) {
+                // Public users should not open private forms; we rely on backend auth to block.
                 this.udpFormSubmission = await this.formSubmissionHandler.fetchAndPopulateUdpFormSubmissionObj(this.udpFormSubmission);
             }
             // get the master form from Udp.Form
@@ -425,157 +340,117 @@ export class UdpFormsRenderer {
     async handleSubmit(values) {
         this.isLoading = true;
         try {
-            this.udpFormSubmission = await this.formSubmissionHandler.finalizeFormSubmissionState(values, this.udpFormSubmission);
+            await this.formSubmissionHandler.finalizeFormSubmissionState(values, this.udpFormSubmission);
+            await this.refreshSubmissionAndSyncState();
             this.submitSuccessful = true;
         }
         catch (error) {
-            this.enqueueSnackbar('There was an error submitting this form', {
-                variant: 'error',
-                anchorOrigin: { vertical: 'top', horizontal: 'center' },
-            });
+            enqueueSnackbarError('There was an error submitting this form', this.enqueueSnackbar);
             throw error;
         }
         finally {
             this.isLoading = false;
         }
     }
-    replaceUrlWithSubmissionId(submissionId) {
-        // build a URL that preserves the current pathname + hash but replaces the query string
-        const pathname = typeof window !== 'undefined' ? window.location.pathname : `/page/${UdpFormsPageIdEnum.FormRendererPageId}`;
-        const hash = typeof window !== 'undefined' ? window.location.hash : '';
-        const newUrl = `${pathname}?udpf_submissionId=${submissionId}${hash}`;
-        const h = this.history;
-        // Prefer history.replace when available, handle react-router v6 navigate function, fallback to push or native replaceState
-        if (h) {
-            if (typeof h.replace === 'function') {
-                h.replace(newUrl);
-                return;
-            }
-            if (typeof h.push === 'function') {
-                h.push(newUrl);
-                return;
-            }
-            // react-router v6 exposes a navigate function
-            if (typeof h === 'function') {
-                try {
-                    h(newUrl, { replace: true });
-                }
-                catch (_a) {
-                    h(newUrl);
-                }
-                return;
-            }
-        }
-        if (typeof window !== 'undefined' && window.history && typeof window.history.replaceState === 'function') {
-            window.history.replaceState({}, '', newUrl);
-        }
-        else if (typeof window !== 'undefined') {
-            window.location.href = newUrl;
-        }
-    }
     async handleQuestionCommentLiveCRUD(e) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
+        if (this.isPublic && !this.publicFeatures.allowComments)
+            return;
         try {
             const { type, questionIdentifierKey, commentId } = e.detail;
-            const [sectionName, questionName] = questionIdentifierKey.split('.');
-            let newCurrentValues = structuredClone(this.udpFormSubmission.data.submissionResponseData || {});
-            // ensure structure exists WITHOUT overwriting existing data
-            if (!newCurrentValues[sectionName])
-                newCurrentValues[sectionName] = {};
-            if (!newCurrentValues[sectionName][questionName]) {
-                // create defaults but do not clobber any existing saved shape from submissionResponseData
-                newCurrentValues[sectionName][questionName] = {
-                    value: '',
-                    comments: [],
-                    draftComments: [],
-                    metadata: {},
-                };
-            }
-            else {
-                // ensure arrays/objects exist so later code can safely push/filter
-                newCurrentValues[sectionName][questionName].comments = (_a = newCurrentValues[sectionName][questionName].comments) !== null && _a !== void 0 ? _a : [];
-                newCurrentValues[sectionName][questionName].draftComments = (_b = newCurrentValues[sectionName][questionName].draftComments) !== null && _b !== void 0 ? _b : [];
-                newCurrentValues[sectionName][questionName].metadata = (_c = newCurrentValues[sectionName][questionName].metadata) !== null && _c !== void 0 ? _c : {};
-            }
-            // normalize draftComments to array if needed (back-compat)
-            const maybeDraft = newCurrentValues[sectionName][questionName].draftComments;
-            if (maybeDraft && !Array.isArray(maybeDraft)) {
-                newCurrentValues[sectionName][questionName].draftComments = [maybeDraft];
-            }
-            else if (!maybeDraft) {
-                newCurrentValues[sectionName][questionName].draftComments = [];
+            const result = applyQuestionCommentCrud({
+                actionType: type,
+                questionIdentifierKey,
+                commentId,
+                currentSubmissionResponseData: this.udpFormSubmission.data.submissionResponseData || {},
+                clientUserInfo: this.clientUserInfo,
+            });
+            const newCurrentValues = result.nextSubmissionResponseData;
+            // keep submission state in sync
+            this.udpFormSubmission.data.submissionResponseData = Object.assign({}, newCurrentValues);
+            // Edit-ish actions are UI-only (open/close draft editor). They must update currentValues
+            // even though they don't persist.
+            if (type === 'edit' || type === 'editClose' || type === 'add') {
+                this.currentValues = Object.assign({}, newCurrentValues);
             }
-            const commentsArr = newCurrentValues[sectionName][questionName].comments || [];
-            const draftsArr = newCurrentValues[sectionName][questionName].draftComments || [];
-            switch (type) {
-                case 'add': {
-                    const newDraft = {
-                        value: '',
-                        commentId: uuidv4(),
-                        isTempComment: true,
-                        timestamp: null,
-                    };
-                    // put new draft first so activeDraft === draftComments[0] matches UX
-                    newCurrentValues[sectionName][questionName].draftComments = [newDraft, ...draftsArr];
-                    break;
-                }
-                case 'save': {
-                    // find draft by id
-                    const draftIdx = draftsArr.findIndex(d => d.commentId === commentId);
-                    if (draftIdx === -1)
-                        return;
-                    const draft = draftsArr[draftIdx];
-                    const saveTimestamp = draft.timestamp || new Date().toISOString();
-                    const savedComment = Object.assign(Object.assign({}, draft), { timestamp: saveTimestamp, editedTimestamp: new Date().toISOString(), userId: this.clientUserInfo.id, userDisplayName: this.clientUserInfo.displayName, isDraftComment: false });
-                    // If a saved comment with same id exists, replace it. Otherwise append.
-                    const existingIdx = commentsArr.findIndex(c => c.commentId === commentId);
-                    if (existingIdx !== -1) {
-                        const newComments = [...commentsArr];
-                        newComments[existingIdx] = Object.assign({}, savedComment);
-                        newCurrentValues[sectionName][questionName].comments = newComments;
+            // if it's a save or delete action, persist immediately
+            if (result.shouldPersist) {
+                const submissionIsSubmitted = ((_a = this.udpFormSubmission) === null || _a === void 0 ? void 0 : _a.status) === UdpFormsSubmissionStatusEnum.Submitted;
+                const submissionIsOwnedByCurrentUser = ((_b = this.udpFormSubmission) === null || _b === void 0 ? void 0 : _b.unityUserId) === this.clientUserInfo.id;
+                // Detect whether this save is updating an existing saved comment vs creating a new one.
+                // IMPORTANT: check against the *previous* persisted state (before applyQuestionCommentCrud),
+                // because once we apply 'save' locally the comment will exist locally even if it's new.
+                const existingSavedComment = (((_e = (_d = (_c = ((this.currentValues || {}))) === null || _c === void 0 ? void 0 : _c[result.sectionKey]) === null || _d === void 0 ? void 0 : _d[result.questionKey]) === null || _e === void 0 ? void 0 : _e.comments) || [])
+                    .find((c) => (c === null || c === void 0 ? void 0 : c.commentId) === result.commentId && !(c === null || c === void 0 ? void 0 : c.isDeleted));
+                // Use dedicated comment APIs in 2 scenarios:
+                // 1) Once submitted (public+private) to avoid overwriting submission data.
+                // 2) When viewed by a non-owner (read-only mode), since they can't save the whole submission.
+                if (submissionIsSubmitted || !submissionIsOwnedByCurrentUser) {
+                    if (!((_f = this.udpFormSubmission) === null || _f === void 0 ? void 0 : _f.id)) {
+                        // can't persist without an ID; keep local only
+                        this.currentValues = Object.assign({}, newCurrentValues);
                     }
-                    else {
-                        newCurrentValues[sectionName][questionName].comments = [...commentsArr, savedComment];
+                    else if (type === 'save') {
+                        const valueToPersist = result.valueToPersist;
+                        if (valueToPersist) {
+                            try {
+                                // If this comment already exists, update it; otherwise add it.
+                                if (existingSavedComment) {
+                                    await this.formSubmissionHandler.updateComment(this.udpFormSubmission, {
+                                        sectionKey: result.sectionKey,
+                                        questionKey: result.questionKey,
+                                        value: valueToPersist,
+                                        commentId: result.commentId,
+                                    });
+                                }
+                                else {
+                                    await this.formSubmissionHandler.addComment(this.udpFormSubmission, {
+                                        sectionKey: result.sectionKey,
+                                        questionKey: result.questionKey,
+                                        value: valueToPersist,
+                                        commentId: result.commentId,
+                                    });
+                                }
+                                await this.refreshSubmissionAndSyncState();
+                                enqueueSnackbarSuccess(existingSavedComment ? 'Comment updated.' : 'Comment added.', this.enqueueSnackbar);
+                            }
+                            catch (error) {
+                                enqueueSnackbarError(existingSavedComment ? 'Failed to update comment.' : 'Failed to add comment.', this.enqueueSnackbar);
+                                throw error;
+                            }
+                        }
                     }
-                    // remove that draft
-                    newCurrentValues[sectionName][questionName].draftComments = draftsArr.filter(d => d.commentId !== commentId);
-                    break;
-                }
-                case 'edit': {
-                    // create a draft copy of the saved comment but DO NOT remove the saved comment from the list.
-                    const saved = commentsArr.find(c => c.commentId === commentId);
-                    if (!saved)
-                        return;
-                    const draftFromSaved = Object.assign(Object.assign({}, saved), { isDraftComment: true, timestamp: null });
-                    // Add this draft at the front; keep saved comment intact so content doesn't disappear.
-                    newCurrentValues[sectionName][questionName].draftComments = [draftFromSaved, ...draftsArr];
-                    newCurrentValues[sectionName][questionName].comments = commentsArr;
-                    break;
-                }
-                case 'delete': {
-                    // mark the comment as deleted and clear its value, then persist.
-                    newCurrentValues[sectionName][questionName].comments = commentsArr.map(c => {
-                        if (c.commentId === commentId) {
-                            return Object.assign(Object.assign({}, c), { isDeleted: true, value: '', editedTimestamp: new Date().toISOString() });
+                    else if (type === 'delete') {
+                        try {
+                            await this.formSubmissionHandler.deleteComment(this.udpFormSubmission, {
+                                sectionKey: result.sectionKey,
+                                questionKey: result.questionKey,
+                                commentId: result.commentId,
+                            });
+                            await this.refreshSubmissionAndSyncState();
+                            enqueueSnackbarSuccess('Comment deleted.', this.enqueueSnackbar);
+                        }
+                        catch (error) {
+                            enqueueSnackbarError('Failed to delete comment.', this.enqueueSnackbar);
+                            throw error;
                         }
-                        return c;
-                    });
-                    break;
+                    }
                 }
-                case 'editClose': {
-                    // Cancel edit: remove the draft only, do NOT restore/alter saved comments.
-                    newCurrentValues[sectionName][questionName].draftComments = draftsArr.filter(d => d.commentId !== commentId);
-                    break;
+                else {
+                    // Not submitted yet:
+                    // - public: persist nothing beyond local state (submission is created on submit)
+                    // - private + owner: comment edits are persisted via standard submission save
+                    if (this.isPublic) {
+                        this.currentValues = Object.assign({}, newCurrentValues);
+                    }
+                    else {
+                        await this.handleManualSave(newCurrentValues);
+                    }
                 }
             }
-            // if it's a save or delete action, persist immediately
-            if (type === 'save' || type === 'delete') {
-                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, newCurrentValues);
-                await this.handleCommmentUpdate(newCurrentValues);
-            }
             else {
+                // Non-persisting actions update UI state only
                 this.currentValues = Object.assign({}, newCurrentValues);
-                this.udpFormSubmission.data.submissionResponseData = Object.assign({}, newCurrentValues);
             }
         }
         catch (error) {
@@ -588,7 +463,6 @@ export class UdpFormsRenderer {
     async loadFollowUpForms(sectionKey, questionKey) {
         var _a;
         this.isLoading = true;
-        this.saveErrorMessage = '';
         try {
             const response = await fetchLatestForms(this.followUpSideSheetListPageNumber, this.FOLLOW_UP_SIDE_SHEET_PAGE_SIZE, [{ searchField: 'type', searchOperator: '=', searchValue: UdpFormsTypeEnum.FollowUp }], { sortDirection: 'DESC', sortColumn: 'lastModifiedOn' });
             const data = response.data;
@@ -600,7 +474,6 @@ export class UdpFormsRenderer {
         }
         catch (err) {
             console.error('Failed to follow up form.', err);
-            this.saveErrorMessage = 'Failed to follow up forms.';
         }
         finally {
             this.isLoading = false;
@@ -618,11 +491,17 @@ export class UdpFormsRenderer {
         await this.loadFollowUpForms(this.followUpParentSectionKey, this.followUpParentQuestionKey);
     }
     renderFollowUpSideSheet() {
+        if (this.isPublic)
+            return null;
         return (h("udp-side-sheet", { title: "Link a Follow Up Form", open: this.isFollowUpFormsSideSheetOpen, onUdpSideSheetClose: () => this.handleSideSheetClose(), position: "right", width: "md" }, this.isLoading && this.isFollowUpFormsSideSheetOpen && h("udp-linear-loader", null), h("udp-list-renderer", { itemComponent: "udp-forms-follow-up-list-card", data: this.sideSheetFollowUpFormsList, pagination: true, isServerSide: true, isLoading: this.isLoading, itemsPerPage: this.FOLLOW_UP_SIDE_SHEET_PAGE_SIZE, currentPage: this.followUpSideSheetListPageNumber, totalItems: this.followUpSideSheetTotalItems, onPageChange: e => this.handleSideSheetPageChange(e.detail), componentDataMap: this.componentMap, spacing: 'md' })));
     }
     isShowManualSaveIcon() {
-        // return (this.isFormDirty || this.isUserUpdatedSections) && !this.isSubmitted && !!this.userId;
-        const showSaveIcon = (this.isFormDirty || this.isUserUpdatedSections) && !!this.clientUserInfo.id;
+        if (this.isPublic)
+            return false; // cannot save a form in public mode. can only submit. 
+        // NOTE: repeatable section add/delete sets hasUnsavedChanges=true, but udp-forms-ui likely
+        // also emits a formDirtyChange event that can override the value back to false.
+        // Keep the save icon sticky once we've detected any unsaved change.
+        const showSaveIcon = !!this.clientUserInfo.id && (this.hasUnsavedChanges);
         return showSaveIcon;
     }
     ;
@@ -630,7 +509,8 @@ export class UdpFormsRenderer {
         return this.isSubmitted || this.udpFormSubmission.unityUserId !== this.clientUserInfo.id;
     }
     render() {
-        return (h("div", { key: 'd073bfa6145e449c59dc722723ac82d09730d885', class: "forms-renderer-container", style: this.isLoading ? { minHeight: '100vh' } : {} }, this.renderFollowUpSideSheet(), h("udp-forms-ui", { udpForm: this.udpForm, currentValues: this.currentValues, udpFormSubmission: this.udpFormSubmission, submitSuccessful: this.submitSuccessful, isSaving: this.isSaving, saveErrorMessage: this.saveErrorMessage,
+        return (h("div", { key: '37ec47fc7f3ecec70ba7ca3e12717789285be5d8', class: "forms-renderer-container", style: this.isLoading ? { minHeight: '100vh' } : {} }, this.renderFollowUpSideSheet(), h("udp-forms-ui", { udpForm: this.udpForm, currentValues: this.currentValues, udpFormSubmission: this.udpFormSubmission, submitSuccessful: this.submitSuccessful, isSaving: this.isSaving,
+            // saveErrorMessage={this.saveErrorMessage}
             // showAutoSaveStatus={this.formSubmissionHandler.supportsAutoSave() && !!this.userId}
             readonly: this.isReadOnlyMode, handleSubmit: this.handleSubmit.bind(this), handleSave: values => Promise.resolve(this.debouncedManualSave(values)), handleChange: this.handleFormChange, handleAction: this.triggerAction, handleFinish: this.handleFinish, clientUserInfo: this.clientUserInfo, isSubmitted: this.isSubmitted, dynamicSections: this.dynamicSections, duplicateRepeatableSection: this.duplicateRepeatableSection, deleteRepeatableSection: this.deleteRepeatableSection, key: `form-rerender-key-${this.reRenderKey}`, isShowManualSaveIcon: this.isShowManualSaveIcon(), isLoading: this.isLoading, performBackgroundSaveAndUpdateLocalSubmissionState: this.performBackgroundSaveAndUpdateLocalSubmissionState })));
     }
@@ -906,17 +786,14 @@ export class UdpFormsRenderer {
     static get states() {
         return {
             "currentValues": {},
-            "formInputSeedValues": {},
             "submitSuccessful": {},
             "isLoading": {},
             "isSaving": {},
             "isSubmitted": {},
-            "saveErrorMessage": {},
             "dynamicSections": {},
             "isUpdatingSections": {},
             "reRenderKey": {},
-            "isFormDirty": {},
-            "isUserUpdatedSections": {},
+            "hasUnsavedChanges": {},
             "sideSheetFollowUpFormsList": {},
             "followUpSideSheetTotalItems": {},
             "isFollowUpFormsSideSheetOpen": {},