@capillarytech/creatives-library 7.12.37 → 7.12.38

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 (11) hide show
  1. package/package.json +1 -1
  2. package/v2Components/CapWhatsappCTA/constants.js +4 -0
  3. package/v2Components/CapWhatsappCTA/index.js +36 -5
  4. package/v2Components/CapWhatsappCTA/messages.js +8 -0
  5. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +1 -1
  6. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +40 -40
  7. package/v2Containers/Whatsapp/index.js +3 -2
  8. package/v2Containers/Whatsapp/index.scss +4 -4
  9. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +168 -112
  10. package/v2Containers/Whatsapp/tests/__snapshots__/utils.test.js.snap +2 -2
  11. package/v2Containers/Whatsapp/utils.js +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.12.37",
4
+ "version": "7.12.38",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/v2Components/CapWhatsappCTA/constants.js CHANGED
@@ -9,12 +9,16 @@ export const WEBSITE = 'WEBSITE';
9
9
 
10
10
  export const CTA_OPTIONS = [
11
11
  {
12
+ key: PHONE_NUMBER,
12
13
  value: PHONE_NUMBER,
13
14
  label: <FormattedMessage {...messages.ctaPhoneNo} />,
15
+ tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltip} />,
14
16
  },
15
17
  {
18
+ key: WEBSITE,
16
19
  value: WEBSITE,
17
20
  label: <FormattedMessage {...messages.ctaWebsite} />,
21
+ tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltip} />,
18
22
  },
19
23
  ];
20
24
 
package/v2Components/CapWhatsappCTA/index.js CHANGED
@@ -14,6 +14,8 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
14
14
  import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
15
15
  import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
16
16
  import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
17
+ import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
18
+ import { CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
17
19
  import globalMessages from '../../v2Containers/Cap/messages';
18
20
  import whatsappMsg from '../../v2Containers/Whatsapp/messages';
19
21
  import messages from './messages';
@@ -68,13 +70,34 @@ export const CapWhatsappCTA = (props) => {
68
70
  updateHandler(clonedCta, index);
69
71
  };
70
72
 
71
- const filteredCtaoptions = () => {
72
- if (ctaData[0].isSaved) {
73
- return CTA_OPTIONS.filter((i) => i.value !== ctaData[0].ctaType);
73
+ const renderCtaOptions = (label, tooltipLabel, isDisabled) => {
74
+ if (isDisabled) {
75
+ return (
76
+ <CapRow>
77
+ <CapColumn span={23}>{label}</CapColumn>
78
+ <CapColumn span={1}>
79
+ <CapTooltipWithInfo
80
+ autoAdjustOverflow
81
+ placement="right"
82
+ title={tooltipLabel}
83
+ />
84
+ </CapColumn>
85
+ </CapRow>
86
+ );
74
87
  }
75
- return CTA_OPTIONS;
88
+ return label;
76
89
  };
77
90
 
91
+ const ctaOptions = CTA_OPTIONS.map((option) => {
92
+ const { value, label, tooltipLabel } = option;
93
+ const isDisabled = ctaData.length === 2 && ctaData[0].ctaType === value;
94
+ return {
95
+ value,
96
+ label: renderCtaOptions(label, tooltipLabel, isDisabled),
97
+ disabled: isDisabled,
98
+ };
99
+ });
100
+
78
101
  const addCta = () => {
79
102
  const clonedCta = cloneDeep(ctaData);
80
103
  clonedCta.push(cloneDeep(INITIAL_CTA_DATA[0]));
@@ -200,7 +223,7 @@ export const CapWhatsappCTA = (props) => {
200
223
  </CapHeading>
201
224
  <CapSelect
202
225
  id="whatsapp-cta-type"
203
- options={filteredCtaoptions()}
226
+ options={ctaOptions || []}
204
227
  onChange={(value) => onCtaTypeChange(value, index)}
205
228
  value={ctaType}
206
229
  />
@@ -209,6 +232,14 @@ export const CapWhatsappCTA = (props) => {
209
232
  {/* Button text */}
210
233
  <CapHeading type="h4" className="cta-label">
211
234
  {formatMessage(messages.ctaButtonText)}
235
+ <CapTooltipWithInfo
236
+ infoIconProps={{
237
+ style: { marginLeft: CAP_SPACE_04 },
238
+ }}
239
+ autoAdjustOverflow
240
+ placement="right"
241
+ title={formatMessage(messages.ctaButtonTextTooltip)}
242
+ />
212
243
  </CapHeading>
213
244
  <CapInput
214
245
  id={index}
package/v2Components/CapWhatsappCTA/messages.js CHANGED
@@ -62,4 +62,12 @@ export default defineMessages({
62
62
  defaultMessage:
63
63
  'Please save the first button before proceeding to create second button',
64
64
  },
65
+ ctaButtonTextTooltip: {
66
+ id: `${prefix}.ctaButtonTextTooltip`,
67
+ defaultMessage: 'Needs to be updated',
68
+ },
69
+ ctaOptionDisabledTooltip: {
70
+ id: `${prefix}.ctaOptionDisabledTooltip`,
71
+ defaultMessage: 'This type of button can only be added once',
72
+ },
65
73
  });
package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap CHANGED
@@ -204,7 +204,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
204
204
 
205
205
  </CapLabel>
206
206
  <CapLabel
207
- type="label11"
207
+ type="label5"
208
208
  >
209
209
  Click {{unsubscribe}} to unsubscribe
210
210
  </CapLabel>
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -529,7 +529,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
529
529
  C
530
530
  </CapLabel>
531
531
  <CapLabel
532
- type="label1"
532
+ type="label9"
533
533
  >
534
534
  lick {{unsubscribe}} to unsubscribe'
535
535
  </CapLabel>
@@ -617,7 +617,7 @@ Click {{1}} to unsubscribe'",
617
617
  C
618
618
  </CapLabel>
619
619
  <CapLabel
620
- type="label1"
620
+ type="label9"
621
621
  >
622
622
  lick {{unsubscribe}} to unsubscribe'
623
623
  </CapLabel>
@@ -705,7 +705,7 @@ Click {{1}} to unsubscribe'",
705
705
  C
706
706
  </CapLabel>
707
707
  <CapLabel
708
- type="label1"
708
+ type="label9"
709
709
  >
710
710
  lick {{unsubscribe}} to unsubscribe'
711
711
  </CapLabel>
@@ -793,7 +793,7 @@ Click {{1}} to unsubscribe'",
793
793
  C
794
794
  </CapLabel>
795
795
  <CapLabel
796
- type="label1"
796
+ type="label9"
797
797
  >
798
798
  lick {{unsubscribe}} to unsubscribe'
799
799
  </CapLabel>
@@ -881,7 +881,7 @@ Click {{1}} to unsubscribe'",
881
881
  C
882
882
  </CapLabel>
883
883
  <CapLabel
884
- type="label1"
884
+ type="label9"
885
885
  >
886
886
  lick {{unsubscribe}} to unsubscribe'
887
887
  </CapLabel>
@@ -976,7 +976,7 @@ Terms and conditions apply
976
976
  C
977
977
  </CapLabel>
978
978
  <CapLabel
979
- type="label1"
979
+ type="label9"
980
980
  >
981
981
  lick {{unsubscribe}} to unsubscribe'
982
982
  </CapLabel>
@@ -1070,7 +1070,7 @@ Click {{6}} to unsubscribe'",
1070
1070
  C
1071
1071
  </CapLabel>
1072
1072
  <CapLabel
1073
- type="label1"
1073
+ type="label9"
1074
1074
  >
1075
1075
  lick {{unsubscribe}} to unsubscribe'
1076
1076
  </CapLabel>
@@ -1158,7 +1158,7 @@ Click {{5}} to unsubscribe'",
1158
1158
  C
1159
1159
  </CapLabel>
1160
1160
  <CapLabel
1161
- type="label1"
1161
+ type="label9"
1162
1162
  >
1163
1163
  lick {{unsubscribe}} to unsubscribe'
1164
1164
  </CapLabel>
@@ -1247,7 +1247,7 @@ T&C
1247
1247
  C
1248
1248
  </CapLabel>
1249
1249
  <CapLabel
1250
- type="label1"
1250
+ type="label9"
1251
1251
  >
1252
1252
  lick {{unsubscribe}} to unsubscribe'
1253
1253
  </CapLabel>
@@ -1651,7 +1651,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
1651
1651
  C
1652
1652
  </CapLabel>
1653
1653
  <CapLabel
1654
- type="label1"
1654
+ type="label9"
1655
1655
  >
1656
1656
  lick {{unsubscribe}} to unsubscribe'
1657
1657
  </CapLabel>
@@ -1739,7 +1739,7 @@ Click {{1}} to unsubscribe'",
1739
1739
  C
1740
1740
  </CapLabel>
1741
1741
  <CapLabel
1742
- type="label1"
1742
+ type="label9"
1743
1743
  >
1744
1744
  lick {{unsubscribe}} to unsubscribe'
1745
1745
  </CapLabel>
@@ -1827,7 +1827,7 @@ Click {{1}} to unsubscribe'",
1827
1827
  C
1828
1828
  </CapLabel>
1829
1829
  <CapLabel
1830
- type="label1"
1830
+ type="label9"
1831
1831
  >
1832
1832
  lick {{unsubscribe}} to unsubscribe'
1833
1833
  </CapLabel>
@@ -1915,7 +1915,7 @@ Click {{1}} to unsubscribe'",
1915
1915
  C
1916
1916
  </CapLabel>
1917
1917
  <CapLabel
1918
- type="label1"
1918
+ type="label9"
1919
1919
  >
1920
1920
  lick {{unsubscribe}} to unsubscribe'
1921
1921
  </CapLabel>
@@ -2003,7 +2003,7 @@ Click {{1}} to unsubscribe'",
2003
2003
  C
2004
2004
  </CapLabel>
2005
2005
  <CapLabel
2006
- type="label1"
2006
+ type="label9"
2007
2007
  >
2008
2008
  lick {{unsubscribe}} to unsubscribe'
2009
2009
  </CapLabel>
@@ -2098,7 +2098,7 @@ Terms and conditions apply
2098
2098
  C
2099
2099
  </CapLabel>
2100
2100
  <CapLabel
2101
- type="label1"
2101
+ type="label9"
2102
2102
  >
2103
2103
  lick {{unsubscribe}} to unsubscribe'
2104
2104
  </CapLabel>
@@ -2192,7 +2192,7 @@ Click {{6}} to unsubscribe'",
2192
2192
  C
2193
2193
  </CapLabel>
2194
2194
  <CapLabel
2195
- type="label1"
2195
+ type="label9"
2196
2196
  >
2197
2197
  lick {{unsubscribe}} to unsubscribe'
2198
2198
  </CapLabel>
@@ -2280,7 +2280,7 @@ Click {{5}} to unsubscribe'",
2280
2280
  C
2281
2281
  </CapLabel>
2282
2282
  <CapLabel
2283
- type="label1"
2283
+ type="label9"
2284
2284
  >
2285
2285
  lick {{unsubscribe}} to unsubscribe'
2286
2286
  </CapLabel>
@@ -2369,7 +2369,7 @@ T&C
2369
2369
  C
2370
2370
  </CapLabel>
2371
2371
  <CapLabel
2372
- type="label1"
2372
+ type="label9"
2373
2373
  >
2374
2374
  lick {{unsubscribe}} to unsubscribe'
2375
2375
  </CapLabel>
@@ -2773,7 +2773,7 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
2773
2773
  C
2774
2774
  </CapLabel>
2775
2775
  <CapLabel
2776
- type="label1"
2776
+ type="label9"
2777
2777
  >
2778
2778
  lick {{unsubscribe}} to unsubscribe'
2779
2779
  </CapLabel>
@@ -3158,7 +3158,7 @@ exports[`Test Templates container Test max templates warning 1`] = `
3158
3158
  C
3159
3159
  </CapLabel>
3160
3160
  <CapLabel
3161
- type="label1"
3161
+ type="label9"
3162
3162
  >
3163
3163
  lick {{unsubscribe}} to unsubscribe'
3164
3164
  </CapLabel>
@@ -3535,7 +3535,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
3535
3535
  C
3536
3536
  </CapLabel>
3537
3537
  <CapLabel
3538
- type="label1"
3538
+ type="label9"
3539
3539
  >
3540
3540
  lick {{unsubscribe}} to unsubscribe'
3541
3541
  </CapLabel>
@@ -3623,7 +3623,7 @@ Click {{1}} to unsubscribe'",
3623
3623
  C
3624
3624
  </CapLabel>
3625
3625
  <CapLabel
3626
- type="label1"
3626
+ type="label9"
3627
3627
  >
3628
3628
  lick {{unsubscribe}} to unsubscribe'
3629
3629
  </CapLabel>
@@ -3971,7 +3971,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
3971
3971
  C
3972
3972
  </CapLabel>
3973
3973
  <CapLabel
3974
- type="label1"
3974
+ type="label9"
3975
3975
  >
3976
3976
  lick {{unsubscribe}} to unsubscribe'
3977
3977
  </CapLabel>
@@ -4059,7 +4059,7 @@ Click {{1}} to unsubscribe'",
4059
4059
  C
4060
4060
  </CapLabel>
4061
4061
  <CapLabel
4062
- type="label1"
4062
+ type="label9"
4063
4063
  >
4064
4064
  lick {{unsubscribe}} to unsubscribe'
4065
4065
  </CapLabel>
@@ -4147,7 +4147,7 @@ Click {{1}} to unsubscribe'",
4147
4147
  C
4148
4148
  </CapLabel>
4149
4149
  <CapLabel
4150
- type="label1"
4150
+ type="label9"
4151
4151
  >
4152
4152
  lick {{unsubscribe}} to unsubscribe'
4153
4153
  </CapLabel>
@@ -4235,7 +4235,7 @@ Click {{1}} to unsubscribe'",
4235
4235
  C
4236
4236
  </CapLabel>
4237
4237
  <CapLabel
4238
- type="label1"
4238
+ type="label9"
4239
4239
  >
4240
4240
  lick {{unsubscribe}} to unsubscribe'
4241
4241
  </CapLabel>
@@ -4323,7 +4323,7 @@ Click {{1}} to unsubscribe'",
4323
4323
  C
4324
4324
  </CapLabel>
4325
4325
  <CapLabel
4326
- type="label1"
4326
+ type="label9"
4327
4327
  >
4328
4328
  lick {{unsubscribe}} to unsubscribe'
4329
4329
  </CapLabel>
@@ -4418,7 +4418,7 @@ Terms and conditions apply
4418
4418
  C
4419
4419
  </CapLabel>
4420
4420
  <CapLabel
4421
- type="label1"
4421
+ type="label9"
4422
4422
  >
4423
4423
  lick {{unsubscribe}} to unsubscribe'
4424
4424
  </CapLabel>
@@ -4512,7 +4512,7 @@ Click {{6}} to unsubscribe'",
4512
4512
  C
4513
4513
  </CapLabel>
4514
4514
  <CapLabel
4515
- type="label1"
4515
+ type="label9"
4516
4516
  >
4517
4517
  lick {{unsubscribe}} to unsubscribe'
4518
4518
  </CapLabel>
@@ -4600,7 +4600,7 @@ Click {{5}} to unsubscribe'",
4600
4600
  C
4601
4601
  </CapLabel>
4602
4602
  <CapLabel
4603
- type="label1"
4603
+ type="label9"
4604
4604
  >
4605
4605
  lick {{unsubscribe}} to unsubscribe'
4606
4606
  </CapLabel>
@@ -4689,7 +4689,7 @@ T&C
4689
4689
  C
4690
4690
  </CapLabel>
4691
4691
  <CapLabel
4692
- type="label1"
4692
+ type="label9"
4693
4693
  >
4694
4694
  lick {{unsubscribe}} to unsubscribe'
4695
4695
  </CapLabel>
@@ -5037,7 +5037,7 @@ exports[`Test Templates container Test removing single filter 1`] = `
5037
5037
  C
5038
5038
  </CapLabel>
5039
5039
  <CapLabel
5040
- type="label1"
5040
+ type="label9"
5041
5041
  >
5042
5042
  lick {{unsubscribe}} to unsubscribe'
5043
5043
  </CapLabel>
@@ -5125,7 +5125,7 @@ Click {{1}} to unsubscribe'",
5125
5125
  C
5126
5126
  </CapLabel>
5127
5127
  <CapLabel
5128
- type="label1"
5128
+ type="label9"
5129
5129
  >
5130
5130
  lick {{unsubscribe}} to unsubscribe'
5131
5131
  </CapLabel>
@@ -5213,7 +5213,7 @@ Click {{1}} to unsubscribe'",
5213
5213
  C
5214
5214
  </CapLabel>
5215
5215
  <CapLabel
5216
- type="label1"
5216
+ type="label9"
5217
5217
  >
5218
5218
  lick {{unsubscribe}} to unsubscribe'
5219
5219
  </CapLabel>
@@ -5301,7 +5301,7 @@ Click {{1}} to unsubscribe'",
5301
5301
  C
5302
5302
  </CapLabel>
5303
5303
  <CapLabel
5304
- type="label1"
5304
+ type="label9"
5305
5305
  >
5306
5306
  lick {{unsubscribe}} to unsubscribe'
5307
5307
  </CapLabel>
@@ -5389,7 +5389,7 @@ Click {{1}} to unsubscribe'",
5389
5389
  C
5390
5390
  </CapLabel>
5391
5391
  <CapLabel
5392
- type="label1"
5392
+ type="label9"
5393
5393
  >
5394
5394
  lick {{unsubscribe}} to unsubscribe'
5395
5395
  </CapLabel>
@@ -5484,7 +5484,7 @@ Terms and conditions apply
5484
5484
  C
5485
5485
  </CapLabel>
5486
5486
  <CapLabel
5487
- type="label1"
5487
+ type="label9"
5488
5488
  >
5489
5489
  lick {{unsubscribe}} to unsubscribe'
5490
5490
  </CapLabel>
@@ -5578,7 +5578,7 @@ Click {{6}} to unsubscribe'",
5578
5578
  C
5579
5579
  </CapLabel>
5580
5580
  <CapLabel
5581
- type="label1"
5581
+ type="label9"
5582
5582
  >
5583
5583
  lick {{unsubscribe}} to unsubscribe'
5584
5584
  </CapLabel>
@@ -5666,7 +5666,7 @@ Click {{5}} to unsubscribe'",
5666
5666
  C
5667
5667
  </CapLabel>
5668
5668
  <CapLabel
5669
- type="label1"
5669
+ type="label9"
5670
5670
  >
5671
5671
  lick {{unsubscribe}} to unsubscribe'
5672
5672
  </CapLabel>
@@ -5755,7 +5755,7 @@ T&C
5755
5755
  C
5756
5756
  </CapLabel>
5757
5757
  <CapLabel
5758
- type="label1"
5758
+ type="label9"
5759
5759
  >
5760
5760
  lick {{unsubscribe}} to unsubscribe'
5761
5761
  </CapLabel>
package/v2Containers/Whatsapp/index.js CHANGED
@@ -499,6 +499,7 @@ export const Whatsapp = (props) => {
499
499
  style={{
500
500
  marginTop:
501
501
  buttonType === WHATSAPP_BUTTON_TYPES.CTA ? '0px' : '24px',
502
+ opacity: isEditFlow ? '' : '0.4',
502
503
  }}
503
504
  >
504
505
  <CapHeading type="h4">
@@ -1112,7 +1113,7 @@ export const Whatsapp = (props) => {
1112
1113
  placement="bottom"
1113
1114
  title={formatMessage(messages.disabledButtonsSection)}
1114
1115
  >
1115
- <CapRow className="whatsapp-edit-disabled">
1116
+ <CapRow>
1116
1117
  {renderButtonsSection()}
1117
1118
  </CapRow>
1118
1119
  </CapTooltip>
@@ -1127,7 +1128,7 @@ export const Whatsapp = (props) => {
1127
1128
  <CapLabel type="label5">
1128
1129
  {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
1129
1130
  </CapLabel>
1130
- <CapLabel type="label11">
1131
+ <CapLabel type="label5">
1131
1132
  {formatMessage(messages.templateMessageUnsubscribeText)}
1132
1133
  </CapLabel>
1133
1134
  </>
package/v2Containers/Whatsapp/index.scss CHANGED
@@ -53,9 +53,10 @@
53
53
  text-overflow: ellipsis;
54
54
  }
55
55
 
56
- .whatsapp-edit-disabled {
56
+ .whatsapp-edit-disabled,
57
+ .whatsapp-btn-radio-edit {
57
58
  cursor: not-allowed;
58
- opacity: 0.4;
59
+ opacity: 0.5;
59
60
  overflow-wrap: anywhere;
60
61
  }
61
62
 
@@ -80,7 +81,7 @@
80
81
  display: grid;
81
82
  }
82
83
 
83
- .whatsapp-button-none{
84
+ .whatsapp-button-none {
84
85
  display: inline-grid;
85
86
  margin-top: 16px;
86
87
  }
@@ -92,7 +93,6 @@
92
93
 
93
94
  .whatsapp-button-quick-reply {
94
95
  display: inline-grid;
95
- opacity: 0.4;
96
96
  }
97
97
 
98
98
  .whatsapp-optional-label {