@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.37-alpha.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 (50) hide show
  1. package/package.json +1 -1
  2. package/translations/en.json +2 -2
  3. package/utils/permissions.js +59 -0
  4. package/utils/tests/permissions.test.js +116 -0
  5. package/v2Components/AccessForbidden/_accessForbidden.scss +14 -0
  6. package/v2Components/AccessForbidden/index.js +5 -3
  7. package/v2Components/AccessForbidden/messages.js +3 -2
  8. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js +15 -108
  9. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +1 -139
  10. package/v2Components/CommonTestAndPreview/index.js +26 -240
  11. package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js +0 -364
  12. package/v2Components/NoPermissionWrapper/_noPermissionWrapper.scss +12 -0
  13. package/v2Components/NoPermissionWrapper/index.js +26 -0
  14. package/v2Containers/App/constants.js +5 -0
  15. package/v2Containers/Assets/Gallery/_gallery.scss +6 -0
  16. package/v2Containers/Assets/Gallery/index.js +34 -10
  17. package/v2Containers/Cap/index.js +5 -2
  18. package/v2Containers/Cap/messages.js +4 -0
  19. package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap +2 -2
  20. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +6 -6
  21. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap +4 -4
  22. package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +32 -32
  23. package/v2Containers/Line/Container/tests/__snapshots__/index.test.js.snap +36 -36
  24. package/v2Containers/Rcs/carouselUtils.js +73 -46
  25. package/v2Containers/Rcs/components/CarouselCard.js +9 -6
  26. package/v2Containers/Rcs/constants.js +7 -2
  27. package/v2Containers/Rcs/index.js +126 -72
  28. package/v2Containers/Rcs/rcsLibraryHydrationUtils.js +43 -5
  29. package/v2Containers/Rcs/tests/CarouselCard.test.js +2 -1
  30. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +118 -118
  31. package/v2Containers/Rcs/tests/carouselUtils.test.js +15 -15
  32. package/v2Containers/Rcs/tests/index.test.js +232 -10
  33. package/v2Containers/Rcs/tests/utils.test.js +17 -0
  34. package/v2Containers/Rcs/utils.js +51 -12
  35. package/v2Containers/SmsTrai/Create/tests/__snapshots__/index.test.js.snap +8 -8
  36. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +18 -18
  37. package/v2Containers/Templates/ChannelTypeIllustration.js +10 -1
  38. package/v2Containers/Templates/_templates.scss +6 -114
  39. package/v2Containers/Templates/index.js +151 -190
  40. package/v2Containers/Templates/tests/ChannelTypeIllustration.test.js +7 -0
  41. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +173 -120
  42. package/v2Containers/TemplatesV2/index.js +16 -5
  43. package/v2Containers/Viber/constants.js +0 -21
  44. package/v2Containers/Viber/index.js +49 -719
  45. package/v2Containers/Viber/index.scss +0 -175
  46. package/v2Containers/Viber/messages.js +0 -121
  47. package/v2Containers/Viber/tests/index.test.js +0 -80
  48. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +268 -268
  49. package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js +0 -132
  50. package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss +0 -131
@@ -106,178 +106,3 @@
106
106
  .test-and-preview-button {
107
107
  margin-left: 6.25rem;
108
108
  }
109
-
110
- .viber-remove-row-btn {
111
- margin-top: $CAP_SPACE_24;
112
- }
113
-
114
- .viber-add-row-btn {
115
- margin-top: $CAP_SPACE_08;
116
- color: $FONT_COLOR_05;
117
- background: transparent;
118
- border: none;
119
- box-shadow: none;
120
-
121
- &:hover,
122
- &:focus,
123
- &:active {
124
- color: $FONT_COLOR_05;
125
- background: transparent;
126
- border: none;
127
- }
128
- }
129
-
130
- .viber-carousel-section {
131
- margin-top: $CAP_SPACE_16;
132
- }
133
-
134
- .viber-carousel-card {
135
- border: 1px solid $CAP_G06;
136
- border-radius: $CAP_SPACE_04;
137
- padding: $CAP_SPACE_16;
138
- margin-bottom: $CAP_SPACE_16;
139
- }
140
-
141
- .viber-carousel-card-selector {
142
- margin-bottom: $CAP_SPACE_16;
143
- border-bottom: 1px solid $CAP_G07;
144
- }
145
-
146
- .viber-carousel-card-selector-btn {
147
- min-width: 2.5rem;
148
- padding: $CAP_SPACE_12 $CAP_SPACE_20;
149
- border: none;
150
- background: transparent;
151
- color: $FONT_COLOR_04;
152
- font-size: $CAP_SPACE_40;
153
- cursor: pointer;
154
- border-bottom: 3px solid transparent;
155
- }
156
-
157
- .viber-carousel-card-selector-btn.active {
158
- color: $FONT_COLOR_01;
159
- border-bottom-color: currentColor;
160
- }
161
-
162
- .viber-carousel-add-btn {
163
- border-left: 1px solid $CAP_G07;
164
- margin-left: $CAP_SPACE_16;
165
- padding-left: $CAP_SPACE_24;
166
- padding-right: $CAP_SPACE_24;
167
- }
168
-
169
- .viber-carousel-image-recommendation {
170
- display: block;
171
- margin: $CAP_SPACE_08 0 $CAP_SPACE_16 0;
172
- color: $FONT_COLOR_03;
173
- }
174
-
175
- .viber-carousel-card-title-header {
176
- align-items: center;
177
- }
178
-
179
- .viber-carousel-button {
180
- border-top: 1px dashed $CAP_G06;
181
- margin-top: $CAP_SPACE_12;
182
- padding-top: $CAP_SPACE_12;
183
- }
184
-
185
- .viber-carousel-button-label {
186
- margin-top: $CAP_SPACE_16;
187
- }
188
-
189
- .viber-carousel-button-title-header {
190
- align-items: center;
191
- }
192
-
193
- .viber-carousel-url-type-select {
194
- .ant-select-selection-selected-value {
195
- max-width: none;
196
- overflow: visible;
197
- text-overflow: unset;
198
- }
199
-
200
- .ant-select-selection__rendered {
201
- margin-right: $CAP_SPACE_24;
202
- }
203
- }
204
-
205
- .viber-carousel-url-type-dropdown.ant-select-dropdown {
206
- min-width: 12rem;
207
- }
208
-
209
- .viber-carousel-url-type-dropdown .ant-select-dropdown-menu-item {
210
- white-space: normal;
211
- word-break: break-word;
212
- height: auto;
213
- line-height: 1.25rem;
214
- padding-top: $CAP_SPACE_06;
215
- padding-bottom: $CAP_SPACE_06;
216
- }
217
-
218
- .viber-carousel-saved-button {
219
- display: flex;
220
- align-items: center;
221
- border: 1px solid $CAP_G06;
222
- border-radius: $CAP_SPACE_04;
223
- padding: $CAP_SPACE_12 $CAP_SPACE_16;
224
- margin-top: $CAP_SPACE_12;
225
- min-height: 2.75rem;
226
- box-sizing: border-box;
227
- }
228
-
229
- .viber-carousel-saved-button-icon {
230
- margin-right: $CAP_SPACE_12;
231
- color: $FONT_COLOR_01;
232
- flex-shrink: 0;
233
- line-height: 1;
234
- }
235
-
236
- .viber-carousel-saved-button-text {
237
- flex: 1;
238
- margin-right: $CAP_SPACE_12;
239
- min-width: 0;
240
- line-height: 1.25rem;
241
- }
242
-
243
- .viber-carousel-saved-button-actions {
244
- display: flex;
245
- align-items: center;
246
- gap: $CAP_SPACE_24;
247
- margin-left: auto;
248
- flex-shrink: 0;
249
- min-height: 1.5rem;
250
-
251
- .button-edit-icon {
252
- margin-left: 0;
253
- display: flex;
254
- align-items: center;
255
- justify-content: center;
256
- line-height: 1;
257
- }
258
- }
259
-
260
- .viber-carousel-delete-icon {
261
- margin-left: 0;
262
- }
263
-
264
- .viber-carousel-delete-icon-btn {
265
- margin-left: $CAP_SPACE_08;
266
- }
267
-
268
- .viber-carousel-tab-label-disabled {
269
- color: $FONT_COLOR_04;
270
- cursor: not-allowed;
271
- }
272
-
273
- .viber-carousel-field-length-top {
274
- display: block;
275
- text-align: right;
276
- margin-top: $CAP_SPACE_04;
277
- }
278
-
279
- .viber-form-error {
280
- color: $CAP_RED;
281
- display: block;
282
- margin-top: $CAP_SPACE_08;
283
- }
@@ -154,10 +154,6 @@ export default defineMessages({
154
154
  id: `${scope}.mediaVideo`,
155
155
  defaultMessage: 'Video',
156
156
  },
157
- mediaCarousel: {
158
- id: `${scope}.mediaCarousel`,
159
- defaultMessage: 'Carousel',
160
- },
161
157
  videoErrorMessage: {
162
158
  id: `${scope}.videoErrorMessage`,
163
159
  defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
@@ -218,121 +214,4 @@ export default defineMessages({
218
214
  id: `${scope}.assetIdMissingError`,
219
215
  defaultMessage: 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.',
220
216
  },
221
- carouselCardsLabel: {
222
- id: `${scope}.carouselCardsLabel`,
223
- defaultMessage: 'Carousel cards',
224
- },
225
- carouselCardHeading: {
226
- id: `${scope}.carouselCardHeading`,
227
- defaultMessage: 'Card {index}',
228
- },
229
- carouselCardTextLabel: {
230
- id: `${scope}.carouselCardTextLabel`,
231
- defaultMessage: 'Title',
232
- },
233
- carouselCardTextPlaceholder: {
234
- id: `${scope}.carouselCardTextPlaceholder`,
235
- defaultMessage: 'Enter title',
236
- },
237
- carouselMediaUrlLabel: {
238
- id: `${scope}.carouselMediaUrlLabel`,
239
- defaultMessage: 'Card media URL',
240
- },
241
- carouselMediaUrlPlaceholder: {
242
- id: `${scope}.carouselMediaUrlPlaceholder`,
243
- defaultMessage: 'https://example.com/image.jpg',
244
- },
245
- carouselImageRecommendation: {
246
- id: `${scope}.carouselImageRecommendation`,
247
- defaultMessage:
248
- 'Supported image types are .jpg, .jpeg, .png. Max size: 10 MB. Recommended resolution: 696 px x 600 px.',
249
- },
250
- carouselButtonTitleLabel: {
251
- id: `${scope}.carouselButtonTitleLabel`,
252
- defaultMessage: 'Button title',
253
- },
254
- carouselButtonTitlePlaceholder: {
255
- id: `${scope}.carouselButtonTitlePlaceholder`,
256
- defaultMessage: 'Enter button title',
257
- },
258
- carouselButtonActionLabel: {
259
- id: `${scope}.carouselButtonActionLabel`,
260
- defaultMessage: 'Button action URL',
261
- },
262
- carouselButtonUrlTypeLabel: {
263
- id: `${scope}.carouselButtonUrlTypeLabel`,
264
- defaultMessage: 'URL type',
265
- },
266
- carouselUrlTypeStatic: {
267
- id: `${scope}.carouselUrlTypeStatic`,
268
- defaultMessage: 'Static',
269
- },
270
- carouselUrlTypeDynamic: {
271
- id: `${scope}.carouselUrlTypeDynamic`,
272
- defaultMessage: 'Dynamic',
273
- },
274
- carouselButtonActionPlaceholder: {
275
- id: `${scope}.carouselButtonActionPlaceholder`,
276
- defaultMessage: 'https://example.com/action',
277
- },
278
- addCarouselCard: {
279
- id: `${scope}.addCarouselCard`,
280
- defaultMessage: 'Add card',
281
- },
282
- removeCarouselCard: {
283
- id: `${scope}.removeCarouselCard`,
284
- defaultMessage: 'Remove card',
285
- },
286
- addCarouselButton: {
287
- id: `${scope}.addCarouselButton`,
288
- defaultMessage: 'Add button',
289
- },
290
- removeCarouselButton: {
291
- id: `${scope}.removeCarouselButton`,
292
- defaultMessage: 'Remove button',
293
- },
294
- carouselCardsLimitError: {
295
- id: `${scope}.carouselCardsLimitError`,
296
- defaultMessage: 'Carousel message requires 2 to 5 cards',
297
- },
298
- carouselCardError: {
299
- id: `${scope}.carouselCardError`,
300
- defaultMessage: 'Each card needs text and a valid media URL',
301
- },
302
- carouselButtonError: {
303
- id: `${scope}.carouselButtonError`,
304
- defaultMessage: 'Each button needs title and a valid action URL',
305
- },
306
- characterLimitExceededError: {
307
- id: `${scope}.characterLimitExceededError`,
308
- defaultMessage: 'Character limit exceeded',
309
- },
310
- textCannotBeEmptyError: {
311
- id: `${scope}.textCannotBeEmptyError`,
312
- defaultMessage: "Text can't be empty",
313
- },
314
- urlCannotBeEmptyError: {
315
- id: `${scope}.urlCannotBeEmptyError`,
316
- defaultMessage: "URL can't be empty",
317
- },
318
- carouselButtonUrlMaxLengthError: {
319
- id: `${scope}.carouselButtonUrlMaxLengthError`,
320
- defaultMessage: 'URL can not exceed 1000 characters',
321
- },
322
- carouselFirstButtonTitleMaxLengthError: {
323
- id: `${scope}.carouselFirstButtonTitleMaxLengthError`,
324
- defaultMessage: 'Button text should not exceed 10',
325
- },
326
- carouselSecondButtonTitleMaxLengthError: {
327
- id: `${scope}.carouselSecondButtonTitleMaxLengthError`,
328
- defaultMessage: 'Button text should not exceed 12',
329
- },
330
- carouselCardTitleMinLengthError: {
331
- id: `${scope}.carouselCardTitleMinLengthError`,
332
- defaultMessage: 'Minimum 2 characters required',
333
- },
334
- carouselCardTitleMaxLengthError: {
335
- id: `${scope}.carouselCardTitleMaxLengthError`,
336
- defaultMessage: 'Title can not be more than 38 characters',
337
- },
338
217
  });
@@ -389,84 +389,4 @@ describe('Test Viber container', () => {
389
389
  const doneBtn = screen.getByRole('button', { name: /done/i });
390
390
  expect(doneBtn).toBeEnabled();
391
391
  });
392
-
393
- it('does not show empty URL error on focus or while typing in carousel button action', async () => {
394
- renderComponent({
395
- actions: mockActions,
396
- globalActions: mockGlobalActions,
397
- templateData: { mode: 'create' },
398
- viber: {
399
- uploadedAssetData: {},
400
- createTemplateInProgress: false,
401
- },
402
- location: {
403
- pathname: '/sms/edit',
404
- query: { type: false, module: 'default' },
405
- search: '',
406
- },
407
- isFullMode: true,
408
- handleClose: jest.fn(),
409
- });
410
-
411
- fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
412
- const actionInput = await screen.findByPlaceholderText('https://example.com/action');
413
-
414
- fireEvent.focus(actionInput);
415
- expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
416
-
417
- fireEvent.change(actionInput, { target: { value: 'https://' } });
418
- expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
419
- });
420
-
421
- it('shows empty URL error on blur when carousel button action is left empty', async () => {
422
- renderComponent({
423
- actions: mockActions,
424
- globalActions: mockGlobalActions,
425
- templateData: { mode: 'create' },
426
- viber: {
427
- uploadedAssetData: {},
428
- createTemplateInProgress: false,
429
- },
430
- location: {
431
- pathname: '/sms/edit',
432
- query: { type: false, module: 'default' },
433
- search: '',
434
- },
435
- isFullMode: true,
436
- handleClose: jest.fn(),
437
- });
438
-
439
- fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
440
- const actionInput = await screen.findByPlaceholderText('https://example.com/action');
441
-
442
- fireEvent.focus(actionInput);
443
- fireEvent.blur(actionInput);
444
-
445
- expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
446
- });
447
-
448
- it('shows empty URL error on save when carousel button action is empty', async () => {
449
- renderComponent({
450
- actions: mockActions,
451
- globalActions: mockGlobalActions,
452
- templateData: { mode: 'create' },
453
- viber: {
454
- uploadedAssetData: {},
455
- createTemplateInProgress: false,
456
- },
457
- location: {
458
- pathname: '/sms/edit',
459
- query: { type: false, module: 'default' },
460
- search: '',
461
- },
462
- isFullMode: true,
463
- handleClose: jest.fn(),
464
- });
465
-
466
- fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
467
- await screen.findByPlaceholderText('https://example.com/action');
468
- fireEvent.click(screen.getByRole('button', { name: /save/i }));
469
-
470
- expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
471
- });
472
392
  });