@capillarytech/creatives-library 7.10.67 → 7.10.69
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/v2Containers/Templates/actions.js +2 -2
- package/v2Containers/Templates/index.js +20 -1
- package/v2Containers/Templates/messages.js +4 -0
- package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +0 -220
- package/v2Containers/TemplatesV2/index.js +4 -7
- package/v2Containers/Whatsapp/index.js +52 -27
- package/v2Containers/Whatsapp/index.scss +7 -0
- package/v2Containers/Whatsapp/messages.js +9 -1
- package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +61541 -58146
- package/v2Containers/Whatsapp/tests/index.test.js +2 -0
package/package.json
CHANGED
|
@@ -57,8 +57,8 @@ export function setWeChatAccount(weChatAccount) {
|
|
|
57
57
|
}
|
|
58
58
|
export function setChannelAccount(channel, account) {
|
|
59
59
|
const channelTypeMapping = {
|
|
60
|
-
LINE: types.SET_LINE_ACCOUNT,
|
|
61
|
-
WHATSAPP: types.SET_WHATSAPP_ACCOUNT,
|
|
60
|
+
[LINE]: types.SET_LINE_ACCOUNT,
|
|
61
|
+
[WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
|
|
62
62
|
};
|
|
63
63
|
if (channelTypeMapping[channel]) {
|
|
64
64
|
return {
|
|
@@ -46,6 +46,7 @@ import {
|
|
|
46
46
|
CapTooltip,
|
|
47
47
|
CapAlert,
|
|
48
48
|
CapModal,
|
|
49
|
+
CapInfoNote,
|
|
49
50
|
} from '@capillarytech/cap-ui-library';
|
|
50
51
|
import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
|
|
51
52
|
import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
|
|
@@ -828,7 +829,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
828
829
|
],
|
|
829
830
|
hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
|
|
830
831
|
};
|
|
831
|
-
|
|
832
|
+
|
|
833
|
+
const {
|
|
834
|
+
versions: {
|
|
835
|
+
base: {
|
|
836
|
+
content: {
|
|
837
|
+
[WHATSAPP_LOWERCASE]: {
|
|
838
|
+
status = '',
|
|
839
|
+
} = {},
|
|
840
|
+
} = {},
|
|
841
|
+
} = {},
|
|
842
|
+
} = {},
|
|
843
|
+
} = template;
|
|
844
|
+
if (this.props.isFullMode && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
|
|
832
845
|
templateData.extra.push(<CapDropdown
|
|
833
846
|
overlay={
|
|
834
847
|
<CapMenu>
|
|
@@ -2545,6 +2558,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2545
2558
|
) : null
|
|
2546
2559
|
}
|
|
2547
2560
|
|
|
2561
|
+
{
|
|
2562
|
+
channel.toLowerCase() === WHATSAPP_LOWERCASE && !isFullMode ? (
|
|
2563
|
+
<CapInfoNote message={messages.whatsappOnlyApprovedTemplates} />
|
|
2564
|
+
) : null
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2548
2567
|
<CapRow>
|
|
2549
2568
|
<Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
|
|
2550
2569
|
{this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
|
|
@@ -446,6 +446,10 @@ export default defineMessages({
|
|
|
446
446
|
id: `${scope}.whatsappMaxTemplates`,
|
|
447
447
|
defaultMessage: 'WhatsApp allows {maxCount} approved templates. To accommodate new approved templates either delete the existing one or reach out to Capillary POC to increase the limit.',
|
|
448
448
|
},
|
|
449
|
+
"whatsappOnlyApprovedTemplates": {
|
|
450
|
+
id: `${scope}.whatsappOnlyApprovedTemplates`,
|
|
451
|
+
defaultMessage: 'Only "Approved" templates are available here, as you can use those templates to create a message.',
|
|
452
|
+
},
|
|
449
453
|
"status": {
|
|
450
454
|
id: `${scope}.status`,
|
|
451
455
|
defaultMessage: 'Status',
|
|
@@ -1538,26 +1538,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
1538
1538
|
}
|
|
1539
1539
|
type="eye"
|
|
1540
1540
|
/>,
|
|
1541
|
-
<CapDropdown
|
|
1542
|
-
overlay={
|
|
1543
|
-
<CapMenu>
|
|
1544
|
-
<withItemHOC
|
|
1545
|
-
className="delete-whatsapp"
|
|
1546
|
-
onClick={[Function]}
|
|
1547
|
-
>
|
|
1548
|
-
<FormattedMessage
|
|
1549
|
-
defaultMessage="Delete"
|
|
1550
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
1551
|
-
values={Object {}}
|
|
1552
|
-
/>
|
|
1553
|
-
</withItemHOC>
|
|
1554
|
-
</CapMenu>
|
|
1555
|
-
}
|
|
1556
|
-
>
|
|
1557
|
-
<CapIcon
|
|
1558
|
-
type="more"
|
|
1559
|
-
/>
|
|
1560
|
-
</CapDropdown>,
|
|
1561
1541
|
],
|
|
1562
1542
|
"hoverOption": <CapButton
|
|
1563
1543
|
className="edit-whatsapp"
|
|
@@ -1633,26 +1613,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
1633
1613
|
}
|
|
1634
1614
|
type="eye"
|
|
1635
1615
|
/>,
|
|
1636
|
-
<CapDropdown
|
|
1637
|
-
overlay={
|
|
1638
|
-
<CapMenu>
|
|
1639
|
-
<withItemHOC
|
|
1640
|
-
className="delete-whatsapp"
|
|
1641
|
-
onClick={[Function]}
|
|
1642
|
-
>
|
|
1643
|
-
<FormattedMessage
|
|
1644
|
-
defaultMessage="Delete"
|
|
1645
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
1646
|
-
values={Object {}}
|
|
1647
|
-
/>
|
|
1648
|
-
</withItemHOC>
|
|
1649
|
-
</CapMenu>
|
|
1650
|
-
}
|
|
1651
|
-
>
|
|
1652
|
-
<CapIcon
|
|
1653
|
-
type="more"
|
|
1654
|
-
/>
|
|
1655
|
-
</CapDropdown>,
|
|
1656
1616
|
],
|
|
1657
1617
|
"hoverOption": <CapButton
|
|
1658
1618
|
className="edit-whatsapp"
|
|
@@ -1728,26 +1688,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
1728
1688
|
}
|
|
1729
1689
|
type="eye"
|
|
1730
1690
|
/>,
|
|
1731
|
-
<CapDropdown
|
|
1732
|
-
overlay={
|
|
1733
|
-
<CapMenu>
|
|
1734
|
-
<withItemHOC
|
|
1735
|
-
className="delete-whatsapp"
|
|
1736
|
-
onClick={[Function]}
|
|
1737
|
-
>
|
|
1738
|
-
<FormattedMessage
|
|
1739
|
-
defaultMessage="Delete"
|
|
1740
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
1741
|
-
values={Object {}}
|
|
1742
|
-
/>
|
|
1743
|
-
</withItemHOC>
|
|
1744
|
-
</CapMenu>
|
|
1745
|
-
}
|
|
1746
|
-
>
|
|
1747
|
-
<CapIcon
|
|
1748
|
-
type="more"
|
|
1749
|
-
/>
|
|
1750
|
-
</CapDropdown>,
|
|
1751
1691
|
],
|
|
1752
1692
|
"hoverOption": <CapButton
|
|
1753
1693
|
className="edit-whatsapp"
|
|
@@ -1823,26 +1763,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
1823
1763
|
}
|
|
1824
1764
|
type="eye"
|
|
1825
1765
|
/>,
|
|
1826
|
-
<CapDropdown
|
|
1827
|
-
overlay={
|
|
1828
|
-
<CapMenu>
|
|
1829
|
-
<withItemHOC
|
|
1830
|
-
className="delete-whatsapp"
|
|
1831
|
-
onClick={[Function]}
|
|
1832
|
-
>
|
|
1833
|
-
<FormattedMessage
|
|
1834
|
-
defaultMessage="Delete"
|
|
1835
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
1836
|
-
values={Object {}}
|
|
1837
|
-
/>
|
|
1838
|
-
</withItemHOC>
|
|
1839
|
-
</CapMenu>
|
|
1840
|
-
}
|
|
1841
|
-
>
|
|
1842
|
-
<CapIcon
|
|
1843
|
-
type="more"
|
|
1844
|
-
/>
|
|
1845
|
-
</CapDropdown>,
|
|
1846
1766
|
],
|
|
1847
1767
|
"hoverOption": <CapButton
|
|
1848
1768
|
className="edit-whatsapp"
|
|
@@ -1918,26 +1838,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
1918
1838
|
}
|
|
1919
1839
|
type="eye"
|
|
1920
1840
|
/>,
|
|
1921
|
-
<CapDropdown
|
|
1922
|
-
overlay={
|
|
1923
|
-
<CapMenu>
|
|
1924
|
-
<withItemHOC
|
|
1925
|
-
className="delete-whatsapp"
|
|
1926
|
-
onClick={[Function]}
|
|
1927
|
-
>
|
|
1928
|
-
<FormattedMessage
|
|
1929
|
-
defaultMessage="Delete"
|
|
1930
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
1931
|
-
values={Object {}}
|
|
1932
|
-
/>
|
|
1933
|
-
</withItemHOC>
|
|
1934
|
-
</CapMenu>
|
|
1935
|
-
}
|
|
1936
|
-
>
|
|
1937
|
-
<CapIcon
|
|
1938
|
-
type="more"
|
|
1939
|
-
/>
|
|
1940
|
-
</CapDropdown>,
|
|
1941
1841
|
],
|
|
1942
1842
|
"hoverOption": <CapButton
|
|
1943
1843
|
className="edit-whatsapp"
|
|
@@ -2020,26 +1920,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
2020
1920
|
}
|
|
2021
1921
|
type="eye"
|
|
2022
1922
|
/>,
|
|
2023
|
-
<CapDropdown
|
|
2024
|
-
overlay={
|
|
2025
|
-
<CapMenu>
|
|
2026
|
-
<withItemHOC
|
|
2027
|
-
className="delete-whatsapp"
|
|
2028
|
-
onClick={[Function]}
|
|
2029
|
-
>
|
|
2030
|
-
<FormattedMessage
|
|
2031
|
-
defaultMessage="Delete"
|
|
2032
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
2033
|
-
values={Object {}}
|
|
2034
|
-
/>
|
|
2035
|
-
</withItemHOC>
|
|
2036
|
-
</CapMenu>
|
|
2037
|
-
}
|
|
2038
|
-
>
|
|
2039
|
-
<CapIcon
|
|
2040
|
-
type="more"
|
|
2041
|
-
/>
|
|
2042
|
-
</CapDropdown>,
|
|
2043
1923
|
],
|
|
2044
1924
|
"hoverOption": <CapButton
|
|
2045
1925
|
className="edit-whatsapp"
|
|
@@ -2121,26 +2001,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
2121
2001
|
}
|
|
2122
2002
|
type="eye"
|
|
2123
2003
|
/>,
|
|
2124
|
-
<CapDropdown
|
|
2125
|
-
overlay={
|
|
2126
|
-
<CapMenu>
|
|
2127
|
-
<withItemHOC
|
|
2128
|
-
className="delete-whatsapp"
|
|
2129
|
-
onClick={[Function]}
|
|
2130
|
-
>
|
|
2131
|
-
<FormattedMessage
|
|
2132
|
-
defaultMessage="Delete"
|
|
2133
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
2134
|
-
values={Object {}}
|
|
2135
|
-
/>
|
|
2136
|
-
</withItemHOC>
|
|
2137
|
-
</CapMenu>
|
|
2138
|
-
}
|
|
2139
|
-
>
|
|
2140
|
-
<CapIcon
|
|
2141
|
-
type="more"
|
|
2142
|
-
/>
|
|
2143
|
-
</CapDropdown>,
|
|
2144
2004
|
],
|
|
2145
2005
|
"hoverOption": <CapButton
|
|
2146
2006
|
className="edit-whatsapp"
|
|
@@ -2216,26 +2076,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
2216
2076
|
}
|
|
2217
2077
|
type="eye"
|
|
2218
2078
|
/>,
|
|
2219
|
-
<CapDropdown
|
|
2220
|
-
overlay={
|
|
2221
|
-
<CapMenu>
|
|
2222
|
-
<withItemHOC
|
|
2223
|
-
className="delete-whatsapp"
|
|
2224
|
-
onClick={[Function]}
|
|
2225
|
-
>
|
|
2226
|
-
<FormattedMessage
|
|
2227
|
-
defaultMessage="Delete"
|
|
2228
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
2229
|
-
values={Object {}}
|
|
2230
|
-
/>
|
|
2231
|
-
</withItemHOC>
|
|
2232
|
-
</CapMenu>
|
|
2233
|
-
}
|
|
2234
|
-
>
|
|
2235
|
-
<CapIcon
|
|
2236
|
-
type="more"
|
|
2237
|
-
/>
|
|
2238
|
-
</CapDropdown>,
|
|
2239
2079
|
],
|
|
2240
2080
|
"hoverOption": <CapButton
|
|
2241
2081
|
className="edit-whatsapp"
|
|
@@ -2312,26 +2152,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
2312
2152
|
}
|
|
2313
2153
|
type="eye"
|
|
2314
2154
|
/>,
|
|
2315
|
-
<CapDropdown
|
|
2316
|
-
overlay={
|
|
2317
|
-
<CapMenu>
|
|
2318
|
-
<withItemHOC
|
|
2319
|
-
className="delete-whatsapp"
|
|
2320
|
-
onClick={[Function]}
|
|
2321
|
-
>
|
|
2322
|
-
<FormattedMessage
|
|
2323
|
-
defaultMessage="Delete"
|
|
2324
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
2325
|
-
values={Object {}}
|
|
2326
|
-
/>
|
|
2327
|
-
</withItemHOC>
|
|
2328
|
-
</CapMenu>
|
|
2329
|
-
}
|
|
2330
|
-
>
|
|
2331
|
-
<CapIcon
|
|
2332
|
-
type="more"
|
|
2333
|
-
/>
|
|
2334
|
-
</CapDropdown>,
|
|
2335
2155
|
],
|
|
2336
2156
|
"hoverOption": <CapButton
|
|
2337
2157
|
className="edit-whatsapp"
|
|
@@ -2723,26 +2543,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
2723
2543
|
}
|
|
2724
2544
|
type="eye"
|
|
2725
2545
|
/>,
|
|
2726
|
-
<CapDropdown
|
|
2727
|
-
overlay={
|
|
2728
|
-
<CapMenu>
|
|
2729
|
-
<withItemHOC
|
|
2730
|
-
className="delete-whatsapp"
|
|
2731
|
-
onClick={[Function]}
|
|
2732
|
-
>
|
|
2733
|
-
<FormattedMessage
|
|
2734
|
-
defaultMessage="Delete"
|
|
2735
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
2736
|
-
values={Object {}}
|
|
2737
|
-
/>
|
|
2738
|
-
</withItemHOC>
|
|
2739
|
-
</CapMenu>
|
|
2740
|
-
}
|
|
2741
|
-
>
|
|
2742
|
-
<CapIcon
|
|
2743
|
-
type="more"
|
|
2744
|
-
/>
|
|
2745
|
-
</CapDropdown>,
|
|
2746
2546
|
],
|
|
2747
2547
|
"hoverOption": <CapButton
|
|
2748
2548
|
className="edit-whatsapp"
|
|
@@ -3115,26 +2915,6 @@ Click {{unsubscribe}} to unsubscribe'",
|
|
|
3115
2915
|
}
|
|
3116
2916
|
type="eye"
|
|
3117
2917
|
/>,
|
|
3118
|
-
<CapDropdown
|
|
3119
|
-
overlay={
|
|
3120
|
-
<CapMenu>
|
|
3121
|
-
<withItemHOC
|
|
3122
|
-
className="delete-whatsapp"
|
|
3123
|
-
onClick={[Function]}
|
|
3124
|
-
>
|
|
3125
|
-
<FormattedMessage
|
|
3126
|
-
defaultMessage="Delete"
|
|
3127
|
-
id="creatives.containersV2.Templates.deleteButton"
|
|
3128
|
-
values={Object {}}
|
|
3129
|
-
/>
|
|
3130
|
-
</withItemHOC>
|
|
3131
|
-
</CapMenu>
|
|
3132
|
-
}
|
|
3133
|
-
>
|
|
3134
|
-
<CapIcon
|
|
3135
|
-
type="more"
|
|
3136
|
-
/>
|
|
3137
|
-
</CapDropdown>,
|
|
3138
2918
|
],
|
|
3139
2919
|
"hoverOption": <CapButton
|
|
3140
2920
|
className="edit-whatsapp"
|
|
@@ -35,9 +35,6 @@ import { getObjFromQueryParams } from '../../utils/v2common';
|
|
|
35
35
|
const {CapCustomCardList} = CapCustomCard;
|
|
36
36
|
|
|
37
37
|
const StyledCapTab = withStyles(CapTab, CapTabStyle);
|
|
38
|
-
|
|
39
|
-
const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
|
|
40
|
-
|
|
41
38
|
export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
42
39
|
constructor(props) {
|
|
43
40
|
super(props);
|
|
@@ -64,7 +61,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
64
61
|
line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
|
|
65
62
|
viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
|
|
66
63
|
facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
|
|
67
|
-
whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key:
|
|
64
|
+
whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: WHATSAPP },
|
|
68
65
|
};
|
|
69
66
|
let filteredPanes = Object.keys(defaultPanes)
|
|
70
67
|
.filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
|
|
@@ -82,7 +79,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
82
79
|
filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
|
|
83
80
|
defaultChannel = 'FTP';
|
|
84
81
|
}
|
|
85
|
-
if (!enableNewChannels.includes(WHATSAPP)) {
|
|
82
|
+
if (!enableNewChannels.includes(WHATSAPP.toUpperCase())) {
|
|
86
83
|
filteredPanes.splice(7, 1);
|
|
87
84
|
}
|
|
88
85
|
}
|
|
@@ -130,8 +127,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
130
127
|
componentDidMount() {
|
|
131
128
|
const queryItems = getObjFromQueryParams(location.search);
|
|
132
129
|
|
|
133
|
-
if (queryItems.channel ===
|
|
134
|
-
this.channelChange(
|
|
130
|
+
if (queryItems.channel === WHATSAPP) {
|
|
131
|
+
this.channelChange(WHATSAPP);
|
|
135
132
|
}
|
|
136
133
|
}
|
|
137
134
|
|
|
@@ -411,7 +411,7 @@ export const Whatsapp = (props) => {
|
|
|
411
411
|
{formatMessage(messages.templateMessageLength, {
|
|
412
412
|
currentLength: isEditFlow
|
|
413
413
|
? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
|
|
414
|
-
: templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
|
|
414
|
+
: templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH + 1,
|
|
415
415
|
maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
|
|
416
416
|
})}
|
|
417
417
|
</CapHeading>
|
|
@@ -438,6 +438,14 @@ export const Whatsapp = (props) => {
|
|
|
438
438
|
setTemplateCategory(value);
|
|
439
439
|
};
|
|
440
440
|
|
|
441
|
+
const onAddVar = () => {
|
|
442
|
+
const validVarArr = templateMessage.match(validVarRegex) || [];
|
|
443
|
+
const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
|
|
444
|
+
const error = templateMessageErrorHandler(tempMsg);
|
|
445
|
+
setTemplateMessage(tempMsg);
|
|
446
|
+
setTemplateMessageError(error);
|
|
447
|
+
};
|
|
448
|
+
|
|
441
449
|
const onTemplateMessageChange = ({ target: { value } }) => {
|
|
442
450
|
const error = templateMessageErrorHandler(value);
|
|
443
451
|
setTemplateMessage(value);
|
|
@@ -449,7 +457,7 @@ export const Whatsapp = (props) => {
|
|
|
449
457
|
if (value === '') {
|
|
450
458
|
errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
|
|
451
459
|
} else if (
|
|
452
|
-
UNSUBSCRIBE_TEXT_LENGTH + value?.length >
|
|
460
|
+
UNSUBSCRIBE_TEXT_LENGTH + value?.length + 1 >
|
|
453
461
|
TEMPLATE_MESSAGE_MAX_LENGTH
|
|
454
462
|
) {
|
|
455
463
|
errorMessage = formatMessage(messages.templateMessageLengthError);
|
|
@@ -462,6 +470,7 @@ export const Whatsapp = (props) => {
|
|
|
462
470
|
const invalidVarSet = [...new Set(invalidVarArr)];
|
|
463
471
|
|
|
464
472
|
const noContentBetweenVars = /}}[^a-zA-Z]*{{/g;
|
|
473
|
+
const moreThanTwoBrackets = /{{3,}([1-9]|1[0-9])}{3,}/g;
|
|
465
474
|
|
|
466
475
|
if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
|
|
467
476
|
if (validVarArr?.length !== validVarSet?.length) {
|
|
@@ -473,6 +482,9 @@ export const Whatsapp = (props) => {
|
|
|
473
482
|
} else if (value.match(noContentBetweenVars)?.length > 0) {
|
|
474
483
|
//checks for text between vars like Hi {{1}}{{2}}
|
|
475
484
|
errorMessage = formatMessage(messages.noContentBetweenVars);
|
|
485
|
+
} else if (value.match(moreThanTwoBrackets)?.length > 0) {
|
|
486
|
+
//checks for >2 brackets {{{1}}}
|
|
487
|
+
errorMessage = formatMessage(messages.useTwoBracketsOnly);
|
|
476
488
|
} else {
|
|
477
489
|
//checks if vars are added sequentially like, Hi {{1}}, offer for you {{2}} today {{3}}
|
|
478
490
|
const checkSequence = [...validVarSet].filter(
|
|
@@ -632,31 +644,48 @@ export const Whatsapp = (props) => {
|
|
|
632
644
|
id={`whatsapp_template_language_input`}
|
|
633
645
|
defaultValue={'English'}
|
|
634
646
|
size="default"
|
|
635
|
-
disabled
|
|
647
|
+
disabled
|
|
636
648
|
/>
|
|
637
649
|
{/* template mdeia type */}
|
|
638
650
|
{renderLabel('mediaLabel')}
|
|
639
|
-
<CapRadioGroup
|
|
651
|
+
<CapRadioGroup
|
|
652
|
+
options={mediaRadioOptions || []}
|
|
653
|
+
defaultValue={WHATSAPP_MEDIA_TYPES.TEXT}
|
|
654
|
+
/>
|
|
640
655
|
{/* template message create flow */}
|
|
641
|
-
<
|
|
642
|
-
{
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
title={
|
|
650
|
-
<FormattedMessage
|
|
651
|
-
{...messages.templateMessageTooltip}
|
|
652
|
-
values={{
|
|
653
|
-
br: <br />,
|
|
654
|
-
var: '{{1}}',
|
|
656
|
+
<CapHeader
|
|
657
|
+
title={
|
|
658
|
+
<CapHeading type="h4" className="whatsapp-render-heading">
|
|
659
|
+
{formatMessage(messages.templateMessageLabel)}
|
|
660
|
+
<CapTooltipWithInfo
|
|
661
|
+
placement="right"
|
|
662
|
+
infoIconProps={{
|
|
663
|
+
style: { marginLeft: CAP_SPACE_04 },
|
|
655
664
|
}}
|
|
665
|
+
autoAdjustOverflow
|
|
666
|
+
title={
|
|
667
|
+
<FormattedMessage
|
|
668
|
+
{...messages.templateMessageTooltip}
|
|
669
|
+
values={{
|
|
670
|
+
br: <br />,
|
|
671
|
+
var: '{{1}}',
|
|
672
|
+
}}
|
|
673
|
+
/>
|
|
674
|
+
}
|
|
656
675
|
/>
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
676
|
+
</CapHeading>
|
|
677
|
+
}
|
|
678
|
+
suffix={
|
|
679
|
+
<CapButton
|
|
680
|
+
type="flat"
|
|
681
|
+
isAddBtn
|
|
682
|
+
onClick={onAddVar}
|
|
683
|
+
disabled={addedVarCount >= 19 || templateMessageError}
|
|
684
|
+
>
|
|
685
|
+
{formatMessage(messages.addVar)}
|
|
686
|
+
</CapButton>
|
|
687
|
+
}
|
|
688
|
+
/>
|
|
660
689
|
<CapRow className="whatsapp-create-template-message-input">
|
|
661
690
|
<TextArea
|
|
662
691
|
id={`whatsapp-create-template-message-input`}
|
|
@@ -916,12 +945,8 @@ export const Whatsapp = (props) => {
|
|
|
916
945
|
{isEditFlow ? editModeContent : createModeContent}
|
|
917
946
|
<div className="whatsapp-scroll-div" />
|
|
918
947
|
</CapColumn>
|
|
919
|
-
<CapColumn span={
|
|
920
|
-
|
|
921
|
-
<CapColumn span={24} offset={9}>
|
|
922
|
-
{getPreviewSection()}
|
|
923
|
-
</CapColumn>
|
|
924
|
-
</CapRow>
|
|
948
|
+
<CapColumn span={10} className="whatsapp-preview-container">
|
|
949
|
+
{getPreviewSection()}
|
|
925
950
|
</CapColumn>
|
|
926
951
|
</CapRow>
|
|
927
952
|
<WhatsappFooter>
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
.whatsapp-edit-disabled {
|
|
44
44
|
cursor: not-allowed;
|
|
45
45
|
opacity: 0.4;
|
|
46
|
+
overflow-wrap: anywhere;
|
|
46
47
|
}
|
|
47
48
|
#whatsapp-create-template-message-input {
|
|
48
49
|
margin-left: $CAP_SPACE_16;
|
|
@@ -52,4 +53,10 @@
|
|
|
52
53
|
#select-whatsapp-category {
|
|
53
54
|
width: 100%;
|
|
54
55
|
}
|
|
56
|
+
|
|
57
|
+
.whatsapp-preview-container {
|
|
58
|
+
.cap-row-v2 {
|
|
59
|
+
position: fixed;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
55
62
|
}
|
|
@@ -233,4 +233,12 @@ export default defineMessages({
|
|
|
233
233
|
id: `${prefix}.disabledEditTooltipStatus`,
|
|
234
234
|
defaultMessage: 'awaiting for approval',
|
|
235
235
|
},
|
|
236
|
-
|
|
236
|
+
addVar: {
|
|
237
|
+
id: `${prefix}.addVar`,
|
|
238
|
+
defaultMessage: 'Add variables',
|
|
239
|
+
},
|
|
240
|
+
useTwoBracketsOnly: {
|
|
241
|
+
id: `${prefix}.useTwoBracketsOnly`,
|
|
242
|
+
defaultMessage: 'Use two brackets on each side to declare a variable',
|
|
243
|
+
},
|
|
244
|
+
});
|