@capillarytech/creatives-library 7.12.37 → 7.12.39
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 +1 -1
- package/v2Components/CapWhatsappCTA/constants.js +4 -0
- package/v2Components/CapWhatsappCTA/index.js +36 -5
- package/v2Components/CapWhatsappCTA/messages.js +8 -0
- package/v2Components/TemplatePreview/_templatePreview.scss +1 -0
- package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +1 -1
- package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +40 -40
- package/v2Containers/Whatsapp/index.js +27 -15
- package/v2Containers/Whatsapp/index.scss +17 -7
- package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +168 -112
- package/v2Containers/Whatsapp/tests/__snapshots__/utils.test.js.snap +2 -2
- package/v2Containers/Whatsapp/utils.js +1 -1
package/package.json
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
|
|
|
@@ -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
|
|
72
|
-
if (
|
|
73
|
-
return
|
|
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
|
|
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={
|
|
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}
|
|
@@ -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: 'Use this to name the button. We would recommend not to use special characters for the button text.',
|
|
68
|
+
},
|
|
69
|
+
ctaOptionDisabledTooltip: {
|
|
70
|
+
id: `${prefix}.ctaOptionDisabledTooltip`,
|
|
71
|
+
defaultMessage: 'This type of button can only be added once',
|
|
72
|
+
},
|
|
65
73
|
});
|
|
@@ -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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
5758
|
+
type="label9"
|
|
5759
5759
|
>
|
|
5760
5760
|
lick {{unsubscribe}} to unsubscribe'
|
|
5761
5761
|
</CapLabel>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable react/jsx-boolean-value */
|
|
1
2
|
/* eslint-disable camelcase */
|
|
2
3
|
/* eslint-disable no-undef */
|
|
3
4
|
import React, { useState, useEffect } from 'react';
|
|
@@ -21,6 +22,7 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
|
|
|
21
22
|
import CapButton from '@capillarytech/cap-ui-library/CapButton';
|
|
22
23
|
import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
|
|
23
24
|
import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
|
|
25
|
+
import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
|
|
24
26
|
import moment from 'moment';
|
|
25
27
|
import {
|
|
26
28
|
CAP_SPACE_04,
|
|
@@ -109,6 +111,7 @@ export const Whatsapp = (props) => {
|
|
|
109
111
|
const [accessToken, setAccessToken] = useState('');
|
|
110
112
|
const [accountName, setAccountName] = useState('');
|
|
111
113
|
const [spin, setSpin] = useState(false);
|
|
114
|
+
const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
|
|
112
115
|
//for edit only
|
|
113
116
|
const [isEditFlow, setEditFlow] = useState(false);
|
|
114
117
|
const [templateDate, setTemplateDate] = useState('');
|
|
@@ -499,6 +502,7 @@ export const Whatsapp = (props) => {
|
|
|
499
502
|
style={{
|
|
500
503
|
marginTop:
|
|
501
504
|
buttonType === WHATSAPP_BUTTON_TYPES.CTA ? '0px' : '24px',
|
|
505
|
+
opacity: isEditFlow ? '' : '0.4',
|
|
502
506
|
}}
|
|
503
507
|
>
|
|
504
508
|
<CapHeading type="h4">
|
|
@@ -518,23 +522,33 @@ export const Whatsapp = (props) => {
|
|
|
518
522
|
</CapHeading>
|
|
519
523
|
);
|
|
520
524
|
|
|
525
|
+
const unsubscribeHandler = ({ target: { checked } }) => {
|
|
526
|
+
setUnsubscribeRequired(checked);
|
|
527
|
+
};
|
|
528
|
+
|
|
521
529
|
const renderUnsubscribeText = () => (
|
|
522
530
|
<>
|
|
523
531
|
<CapColumn span={12}>
|
|
524
|
-
<
|
|
525
|
-
|
|
526
|
-
|
|
532
|
+
<CapCheckbox
|
|
533
|
+
className={`whatsapp-create-unsubscribe-checkbox ${
|
|
534
|
+
isEditFlow ? '' : 'whatsapp-create-unsubscribe'
|
|
535
|
+
}`}
|
|
536
|
+
onChange={unsubscribeHandler}
|
|
537
|
+
checked={unsubscribeRequired}
|
|
538
|
+
disabled={isEditFlow}
|
|
539
|
+
autoFocus={true}
|
|
527
540
|
>
|
|
528
|
-
<
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
: 'whatsapp-edit-render-unsubscribe-text'
|
|
541
|
+
<CapTooltip
|
|
542
|
+
placement="bottom"
|
|
543
|
+
title={
|
|
544
|
+
!isEditFlow && formatMessage(messages.unsubscribeTextTooltip)
|
|
533
545
|
}
|
|
534
546
|
>
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
547
|
+
<span className="whatsapp-render-unsubscribe-text">
|
|
548
|
+
{formatMessage(messages.templateMessageUnsubscribeText)}
|
|
549
|
+
</span>
|
|
550
|
+
</CapTooltip>
|
|
551
|
+
</CapCheckbox>
|
|
538
552
|
</CapColumn>
|
|
539
553
|
<CapColumn span={12}></CapColumn>
|
|
540
554
|
</>
|
|
@@ -1112,9 +1126,7 @@ export const Whatsapp = (props) => {
|
|
|
1112
1126
|
placement="bottom"
|
|
1113
1127
|
title={formatMessage(messages.disabledButtonsSection)}
|
|
1114
1128
|
>
|
|
1115
|
-
<CapRow
|
|
1116
|
-
{renderButtonsSection()}
|
|
1117
|
-
</CapRow>
|
|
1129
|
+
<CapRow>{renderButtonsSection()}</CapRow>
|
|
1118
1130
|
</CapTooltip>
|
|
1119
1131
|
</>
|
|
1120
1132
|
);
|
|
@@ -1127,7 +1139,7 @@ export const Whatsapp = (props) => {
|
|
|
1127
1139
|
<CapLabel type="label5">
|
|
1128
1140
|
{isEditFlow ? updatedSmsEditor.join('') : templateMessage}
|
|
1129
1141
|
</CapLabel>
|
|
1130
|
-
<CapLabel type="
|
|
1142
|
+
<CapLabel type="label5">
|
|
1131
1143
|
{formatMessage(messages.templateMessageUnsubscribeText)}
|
|
1132
1144
|
</CapLabel>
|
|
1133
1145
|
</>
|
|
@@ -10,13 +10,23 @@
|
|
|
10
10
|
margin-bottom: 6px;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.whatsapp-create-
|
|
14
|
-
|
|
13
|
+
.whatsapp-create-unsubscribe-checkbox {
|
|
14
|
+
.ant-checkbox-inner {
|
|
15
|
+
height: 16px;
|
|
16
|
+
width: 16px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.whatsapp-create-unsubscribe {
|
|
15
21
|
margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
|
|
16
22
|
}
|
|
17
23
|
|
|
18
|
-
.whatsapp-
|
|
24
|
+
.whatsapp-render-unsubscribe-text {
|
|
19
25
|
color: $FONT_COLOR_02;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
font-weight: normal;
|
|
28
|
+
line-height: 24px;
|
|
29
|
+
margin-left: -8px;
|
|
20
30
|
}
|
|
21
31
|
|
|
22
32
|
.whatsapp-render-message-length {
|
|
@@ -53,9 +63,10 @@
|
|
|
53
63
|
text-overflow: ellipsis;
|
|
54
64
|
}
|
|
55
65
|
|
|
56
|
-
.whatsapp-edit-disabled
|
|
66
|
+
.whatsapp-edit-disabled,
|
|
67
|
+
.whatsapp-btn-radio-edit {
|
|
57
68
|
cursor: not-allowed;
|
|
58
|
-
opacity: 0.
|
|
69
|
+
opacity: 0.5;
|
|
59
70
|
overflow-wrap: anywhere;
|
|
60
71
|
}
|
|
61
72
|
|
|
@@ -80,7 +91,7 @@
|
|
|
80
91
|
display: grid;
|
|
81
92
|
}
|
|
82
93
|
|
|
83
|
-
.whatsapp-button-none{
|
|
94
|
+
.whatsapp-button-none {
|
|
84
95
|
display: inline-grid;
|
|
85
96
|
margin-top: 16px;
|
|
86
97
|
}
|
|
@@ -92,7 +103,6 @@
|
|
|
92
103
|
|
|
93
104
|
.whatsapp-button-quick-reply {
|
|
94
105
|
display: inline-grid;
|
|
95
|
-
opacity: 0.4;
|
|
96
106
|
}
|
|
97
107
|
|
|
98
108
|
.whatsapp-optional-label {
|