@capillarytech/creatives-library 8.0.92 → 8.0.94

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 (31) hide show
  1. package/containers/Templates/constants.js +7 -0
  2. package/containers/Templates/index.js +43 -24
  3. package/package.json +1 -1
  4. package/services/api.js +1 -7
  5. package/services/tests/api.test.js +1 -5
  6. package/v2Components/CapImageUpload/index.js +10 -13
  7. package/v2Components/CapVideoUpload/index.js +9 -12
  8. package/v2Components/CapWhatsappCTA/messages.js +0 -4
  9. package/v2Components/TemplatePreview/_templatePreview.scss +0 -20
  10. package/v2Components/TemplatePreview/index.js +105 -160
  11. package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap +6 -6
  12. package/v2Containers/CreativesContainer/index.js +5 -92
  13. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +0 -1
  14. package/v2Containers/Templates/_templates.scss +0 -47
  15. package/v2Containers/Templates/index.js +5 -55
  16. package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +156 -177
  17. package/v2Containers/Whatsapp/constants.js +1 -87
  18. package/v2Containers/Whatsapp/index.js +189 -707
  19. package/v2Containers/Whatsapp/index.scss +1 -52
  20. package/v2Containers/Whatsapp/messages.js +2 -38
  21. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +91371 -30860
  22. package/v2Containers/Whatsapp/tests/__snapshots__/utils.test.js.snap +0 -6
  23. package/v2Containers/Whatsapp/tests/utils.test.js +1 -80
  24. package/v2Containers/Whatsapp/utils.js +0 -34
  25. package/v2Containers/mockdata.js +0 -2
  26. package/v2Components/CapWhatsappCarouselButton/constant.js +0 -56
  27. package/v2Components/CapWhatsappCarouselButton/index.js +0 -446
  28. package/v2Components/CapWhatsappCarouselButton/index.scss +0 -39
  29. package/v2Components/CapWhatsappCarouselButton/tests/index.test.js +0 -237
  30. package/v2Components/TemplatePreview/assets/images/empty_image_preview.svg +0 -4
  31. package/v2Components/TemplatePreview/assets/images/empty_video_preview.svg +0 -4
package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap CHANGED
@@ -1115,75 +1115,68 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
1115
1115
  Array [
1116
1116
  Object {
1117
1117
  "content": <React.Fragment>
1118
- <div
1119
- className="whatsapp-container"
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"
1120
1125
  >
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
- />
1125
1126
 
1126
- <span
1127
- className="whatsapp-message-with-media"
1127
+ <CapLabel
1128
+ type="label9"
1128
1129
  >
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}}
1130
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1134
1131
  Click {{unsubscribe}} to unsubscribe
1135
- </CapLabel>
1136
-
1137
- </span>
1138
- <CapLabel
1139
- style={
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={
1140
1147
  Object {
1141
- "marginTop": "12px",
1142
- "textAlign": "center",
1148
+ "style": Object {
1149
+ "marginRight": "4px",
1150
+ },
1143
1151
  }
1144
1152
  }
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={
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={
1162
1169
  Object {
1163
- "marginTop": "12px",
1164
- "textAlign": "center",
1170
+ "style": Object {
1171
+ "marginRight": "4px",
1172
+ },
1165
1173
  }
1166
1174
  }
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
- />
1175
+ type="launch"
1176
+ />
1177
+ Visit
1178
+ </CapLabel>
1179
+ <React.Fragment />
1187
1180
  </React.Fragment>,
1188
1181
  "extra": Array [
1189
1182
  <React.Fragment>
@@ -1601,75 +1594,68 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
1601
1594
  Array [
1602
1595
  Object {
1603
1596
  "content": <React.Fragment>
1604
- <div
1605
- className="whatsapp-container"
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"
1606
1604
  >
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
- />
1611
1605
 
1612
- <span
1613
- className="whatsapp-message-with-media"
1606
+ <CapLabel
1607
+ type="label9"
1614
1608
  >
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}}
1609
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
1620
1610
  Click {{unsubscribe}} to unsubscribe
1621
- </CapLabel>
1622
-
1623
- </span>
1624
- <CapLabel
1625
- style={
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={
1626
1626
  Object {
1627
- "marginTop": "12px",
1628
- "textAlign": "center",
1627
+ "style": Object {
1628
+ "marginRight": "4px",
1629
+ },
1629
1630
  }
1630
1631
  }
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={
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={
1648
1648
  Object {
1649
- "marginTop": "12px",
1650
- "textAlign": "center",
1649
+ "style": Object {
1650
+ "marginRight": "4px",
1651
+ },
1651
1652
  }
1652
1653
  }
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
- />
1654
+ type="launch"
1655
+ />
1656
+ Visit
1657
+ </CapLabel>
1658
+ <React.Fragment />
1673
1659
  </React.Fragment>,
1674
1660
  "extra": Array [
1675
1661
  <React.Fragment>
@@ -2087,75 +2073,68 @@ exports[`Test Templates container Test max templates warning 1`] = `
2087
2073
  Array [
2088
2074
  Object {
2089
2075
  "content": <React.Fragment>
2090
- <div
2091
- className="whatsapp-container"
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"
2092
2083
  >
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
- />
2097
2084
 
2098
- <span
2099
- className="whatsapp-message-with-media"
2085
+ <CapLabel
2086
+ type="label9"
2100
2087
  >
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}}
2088
+ Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
2106
2089
  Click {{unsubscribe}} to unsubscribe
2107
- </CapLabel>
2108
-
2109
- </span>
2110
- <CapLabel
2111
- style={
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={
2112
2105
  Object {
2113
- "marginTop": "12px",
2114
- "textAlign": "center",
2106
+ "style": Object {
2107
+ "marginRight": "4px",
2108
+ },
2115
2109
  }
2116
2110
  }
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={
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={
2134
2127
  Object {
2135
- "marginTop": "12px",
2136
- "textAlign": "center",
2128
+ "style": Object {
2129
+ "marginRight": "4px",
2130
+ },
2137
2131
  }
2138
2132
  }
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
- />
2133
+ type="launch"
2134
+ />
2135
+ Visit
2136
+ </CapLabel>
2137
+ <React.Fragment />
2159
2138
  </React.Fragment>,
2160
2139
  "extra": Array [
2161
2140
  <React.Fragment>
package/v2Containers/Whatsapp/constants.js CHANGED
@@ -54,56 +54,6 @@ 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
-
107
57
  export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
108
58
  {
109
59
  key: 'utility',
@@ -262,17 +212,14 @@ export const WHATSAPP_MEDIA_TYPES = {
262
212
  IMAGE: 'IMAGE',
263
213
  VIDEO: 'VIDEO',
264
214
  DOCUMENT: 'DOCUMENT',
265
- CAROUSEL: 'CAROUSEL',
266
215
  };
267
216
  export const NONE = 'NONE';
268
217
  export const CTA = 'CTA';
269
218
  export const QUICK_REPLY = 'QUICK_REPLY';
270
219
  export const HEADER_TEXT = 'header';
271
220
  export const FOOTER_TEXT = 'footer';
272
- export const CAROUSEL_TEXT = 'carouselText';
273
221
  export const MESSAGE_TEXT = 'message';
274
- export const BODY_TEXT = 'body';
275
- export const BUTTON_TEXT = 'buttonText';
222
+ export const BUTTON_TEXT = 'buttonText'
276
223
  export const WHATSAPP_BUTTON_TYPES = {
277
224
  NONE,
278
225
  CTA,
@@ -280,9 +227,6 @@ export const WHATSAPP_BUTTON_TYPES = {
280
227
  };
281
228
  export const PHONE_NUMBER = 'PHONE_NUMBER';
282
229
  export const STATIC_URL = 'STATIC_URL';
283
- export const URL = 'URL';
284
- export const IMAGE = 'IMAGE';
285
- export const VIDEO = 'VIDEO';
286
230
  export const INITIAL_CTA_DATA = [
287
231
  {
288
232
  index: 0,
@@ -614,36 +558,6 @@ export const LANGUAGE_OPTIONS = [
614
558
  },
615
559
  ];
616
560
 
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
-
647
561
  export const OTP_CONFIG_URI = "/org/setup/configurations/OTPConfigurations";
648
562
  export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
649
563
  export const CORRECT_TEMPLATE_FORMAT_URL = "https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines";