@capillarytech/creatives-library 7.12.53 → 7.12.55
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/index.js +39 -0
- package/v2Components/CapWhatsappCTA/index.scss +11 -1
- package/v2Components/CapWhatsappCTA/messages.js +12 -2
- package/v2Containers/Whatsapp/index.js +5 -2
- package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +36 -12
package/package.json
CHANGED
|
@@ -21,6 +21,7 @@ import whatsappMsg from '../../v2Containers/Whatsapp/messages';
|
|
|
21
21
|
import messages from './messages';
|
|
22
22
|
import './index.scss';
|
|
23
23
|
import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
|
|
24
|
+
import TagList from '../../v2Containers/TagList';
|
|
24
25
|
import {
|
|
25
26
|
CTA_OPTIONS,
|
|
26
27
|
BTN_MAX_LENGTH,
|
|
@@ -46,6 +47,9 @@ export const CapWhatsappCTA = (props) => {
|
|
|
46
47
|
deleteHandler,
|
|
47
48
|
isEditFlow,
|
|
48
49
|
hostName,
|
|
50
|
+
tags = [],
|
|
51
|
+
injectedTags = {},
|
|
52
|
+
selectedOfferDetails = [],
|
|
49
53
|
} = props;
|
|
50
54
|
const { formatMessage } = intl;
|
|
51
55
|
const validVarRegex = /{{(1)}}/g;
|
|
@@ -75,6 +79,14 @@ export const CapWhatsappCTA = (props) => {
|
|
|
75
79
|
</CapHeading>
|
|
76
80
|
);
|
|
77
81
|
|
|
82
|
+
const onTagSelect = (data, index, url) => {
|
|
83
|
+
updateHelper('url', url.replace('{{1}}', `{{${data}}}`), index);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const revertTagSelect = (index, url) => {
|
|
87
|
+
updateHelper('url', url.replace(invalidVarRegex, `{{1}}`), index);
|
|
88
|
+
};
|
|
89
|
+
|
|
78
90
|
const onCtaTypeChange = (value, index) => {
|
|
79
91
|
let clonedCta = cloneDeep(ctaData[index]);
|
|
80
92
|
clonedCta = {
|
|
@@ -197,6 +209,7 @@ export const CapWhatsappCTA = (props) => {
|
|
|
197
209
|
cta || {};
|
|
198
210
|
if (isSaved) {
|
|
199
211
|
const ctaIsPhone = ctaType === PHONE_NUMBER;
|
|
212
|
+
const urlTypeIsDynamic = urlType === DYNAMIC_URL;
|
|
200
213
|
renderArray.push(
|
|
201
214
|
<CapRow
|
|
202
215
|
className="cap-whatsapp-saved-cta margin-t-12"
|
|
@@ -253,6 +266,32 @@ export const CapWhatsappCTA = (props) => {
|
|
|
253
266
|
</CapColumn>
|
|
254
267
|
</>
|
|
255
268
|
)}
|
|
269
|
+
{isEditFlow && urlTypeIsDynamic && url.includes('{{1}}') && (
|
|
270
|
+
<CapColumn>
|
|
271
|
+
<TagList
|
|
272
|
+
className="whatsapp-cta-taglist"
|
|
273
|
+
label={formatMessage(messages.whatsappCtaTagListLabel)}
|
|
274
|
+
onTagSelect={(data) => onTagSelect(data, index, url)}
|
|
275
|
+
tags={tags}
|
|
276
|
+
injectedTags={injectedTags}
|
|
277
|
+
selectedOfferDetails={selectedOfferDetails}
|
|
278
|
+
/>
|
|
279
|
+
</CapColumn>
|
|
280
|
+
)}
|
|
281
|
+
{isEditFlow && urlTypeIsDynamic && !url.includes('{{1}}') && (
|
|
282
|
+
<CapColumn
|
|
283
|
+
span={1}
|
|
284
|
+
onClick={() => revertTagSelect(index, url)}
|
|
285
|
+
className="whatsapp-cta-tag-revert"
|
|
286
|
+
>
|
|
287
|
+
<CapTooltip
|
|
288
|
+
title={formatMessage(messages.whatsappCtaTagListRevert)}
|
|
289
|
+
placement={'top'}
|
|
290
|
+
>
|
|
291
|
+
<CapIcon size="s" type="return" />
|
|
292
|
+
</CapTooltip>
|
|
293
|
+
</CapColumn>
|
|
294
|
+
)}
|
|
256
295
|
</CapRow>,
|
|
257
296
|
);
|
|
258
297
|
} else {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import'~@capillarytech/cap-ui-library/styles/_variables';
|
|
1
|
+
@import '~@capillarytech/cap-ui-library/styles/_variables';
|
|
2
2
|
|
|
3
3
|
.cap-whatsapp-saved-cta {
|
|
4
4
|
border: solid 1px $CAP_G06;
|
|
@@ -37,6 +37,16 @@
|
|
|
37
37
|
.whatsapp-saved-cta-edit-icon {
|
|
38
38
|
margin-left: 110px;
|
|
39
39
|
}
|
|
40
|
+
|
|
41
|
+
.whatsapp-cta-taglist {
|
|
42
|
+
margin-left: 32px;
|
|
43
|
+
margin-top: -8px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.whatsapp-cta-tag-revert {
|
|
47
|
+
margin-left: 110px;
|
|
48
|
+
margin-top: 2px;
|
|
49
|
+
}
|
|
40
50
|
}
|
|
41
51
|
|
|
42
52
|
.cap-whatsapp-cta {
|
|
@@ -64,7 +64,8 @@ export default defineMessages({
|
|
|
64
64
|
},
|
|
65
65
|
ctaButtonTextTooltip: {
|
|
66
66
|
id: `${prefix}.ctaButtonTextTooltip`,
|
|
67
|
-
defaultMessage:
|
|
67
|
+
defaultMessage:
|
|
68
|
+
'Use this to name the button. We would recommend not to use special characters for the button text.',
|
|
68
69
|
},
|
|
69
70
|
ctaOptionDisabledTooltip: {
|
|
70
71
|
id: `${prefix}.ctaOptionDisabledTooltip`,
|
|
@@ -72,7 +73,8 @@ export default defineMessages({
|
|
|
72
73
|
},
|
|
73
74
|
dynamicUrlTooltip: {
|
|
74
75
|
id: `${prefix}.dynamicUrlTooltip`,
|
|
75
|
-
defaultMessage:
|
|
76
|
+
defaultMessage:
|
|
77
|
+
'Only one variable can be added to a URL. No need to add {{1}} to the end of the URL',
|
|
76
78
|
},
|
|
77
79
|
staticUrlWithVarErrorMessage: {
|
|
78
80
|
id: `${prefix}.staticUrlWithVarErrorMessage`,
|
|
@@ -90,4 +92,12 @@ export default defineMessages({
|
|
|
90
92
|
id: `${prefix}.useTwoBracketsOnly`,
|
|
91
93
|
defaultMessage: 'Use two brackets on each side to declare a variable',
|
|
92
94
|
},
|
|
95
|
+
whatsappCtaTagListLabel: {
|
|
96
|
+
id: `${prefix}.whatsappCtaTagListLabel`,
|
|
97
|
+
defaultMessage: 'Add URL label',
|
|
98
|
+
},
|
|
99
|
+
whatsappCtaTagListRevert: {
|
|
100
|
+
id: `${prefix}.whatsappCtaTagListRevert`,
|
|
101
|
+
defaultMessage: 'Reset website URL label to default value',
|
|
102
|
+
},
|
|
93
103
|
});
|
|
@@ -72,7 +72,6 @@ import { capitalizeString } from '../../utils/Formatter';
|
|
|
72
72
|
import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
|
|
73
73
|
import {
|
|
74
74
|
PHONE_NUMBER,
|
|
75
|
-
STATIC_URL,
|
|
76
75
|
WEBSITE,
|
|
77
76
|
} from '../../v2Components/CapWhatsappCTA/constants';
|
|
78
77
|
let varMap = {};
|
|
@@ -231,7 +230,7 @@ export const Whatsapp = (props) => {
|
|
|
231
230
|
text,
|
|
232
231
|
phone_number,
|
|
233
232
|
url,
|
|
234
|
-
urlType:
|
|
233
|
+
urlType: type,
|
|
235
234
|
isSaved: true,
|
|
236
235
|
};
|
|
237
236
|
obj.phone_number = obj.phone_number.replace('+', '');
|
|
@@ -1309,6 +1308,10 @@ export const Whatsapp = (props) => {
|
|
|
1309
1308
|
deleteHandler={deleteHandler}
|
|
1310
1309
|
isEditFlow={isEditFlow}
|
|
1311
1310
|
hostName={host}
|
|
1311
|
+
isFullMode={isFullMode}
|
|
1312
|
+
tags={tags || []}
|
|
1313
|
+
injectedTags={injectedTags || {}}
|
|
1314
|
+
selectedOfferDetails={selectedOfferDetails}
|
|
1312
1315
|
/>
|
|
1313
1316
|
)}
|
|
1314
1317
|
</CapRow>
|
|
@@ -56379,7 +56379,7 @@ T&C'
|
|
|
56379
56379
|
"phone_number": "919738752617",
|
|
56380
56380
|
"text": "Call us",
|
|
56381
56381
|
"url": "",
|
|
56382
|
-
"urlType": "
|
|
56382
|
+
"urlType": "PHONE_NUMBER",
|
|
56383
56383
|
},
|
|
56384
56384
|
Object {
|
|
56385
56385
|
"ctaType": "WEBSITE",
|
|
@@ -56394,8 +56394,11 @@ T&C'
|
|
|
56394
56394
|
}
|
|
56395
56395
|
deleteHandler={[Function]}
|
|
56396
56396
|
hostName=""
|
|
56397
|
+
injectedTags={Object {}}
|
|
56397
56398
|
isEditFlow={true}
|
|
56399
|
+
isFullMode={true}
|
|
56398
56400
|
key=".2"
|
|
56401
|
+
tags={Array []}
|
|
56399
56402
|
updateHandler={[Function]}
|
|
56400
56403
|
>
|
|
56401
56404
|
<CapWhatsappCTA
|
|
@@ -56408,7 +56411,7 @@ T&C'
|
|
|
56408
56411
|
"phone_number": "919738752617",
|
|
56409
56412
|
"text": "Call us",
|
|
56410
56413
|
"url": "",
|
|
56411
|
-
"urlType": "
|
|
56414
|
+
"urlType": "PHONE_NUMBER",
|
|
56412
56415
|
},
|
|
56413
56416
|
Object {
|
|
56414
56417
|
"ctaType": "WEBSITE",
|
|
@@ -56423,6 +56426,7 @@ T&C'
|
|
|
56423
56426
|
}
|
|
56424
56427
|
deleteHandler={[Function]}
|
|
56425
56428
|
hostName=""
|
|
56429
|
+
injectedTags={Object {}}
|
|
56426
56430
|
intl={
|
|
56427
56431
|
Object {
|
|
56428
56432
|
"defaultFormats": Object {},
|
|
@@ -58275,6 +58279,8 @@ T&C'
|
|
|
58275
58279
|
}
|
|
58276
58280
|
}
|
|
58277
58281
|
isEditFlow={true}
|
|
58282
|
+
isFullMode={true}
|
|
58283
|
+
tags={Array []}
|
|
58278
58284
|
updateHandler={[Function]}
|
|
58279
58285
|
>
|
|
58280
58286
|
<CapRow
|
|
@@ -59226,7 +59232,7 @@ T&C'
|
|
|
59226
59232
|
"phone_number": "919738752617",
|
|
59227
59233
|
"text": "Call us",
|
|
59228
59234
|
"url": "",
|
|
59229
|
-
"urlType": "
|
|
59235
|
+
"urlType": "PHONE_NUMBER",
|
|
59230
59236
|
},
|
|
59231
59237
|
Object {
|
|
59232
59238
|
"ctaType": "WEBSITE",
|
|
@@ -59266,7 +59272,7 @@ T&C'
|
|
|
59266
59272
|
"phone_number": "919738752617",
|
|
59267
59273
|
"text": "Call us",
|
|
59268
59274
|
"url": "",
|
|
59269
|
-
"urlType": "
|
|
59275
|
+
"urlType": "PHONE_NUMBER",
|
|
59270
59276
|
},
|
|
59271
59277
|
Object {
|
|
59272
59278
|
"ctaType": "WEBSITE",
|
|
@@ -88175,7 +88181,7 @@ T&C'
|
|
|
88175
88181
|
"phone_number": "919738752617",
|
|
88176
88182
|
"text": "Call us",
|
|
88177
88183
|
"url": "",
|
|
88178
|
-
"urlType": "
|
|
88184
|
+
"urlType": "PHONE_NUMBER",
|
|
88179
88185
|
},
|
|
88180
88186
|
Object {
|
|
88181
88187
|
"ctaType": "WEBSITE",
|
|
@@ -88190,8 +88196,11 @@ T&C'
|
|
|
88190
88196
|
}
|
|
88191
88197
|
deleteHandler={[Function]}
|
|
88192
88198
|
hostName=""
|
|
88199
|
+
injectedTags={Object {}}
|
|
88193
88200
|
isEditFlow={true}
|
|
88201
|
+
isFullMode={true}
|
|
88194
88202
|
key=".2"
|
|
88203
|
+
tags={Array []}
|
|
88195
88204
|
updateHandler={[Function]}
|
|
88196
88205
|
>
|
|
88197
88206
|
<CapWhatsappCTA
|
|
@@ -88204,7 +88213,7 @@ T&C'
|
|
|
88204
88213
|
"phone_number": "919738752617",
|
|
88205
88214
|
"text": "Call us",
|
|
88206
88215
|
"url": "",
|
|
88207
|
-
"urlType": "
|
|
88216
|
+
"urlType": "PHONE_NUMBER",
|
|
88208
88217
|
},
|
|
88209
88218
|
Object {
|
|
88210
88219
|
"ctaType": "WEBSITE",
|
|
@@ -88219,6 +88228,7 @@ T&C'
|
|
|
88219
88228
|
}
|
|
88220
88229
|
deleteHandler={[Function]}
|
|
88221
88230
|
hostName=""
|
|
88231
|
+
injectedTags={Object {}}
|
|
88222
88232
|
intl={
|
|
88223
88233
|
Object {
|
|
88224
88234
|
"defaultFormats": Object {},
|
|
@@ -90071,6 +90081,8 @@ T&C'
|
|
|
90071
90081
|
}
|
|
90072
90082
|
}
|
|
90073
90083
|
isEditFlow={true}
|
|
90084
|
+
isFullMode={true}
|
|
90085
|
+
tags={Array []}
|
|
90074
90086
|
updateHandler={[Function]}
|
|
90075
90087
|
>
|
|
90076
90088
|
<CapRow
|
|
@@ -91022,7 +91034,7 @@ T&C'
|
|
|
91022
91034
|
"phone_number": "919738752617",
|
|
91023
91035
|
"text": "Call us",
|
|
91024
91036
|
"url": "",
|
|
91025
|
-
"urlType": "
|
|
91037
|
+
"urlType": "PHONE_NUMBER",
|
|
91026
91038
|
},
|
|
91027
91039
|
Object {
|
|
91028
91040
|
"ctaType": "WEBSITE",
|
|
@@ -91062,7 +91074,7 @@ T&C'
|
|
|
91062
91074
|
"phone_number": "919738752617",
|
|
91063
91075
|
"text": "Call us",
|
|
91064
91076
|
"url": "",
|
|
91065
|
-
"urlType": "
|
|
91077
|
+
"urlType": "PHONE_NUMBER",
|
|
91066
91078
|
},
|
|
91067
91079
|
Object {
|
|
91068
91080
|
"ctaType": "WEBSITE",
|
|
@@ -103949,7 +103961,7 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
103949
103961
|
"phone_number": "919738752617",
|
|
103950
103962
|
"text": "Call",
|
|
103951
103963
|
"url": "",
|
|
103952
|
-
"urlType": "
|
|
103964
|
+
"urlType": "PHONE_NUMBER",
|
|
103953
103965
|
},
|
|
103954
103966
|
Object {
|
|
103955
103967
|
"ctaType": "WEBSITE",
|
|
@@ -103964,8 +103976,11 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
103964
103976
|
}
|
|
103965
103977
|
deleteHandler={[Function]}
|
|
103966
103978
|
hostName=""
|
|
103979
|
+
injectedTags={Object {}}
|
|
103967
103980
|
isEditFlow={true}
|
|
103981
|
+
isFullMode={false}
|
|
103968
103982
|
key=".2"
|
|
103983
|
+
tags={Array []}
|
|
103969
103984
|
updateHandler={[Function]}
|
|
103970
103985
|
>
|
|
103971
103986
|
<CapWhatsappCTA
|
|
@@ -103978,7 +103993,7 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
103978
103993
|
"phone_number": "919738752617",
|
|
103979
103994
|
"text": "Call",
|
|
103980
103995
|
"url": "",
|
|
103981
|
-
"urlType": "
|
|
103996
|
+
"urlType": "PHONE_NUMBER",
|
|
103982
103997
|
},
|
|
103983
103998
|
Object {
|
|
103984
103999
|
"ctaType": "WEBSITE",
|
|
@@ -103993,6 +104008,7 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
103993
104008
|
}
|
|
103994
104009
|
deleteHandler={[Function]}
|
|
103995
104010
|
hostName=""
|
|
104011
|
+
injectedTags={Object {}}
|
|
103996
104012
|
intl={
|
|
103997
104013
|
Object {
|
|
103998
104014
|
"defaultFormats": Object {},
|
|
@@ -105845,6 +105861,8 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
105845
105861
|
}
|
|
105846
105862
|
}
|
|
105847
105863
|
isEditFlow={true}
|
|
105864
|
+
isFullMode={false}
|
|
105865
|
+
tags={Array []}
|
|
105848
105866
|
updateHandler={[Function]}
|
|
105849
105867
|
>
|
|
105850
105868
|
<CapRow
|
|
@@ -106796,7 +106814,7 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
106796
106814
|
"phone_number": "919738752617",
|
|
106797
106815
|
"text": "Call",
|
|
106798
106816
|
"url": "",
|
|
106799
|
-
"urlType": "
|
|
106817
|
+
"urlType": "PHONE_NUMBER",
|
|
106800
106818
|
},
|
|
106801
106819
|
Object {
|
|
106802
106820
|
"ctaType": "WEBSITE",
|
|
@@ -106835,7 +106853,7 @@ Click {{unsubscribe}} to unsubscribe",
|
|
|
106835
106853
|
"phone_number": "919738752617",
|
|
106836
106854
|
"text": "Call",
|
|
106837
106855
|
"url": "",
|
|
106838
|
-
"urlType": "
|
|
106856
|
+
"urlType": "PHONE_NUMBER",
|
|
106839
106857
|
},
|
|
106840
106858
|
Object {
|
|
106841
106859
|
"ctaType": "WEBSITE",
|
|
@@ -114335,8 +114353,11 @@ exports[`Creatives Whatsapp test1/> should render edit mode in various cases 6`]
|
|
|
114335
114353
|
}
|
|
114336
114354
|
deleteHandler={[Function]}
|
|
114337
114355
|
hostName=""
|
|
114356
|
+
injectedTags={Object {}}
|
|
114338
114357
|
isEditFlow={true}
|
|
114358
|
+
isFullMode={false}
|
|
114339
114359
|
key=".2"
|
|
114360
|
+
tags={Array []}
|
|
114340
114361
|
updateHandler={[Function]}
|
|
114341
114362
|
>
|
|
114342
114363
|
<CapWhatsappCTA
|
|
@@ -114355,6 +114376,7 @@ exports[`Creatives Whatsapp test1/> should render edit mode in various cases 6`]
|
|
|
114355
114376
|
}
|
|
114356
114377
|
deleteHandler={[Function]}
|
|
114357
114378
|
hostName=""
|
|
114379
|
+
injectedTags={Object {}}
|
|
114358
114380
|
intl={
|
|
114359
114381
|
Object {
|
|
114360
114382
|
"defaultFormats": Object {},
|
|
@@ -116207,6 +116229,8 @@ exports[`Creatives Whatsapp test1/> should render edit mode in various cases 6`]
|
|
|
116207
116229
|
}
|
|
116208
116230
|
}
|
|
116209
116231
|
isEditFlow={true}
|
|
116232
|
+
isFullMode={false}
|
|
116233
|
+
tags={Array []}
|
|
116210
116234
|
updateHandler={[Function]}
|
|
116211
116235
|
>
|
|
116212
116236
|
<CapRow
|