@product7/product7-js 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1886,7 +1886,12 @@
1886
1886
  .feedback-widget,
1887
1887
  .messenger-widget,
1888
1888
  .changelog-widget,
1889
- .feedback-survey {
1889
+ .feedback-survey,
1890
+ .feedback-panel,
1891
+ .feedback-modal,
1892
+ .changelog-modal,
1893
+ .changelog-list-modal,
1894
+ .product7-notification {
1890
1895
  box-sizing: border-box;
1891
1896
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
1892
1897
  }
@@ -1902,7 +1907,19 @@
1902
1907
  .changelog-widget *::after,
1903
1908
  .feedback-survey *,
1904
1909
  .feedback-survey *::before,
1905
- .feedback-survey *::after {
1910
+ .feedback-survey *::after,
1911
+ .feedback-panel *,
1912
+ .feedback-panel *::before,
1913
+ .feedback-panel *::after,
1914
+ .feedback-modal *,
1915
+ .feedback-modal *::before,
1916
+ .feedback-modal *::after,
1917
+ .changelog-modal *,
1918
+ .changelog-modal *::before,
1919
+ .changelog-modal *::after,
1920
+ .changelog-list-modal *,
1921
+ .changelog-list-modal *::before,
1922
+ .changelog-list-modal *::after {
1906
1923
  box-sizing: border-box;
1907
1924
  }
1908
1925
 
@@ -2203,6 +2220,10 @@
2203
2220
  font-size: var(--font-size-md);
2204
2221
  line-height: var(--line-height-loose);
2205
2222
  color: var(--color-text-secondary);
2223
+ display: -webkit-box;
2224
+ -webkit-line-clamp: 2;
2225
+ -webkit-box-orient: vertical;
2226
+ overflow: hidden;
2206
2227
  }
2207
2228
 
2208
2229
  .changelog-popup-btn {
@@ -3643,16 +3664,12 @@
3643
3664
  }
3644
3665
 
3645
3666
  .messenger-message-sender {
3646
- font-size: var(--font-size-xs);
3647
- font-weight: var(--font-weight-medium);
3648
- color: var(--msg-text-secondary);
3649
- margin-bottom: 2px;
3650
- margin-left: 0;
3667
+ display: none;
3651
3668
  }
3652
3669
 
3653
3670
  .messenger-message-bubble {
3654
- padding: var(--spacing-3) var(--spacing-4);
3655
- border-radius: 1.25rem;
3671
+ padding: 7px 13px;
3672
+ border-radius: 1.125rem;
3656
3673
  word-wrap: break-word;
3657
3674
  max-width: 100%;
3658
3675
  }
@@ -3672,6 +3689,7 @@
3672
3689
 
3673
3690
  .messenger-message-content {
3674
3691
  font-size: var(--font-size-base);
3692
+ font-weight: var(--font-weight-medium);
3675
3693
  line-height: var(--line-height-relaxed);
3676
3694
  }
3677
3695
 
@@ -3846,7 +3864,7 @@
3846
3864
 
3847
3865
  .messenger-chat-empty h3 {
3848
3866
  margin: 0 0 var(--spacing-2);
3849
- font-size: var(--font-size-xl);
3867
+ font-size: var(--font-size-base);
3850
3868
  font-weight: var(--font-weight-semibold);
3851
3869
  color: var(--msg-text);
3852
3870
  }
@@ -4166,7 +4184,7 @@
4166
4184
 
4167
4185
  .messenger-prechat-title {
4168
4186
  margin: 0 0 var(--spacing-2);
4169
- font-size: var(--font-size-lg);
4187
+ font-size: var(--font-size-base);
4170
4188
  font-weight: var(--font-weight-semibold);
4171
4189
  color: var(--msg-text);
4172
4190
  }
@@ -4563,11 +4581,11 @@
4563
4581
  EMPTY STATE
4564
4582
  ======================================== */
4565
4583
  .messenger-empty-state {
4584
+ flex: 1;
4566
4585
  display: flex;
4567
4586
  flex-direction: column;
4568
4587
  align-items: center;
4569
4588
  justify-content: center;
4570
- height: 100%;
4571
4589
  text-align: center;
4572
4590
  padding: var(--spacing-10);
4573
4591
  }
@@ -4926,9 +4944,14 @@
4926
4944
 
4927
4945
  .messenger-home-changelog-card-desc {
4928
4946
  margin: 0;
4929
- font-size: var(--font-size-base);
4947
+ font-size: var(--font-size-sm);
4948
+ font-weight: var(--font-weight-normal);
4930
4949
  color: var(--msg-text-secondary);
4931
4950
  line-height: var(--line-height-relaxed);
4951
+ display: -webkit-box;
4952
+ -webkit-line-clamp: 3;
4953
+ -webkit-box-orient: vertical;
4954
+ overflow: hidden;
4932
4955
  }
4933
4956
 
4934
4957
  .messenger-home-availability,
@@ -7410,9 +7433,8 @@
7410
7433
  const date = changelog.published_at
7411
7434
  ? this._formatDate(changelog.published_at)
7412
7435
  : '';
7413
- const description = this._truncateDescription(
7414
- changelog.excerpt || changelog.description,
7415
- 100
7436
+ const description = this._stripHtml(
7437
+ changelog.excerpt || changelog.description
7416
7438
  );
7417
7439
  const labelsHTML =
7418
7440
  changelog.labels && changelog.labels.length > 0
@@ -7481,9 +7503,8 @@
7481
7503
  const hasImage = changelog.cover_image || changelog.image;
7482
7504
  const imageUrl = changelog.cover_image || changelog.image;
7483
7505
  const hasMultiple = this.changelogs.length > 1;
7484
- const description = this._truncateDescription(
7485
- changelog.excerpt || changelog.description,
7486
- 160
7506
+ const description = this._stripHtml(
7507
+ changelog.excerpt || changelog.description
7487
7508
  );
7488
7509
 
7489
7510
  content.innerHTML = `
@@ -8987,6 +9008,13 @@
8987
9008
  this._attachChangelogEvents();
8988
9009
  }
8989
9010
 
9011
+ _stripHtml(html) {
9012
+ if (!html) return '';
9013
+ const tmp = document.createElement('div');
9014
+ tmp.innerHTML = html;
9015
+ return (tmp.textContent || tmp.innerText || '').trim();
9016
+ }
9017
+
8990
9018
  _renderChangelogCard(item) {
8991
9019
  const dateStr = this._formatDate(item.publishedAt || item.date);
8992
9020
  const labelsHtml =
@@ -9008,7 +9036,7 @@
9008
9036
  ${labelsHtml}
9009
9037
  </div>
9010
9038
  <h3 class="messenger-changelog-title">${item.title}</h3>
9011
- ${item.description ? `<p class="messenger-changelog-description">${item.description}</p>` : ''}
9039
+ ${item.description ? `<p class="messenger-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
9012
9040
  </div>
9013
9041
  ${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" /></div>` : ''}
9014
9042
  <iconify-icon icon="ph:caret-right" class="messenger-changelog-arrow" width="16" height="16"></iconify-icon>
@@ -10355,7 +10383,7 @@
10355
10383
  }
10356
10384
  <div class="messenger-home-changelog-card-content">
10357
10385
  <h4 class="messenger-home-changelog-card-title">${item.title}</h4>
10358
- <p class="messenger-home-changelog-card-desc">${item.description || ''}</p>
10386
+ <p class="messenger-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
10359
10387
  </div>
10360
10388
  </div>
10361
10389
  `
@@ -10369,6 +10397,13 @@
10369
10397
  `;
10370
10398
  }
10371
10399
 
10400
+ _stripHtml(html) {
10401
+ if (!html) return '';
10402
+ const tmp = document.createElement('div');
10403
+ tmp.innerHTML = html;
10404
+ return (tmp.textContent || tmp.innerText || '').trim();
10405
+ }
10406
+
10372
10407
  _formatDate(dateString) {
10373
10408
  if (!dateString) return '';
10374
10409
  const date = new Date(dateString);
@@ -13123,7 +13158,9 @@
13123
13158
  includeEligibility: true,
13124
13159
  includeIneligible: true,
13125
13160
  });
13126
- const surveyConfig = surveys.find((s) => s.id === surveyId);
13161
+ const surveyConfig = surveys.find(
13162
+ (s) => s.surveyId === surveyId || s.id === surveyId
13163
+ );
13127
13164
 
13128
13165
  if (!surveyConfig) {
13129
13166
  throw new SDKError(
@@ -13803,26 +13840,6 @@
13803
13840
  }
13804
13841
  };
13805
13842
 
13806
- function injectStyles() {
13807
- if (typeof document === 'undefined') return;
13808
-
13809
- if (!document.querySelector('#product7-styles')) {
13810
- const style = document.createElement('style');
13811
- style.id = 'product7-styles';
13812
- style.textContent = CSS_STYLES;
13813
- document.head.appendChild(style);
13814
- }
13815
-
13816
- if (!document.querySelector('#product7-iconify')) {
13817
- const script = document.createElement('script');
13818
- script.id = 'product7-iconify';
13819
- script.src =
13820
- 'https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js';
13821
- script.async = true;
13822
- document.head.appendChild(script);
13823
- }
13824
- }
13825
-
13826
13843
  // --- Identify: transform flat user data into internal format ---
13827
13844
 
13828
13845
  function transformIdentifyData(data) {
@@ -13909,7 +13926,6 @@
13909
13926
  if (Product7._sdk) return Product7._sdk;
13910
13927
 
13911
13928
  if (options.organization) {
13912
- injectStyles();
13913
13929
  const config = cleanUndefined({
13914
13930
  workspace: options.organization,
13915
13931
  debug: options.debug,
@@ -13948,8 +13964,6 @@
13948
13964
 
13949
13965
  async identify(data = {}, callback) {
13950
13966
  try {
13951
- injectStyles();
13952
-
13953
13967
  const transformed = transformIdentifyData(data);
13954
13968
  Product7._organization = transformed.workspace;
13955
13969
 
@@ -14035,8 +14049,6 @@
14035
14049
  return null;
14036
14050
  }
14037
14051
 
14038
- injectStyles();
14039
-
14040
14052
  const widgetOptions = cleanUndefined({
14041
14053
  displayMode: options.displayMode || 'panel',
14042
14054
  theme: options.theme || sdk.config.theme || 'light',
@@ -14143,8 +14155,6 @@
14143
14155
  return null;
14144
14156
  }
14145
14157
 
14146
- injectStyles();
14147
-
14148
14158
  const widgetOptions = cleanUndefined({
14149
14159
  theme: options.theme || sdk.config.theme || 'light',
14150
14160
  primaryColor: options.primaryColor,
@@ -14248,8 +14258,6 @@
14248
14258
  return null;
14249
14259
  }
14250
14260
 
14251
- injectStyles();
14252
-
14253
14261
  // placement → position
14254
14262
  let position = 'right';
14255
14263
  if (options.placement === 'right') {