@capillarytech/creatives-library 9.0.13-alpha.1 → 9.0.13

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.
Files changed (22) hide show
  1. package/package.json +1 -1
  2. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +15 -108
  3. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -141
  4. package/v2Components/CommonTestAndPreview/index.js +26 -244
  5. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +0 -364
  6. package/v2Components/ErrorInfoNote/index.js +1 -1
  7. package/v2Components/ErrorInfoNote/style.scss +3 -0
  8. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +216 -96
  9. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap +37 -17
  10. package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +77 -37
  11. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +530 -250
  12. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +3 -3
  13. package/v2Containers/Templates/_templates.scss +1 -84
  14. package/v2Containers/Templates/index.js +10 -90
  15. package/v2Containers/Viber/constants.js +0 -21
  16. package/v2Containers/Viber/index.js +49 -719
  17. package/v2Containers/Viber/index.scss +0 -175
  18. package/v2Containers/Viber/messages.js +0 -121
  19. package/v2Containers/Viber/tests/index.test.js +0 -80
  20. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +2645 -11346
  21. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +0 -132
  22. package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +0 -132
@@ -4622,7 +4622,7 @@ FREE GIFTS-
4622
4622
  }
4623
4623
  >
4624
4624
  <div
4625
- className="cap-checkbox-wrapper"
4625
+ className="cap-checkbox-v2 cap-checkbox-wrapper"
4626
4626
  >
4627
4627
  <div
4628
4628
  className=""
@@ -16334,7 +16334,7 @@ FREE GIFTS-
16334
16334
  }
16335
16335
  >
16336
16336
  <div
16337
- className="cap-checkbox-wrapper"
16337
+ className="cap-checkbox-v2 cap-checkbox-wrapper"
16338
16338
  >
16339
16339
  <div
16340
16340
  className=""
@@ -28310,7 +28310,7 @@ FREE GIFTS-
28310
28310
  }
28311
28311
  >
28312
28312
  <div
28313
- className="cap-checkbox-wrapper"
28313
+ className="cap-checkbox-v2 cap-checkbox-wrapper"
28314
28314
  >
28315
28315
  <div
28316
28316
  className=""
@@ -153,89 +153,6 @@
153
153
  line-clamp: 3;
154
154
  }
155
155
  }
156
- .viber-carousel-static-content {
157
- width: 100%;
158
- overflow: hidden;
159
- .viber-carousel-static-message-box {
160
- width: 100%;
161
- min-height: 2.25rem;
162
- height: auto;
163
- border-radius: $CAP_SPACE_04;
164
- background: $CAP_WHITE;
165
- margin-bottom: $CAP_SPACE_08;
166
- padding: $CAP_SPACE_04 $CAP_SPACE_08;
167
- display: flex;
168
- align-items: flex-start;
169
- }
170
- .viber-carousel-static-message {
171
- display: -webkit-box;
172
- width: 100%;
173
- color: $CAP_G01;
174
- line-height: 1.3;
175
- overflow: hidden;
176
- text-overflow: ellipsis;
177
- -webkit-line-clamp: 2;
178
- line-clamp: 2;
179
- -webkit-box-orient: vertical;
180
- white-space: normal;
181
- word-break: break-word;
182
- }
183
- .viber-carousel-static-cards {
184
- display: flex;
185
- gap: $CAP_SPACE_08;
186
- overflow: hidden;
187
- }
188
- .viber-carousel-static-card {
189
- flex: 1;
190
- min-width: 0;
191
- background: $CAP_WHITE;
192
- border-radius: $CAP_SPACE_04;
193
- padding: $CAP_SPACE_06;
194
- overflow: hidden;
195
- }
196
- .viber-carousel-static-image,
197
- .viber-carousel-static-image-placeholder {
198
- width: 100%;
199
- height: 5.357rem;
200
- border-radius: $CAP_SPACE_04;
201
- }
202
- .viber-carousel-static-image {
203
- object-fit: cover;
204
- }
205
- .viber-carousel-static-image-placeholder {
206
- background: $CAP_G07;
207
- }
208
- .viber-carousel-static-text {
209
- display: block;
210
- color: $CAP_G01;
211
- margin: $CAP_SPACE_04 0;
212
- line-height: 1.3;
213
- overflow: hidden;
214
- text-overflow: ellipsis;
215
- white-space: normal;
216
- }
217
- .viber-carousel-static-buttons {
218
- display: flex;
219
- flex-direction: column;
220
- gap: $CAP_SPACE_04;
221
- }
222
- .viber-carousel-static-button {
223
- display: block;
224
- min-height: 1.5rem;
225
- border-radius: $CAP_SPACE_12;
226
- background: $CAP_PURPLE01;
227
- color: $CAP_WHITE;
228
- text-align: center;
229
- padding: 0.179rem $CAP_SPACE_08;
230
- white-space: normal;
231
- }
232
- .viber-carousel-static-button-secondary {
233
- color: $CAP_PURPLE01;
234
- background: transparent;
235
- border: none;
236
- box-shadow: none;
237
- }
238
- }
239
156
 
240
157
  }
241
158
 
@@ -577,7 +494,7 @@
577
494
  }
578
495
 
579
496
  .cap-link-v2-suffix {
580
- margin-top: -2px;
497
+ margin-top: $CAP_SPACE_04;
581
498
  }
582
499
  }
583
500
  }
@@ -73,7 +73,6 @@ import * as ebillActions from '../Ebill/actions';
73
73
  import * as emailActions from '../Email/actions';
74
74
  import * as lineActions from '../Line/Container/actions';
75
75
  import * as viberActions from '../Viber/actions';
76
- import { VIBER_MEDIA_TYPES } from '../Viber/constants';
77
76
  import * as facebookActions from '../Facebook/actions';
78
77
  import * as whatsappActions from '../Whatsapp/actions';
79
78
  import * as rcsActions from '../Rcs/actions';
@@ -1378,11 +1377,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1378
1377
  const image = viberContent.image || {};
1379
1378
  const video = viberContent.video || {};
1380
1379
  const button = viberContent.button || {};
1381
- const messageType = viberContent.type || '';
1382
- const cardsRaw = viberContent.cards;
1383
- const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
1384
- const isCarousel =
1385
- messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
1386
1380
 
1387
1381
  const viberPreview = {
1388
1382
  messageContent: text,
@@ -1400,39 +1394,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1400
1394
  };
1401
1395
  }
1402
1396
 
1403
- if (isCarousel) {
1404
- viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
1405
- viberPreview.cards = cards.map((card) => ({
1406
- text: card?.text || '',
1407
- mediaUrl: card?.mediaUrl || '',
1408
- buttons: (card?.buttons || []).map((btn) => ({
1409
- title: btn?.title || '',
1410
- action: btn?.action || '',
1411
- })),
1412
- }));
1413
- viberPreview.showCarouselEditorPreview = true;
1414
- }
1415
-
1416
1397
  // Extract account name
1417
1398
  const accountName = get(template, 'definition.accountName', '');
1418
1399
 
1419
1400
  // Return Viber content object (same as Viber/index.js getTemplateContent)
1420
1401
  return {
1421
1402
  viberPreviewContent: viberPreview,
1422
- accountName: accountName || '',
1423
- brandName: accountName || '',
1424
- messageContent: text,
1425
- ...(isCarousel && {
1426
- type: VIBER_MEDIA_TYPES.CAROUSEL,
1427
- cards: viberPreview.cards,
1428
- }),
1429
- ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
1430
- button: {
1431
- text: button.text,
1432
- url: button.url || viberContent.buttonURL || '',
1433
- },
1434
- }),
1435
- buttonURL: button.url || viberContent.buttonURL || '',
1403
+ accountName: accountName ? [accountName] : [],
1404
+ brandName: accountName ? [accountName] : [],
1436
1405
  };
1437
1406
  }
1438
1407
 
@@ -2445,52 +2414,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
2445
2414
  image = {},
2446
2415
  button = {},
2447
2416
  video = {},
2448
- type = '',
2449
- cards = [],
2450
2417
  } = {},
2451
2418
  } = {},
2452
2419
  } = template.versions.base;
2453
- const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
2454
2420
  templateData.content = text;
2455
- if (isViberCarousel) {
2456
- const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
2457
- templateData.className = 'viber-carousel-static';
2458
- templateData.content = (
2459
- <CapRow className="viber-carousel-static-content">
2460
- <CapRow className="viber-carousel-static-message-box">
2461
- <CapLabel type="label1" className="viber-carousel-static-message">
2462
- {text}
2463
- </CapLabel>
2464
- </CapRow>
2465
- <CapRow className="viber-carousel-static-cards">
2466
- {previewCards.map((card, cardIdx) => (
2467
- <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
2468
- {card?.mediaUrl ? (
2469
- <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
2470
- ) : (
2471
- <CapRow className="viber-carousel-static-image-placeholder" />
2472
- )}
2473
- <CapLabel type="label1" className="viber-carousel-static-text">
2474
- {card?.text}
2475
- </CapLabel>
2476
- <CapRow className="viber-carousel-static-buttons">
2477
- {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
2478
- <CapLabel
2479
- key={`viber-static-btn-${cardIdx}-${btnIdx}`}
2480
- type="label1"
2481
- className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
2482
- >
2483
- {(carouselButton?.title || '').trim()}
2484
- </CapLabel>
2485
- ))}
2486
- </CapRow>
2487
- </CapRow>
2488
- ))}
2489
- </CapRow>
2490
- </CapRow>
2491
- );
2492
- break;
2493
- }
2494
2421
  if (!isEmpty(image)) {
2495
2422
  const { url = '' } = image;
2496
2423
  templateData.url = url;
@@ -5074,22 +5001,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
5074
5001
  ? this.props.Templates.selectedWhatsappAccount.name
5075
5002
  : null
5076
5003
  }
5077
- // Pass formData for tag extraction (EMAIL/SMS use nested formData; VIBER uses content object)
5004
+ // Pass formData for EMAIL and SMS channels for tag extraction
5078
5005
  formData={
5079
- (() => {
5080
- const previewContent = this.state.testAndPreviewContent;
5081
- const channelUpper = this.state.channel?.toUpperCase();
5082
- if (!previewContent || typeof previewContent !== 'object') {
5083
- return null;
5084
- }
5085
- if ([EMAIL, SMS].includes(channelUpper)) {
5086
- return previewContent.formData || null;
5087
- }
5088
- if (channelUpper === VIBER) {
5089
- return previewContent;
5090
- }
5091
- return null;
5092
- })()
5006
+ this.state.testAndPreviewContent &&
5007
+ (this.state.channel?.toUpperCase() === EMAIL ||
5008
+ this.state.channel?.toUpperCase() === SMS) &&
5009
+ typeof this.state.testAndPreviewContent === 'object' &&
5010
+ this.state.testAndPreviewContent?.formData
5011
+ ? this.state.testAndPreviewContent.formData
5012
+ : null
5093
5013
  }
5094
5014
  />
5095
5015
  )}
@@ -47,24 +47,7 @@ export const VIBER_MEDIA_TYPES = {
47
47
  TEXT: 'TEXT',
48
48
  IMAGE: 'IMAGE',
49
49
  VIDEO: 'VIDEO',
50
- CAROUSEL: 'CAROUSEL',
51
50
  };
52
- export const VIBER_CAROUSEL_MIN_CARDS = 2;
53
- export const VIBER_CAROUSEL_MAX_CARDS = 5;
54
- export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
55
- export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
56
- export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
57
- export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
58
- export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
59
- export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
60
- export const STATIC_URL = 'STATIC_URL';
61
- export const DYNAMIC_URL = 'DYNAMIC_URL';
62
- /** Recommended / validated carousel image height in pixels (passed to image upload). */
63
- export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
64
- /** Recommended / validated carousel image width in pixels (passed to image upload). */
65
- export const VIBER_CAROUSEL_IMG_WIDTH = 696;
66
- /** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
67
- export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
68
51
  export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
69
52
  export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
70
53
  export const NONE = 'NONE';
@@ -86,10 +69,6 @@ export const mediaRadioOptions = [
86
69
  value: VIBER_MEDIA_TYPES.VIDEO,
87
70
  label: <FormattedMessage {...messages.mediaVideo} />,
88
71
  },
89
- {
90
- value: VIBER_MEDIA_TYPES.CAROUSEL,
91
- label: <FormattedMessage {...messages.mediaCarousel} />,
92
- },
93
72
  ];
94
73
 
95
74
  export const buttonRadioOptions = [