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

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 (59) hide show
  1. package/constants/unified.js +3 -0
  2. package/package.json +1 -1
  3. package/utils/common.js +8 -0
  4. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +15 -108
  5. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -141
  6. package/v2Components/CommonTestAndPreview/index.js +26 -244
  7. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +0 -364
  8. package/v2Components/FormBuilder/Classic.js +4487 -0
  9. package/v2Components/FormBuilder/Functional/FormBuilderShell.js +369 -0
  10. package/v2Components/FormBuilder/Functional/channels/registry.js +17 -0
  11. package/v2Components/FormBuilder/Functional/channels/sms/buildSubmitPayload.js +9 -0
  12. package/v2Components/FormBuilder/Functional/channels/sms/config.js +30 -0
  13. package/v2Components/FormBuilder/Functional/channels/sms/getEditorErrorDescriptor.js +46 -0
  14. package/v2Components/FormBuilder/Functional/channels/sms/getLiquidContent.js +13 -0
  15. package/v2Components/FormBuilder/Functional/channels/sms/index.js +22 -0
  16. package/v2Components/FormBuilder/Functional/channels/sms/tests/getEditorErrorDescriptor.test.js +52 -0
  17. package/v2Components/FormBuilder/Functional/channels/sms/tests/getLiquidContent.test.js +25 -0
  18. package/v2Components/FormBuilder/Functional/channels/sms/tests/validate.test.js +87 -0
  19. package/v2Components/FormBuilder/Functional/channels/sms/validate.js +89 -0
  20. package/v2Components/FormBuilder/Functional/constants.js +42 -0
  21. package/v2Components/FormBuilder/Functional/core/schema/fieldRegistry.js +38 -0
  22. package/v2Components/FormBuilder/Functional/core/schema/initializeFormState.js +85 -0
  23. package/v2Components/FormBuilder/Functional/core/store/formReducer.js +81 -0
  24. package/v2Components/FormBuilder/Functional/core/store/selectors.js +30 -0
  25. package/v2Components/FormBuilder/Functional/core/store/toLegacyFormData.js +91 -0
  26. package/v2Components/FormBuilder/Functional/index.js +26 -0
  27. package/v2Components/FormBuilder/Functional/layout/FieldSlot.js +59 -0
  28. package/v2Components/FormBuilder/Functional/layout/SchemaForm.js +32 -0
  29. package/v2Components/FormBuilder/Functional/layout/Section.js +116 -0
  30. package/v2Components/FormBuilder/Functional/renderers/smsRenderers.js +258 -0
  31. package/v2Components/FormBuilder/Functional/tests/channelRegistry.test.js +21 -0
  32. package/v2Components/FormBuilder/Functional/tests/fieldRegistry.test.js +65 -0
  33. package/v2Components/FormBuilder/Functional/tests/fieldSlot.test.js +97 -0
  34. package/v2Components/FormBuilder/Functional/tests/fixtures/smsParityCases.js +192 -0
  35. package/v2Components/FormBuilder/Functional/tests/formReducer.test.js +129 -0
  36. package/v2Components/FormBuilder/Functional/tests/initializeFormState.test.js +132 -0
  37. package/v2Components/FormBuilder/Functional/tests/schemaForm.test.js +40 -0
  38. package/v2Components/FormBuilder/Functional/tests/section.test.js +99 -0
  39. package/v2Components/FormBuilder/Functional/tests/selectors.test.js +67 -0
  40. package/v2Components/FormBuilder/Functional/tests/sms.crossFlowParity.test.js +155 -0
  41. package/v2Components/FormBuilder/Functional/tests/sms.liquid.test.js +172 -0
  42. package/v2Components/FormBuilder/Functional/tests/sms.rollout.test.js +122 -0
  43. package/v2Components/FormBuilder/Functional/tests/sms.shell.parity.test.js +329 -0
  44. package/v2Components/FormBuilder/Functional/tests/smsRenderers.test.js +160 -0
  45. package/v2Components/FormBuilder/Functional/tests/toLegacyFormData.test.js +95 -0
  46. package/v2Components/FormBuilder/_formBuilder.scss +5 -0
  47. package/v2Components/FormBuilder/index.js +41 -4479
  48. package/v2Components/FormBuilder/tests/__snapshots__/sms.characterization.test.js.snap +114 -0
  49. package/v2Components/FormBuilder/tests/entryGate.test.js +106 -0
  50. package/v2Components/FormBuilder/tests/sms.characterization.test.js +336 -0
  51. package/v2Containers/Templates/_templates.scss +0 -83
  52. package/v2Containers/Templates/index.js +10 -90
  53. package/v2Containers/Viber/constants.js +0 -21
  54. package/v2Containers/Viber/index.js +49 -719
  55. package/v2Containers/Viber/index.scss +0 -175
  56. package/v2Containers/Viber/messages.js +0 -121
  57. package/v2Containers/Viber/tests/index.test.js +0 -80
  58. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +0 -132
  59. package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +0 -132
@@ -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 = [