@zoho_apptics/apptics-js-sdk 1.0.2 → 2.0.0-beta.1

package/dist/cjs/feedback/ui.js

@@ -0,0 +1,709 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
+'use strict';
+
+var constants = require('../core/constants.js');
+var state = require('../core/state.js');
+var logger = require('../core/logger.js');
+var utils = require('../core/utils.js');
+var consent = require('../core/consent.js');
+var template = require('./template.js');
+var send = require('./send.js');
+var controls = require('./controls.js');
+var stylesheet = require('../core/stylesheet.js');
+var quartz$1 = require('./quartz.js');
+var styles = require('./styles.js');
+
+// Quartz is an optional page-level SDK. Without it every call is a no-op (fix #5).
+const QUARTZ_NOOP = {
+    startRecording() { },
+    previewVideo() { },
+    editVideo() { },
+    clearFeedback() { },
+    endRecording() { },
+    setVideoContent() { },
+    submitRecording() { return Promise.resolve({}); }
+};
+const QUARTZ_CONSTANTS_NOOP = { ErrorType: {}, FeedbackState: {} };
+function hasQuartz() {
+    return typeof Quartz !== 'undefined' && !!Quartz; // no i18n
+}
+function quartz() {
+    return typeof Quartz !== 'undefined' && Quartz ? Quartz : QUARTZ_NOOP; // no i18n
+}
+function quartzConstants() {
+    return typeof QuartzConstants !== 'undefined' && QuartzConstants ? QuartzConstants : QUARTZ_CONSTANTS_NOOP; // no i18n
+}
+/**
+ * Sends feedback and reflects the outcome in the modal (if open). Resolves with the outcome, or
+ * null when nothing was attempted (offline, or Apptics is disabled for this client).
+ */
+function submitFeedback(dataobj) {
+    return send.sendFeedbackData(dataobj).then(function (result) {
+        if (!result) {
+            return null;
+        }
+        feedback.handleStatusmsg(result.ok, result.message);
+        if (result.ok) {
+            setTimeout(() => {
+                feedback.close();
+            }, 2000);
+        }
+        return result;
+    });
+}
+/** Whether a value is an options object: a plain object, not a type number or a message string. */
+function isOptions(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value); // no i18n
+}
+/** Said once: the old one-argument-after-another form of feedbackFormOpen. */
+var saidOpenForm = false;
+function sendFeedback(options) {
+    if (options !== undefined && !isOptions(options)) {
+        // the old form, sendFeedback(type, message, ...): sending it as it stands would send an
+        // empty report, so it is refused, and says what to pass instead
+        return Promise.reject(new Error('AppticsFeedback.sendFeedback: takes one options object, as sendFeedback({ type, message, attachments, logFiles, includeDiagnostics, includeLog, isAnonymous })')); // no i18n
+    }
+    const o = options || {};
+    const dataobj = {
+        type: !utils.isEmpty(o.type) ? o.type : 1,
+        message: o.message || '', // no i18n
+        attachment: o.attachments || null,
+        logsFiles: o.logFiles || null,
+        // both flags stay as given: unset lets send.ts decide from what is actually stored
+        includeDyninfo: o.includeDiagnostics,
+        includeLog: o.includeLog,
+        quartzid: '' // no i18n
+    };
+    // from the active user, or from nobody with isAnonymous; the form's own choice is put back after
+    var restoreUser = controls.chooseUserForSend(o.isAnonymous === true);
+    // an app awaiting this must be able to tell its user the feedback did not go: resolving on a
+    // failure would have it say "thanks, sent" for a report the server never received
+    return submitFeedback(dataobj).then(function (result) {
+        restoreUser();
+        return result;
+    }, function (err) {
+        restoreUser();
+        throw err;
+    }).then(function (result) {
+        if (!result) {
+            throw new Error('AppticsFeedback.sendFeedback: not sent, the browser is offline or Apptics is disabled for this client'); // no i18n
+        }
+        if (!result.ok) {
+            throw new Error('AppticsFeedback.sendFeedback: not sent, ' + result.message); // no i18n
+        }
+    });
+}
+/**
+ * The request both submit buttons send. A recording only adds its quartzid; everything else — the
+ * chosen type, the attachments, the log and diagnostics toggles — is read the same way, so one
+ * builder keeps the recording path from quietly falling behind the plain one.
+ */
+function buildFeedbackRequest(modal, message, quartzid) {
+    var seltype = modal.querySelector('.zasdk-selected').getAttribute('data-type'); // no i18n
+    var fileInput = modal.querySelector("#zasdkFileInput"); // no i18n
+    var files = fileInput.files;
+    return {
+        type: !utils.isEmpty(seltype) ? feedback.typeObj[seltype] : 1,
+        message: message,
+        attachment: (files && files.length > 0) ? files : (feedback._opts.attachments || null),
+        logsFiles: feedback._opts.logFiles || null,
+        includeLog: controls.logChoice.includeLog,
+        includeDyninfo: controls.logChoice.includeDyninfo,
+        quartzid: quartzid
+    };
+}
+/**
+ * Opens the form, optionally pre-filled. `isAnonymous` starts the user picker on Anonymous even
+ * when a user is registered; the include flags start their toggles on.
+ */
+/**
+ * A DataTransfer to hold the chosen attachments, or null where one cannot be made.
+ *
+ * It is the only way to build a FileList, which is what an <input type="file"> will accept back,
+ * so the attachment list is kept in one. The constructor is newer than the rest of the modal -
+ * Safari only gained it in 14.1 - and a plain `new DataTransfer()` throws on anything older,
+ * which took the whole form down with it on open. Feedback without attachments is worth far more
+ * than no feedback at all, so the form opens either way and the file input is left alone.
+ */
+function newTransfer() {
+    try {
+        return typeof DataTransfer === 'function' ? new DataTransfer() : null; // no i18n
+    }
+    catch (err) {
+        logger.Console.warn('apptics.feedback: this browser cannot build a file list, attachments are off'); // no i18n
+        return null;
+    }
+}
+function feedbackFormOpen(options) {
+    if (options !== undefined && !isOptions(options) && !saidOpenForm) {
+        // the old form, feedbackFormOpen(type, message, ...): the form still opens, with its defaults
+        saidOpenForm = true;
+        logger.warnAlways('AppticsFeedback.feedbackFormOpen: takes one options object, as feedbackFormOpen({ type, message, includeLog, includeDiagnostics, attachments, logFiles, isAnonymous }); opening it with its defaults'); // no i18n
+    }
+    const o = isOptions(options) ? options : {};
+    const opts = {
+        includeLog: o.includeLog === true,
+        includeDyninfo: o.includeDiagnostics === true,
+        isAnonymous: o.isAnonymous === true,
+    };
+    if (typeof o.type === 'number')
+        opts.type = o.type; // no i18n
+    if (typeof o.message === 'string' && o.message.length > 0)
+        opts.message = o.message; // no i18n
+    if (o.attachments && o.attachments.length > 0)
+        opts.attachments = o.attachments;
+    if (o.logFiles && o.logFiles.length > 0)
+        opts.logFiles = o.logFiles;
+    // the form brings its own styles, so an app imports or links no css
+    stylesheet.injectStylesheet(styles.default);
+    feedback.init(opts);
+}
+/** The themes the form has: 'auto' follows the visitor's system setting. */
+const FEEDBACK_THEMES = ['light', 'dark', 'auto']; // no i18n
+/**
+ * Sets the form's theme, for a page with its own light and dark modes: 'auto' follows the
+ * operating system, which is not what such a page shows. Restyles a form or recording timer that
+ * is open now, and every one opened after; Apptics.init()'s feedback_theme only sets the first.
+ */
+function setFeedbackTheme(theme) {
+    if (FEEDBACK_THEMES.indexOf(theme) === -1) {
+        logger.Console.warn('AppticsFeedback.setFeedbackTheme: takes \'light\', \'dark\' or \'auto\', not ' + JSON.stringify(theme)); // no i18n
+        return;
+    }
+    state._ZAP._config.feedback_theme = theme;
+    if (typeof document === 'undefined') { // no i18n
+        return;
+    }
+    ['zasdkFeedbackModal', 'zasdkrectimer'].forEach(function (id) {
+        var open = document.getElementById(id);
+        if (open) {
+            open.setAttribute('data-zasdk-theme', theme); // no i18n
+        }
+    });
+}
+function feedbackFormClose() {
+    feedback.close();
+}
+const feedback = {
+    feedbackUIHtml: template.feedbackUIHtml,
+    timerHtml: template.timerHtml,
+    uploadFileAry: [],
+    fileInput: null,
+    selectedFiles: null,
+    isScaled: false,
+    isHidden: false,
+    timerDisplay: null,
+    recordButton: null,
+    TOTAL_TIME: 5 * 60,
+    remainingTime: 5 * 60,
+    isRecording: false,
+    timerInterval: null,
+    uploadTotalSize: 0,
+    MaxFileSize: 10 * 1024 * 1024,
+    _opts: {},
+    typeObj: { 'bug': 0, 'feedback': 1, 'help': 2, 'report': 3 }, // no i18n
+    init: function (opts) {
+        feedback._opts = opts || {};
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (!utils.isEmpty(modal)) {
+            return;
+        }
+        const tempContainer = document.createElement('div'); // no i18n
+        feedback.uploadFileAry = [];
+        tempContainer.id = 'zasdkFeedbackModal'; // no i18n
+        tempContainer.className = 'zasdk-modal'; // no i18n
+        tempContainer.setAttribute('data-zasdk-theme', state._ZAP._config.feedback_theme); // no i18n
+        tempContainer.innerHTML = feedback.feedbackUIHtml;
+        document.body.appendChild(tempContainer);
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        // screen recording as the console set it up for this app (getsdkconfig's quartz block)
+        var qz = state._ZAP._quartz;
+        var qz_ws_key = qz.workspace;
+        var qz_dp_key = qz.department;
+        var qz_dc_key = quartz$1.recordingDomain(qz.domain);
+        var closeBtn = modal.querySelector("#appticsfeedbackclose"); // no i18n
+        var feedbackTypes = modal.querySelectorAll(".zasdk-feedback-type"); // no i18n
+        feedback.fileInput = modal.querySelector("#zasdkFileInput"); // no i18n
+        var quartzrecbtn = modal.querySelector("#zasdkqz_rec_button"); // no i18n
+        var submitbtn = modal.querySelector("#zasdk_submit_btn"); // no i18n
+        var submitbtncnt = modal.querySelector("#zasdk_submit_btnsubcnt"); // no i18n
+        const checkbox = modal.querySelector('#zasdkqz-consent'); // no i18n
+        const content = modal.querySelector('#zasdkqz-content'); // no i18n
+        const preivewButton = modal.querySelector('#preivewPlayButton'); // no i18n
+        const videoEditButton = modal.querySelector('#videoEditButton'); // no i18n
+        const deleteVideoButton = modal.querySelector('#videoDelButton'); // no i18n
+        const feedbackbox = modal.querySelector('#zasdkFeedbackconatiner'); // no i18n
+        const descriptionField = modal.querySelector('#zasdkDescription'); // no i18n
+        controls.wireDrag(feedbackbox);
+        controls.wireUserPicker(modal, feedback._opts.isAnonymous === true);
+        controls.wireLogControls(modal, feedback._opts);
+        feedback.isScaled = false;
+        feedback.isHidden = false;
+        document.removeEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
+        document.addEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
+        document.removeEventListener('quartz-feedback-error', feedback.handleErrorQuartzEvent); // no i18n
+        document.addEventListener('quartz-feedback-error', feedback.handleErrorQuartzEvent); // no i18n
+        // the consent checkbox and its label only when a recording can actually be made: recording
+        // on for the app, its workspace, department and domain, and Quartz on the page. A checkbox
+        // that leads only to "unavailable" is not offered. Quartz is loaded here, the first time
+        // the form needs it, and the checkbox shows once it has arrived
+        var recordingConfigured = qz.enabled && !utils.isEmpty(qz_dc_key) && !utils.isEmpty(qz_ws_key) && !utils.isEmpty(qz_dp_key);
+        var recordingBlock = modal.querySelector("#zasdkreccheckcnt"); // no i18n
+        recordingBlock.style.display = recordingConfigured && hasQuartz() ? "block" : "none"; // no i18n
+        if (recordingConfigured && !hasQuartz()) {
+            // quartz_cdn_url, or Zoho's CDN for this serviceUrl when the answer carries none
+            quartz$1.loadQuartz(quartz$1.quartzScriptSource(qz.cdnUrl, String(state._ZAP._defaultoptions.serviceUrl || ''))).then(function (loaded) {
+                if (loaded && recordingBlock.isConnected) {
+                    recordingBlock.style.display = "block"; // no i18n
+                }
+            });
+        }
+        feedbackbox.addEventListener('transitionend', function (event) {
+            if (event.propertyName === 'transform' && feedback.isScaled) { // no i18n
+                feedback.toggleWindowAnimation();
+            }
+        });
+        quartzrecbtn.onclick = function (e) {
+            e.stopImmediatePropagation();
+            let recordingDetails = {
+                workspaceLinkName: qz_ws_key,
+                departmentLinkName: qz_dp_key,
+                recordingDomain: qz_dc_key
+            };
+            feedback.handleStatusmsg();
+            // 1.x pressed on regardless and the button did nothing anyone could explain; the rest
+            // of the form still works, so say what is missing and leave it usable
+            if (!hasQuartz()) {
+                feedback.handleStatusmsg(false, 'Screen recording is unavailable on this page.'); // no i18n
+                return;
+            }
+            if (utils.isEmpty(qz_ws_key) || utils.isEmpty(qz_dp_key) || utils.isEmpty(qz_dc_key)) {
+                feedback.handleStatusmsg(false, 'Screen recording is not configured for this app.'); // no i18n
+                return;
+            }
+            quartz().startRecording(recordingDetails);
+        };
+        closeBtn.onclick = function () {
+            feedback.close();
+        };
+        // keyboard: Enter or Space on the close control, and Escape anywhere, close the form
+        closeBtn.onkeydown = function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { // no i18n
+                e.preventDefault();
+                feedback.close();
+            }
+        };
+        document.addEventListener('keydown', feedback.onEscape); // no i18n
+        preivewButton.addEventListener('click', function () {
+            quartz().previewVideo();
+        });
+        videoEditButton.addEventListener('click', function () {
+            quartz().editVideo({ quartzBranding: false });
+        });
+        deleteVideoButton.addEventListener('click', function () {
+            var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+            quartz().clearFeedback();
+            checkbox.checked = false;
+            content.classList.remove('zasdkqz-show'); // no i18n
+            modal.querySelector("#editRecordedVideo").style.display = "none"; // no i18n
+            modal.querySelector("#zasdkreccheckcnt").style.display = "block"; // no i18n
+            feedback.validateFeedbackField();
+        });
+        submitbtn.addEventListener('click', async () => {
+            // Disable button and show loader
+            feedback.validateFeedbackField();
+            submitbtn.disabled = true;
+            submitbtncnt.classList.add('zasdkbtndisabled'); // no i18n
+            submitbtn.value = '';
+            try {
+                let videoElement = modal.querySelector('#previewVideoElemId'), // no i18n
+                videoVisible = videoElement && videoElement.offsetParent !== null;
+                if (videoVisible) {
+                    feedback.submitRecording();
+                }
+                else {
+                    let message = modal.querySelector('#zasdkDescription').value.trim(); // no i18n
+                    if (message.length > 0) {
+                        submitFeedback(buildFeedbackRequest(modal, message, '')); // no i18n
+                    }
+                    else {
+                        feedback.handleStatusmsg(false, 'Please provide more details for us to help you better.'); // no i18n
+                    }
+                }
+            }
+            catch (error) {
+                logger.Console.error("sendFeedbackData : " + error); // no i18n
+            }
+        });
+        checkbox.addEventListener('change', function () {
+            if (this.checked) {
+                content.classList.add('zasdkqz-show'); // no i18n
+            }
+            else {
+                content.classList.remove('zasdkqz-show'); // no i18n
+            }
+        });
+        descriptionField.addEventListener('input', feedback.validateFeedbackField); // no i18n
+        // keyboard and screen-reader users land in the form, not behind it
+        try {
+            descriptionField.focus({ preventScroll: true });
+        }
+        catch (err) { /* focus is a courtesy */ }
+        feedbackTypes.forEach(function (type) {
+            type.addEventListener("click", function () {
+                feedbackTypes.forEach(function (t) {
+                    t.classList.remove("zasdk-selected"); // no i18n
+                });
+                this.classList.add("zasdk-selected"); // no i18n
+            });
+        });
+        // what feedbackFormOpen() was given: select that type, fill the description
+        if (typeof feedback._opts.type === 'number') { // no i18n
+            var wanted = Object.keys(feedback.typeObj).filter(function (name) {
+                return feedback.typeObj[name] === feedback._opts.type;
+            })[0];
+            var wantedTab = wanted ? modal.querySelector('.zasdk-feedback-type[data-type="' + wanted + '"]') : null; // no i18n
+            if (wantedTab) {
+                feedbackTypes.forEach(function (t) { t.classList.remove("zasdk-selected"); }); // no i18n
+                wantedTab.classList.add("zasdk-selected"); // no i18n
+            }
+        }
+        if (!utils.isEmpty(feedback._opts.message)) {
+            descriptionField.value = String(feedback._opts.message);
+            feedback.updateLeftCount();
+            feedback.validateFeedbackField();
+        }
+        feedback.selectedFiles = newTransfer();
+        feedback.fileInput.onchange = function () {
+            const self = this;
+            var chosen = feedback.selectedFiles;
+            if (chosen === null) {
+                return; // no file list on this browser; see newTransfer()
+            }
+            if (chosen.files.length + self.files.length > 5) {
+                feedback.handleStatusmsg(false, 'Maximum 5 attachments is allowed'); // no i18n
+                feedback.fileInput.files = chosen.files;
+                self.files = chosen.files;
+                return;
+            }
+            if (self.files.length > 0) {
+                let filesize = 0;
+                for (let file of self.files) {
+                    filesize = filesize + file.size;
+                    if (filesize > 10485760) {
+                        feedback.handleStatusmsg(false, 'Maximum limit reached. The total file size cannot exceed 10MB.'); // no i18n
+                        self.files = chosen.files;
+                        return;
+                    }
+                    else {
+                        chosen.items.add(file); // Add new files
+                    }
+                }
+                self.files = chosen.files; // Update input with all files
+                feedback.fileAttachment(); // Update UI
+            }
+            else if (chosen.files.length > 0) {
+                // Restore previous files if the user cancels
+                self.files = chosen.files;
+            }
+        };
+        feedback.handleStatusmsg();
+        feedback.updateLeftCount();
+    },
+    updateLeftCount: function () {
+        document.querySelectorAll("[reqname]").forEach(function (elem) {
+            let val = elem.value;
+            let maxLength = parseInt(elem.getAttribute("maxlength") || '', 10); // no i18n
+            let counterElem = elem.parentElement ? elem.parentElement.querySelector(".zaleftcharcnt") : null; // no i18n
+            if (counterElem) {
+                counterElem.textContent = String(maxLength - val.length); // Update remaining count
+                var unit = counterElem.parentElement ? counterElem.parentElement.querySelector(".zaleftchartxt") : null; // no i18n
+                if (unit) {
+                    unit.textContent = maxLength - val.length === 1 ? 'character left' : 'characters left'; // no i18n
+                }
+            }
+        });
+    },
+    handleStatusmsg: function (isSuccess, stsmsg) {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (utils.isEmpty(modal)) {
+            return;
+        }
+        var stscnt = modal.querySelector("#zasdksubmitstatus"); // no i18n
+        var submitbtn = modal.querySelector("#zasdk_submit_btn"); // no i18n
+        var submitbtncnt = modal.querySelector("#zasdk_submit_btnsubcnt"); // no i18n
+        var successmsgclass = ''; // no i18n
+        var successmsg = ''; // no i18n
+        stscnt.style.display = "none"; // no i18n
+        if (!utils.isEmpty(isSuccess)) {
+            successmsgclass = isSuccess ? 'zasdkstssucs' : 'zasdkstserror'; // no i18n
+            successmsg = !utils.isEmpty(stsmsg) ? stsmsg : ''; // no i18n
+            stscnt.textContent = successmsg;
+            stscnt.classList.add(successmsgclass);
+            stscnt.style.display = "block"; // no i18n
+            submitbtncnt.classList.remove('zasdkbtndisabled'); // no i18n
+            submitbtn.disabled = false;
+            submitbtn.value = 'Send'; // no i18n
+        }
+    },
+    handleErrorQuartzEvent: function (event) {
+        let errorType = event.detail.error.name;
+        let errorMessage = event.detail.error.message;
+        if (errorType == quartzConstants().ErrorType.RECORDING_INTERRUPTED || errorType == quartzConstants().ErrorType.FEEDBACK_TIMEOUT) {
+            feedback.stopRecording();
+        }
+        feedback.handleStatusmsg(false, errorMessage);
+    },
+    bindQuartzEvent: function (event) {
+        let feedbackState = event.detail.feedbackState;
+        if (feedbackState == quartzConstants().FeedbackState.RECORDING_IN_PROGRESS) {
+            var feedbacktimer = document.getElementById("zasdkrectimer"); // no i18n
+            if (!utils.isEmpty(feedbacktimer)) {
+                feedbacktimer.remove();
+            }
+            const tempDiv = document.createElement("div"); // no i18n
+            tempDiv.innerHTML = feedback.timerHtml;
+            const node = tempDiv.firstElementChild;
+            node.setAttribute('data-zasdk-theme', state._ZAP._config.feedback_theme); // no i18n
+            document.body.appendChild(node);
+            var feedbacktimer = document.getElementById("zasdkrectimer"); // no i18n
+            feedback.timerDisplay = feedbacktimer.querySelector('#zasdkTimerDisplay'); // no i18n
+            feedback.recordButton = feedbacktimer;
+            feedback.TOTAL_TIME = 5 * 60; // 5 minutes in seconds
+            feedback.remainingTime = feedback.TOTAL_TIME;
+            feedback.isRecording = true;
+            feedback.recordButton.addEventListener('click', feedback.toggleRecording); // no i18n
+            feedback.startRecording();
+            feedback.toggleWindowAnimation();
+        }
+    },
+    onEscape: function (e) {
+        if (e.key === 'Escape') { // no i18n
+            feedback.close();
+        }
+    },
+    close: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        document.removeEventListener('keydown', feedback.onEscape); // no i18n
+        document.removeEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
+        quartz().clearFeedback();
+        if (!utils.isEmpty(modal)) {
+            modal.remove();
+        }
+    },
+    toggleWindowAnimation: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        const box = modal.querySelector('#zasdkFeedbackconatiner'); // no i18n
+        if (feedback.isHidden) {
+            modal.style.display = 'block'; // no i18n
+            setTimeout(() => {
+                box.style.transform = 'scale(1)'; // no i18n
+                feedback.validateFeedbackField();
+            }, 10);
+            feedback.isHidden = false;
+            feedback.isScaled = false;
+        }
+        else if (feedback.isScaled) {
+            modal.style.display = 'none'; // no i18n
+            feedback.isHidden = true;
+        }
+        else {
+            box.style.transform = 'scale(0)'; // no i18n
+            feedback.isScaled = true;
+        }
+    },
+    fileAttachment: function () {
+        var uploadedFiles = feedback.fileInput.files;
+        feedback.uploadTotalSize = 0;
+        feedback.MaxFileSize = 10 * 1024 * 1024; //10 MB
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        var sizeInfo = modal.querySelector("#zasdkfilesizeinfo"); // no i18n
+        var fileUl = modal.querySelector("#zasakfileList"); // no i18n
+        sizeInfo.textContent = ""; // no i18n
+        if ((uploadedFiles.length) > 5) {
+            feedback.fileLimitExceeded(false, true);
+            feedback.validateFeedbackField();
+            return;
+        }
+        fileUl.innerHTML = ''; // no i18n
+        if (uploadedFiles.length > 0) {
+            var totalSize = 0;
+            for (var i = 0; i < uploadedFiles.length; i++) {
+                var fileName = uploadedFiles[i].name;
+                var fName = fileName.substring(0, fileName.lastIndexOf('.')); // no i18n
+                var extension = fileName.substring(fileName.lastIndexOf('.') + 1); // no i18n
+                var bytes = uploadedFiles[i].size;
+                totalSize += bytes;
+                var fileLi = feedback.elementCreator("li"); // no i18n
+                fileLi.title = fileName;
+                var span1 = feedback.elementCreator("span"); // no i18n
+                span1.className = "zaskFdBckFlName"; // no i18n
+                span1.innerText = (fName.length > 10) ? fName.slice(0, 3) + "..." + fName.slice(-3) : fName; // no i18n
+                var span2 = feedback.elementCreator("span"); // no i18n
+                span2.innerText = "." + extension; // no i18n
+                var span3 = feedback.elementCreator("span"); // no i18n
+                span3.className = "zasdkFdBckFlCls"; // no i18n
+                span3.setAttribute("data-name", fileName); // no i18n
+                span3.innerHTML = "&times;"; // no i18N
+                fileLi.appendChild(span1);
+                fileLi.appendChild(span2);
+                fileLi.appendChild(span3);
+                fileUl.appendChild(fileLi);
+            }
+            var limitReached = totalSize > feedback.MaxFileSize;
+            feedback.fileLimitExceeded(limitReached);
+            sizeInfo.textContent = `${feedback.formatFileSize(totalSize)} Used / 10 MB`; // no i18n
+            const clearFile = modal.querySelectorAll('.zasdkFdBckFlCls'); // no i18n
+            Array.from(clearFile).forEach(function (element) {
+                element.addEventListener('click', function () {
+                    feedback.handleStatusmsg();
+                    feedback.removeFileFromList(this);
+                    feedback.fileAttachment();
+                });
+            });
+        }
+        feedback.validateFeedbackField();
+    },
+    elementCreator: function (elType) {
+        return document.createElement(elType);
+    },
+    fileLimitExceeded: function (limitReached, filesLengthReached) {
+        var infoMsg = "";
+        if (filesLengthReached || limitReached) {
+            infoMsg = filesLengthReached ? 'Maximum 5 attachments is allowed' : 'Maximum limit reached. The total file size cannot exceed 10MB.'; // no i18n
+        }
+        feedback.handleStatusmsg(false, infoMsg);
+    },
+    removeFileFromList: function (elem) {
+        elem.getAttribute('data-name'); // no i18n
+        const listItem = elem.parentElement; // the <li> holding this file
+        // Find the index of the element in the file preview list
+        const indexToRemove = Array.from(listItem.parentElement.children).indexOf(listItem);
+        listItem.remove(); // Remove the file preview
+        let newFiles = newTransfer();
+        feedback.selectedFiles = newTransfer();
+        if (newFiles === null || feedback.selectedFiles === null) {
+            return; // no file list to rebuild; the preview row is already gone
+        }
+        for (let i = 0; i < feedback.fileInput.files.length; i++) {
+            if (i !== indexToRemove) {
+                newFiles.items.add(feedback.fileInput.files[i]);
+                feedback.selectedFiles.items.add(feedback.fileInput.files[i]);
+            }
+        }
+        feedback.fileInput.files = newFiles.files;
+    },
+    formatFileSize: function (bytes) {
+        if (bytes === 0)
+            return '0 KB'; // no i18n
+        const k = 1024;
+        const sizeInKB = bytes / k;
+        const sizeInMB = bytes / (k * k);
+        const sizeInGB = bytes / (k * k * k);
+        if (sizeInGB >= 1) {
+            return sizeInGB.toFixed(2) + ' GB'; // no i18n
+        }
+        else if (sizeInMB >= 1) {
+            return sizeInMB.toFixed(2) + ' MB'; // no i18n
+        }
+        else {
+            return sizeInKB.toFixed(2) + ' KB'; // no i18n
+        }
+    },
+    toggleRecording: function () {
+        feedback.isRecording = !feedback.isRecording;
+        if (feedback.isRecording) {
+            feedback.startRecording();
+        }
+        else {
+            feedback.stopRecording();
+        }
+    },
+    startRecording: function () {
+        if (!feedback.timerInterval) {
+            feedback.timerInterval = setInterval(feedback.updateTimer, 1000);
+        }
+    },
+    stopRecording: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        clearInterval(feedback.timerInterval || undefined);
+        feedback.timerInterval = null;
+        document.querySelector("#zasdkrectimer").remove(); // no i18n
+        feedback.toggleWindowAnimation();
+        modal.querySelector("#editRecordedVideo").style.display = "block"; // no i18n
+        modal.querySelector("#zasdkreccheckcnt").style.display = "none"; // no i18n
+        let videoElem = modal.querySelector('#previewVideoElemId'); // no i18n
+        quartz().endRecording();
+        quartz().setVideoContent(videoElem);
+    },
+    submitRecording: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        // the recording is filed for whoever the form's picker selected, falling back to the
+        // registered user; an anonymous report, a non-email id or a PII opt-out all send the
+        // placeholder instead, so Quartz never receives an address the user did not offer
+        let testEmail = 'user@example.com', // no i18n
+        testMessage = '-', picked = controls.userChoice.anonymous ? '' : String(controls.userChoice.userid || ''), // no i18n
+        active = !utils.isEmpty(state._ZAP._user_info.userid) ? String(state._ZAP._user_info.userid) : '', // no i18n
+        userEmail = !utils.isEmpty(picked) ? picked : active, subject = modal.querySelector('#zasdkDescription').value.trim() || testMessage, // no i18n
+        emailRegex = /^[\w]([\w\-\.\+\'=]*)@([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,22}$/;
+        userEmail = (emailRegex.test(userEmail) && consent.opt_in_status() == constants.AP_TRACKING_STATUS.USAGE_TRACKING_WITH_PII) ? userEmail : testEmail;
+        // Submit the recording
+        quartz().submitRecording({
+            email: userEmail,
+            subject: subject,
+        })
+            .then((response) => {
+            var zqrecid = !utils.isEmptyObj(response) && response && response.hasOwnProperty('feedbackLink') ? (response.feedbackLink || '') : ''; // no i18n
+            submitFeedback(buildFeedbackRequest(modal, subject, zqrecid));
+        })
+            .catch((error) => {
+            // the upload is Quartz's to do; if it fails, hand the form back rather than leaving
+            // the submit button spinning with nothing said
+            logger.Console.error("submitRecording : " + error); // no i18n
+            feedback.handleStatusmsg(false, 'Could not upload the recording. Please try again.'); // no i18n
+        });
+    },
+    updateTimer: function () {
+        if (feedback.remainingTime > 0) {
+            feedback.remainingTime--;
+            feedback.updateDisplay();
+        }
+        else {
+            feedback.stopRecording();
+        }
+    },
+    updateDisplay: function () {
+        const minutes = Math.floor(feedback.remainingTime / 60);
+        const seconds = feedback.remainingTime % 60;
+        feedback.timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; // no i18n
+    },
+    validateFeedbackField: function () {
+        feedback.updateLeftCount();
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        const descriptionField = modal.querySelector('#zasdkDescription'); // no i18n
+        const attachmentField = modal.querySelector('#zasdkFileInput'); // no i18n
+        const videoElement = modal.querySelector('#previewVideoElemId'); // no i18n
+        const sendButton = modal.querySelector('#zasdk_submit_btn'); // no i18n
+        const descriptionFilled = descriptionField && descriptionField.value.trim() !== '' && descriptionField.value.trim().length > 0; // no i18n
+        attachmentField && attachmentField.files && attachmentField.files.length > 0;
+        videoElement && videoElement.offsetParent !== null; // Check if visible
+        const errorElements = modal.querySelectorAll('.zasdkmaxerror'); // no i18n
+        const hasErrors = feedback.getVisibleErrorCount(errorElements) > 0;
+        if (!hasErrors && descriptionFilled) {
+            sendButton.classList.remove('zasdkbtndisableclr'); // no i18n
+            feedback.handleStatusmsg();
+        }
+        else {
+            sendButton.classList.add('zasdkbtndisableclr'); // no i18n
+        }
+    },
+    getVisibleErrorCount: function (elements) {
+        return Array.from(elements).filter(element => element.offsetParent !== null).length;
+    }
+};
+
+exports.feedback = feedback;
+exports.feedbackFormClose = feedbackFormClose;
+exports.feedbackFormOpen = feedbackFormOpen;
+exports.sendFeedback = sendFeedback;
+exports.setFeedbackTheme = setFeedbackTheme;