@capillarytech/creatives-library 4.1.1 → 6.0.1

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 (5) hide show
  1. package/components/FormBuilder/index.js +50 -9
  2. package/components/FormBuilder/messages.js +12 -0
  3. package/package.json +1 -1
  4. package/v2Components/FormBuilder/index.js +50 -11
  5. package/v2Components/FormBuilder/messages.js +12 -0
package/components/FormBuilder/index.js CHANGED
@@ -27,6 +27,12 @@ import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
27
27
  import messages from './messages';
28
28
  const TabPane = Tabs.TabPane;
29
29
  const {Column} = Table;
30
+
31
+ const errorMessageForTags = {
32
+ UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
33
+ MISSING_TAG_ERROR: 'missingTagsError',
34
+ GENERIC_VALIDATION_ERROR: 'genericValidationError',
35
+ };
30
36
  // import styled from 'styled-components';
31
37
 
32
38
  // import { FormattedMessage } from 'react-intl';
@@ -437,8 +443,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
437
443
  if (tagValidationResponse.valid) {
438
444
  errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
439
445
  } else {
440
-
441
- errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
446
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, GENERIC_VALIDATION_ERROR } = errorMessageForTags;
447
+ const { missingTags, unsupportedTags} = tagValidationResponse;
448
+ errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : ( unsupportedTags && unsupportedTags.length ? UNSUPPORTED_TAG_ERROR : GENERIC_VALIDATION_ERROR);
442
449
  isValid = false;
443
450
  }
444
451
  if(content !== '' && (ifUnicode && !unicodeCheck)) {
@@ -446,7 +453,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
446
453
  isValid = false;
447
454
  } else if (content === '') {
448
455
 
449
- errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
456
+ errorData[count][`sms-editor${index > 1 ? index : ''}`] = errorMessageForTags.GENERIC_VALIDATION_ERROR;
450
457
  isValid = false;
451
458
  } else {
452
459
  errorData[count][`unicode-validity${index > 1 ? index : ''}`] = false;
@@ -2118,6 +2125,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2118
2125
  });
2119
2126
  }
2120
2127
 
2128
+ getMissingTagsName = (content = '') => {
2129
+ const tagValidationResponse = this.validateTags(content);
2130
+ const errorString = tagValidationResponse.missingTags.join(', ').toString();
2131
+ return errorString;
2132
+ };
2133
+
2134
+ getUnsupportedTagsName = (content = '') => {
2135
+ const tagValidationResponse = this.validateTags(content);
2136
+ const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
2137
+ return errorString;
2138
+ };
2139
+
2121
2140
  renderColLabelSection(section, childIndex) {
2122
2141
  // const schema = this.props.schema
2123
2142
  const fields = [];
@@ -2195,18 +2214,29 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2195
2214
  break;
2196
2215
  case "textarea":
2197
2216
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2217
+ const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2218
+ const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2219
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2220
+ let errorMessage = false;
2221
+ if (errorType && errorType === MISSING_TAG_ERROR) {
2222
+ errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2223
+ } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2224
+ errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2225
+ } else if (errorType) {
2226
+ errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
2227
+ }
2198
2228
  if (styling === 'semantic') {
2199
2229
  columns.push(
2200
2230
  <Col key="input" span={val.width}>
2201
2231
  <CapTextArea
2202
2232
  id={val.id}
2203
2233
  className={`${ifError ? 'error' : ''}`}
2204
- errorMessage={val.errorMessage ? val.errorMessage : ''}
2234
+ errorMessage={errorMessage}
2205
2235
  autosize={val.autosize ? val.autosizeParams : false}
2206
2236
  onChange={(e) => this.updateFormData(e.target.value, val)}
2207
2237
  style={val.style ? val.style : {}}
2208
- defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2209
- value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2238
+ defaultValue={messageContent}
2239
+ value={messageContent}
2210
2240
  rows={20}
2211
2241
  disabled={val.disabled}
2212
2242
  cols={20}
@@ -2552,6 +2582,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2552
2582
  break;
2553
2583
  case "textarea":
2554
2584
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2585
+ const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2586
+ const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2587
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2588
+ let errorMessage = false;
2589
+ if (errorType && errorType === MISSING_TAG_ERROR) {
2590
+ errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2591
+ } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2592
+ errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2593
+ } else if (errorType) {
2594
+ errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
2595
+ }
2555
2596
  if (styling === 'semantic') {
2556
2597
  columns.push(
2557
2598
  <Col key="input" span={val.width} offset={val.offset}>
@@ -2560,12 +2601,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2560
2601
  placeholder={val.placeholder ? val.placeholder : ''}
2561
2602
  disabled={val.disabled}
2562
2603
  className={`${ifError ? 'error' : ''}`}
2563
- errorMessage={val.errorMessage ? val.errorMessage : ''}
2604
+ errorMessage={errorMessage}
2564
2605
  autosize={val.autosize ? val.autosizeParams : false}
2565
2606
  onChange={(e) => this.updateFormData(e.target.value, val)}
2566
2607
  style={val.style ? val.style : {}}
2567
- defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2568
- value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2608
+ defaultValue={messageContent || ''}
2609
+ value={messageContent || ''}
2569
2610
  rows={10}
2570
2611
  cols={2}
2571
2612
  />
package/components/FormBuilder/messages.js CHANGED
@@ -22,6 +22,18 @@ export default defineMessages({
22
22
  id: 'creatives.components.FormBuilder.unsupportedTags',
23
23
  defaultMessage: 'Unsupported tags are:',
24
24
  },
25
+ missingTagsValidationError: {
26
+ id: 'creatives.components.FormBuilder.missingTagsValidationError',
27
+ defaultMessage: 'Missing tags: {missingTags}. Please add them to this message.',
28
+ },
29
+ unsupportedTagsValidationError: {
30
+ id: 'creatives.components.FormBuilder.unsupportedTagsValidationError',
31
+ defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
32
+ },
33
+ genericTagsValidationError: {
34
+ id: 'creatives.components.FormBuilder.genericTagsValidationError',
35
+ defaultMessage: 'Please check the message content for unsupported/missing tags',
36
+ },
25
37
  layoutSelection: {
26
38
  id: 'creatives.components.FormBuilder.layoutSelection',
27
39
  defaultMessage: 'Layout Selection',
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "4.1.1",
4
+ "version": "6.0.1",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/v2Components/FormBuilder/index.js CHANGED
@@ -32,6 +32,12 @@ const {TextArea} = CapInput;
32
32
  const {CapRadioGroup} = CapRadio;
33
33
  // import styled from 'styled-components';
34
34
 
35
+ const errorMessageForTags = {
36
+ UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
37
+ MISSING_TAG_ERROR: 'missingTagsError',
38
+ GENERIC_VALIDATION_ERROR: 'genericValidationError',
39
+ };
40
+
35
41
  const isUrl = (str) => {
36
42
  // eslint-disable-next-line no-useless-escape
37
43
  const res = str.match(/(http(s)?:\/\/.)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
@@ -468,15 +474,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
468
474
  errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
469
475
  } else {
470
476
  errorData[count]['invalid-tags'] = tagValidationResponse.unsupportedTags;
471
- errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
477
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, GENERIC_VALIDATION_ERROR } = errorMessageForTags;
478
+ const { missingTags, unsupportedTags} = tagValidationResponse;
479
+ errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : ( unsupportedTags && unsupportedTags.length ? UNSUPPORTED_TAG_ERROR : GENERIC_VALIDATION_ERROR);
472
480
  isValid = false;
473
481
  }
474
482
  if(content !== '' && (ifUnicode && !unicodeCheck)) {
475
483
  errorData[count][`unicode-validity${index > 1 ? index : ''}`] = true;
476
484
  isValid = false;
477
485
  } else if (content === '') {
478
-
479
- errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
486
+ errorData[count][`sms-editor${index > 1 ? index : ''}`] = errorMessageForTags.GENERIC_VALIDATION_ERROR;
480
487
  isValid = false;
481
488
  } else {
482
489
  errorData[count][`unicode-validity${index > 1 ? index : ''}`] = false;
@@ -2231,6 +2238,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2231
2238
  });
2232
2239
  }
2233
2240
 
2241
+ getMissingTagsName = (content = '') => {
2242
+ const tagValidationResponse = this.validateTags(content);
2243
+ const errorString = tagValidationResponse.missingTags.join(', ').toString();
2244
+ return errorString;
2245
+ };
2246
+
2247
+ getUnsupportedTagsName = (content = '') => {
2248
+ const tagValidationResponse = this.validateTags(content);
2249
+ const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
2250
+ return errorString;
2251
+ };
2252
+
2234
2253
  renderColLabelSection(section, childIndex) {
2235
2254
  // const schema = this.props.schema
2236
2255
  const fields = [];
@@ -2293,20 +2312,30 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2293
2312
  break;
2294
2313
  case "textarea":
2295
2314
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2296
- const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2315
+ const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2316
+ const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2317
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2318
+ let errorMessageText = false;
2319
+ if (errorType && errorType === MISSING_TAG_ERROR) {
2320
+ errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2321
+ } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2322
+ errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2323
+ } else if (errorType) {
2324
+ errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
2325
+ }
2297
2326
  if (styling === 'semantic') {
2298
2327
  columns.push(
2299
2328
  <CapColumn key="input" span={val.width}>
2300
2329
  <TextArea
2301
2330
  id={val.id}
2302
2331
  className={`${ifError ? 'error' : ''}`}
2303
- errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
2332
+ errorMessage={errorMessageText}
2304
2333
  label={val.label}
2305
2334
  autosize={val.autosize ? val.autosizeParams : false}
2306
2335
  onChange={(e) => this.updateFormData(e.target.value, val)}
2307
2336
  style={val.style ? val.style : {}}
2308
- defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2309
- value={value || ""}
2337
+ defaultValue={messageContent || ''}
2338
+ value={messageContent || ""}
2310
2339
  rows={20}
2311
2340
  disabled={val.disabled}
2312
2341
  cols={20}
@@ -2728,7 +2757,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2728
2757
 
2729
2758
  case "textarea":
2730
2759
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2731
- const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2760
+ const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2761
+ const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2762
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2763
+ let errorMessageText = false;
2764
+ if (errorType && errorType === MISSING_TAG_ERROR) {
2765
+ errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2766
+ } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2767
+ errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2768
+ } else if (errorType) {
2769
+ errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
2770
+ }
2732
2771
  if (styling === 'semantic') {
2733
2772
  columns.push(
2734
2773
  <CapColumn key="input" span={val.width} offset={val.offset}>
@@ -2737,13 +2776,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2737
2776
  placeholder={val.placeholder ? val.placeholder : ''}
2738
2777
  disabled={val.disabled}
2739
2778
  className={`${ifError ? 'error' : ''}`}
2740
- errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
2779
+ errorMessage={errorMessageText}
2741
2780
  label={val.label}
2742
2781
  autosize={val.autosize ? val.autosizeParams : false}
2743
2782
  onChange={(e) => this.updateFormData(e.target.value, val)}
2744
2783
  style={val.style ? val.style : {}}
2745
- defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
2746
- value={textValue || ""}
2784
+ defaultValue={messageContent || ''}
2785
+ value={messageContent || ""}
2747
2786
  rows={10}
2748
2787
  cols={2}
2749
2788
  />
package/v2Components/FormBuilder/messages.js CHANGED
@@ -22,6 +22,18 @@ export default defineMessages({
22
22
  id: 'creatives.componentsV2.FormBuilder.ok',
23
23
  defaultMessage: 'Ok',
24
24
  },
25
+ missingTagsValidationError: {
26
+ id: 'creatives.components.FormBuilder.missingTagsValidationError',
27
+ defaultMessage: 'Missing tags: {missingTags}. Please add them to this message.',
28
+ },
29
+ unsupportedTagsValidationError: {
30
+ id: 'creatives.components.FormBuilder.unsupportedTagsValidationError',
31
+ defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
32
+ },
33
+ genericTagsValidationError: {
34
+ id: 'creatives.components.FormBuilder.genericTagsValidationError',
35
+ defaultMessage: 'Please check the message content for unsupported/missing tags',
36
+ },
25
37
  contentNotValidLanguage: {
26
38
  id: 'creatives.componentsV2.FormBuilder.contentNotValidLanguage',
27
39
  defaultMessage: 'Content is not valid for language:',