@openreplay/tracker 11.0.0-beta.1 → 11.0.1

package/cjs/modules/userTesting/index.js

@@ -3,101 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styles = require("./styles.js");
 const recorder_js_1 = require("./recorder.js");
 const dnd_js_1 = require("./dnd.js");
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
+const utils_js_1 = require("./utils.js");
+const SignalManager_js_1 = require("./SignalManager.js");
 class UserTestManager {
     constructor(app, storageKey) {
         this.app = app;
         this.storageKey = storageKey;
-        this.bg = createElement('div', 'bg', styles.bgStyle, undefined, '__or_ut_bg');
-        this.container = createElement('div', 'container', styles.containerStyle, undefined, '__or_ut_ct');
+        this.bg = (0, utils_js_1.createElement)('div', 'bg', styles.bgStyle, undefined, '__or_ut_bg');
+        this.container = (0, utils_js_1.createElement)('div', 'container', styles.containerStyle, undefined, '__or_ut_ct');
         this.widgetGuidelinesVisible = true;
         this.widgetTasksVisible = false;
         this.widgetVisible = true;
+        this.isActive = false;
         this.descriptionSection = null;
         this.taskSection = null;
         this.endSection = null;
         this.stopButton = null;
+        this.stopButtonContainer = null;
         this.test = null;
         this.testId = null;
-        this.token = null;
-        this.durations = {
-            testStart: 0,
-            tasks: [],
-        };
-        this.signalTask = (taskId, status, answer) => {
-            if (!taskId)
-                return console.error('OR: no task id');
-            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
-            const timestamp = this.app.timestamp();
-            const duration = taskStart ? timestamp - taskStart.started : 0;
-            const ingest = this.app.options.ingestPoint;
-            return fetch(`${ingest}/v1/web/uxt/signals/task`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    taskId,
-                    status,
-                    duration,
-                    timestamp,
-                    answer,
-                }),
-            });
-        };
-        this.signalTest = (status) => {
-            const timestamp = this.app.timestamp();
-            if (status === 'begin' && this.testId) {
-                this.app.localStorage.setItem(this.storageKey, this.testId.toString());
-                this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString());
-            }
-            else {
-                this.app.localStorage.removeItem(this.storageKey);
-                this.app.localStorage.removeItem('or_uxt_task_index');
-                this.app.localStorage.removeItem('or_uxt_test_start');
-            }
-            const ingest = this.app.options.ingestPoint;
-            const start = this.durations.testStart || timestamp;
-            const duration = timestamp - start;
-            return fetch(`${ingest}/v1/web/uxt/signals/test`, {
-                method: 'POST',
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    Authorization: `Bearer ${this.token}`,
-                },
-                body: JSON.stringify({
-                    testId: this.testId,
-                    status,
-                    duration,
-                    timestamp,
-                }),
-            });
-        };
+        this.signalManager = null;
         this.getTest = (id, token, inProgress) => {
             this.testId = id;
-            this.token = token;
             const ingest = this.app.options.ingestPoint;
-            fetch(`${ingest}/v1/web/uxt/test/${id}`, {
+            return fetch(`${ingest}/v1/web/uxt/test/${id}`, {
                 headers: {
                     Authorization: `Bearer ${token}`,
                 },
             })
                 .then((res) => res.json())
                 .then(({ test }) => {
+                this.isActive = true;
                 this.test = test;
+                this.signalManager = new SignalManager_js_1.default(this.app.options.ingestPoint, () => this.app.timestamp(), token, id, this.storageKey, (k, v) => this.app.localStorage.setItem(k, v), (k) => this.app.localStorage.removeItem(k), (k) => this.app.localStorage.getItem(k), () => this.app.getSessionID());
                 this.createGreeting(test.title, test.reqMic, test.reqCamera);
                 if (inProgress) {
                     if (test.reqMic || test.reqCamera) {
@@ -107,6 +45,7 @@ class UserTestManager {
                     this.showTaskSection();
                 }
             })
+                .then(() => id)
                 .catch((err) => {
                 console.log('OR: Error fetching test', err);
             });
@@ -120,48 +59,56 @@ class UserTestManager {
         this.currentTaskIndex = 0;
         this.userRecorder = new recorder_js_1.default(app);
         const sessionId = this.app.getSessionID();
-        const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id');
+        const savedSessionId = this.app.localStorage.getItem(utils_js_1.SESSION_ID);
         if (sessionId !== savedSessionId) {
             this.app.localStorage.removeItem(this.storageKey);
-            this.app.localStorage.removeItem('or_uxt_session_id');
-            this.app.localStorage.removeItem('or_uxt_test_id');
-            this.app.localStorage.removeItem('or_uxt_task_index');
-            this.app.localStorage.removeItem('or_uxt_test_start');
+            this.app.localStorage.removeItem(utils_js_1.SESSION_ID);
+            this.app.localStorage.removeItem(utils_js_1.TEST_ID);
+            this.app.localStorage.removeItem(utils_js_1.TASK_IND);
+            this.app.localStorage.removeItem(utils_js_1.TEST_START);
         }
-        const taskIndex = this.app.localStorage.getItem('or_uxt_task_index');
+        const taskIndex = this.app.localStorage.getItem(utils_js_1.TASK_IND);
         if (taskIndex) {
             this.currentTaskIndex = parseInt(taskIndex, 10);
-            this.durations.testStart = parseInt(this.app.localStorage.getItem('or_uxt_test_start'), 10);
         }
     }
+    getTestId() {
+        return this.testId;
+    }
     createGreeting(title, micRequired, cameraRequired) {
-        const titleElement = createElement('div', 'title', styles.titleStyle, title);
-        const descriptionElement = createElement('div', 'description', styles.descriptionStyle, 'Welcome, this session will be recorded. You have complete control, and can stop the session at any time.');
-        const noticeElement = createElement('div', 'notice', styles.noticeStyle, `Please note that your ${micRequired ? 'audio,' : ''} ${cameraRequired ? 'video,' : ''} ${micRequired || cameraRequired ? 'and' : ''} screen will be recorded for research purposes during this test.`);
-        const buttonElement = createElement('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
+        const titleElement = (0, utils_js_1.createElement)('div', 'title', styles.titleStyle, title);
+        const descriptionElement = (0, utils_js_1.createElement)('div', 'description', styles.descriptionStyle, `Welcome, you're here to help us improve, not to be judged. Your insights matter!\n
+📹 We're recording this browser tab to learn from your experience.
+🎤 Please enable mic and camera if asked, to give us a complete picture.`);
+        const buttonElement = (0, utils_js_1.createElement)('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
         this.removeGreeting = () => {
-            this.container.innerHTML = '';
+            // this.container.innerHTML = ''
             if (micRequired || cameraRequired) {
                 void this.userRecorder.startRecording(30, recorder_js_1.Quality.Standard, micRequired, cameraRequired);
             }
             this.container.removeChild(buttonElement);
-            this.container.removeChild(noticeElement);
             this.container.removeChild(descriptionElement);
             this.container.removeChild(titleElement);
             return false;
         };
         buttonElement.onclick = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             this.removeGreeting();
-            this.durations.testStart = this.app.timestamp();
-            void this.signalTest('begin');
-            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.description) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+            const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+            if (durations && this.signalManager) {
+                durations.testStart = this.app.timestamp();
+                this.signalManager.setDurations(durations);
+            }
+            void ((_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.signalTest('begin'));
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+            Object.assign(this.container.style, styles.containerWidgetStyle);
+            this.showWidget(((_c = this.test) === null || _c === void 0 ? void 0 : _c.guidelines) || '', ((_d = this.test) === null || _d === void 0 ? void 0 : _d.tasks) || []);
         };
-        this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
+        this.container.append(titleElement, descriptionElement, buttonElement);
         this.bg.appendChild(this.container);
         document.body.appendChild(this.bg);
     }
-    showWidget(description, tasks, inProgress) {
+    showWidget(guidelines, tasks, inProgress) {
         this.container.innerHTML = '';
         Object.assign(this.bg.style, {
             position: 'fixed',
@@ -178,18 +125,25 @@ class UserTestManager {
         });
         // Create title section
         const titleSection = this.createTitleSection();
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
         Object.assign(this.container.style, styles.containerWidgetStyle);
-        const descriptionSection = this.createDescriptionSection(description);
+        const descriptionSection = this.createDescriptionSection(guidelines);
         const tasksSection = this.createTasksSection(tasks);
-        const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
-        this.container.append(titleSection, descriptionSection, tasksSection, stopButton);
+        const stopButton = (0, utils_js_1.createElement)('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
+        const stopContainer = (0, utils_js_1.createElement)('div', 'stop_ct_or', { fontSize: '13px!important' });
+        stopContainer.style.fontSize = '13px';
+        stopContainer.append(stopButton);
+        this.container.append(titleSection, descriptionSection, tasksSection, stopContainer);
         this.taskSection = tasksSection;
         this.descriptionSection = descriptionSection;
         this.stopButton = stopButton;
+        this.stopButtonContainer = stopContainer;
         stopButton.onclick = () => {
+            var _a;
             this.userRecorder.discard();
-            void this.signalTest('skipped');
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('skipped'));
             document.body.removeChild(this.bg);
+            window.close();
         };
         if (!inProgress) {
             this.hideTaskSection();
@@ -200,13 +154,22 @@ class UserTestManager {
     }
     createTitleSection() {
         var _a;
-        const title = createElement('div', 'title', styles.titleWidgetStyle);
-        const leftIcon = generateGrid();
-        const titleText = createElement('div', 'title_text', {}, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
-        const rightIcon = generateChevron();
+        const title = (0, utils_js_1.createElement)('div', 'title', styles.titleWidgetStyle);
+        const leftIcon = (0, utils_js_1.generateGrid)();
+        const titleText = (0, utils_js_1.createElement)('div', 'title_text', {
+            maxWidth: '19rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+            fontSize: 16,
+            lineHeight: 'auto',
+            cursor: 'pointer',
+        }, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
+        const rightIcon = (0, utils_js_1.generateChevron)();
         title.append(leftIcon, titleText, rightIcon);
         const toggleWidget = (isVisible) => {
             this.widgetVisible = isVisible;
+            this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
             Object.assign(this.container.style, this.widgetVisible
                 ? styles.containerWidgetStyle
                 : { border: 'none', background: 'none', padding: 0 });
@@ -224,28 +187,38 @@ class UserTestManager {
             }
             return isVisible;
         };
-        rightIcon.onclick = () => {
+        const collapseWidget = () => {
             Object.assign(rightIcon.style, {
                 transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
             });
             toggleWidget(!this.widgetVisible);
         };
+        titleText.onclick = collapseWidget;
+        rightIcon.onclick = collapseWidget;
         (0, dnd_js_1.default)(this.bg, leftIcon);
         this.collapseWidget = () => toggleWidget(false);
         return title;
     }
-    createDescriptionSection(description) {
-        const section = createElement('div', 'description_section_or', styles.descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle);
-        const title = createElement('div', 'title', {}, 'Introduction & Guidelines');
-        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
-        const content = createElement('div', 'content', styles.contentStyle);
-        const descriptionC = createElement('div', 'text_description', {
+    createDescriptionSection(guidelines) {
+        const section = (0, utils_js_1.createElement)('div', 'description_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = (0, utils_js_1.createElement)('div', 'description_s_title_or', styles.sectionTitleStyle);
+        const title = (0, utils_js_1.createElement)('div', 'title', {
+            fontSize: 13,
+            fontWeight: 500,
+            lineHeight: 'auto',
+        }, 'Introduction & Guidelines');
+        const icon = (0, utils_js_1.createElement)('div', 'icon', styles.symbolIcon, '-');
+        const content = (0, utils_js_1.createElement)('div', 'content', styles.contentStyle);
+        const descriptionC = (0, utils_js_1.createElement)('div', 'text_description', {
             maxHeight: '250px',
-            overflow: 'scroll',
+            overflowY: 'auto',
+            whiteSpace: 'pre-wrap',
+            fontSize: 13,
+            color: '#454545',
+            lineHeight: 'auto',
         });
-        descriptionC.innerHTML = description;
-        const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
+        descriptionC.innerHTML = guidelines;
+        const button = (0, utils_js_1.createElement)('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
         titleContainer.append(title, icon);
         content.append(descriptionC, button);
         section.append(titleContainer, content);
@@ -262,15 +235,21 @@ class UserTestManager {
             content.removeChild(button);
         };
         button.onclick = () => {
+            var _a, _b, _c;
             toggleDescriptionVisibility();
             if (this.test) {
-                if (this.durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.getDurations();
+                const taskDurationInd = durations
+                    ? durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id)
+                    : null;
+                if (durations && taskDurationInd === -1) {
+                    durations.tasks.push({
                         taskId: this.test.tasks[0].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.setDurations(durations);
                 }
-                void this.signalTask(this.test.tasks[0].task_id, 'begin');
+                void ((_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.signalTask(this.test.tasks[0].task_id, 'begin'));
             }
             this.showTaskSection();
             content.removeChild(button);
@@ -278,27 +257,33 @@ class UserTestManager {
         return section;
     }
     createTasksSection(tasks) {
-        const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle);
-        const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle);
-        const title = createElement('div', 'title', {}, 'Tasks');
-        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
-        const content = createElement('div', 'content', styles.contentStyle);
-        const pagination = createElement('div', 'pagination', styles.paginationStyle);
-        const leftArrow = createElement('span', 'leftArrow', {}, '<');
-        const rightArrow = createElement('span', 'rightArrow', {}, '>');
-        const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard);
-        const taskText = createElement('div', 'taskText', styles.taskTextStyle);
-        const taskDescription = createElement('div', 'taskDescription', styles.taskDescriptionStyle);
-        const taskButtons = createElement('div', 'taskButtons', styles.taskButtonsRow);
-        const inputTitle = createElement('div', 'taskText', styles.taskTextStyle);
+        this.container.style.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+        Object.assign(this.container.style, styles.containerWidgetStyle);
+        const section = (0, utils_js_1.createElement)('div', 'task_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = (0, utils_js_1.createElement)('div', 'description_t_title_or', styles.sectionTitleStyle);
+        const title = (0, utils_js_1.createElement)('div', 'title', {
+            fontSize: '13px',
+            fontWeight: '500',
+            lineHeight: 'auto',
+        }, 'Tasks');
+        const icon = (0, utils_js_1.createElement)('div', 'icon', styles.symbolIcon, '-');
+        const content = (0, utils_js_1.createElement)('div', 'content', styles.contentStyle);
+        const pagination = (0, utils_js_1.createElement)('div', 'pagination', styles.paginationStyle);
+        // const leftArrow = createElement('span', 'leftArrow', {}, '<')
+        // const rightArrow = createElement('span', 'rightArrow', {}, '>')
+        const taskCard = (0, utils_js_1.createElement)('div', 'taskCard', styles.taskDescriptionCard);
+        const taskText = (0, utils_js_1.createElement)('div', 'taskText', styles.taskTextStyle);
+        const taskDescription = (0, utils_js_1.createElement)('div', 'taskDescription', styles.taskDescriptionStyle);
+        const taskButtons = (0, utils_js_1.createElement)('div', 'taskButtons', styles.taskButtonsRow);
+        const inputTitle = (0, utils_js_1.createElement)('div', 'taskText', styles.taskTextStyle);
         inputTitle.textContent = 'Your answer';
-        const inputArea = createElement('textarea', 'taskDescription', {
+        const inputArea = (0, utils_js_1.createElement)('textarea', 'taskDescription', {
             resize: 'vertical',
         });
-        const inputContainer = createElement('div', 'inputArea', styles.taskDescriptionCard);
+        const inputContainer = (0, utils_js_1.createElement)('div', 'inputArea', styles.taskDescriptionCard);
         inputContainer.append(inputTitle, inputArea);
-        const closePanelButton = createElement('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse panel');
-        const nextButton = createElement('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, next');
+        const closePanelButton = (0, utils_js_1.createElement)('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse Panel');
+        const nextButton = (0, utils_js_1.createElement)('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, Next');
         titleContainer.append(title, icon);
         taskCard.append(taskText, taskDescription);
         taskButtons.append(closePanelButton, nextButton);
@@ -315,13 +300,23 @@ class UserTestManager {
                 inputContainer.style.display = 'none';
             }
         };
-        pagination.appendChild(leftArrow);
+        // pagination.appendChild(leftArrow)
         tasks.forEach((_, index) => {
-            const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString());
+            const pageNumber = (0, utils_js_1.createElement)('span', `or_task_${index}`, {
+                outline: '1px solid #efefef',
+                fontSize: '13px',
+                height: '24px',
+                width: '24px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '6.25em',
+            }, (index + 1).toString());
             pageNumber.id = `or_task_${index}`;
             pagination.append(pageNumber);
         });
-        pagination.appendChild(rightArrow);
+        // pagination.appendChild(rightArrow)
         const toggleTasksVisibility = () => {
             this.widgetTasksVisible = !this.widgetTasksVisible;
             icon.textContent = this.widgetTasksVisible ? '-' : '+';
@@ -356,19 +351,23 @@ class UserTestManager {
         titleContainer.onclick = toggleTasksVisibility;
         closePanelButton.onclick = this.collapseWidget;
         nextButton.onclick = () => {
+            var _a, _b, _c, _d;
             const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
             inputArea.value = '';
-            void this.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
+            void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer));
             if (this.currentTaskIndex < tasks.length - 1) {
                 this.currentTaskIndex++;
                 updateTaskContent();
-                if (this.durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
-                    this.durations.tasks.push({
+                const durations = (_b = this.signalManager) === null || _b === void 0 ? void 0 : _b.getDurations();
+                if (durations &&
+                    durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
+                    durations.tasks.push({
                         taskId: tasks[this.currentTaskIndex].task_id,
                         started: this.app.timestamp(),
                     });
+                    (_c = this.signalManager) === null || _c === void 0 ? void 0 : _c.setDurations(durations);
                 }
-                void this.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
+                void ((_d = this.signalManager) === null || _d === void 0 ? void 0 : _d.signalTask(tasks[this.currentTaskIndex].task_id, 'begin'));
                 highlightActive();
             }
             else {
@@ -387,32 +386,53 @@ class UserTestManager {
         return section;
     }
     showEndSection() {
-        var _a, _b, _c, _d, _e, _f;
-        void this.signalTest('done');
-        const section = createElement('div', 'end_section_or', styles.endSectionStyle);
-        const title = createElement('div', 'end_title_or', {
+        var _a, _b, _c, _d, _e;
+        let isLoading = true;
+        void ((_a = this.signalManager) === null || _a === void 0 ? void 0 : _a.signalTest('done'));
+        const section = (0, utils_js_1.createElement)('div', 'end_section_or', styles.endSectionStyle);
+        const title = (0, utils_js_1.createElement)('div', 'end_title_or', {
             fontSize: '1.25rem',
             fontWeight: '500',
-        }, ((_a = this.test) === null || _a === void 0 ? void 0 : _a.reqMic) || ((_b = this.test) === null || _b === void 0 ? void 0 : _b.reqCamera) ? 'Uploading test recording...' : 'Thank you! 👍');
-        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our user test. Your feedback has been captured and will be used to enhance our website. \n' +
+        }, 'Thank you! 👍');
+        const description = (0, utils_js_1.createElement)('div', 'end_description_or', {}, (_c = (_b = this.test) === null || _b === void 0 ? void 0 : _b.conclusion) !== null && _c !== void 0 ? _c : 'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
             '\n' +
             'We appreciate your time and valuable input.');
-        if (((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqMic) || ((_f = this.test) === null || _f === void 0 ? void 0 : _f.reqCamera)) {
-            this.userRecorder.sendToAPI().then(() => {
-                title.textContent = 'Thank you! 👍';
+        const button = (0, utils_js_1.createElement)('div', 'end_button_or', styles.buttonWidgetStyle, 'Submitting Feedback');
+        const spinner = (0, utils_js_1.createSpinner)();
+        button.appendChild(spinner);
+        if (((_d = this.test) === null || _d === void 0 ? void 0 : _d.reqMic) || ((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqCamera)) {
+            void this.userRecorder
+                .sendToAPI()
+                .then(() => {
+                button.removeChild(spinner);
+                button.textContent = 'End Session';
+                isLoading = false;
+            })
+                .catch((err) => {
+                console.error(err);
+                button.removeChild(spinner);
+                button.textContent = 'End Session';
+                isLoading = false;
             });
         }
-        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'End Session');
+        else {
+            button.removeChild(spinner);
+            button.textContent = 'End Session';
+            isLoading = false;
+        }
         if (this.taskSection) {
             this.container.removeChild(this.taskSection);
         }
         if (this.descriptionSection) {
             this.container.removeChild(this.descriptionSection);
         }
-        if (this.stopButton) {
-            this.container.removeChild(this.stopButton);
+        if (this.stopButton && this.stopButtonContainer) {
+            this.container.removeChild(this.stopButtonContainer);
         }
         button.onclick = () => {
+            if (isLoading)
+                return;
+            window.close();
             document.body.removeChild(this.bg);
         };
         section.append(title, description, button);
@@ -421,49 +441,3 @@ class UserTestManager {
     }
 }
 exports.default = UserTestManager;
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}