@capillarytech/creatives-library 2.0.81 → 2.0.83

package/v2Containers/Cap/index.js

@@ -12,9 +12,9 @@ import moment from 'moment';
 import 'moment/locale/zh-cn';
 import { injectIntl, intlShape } from 'react-intl';
 import {CapNotification} from '@capillarytech/cap-ui-library';
-import TopBar from '../../components/TopBar';
+import TopBar from '../../v2Components/TopBar';
 // import 'moment/locale/en-us';
-import Sidebar from '../../components/Sidebar';
+import Sidebar from '../../v2Components/Sidebar';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import TemplatesV2 from '../TemplatesV2';
-import TemplatePreview from '../../components/TemplatePreview';
+import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
-import EmailPreviewV2 from '../../components/EmailPreviewV2';
-import MobilePushPreview from '../../components/MobilePushPreviewV2';
+import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
+import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';

package/v2Containers/CreativesContainer/index.js

@@ -80,6 +80,7 @@ class Creatives extends React.Component {
 
   onShowTemplates = () => {
     this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
+    this.resetStep();
   };
   onChannelChange = (channel) => {
     this.setState({currentChannel: channel});

package/v2Containers/Dashboard/index.js

@@ -9,8 +9,8 @@ import makeSelectDashboard from './selectors';
 import messages from './messages';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as actions from './actions';
-import PageHeader from '../../components/PageHeader';
-import BreadCrumbs from '../../components/BreadCrumbs/index';
+import PageHeader from '../../v2Components/PageHeader';
+import BreadCrumbs from '../../v2Components/BreadCrumbs/index';
 export class Dashboard extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     const breadCrumbLocations = [

package/v2Containers/Ebill/index.js

@@ -15,7 +15,7 @@ import { injectIntl, intlShape } from 'react-intl';
 import _ from 'lodash';
 import { createStructuredSelector } from 'reselect';
 import * as actions from './actions';
-import FormBuilder from '../../components/FormBuilder';
+import FormBuilder from '../../v2Components/FormBuilder';
 import { makeSelectMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
 import * as globalActions from '../../containers/Cap/actions';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -23,7 +23,7 @@ import { makeSelectTemplates } from '../Templates/selectors';
 import {getMessageObject} from '../../utils/messageUtils';
 import makeSelectEbill from './selectors';
 import messages from './messages';
-import EmailPreview from '../../components/EmailPreview';
+import EmailPreview from '../../v2Components/EmailPreview';
 import './_ebill.scss';
 import callNativeEvent from '../../utils/callNativeEvent';
 const BreadcrumbItem = Breadcrumb.Item;

package/v2Containers/Email/index.js

@@ -15,7 +15,7 @@ import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard } from '@capil
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
-import FormBuilder from '../../components/FormBuilder';
+import FormBuilder from '../../v2Components/FormBuilder';
 import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
 import * as actions from './actions';
 import * as templatesActions from '../Templates/actions';
@@ -24,12 +24,12 @@ import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {makeSelectEmail} from './selectors';
 import { makeSelectTemplates } from '../Templates/selectors';
 import messages from './messages';
-// import PageHeader from '../../components/PageHeader';
+// import PageHeader from '../../v2Components/PageHeader';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
-import EmailPreview from '../../components/EmailPreview';
+import EmailPreview from '../../v2Components/EmailPreview';
 
-import Pagination from '../../components/Pagination';
+import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -604,15 +604,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
       const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
       win.postMessage(msgString, '*');
+    } else if (data === "unsubscribe") {
+      const anchor = `<a href='{{${data}}}'>${data}</a>`;
+      this.state.editorInstanse.insertHtml(`${anchor}`);
     } else {
-      if (data === "unsubscribe") {
-        const anchor = `<a href='{{${data}}}'>${data}</a>`;
-        this.state.editorInstanse.insertHtml(`${anchor}`);
-      } else {
-        this.state.editorInstanse.insertHtml(`{{${data}}}`);
-      }
-      //this.resetCkEditorInstance(currentTab, formData, true, data);
+      this.state.editorInstanse.insertHtml(`{{${data}}}`);
     }
+      //this.resetCkEditorInstance(currentTab, formData, true, data);
   }
 
   onImageSelect = () => {
@@ -866,7 +864,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
 
     this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
-      this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      }
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
         // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
         //   formData[this.state.currentTab - 1].activeTab = language;
@@ -1214,7 +1214,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const baseData = {};
       const baseLanguage = props.currentOrgDetails.basic_details.base_language;
       this.supportedLanguages = this.getSupportedLanguages(props);
-      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
+      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})] || {iso_code: 'en', lang_id: 1, language: "English"};
       baseData.activeTab = baseLanguage;
       baseData[languageObject.iso_code] = {};
       baseData[languageObject.iso_code].is_drag_drop = false;

package/v2Containers/EmailWrapper/index.js

@@ -17,7 +17,7 @@ import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
-import CmsTemplatesComponent from '../../components/CmsTemplatesComponent';
+import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const CardContainer = styled.div`

package/v2Containers/Line/Create/index.js

@@ -8,7 +8,7 @@ import { Row, Col, Spin, Breadcrumb } from 'antd';
 import _ from 'lodash';
 import messages from './messages';
 import * as actions from './actions';
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as globalActions from '../../../containers/Cap/actions';
 //import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';

package/v2Containers/Line/Edit/index.js

@@ -17,7 +17,7 @@ import _ from 'lodash';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
 import {makeSelectMetaEntities, setInjectedTags} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import * as globalActions from "../../Cap/actions";
 import * as actions from "../../MobilePush/Edit/actions";
 import * as templatesActions from "../../Templates/actions";

package/v2Containers/Login/index.js

@@ -10,7 +10,7 @@ import { createStructuredSelector } from 'reselect';
 import makeSelectLogin from './selectors';
 import messages from './messages';
 import config from '../../config/app';
-import LoginForm from './components/LoginForm';
+import LoginForm from './v2Components/LoginForm';
 import * as actions from '../../containers/Cap/actions';
 import { UserIsNotAuthenticated } from '../../utils/authWrapper';
 import loaderGif from '../../assets/loading_img.gif';

package/v2Containers/MobilePush/Create/index.js

@@ -18,7 +18,7 @@ import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons,
 import { makeSelectCreate, makeSelectCreateResponse, makeSelectIosCta } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import * as globalActions from '../../../containers/Cap/actions';
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import './_mobilePushCreate.scss';
 import * as actions from './actions';
 
@@ -151,7 +151,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   };
 
-  onFormDataChange = (formData, tabCount) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
     if (!isEmpty(templateCta)) {
@@ -187,6 +187,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (this.props.isFullMode && this.props.defaultData && isEmpty(formData['template-name'])) {
       newFormData['template-name'] = get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged}, () => {
       if (this.props.isFullMode) {
         this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
@@ -1169,6 +1174,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   addSecondoryCta = (flag, formData, schemaField) => {
     const id = schemaField.id;
     const schema = cloneDeep(this.state.schema);
+    const formDataCopy = cloneDeep(formData);
     const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
     const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
     const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
@@ -1270,7 +1276,24 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       });
     });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(inputFields, {identifier: 'add-sec-cta-2'});
+      inputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, inputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    }
   };
   copyIphoneContent = () => {
     const formData = cloneDeep(this.state.formData);

package/v2Containers/MobilePush/Edit/index.js

@@ -19,7 +19,7 @@ import styled from 'styled-components';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse, makeSelectIosCta} from "./selectors";
 import {makeSelectMetaEntities, setInjectedTags, isLoadingMetaEntities} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import * as globalActions from "../../Cap/actions";
 import * as actions from "../../MobilePush/Edit/actions";
 import * as templatesActions from "../../Templates/actions";
@@ -189,7 +189,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     });
   };
-  onFormDataChange = (formData, tabCount, currentTab) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     console.log('Form data changed is ', formData, tabCount, currentTab);
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
@@ -218,6 +218,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.isFullMode && this.props.defaultData && _.isEmpty(formData['template-name'])) {
       newFormData['template-name'] = _.get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount}, () => {
       this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
     });
@@ -1604,6 +1609,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   addSecondoryCta = (flag, formData, field, inputSchema, currentTab) => {
     const id = field.id;
     const tabIndex = currentTab || this.state.currentTab;
+    const formDataCopy = cloneDeep(formData);
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
@@ -1619,13 +1625,32 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const deleteCount = indexOfNextField - fieldIndex;
       newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
     }
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
-    if (inputSchema) {
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(newInputFields, {identifier: 'add-sec-cta-2'});
+      newInputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, newInputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      if (inputSchema) {
+        return schema;
+      }
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+      this.injectEvents(schema);
       return schema;
     }
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-    return schema;
+    return true;
   };
 
   addSecondoryCtaIos = (flag, formData, schemaField) => {

package/v2Containers/MobilePush/initialSchema.js

@@ -441,6 +441,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",
@@ -1323,6 +1324,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",

package/v2Containers/Sms/Create/index.js

@@ -17,7 +17,7 @@ import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
 import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import './_smsCreate.scss';
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
 import * as charCount from '../../../utils/smsCharCount';

package/v2Containers/Sms/Edit/index.js

@@ -17,7 +17,7 @@ import { bindActionCreators } from 'redux';
 import { makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
 import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import * as actions from './actions';
 import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import '../Create/_smsCreate.scss';

package/v2Containers/TagList/index.js

@@ -17,7 +17,7 @@ import { UserIsAuthenticated } from '../../utils/authWrapper';
 import * as actions from './actions';
 import * as globalActions from '../../containers/Cap/actions';
 // import styled from styled-components;
-import CapTagList from '../../components/CapTagList';
+import CapTagList from '../../v2Components/CapTagList';
 import './_tagList.scss';
 const TreeNode = Tree.TreeNode;
 

package/v2Containers/Templates/index.js

@@ -33,17 +33,17 @@ import * as smsEditActions from '../Sms/Edit/actions';
 import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Create/actions';
-import CardGrid from '../../components/CardGrid';
+import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
 import * as globalActions from '../Cap/actions';
 import { makeSelectAuthenticated } from '../Cap/selectors';
 import {getMessageObject} from '../../utils/messageUtils';
 import * as commonUtil from '../../utils/common';
-import Pagination from '../../components/Pagination';
-import EmailPreview from '../../components/EmailPreview';
+import Pagination from '../../v2Components/Pagination';
+import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
-import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
 const {CapCustomCardList} = CapCustomCard;
 const InlineDiv = styled.div`

package/v2Containers/TestPage/index.js

@@ -1,6 +1,6 @@
 
 import React from "react";
-import SmsTest from '../../components/SmsTest';
+import SmsTest from '../../v2Components/SmsTest';
 
 export default class TestPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {

package/v2Containers/WeChat/MapTemplates/index.js

@@ -19,13 +19,13 @@ import { makeSelectMetaEntities, makeSelectFetchingSchema, setInjectedTags } fro
 import makeSelectWeChat from './selectors';
 import messages from './messages';
 import * as actions from './actions';
-import FormBuilder from '../../../components/FormBuilder';
+import FormBuilder from '../../../v2Components/FormBuilder';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as templateActions from '../../Templates/actions';
-// import SlideBox from '../../components/SlideBox';
-// import PageHeader from '../../components/PageHeader';
+// import SlideBox from '../../v2Components/SlideBox';
+// import PageHeader from '../../v2Components/PageHeader';
 import './_mapTemplates.scss';
 
 import callNativeEvent from '../../../utils/callNativeEvent';

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -22,9 +22,9 @@ import './_createRichmedia.scss';
 import messages from './messages';
 import * as globalActions from '../../../../containers/Cap/actions';
 import {getMessageObject} from '../../../../../utils/messageUtils';
-import FormBuilder from '../../../../components/FormBuilder';
-import Header from '../../../../components/Header';
-import WechatRichmediaTemplatePreview from '../../../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import FormBuilder from '../../../../v2Components/FormBuilder';
+import Header from '../../../../v2Components/Header';
+import WechatRichmediaTemplatePreview from '../../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 const MenuItem = Menu.Item;
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {