@product7/product7-js 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/product7-js.js",
 	"module": "src/index.js",

package/src/core/Product7.js

@@ -153,7 +153,9 @@ export class Product7 {
 			includeEligibility: true,
 			includeIneligible: true,
 		});
-		const surveyConfig = surveys.find((s) => s.id === surveyId);
+		const surveyConfig = surveys.find(
+			(s) => s.surveyId === surveyId || s.id === surveyId
+		);
 
 		if (!surveyConfig) {
 			throw new SDKError(

package/src/index.js

@@ -1,7 +1,6 @@
 import { APIService } from './core/APIService.js';
 import { EventBus } from './core/EventBus.js';
 import { Product7 as Product7SDK } from './core/Product7.js';
-import { CSS_STYLES } from './styles/styles.js';
 import {
 	APIError,
 	ConfigError,
@@ -19,25 +18,6 @@ import { SurveyWidget } from './widgets/SurveyWidget.js';
 import { TabWidget } from './widgets/TabWidget.js';
 import { WidgetFactory } from './widgets/WidgetFactory.js';
 
-function injectStyles() {
-	if (typeof document === 'undefined') return;
-
-	if (!document.querySelector('#product7-styles')) {
-		const style = document.createElement('style');
-		style.id = 'product7-styles';
-		style.textContent = CSS_STYLES;
-		document.head.appendChild(style);
-	}
-
-	if (!document.querySelector('#product7-iconify')) {
-		const script = document.createElement('script');
-		script.id = 'product7-iconify';
-		script.src =
-			'https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js';
-		script.async = true;
-		document.head.appendChild(script);
-	}
-}
 
 // --- Identify: transform flat user data into internal format ---
 
@@ -125,7 +105,6 @@ async function ensureSDK(options) {
 	if (Product7._sdk) return Product7._sdk;
 
 	if (options.organization) {
-		injectStyles();
 		const config = cleanUndefined({
 			workspace: options.organization,
 			debug: options.debug,
@@ -164,8 +143,6 @@ const Product7 = {
 
 	async identify(data = {}, callback) {
 		try {
-			injectStyles();
-
 			const transformed = transformIdentifyData(data);
 			Product7._organization = transformed.workspace;
 
@@ -251,8 +228,6 @@ const Product7 = {
 			return null;
 		}
 
-		injectStyles();
-
 		const widgetOptions = cleanUndefined({
 			displayMode: options.displayMode || 'panel',
 			theme: options.theme || sdk.config.theme || 'light',
@@ -359,8 +334,6 @@ const Product7 = {
 			return null;
 		}
 
-		injectStyles();
-
 		const widgetOptions = cleanUndefined({
 			theme: options.theme || sdk.config.theme || 'light',
 			primaryColor: options.primaryColor,
@@ -464,8 +437,6 @@ const Product7 = {
 			return null;
 		}
 
-		injectStyles();
-
 		// placement → position
 		let position = 'right';
 		if (options.placement === 'right') {

package/src/styles/base.js

@@ -2,7 +2,12 @@ export const baseStyles = `
 .feedback-widget,
 .messenger-widget,
 .changelog-widget,
-.feedback-survey {
+.feedback-survey,
+.feedback-panel,
+.feedback-modal,
+.changelog-modal,
+.changelog-list-modal,
+.product7-notification {
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
 }
@@ -18,7 +23,19 @@ export const baseStyles = `
 .changelog-widget *::after,
 .feedback-survey *,
 .feedback-survey *::before,
-.feedback-survey *::after {
+.feedback-survey *::after,
+.feedback-panel *,
+.feedback-panel *::before,
+.feedback-panel *::after,
+.feedback-modal *,
+.feedback-modal *::before,
+.feedback-modal *::after,
+.changelog-modal *,
+.changelog-modal *::before,
+.changelog-modal *::after,
+.changelog-list-modal *,
+.changelog-list-modal *::before,
+.changelog-list-modal *::after {
   box-sizing: border-box;
 }
 

package/src/styles/changelog.js

@@ -268,6 +268,10 @@ export const changelogStyles = `
   font-size: var(--font-size-md);
   line-height: var(--line-height-loose);
   color: var(--color-text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .changelog-popup-btn {

package/src/widgets/ChangelogWidget.js

@@ -329,9 +329,8 @@ export class ChangelogWidget extends BaseWidget {
 		const date = changelog.published_at
 			? this._formatDate(changelog.published_at)
 			: '';
-		const description = this._truncateDescription(
-			changelog.excerpt || changelog.description,
-			100
+		const description = this._stripHtml(
+			changelog.excerpt || changelog.description
 		);
 		const labelsHTML =
 			changelog.labels && changelog.labels.length > 0
@@ -400,9 +399,8 @@ export class ChangelogWidget extends BaseWidget {
 		const hasImage = changelog.cover_image || changelog.image;
 		const imageUrl = changelog.cover_image || changelog.image;
 		const hasMultiple = this.changelogs.length > 1;
-		const description = this._truncateDescription(
-			changelog.excerpt || changelog.description,
-			160
+		const description = this._stripHtml(
+			changelog.excerpt || changelog.description
 		);
 
 		content.innerHTML = `

package/src/widgets/messenger/views/ChangelogView.js

@@ -62,6 +62,13 @@ export class ChangelogView {
 		this._attachChangelogEvents();
 	}
 
+	_stripHtml(html) {
+		if (!html) return '';
+		const tmp = document.createElement('div');
+		tmp.innerHTML = html;
+		return (tmp.textContent || tmp.innerText || '').trim();
+	}
+
 	_renderChangelogCard(item) {
 		const dateStr = this._formatDate(item.publishedAt || item.date);
 		const labelsHtml =
@@ -83,7 +90,7 @@ export class ChangelogView {
 						${labelsHtml}
 					</div>
 					<h3 class="messenger-changelog-title">${item.title}</h3>
-					${item.description ? `<p class="messenger-changelog-description">${item.description}</p>` : ''}
+					${item.description ? `<p class="messenger-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
 				</div>
 				${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" /></div>` : ''}
 				<iconify-icon icon="ph:caret-right" class="messenger-changelog-arrow" width="16" height="16"></iconify-icon>