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

package/dist/esm/feedback/ui.js

@@ -0,0 +1,626 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+import { AP_TRACKING_STATUS } from '../core/constants.js';
+import { _ZAP } from '../core/state.js';
+import { Console } from '../core/logger.js';
+import { isEmpty, isEmptyObj } from '../core/utils.js';
+import { opt_in_status } from '../core/consent.js';
+import { timerHtml, feedbackUIHtml } from './template.js';
+import { sendFeedbackData } from './send.js';
+import { wireDrag, wireUserPicker, wireLogControls, logChoice, userChoice } from './controls.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 sendFeedbackData(dataobj).then(function (result) {
+        if (!result) {
+            return null;
+        }
+        feedback.handleStatusmsg(result.ok, result.message);
+        if (result.ok) {
+            setTimeout(() => {
+                feedback.close();
+            }, 2000);
+        }
+        return result;
+    });
+}
+function sendFeedback(feedbackType, feedbackMessage, attachments, logsFiles, includeDyninfo, includeLog) {
+    const dataobj = {
+        type: !isEmpty(feedbackType) ? feedbackType : 1,
+        message: feedbackMessage || '', // no i18n
+        attachment: attachments || null,
+        logsFiles: logsFiles || null,
+        // both flags stay as given: unset lets send.ts decide from what is actually stored
+        includeDyninfo: includeDyninfo,
+        includeLog: includeLog,
+        quartzid: '' // no i18n
+    };
+    // 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) {
+        if (!result) {
+            throw new Error('apptics.sendFeedback: not sent, the browser is offline or Apptics is disabled for this client'); // no i18n
+        }
+        if (!result.ok) {
+            throw new Error('apptics.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: !isEmpty(seltype) ? feedback.typeObj[seltype] : 1,
+        message: message,
+        attachment: (files && files.length > 0) ? files : (feedback._opts.attachments || null),
+        logsFiles: feedback._opts.logFiles || null,
+        includeLog: logChoice.includeLog,
+        includeDyninfo: 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) {
+        Console.warn('apptics.feedback: this browser cannot build a file list, attachments are off'); // no i18n
+        return null;
+    }
+}
+function feedbackOpen(type, message, includeLog, includeDyninfo, attachments, logFiles, isAnonymous) {
+    const opts = {
+        includeLog: includeLog === true,
+        includeDyninfo: includeDyninfo === true,
+        isAnonymous: isAnonymous === true,
+    };
+    if (typeof type === 'number')
+        opts.type = type; // no i18n
+    if (typeof message === 'string' && message.length > 0)
+        opts.message = message; // no i18n
+    if (attachments && attachments.length > 0)
+        opts.attachments = attachments;
+    if (logFiles && logFiles.length > 0)
+        opts.logFiles = logFiles;
+    feedback.init(opts);
+}
+function feedbackClose() {
+    feedback.close();
+}
+const feedback = {
+    feedbackUIHtml: feedbackUIHtml,
+    timerHtml: 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 (!isEmpty(modal)) {
+            return;
+        }
+        const tempContainer = document.createElement('div'); // no i18n
+        feedback.uploadFileAry = [];
+        tempContainer.id = 'zasdkFeedbackModal'; // no i18n
+        tempContainer.className = 'zasdk-modal'; // no i18n
+        tempContainer.innerHTML = feedback.feedbackUIHtml;
+        document.body.appendChild(tempContainer);
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        var defaultoption = _ZAP._defaultoptions;
+        var qz_ws_key = defaultoption.quartz_workspace_key;
+        var qz_dp_key = defaultoption.quartz_department_key;
+        var quartz_DC = {
+            "Local": "https://quartz.localzoho.com", // no i18n
+            "US": "https://quartz.zoho.com", // no i18n
+            "EU": "https://quartz.zoho.eu", // no i18n
+            "IN": "https://quartz.zoho.in", // no i18n
+            "AU": "https://quartz.zoho.com.au", // no i18n
+            "CN": "https://quartz.zoho.com.cn", // no i18n
+            "CA": "https://quartz.zohocloud.ca", // no i18n
+            "JP": "https://quartz.zoho.jp", // no i18n
+            "SA": "https://quartz.zoho.sa", // no i18n
+            "AE": "https://quartz.zoho.ae" // no i18n
+        };
+        var qz_dc_key = (!isEmpty(defaultoption.DC) && defaultoption.DC !== '-') ? (quartz_DC[defaultoption.DC] || '') : ''; // no i18n
+        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
+        wireDrag(feedbackbox);
+        wireUserPicker(modal, feedback._opts.isAnonymous === true);
+        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: the Quartz
+        // script on the page, a DC it knows, and both keys. "-" for any of them turns it off; DC "-"
+        // has already become '' above. A checkbox that leads only to "unavailable" is not offered
+        var recordingAvailable = hasQuartz() && !isEmpty(qz_dc_key)
+            && !isEmpty(qz_ws_key) && qz_ws_key !== "-" && !isEmpty(qz_dp_key) && qz_dp_key !== "-"; // no i18n
+        modal.querySelector("#zasdkreccheckcnt").style.display = recordingAvailable ? "block" : "none"; // 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 (isEmpty(qz_ws_key) || isEmpty(qz_dp_key) || 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();
+        };
+        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) {
+                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
+        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 feedbackOpen() 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 (!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
+            }
+        });
+    },
+    handleStatusmsg: function (isSuccess, stsmsg) {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (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 (!isEmpty(isSuccess)) {
+            successmsgclass = isSuccess ? 'zasdkstssucs' : 'zasdkstserror'; // no i18n
+            successmsg = !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 (!isEmpty(feedbacktimer)) {
+                feedbacktimer.remove();
+            }
+            const tempDiv = document.createElement("div"); // no i18n
+            tempDiv.innerHTML = feedback.timerHtml;
+            const node = tempDiv.firstElementChild;
+            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();
+        }
+    },
+    close: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        document.removeEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
+        quartz().clearFeedback();
+        if (!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 = userChoice.anonymous ? '' : String(userChoice.userid || ''), // no i18n
+        active = !isEmpty(_ZAP._user_info.userid) ? String(_ZAP._user_info.userid) : '', // no i18n
+        userEmail = !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) && opt_in_status() == AP_TRACKING_STATUS.USAGE_TRACKING_WITH_PII) ? userEmail : testEmail;
+        // Submit the recording
+        quartz().submitRecording({
+            email: userEmail,
+            subject: subject,
+        })
+            .then((response) => {
+            var zqrecid = !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
+            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;
+    }
+};
+
+export { feedback, feedbackClose, feedbackOpen, sendFeedback };

package/dist/esm/heatmap/index.d.ts

@@ -0,0 +1,16 @@
+import { enableHeatmap as enableHeatmapImpl } from './track.js';
+import './send.js';
+/**
+ * Heatmap capture, from '@zoho_apptics/apptics-js-sdk/heatmap'.
+ *
+ * Its own entry point, like the feedback modal: an app that does not want heatmaps ships none of
+ * this. Importing it is what makes `track_heatmap: true` do anything — the config flag on its own
+ * has nothing to switch on.
+ */
+/** Starts or stops recording clicks and scrolls. */
+export declare const enableHeatmap: typeof enableHeatmapImpl;
+export type { HeatmapRecord } from '../types.js';
+declare const heatmap: {
+    enableHeatmap: typeof enableHeatmapImpl;
+};
+export default heatmap;

package/dist/esm/heatmap/index.js

@@ -0,0 +1,17 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+import { guard } from '../core/guard.js';
+import { enableHeatmap as enableHeatmap$1 } from './track.js';
+import './send.js';
+
+/**
+ * Heatmap capture, from '@zoho_apptics/apptics-js-sdk/heatmap'.
+ *
+ * Its own entry point, like the feedback modal: an app that does not want heatmaps ships none of
+ * this. Importing it is what makes `track_heatmap: true` do anything — the config flag on its own
+ * has nothing to switch on.
+ */
+/** Starts or stops recording clicks and scrolls. */
+const enableHeatmap = guard('enableHeatmap', enableHeatmap$1); // no i18n
+const heatmap = { enableHeatmap };
+
+export { heatmap as default, enableHeatmap };

package/dist/esm/heatmap/send.d.ts

@@ -0,0 +1,13 @@
+import type { Dict, ServerResult } from '../types.js';
+/**
+ * Sends queued heatmap records to heatmap/add.
+ *
+ * Shaped like the error and engagement senders, because the queue behaves the same way: records
+ * are stored first and sent on the flush timer, a failed send leaves them for the next one, and
+ * `forget` is used on page hide so the last batch survives the page going away.
+ *
+ * Gated on the server's own heatmap flag (getsdkconfig module 18), not on engagement: an app may
+ * want events while declining to have every click's coordinates recorded.
+ */
+export declare function sendHeatmapData(forget?: boolean): Promise<void>;
+export declare function requestToSendHeatmaps(_payload: Dict, forget?: boolean): Promise<ServerResult>;