@capillarytech/creatives-library 9.0.71 → 9.0.73-alpha.sprint-cap-212983.19

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "9.0.71",
4
+ "version": "9.0.73-alpha.sprint-cap-212983.19",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
@@ -1601,13 +1601,6 @@
1601
1601
  padding: $CAP_SPACE_08 $CAP_SPACE_12 0;
1602
1602
  }
1603
1603
 
1604
- .template-listing-header-actions {
1605
- display: flex;
1606
- justify-content: space-between;
1607
- align-items: center;
1608
- gap: $CAP_SPACE_08;
1609
- }
1610
-
1611
1604
  .template-listing-more-btn {
1612
1605
  padding-inline: $CAP_SPACE_20;
1613
1606
  min-width: auto;
@@ -5035,34 +5035,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
5035
5035
  </div>
5036
5036
  )
5037
5037
  }
5038
- <div className="template-listing-header-actions">
5039
- {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
5040
- {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
5041
- <CapDropdown
5042
- trigger={['click']}
5043
- overlay={
5044
- <CapMenu>
5045
- <CapMenu.Item
5046
- key="archived"
5047
- onClick={() => this.setArchivedMode(true)}
5048
- >
5049
- <FormattedMessage {...messages.archivedTemplates} />
5050
- </CapMenu.Item>
5051
- </CapMenu>
5052
- }
5053
- placement="bottomRight"
5054
- >
5055
- <CapButton type="flat" className="template-listing-more-btn">
5056
- <CapIcon type="more" />
5057
- </CapButton>
5058
- </CapDropdown>
5059
- )}
5060
- </div>
5061
5038
  </div>
5062
5039
  <div>
5063
- <div className="action-container__create-row">
5040
+ <CapRow type="flex" align="middle" justify="space-between" gap={8} className="action-container__create-row">
5064
5041
  {
5065
- isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && (
5042
+ isfilterContentVisisble && !_renderHasSelection && !isWechatEmbedded && !this.props.isDltFromRcs && !this.props.isSmsFallbackFromRcs && (
5066
5043
  this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
5067
5044
  <CapTooltip title={whatsappCountExceedText}>
5068
5045
  <div className="button-disabled-tooltip-wrapper">
@@ -5072,7 +5049,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
5072
5049
  ) : createButton
5073
5050
  )
5074
5051
  }
5075
- </div>
5052
+ <CapRow type="flex" align="middle" gap={8} className="template-listing-header-actions">
5053
+ {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
5054
+ {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
5055
+ <CapDropdown
5056
+ trigger={['click']}
5057
+ overlay={
5058
+ <CapMenu>
5059
+ <CapMenu.Item
5060
+ key="archived"
5061
+ onClick={() => this.setArchivedMode(true)}
5062
+ >
5063
+ <FormattedMessage {...messages.archivedTemplates} />
5064
+ </CapMenu.Item>
5065
+ </CapMenu>
5066
+ }
5067
+ placement="bottomRight"
5068
+ >
5069
+ <CapButton type="flat" className="template-listing-more-btn">
5070
+ <CapIcon type="more" />
5071
+ </CapButton>
5072
+ </CapDropdown>
5073
+ )}
5074
+ </CapRow>
5075
+ </CapRow>
5076
5076
  </div>
5077
5077
  </div>
5078
5078
  ));
@@ -228,13 +228,14 @@ exports[`Test Templates container Should render sms illustration when no templat
228
228
  />
229
229
  <Component />
230
230
  <Component />
231
- <div
232
- className="template-listing-header-actions"
233
- />
234
231
  </div>
235
232
  <div>
236
- <div
233
+ <CapRow
234
+ align="middle"
237
235
  className="action-container__create-row"
236
+ gap={8}
237
+ justify="space-between"
238
+ type="flex"
238
239
  >
239
240
  <NoPermissionWrapper
240
241
  allowed={false}
@@ -248,7 +249,13 @@ exports[`Test Templates container Should render sms illustration when no templat
248
249
  Create new
249
250
  </CapButton>
250
251
  </NoPermissionWrapper>
251
- </div>
252
+ <CapRow
253
+ align="middle"
254
+ className="template-listing-header-actions"
255
+ gap={8}
256
+ type="flex"
257
+ />
258
+ </CapRow>
252
259
  </div>
253
260
  </div>
254
261
  </div>
@@ -500,13 +507,14 @@ exports[`Test Templates container Should render temlates when whatsapp templates
500
507
  </CapRow>
501
508
  <Component />
502
509
  <Component />
503
- <div
504
- className="template-listing-header-actions"
505
- />
506
510
  </div>
507
511
  <div>
508
- <div
512
+ <CapRow
513
+ align="middle"
509
514
  className="action-container__create-row"
515
+ gap={8}
516
+ justify="space-between"
517
+ type="flex"
510
518
  >
511
519
  <NoPermissionWrapper
512
520
  allowed={false}
@@ -523,7 +531,13 @@ exports[`Test Templates container Should render temlates when whatsapp templates
523
531
  title="Create new template"
524
532
  />
525
533
  </NoPermissionWrapper>
526
- </div>
534
+ <CapRow
535
+ align="middle"
536
+ className="template-listing-header-actions"
537
+ gap={8}
538
+ type="flex"
539
+ />
540
+ </CapRow>
527
541
  </div>
528
542
  </div>
529
543
  </div>
@@ -811,44 +825,14 @@ exports[`Test Templates container Should render temlates when whatsapp templates
811
825
  </CapRow>
812
826
  <Component />
813
827
  <Component />
814
- <div
815
- className="template-listing-header-actions"
816
- >
817
- <CapDropdownComponent
818
- overlay={
819
- <CapMenuComponent>
820
- <withItemHOC
821
- onClick={[Function]}
822
- >
823
- <FormattedMessage
824
- defaultMessage="Archived templates"
825
- id="creatives.containersV2.Templates.archivedTemplates"
826
- values={Object {}}
827
- />
828
- </withItemHOC>
829
- </CapMenuComponent>
830
- }
831
- placement="bottomRight"
832
- trigger={
833
- Array [
834
- "click",
835
- ]
836
- }
837
- >
838
- <CapButton
839
- className="template-listing-more-btn"
840
- type="flat"
841
- >
842
- <CapIcon
843
- type="more"
844
- />
845
- </CapButton>
846
- </CapDropdownComponent>
847
- </div>
848
828
  </div>
849
829
  <div>
850
- <div
830
+ <CapRow
831
+ align="middle"
851
832
  className="action-container__create-row"
833
+ gap={8}
834
+ justify="space-between"
835
+ type="flex"
852
836
  >
853
837
  <NoPermissionWrapper
854
838
  allowed={false}
@@ -862,7 +846,44 @@ exports[`Test Templates container Should render temlates when whatsapp templates
862
846
  Create new
863
847
  </CapButton>
864
848
  </NoPermissionWrapper>
865
- </div>
849
+ <CapRow
850
+ align="middle"
851
+ className="template-listing-header-actions"
852
+ gap={8}
853
+ type="flex"
854
+ >
855
+ <CapDropdownComponent
856
+ overlay={
857
+ <CapMenuComponent>
858
+ <withItemHOC
859
+ onClick={[Function]}
860
+ >
861
+ <FormattedMessage
862
+ defaultMessage="Archived templates"
863
+ id="creatives.containersV2.Templates.archivedTemplates"
864
+ values={Object {}}
865
+ />
866
+ </withItemHOC>
867
+ </CapMenuComponent>
868
+ }
869
+ placement="bottomRight"
870
+ trigger={
871
+ Array [
872
+ "click",
873
+ ]
874
+ }
875
+ >
876
+ <CapButton
877
+ className="template-listing-more-btn"
878
+ type="flat"
879
+ >
880
+ <CapIcon
881
+ type="more"
882
+ />
883
+ </CapButton>
884
+ </CapDropdownComponent>
885
+ </CapRow>
886
+ </CapRow>
866
887
  </div>
867
888
  </div>
868
889
  </div>
@@ -1256,44 +1277,14 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1256
1277
  </CapRow>
1257
1278
  <Component />
1258
1279
  <Component />
1259
- <div
1260
- className="template-listing-header-actions"
1261
- >
1262
- <CapDropdownComponent
1263
- overlay={
1264
- <CapMenuComponent>
1265
- <withItemHOC
1266
- onClick={[Function]}
1267
- >
1268
- <FormattedMessage
1269
- defaultMessage="Archived templates"
1270
- id="creatives.containersV2.Templates.archivedTemplates"
1271
- values={Object {}}
1272
- />
1273
- </withItemHOC>
1274
- </CapMenuComponent>
1275
- }
1276
- placement="bottomRight"
1277
- trigger={
1278
- Array [
1279
- "click",
1280
- ]
1281
- }
1282
- >
1283
- <CapButton
1284
- className="template-listing-more-btn"
1285
- type="flat"
1286
- >
1287
- <CapIcon
1288
- type="more"
1289
- />
1290
- </CapButton>
1291
- </CapDropdownComponent>
1292
- </div>
1293
1280
  </div>
1294
1281
  <div>
1295
- <div
1282
+ <CapRow
1283
+ align="middle"
1296
1284
  className="action-container__create-row"
1285
+ gap={8}
1286
+ justify="space-between"
1287
+ type="flex"
1297
1288
  >
1298
1289
  <NoPermissionWrapper
1299
1290
  allowed={false}
@@ -1307,7 +1298,44 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1307
1298
  Create new
1308
1299
  </CapButton>
1309
1300
  </NoPermissionWrapper>
1310
- </div>
1301
+ <CapRow
1302
+ align="middle"
1303
+ className="template-listing-header-actions"
1304
+ gap={8}
1305
+ type="flex"
1306
+ >
1307
+ <CapDropdownComponent
1308
+ overlay={
1309
+ <CapMenuComponent>
1310
+ <withItemHOC
1311
+ onClick={[Function]}
1312
+ >
1313
+ <FormattedMessage
1314
+ defaultMessage="Archived templates"
1315
+ id="creatives.containersV2.Templates.archivedTemplates"
1316
+ values={Object {}}
1317
+ />
1318
+ </withItemHOC>
1319
+ </CapMenuComponent>
1320
+ }
1321
+ placement="bottomRight"
1322
+ trigger={
1323
+ Array [
1324
+ "click",
1325
+ ]
1326
+ }
1327
+ >
1328
+ <CapButton
1329
+ className="template-listing-more-btn"
1330
+ type="flat"
1331
+ >
1332
+ <CapIcon
1333
+ type="more"
1334
+ />
1335
+ </CapButton>
1336
+ </CapDropdownComponent>
1337
+ </CapRow>
1338
+ </CapRow>
1311
1339
  </div>
1312
1340
  </div>
1313
1341
  </div>
@@ -1774,44 +1802,14 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1774
1802
  </CapRow>
1775
1803
  <Component />
1776
1804
  <Component />
1777
- <div
1778
- className="template-listing-header-actions"
1779
- >
1780
- <CapDropdownComponent
1781
- overlay={
1782
- <CapMenuComponent>
1783
- <withItemHOC
1784
- onClick={[Function]}
1785
- >
1786
- <FormattedMessage
1787
- defaultMessage="Archived templates"
1788
- id="creatives.containersV2.Templates.archivedTemplates"
1789
- values={Object {}}
1790
- />
1791
- </withItemHOC>
1792
- </CapMenuComponent>
1793
- }
1794
- placement="bottomRight"
1795
- trigger={
1796
- Array [
1797
- "click",
1798
- ]
1799
- }
1800
- >
1801
- <CapButton
1802
- className="template-listing-more-btn"
1803
- type="flat"
1804
- >
1805
- <CapIcon
1806
- type="more"
1807
- />
1808
- </CapButton>
1809
- </CapDropdownComponent>
1810
- </div>
1811
1805
  </div>
1812
1806
  <div>
1813
- <div
1807
+ <CapRow
1808
+ align="middle"
1814
1809
  className="action-container__create-row"
1810
+ gap={8}
1811
+ justify="space-between"
1812
+ type="flex"
1815
1813
  >
1816
1814
  <NoPermissionWrapper
1817
1815
  allowed={false}
@@ -1825,7 +1823,44 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1825
1823
  Create new
1826
1824
  </CapButton>
1827
1825
  </NoPermissionWrapper>
1828
- </div>
1826
+ <CapRow
1827
+ align="middle"
1828
+ className="template-listing-header-actions"
1829
+ gap={8}
1830
+ type="flex"
1831
+ >
1832
+ <CapDropdownComponent
1833
+ overlay={
1834
+ <CapMenuComponent>
1835
+ <withItemHOC
1836
+ onClick={[Function]}
1837
+ >
1838
+ <FormattedMessage
1839
+ defaultMessage="Archived templates"
1840
+ id="creatives.containersV2.Templates.archivedTemplates"
1841
+ values={Object {}}
1842
+ />
1843
+ </withItemHOC>
1844
+ </CapMenuComponent>
1845
+ }
1846
+ placement="bottomRight"
1847
+ trigger={
1848
+ Array [
1849
+ "click",
1850
+ ]
1851
+ }
1852
+ >
1853
+ <CapButton
1854
+ className="template-listing-more-btn"
1855
+ type="flat"
1856
+ >
1857
+ <CapIcon
1858
+ type="more"
1859
+ />
1860
+ </CapButton>
1861
+ </CapDropdownComponent>
1862
+ </CapRow>
1863
+ </CapRow>
1829
1864
  </div>
1830
1865
  </div>
1831
1866
  </div>
@@ -2292,44 +2327,14 @@ exports[`Test Templates container Test max templates warning 1`] = `
2292
2327
  </CapRow>
2293
2328
  <Component />
2294
2329
  <Component />
2295
- <div
2296
- className="template-listing-header-actions"
2297
- >
2298
- <CapDropdownComponent
2299
- overlay={
2300
- <CapMenuComponent>
2301
- <withItemHOC
2302
- onClick={[Function]}
2303
- >
2304
- <FormattedMessage
2305
- defaultMessage="Archived templates"
2306
- id="creatives.containersV2.Templates.archivedTemplates"
2307
- values={Object {}}
2308
- />
2309
- </withItemHOC>
2310
- </CapMenuComponent>
2311
- }
2312
- placement="bottomRight"
2313
- trigger={
2314
- Array [
2315
- "click",
2316
- ]
2317
- }
2318
- >
2319
- <CapButton
2320
- className="template-listing-more-btn"
2321
- type="flat"
2322
- >
2323
- <CapIcon
2324
- type="more"
2325
- />
2326
- </CapButton>
2327
- </CapDropdownComponent>
2328
- </div>
2329
2330
  </div>
2330
2331
  <div>
2331
- <div
2332
+ <CapRow
2333
+ align="middle"
2332
2334
  className="action-container__create-row"
2335
+ gap={8}
2336
+ justify="space-between"
2337
+ type="flex"
2333
2338
  >
2334
2339
  <NoPermissionWrapper
2335
2340
  allowed={false}
@@ -2343,7 +2348,44 @@ exports[`Test Templates container Test max templates warning 1`] = `
2343
2348
  Create new
2344
2349
  </CapButton>
2345
2350
  </NoPermissionWrapper>
2346
- </div>
2351
+ <CapRow
2352
+ align="middle"
2353
+ className="template-listing-header-actions"
2354
+ gap={8}
2355
+ type="flex"
2356
+ >
2357
+ <CapDropdownComponent
2358
+ overlay={
2359
+ <CapMenuComponent>
2360
+ <withItemHOC
2361
+ onClick={[Function]}
2362
+ >
2363
+ <FormattedMessage
2364
+ defaultMessage="Archived templates"
2365
+ id="creatives.containersV2.Templates.archivedTemplates"
2366
+ values={Object {}}
2367
+ />
2368
+ </withItemHOC>
2369
+ </CapMenuComponent>
2370
+ }
2371
+ placement="bottomRight"
2372
+ trigger={
2373
+ Array [
2374
+ "click",
2375
+ ]
2376
+ }
2377
+ >
2378
+ <CapButton
2379
+ className="template-listing-more-btn"
2380
+ type="flat"
2381
+ >
2382
+ <CapIcon
2383
+ type="more"
2384
+ />
2385
+ </CapButton>
2386
+ </CapDropdownComponent>
2387
+ </CapRow>
2388
+ </CapRow>
2347
2389
  </div>
2348
2390
  </div>
2349
2391
  </div>
@@ -2753,13 +2795,14 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2753
2795
  </CapRow>
2754
2796
  <Component />
2755
2797
  <Component />
2756
- <div
2757
- className="template-listing-header-actions"
2758
- />
2759
2798
  </div>
2760
2799
  <div>
2761
- <div
2800
+ <CapRow
2801
+ align="middle"
2762
2802
  className="action-container__create-row"
2803
+ gap={8}
2804
+ justify="space-between"
2805
+ type="flex"
2763
2806
  >
2764
2807
  <NoPermissionWrapper
2765
2808
  allowed={false}
@@ -2776,7 +2819,13 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
2776
2819
  title="Create new template"
2777
2820
  />
2778
2821
  </NoPermissionWrapper>
2779
- </div>
2822
+ <CapRow
2823
+ align="middle"
2824
+ className="template-listing-header-actions"
2825
+ gap={8}
2826
+ type="flex"
2827
+ />
2828
+ </CapRow>
2780
2829
  </div>
2781
2830
  </div>
2782
2831
  </div>
@@ -3032,13 +3081,14 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
3032
3081
  </CapRow>
3033
3082
  <Component />
3034
3083
  <Component />
3035
- <div
3036
- className="template-listing-header-actions"
3037
- />
3038
3084
  </div>
3039
3085
  <div>
3040
- <div
3086
+ <CapRow
3087
+ align="middle"
3041
3088
  className="action-container__create-row"
3089
+ gap={8}
3090
+ justify="space-between"
3091
+ type="flex"
3042
3092
  >
3043
3093
  <NoPermissionWrapper
3044
3094
  allowed={false}
@@ -3055,7 +3105,13 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
3055
3105
  title="Create new template"
3056
3106
  />
3057
3107
  </NoPermissionWrapper>
3058
- </div>
3108
+ <CapRow
3109
+ align="middle"
3110
+ className="template-listing-header-actions"
3111
+ gap={8}
3112
+ type="flex"
3113
+ />
3114
+ </CapRow>
3059
3115
  </div>
3060
3116
  </div>
3061
3117
  </div>
@@ -3286,13 +3342,14 @@ exports[`Test Templates container Test removing single filter 1`] = `
3286
3342
  </CapRow>
3287
3343
  <Component />
3288
3344
  <Component />
3289
- <div
3290
- className="template-listing-header-actions"
3291
- />
3292
3345
  </div>
3293
3346
  <div>
3294
- <div
3347
+ <CapRow
3348
+ align="middle"
3295
3349
  className="action-container__create-row"
3350
+ gap={8}
3351
+ justify="space-between"
3352
+ type="flex"
3296
3353
  >
3297
3354
  <NoPermissionWrapper
3298
3355
  allowed={false}
@@ -3309,7 +3366,13 @@ exports[`Test Templates container Test removing single filter 1`] = `
3309
3366
  title="Create new template"
3310
3367
  />
3311
3368
  </NoPermissionWrapper>
3312
- </div>
3369
+ <CapRow
3370
+ align="middle"
3371
+ className="template-listing-header-actions"
3372
+ gap={8}
3373
+ type="flex"
3374
+ />
3375
+ </CapRow>
3313
3376
  </div>
3314
3377
  </div>
3315
3378
  </div>
@@ -131,6 +131,27 @@ describe('Templates archival (enabled by default)', () => {
131
131
  });
132
132
  });
133
133
 
134
+ describe('listing toolbar', () => {
135
+ it('shows the create button, followed by the archived-templates kebab, when nothing is selected', () => {
136
+ renderTemplates({ templatesProps: { selectedTemplateIds: [] } });
137
+ const createRow = renderedComponent.find('.action-container__create-row');
138
+ expect(createRow.find('.create-new-email')).toHaveLength(1);
139
+ expect(createRow.find('.template-listing-more-btn')).toHaveLength(1);
140
+ expect(renderedComponent.find('.action-container__toolbar-row .template-listing-more-btn')).toHaveLength(0);
141
+ });
142
+
143
+ it('hides the create button and the kebab while templates are selected for archival', () => {
144
+ renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
145
+ expect(renderedComponent.find('.create-new-email')).toHaveLength(0);
146
+ expect(renderedComponent.find('.template-listing-more-btn')).toHaveLength(0);
147
+ });
148
+
149
+ it('hides the create button while templates are selected for unarchival', () => {
150
+ renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2), isArchivedMode: true } });
151
+ expect(renderedComponent.find('.create-new-email')).toHaveLength(0);
152
+ });
153
+ });
154
+
134
155
  describe('handleBulkArchiveAction', () => {
135
156
  it('opens the confirm modal and bulk archives the selected ids on confirm', () => {
136
157
  renderTemplates();
@@ -12,6 +12,11 @@
12
12
  margin-bottom: $CAP_SPACE_06;
13
13
  }
14
14
  .cap-custom-image-upload {
15
+ padding-top: $CAP_SPACE_20;
16
+ form {
17
+ padding: 0;
18
+ }
19
+
15
20
  .dragger-button.re-upload {
16
21
  top: -11rem;
17
22
  position: relative;
@@ -131,6 +136,32 @@
131
136
  margin-top: $CAP_SPACE_16;
132
137
  }
133
138
 
139
+ .viber-carousel-tab {
140
+ .ant-tabs-nav .ant-tabs-nav-wrap {
141
+ flex: none;
142
+ }
143
+
144
+ .ant-tabs-nav-list .ant-tabs-tab {
145
+ padding: $CAP_SPACE_08;
146
+ justify-content: center;
147
+ font-size: $FONT_SIZE_L;
148
+
149
+ + .ant-tabs-tab {
150
+ margin-left: 0;
151
+ }
152
+ }
153
+
154
+ .ant-tabs-extra-content {
155
+ display: flex;
156
+ align-items: center;
157
+
158
+ .ant-divider-vertical {
159
+ height: $CAP_SPACE_24;
160
+ margin: 0 $CAP_SPACE_12;
161
+ }
162
+ }
163
+ }
164
+
134
165
  .viber-carousel-card {
135
166
  border: 1px solid $CAP_G06;
136
167
  border-radius: $CAP_SPACE_04;