@product7/feedback-sdk 1.5.3 → 1.5.7

package/package.json

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

package/src/core/FeedbackSDK.js

@@ -147,6 +147,16 @@ export class FeedbackSDK {
 			description: surveyConfig.description,
 			lowLabel: surveyConfig.lowLabel || surveyConfig.low_label,
 			highLabel: surveyConfig.highLabel || surveyConfig.high_label,
+			ratingScale: surveyConfig.ratingScale ?? surveyConfig.rating_scale,
+			showFeedbackInput:
+				surveyConfig.showFeedbackInput ?? surveyConfig.show_feedback_input,
+			showSubmitButton:
+				surveyConfig.showSubmitButton ?? surveyConfig.show_submit_button,
+			autoSubmitOnSelect:
+				surveyConfig.autoSubmitOnSelect ?? surveyConfig.auto_submit_on_select,
+			showTitle: surveyConfig.showTitle ?? surveyConfig.show_title,
+			showDescription:
+				surveyConfig.showDescription ?? surveyConfig.show_description,
 			customQuestions: surveyConfig.customQuestions || surveyConfig.questions,
 			pages: surveyConfig.pages,
 			...displayOptions,
@@ -173,13 +183,20 @@ export class FeedbackSDK {
 
 		const surveyWidget = this.createWidget('survey', {
 			surveyId: normalizedOptions.surveyId,
-			surveyType: normalizedOptions.surveyType || normalizedOptions.type || 'nps',
+			surveyType:
+				normalizedOptions.surveyType || normalizedOptions.type || 'nps',
 			position: normalizedOptions.position || 'bottom-right',
 			theme: normalizedOptions.theme || this.config.theme || 'light',
 			title: normalizedOptions.title,
 			description: normalizedOptions.description,
 			lowLabel: normalizedOptions.lowLabel,
 			highLabel: normalizedOptions.highLabel,
+			ratingScale: normalizedOptions.ratingScale ?? normalizedOptions.scale,
+			showFeedbackInput: normalizedOptions.showFeedbackInput,
+			showSubmitButton: normalizedOptions.showSubmitButton,
+			autoSubmitOnSelect: normalizedOptions.autoSubmitOnSelect,
+			showTitle: normalizedOptions.showTitle,
+			showDescription: normalizedOptions.showDescription,
 			customQuestions: normalizedOptions.customQuestions,
 			pages: normalizedOptions.pages,
 			respondentId: normalizedOptions.respondentId,
@@ -195,7 +212,10 @@ export class FeedbackSDK {
 	}
 
 	_isSurveyEligible(survey = {}) {
-		const shouldShow = this._getSurveyField(survey, ['shouldShow', 'should_show']);
+		const shouldShow = this._getSurveyField(survey, [
+			'shouldShow',
+			'should_show',
+		]);
 		if (typeof shouldShow === 'boolean') {
 			return shouldShow;
 		}
@@ -217,7 +237,10 @@ export class FeedbackSDK {
 			return eligible;
 		}
 
-		const isAnswered = this._getSurveyField(survey, ['isAnswered', 'is_answered']);
+		const isAnswered = this._getSurveyField(survey, [
+			'isAnswered',
+			'is_answered',
+		]);
 		if (typeof isAnswered === 'boolean') {
 			return !isAnswered;
 		}
@@ -252,7 +275,10 @@ export class FeedbackSDK {
 			return eligibilityReason;
 		}
 
-		const isAnswered = this._getSurveyField(survey, ['isAnswered', 'is_answered']);
+		const isAnswered = this._getSurveyField(survey, [
+			'isAnswered',
+			'is_answered',
+		]);
 		if (isAnswered === true) {
 			return 'already_answered';
 		}
@@ -261,17 +287,16 @@ export class FeedbackSDK {
 	}
 
 	_normalizeSurveyConfig(survey = {}) {
-		const firstPage = Array.isArray(survey.pages) && survey.pages.length > 0
-			? survey.pages[0]
-			: null;
+		const firstPage =
+			Array.isArray(survey.pages) && survey.pages.length > 0
+				? survey.pages[0]
+				: null;
 		const ratingConfig = firstPage
 			? firstPage.rating_config || firstPage.ratingConfig || {}
 			: {};
 
 		const inferredType =
-			survey.type ||
-			this._inferSurveyTypeFromPage(firstPage) ||
-			'nps';
+			survey.type || this._inferSurveyTypeFromPage(firstPage) || 'nps';
 
 		return {
 			...survey,
@@ -285,22 +310,27 @@ export class FeedbackSDK {
 				survey.reason ||
 				(survey.eligibility ? survey.eligibility.reason : undefined),
 			title:
-				survey.title ||
-				survey.name ||
-				(firstPage ? firstPage.title : null),
+				survey.title || survey.name || (firstPage ? firstPage.title : null),
 			description:
-				survey.description ||
-				(firstPage ? firstPage.description : null),
+				survey.description || (firstPage ? firstPage.description : null),
 			lowLabel:
-				survey.lowLabel ||
-				survey.low_label ||
-				ratingConfig.low_label ||
-				null,
+				survey.lowLabel || survey.low_label || ratingConfig.low_label || null,
 			highLabel:
 				survey.highLabel ||
 				survey.high_label ||
 				ratingConfig.high_label ||
 				null,
+			ratingScale:
+				survey.ratingScale ?? survey.rating_scale ?? ratingConfig.scale ?? null,
+			showFeedbackInput:
+				survey.showFeedbackInput ?? survey.show_feedback_input ?? null,
+			showSubmitButton:
+				survey.showSubmitButton ?? survey.show_submit_button ?? null,
+			autoSubmitOnSelect:
+				survey.autoSubmitOnSelect ?? survey.auto_submit_on_select ?? null,
+			showTitle: survey.showTitle ?? survey.show_title ?? null,
+			showDescription:
+				survey.showDescription ?? survey.show_description ?? null,
 			customQuestions: survey.customQuestions || survey.questions || [],
 			pages: this._normalizeSurveyPages(survey.pages || []),
 		};
@@ -313,17 +343,17 @@ export class FeedbackSDK {
 
 		return pages
 			.map((page, index) => ({
-			id: page.id || `page_${index}`,
-			type: page.type || 'rating',
-			title: page.title || '',
-			description: page.description || '',
-			required: page.required !== false,
-			position: page.position ?? index,
-			ratingConfig: page.ratingConfig || page.rating_config || null,
-			multipleChoiceConfig:
-				page.multipleChoiceConfig || page.multiple_choice_config || null,
-			linkConfig: page.linkConfig || page.link_config || null,
-			afterThisPage: page.afterThisPage || page.after_this_page || null,
+				id: page.id || `page_${index}`,
+				type: page.type || 'rating',
+				title: page.title || '',
+				description: page.description || '',
+				required: page.required !== false,
+				position: page.position ?? index,
+				ratingConfig: page.ratingConfig || page.rating_config || null,
+				multipleChoiceConfig:
+					page.multipleChoiceConfig || page.multiple_choice_config || null,
+				linkConfig: page.linkConfig || page.link_config || null,
+				afterThisPage: page.afterThisPage || page.after_this_page || null,
 			}))
 			.sort((a, b) => a.position - b.position);
 	}

package/src/styles/changelog.js

@@ -139,8 +139,8 @@ export const changelogStyles = `
   width: 100%;
   max-width: 580px;
   max-height: 90vh;
-  background: #DBEAFE;
-  border-radius: var(--radius-4xl);
+  background: var(--color-primary-light);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transform: scale(0.95) translateY(20px);
@@ -157,28 +157,30 @@ export const changelogStyles = `
   position: absolute;
   top: var(--spacing-4);
   right: var(--spacing-4);
-  background: rgba(255, 255, 255, 0.9);
+  background: none;
   border: none;
-  font-size: 24px;
   cursor: pointer;
   color: var(--color-neutral-500);
   padding: 0;
-  width: 36px;
-  height: 36px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full);
+  border-radius: 8px;
   transition: all var(--transition-base);
   line-height: 1;
   z-index: 10;
-  box-shadow: var(--shadow-md);
 }
 
 .changelog-modal-close:hover {
-  background: var(--color-white);
+  background: var(--color-neutral-100);
   color: var(--color-neutral-900);
-  transform: scale(1.05);
+}
+
+.changelog-modal-close svg {
+  width: 18px;
+  height: 18px;
 }
 
 .changelog-modal-content {
@@ -232,7 +234,7 @@ export const changelogStyles = `
   height: auto;
   display: block;
   object-fit: cover;
-  border-radius: var(--radius-xl);
+  border-radius: 8px;
   border: 2px solid var(--color-primary);
   box-shadow: 0 4px 20px rgba(21, 94, 239, 0.2);
 }
@@ -245,7 +247,7 @@ export const changelogStyles = `
 .changelog-popup-title {
   margin: 0 0 var(--spacing-3);
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-snug);
   color: var(--color-neutral-900);
 }
@@ -263,11 +265,11 @@ export const changelogStyles = `
   justify-content: center;
   padding: var(--spacing-3) var(--spacing-8);
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
   color: var(--color-white);
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
   transition: all var(--transition-base);
   font-family: inherit;
@@ -330,7 +332,7 @@ export const changelogStyles = `
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   padding: var(--spacing-2) var(--spacing-3);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
   font-family: inherit;
 }
@@ -376,7 +378,7 @@ export const changelogStyles = `
   max-width: 460px;
   max-height: 85vh;
   background: var(--color-white);
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   transform: scale(0.95) translateY(20px);
@@ -403,7 +405,7 @@ export const changelogStyles = `
 
 .changelog-list-modal-header h2 {
   margin: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
@@ -413,16 +415,21 @@ export const changelogStyles = `
   border: none;
   cursor: pointer;
   color: var(--color-neutral-500);
-  padding: var(--spacing-1);
-  width: 28px;
-  height: 28px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
 }
 
+.changelog-list-modal-close svg {
+  width: 18px;
+  height: 18px;
+}
+
 .changelog-list-modal-close:hover {
   background: var(--color-neutral-100);
   color: var(--color-neutral-900);
@@ -462,7 +469,7 @@ export const changelogStyles = `
 .changelog-list-item-image {
   width: 100%;
   margin-bottom: var(--spacing-2);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--color-border);
 }
@@ -549,7 +556,7 @@ export const changelogStyles = `
 
   .changelog-modal-container {
     max-width: 100%;
-    border-radius: var(--radius-3xl);
+    border-radius: 10px;
   }
 
   .changelog-popup-image {
@@ -561,7 +568,7 @@ export const changelogStyles = `
   }
 
   .changelog-popup-title {
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-lg);
   }
 
   .changelog-popup-description {
@@ -585,7 +592,7 @@ export const changelogStyles = `
   .changelog-list-modal-container {
     max-width: 100%;
     max-height: 90vh;
-    border-radius: var(--radius-2xl);
+    border-radius: 10px;
   }
 
   .changelog-list-item {

package/src/styles/components.js

@@ -4,7 +4,7 @@ export const componentsStyles = `
   align-items: center;
   justify-content: center;
   gap: var(--spacing-2);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: none;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
@@ -28,7 +28,7 @@ export const componentsStyles = `
   background: var(--color-primary);
   color: var(--color-white);
   border: 1px solid var(--color-primary);
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   height: 44px;
@@ -95,7 +95,7 @@ export const componentsStyles = `
   height: 36px;
   border: none;
   background: none;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   cursor: pointer;
   color: var(--color-text-secondary);
   transition: all var(--transition-base);
@@ -110,7 +110,7 @@ export const componentsStyles = `
 .sdk-input {
   width: 100%;
   height: 44px;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -141,7 +141,7 @@ export const componentsStyles = `
   width: 100%;
   min-height: 120px;
   resize: vertical;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -166,7 +166,7 @@ export const componentsStyles = `
 .sdk-select {
   width: 100%;
   height: 44px;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
   padding: 10px 14px;
   font-size: var(--font-size-md);
@@ -204,7 +204,7 @@ export const componentsStyles = `
 
 .sdk-card {
   background: var(--color-white);
-  border-radius: var(--radius-xl);
+  border-radius: 10px;
   box-shadow: var(--shadow-base);
   overflow: hidden;
 }
@@ -265,7 +265,7 @@ export const componentsStyles = `
   max-width: 580px;
   max-height: 90vh;
   background: var(--color-white);
-  border-radius: var(--radius-4xl);
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: var(--shadow-2xl);
   transform: scale(0.95) translateY(20px);
@@ -301,15 +301,18 @@ export const componentsStyles = `
 .sdk-close-btn {
   background: none;
   border: none;
-  padding: var(--spacing-2);
+  padding: 0;
   cursor: pointer;
   color: var(--color-neutral-500);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  width: 20px;
+  height: 20px;
+  border-radius: 8px;
   transition: all var(--transition-base);
   line-height: 1;
+  flex-shrink: 0;
 }
 
 .sdk-close-btn:hover {
@@ -317,6 +320,11 @@ export const componentsStyles = `
   color: var(--color-neutral-900);
 }
 
+.sdk-close-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
 .sdk-avatar {
   display: flex;
   align-items: center;
@@ -403,7 +411,7 @@ export const componentsStyles = `
   right: var(--spacing-6);
   z-index: var(--z-notification);
   background: var(--color-white);
-  border-radius: var(--radius-xl);
+  border-radius: 10px;
   box-shadow: var(--shadow-lg);
   min-width: 320px;
   animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -493,7 +501,7 @@ export const componentsStyles = `
   
   .sdk-modal-container {
     max-width: 100%;
-    border-radius: var(--spacing-5);
+    border-radius: 10px;
   }
   
   .sdk-notification {

package/src/styles/feedback.js

@@ -141,7 +141,7 @@ export const feedbackStyles = `
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
 }
 
 .feedback-panel-header {

package/src/styles/messenger-components.js

@@ -259,6 +259,17 @@ export const messengerComponentsStyles = `
   display: none;
 }
 
+.messenger-compose-attach {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+
+.messenger-compose-attach svg {
+  width: 20px;
+  height: 20px;
+}
+
 /* ========================================
    TYPING INDICATOR
    ======================================== */
@@ -288,17 +299,9 @@ export const messengerComponentsStyles = `
   animation: messenger-typing-bounce 1.4s infinite ease-in-out;
 }
 
-.messenger-typing-dots span:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.messenger-typing-dots span:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.messenger-typing-dots span:nth-child(3) {
-  animation-delay: 0s;
-}
+.messenger-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.messenger-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+.messenger-typing-dots span:nth-child(3) { animation-delay: 0s; }
 
 .messenger-typing-text {
   font-size: var(--font-size-xs);
@@ -316,12 +319,12 @@ export const messengerComponentsStyles = `
 
 .messenger-nav-tabs {
   display: flex;
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2) 0;
   gap: var(--spacing-1);
 }
 
 .messenger-nav-footer {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: 2px var(--spacing-2) var(--spacing-2);
   text-align: center;
 }
 
@@ -353,12 +356,12 @@ export const messengerComponentsStyles = `
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  padding: var(--spacing-2) var(--spacing-1);
+  gap: 2px;
+  padding: var(--spacing-1) var(--spacing-1);
   background: none;
   border: none;
   cursor: pointer;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   transition: all var(--transition-base);
   position: relative;
 }
@@ -370,10 +373,21 @@ export const messengerComponentsStyles = `
 .messenger-nav-icon {
   color: var(--color-text-secondary);
   transition: color var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.messenger-nav-icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
 }
 
 .messenger-nav-label {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   transition: color var(--transition-base);
@@ -425,7 +439,7 @@ export const messengerComponentsStyles = `
 
 .messenger-prechat-card {
   background: var(--color-white);
-  border-radius: var(--radius-2xl);
+  border-radius: 10px;
   padding: var(--spacing-6);
   width: 100%;
   max-width: 360px;