@capillarytech/creatives-library 3.8.11 → 3.9.0

package/v2Containers/Line/Create/index.js

@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import get from 'lodash/get';
+import set from 'lodash/set';
 import { bindActionCreators } from 'redux';
 import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
-import { CapHeading } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapHeading, CapRow, CapColumn } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import * as actions from './actions';
 import Gallery from '../../Assets/Gallery';
 import FormBuilder from '../../../v2Components/FormBuilder';
 //import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
-import {makeSelectCreateLine} from './selectors';
+import {makeSelectCreateLine, makeSelectLine} from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
@@ -44,7 +44,7 @@ export class Line extends Component {
       'title-tagList': {
         onTagSelect: this.onTagSelectTitle,
       },
-      pane: {
+      'pane': {
         onTabChange: this.onTabChange,
       },
       'line-template': {
@@ -53,7 +53,7 @@ export class Line extends Component {
       'image-upload-line': {
         onUpload: this.uploadImage,
       },
-      tagList: {
+      'tagList': {
         onTagSelect: this.onTagSelect,
       },
       'line-editor': {
@@ -88,7 +88,7 @@ export class Line extends Component {
       isReady: false,
       modeType: null,
       isDrawerRequired: false,
-      galleryPage: 1,
+      startValidation: false,
     };
   }
 
@@ -127,8 +127,26 @@ export class Line extends Component {
     if (modeType) {
       this.setState({ modeType, schema: {} });
     }
-    if (nextProps.isGetFormData) {
-      nextProps.getFormLibraryData(this.getFormData());
+    const {
+      isGetFormData,
+      templateData,
+    } = nextProps;
+    if (isGetFormData) {
+      const {
+        lineData,
+        getFormSubscriptionData,
+      } = nextProps;
+      let selectedAccount = {};
+      if (lineData) {
+        const {
+          weCrmAccounts = [],
+        } = lineData;
+        selectedAccount = weCrmAccounts.filter((account) => account === selectedAccount);
+      }
+      getFormSubscriptionData({ ...this.getFormData(), accountDetails: selectedAccount});
+    }
+    if (templateData && templateData.edit) {
+      this.setEditState(templateData);
     }
     if (isSchemaReady) {
       // set schema value as per mode type. Supported mode (text & image)
@@ -221,24 +239,6 @@ export class Line extends Component {
       this.props.actions.clearData();
     }
 
-    const isEditSucceed =
-      this.state.isEdit &&
-      nextProps.Line &&
-      nextProps.Line.editResponse &&
-      nextProps.Line.editResponse.templateId;
-    if (isEditSucceed) {
-      this.setState({ formData: {} });
-      const message = getMessageObject(
-        'success',
-        this.props.intl.formatMessage(
-          messages['Line Template Edited Successfully']
-        ),
-        true
-      );
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearEditResponse();
-    }
-
     if (
       nextProps.Line.editTemplateError &&
       !_.isEqual(
@@ -272,6 +272,40 @@ export class Line extends Component {
     }
   }
 
+  setEditSuccessMessage = () => {
+    this.setState({ formData: {} });
+    const message = getMessageObject(
+      'success',
+      this.props.intl.formatMessage(
+        messages['Line Template Edited Successfully']
+      ),
+      true
+    );
+    this.props.globalActions.addMessageToQueue(message);
+    this.props.actions.clearEditResponse();
+  }
+
+  setEditState = (data) => {
+    const { formData: previousFormData } = this.state;
+    const { text, originalContentUrl, imagePreview, image } = get(data, "versions.base.content.messages[0]");
+    const retrievedData = {
+      ...previousFormData[0],
+    };
+    if (text) {
+      retrievedData["message-editor"] = text;
+    }
+    const lineImage = originalContentUrl || image;
+    if (lineImage) {
+      retrievedData.image = lineImage;
+      retrievedData.imagePreview = imagePreview;
+    }
+    const formData = {
+      0: retrievedData,
+      base: retrievedData,
+    };
+    this.setState({ formData });
+  }
+
   componentWillUnmount() {
     window.removeEventListener('message', this.handleFrameTasks);
   }
@@ -297,7 +331,7 @@ export class Line extends Component {
   }
 
   onFormDataChange = (formData, tabCount, currentTab) => {
-    this.setState({ formData });
+    this.setState({ formData: { ...formData } });
     if (tabCount) {
       this.setState({ tabCount });
     }
@@ -468,13 +502,30 @@ export class Line extends Component {
         return;
       }
     }
-    if (this.state.isEdit) {
-      this.props.actions.editTemplate(obj, this.props.onCreateComplete);
-    } else {
-      this.props.actions.createTemplate(
-        obj,
-        this.props.onCreateComplete
-      );
+    if (!this.state.startValidation) {
+      this.setState({
+        startValidation: true,
+      }, () => {
+        const {
+          isFullMode,
+          saveMessage,
+          actions,
+          onCreateComplete,
+        } = this.props;
+        if (!isFullMode) {
+          saveMessage();
+        } else if (this.state.isEdit) {
+          actions.editTemplate(obj, () => {
+            this.setEditSuccessMessage();
+            onCreateComplete();
+          });
+        } else {
+          actions.createTemplate(
+            obj,
+            onCreateComplete
+          );
+        }
+      });
     }
   };
 
@@ -763,16 +814,24 @@ export class Line extends Component {
 
   removeStandAlone = () => {
     const schema = _.cloneDeep(this.state.schema);
-    if (
-      this.props.location.query.type === 'embedded' &&
-      this.props.location.query.module === 'loyalty'
-    ) {
+    const {
+      location: {
+        query: {
+          type,
+          mode,
+          module,
+        },
+      },
+    } = this.props;
+    if (type === 'embedded' && module === 'loyalty') {
       schema.standalone.sections.splice(0, 1);
-    } else if (
-      this.props.location.query.type === 'embedded' &&
-      typeof this.props.location.query.mode !== 'undefined'
-    ) {
-      delete schema.standalone;
+    } else if (type === 'embedded' && typeof mode !== 'undefined') {
+        delete schema.standalone;
+      } else if (!this.props.isFullMode) {
+        const childSections = get(schema, 'standalone.sections[0].childSections');
+        const fields = get(childSections, '[1].childSections[0].childSections');//removing template name section
+        fields.splice(0, 1);
+        set(childSections, '[1].childSections[0].childSections', fields);
     } else {
       schema.standalone.sections.splice(1, 1);
     }
@@ -910,18 +969,31 @@ export class Line extends Component {
   };
 
   render() {
-    if (
-      this.state.formData &&
-      this.state.formData['0'] &&
-      this.state.formData['0'].image
-    ) {
-      console.log('before render@@@', this.state.formData['0'].image);
-    }
-    let loading = this.props.Line.createTemplateInProgress
-      ? this.props.Line.createTemplateInProgress
-      : false;
-    if (this.props.Line.assetUploading) {
-      loading = true;
+    const {
+      Line: {
+        createTemplateInProgress,
+        assetUploading,
+      } = {},
+      templateData: {
+        edit,
+        mode,
+        orgId,
+      } = {},
+      params: {
+        id,
+      } = {},
+    } = this.props;
+    let loading = createTemplateInProgress || false;
+    loading = !!assetUploading;
+    if (edit || mode === 'edit' || (orgId && id)) {
+      const {
+        base: {
+          'message-editor': msgEditor,
+          image: uploadedAsset,
+        } = {},
+        reUpload,
+      } = this.state.formData;
+      loading = typeof reUpload === 'undefined' ? !(msgEditor || uploadedAsset) : !reUpload;
     }
     let tags =
       this.props.metaEntities && this.props.metaEntities.tags
@@ -931,9 +1003,9 @@ export class Line extends Component {
       tags = this.props.supportedTags;
     }
     return (
-      <Spin spinning={loading}>
-        <Row>
-          <Col>
+      <CapSpin spinning={loading}>
+        <CapRow>
+          <CapColumn>
             <FormBuilder
               key={'form builder'}
               schema={this.state.schema}
@@ -965,10 +1037,11 @@ export class Line extends Component {
               setDrawerVisibility={(drawervisibleFlag) =>
                 this.setState({ isDrawerRequired: drawervisibleFlag })
               }
+              startValidation={this.state.startValidation}
             />
-          </Col>
-        </Row>
-      </Spin>
+          </CapColumn>
+        </CapRow>
+      </CapSpin>
     );
   }
 }
@@ -989,10 +1062,13 @@ Line.propTypes = {
   injectedTags: PropTypes.object,
   onCreateComplete: PropTypes.func,
   isFullMode: PropTypes.bool,
+  saveMessage: PropTypes.func,
+  templateData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Line: makeSelectCreateLine(),
+  lineData: makeSelectLine(),
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),

package/v2Containers/Line/Create/sagas.js

@@ -16,7 +16,7 @@ export function* createTemplate({ template, callback }) {
     }
     yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
     if (callback) {
-      callback();
+      callback(result.response);
     }
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
@@ -56,7 +56,7 @@ export function* editTemplate({ template, callback }) {
       errorMsg = result.message;
     }
     if (callback) {
-      callback();
+      callback(result.response);
     }
     yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
   } catch (error) {

package/v2Containers/Line/Create/selectors.js

@@ -17,19 +17,14 @@ const selectLineMessageEditDomain = () => (state) => state.get('lineCreate');
 
 const makeSelectLine = () => createSelector(
   selectLineDomain(),
-  (substate) => substate.toJS()
+  (substate) => substate && substate.toJS()
 );
 
 const makeSelectCreateLine = () => createSelector(
   selectLineMessageEditDomain(),
-  (substate) => substate.toJS()
+  (substate) => substate && substate.toJS()
 );
 
-// const makeSelectDuplicate = () => createSelector(
-//   selectLineDuplicateDomain(),
-//   (substate) => substate.toJS()
-// );
-
 export {
   makeSelectLine, makeSelectCreateLine,
 };

package/v2Containers/Line/CreateWrapper/index.js

@@ -5,7 +5,8 @@
  */
 import React, {useState} from 'react';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
-import {CapRadioCard, CapLabel, CapButton} from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+import { CapRadioCard, CapLabel, CapButton } from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import styled from 'styled-components';
 import { CAP_SPACE_04, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -33,7 +34,7 @@ const CardContainer = styled.div`
 `;
 
 const CreateLineWrapper = (props) => {
-  const { intl: { formatMessage } } = props;
+  const { intl: { formatMessage }, selectedAccount } = props;
 
   const getModes = (modeList) => (
     modeList.map(({ label, imageSrc, type, title }) => ({
@@ -103,12 +104,14 @@ const CreateLineWrapper = (props) => {
       {...props}
       params={{mode: selectedLineTemplateOption}}
       route={{name: selectedLineTemplateOption}}
+      selectedAccount={selectedAccount}
     />
   );
 };
 
 CreateLineWrapper.propTypes = {
   intl: intlShape.isRequired,
+  selectedAccount: PropTypes.object,
 };
 
 export default injectIntl(CreateLineWrapper);

package/v2Containers/Line/CreateWrapper/messages.js

@@ -40,4 +40,16 @@ export default defineMessages({
     id: `${prefix}.continue`,
     defaultMessage: 'Continue',
   },
+  "accountLineListTitle": {
+    id: `${prefix}.accountLineListTitle`,
+    defaultMessage: 'Line accounts',
+  },
+  "accountLineListDescription": {
+    id: `${prefix}.accountLineListDescription`,
+    defaultMessage: 'Choose the account to send content',
+  },
+  "accountLineNoListTitle": {
+    id: `${prefix}.accountLineNoListTitle`,
+    defaultMessage: 'No line accounts present',
+  },
 });

package/v2Containers/MobilePush/Create/index.js

@@ -1714,9 +1714,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
-                onPreviewContentClicked={this.props.onPreviewContentClicked}
-                onTestContentClicked={this.props.onTestContentClicked}
-                templateData={this.props.templateData}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1806,8 +1803,6 @@ Create.propTypes = {
   isGetFormData: PropTypes.bool,
   onValidationFail: PropTypes.func,
   getFormLibraryData: PropTypes.func,
-  onPreviewContentClicked: PropTypes.func,
-  onTestContentClicked: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/index.js

@@ -1801,9 +1801,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
-                onPreviewContentClicked={this.props.onPreviewContentClicked}
-                onTestContentClicked={this.props.onTestContentClicked}
-                templateData={this.props.templateData}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -1896,8 +1893,6 @@ Edit.propTypes = {
   isGetFormData: PropTypes.bool,
   Create: PropTypes.object,
   onValidationFail: PropTypes.bool,
-  onPreviewContentClicked: PropTypes.func,
-  onTestContentClicked: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilepushWrapper/index.js

@@ -69,7 +69,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
     }
   }
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -112,9 +112,6 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               route={{ name: 'mobilepush' }}
               getDefaultTags={type}
               onValidationFail={onValidationFail}
-              onPreviewContentClicked={onPreviewContentClicked}
-              onTestContentClicked={onTestContentClicked}
-              templateData={templateData}
           />
 
 

package/v2Containers/Sms/Create/index.js

@@ -928,6 +928,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({startValidation: true}, this.showError);
   }
   render() {
+    console.log("this.props sms create: ", this.props);
     const schema = this.state.schema;
     const spinning = this.isSmsLoading();
     let tags = this.props.metaEntities && this.props.metaEntities.tags && this.props.metaEntities.tags.standard ? this.props.metaEntities.tags.standard : [];
@@ -975,8 +976,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
-                onTestContentClicked={this.props.onTestContentClicked}
-                onPreviewContentClicked={this.props.onPreviewContentClicked}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Edit/index.js

@@ -972,8 +972,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
                 selectedOfferDetails={this.props.selectedOfferDetails}
-                onPreviewContentClicked={this.props.onPreviewContentClicked}
-                onTestContentClicked={this.props.onTestContentClicked}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Templates/_templates.scss

@@ -13,23 +13,27 @@
         &:nth-child(4n+4) { //every 4th child
           margin-right: unset;
         }
+      }
+    }
+  }
+}
 
-        .LINE {
-          .ant-card-body {
-            background-color: $CAP_G09;
-            height: 320px;
-          }
-
-          &.no-image .ant-card-meta {
-            height: 276px;
-            background: $CAP_WHITE;
-            padding: $CAP_SPACE_16 $CAP_SPACE_12;
-
-            .ant-card-meta-description {
-              height: 250px;
-              word-wrap: break-word;
-            }
-          }
+.creatives-templates-list {
+  .pagination-container {
+    .LINE {
+      .ant-card-body {
+        background-color: $CAP_G09;
+        height: 320px;
+      }
+    
+      &.no-image .ant-card-meta {
+        height: 276px;
+        background: $CAP_WHITE;
+        padding: $CAP_SPACE_16 $CAP_SPACE_12;
+    
+        .ant-card-meta-description {
+          height: 250px;
+          word-wrap: break-word;
         }
       }
     }

package/v2Containers/Templates/actions.js

@@ -52,6 +52,13 @@
    };
  }
 
+ export function setLineAccount(lineAccount) {
+  return {
+    type: types.SET_LINE_ACCOUNT,
+    lineAccount,
+  };
+}
+
  export function handleHtmlUpload(selectedTemplate) {
    return {
      type: types.SET_SELECTED_LAYOUT,

package/v2Containers/Templates/constants.js

@@ -43,3 +43,5 @@ export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";