@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.
Files changed (10) hide show
  1. package/containers/Cap/selectors.js +10 -2
  2. package/containers/CreativesContainer/SlideBoxContent.js +11 -3
  3. package/containers/CreativesContainer/SlideBoxFooter.js +3 -3
  4. package/containers/CreativesContainer/index.js +15 -8
  5. package/containers/Email/index.js +61 -586
  6. package/containers/Email/selectors.js +4 -1
  7. package/containers/EmailWrapper/index.js +12 -4
  8. package/containers/Sms/Create/index.js +17 -486
  9. package/containers/Sms/Edit/index.js +17 -6
  10. package/package.json +1 -1
package/containers/Email/selectors.js CHANGED
@@ -22,10 +22,13 @@ const makeSelectEmail = () => createSelector(
22
22
  const makeSelectCreateResponse = () => createSelector(
23
23
  selectEmailDomain(), (dimensionState) => dimensionState.get('createResponse')
24
24
  );
25
-
25
+ const selectLoadingStatus = () => createSelector(
26
+ selectEmailDomain(), (email) => email.createTemplateInProgress || (email.assetUploading !== undefined && email.assetUploading)
27
+ );
26
28
 
27
29
  export default makeSelectEmail;
28
30
  export {
29
31
  makeSelectEmail,
30
32
  makeSelectCreateResponse,
33
+ selectLoadingStatus,
31
34
  };
package/containers/EmailWrapper/index.js CHANGED
@@ -64,12 +64,17 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
64
64
  }
65
65
  }
66
66
  }
67
- onChange = (e) => {
68
- this.props.onEmailModeChange( e.target.value );
69
- };
67
+
68
+
69
+ componentWillUnmount() {
70
+ this.props.onResetStep();
71
+ }
70
72
  onTemplateNameChange = (ev) => {
71
73
  this.setState({templateName: ev.target.vale});
72
74
  }
75
+ onChange = (e) => {
76
+ this.props.onEmailModeChange( e.target.value );
77
+ };
73
78
  //isValid = () => !_.isEmpty(this.state.templateName)
74
79
  setCreateMode = (emailCreateMode) => {
75
80
  this.setState({selectedCreateMode: emailCreateMode});
@@ -122,7 +127,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
122
127
 
123
128
  isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
124
129
  render() {
125
- const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step} = this.props;
130
+ const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap} = this.props;
126
131
  const {templateName} = this.state;
127
132
  const isShowEmailCreate = this.isShowEmailCreate();
128
133
  return (
@@ -155,6 +160,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
155
160
  getFormSubscriptionData={getFormdata}
156
161
  getDefaultTags={type}
157
162
  defaultData={{templateName}}
163
+ cap={cap}
158
164
  />}
159
165
  {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
160
166
 
@@ -179,6 +185,8 @@ EmailWrapper.propTypes = {
179
185
  showNextStep: PropTypes.func,
180
186
  getFormdata: PropTypes.func,
181
187
  intl: intlShape,
188
+ cap: PropTypes.object,
189
+ onResetStep: PropTypes.func,
182
190
  };
183
191
 
184
192
  const mapStateToProps = createStructuredSelector({
package/containers/Sms/Create/index.js CHANGED
@@ -14,7 +14,7 @@ import { createStructuredSelector } from 'reselect';
14
14
  import _ from 'lodash';
15
15
  import { bindActionCreators } from 'redux';
16
16
  import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
17
- import { makeSelectMetaEntities } from '../../Cap/selectors';
17
+ import { makeSelectMetaEntities, isLoadingMetaEntities } from '../../Cap/selectors';
18
18
  import { UserIsAuthenticated } from '../../../utils/authWrapper';
19
19
  import './_smsCreate.scss';
20
20
  import FormBuilder from '../../../components/FormBuilder';
@@ -30,6 +30,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
30
30
  constructor(props) {
31
31
  super(props);
32
32
  this.state = {
33
+ loadingStatus: 0,
33
34
  formData: {},
34
35
  tabCount: 1,
35
36
  currentTab: 1,
@@ -183,7 +184,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
183
184
  if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
184
185
  delete injectedTags["Transaction custom fields"];
185
186
  }
186
- this.setState({injectedTags});
187
+ this.setState({injectedTags, loadingStatus: this.state.loadingStatus + 1});
187
188
  }
188
189
  // if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.length > 0 && _.isEmpty(this.state.schema)) {
189
190
  // console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
@@ -391,7 +392,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
391
392
  return tempContainer;
392
393
  });
393
394
  console.log('final injected schema', schema);
394
- this.setState({schema}, () => {
395
+ this.setState({schema, loadingStatus: this.state.loadingStatus + 1}, () => {
395
396
  const type = this.props.location.query.type;
396
397
  if (type === 'embedded') {
397
398
  this.removeStandAlone();
@@ -871,7 +872,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
871
872
  temp.panes.push(basePane);
872
873
  }
873
874
  });
874
- this.setState({ schema });
875
+ this.setState({ schema, loadingStatus: this.state.loadingStatus + 1 });
875
876
  }
876
877
 
877
878
  validateContent = (e) => {
@@ -902,487 +903,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
902
903
  });
903
904
  }
904
905
  resetSchema() {
905
- // const schema =
906
- // {
907
- // standalone: {
908
- // sections: [
909
- // {
910
- // type: "multicols",
911
- // inputFields: [
912
- // {
913
- // cols: [
914
- // {
915
- // id: "template-name",
916
- // placeholder: "Enter template name",
917
- // type: "input", //Resembles component to be used
918
- // metaType: "text",
919
- // datatype: "string",
920
- // required: true,
921
- // fluid: true,
922
- // style: {
923
- // fontSize: '20px',
924
- // fontFamily: 'proxima-nova,sans-serif',
925
- // fontStyle: 'normal',
926
- // fontWeight: 600,
927
- // marginBottom: '16px',
928
- // },
929
- // styling: "semantic",
930
- // order: 1,
931
- // width: 9,
932
- // offSet: 10,
933
- // customComponent: false,
934
- // standalone: true,
935
- // supportedEvents: {
936
- // onChange: this.onTemplateNameChange,
937
- // },
938
- // },
939
- // {
940
- // id: "discard-button",
941
- // width: 3,
942
- // offset: 8,
943
- // metaType: "submit-button",
944
- // colStyle: {
945
- // // marginLeft: '47.833%',
946
- // textAlign: 'right',
947
- // paddingRight: '12px',
948
- // },
949
- // type: "button",
950
- // buttonType: "cancel",
951
- // value: "Discard",
952
- // customComponent: false,
953
- // standalone: true,
954
- // styling: "semantic",
955
- // order: 3,
956
- // fluid: false,
957
- // submitAction: "discardValues",
958
- // supportedEvents: {
959
- // discardValues: this.discardValues,
960
- // },
961
- // },
962
- // {
963
- // id: "cancel-button",
964
- // width: 2,
965
- // // offset: 11,
966
- // metaType: "submit-button",
967
- // colStyle: {
968
- // textAlign: 'right',
969
- // width: '9%',
970
- // },
971
- // type: "button",
972
- // buttonType: "cancel",
973
- // value: "Cancel",
974
- // customComponent: false,
975
- // standalone: true,
976
- // styling: "semantic",
977
- // order: 3,
978
- // fluid: false,
979
- // submitAction: "cancelTemplate",
980
- // supportedEvents: {
981
- // cancelTemplate: this.cancelTemplate,
982
- // },
983
- // },
984
- // {
985
- // id: "save-button",
986
- // width: 2,
987
- // metaType: "submit-button",
988
- // colStyle: {
989
- // textAlign: 'right',
990
- // width: '7%',
991
- // },
992
- // type: "button",
993
- // buttonType: "primary",
994
- // value: "Save",
995
- // customComponent: false,
996
- // styling: "semantic",
997
- // order: 3,
998
- // fluid: false,
999
- // standalone: true,
1000
- // submitAction: "saveFormData",
1001
- // supportedEvents: {
1002
- // saveFormData: this.saveFormData,
1003
- // },
1004
- // },
1005
- // ],
1006
- // },
1007
- // ],
1008
- // actionFields: [],
1009
- // },
1010
- // ],
1011
- // },
1012
- // containers: [
1013
- // {
1014
- // panes: [
1015
- // {
1016
- // sections: [
1017
- // {
1018
- // type: "parent",
1019
- // width: 16,
1020
- // rowStyle: {
1021
- // height: '100%',
1022
- // },
1023
- // childSections: [
1024
- // {
1025
- // colStyle: {
1026
- // paddingTop: '16px',
1027
- // borderRight: '1px solid #d9d9d9',
1028
- // height: '100%',
1029
- // },
1030
- // width: 16,
1031
- // type: "parent",
1032
- // childSections: [
1033
- // {
1034
- // type: "col-label",
1035
- // inputFields: [
1036
- // {
1037
- // id: "sms-editor",
1038
- // label: "Message",
1039
- // labelStyle: {
1040
- // backgroundColor: 'white',
1041
- // textAlign: 'left',
1042
- // color: '#333333',
1043
- // lineHeight: '24px',
1044
- // fontSize: '16px',
1045
- // fontWeight: '600',
1046
- // fontFamily: 'proxima-nova, sans-serif',
1047
- // fontStyle: 'normal',
1048
- // },
1049
- // style: {
1050
- // textAlign: 'left',
1051
- // color: '#333333',
1052
- // fontFamily: 'Open-Sans',
1053
- // lineHeight: '24px',
1054
- // fontSize: '14px',
1055
- // },
1056
- // type: "textarea",
1057
- // metaType: "text",
1058
- // datatype: "string",
1059
- // required: true,
1060
- // placeholder: "Please input sms template content.",
1061
- // fluid: false,
1062
- // styling: "semantic",
1063
- // onlyDisplay: false,
1064
- // width: 18,
1065
- // autosize: true,
1066
- // autosizeParams: {
1067
- // minRows: 3,
1068
- // },
1069
- // order: 2,
1070
- // customComponent: true,
1071
- // supportedEvents: {
1072
- // onChange: this.onTemplateContentChange,
1073
- // },
1074
- // },
1075
- // ],
1076
- // actionFields: [
1077
- // ],
1078
- // },
1079
- // {
1080
- // type: "multicols",
1081
- // inputFields: [
1082
- // {
1083
- // cols: [
1084
- // {
1085
- // offset: 19,
1086
- // id: "tagList",
1087
- // label: "Tags",
1088
- // type: "tag-list", //Resembles component to be used
1089
- // metaType: "List",
1090
- // datatype: "select",
1091
- // required: true,
1092
- // fluid: true,
1093
- // onlyDisplay: true,
1094
- // styling: "semantic",
1095
- // order: 1,
1096
- // customComponent: true,
1097
- // supportedEvents: {
1098
- // onTagSelect: this.onTagSelect,
1099
- // },
1100
- // },
1101
- // ],
1102
- // },
1103
- // {
1104
- // cols: [
1105
- // {
1106
- // id: "unicode-validity",
1107
- // label: "Allow Unicode characters?",
1108
- // labelStyle: {
1109
- // backgroundColor: "white",
1110
- // },
1111
- // style: {
1112
- // textAlign: 'left',
1113
- // color: '#262626',
1114
- // fontFamily: 'Open-Sans',
1115
- // lineHeight: '24px',
1116
- // fontSize: '14px',
1117
- // },
1118
- // type: "checkbox", //Resembles component to be used
1119
- // metaType: "text",
1120
- // datatype: "boolean",
1121
- // required: true,
1122
- // fluid: true,
1123
- // styling: "semantic",
1124
- // order: 1,
1125
- // width: 10,
1126
- // offset: 4,
1127
- // onlyDisplay: false,
1128
- // customComponent: false,
1129
- // supportedEvents: {
1130
- // onChange: this.onTemplateNameChange,
1131
- // },
1132
- // },
1133
- // ],
1134
- // },
1135
- // ],
1136
- // actionFields: [],
1137
- // },
1138
- // ],
1139
- // },
1140
- // {
1141
- // width: 6,
1142
- // type: "multicols",
1143
- // offset: 1,
1144
- // colStyle: {
1145
- // paddingTop: '16px',
1146
- // },
1147
- // inputFields: [
1148
- // {
1149
- // cols: [
1150
- // {
1151
- // id: "sms-preview",
1152
- // type: "sms-preview", //Resembles component to be used
1153
- // customComponent: true,
1154
- // customStyling: { padding: '0' },
1155
- // metaType: "preview",
1156
- // required: true,
1157
- // fluid: true,
1158
- // styling: "semantic",
1159
- // order: 1,
1160
- // width: 5,
1161
- // onlyDisplay: true,
1162
- // offset: 7,
1163
- // channel: 'SMS',
1164
- // supportedEvents: {
1165
- // onChange: this.onTemplateNameChange,
1166
- // },
1167
- // },
1168
- // ],
1169
- // },
1170
- // ],
1171
- // },
1172
- // ],
1173
- // },
1174
- // ],
1175
- // },
1176
- // ],
1177
- // type: "tabs",
1178
- // defaultPanes: 1,
1179
- // additionalPanes: 0,
1180
- // id: "pane",
1181
- // tabBarExtraContent: {
1182
- // sections: [
1183
- // {
1184
- // type: "multicols",
1185
- // actionFields: [
1186
- // {
1187
- // cols: [
1188
- // {
1189
- // id: "add-version-button",
1190
- // metaType: "submit-button",
1191
- // type: "button",
1192
- // buttonType: "cancel",
1193
- // icon: "plus-circle-o",
1194
- // value: "New Version",
1195
- // customComponent: false,
1196
- // onlyDisplay: true,
1197
- // styling: "semantic",
1198
- // order: 3,
1199
- // fluid: false,
1200
- // submitAction: "addVersion",
1201
- // supportedEvents: {
1202
- // addVersion: this.addVersion,
1203
- // },
1204
- // },
1205
- // ],
1206
- // },
1207
- // ],
1208
- // inputFields: [],
1209
- // },
1210
- // ],
1211
- // },
1212
- // tabContent: {
1213
- // sections: [
1214
- // {
1215
- // type: "multicols",
1216
- // inputFields: [
1217
- // {
1218
- // rowStyle: {
1219
- // display: "flex",
1220
- // flex: 1,
1221
- // },
1222
- // cols: [
1223
- // {
1224
- // id: "tab-header",
1225
- // metaType: "label",
1226
- // value: "Version",
1227
- // primitive: true,
1228
- // dynamicTab: true,
1229
- // type: "div",
1230
- // width: 5,
1231
- // offset: 0,
1232
- // onlyDisplay: true,
1233
- // colStyle: {
1234
- // flex: 1,
1235
- // },
1236
- // supportedEvents: {
1237
- // onChange: this.onVersionNameChange,
1238
- // },
1239
- // },
1240
- // {
1241
- // id: "tab-options-popover",
1242
- // metaType: "display",
1243
- // colStyle: {
1244
- // flex: 0,
1245
- // },
1246
- // type: "popover",
1247
- // customComponent: false,
1248
- // styling: "semantic",
1249
- // order: 3,
1250
- // fluid: false,
1251
- // onlyDisplay: true,
1252
- // submitAction: "onTabOptionSelect",
1253
- // supportedEvents: {
1254
- // onTabOptionSelect: this.onTabOptionSelect,
1255
- // },
1256
- // content: {
1257
- // sections: [
1258
- // {
1259
- // type: "multicols",
1260
- // inputFields: [
1261
- // {
1262
- // cols: [
1263
- // {
1264
- // id: "mark-final-version-label",
1265
- // metaType: "label",
1266
- // type: "div",
1267
- // primitive: true,
1268
- // value: "Mark as Final",
1269
- // onlyDisplay: true,
1270
- // customComponent: false,
1271
- // order: 3,
1272
- // fluid: false,
1273
- // submitAction: "markFinalVersion",
1274
- // supportedEvents: {
1275
- // markFinalVersion: this.markFinalVersion,
1276
- // },
1277
- // },
1278
- // ],
1279
- // },
1280
- // {
1281
- // cols: [
1282
- // {
1283
- // id: "duplicate-version-label",
1284
- // metaType: "label",
1285
- // type: "div",
1286
- // primitive: true,
1287
- // value: "Duplicate",
1288
- // onlyDisplay: true,
1289
- // customComponent: false,
1290
- // order: 3,
1291
- // fluid: false,
1292
- // submitAction: "duplicateVersion",
1293
- // supportedEvents: {
1294
- // duplicateVersion: this.duplicateVersion,
1295
- // },
1296
- // },
1297
- // ],
1298
- // },
1299
- // {
1300
- // cols: [
1301
- // {
1302
- // id: "rename-version-label",
1303
- // metaType: "label",
1304
- // type: "div",
1305
- // primitive: true,
1306
- // value: "Rename",
1307
- // onlyDisplay: true,
1308
- // customComponent: false,
1309
- // order: 3,
1310
- // fluid: false,
1311
- // submitAction: "renameVersion",
1312
- // supportedEvents: {
1313
- // renameVersion: this.renameVersion,
1314
- // },
1315
- // },
1316
- // ],
1317
- // },
1318
- // {
1319
- // cols: [
1320
- // {
1321
- // id: "delete-version-label",
1322
- // metaType: "label",
1323
- // type: "div",
1324
- // primitive: true,
1325
- // value: "Delete",
1326
- // onlyDisplay: true,
1327
- // customComponent: false,
1328
- // order: 3,
1329
- // fluid: false,
1330
- // submitAction: "deleteVersion",
1331
- // supportedEvents: {
1332
- // deleteVersion: this.deleteVersion,
1333
- // },
1334
- // },
1335
- // ],
1336
- // },
1337
- // ],
1338
- // actionFields: [],
1339
- // },
1340
- // ],
1341
- // },
1342
- // value: {
1343
- // sections: [
1344
- // {
1345
- // type: "multicols",
1346
- // inputFields: [
1347
- // {
1348
- // cols: [
1349
- // {
1350
- // id: "tab-option-icon",
1351
- // metaType: "display",
1352
- // type: "icon",
1353
- // onlyDisplay: true,
1354
- // primitive: false,
1355
- // value: "&#xE313;",
1356
- // customComponent: false,
1357
- // order: 3,
1358
- // fluid: false,
1359
- // },
1360
- // ],
1361
- // },
1362
- // ],
1363
- // actionFields: [],
1364
- // },
1365
- // ],
1366
- // },
1367
- // trigger: "click",
1368
- // placement: "bottomRight",
1369
- // },
1370
- // ],
1371
- // },
1372
- // ],
1373
- // actionFields: [],
1374
- // },
1375
- // ],
1376
- // },
1377
- // label: "Version",
1378
- // supportedEvents: {
1379
- // onTabChange: this.onTabChange,
1380
- // },
1381
- // },
1382
- // ],
1383
- // channel: "SMS",
1384
- // module: "Campaigns",
1385
- // };
1386
906
  this.setState({ schema: this.props.metaEntities.layouts[0].definition });
1387
907
  }
1388
908
 
@@ -1413,9 +933,18 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
1413
933
  console.log('obj', obj);
1414
934
  this.props.actions.createTemplate(obj);
1415
935
  }
936
+ isSmsLoading = () => {
937
+ //let {isLoading} = this.props;
938
+ let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
939
+
940
+ if (!isLoading) {
941
+ isLoading = this.state.loadingStatus < 2;
942
+ }
943
+ return isLoading;
944
+ }
1416
945
  render() {
1417
946
  const schema = this.state.schema;
1418
- const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
947
+ const spinning = this.isSmsLoading();
1419
948
  let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
1420
949
  if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
1421
950
  tags = this.props.supportedTags; // if get default tags is not present and supported tags is present use that inlbrary mode
@@ -1475,12 +1004,14 @@ Create.propTypes = {
1475
1004
  intl: intlShape.isRequired,
1476
1005
  supportedTags: PropTypes.array,
1477
1006
  getDefaultTags: PropTypes.string,
1007
+ isLoadingMetaEntities: PropTypes.bool,
1478
1008
  };
1479
1009
 
1480
1010
  const mapStateToProps = createStructuredSelector({
1481
1011
  Create: makeSelectCreate(),
1482
1012
  createResponse: makeSelectCreateResponse(),
1483
1013
  metaEntities: makeSelectMetaEntities(),
1014
+ isLoadingMetaEntities: isLoadingMetaEntities(),
1484
1015
  });
1485
1016
 
1486
1017
  function mapDispatchToProps(dispatch) {