@capillarytech/creatives-library 8.0.90 → 8.0.91

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 (29) hide show
  1. package/package.json +1 -1
  2. package/services/api.js +7 -1
  3. package/services/tests/api.test.js +5 -1
  4. package/v2Components/CapImageUpload/index.js +13 -10
  5. package/v2Components/CapVideoUpload/index.js +12 -9
  6. package/v2Components/CapWhatsappCTA/messages.js +4 -0
  7. package/v2Components/CapWhatsappCarouselButton/constant.js +56 -0
  8. package/v2Components/CapWhatsappCarouselButton/index.js +446 -0
  9. package/v2Components/CapWhatsappCarouselButton/index.scss +39 -0
  10. package/v2Components/CapWhatsappCarouselButton/tests/index.test.js +237 -0
  11. package/v2Components/TemplatePreview/_templatePreview.scss +9 -0
  12. package/v2Components/TemplatePreview/assets/images/empty_image_preview.svg +4 -0
  13. package/v2Components/TemplatePreview/assets/images/empty_video_preview.svg +4 -0
  14. package/v2Components/TemplatePreview/index.js +171 -105
  15. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +6 -6
  16. package/v2Containers/CreativesContainer/index.js +91 -4
  17. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +1 -0
  18. package/v2Containers/Templates/_templates.scss +47 -0
  19. package/v2Containers/Templates/index.js +55 -5
  20. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +177 -156
  21. package/v2Containers/Whatsapp/constants.js +87 -1
  22. package/v2Containers/Whatsapp/index.js +707 -189
  23. package/v2Containers/Whatsapp/index.scss +52 -1
  24. package/v2Containers/Whatsapp/messages.js +38 -2
  25. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +30183 -90694
  26. package/v2Containers/Whatsapp/tests/__snapshots__/utils.test.js.snap +6 -0
  27. package/v2Containers/Whatsapp/tests/utils.test.js +80 -1
  28. package/v2Containers/Whatsapp/utils.js +34 -0
  29. package/v2Containers/mockdata.js +2 -0
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -1115,68 +1115,75 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1115
1115
  Array [
1116
1116
  Object {
1117
1117
  "content": <React.Fragment>
1118
- <CapImage
1119
- className="whatsapp-image"
1120
- src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
1121
- />
1122
-
1123
- <span
1124
- className="whatsapp-message-with-media"
1118
+ <div
1119
+ className="whatsapp-container"
1125
1120
  >
1121
+ <CapImage
1122
+ className="whatsapp-image"
1123
+ src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
1124
+ />
1126
1125
 
1127
- <CapLabel
1128
- type="label9"
1126
+ <span
1127
+ className="whatsapp-message-with-media"
1129
1128
  >
1130
- Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1129
+
1130
+ <CapLabel
1131
+ type="label9"
1132
+ >
1133
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1131
1134
  Click {{unsubscribe}} to unsubscribe
1132
- </CapLabel>
1133
-
1134
- </span>
1135
- <CapLabel
1136
- style={
1137
- Object {
1138
- "marginTop": "12px",
1139
- "textAlign": "center",
1140
- }
1141
- }
1142
- type="label21"
1143
- >
1144
- <CapIcon
1145
- size="xs"
1146
- svgProps={
1135
+ </CapLabel>
1136
+
1137
+ </span>
1138
+ <CapLabel
1139
+ style={
1147
1140
  Object {
1148
- "style": Object {
1149
- "marginRight": "4px",
1150
- },
1141
+ "marginTop": "12px",
1142
+ "textAlign": "center",
1151
1143
  }
1152
1144
  }
1153
- type="call"
1154
- />
1155
- Call
1156
- </CapLabel>
1157
- <CapLabel
1158
- style={
1159
- Object {
1160
- "marginTop": "12px",
1161
- "textAlign": "center",
1162
- }
1163
- }
1164
- type="label21"
1165
- >
1166
- <CapIcon
1167
- size="xs"
1168
- svgProps={
1145
+ type="label21"
1146
+ >
1147
+ <CapIcon
1148
+ size="xs"
1149
+ svgProps={
1150
+ Object {
1151
+ "style": Object {
1152
+ "marginRight": "4px",
1153
+ },
1154
+ }
1155
+ }
1156
+ type="call"
1157
+ />
1158
+ Call
1159
+ </CapLabel>
1160
+ <CapLabel
1161
+ style={
1169
1162
  Object {
1170
- "style": Object {
1171
- "marginRight": "4px",
1172
- },
1163
+ "marginTop": "12px",
1164
+ "textAlign": "center",
1173
1165
  }
1174
1166
  }
1175
- type="launch"
1176
- />
1177
- Visit
1178
- </CapLabel>
1179
- <React.Fragment />
1167
+ type="label21"
1168
+ >
1169
+ <CapIcon
1170
+ size="xs"
1171
+ svgProps={
1172
+ Object {
1173
+ "style": Object {
1174
+ "marginRight": "4px",
1175
+ },
1176
+ }
1177
+ }
1178
+ type="launch"
1179
+ />
1180
+ Visit
1181
+ </CapLabel>
1182
+ <React.Fragment />
1183
+ </div>
1184
+ <div
1185
+ className="scroll-container"
1186
+ />
1180
1187
  </React.Fragment>,
1181
1188
  "extra": Array [
1182
1189
  <React.Fragment>
@@ -1594,68 +1601,75 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1594
1601
  Array [
1595
1602
  Object {
1596
1603
  "content": <React.Fragment>
1597
- <CapImage
1598
- className="whatsapp-image"
1599
- src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
1600
- />
1601
-
1602
- <span
1603
- className="whatsapp-message-with-media"
1604
+ <div
1605
+ className="whatsapp-container"
1604
1606
  >
1607
+ <CapImage
1608
+ className="whatsapp-image"
1609
+ src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
1610
+ />
1605
1611
 
1606
- <CapLabel
1607
- type="label9"
1612
+ <span
1613
+ className="whatsapp-message-with-media"
1608
1614
  >
1609
- Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1615
+
1616
+ <CapLabel
1617
+ type="label9"
1618
+ >
1619
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1610
1620
  Click {{unsubscribe}} to unsubscribe
1611
- </CapLabel>
1612
-
1613
- </span>
1614
- <CapLabel
1615
- style={
1616
- Object {
1617
- "marginTop": "12px",
1618
- "textAlign": "center",
1619
- }
1620
- }
1621
- type="label21"
1622
- >
1623
- <CapIcon
1624
- size="xs"
1625
- svgProps={
1621
+ </CapLabel>
1622
+
1623
+ </span>
1624
+ <CapLabel
1625
+ style={
1626
1626
  Object {
1627
- "style": Object {
1628
- "marginRight": "4px",
1629
- },
1627
+ "marginTop": "12px",
1628
+ "textAlign": "center",
1630
1629
  }
1631
1630
  }
1632
- type="call"
1633
- />
1634
- Call
1635
- </CapLabel>
1636
- <CapLabel
1637
- style={
1638
- Object {
1639
- "marginTop": "12px",
1640
- "textAlign": "center",
1641
- }
1642
- }
1643
- type="label21"
1644
- >
1645
- <CapIcon
1646
- size="xs"
1647
- svgProps={
1631
+ type="label21"
1632
+ >
1633
+ <CapIcon
1634
+ size="xs"
1635
+ svgProps={
1636
+ Object {
1637
+ "style": Object {
1638
+ "marginRight": "4px",
1639
+ },
1640
+ }
1641
+ }
1642
+ type="call"
1643
+ />
1644
+ Call
1645
+ </CapLabel>
1646
+ <CapLabel
1647
+ style={
1648
1648
  Object {
1649
- "style": Object {
1650
- "marginRight": "4px",
1651
- },
1649
+ "marginTop": "12px",
1650
+ "textAlign": "center",
1652
1651
  }
1653
1652
  }
1654
- type="launch"
1655
- />
1656
- Visit
1657
- </CapLabel>
1658
- <React.Fragment />
1653
+ type="label21"
1654
+ >
1655
+ <CapIcon
1656
+ size="xs"
1657
+ svgProps={
1658
+ Object {
1659
+ "style": Object {
1660
+ "marginRight": "4px",
1661
+ },
1662
+ }
1663
+ }
1664
+ type="launch"
1665
+ />
1666
+ Visit
1667
+ </CapLabel>
1668
+ <React.Fragment />
1669
+ </div>
1670
+ <div
1671
+ className="scroll-container"
1672
+ />
1659
1673
  </React.Fragment>,
1660
1674
  "extra": Array [
1661
1675
  <React.Fragment>
@@ -2073,68 +2087,75 @@ exports[`Test Templates container Test max templates warning 1`] = `
2073
2087
  Array [
2074
2088
  Object {
2075
2089
  "content": <React.Fragment>
2076
- <CapImage
2077
- className="whatsapp-image"
2078
- src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
2079
- />
2080
-
2081
- <span
2082
- className="whatsapp-message-with-media"
2090
+ <div
2091
+ className="whatsapp-container"
2083
2092
  >
2093
+ <CapImage
2094
+ className="whatsapp-image"
2095
+ src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
2096
+ />
2084
2097
 
2085
- <CapLabel
2086
- type="label9"
2098
+ <span
2099
+ className="whatsapp-message-with-media"
2087
2100
  >
2088
- Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
2101
+
2102
+ <CapLabel
2103
+ type="label9"
2104
+ >
2105
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
2089
2106
  Click {{unsubscribe}} to unsubscribe
2090
- </CapLabel>
2091
-
2092
- </span>
2093
- <CapLabel
2094
- style={
2095
- Object {
2096
- "marginTop": "12px",
2097
- "textAlign": "center",
2098
- }
2099
- }
2100
- type="label21"
2101
- >
2102
- <CapIcon
2103
- size="xs"
2104
- svgProps={
2107
+ </CapLabel>
2108
+
2109
+ </span>
2110
+ <CapLabel
2111
+ style={
2105
2112
  Object {
2106
- "style": Object {
2107
- "marginRight": "4px",
2108
- },
2113
+ "marginTop": "12px",
2114
+ "textAlign": "center",
2109
2115
  }
2110
2116
  }
2111
- type="call"
2112
- />
2113
- Call
2114
- </CapLabel>
2115
- <CapLabel
2116
- style={
2117
- Object {
2118
- "marginTop": "12px",
2119
- "textAlign": "center",
2120
- }
2121
- }
2122
- type="label21"
2123
- >
2124
- <CapIcon
2125
- size="xs"
2126
- svgProps={
2117
+ type="label21"
2118
+ >
2119
+ <CapIcon
2120
+ size="xs"
2121
+ svgProps={
2122
+ Object {
2123
+ "style": Object {
2124
+ "marginRight": "4px",
2125
+ },
2126
+ }
2127
+ }
2128
+ type="call"
2129
+ />
2130
+ Call
2131
+ </CapLabel>
2132
+ <CapLabel
2133
+ style={
2127
2134
  Object {
2128
- "style": Object {
2129
- "marginRight": "4px",
2130
- },
2135
+ "marginTop": "12px",
2136
+ "textAlign": "center",
2131
2137
  }
2132
2138
  }
2133
- type="launch"
2134
- />
2135
- Visit
2136
- </CapLabel>
2137
- <React.Fragment />
2139
+ type="label21"
2140
+ >
2141
+ <CapIcon
2142
+ size="xs"
2143
+ svgProps={
2144
+ Object {
2145
+ "style": Object {
2146
+ "marginRight": "4px",
2147
+ },
2148
+ }
2149
+ }
2150
+ type="launch"
2151
+ />
2152
+ Visit
2153
+ </CapLabel>
2154
+ <React.Fragment />
2155
+ </div>
2156
+ <div
2157
+ className="scroll-container"
2158
+ />
2138
2159
  </React.Fragment>,
2139
2160
  "extra": Array [
2140
2161
  <React.Fragment>
package/v2Containers/Whatsapp/constants.js CHANGED
@@ -54,6 +54,56 @@ export const WHATSAPP_CATEGORIES = {
54
54
  transactional: 'TRANSACTIONAL',
55
55
  };
56
56
 
57
+ export const mediaTypeOptions = ({host, templateCategory}) => {
58
+ return [
59
+ {
60
+ key: 'TEXT',
61
+ value: WHATSAPP_MEDIA_TYPES.TEXT,
62
+ label: <FormattedMessage {...messages.none} />,
63
+ tagColor: CAP_PURPLE03,
64
+ tagTextColor: CAP_PURPLE02,
65
+ },
66
+ ...(host === HOST_TWILIO
67
+ ? []
68
+ : [
69
+ {
70
+ key: 'IMAGE',
71
+ value: WHATSAPP_MEDIA_TYPES.IMAGE,
72
+ label: <FormattedMessage {...messages.mediaImage} />,
73
+ tagColor: CAP_ORANGE01,
74
+ tagTextColor: CAP_ORANGE,
75
+ },
76
+ {
77
+ key: 'VIDEO',
78
+ value: WHATSAPP_MEDIA_TYPES.VIDEO,
79
+ label: <FormattedMessage {...messages.mediaVideo} />,
80
+ tagColor: CAP_GREEN02,
81
+ tagTextColor: CAP_GREEN01,
82
+ },
83
+ ...(templateCategory === WHATSAPP_CATEGORIES.marketing
84
+ ? [
85
+ {
86
+ key: 'CAROUSEL',
87
+ value: WHATSAPP_MEDIA_TYPES.CAROUSEL,
88
+ label: <FormattedMessage {...messages.mediaCarousel} />,
89
+ tagColor: CAP_PURPLE03,
90
+ tagTextColor: CAP_PURPLE02,
91
+ },
92
+ ]
93
+ : []
94
+ ),
95
+ {
96
+ key: 'DOCUMENT',
97
+ value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
98
+ label: <FormattedMessage {...messages.mediaDocument} />,
99
+ tagColor: CAP_ORANGE01,
100
+ tagTextColor: CAP_ORANGE,
101
+ },
102
+ ]
103
+ ),
104
+ ];
105
+ };
106
+
57
107
  export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
58
108
  {
59
109
  key: 'utility',
@@ -212,14 +262,17 @@ export const WHATSAPP_MEDIA_TYPES = {
212
262
  IMAGE: 'IMAGE',
213
263
  VIDEO: 'VIDEO',
214
264
  DOCUMENT: 'DOCUMENT',
265
+ CAROUSEL: 'CAROUSEL',
215
266
  };
216
267
  export const NONE = 'NONE';
217
268
  export const CTA = 'CTA';
218
269
  export const QUICK_REPLY = 'QUICK_REPLY';
219
270
  export const HEADER_TEXT = 'header';
220
271
  export const FOOTER_TEXT = 'footer';
272
+ export const CAROUSEL_TEXT = 'carouselText';
221
273
  export const MESSAGE_TEXT = 'message';
222
- export const BUTTON_TEXT = 'buttonText'
274
+ export const BODY_TEXT = 'body';
275
+ export const BUTTON_TEXT = 'buttonText';
223
276
  export const WHATSAPP_BUTTON_TYPES = {
224
277
  NONE,
225
278
  CTA,
@@ -227,6 +280,9 @@ export const WHATSAPP_BUTTON_TYPES = {
227
280
  };
228
281
  export const PHONE_NUMBER = 'PHONE_NUMBER';
229
282
  export const STATIC_URL = 'STATIC_URL';
283
+ export const URL = 'URL';
284
+ export const IMAGE = 'IMAGE';
285
+ export const VIDEO = 'VIDEO';
230
286
  export const INITIAL_CTA_DATA = [
231
287
  {
232
288
  index: 0,
@@ -558,6 +614,36 @@ export const LANGUAGE_OPTIONS = [
558
614
  },
559
615
  ];
560
616
 
617
+ export const carouselMediaOptions = [
618
+ {
619
+ value: 'image',
620
+ label: <FormattedMessage {...messages.mediaImage} />,
621
+ },
622
+ {
623
+ value: 'video',
624
+ label: <FormattedMessage {...messages.mediaVideo} />,
625
+ },
626
+ ];
627
+
628
+ export const CAROUSEL_INITIAL_DATA = [{
629
+ mediaType: '',
630
+ bodyText: '',
631
+ bodyError: '',
632
+ addedVarCount: 0,
633
+ buttons: [
634
+ {
635
+ buttonType: PHONE_NUMBER,
636
+ text: '',
637
+ phone_number: '',
638
+ isSaved: false,
639
+ textError: '',
640
+ },
641
+ ],
642
+ }];
643
+
644
+ // WhatsApp supports a maximum of 10 items in a carousel
645
+ export const MAX_CAROUSEL_ALLOWED = 10;
646
+
561
647
  export const OTP_CONFIG_URI = "/org/setup/configurations/OTPConfigurations";
562
648
  export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
563
649
  export const CORRECT_TEMPLATE_FORMAT_URL = "https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines";