@product7/product7-js 0.3.2 → 0.3.5

package/src/widgets/SurveyWidget.js

@@ -92,6 +92,7 @@ export class SurveyWidget extends BaseWidget {
 
 		SurveyWidget.removeDanglingElements();
 		this._renderSurvey();
+		this.state.isOpen = true;
 		this.surveyState.isVisible = true;
 		this.sdk.eventBus.emit('survey:shown', {
 			widget: this,
@@ -101,6 +102,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	hide() {
+		this.state.isOpen = false;
 		this._closeSurvey();
 		return this;
 	}
@@ -175,6 +177,7 @@ export class SurveyWidget extends BaseWidget {
 		this._attachSurveyEvents();
 
 		requestAnimationFrame(() => {
+			if (!this.surveyElement) return;
 			this.surveyElement.style.opacity = '1';
 			this.surveyElement.style.transform =
 				this.surveyOptions.position === 'center'
@@ -1312,6 +1315,7 @@ export class SurveyWidget extends BaseWidget {
 	}
 
 	_closeSurvey(resetState = true, immediate = false) {
+		this.state.isOpen = false;
 		if (this._escapeHandler) {
 			document.removeEventListener('keydown', this._escapeHandler);
 			this._escapeHandler = null;
@@ -1374,6 +1378,22 @@ export class SurveyWidget extends BaseWidget {
 		this.sdk.eventBus.emit('survey:closed', { widget: this });
 	}
 
+	open() {
+		return this.show();
+	}
+
+	close() {
+		return this.hide();
+	}
+
+	toggle() {
+		if (this.surveyState.isVisible) {
+			return this.hide();
+		}
+
+		return this.show();
+	}
+
 	destroy() {
 		this._closeSurvey(true, true);
 		super.destroy();

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

@@ -21,7 +21,9 @@ export class ChatView {
 
 		this._unsubscribe = this.state.subscribe((type, data) => {
 			if (type === 'connectionChange') {
-				const banner = this.element?.querySelector('.messenger-connection-banner');
+				const banner = this.element?.querySelector(
+					'.messenger-connection-banner'
+				);
 				if (banner) {
 					banner.style.display = data.connected ? 'none' : 'flex';
 				}
@@ -71,9 +73,10 @@ export class ChatView {
 				? this._renderEmptyState(isNewConversation)
 				: this._renderGroupedMessages(messages);
 
-		const defaultPlaceholder = this.options.composePlaceholder || 'Write a message...';
+		const defaultPlaceholder =
+			this.options.composePlaceholder || 'Write a message...';
 		const placeholder = isNewConversation
-			? (this.options.composePlaceholder || 'Start typing your message...')
+			? this.options.composePlaceholder || 'Start typing your message...'
 			: isClosed
 				? 'Conversation closed'
 				: defaultPlaceholder;
@@ -94,7 +97,7 @@ export class ChatView {
 				</div>
 				<div class="messenger-chat-header-info">
 					<span class="messenger-chat-title">${this._escapeHtml(teamName)}</span>
-					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : (this.state.responseTime || 'Typically replies within minutes')}</span>
+					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
 				</div>
 				<div class="messenger-chat-header-actions">
 					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
@@ -211,7 +214,9 @@ export class ChatView {
 		const messageClass = isOwn
 			? 'messenger-message-own'
 			: 'messenger-message-received';
-		const timeStr = isLastInGroup ? this._formatMessageTime(message.timestamp) : '';
+		const timeStr = isLastInGroup
+			? this._formatMessageTime(message.timestamp)
+			: '';
 		const attachmentsHtml = this._renderMessageAttachments(message.attachments);
 		const isOptimistic = message.isOptimistic;
 
@@ -225,9 +230,10 @@ export class ChatView {
 		if (isOwn) {
 			const sentIndicator = isLastInGroup
 				? `<div class="messenger-message-meta messenger-message-meta-own">
-						${isOptimistic
-							? `<span class="messenger-message-sent-status">Sending…</span>`
-							: `<span class="messenger-message-sent-status">Sent</span>`
+						${
+							isOptimistic
+								? `<span class="messenger-message-sent-status">Sending…</span>`
+								: `<span class="messenger-message-sent-status">Sent</span>`
 						}
 						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
 					</div>`

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

@@ -137,7 +137,8 @@ export class HomeView {
 		const title = conversation.title || teamName;
 		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
 		const preview = conversation.lastMessage
-			? conversation.lastMessage.substring(0, 48) + (conversation.lastMessage.length > 48 ? '...' : '')
+			? conversation.lastMessage.substring(0, 48) +
+				(conversation.lastMessage.length > 48 ? '...' : '')
 			: '';
 		const hasUnread = conversation.unread > 0;
 
@@ -253,7 +254,9 @@ export class HomeView {
 	}
 
 	_attachEvents() {
-		const recentCard = this.element.querySelector('.messenger-home-recent-card');
+		const recentCard = this.element.querySelector(
+			'.messenger-home-recent-card'
+		);
 		if (recentCard) {
 			recentCard.addEventListener('click', () => {
 				const convId = recentCard.dataset.conversationId;

package/types/index.d.ts

@@ -19,11 +19,13 @@ declare module '@product7/product7-js' {
 		user_id?: string;
 		email?: string;
 		name?: string;
+		profile_picture?: string;
 		custom_fields?: Record<string, any>;
 		company?: {
 			id?: string;
 			name?: string;
 			monthly_spend?: number;
+			custom_fields?: Record<string, any>;
 		};
 	}
 
@@ -44,11 +46,15 @@ declare module '@product7/product7-js' {
 		triggerText?: string;
 		label?: string;
 		text?: string;
+		headless?: boolean;
 		customStyles?: Record<string, string>;
 		trigger?: boolean | string | Element;
 	}
 
+	export interface FeedbackWidgetOptions extends ButtonWidgetOptions {}
+
 	export interface WidgetConfigMap {
+		feedback?: Partial<FeedbackWidgetOptions> | Record<string, any>;
 		button?: Partial<ButtonWidgetOptions> | Record<string, any>;
 		survey?: Partial<SurveyWidgetOptions> | Record<string, any>;
 		messenger?: Partial<MessengerWidgetOptions> | Record<string, any>;
@@ -63,6 +69,9 @@ declare module '@product7/product7-js' {
 		destroy(): void;
 		show(): this;
 		hide(): this;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		openPanel(): void;
 		closePanel(): void;
 		openModal(): void;
@@ -73,6 +82,8 @@ declare module '@product7/product7-js' {
 		): void;
 	}
 
+	export interface FeedbackWidget extends ButtonWidget {}
+
 	export class Product7 {
 		constructor(config: FeedbackConfig);
 		static create(config: FeedbackConfig): Product7;
@@ -84,7 +95,21 @@ declare module '@product7/product7-js' {
 			status?: boolean;
 			message?: string | null;
 			configVersion?: number | null;
+			identified?: boolean;
+		}>;
+		identify(metadata: Metadata): Promise<{
+			identified: boolean;
+			metadata: Metadata | null;
+			response: any;
 		}>;
+		createFeedbackWidget(options?: FeedbackWidgetOptions): FeedbackWidget;
+		createMessengerWidget(options?: MessengerWidgetOptions): MessengerWidget;
+		createChangelogWidget(options?: ChangelogWidgetOptions): ChangelogWidget;
+		createSurveyWidget(options?: SurveyWidgetOptions): SurveyWidget;
+		createWidget(
+			type: 'feedback',
+			options?: FeedbackWidgetOptions
+		): FeedbackWidget;
 		createWidget(type: 'button', options?: ButtonWidgetOptions): ButtonWidget;
 		createWidget(type: 'survey', options?: SurveyWidgetOptions): SurveyWidget;
 		createWidget(
@@ -182,8 +207,12 @@ declare module '@product7/product7-js' {
 	}
 
 	export interface SurveyWidget {
+		mount(container?: string | HTMLElement): this;
 		show(): this;
 		hide(): this;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		destroy(): void;
 		surveyOptions: SurveyWidgetOptions;
 		surveyState: {
@@ -235,6 +264,7 @@ declare module '@product7/product7-js' {
 		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 		theme?: 'light' | 'dark';
+		headless?: boolean;
 		showBackdrop?: boolean;
 		triggerText?: string;
 		showBadge?: boolean;
@@ -251,6 +281,9 @@ declare module '@product7/product7-js' {
 		type: 'changelog';
 		mount(container?: string | HTMLElement): this;
 		destroy(): void;
+		open(): this;
+		close(): this;
+		toggle(): this;
 		openModal(): void;
 		closeModal(): void;
 		openSidebar(): void;
@@ -266,6 +299,7 @@ declare module '@product7/product7-js' {
 		enabled?: boolean;
 		position?: 'bottom-right' | 'bottom-left';
 		theme?: 'light' | 'dark';
+		headless?: boolean;
 		teamName?: string;
 		teamAvatars?: string[];
 		greetingMessage?: string;