@capillarytech/creatives-library 2.0.31 → 2.0.33

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.
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
9
9
  import React from 'react';
10
10
  import { connect } from 'react-redux';
11
11
  import { bindActionCreators } from 'redux';
12
- import Helmet from 'react-helmet';
13
12
  import { Row, Col, Spin, Popover, Modal, Select } from 'antd';
14
13
  import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
15
14
  import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
@@ -17,12 +16,12 @@ import { createStructuredSelector } from 'reselect';
17
16
  import _ from 'lodash';
18
17
  import moment from "moment";
19
18
  import FormBuilder from '../../components/FormBuilder';
20
- import { makeSelectMetaEntities, makeSelectAuthenticated } from '../Cap/selectors';
19
+ import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities } from '../Cap/selectors';
21
20
  import * as actions from './actions';
22
21
  import * as templatesActions from '../Templates/actions';
23
22
  import * as globalActions from '../../containers/Cap/actions';
24
23
  import { UserIsAuthenticated } from '../../utils/authWrapper';
25
- import makeSelectEmail from './selectors';
24
+ import {makeSelectEmail} from './selectors';
26
25
  import { makeSelectTemplates } from '../Templates/selectors';
27
26
  import messages from './messages';
28
27
  // import PageHeader from '../../components/PageHeader';
@@ -37,6 +36,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
37
36
  constructor(props) {
38
37
  super(props);
39
38
  this.state = {
39
+ loadingStatus: 0,
40
40
  formData: {},
41
41
  tabCount: 1,
42
42
  currentTab: 1,
@@ -47,543 +47,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
47
47
  },
48
48
  isEdit: false,
49
49
  schema: {},
50
- // schema: {
51
- // standalone: {
52
- // sections: [
53
- // {
54
- // type: "col-label",
55
- // inputFields: [
56
- // {
57
- // id: "template-subject",
58
- // placeholder: "Enter Email Subject",
59
- // type: "input",
60
- // metaType: "text",
61
- // datatype: "string",
62
- // required: true,
63
- // label: "Subject",
64
- // style: {
65
- // fontSize: "20px",
66
- // fontFamily: "proxima-nova,sans-serif",
67
- // fontStyle: "normal",
68
- // fontWeight: 600,
69
- // display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs")) ? "" : "none",
70
- // },
71
- // labelStyle: {
72
- // fontSize: "18px",
73
- // fontFamily: "proxima-nova,sans-serif",
74
- // fontStyle: "normal",
75
- // fontWeight: 600,
76
- // display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs")) ? "" : "none",
77
- // background: "white",
78
- // },
79
- // styling: "semantic",
80
- // order: 1,
81
- // width: 9,
82
- // customComponent: false,
83
- // standalone: true,
84
- // onlyDisplay: false,
85
- // errorMessage: "Email Subject cannot be empty.",
86
- // // supportedEvents: [
87
- // // "onChange",
88
- // // ],
89
- // },
90
- // ],
91
- // },
92
- // {
93
- // type: "multicols",
94
- // inputFields: [
95
- // {
96
- // cols: [
97
- // {
98
- // id: "template-name",
99
- // placeholder: "Enter template name",
100
- // type: "input",
101
- // metaType: "text",
102
- // datatype: "string",
103
- // required: true,
104
- // style: {
105
- // fontSize: "20px",
106
- // fontFamily: "proxima-nova,sans-serif",
107
- // fontStyle: "normal",
108
- // fontWeight: 600,
109
- // },
110
- // styling: "semantic",
111
- // order: 1,
112
- // width: 9,
113
- // customComponent: false,
114
- // standalone: true,
115
- // onlyDisplay: false,
116
- // errorMessage: "Template name cannot be empty.",
117
- // supportedEvents: [
118
- // "onChange",
119
- // ],
120
- // },
121
- // {
122
- // id: "template-version",
123
- // type: "select", //Resembles component to be used
124
- // options: [],
125
- // metaType: "text",
126
- // datatype: "string",
127
- // required: true,
128
- // fluid: true,
129
- // style: {
130
- // fontSize: '14px',
131
- // fontFamily: 'open-sans',
132
- // fontStyle: 'normal',
133
- // marginBottom: '16px',
134
- // },
135
- // styling: "semantic",
136
- // order: 1,
137
- // width: 5,
138
- // customComponent: false,
139
- // standalone: true,
140
- // supportedEvents: [
141
- // 'onSelect',
142
- // 'addVersion',
143
- // ],
144
- // },
145
- // {
146
- // id: "preview-button",
147
- // width: 3,
148
- // offset: 3,
149
- // metaType: "submit-button",
150
- // colStyle: {
151
- // textAlign: "right",
152
- // paddingRight: "12px",
153
- // },
154
- // type: "button",
155
- // buttonType: "cancel",
156
- // value: "Preview",
157
- // customComponent: false,
158
- // standalone: true,
159
- // styling: "semantic",
160
- // order: 3,
161
- // fluid: false,
162
- // submitAction: "previewTemplate",
163
- // onlyDisplay: true,
164
- // supportedEvents: [
165
- // "previewTemplate",
166
- // ],
167
- // },
168
- // {
169
- // id: "cancel-button",
170
- // width: 2,
171
- // metaType: "submit-button",
172
- // colStyle: {
173
- // textAlign: "right",
174
- // width: "9%",
175
- // },
176
- // type: "button",
177
- // buttonType: "cancel",
178
- // value: "Cancel",
179
- // customComponent: false,
180
- // standalone: true,
181
- // styling: "semantic",
182
- // order: 3,
183
- // fluid: false,
184
- // onlyDisplay: true,
185
- // submitAction: "cancelTemplate",
186
- // supportedEvents: [
187
- // "cancelTemplate",
188
- // ],
189
- // },
190
- // {
191
- // id: "save-button",
192
- // width: 2,
193
- // metaType: "submit-button",
194
- // colStyle: {
195
- // textAlign: "right",
196
- // width: "7%",
197
- // },
198
- // type: "button",
199
- // buttonType: "primary",
200
- // value: "Save",
201
- // customComponent: false,
202
- // styling: "semantic",
203
- // order: 3,
204
- // fluid: false,
205
- // standalone: true,
206
- // onlyDisplay: true,
207
- // submitAction: "saveFormData",
208
- // supportedEvents: [
209
- // "saveFormData",
210
- // ],
211
- // },
212
- // ],
213
- // },
214
- // ],
215
- // actionFields: [],
216
- // },
217
- // ],
218
- // },
219
- // containers: [
220
- // {
221
- // panes: [
222
- // {
223
- // sections: [
224
- // {
225
- // type: "multicols",
226
- // width: 24,
227
- // rowStyle: {
228
- // // height: "calc(100vh - 142px)",
229
- // },
230
- // actionFields: [],
231
- // inputFields: [
232
- // {
233
- // cols: [
234
- // {
235
- // id: "template-content",
236
- // type: "ckeditor",
237
- // metaType: "text",
238
- // datatype: "string",
239
- // required: true,
240
- // onlyDisplay: false,
241
- // standalone: false,
242
- // order: 2,
243
- // width: 24,
244
- // events: {
245
- // blur: this.onBlur,
246
- // afterPaste: this.afterPaste,
247
- // // change: this.onChange,
248
- // },
249
- // colStyle: {
250
- // display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? 'none' : '',
251
- // },
252
- // customComponent: true,
253
- // getEditorInstanse: this.getEditorInstanse,
254
- // supportedEvents: [
255
- // "onContentChange",
256
- // ],
257
- // },
258
- // {
259
- // id: "edmeditor",
260
- // type: "edmeditor",
261
- // metaType: "text",
262
- // datatype: "string",
263
- // required: true,
264
- // onlyDisplay: true,
265
- // standalone: false,
266
- // width: 24,
267
- // order: 2,
268
- // customComponent: true,
269
- // // getEditorInstanse: this.getEditorInstanse,
270
- // colStyle: {
271
- // display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? '' : 'none',
272
- // },
273
- // supportedEvents: [
274
- // // "onContentChange",
275
- // ],
276
- // },
277
- // ],
278
- // },
279
- // ],
280
- // },
281
- // ],
282
- // },
283
- // ],
284
- // type: "tabs",
285
- // defaultPanes: 1,
286
- // additionalPanes: 0,
287
- // id: "pane",
288
- // tabBarExtraContent: {
289
- // sections: [
290
- // {
291
- // type: "multicols",
292
- // actionFields: [],
293
- // inputFields: [
294
- // {
295
- // cols: [
296
- // {
297
- // id: "add-language-button",
298
- // metaType: "submit-button",
299
- // type: "customPopover",
300
- // customComponent: true,
301
- // onlyDisplay: true,
302
- // styling: "semantic",
303
- // order: 3,
304
- // width: 3,
305
- // colStyle: {
306
- // color: `rgb(78, 146, 229)`,
307
- // fontSize: '14px',
308
- // fontFamily: 'open-sans',
309
- // lineHeight: '24px',
310
- // textAlign: 'center',
311
- // cursor: 'pointer',
312
- // display: (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "timeline" )) ? 'none' : '',
313
- // },
314
- // popOverList: this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.supported_languages ? this.props.Global.currentOrgDetails.basic_details.supported_languages : [],
315
- // baseLanguage: this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en',
316
- // submitAction: "addLanguage",
317
- // supportedEvents: [
318
- // "addLanguage",
319
- // ],
320
- // },
321
- // {
322
- // id: "tagList",
323
- // label: "Tags",
324
- // type: "tag-list", //Resembles component to be used
325
- // metaType: "List",
326
- // datatype: "select",
327
- // required: true,
328
- // fluid: true,
329
- // onlyDisplay: true,
330
- // styling: "semantic",
331
- // order: 1,
332
- // style: {
333
- // border: "none",
334
- // },
335
- // customComponent: true,
336
- // width: 3,
337
- // offset: 11,
338
- // supportedEvents: [
339
- // 'onTagSelect',
340
- // ],
341
- // },
342
- // {
343
- // id: "insert-image",
344
- // metaType: "label",
345
- // type: "div", //Resembles component to be used
346
- // primitive: true,
347
- // value: "Insert Image",
348
- // fluid: true,
349
- // onlyDisplay: false,
350
- // styling: "semantic",
351
- // order: 1,
352
- // customComponent: false,
353
- // submitAction: "onImageSelect",
354
- // style: {
355
- // color: "#4E92E5",
356
- // fontSize: "14px",
357
- // fontFamily: "open-sans",
358
- // lineHeight: "24px",
359
- // textAlign: "center",
360
- // cursor: "pointer",
361
- // },
362
- // width: 3,
363
- // supportedEvents: [
364
- // "onImageSelect",
365
- // ],
366
- // },
367
- // {
368
- // id: "mark-final-version-label",
369
- // metaType: "label",
370
- // type: "div",
371
- // primitive: true,
372
- // value: "Mark as Final",
373
- // onlyDisplay: true,
374
- // customComponent: false,
375
- // order: 3,
376
- // width: 3,
377
- // fluid: false,
378
- // style: {
379
- // color: "#4E92E5",
380
- // fontSize: "14px",
381
- // fontFamily: "open-sans",
382
- // lineHeight: "24px",
383
- // textAlign: "center",
384
- // cursor: "pointer",
385
- // display: (this.props.location.query.type === 'embedded') ? "none" : "",
386
- // },
387
- // submitAction: "markFinalVersion",
388
- // supportedEvents: [
389
- // "markFinalVersion",
390
- // ],
391
- // },
392
- // {
393
- // id: "tab-options-popover",
394
- // metaType: "display",
395
- // colStyle: {
396
- // flex: 0,
397
- // },
398
- // type: "popover",
399
- // customComponent: false,
400
- // styling: "semantic",
401
- // order: 3,
402
- // width: 1,
403
- // fluid: false,
404
- // onlyDisplay: true,
405
- // submitAction: "onTabOptionSelect",
406
- // supportedEvents: [
407
- // "onTabOptionSelect",
408
- // ],
409
- // content: {
410
- // sections: [
411
- // {
412
- // type: "multicols",
413
- // inputFields: [
414
- // {
415
- // cols: [
416
- // {
417
- // id: "duplicate-version-label",
418
- // metaType: "label",
419
- // type: "div",
420
- // primitive: true,
421
- // value: "Duplicate Version",
422
- // onlyDisplay: true,
423
- // customComponent: false,
424
- // order: 3,
425
- // fluid: false,
426
- // colStyle: {
427
- // display: (this.props.location.query.type === 'embedded') ? "none" : "",
428
- // },
429
- // className: "version-popover",
430
- // submitAction: "duplicateVersion",
431
- // supportedEvents: [
432
- // "duplicateVersion",
433
- // ],
434
- // },
435
- // ],
436
- // },
437
- // {
438
- // cols: [
439
- // {
440
- // id: "delete-version-label",
441
- // metaType: "label",
442
- // type: "div",
443
- // primitive: true,
444
- // value: "Delete Version",
445
- // onlyDisplay: true,
446
- // customComponent: false,
447
- // order: 3,
448
- // fluid: false,
449
- // colStyle: {
450
- // display: (this.props.location.query.type === 'embedded') ? "none" : "",
451
- // },
452
- // className: "version-popover",
453
- // submitAction: "deleteVersion",
454
- // supportedEvents: [
455
- // "deleteVersion",
456
- // ],
457
- // },
458
- // ],
459
- // },
460
- // {
461
- // cols: [
462
- // {
463
- // id: "delete-language-label",
464
- // metaType: "label",
465
- // type: "div",
466
- // primitive: true,
467
- // value: "Delete Language",
468
- // onlyDisplay: true,
469
- // customComponent: false,
470
- // order: 3,
471
- // fluid: false,
472
- // className: "version-popover",
473
- // submitAction: "deleteLanguage",
474
- // supportedEvents: [
475
- // "deleteLanguage",
476
- // ],
477
- // },
478
- // ],
479
- // },
480
- // {
481
- // cols: [
482
- // {
483
- // id: "switch-editor-label",
484
- // metaType: "label",
485
- // type: "div",
486
- // primitive: true,
487
- // value: "Switch Editor",
488
- // onlyDisplay: true,
489
- // customComponent: false,
490
- // order: 4,
491
- // fluid: false,
492
- // className: "version-popover",
493
- // submitAction: "switchEditor",
494
- // supportedEvents: [
495
- // "switchEditor",
496
- // ],
497
- // style: {
498
- // display: (!_.isEmpty(this.props.Templates.edmTemplate) && this.props.Templates.edmTemplate.versions.base.drag_drop_id) ? '' : 'none',
499
- // },
500
- // },
501
- // ],
502
- // },
503
- // ],
504
- // actionFields: [],
505
- // },
506
- // ],
507
- // },
508
- // value: {
509
- // sections: [
510
- // {
511
- // type: "multicols",
512
- // inputFields: [
513
- // {
514
- // cols: [
515
- // {
516
- // id: "tab-option-icon",
517
- // metaType: "display",
518
- // type: "icon",
519
- // onlyDisplay: true,
520
- // primitive: false,
521
- // value: "",
522
- // customComponent: false,
523
- // order: 3,
524
- // fluid: false,
525
- // },
526
- // ],
527
- // },
528
- // ],
529
- // actionFields: [],
530
- // },
531
- // ],
532
- // },
533
- // trigger: "click",
534
- // placement: "bottomLeft",
535
- // },
536
- // ],
537
- // },
538
- // ],
539
- // },
540
- // ],
541
- // },
542
- // tabContent: {
543
- // sections: [
544
- // {
545
- // type: "multicols",
546
- // inputFields: [
547
- // {
548
- // rowStyle: {
549
- // display: "flex",
550
- // flex: 1,
551
- // },
552
- // cols: [
553
- // {
554
- // id: "tab-header",
555
- // metaType: "label",
556
- // value: "English",
557
- // primitive: true,
558
- // dynamicTab: false,
559
- // type: "div",
560
- // width: 5,
561
- // offset: 0,
562
- // onlyDisplay: true,
563
- // colStyle: {
564
- // flex: 1,
565
- // },
566
- // supportedEvents: [
567
- // "onChange",
568
- // ],
569
- // },
570
- // ],
571
- // },
572
- // ],
573
- // actionFields: [],
574
- // },
575
- // ],
576
- // },
577
- // label: "Version",
578
- // onlyDisplay: true,
579
- // supportedEvents: [
580
- // "onTabChange",
581
- // ],
582
- // isActive: true,
583
- // },
584
- // ],
585
- // channel: "EMAIL",
586
- // },
587
50
  loading: false,
588
51
  isFormValid: true,
589
52
  injectedTags: {},
@@ -616,7 +79,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
616
79
 
617
80
  this.isTagLoaded = false;
618
81
  this.edmEvent = undefined;
619
- this.supportedLanguages = this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details.supported_languages ? this.props.Global.currentOrgDetails.basic_details.supported_languages : [];
82
+ this.supportedLanguages = this.getSupportedLanguages(props);
620
83
  this.map = {
621
84
  "template-name": {
622
85
  onChange: this.onTemplateNameChange,
@@ -682,7 +145,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
682
145
  },
683
146
  };
684
147
  }
685
-
686
148
  componentWillMount() {
687
149
  const formData = this.initFormData(this.props, true); //_.cloneDeep(this.state.formData);
688
150
  const isEmpty = _.isEmpty(formData);
@@ -760,7 +222,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
760
222
  if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
761
223
  const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
762
224
 
763
- this.setState({schema: newSchema});
225
+ this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
764
226
  if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
765
227
  const query = {
766
228
  layout: 'EMAIL',
@@ -777,7 +239,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
777
239
  this.showSubject();
778
240
  }, 0);
779
241
  }
780
- if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details && !_.isEmpty(nextProps.Global.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
242
+ if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details && !_.isEmpty(nextProps.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
781
243
  const formData = this.initFormData(nextProps);
782
244
  formData['template-version-options'] = [
783
245
  {
@@ -800,9 +262,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
800
262
  // that.startTemplateCreation();
801
263
  // }, 15000);
802
264
  });
803
- } else if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details) {
265
+ } else if (nextProps.currentOrgDetails && nextProps.currentOrgDetails.basic_details) {
804
266
  // this.injectEvents(this.state.schema);
805
- const baseLanguage = nextProps.Global.currentOrgDetails.basic_details.base_language;
267
+ const baseLanguage = nextProps.currentOrgDetails.basic_details.base_language;
806
268
  if (this.state.formData[`${this.state.currentTab - 1}`] && _.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages)) {
807
269
  const formData = _.cloneDeep(this.state.formData);
808
270
  formData[`${this.state.currentTab - 1}`].selectedLanguages = [];
@@ -817,13 +279,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
817
279
 
818
280
  const formData = _.cloneDeep(this.state.formData);
819
281
  const container = schema.containers[0];
820
- // const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
282
+ // const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
821
283
  if (baseLanguage === formData[0].activeTab) {
822
284
  container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
823
285
  } else {
824
286
  container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
825
287
  }
826
- this.setState({schema});
288
+ this.setState({schema, loadingStatus: this.state.loadingStatus + 1});
827
289
  }
828
290
 
829
291
  //
@@ -852,7 +314,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
852
314
 
853
315
  if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings)) {
854
316
  const apiLangId = nextProps.Email.CmsSettings.langId;
855
- const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.Global.currentOrgDetails.basic_details.base_language;
317
+ const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
856
318
 
857
319
  const formData = _.cloneDeep(this.state.formData);
858
320
 
@@ -885,7 +347,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
885
347
  }
886
348
  });
887
349
 
888
- this.setState({schema, isSchemaChanged: true});
350
+ this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
889
351
  } else {
890
352
  _.forEach(temp.panes, (pane, index) => {
891
353
  const tempPane = pane;
@@ -895,7 +357,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
895
357
  }
896
358
  });
897
359
 
898
- this.setState({schema, isSchemaChanged: true});
360
+ this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
899
361
  let html = decodeURIComponent(nextProps.Email.CmsSettings.htmlContent);
900
362
 
901
363
  html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
@@ -1050,8 +512,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1050
512
  this.props.globalActions.addMessageToQueue(message);
1051
513
  }
1052
514
 
1053
- if (!_.isEqual(nextProps.Global.currentOrgDetails.basic_details.supported_languages, this.props.Global.currentOrgDetails.basic_details.supported_languages)) {
1054
- this.supportedLanguages = nextProps.Global.currentOrgDetails.basic_details.supported_languages;
515
+ if (!_.isEqual(nextProps.currentOrgDetails.basic_details.supported_languages, this.props.currentOrgDetails.basic_details.supported_languages)) {
516
+ this.supportedLanguages = nextProps.currentOrgDetails.basic_details.supported_languages;
1055
517
  }
1056
518
 
1057
519
  if (!nextProps.Email.fetchingAllAssets && !_.isEqual(nextProps.Email.fetchingAllAssets, this.props.Email.fetchingAllAssets) && !_.isEmpty(nextProps.Email.assetList) && nextProps.Email.assetList[0] && nextProps.Email.assetList[0].totalCount && this.state.totalCount === 0) {
@@ -1114,13 +576,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1114
576
  container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
1115
577
  container.tabBarExtraContent.sections[0].inputFields[0].cols[2].style.display = "";
1116
578
  }
1117
- const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
579
+ const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
1118
580
  if (baseLanguage === formData[`${data - 1}`].activeTab) {
1119
581
  container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
1120
582
  } else {
1121
583
  container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
1122
584
  }
1123
- this.setState({currentTab: data, formData, schema});
585
+ this.setState({currentTab: data, formData, schema, loadingStatus: this.state.loadingStatus + 1});
1124
586
  }
1125
587
 
1126
588
  onTemplateNameChange = () => {
@@ -1158,7 +620,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1158
620
  // this.props.actions.getAllAssets("image", params);
1159
621
  });
1160
622
  }
1161
-
623
+ getSupportedLanguages = (props) => {
624
+ const {currentOrgDetails} = props;
625
+ let supportedLanguages = [];
626
+ if (!_.isEmpty(currentOrgDetails)) {
627
+ const {basic_details} = currentOrgDetails;
628
+ supportedLanguages = basic_details.supported_languages || [];
629
+ }
630
+ return supportedLanguages;
631
+ }
1162
632
  getValidationData = () => {
1163
633
  const that = this;
1164
634
  const formData = _.cloneDeep(this.state.formData);
@@ -1291,7 +761,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1291
761
  formData['template-version-options'].push(newVersionOption);
1292
762
  }
1293
763
 
1294
- // data.activeTab = this.props.Global.currentOrgDetails.basic_details.base_language;
764
+ // data.activeTab = this.props.currentOrgDetails.basic_details.base_language;
1295
765
  _.forEach((data.selectedLanguages), (language) => {
1296
766
  if (data.tabKey === data[language].tabKey) {
1297
767
  data.activeTab = language;
@@ -1309,7 +779,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1309
779
  // const isLanguageSupport = this.props.location.query.isLanguageSupport;
1310
780
 
1311
781
  _.forEach(data.selectedLanguages, (lang, langIndex) => {
1312
- if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
782
+ if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.currentOrgDetails.basic_details.base_language) {
1313
783
  const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
1314
784
  const tabContentSection = tabContent.inputFields[0].cols[0];
1315
785
  const panes = containers[0].panes.slice();
@@ -1341,7 +811,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1341
811
  // panes.push(firstPane);
1342
812
 
1343
813
  schema.containers[index].panes.push(firstPane);
1344
- } else if (lang !== this.props.Global.currentOrgDetails.basic_details.base_language) {
814
+ } else if (lang !== this.props.currentOrgDetails.basic_details.base_language) {
1345
815
  delete data[lang];
1346
816
  data.selectedLanguages.splice(langIndex, 1);
1347
817
  }
@@ -1361,7 +831,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1361
831
  });
1362
832
 
1363
833
 
1364
- this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length }, () => {
834
+ this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
1365
835
  _.forEach((editData.versions.base.selectedLanguages), (language) => {
1366
836
  // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
1367
837
  // formData[this.state.currentTab - 1].activeTab = language;
@@ -1581,7 +1051,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1581
1051
  this.setState({showModal: false});
1582
1052
  const formData = _.cloneDeep(this.state.formData);
1583
1053
  const currentTab = this.state.currentTab - 1;
1584
- const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
1054
+ const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
1585
1055
  if (formData[currentTab][baseLanguage].is_drag_drop) {
1586
1056
  this.props.actions.getCmsSetting('edm', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
1587
1057
  }
@@ -1700,15 +1170,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1700
1170
 
1701
1171
  initFormData(props) {
1702
1172
  let newFormData = {};
1703
- if (props.Global.currentOrgDetails && props.Global.currentOrgDetails.basic_details) {
1173
+ if (props.currentOrgDetails && props.currentOrgDetails.basic_details) {
1704
1174
  newFormData = {
1705
1175
  "0": {},
1706
1176
  "template-name": "",
1707
1177
  "base": {},
1708
1178
  };
1709
1179
  const baseData = {};
1710
- const baseLanguage = props.Global.currentOrgDetails.basic_details.base_language;
1711
- this.supportedLanguages = props.Global.currentOrgDetails.basic_details.supported_languages;
1180
+ const baseLanguage = props.currentOrgDetails.basic_details.base_language;
1181
+ this.supportedLanguages = this.getSupportedLanguages(props);
1712
1182
  const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
1713
1183
  baseData.activeTab = baseLanguage;
1714
1184
  baseData[languageObject.iso_code] = {};
@@ -1750,7 +1220,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
1750
1220
  tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
1751
1221
  }
1752
1222
 
1753
- if (index === this.props.Global.currentOrgDetails.basic_details.base_language) {
1223
+ if (index === this.props.currentOrgDetails.basic_details.base_language) {
1754
1224
  newFormData.base = _.cloneDeep(tmpData);
1755
1225
  }
1756
1226
  newFormData.secondary_templates.push({template_data: tmpData});
@@ -2414,8 +1884,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2414
1884
  _.forEach(container.tabContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
2415
1885
  const tempEl = containerInputFieldCol;
2416
1886
  if (containerInputFieldCol.id === "tab-header") {
2417
- const baseLanguage = this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details && this.props.Global.currentOrgDetails.basic_details.base_language && this.props.Global.currentOrgDetails.basic_details.base_language !== "" ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
2418
- const supportedLanguages = this.props.Global.currentOrgDetails.basic_details.supported_languages;
1887
+ const baseLanguage = this.props.currentOrgDetails && this.props.currentOrgDetails.basic_details && this.props.currentOrgDetails.basic_details.base_language && this.props.currentOrgDetails.basic_details.base_language !== "" ? this.props.currentOrgDetails.basic_details.base_language : 'en';
1888
+ const supportedLanguages = this.getSupportedLanguages(this.props);
2419
1889
  if (!supportedLanguages) {
2420
1890
  tempEl.value = 'English';
2421
1891
  return;
@@ -2469,7 +1939,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2469
1939
  });
2470
1940
  //}
2471
1941
  temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
2472
- this.setState({schema: temp, isSchemaChanged: true}, () => {
1942
+ this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {
2473
1943
  if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === 'coupon_expiry' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
2474
1944
  if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && (this.props.location.query.module === "dvs" || this.props.location.query.module.toLowerCase() === 'coupon_expiry')) {
2475
1945
  return;
@@ -2558,7 +2028,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2558
2028
  let tabKey;
2559
2029
  if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
2560
2030
  formData['template-subject'] = data.base.subject ? data.base.subject : '';
2561
- const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
2031
+ const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
2562
2032
  let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
2563
2033
 
2564
2034
  if (languageIndex === -1) {
@@ -2601,7 +2071,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2601
2071
 
2602
2072
  // formData[0].tabkey = "1";
2603
2073
  // formData[0] = {};
2604
- // formData[0].activeTab = this.props.Global.currentOrgDetails.basic_details.base_language;
2074
+ // formData[0].activeTab = this.props.currentOrgDetails.basic_details.base_language;
2605
2075
  formData[0].base = true;
2606
2076
  formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
2607
2077
  formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;
@@ -2850,7 +2320,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2850
2320
  obj._id = this.props.Email.templateDetails._id;
2851
2321
  }
2852
2322
  obj.type = 'EMAIL';
2853
- const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
2323
+ const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
2854
2324
  let baseKey = -1;
2855
2325
  //let saveCount = 0;
2856
2326
 
@@ -2961,6 +2431,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2961
2431
  }
2962
2432
  };
2963
2433
 
2434
+ isEmailLoading = () => {
2435
+ //let {isLoading} = this.props;
2436
+ let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
2437
+
2438
+ if (!isLoading) {
2439
+ isLoading = this.state.loadingStatus <= 3;
2440
+ }
2441
+ return isLoading;
2442
+ }
2964
2443
  renderConfirmationModal() {
2965
2444
  const modal = (
2966
2445
  <Modal
@@ -2982,7 +2461,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
2982
2461
  </Modal>);
2983
2462
  return modal;
2984
2463
  }
2985
-
2986
2464
  render() {
2987
2465
  // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
2988
2466
  // const actionComponents = '';
@@ -3020,7 +2498,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
3020
2498
  </div>
3021
2499
  );
3022
2500
  const schema = this.state.schema;
3023
- const spinning = this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
2501
+ const isLoading = this.isEmailLoading();
3024
2502
  const previewHeader = (<h3>Email Preview</h3>);
3025
2503
  const imagePreviewHeader = (<h3>Image Selection</h3>);
3026
2504
  const imagePreviewContent = (
@@ -3046,7 +2524,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
3046
2524
  </div>
3047
2525
  );
3048
2526
 
3049
- if (!this.props.Global.currentOrgDetails || !this.props.Global.currentOrgDetails.basic_details) {
2527
+ if (!this.props.currentOrgDetails || !this.props.currentOrgDetails.basic_details) {
3050
2528
  return (<div>Loading...</div>);
3051
2529
  }
3052
2530
 
@@ -3060,14 +2538,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
3060
2538
  }
3061
2539
  return (
3062
2540
  <div className="email-container">
3063
- <Helmet
3064
- title="Email"
3065
- meta={[
3066
- { name: 'description', content: 'Description of Email' },
3067
- ]}
3068
- />
2541
+
3069
2542
  {/* <PageHeader pageHeading={pageHeading} /> */}
3070
- <Spin tip={loaderText} spinning={spinning}>
2543
+ <Spin tip={loaderText} spinning={isLoading}>
3071
2544
 
3072
2545
  <Row>
3073
2546
  <Col>
@@ -3110,8 +2583,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
3110
2583
  isEdit={this.state.isEdit}
3111
2584
  iframeParent={parent}
3112
2585
  router={this.props.router}
3113
- baseLanguage={this.props.Global.currentOrgDetails.basic_details.base_language}
3114
- supportedLanguages={this.props.Global.currentOrgDetails.basic_details.supported_languages}
2586
+ baseLanguage={this.props.currentOrgDetails.basic_details.base_language}
2587
+ supportedLanguages={this.getSupportedLanguages(this.props)}
3115
2588
  isSchemaChanged={this.state.isSchemaChanged}
3116
2589
  cmsTemplates={this.props.Templates.cmsTemplates}
3117
2590
  getCmsTemplatesInProgress={this.props.Templates.getCmsTemplatesInProgress}
@@ -3159,7 +2632,6 @@ Email.propTypes = {
3159
2632
  location: PropTypes.object,
3160
2633
  intl: intlShape.isRequired,
3161
2634
  metaEntities: PropTypes.object,
3162
- Global: PropTypes.object,
3163
2635
  templatesActions: PropTypes.object,
3164
2636
  route: PropTypes.object,
3165
2637
  templateData: PropTypes.object,
@@ -3167,13 +2639,16 @@ Email.propTypes = {
3167
2639
  getFormSubscriptionData: PropTypes.func,
3168
2640
  supportedTags: PropTypes.array,
3169
2641
  getDefaultTags: PropTypes.string,
2642
+ currentOrgDetails: PropTypes.object,
2643
+ isLoadingMetaEntities: PropTypes.bool,
3170
2644
  };
3171
2645
 
3172
- const mapStateToProps = createStructuredSelector({
2646
+ const mapStateToProps = (state, props) => createStructuredSelector({
3173
2647
  Email: makeSelectEmail(),
3174
2648
  Templates: makeSelectTemplates(),
3175
2649
  metaEntities: makeSelectMetaEntities(),
3176
- Global: makeSelectAuthenticated(),
2650
+ currentOrgDetails: props.cap ? () => props.cap.currentOrgDetails : selectCurrentOrgDetails(),
2651
+ isLoadingMetaEntities: isLoadingMetaEntities(),
3177
2652
  });
3178
2653
 
3179
2654
  function mapDispatchToProps(dispatch) {