@crazy-web/feedback
Version:
A feedback form handler package that shows a popup based on allowed URLs.
315 lines (314 loc) • 17.2 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.announcementContainer = void 0;
const config_1 = require("../core/lib/config");
const enum_1 = require("../core/lib/enum");
const fetchAnnouncements_1 = require("../core/usecases/fetchAnnouncements");
const handleSubmit_1 = require("../core/usecases/handleSubmit");
const announcementCard_1 = require("./reuseables/announcementCard");
const checkIsDarkMode_1 = require("./reuseables/checkIsDarkMode");
// export const announcementContainer = async (data: any) => {
// const { orgData,config } = data;
// const { primaryColor = configData?.primaryColor } = config ?? {}
// const accountId = orgData?.organizationId;
// let currentPage = 1;
// let isFetching = false; // Prevent multiple requests
// let hasMoreData = true; // Stop fetching when no more data
// // Create a container div
// const container = document.createElement("div");
// container.className = "prodio-feedback-hidden-scrollbar";
// // container.style.cssText = "display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding:1px;height:500px";
// container.style.overflowY = "auto"
// container.style.display = "flex"
// container.style.flexDirection = "column"
// container.style.gap = "15px"
// container.style.padding = "1px"
// container.style.height = "calc(100vh - 170px)"
// // Function to fetch and append new feeds
// const loadMoreNewsfeeds = async () => {
// if (isFetching || !hasMoreData) return;
// isFetching = true;
// const res = await fetchAnnouncements({ organizationId: accountId, page: currentPage });
// const newsFeeds = res.data || [];
// if (newsFeeds.length > 0) {
// newsFeeds.forEach((feeds: any) => {
// const card = document.createElement("div");
// card.innerHTML = announcementCard(feeds,primaryColor);
// container.appendChild(card);
// });
// currentPage++; // Move to the next page
// } else {
// hasMoreData = false; // Stop fetching if no more data
// }
// isFetching = false;
// };
// // Load initial data
// await loadMoreNewsfeeds();
// // Ensure scroll event triggers correctly
// const handleScroll = async () => {
// const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;
// if (nearBottom) {
// await loadMoreNewsfeeds();
// }
// };
// // Attach event listener AFTER appending to DOM
// setTimeout(() => {
// container.addEventListener("scroll", handleScroll);
// }, 100);
// // Append container to body or a specific parent element
// // document.body.appendChild(container);
// const prodioTabContent = document.getElementById("prodio-tab-content")
// prodioTabContent?.appendChild(container)
// if (prodioTabContent) {
// prodioTabContent.addEventListener("click", async (event: any) => {
// if (event.target.classList.contains("prodio-announcement-comment-submit")) {
// const submitButton = event.target as HTMLButtonElement;
// const card = event.target.closest(".announcement-card");
// const type = card.querySelector(".prodio-announcement-comment-type") as HTMLSelectElement;
// const title = card.querySelector(".prodio-announcement-comment-title") as HTMLInputElement;
// const comment = title.value.trim();
// const typeValue = type.value.trim();
// if (comment && type) {
// console.log(`Submitting comment: "${comment}" for card ID: ${card.dataset.id}`);
// // Disable button and show loading state
// submitButton.disabled = true;
// submitButton.classList.add("prodio-disabled-btn");
// const website = window.location.hostname;
// const dataToSend = {
// title: comment,
// description: "",
// type: typeValue, // Feature, task, or bug
// feedback_id: card.dataset.id,
// source: {
// id: website,
// name: "slider",
// type: "Website",
// },
// user_id: orgData?.userData?.id,
// user_name: orgData?.userData?.name,
// user_email: orgData?.userData?.email,
// created_at: new Date(),
// updated_at: new Date(),
// last_retrieved_message: false,
// account_id: orgData?.organizationId,
// meta_data: null,
// is_public: false
// };
// await handleSubmit(dataToSend);
// // Reset form fields
// type.value = FeedbackTypes.feature.value;
// title.value = "";
// // Re-enable button and reset text
// submitButton.disabled = false;
// submitButton.classList.remove("prodio-disabled-btn");
// }
// }
// });
// }
// // return `<div>${container.outerHTML}</div>`; // Return the actual container element
// };
const announcementContainer = (data) => __awaiter(void 0, void 0, void 0, function* () {
const { orgData, config } = data;
const { primaryColor = config_1.configData === null || config_1.configData === void 0 ? void 0 : config_1.configData.primaryColor, theme = config_1.configData === null || config_1.configData === void 0 ? void 0 : config_1.configData.theme } = config !== null && config !== void 0 ? config : {};
const isDarkMode = (0, checkIsDarkMode_1.checkIsDarkMode)({ theme });
const accountId = orgData === null || orgData === void 0 ? void 0 : orgData.organizationId;
const websiteId = orgData === null || orgData === void 0 ? void 0 : orgData.websiteId;
let currentPage = 1;
let isFetching = false; // Prevent multiple requests
let hasMoreData = true; // Stop fetching when no more data
// Create a container div
const container = document.createElement("div");
container.className = "prodio-feedback-hidden-scrollbar";
container.style.overflowY = "auto";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.gap = "15px";
container.style.padding = "1px";
container.style.height = "calc(100vh - 190px)";
// Create loading indicator
const loadingIndicator = document.createElement("div");
loadingIndicator.className = "prodio-spinner-container";
loadingIndicator.innerHTML = `<div class="prodio-spinner"></div>`;
container.appendChild(loadingIndicator);
// Function to fetch and append new feeds
const loadMoreNewsfeeds = () => __awaiter(void 0, void 0, void 0, function* () {
if (isFetching || !hasMoreData)
return;
isFetching = true;
loadingIndicator.style.display = "flex"; // Show loading spinner
const res = yield (0, fetchAnnouncements_1.fetchAnnouncements)({ websiteId, organizationId: accountId, page: currentPage });
const newsFeeds = res.data || [];
loadingIndicator.style.display = "none"; // Hide loading spinner
if (newsFeeds.length > 0) {
newsFeeds.forEach((feeds) => {
const card = document.createElement("div");
card.innerHTML = (0, announcementCard_1.announcementCard)(feeds, primaryColor, isDarkMode);
container.appendChild(card);
});
currentPage++; // Move to the next page
}
else if (currentPage === 1) {
// If no data and first page, show "No Feeds" message
const noFeedsMessage = document.createElement("div");
noFeedsMessage.className = "prodio-no-data";
noFeedsMessage.textContent = "No feeds available.";
container.appendChild(noFeedsMessage);
hasMoreData = false;
}
else {
hasMoreData = false;
}
isFetching = false;
});
// Load initial data
loadMoreNewsfeeds();
// Ensure scroll event triggers correctly
const handleScroll = () => __awaiter(void 0, void 0, void 0, function* () {
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 20;
if (nearBottom) {
yield loadMoreNewsfeeds();
}
});
// Attach event listener AFTER appending to DOM
setTimeout(() => {
container.addEventListener("scroll", handleScroll);
}, 100);
// Append container to the specified tab content
const prodioTabContent = document.getElementById("prodio-tab-content");
prodioTabContent === null || prodioTabContent === void 0 ? void 0 : prodioTabContent.appendChild(container);
if (prodioTabContent) {
// prodioTabContent.addEventListener("click", async (event: any) => {
// if (event.target.classList.contains("prodio-announcement-comment-submit")) {
// const submitButton = event.target as HTMLButtonElement;
// const card = event.target.closest(".announcement-card");
// const type = card.querySelector(".prodio-announcement-comment-type") as HTMLSelectElement;
// const title = card.querySelector(".prodio-announcement-comment-title") as HTMLInputElement;
// const comment = title.value.trim();
// const typeValue = type.value.trim();
// if (comment && type) {
// console.log(`Submitting comment: "${comment}" for card ID: ${card.dataset.id}`);
// // Disable button and show loading state
// submitButton.disabled = true;
// submitButton.classList.add("prodio-disabled-btn");
// const website = window.location.hostname;
// const dataToSend = {
// title: comment,
// description: "",
// type: typeValue, // Feature, task, or bug
// feedback_id: card.dataset.id,
// source: {
// id: website,
// name: "slider",
// type: "Website",
// },
// user_id: orgData?.userData?.id,
// user_name: orgData?.userData?.name,
// user_email: orgData?.userData?.email,
// created_at: new Date(),
// updated_at: new Date(),
// last_retrieved_message: false,
// account_id: orgData?.organizationId,
// meta_data: null,
// is_public: false,
// website_id: orgData?.websiteId,
// submission_mode:SubmissionMode.announcement
// };
// await handleSubmit(dataToSend);
// // Reset form fields
// type.value = FeedbackTypes.feature.value;
// title.value = "";
// // Re-enable button and reset text
// submitButton.disabled = false;
// submitButton.classList.remove("prodio-disabled-btn");
// }
// }
// });
prodioTabContent.addEventListener("click", (event) => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c;
const target = event.target;
// Toggle "Leave a comment" form
if (target.classList.contains("toggle-comment-box")) {
const card = target.closest(".announcement-card");
const commentBox = card.querySelector(".comment-box");
commentBox.style.display = "flex";
target.style.display = "none"; // Hide the "Leave a comment" button
}
// Cancel comment
if (target.classList.contains("cancel-comment")) {
const card = target.closest(".announcement-card");
const commentBox = card.querySelector(".comment-box");
const toggleBtn = card.querySelector(".toggle-comment-box");
commentBox.style.display = "none";
toggleBtn.textContent = "Leave a comment"; // reset button text
toggleBtn.style.display = "inline-block";
const type = card.querySelector(".prodio-announcement-comment-type");
const title = card.querySelector(".prodio-announcement-comment-title");
// Reset values
type.selectedIndex = 0;
title.value = "";
}
// Submit comment
if (target.classList.contains("prodio-announcement-comment-submit")) {
const submitButton = target;
const card = submitButton.closest(".announcement-card");
const type = card.querySelector(".prodio-announcement-comment-type");
const title = card.querySelector(".prodio-announcement-comment-title");
const comment = title.value.trim();
const typeValue = type.value.trim();
if (comment && typeValue) {
console.log(`Submitting comment: "${comment}" for card ID: ${card.dataset.id}`);
// Disable button and show loading state
submitButton.disabled = true;
submitButton.classList.add("prodio-disabled-btn");
const website = window.location.hostname;
const dataToSend = {
title: comment,
description: "",
type: typeValue,
feedback_id: card.dataset.id,
source: {
id: website,
name: "slider",
type: "Website",
},
user_id: (_a = orgData === null || orgData === void 0 ? void 0 : orgData.userData) === null || _a === void 0 ? void 0 : _a.id,
user_name: (_b = orgData === null || orgData === void 0 ? void 0 : orgData.userData) === null || _b === void 0 ? void 0 : _b.name,
user_email: (_c = orgData === null || orgData === void 0 ? void 0 : orgData.userData) === null || _c === void 0 ? void 0 : _c.email,
created_at: new Date(),
updated_at: new Date(),
last_retrieved_message: false,
account_id: orgData === null || orgData === void 0 ? void 0 : orgData.organizationId,
meta_data: null,
is_public: false,
website_id: orgData === null || orgData === void 0 ? void 0 : orgData.websiteId,
submission_mode: enum_1.SubmissionMode.announcement
};
yield (0, handleSubmit_1.handleSubmit)(dataToSend);
// console.log("Data to send:", dataToSend); // For debugging
// Reset fields
type.value = enum_1.FeedbackTypes.feature.value;
title.value = "";
// Hide form and show "Leave a comment again"
const commentBox = card.querySelector(".comment-box");
const toggleBtn = card.querySelector(".toggle-comment-box");
commentBox.style.display = "none";
toggleBtn.style.display = "inline-block";
toggleBtn.textContent = "Leave a comment";
// Re-enable button
submitButton.disabled = false;
submitButton.classList.remove("prodio-disabled-btn");
}
}
}));
}
});
exports.announcementContainer = announcementContainer;