@capillarytech/creatives-library 0.1.27 → 0.1.29

package/components/CardGrid/index.js

@@ -37,7 +37,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
         <div className={this.props.enablePagination ? 'pagination-container' : ''}>
           <Row gutter={this.props.gutterSize}>
-            { this.props.listItem ? this.props.listItem.map( (item) => (
+            { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
               <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
                 <CustomCard id={item.id} onHover={this.handleOnItemHover} onClick={this.handleOnItemClick} content={item.content} footer={item.footer} height={item.footer ? "312px" : "258px"}></CustomCard>
               </Col>

package/components/FormBuilder/index.js

@@ -446,6 +446,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   /* eslint-disable */
   validateForm(tags, injectedTags, isSave, showMessages) {
     console.log('validating form', this.state.formData);
+    console.log("mmm", this.props );
     let isValid = true;
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     const currentModule = (this.props.location && this.props.location.query.module) ? this.props.location.query.module : 'default';
@@ -491,6 +492,47 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         errorData['template-name'] = false;
       }
     }
+
+    //validation for LINE
+    if (this.props.schema.channel === 'LINE') {
+      console.log('line error validation form data', this.state.formData);
+      if (this.state.formData['0']['message-editor'] !== undefined ) {
+        const content = this.state.formData['0']['message-editor'];
+        console.log('tag valid response', content);
+        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        console.log('tag valid response', tagValidationResponse);
+        if (tagValidationResponse.valid) {
+          errorData['0']['message-editor'] = false;
+        } else {
+          console.log('message error validation tags issue');
+          errorData['0']['message-editor'] = true;
+          isValid = false;
+        }
+        if (content.trim() === '') {
+          console.log('line error validation content is empty');
+          errorData['0']['message-editor'] = true;
+          isValid = false;
+        }
+      }
+
+      if ( (this.state.formData['0'].image !== undefined)){
+        const imgContentLength = this.state.formData['0'].image.length;
+        if (imgContentLength < 1) {
+          console.log('line error validation image content is empty');
+          errorData['0'].image = true;
+          isValid = false;
+        }else{
+          errorData['0'].image = false;
+        }
+      }
+      if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
+        errorData['template-name'] = true;
+        isValid = false;
+      } else {
+        errorData['template-name'] = false;
+      }
+    }
+
     if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'WECHAT') {
       console.log('Validating Form Now ', this.state.formData);
       _.forEach(this.state.formData, (val, index) => {
@@ -995,6 +1037,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       const ifSkipped = this.skipTags(tagValue);
       if (ifSkipped) {
         ifSupported = true;
+        const missingTagIndex = response.missingTags.indexOf(tagValue);
+        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          response.missingTags.splice(missingTagIndex, 1);
+        }
       }
       ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
       if (!ifSupported) {
@@ -1821,6 +1867,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return true;
   };
   callChildEvent(data, val, event, e) {
+    console.log("lks 1", data);
+    console.log("lks 2", val);
+    console.log("lks 3", event);
     if (!event) {
       console.log('rogue event');
       return;
@@ -2736,6 +2785,29 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
           }
             break;
+          case "line-preview": {
+            console.log("lipak inside", this.state.formData['0'].image);
+            const content = {
+              bodyText: isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`message-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id],
+              bodyImage: this.state.formData[`${this.state.currentTab - 1}`].image,
+            };
+            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+              return true;
+            }
+            console.log("lipak inside formdata@@@", content);
+            columns.push(
+              <Col key="input" span={23} offset={1}>
+                <TemplatePreview
+                  key={val.id}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel}
+                  content={content}
+                >
+                </TemplatePreview>
+              </Col>
+            );
+          }
+            break;
           case "mobile-push-preview":
             if (!this.state.formData[`${this.state.currentTab - 1}`]) {
               return true;

package/components/PreviewSideBar/index.js

@@ -43,10 +43,11 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
     this.setState({device: ev.target.value});
   }
   goToEdit(e) {
-    this.props.onEditClick(e, this.props.templateData._id);
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType);
   }
   render() {
     console.log('preview sidebar', this.props);
+    const modeTypeLine = this.props.templateData.modeType; // expected: (text or image)
     let content = '';
     if (this.props.channel.toLowerCase() === 'wechat') {
       console.log('Template Infog ', this.props.templateData);
@@ -67,6 +68,14 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
           content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
         }
       }
+    } else if (this.props.channel.toLowerCase() === "line") {
+      const isMsgReady = (this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base);
+      if (isMsgReady) {
+        content = {
+          bodyText: this.props.templateData.versions.base.content.messages[0].text ? this.props.templateData.versions.base.content.messages[0].text : '',
+          bodyImage: this.props.templateData.versions.base.content.messages[0].previewImageUrl ? this.props.templateData.versions.base.content.messages[0].previewImageUrl : '',
+        };
+      }
     } else {
       content = this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base ? this.props.templateData.versions.base['sms-editor'] : '';
       for (let idx = 2; idx <= 5; idx += 1) {

package/components/TemplatePreview/index.js

@@ -58,7 +58,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           </div>
           ) : ''
         }
-        { channel && channel.toLowerCase() === 'mobilepush' &&
+        { channel && (channel.toLowerCase() === 'mobilepush') &&
           (<div className="shell align-center" id="mobilepush-preview">
             <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt="Preview is being generated"/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
@@ -106,6 +106,21 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           </div>
           )
         }
+        {
+          channel && channel.toLowerCase() === 'line' ? (
+            <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+              <div className="msgContainer">
+                <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
+                <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
+                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyText) ? content.bodyText : ''}
+                </div>
+              </div>
+              { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
+            </div>
+          ) : ''
+        }
         {
           this.props.charCounterEnabled && !_.isEmpty(smsDetails) ?
             <p style={{margin: '16px 0'}} className="preview-info">{`${smsDetails.msgCount} ${this.props.intl.formatMessage(messages.sms)}(${smsDetails.totalLength} ${this.props.intl.formatMessage(messages.characters)})`}</p> : ''

package/containers/Cap/constants.js

@@ -19,3 +19,4 @@ export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE'
 export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST';
 export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS';
 export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
+export const HIDE_TAGS = 'cap/HIDE_TAGS';

package/containers/Cap/index.js

@@ -220,7 +220,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
             text: this.props.intl.formatMessage(messages.ebill),
             value: 'EBILL',
           },
-
+          {
+            link: '/line',
+            text: 'Line',
+            value: 'LINE',
+          },
         ],
       },
       {

package/containers/Cap/reducer.js

@@ -95,6 +95,12 @@ function capReducer(state = fromJS(initialState), action) {
         layouts: [],
         tags: [],
       });
+    case types.HIDE_TAGS: {
+      const metaEntities = {tags: {}, layouts: state.get('metaEntities').layouts};
+      metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
+      metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
+      return state.setIn(['metaEntities'], metaEntities);
+    }
     default:
       return state;
   }

package/containers/Email/index.js

@@ -2493,8 +2493,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         _.forEach(container.tabContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {
           const tempEl = containerInputFieldCol;
           if (containerInputFieldCol.id === "tab-header") {
-            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 : 'English';
-            tempEl.value = baseLanguage;
+            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';
+            const supportedLanguages = this.props.Global.currentOrgDetails.basic_details.supported_languages;
+            if (!supportedLanguages) {
+              tempEl.value = 'English';
+              return;
+            }
+            const langObject = supportedLanguages.find( (lang) => lang.iso_code === baseLanguage);
+            if (langObject) {
+              tempEl.value = langObject.language;
+            } else {
+              tempEl.value = 'English';
+            }
           }
         });
         _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (containerInputFieldCol) => {

package/containers/Email/reducer.js

@@ -14,7 +14,7 @@ const initialState = fromJS({
 });
 
 function emailReducer(state = initialState, action) {
-  console.log('email reducer', action);
+  //console.log('email reducer', action);
   switch (action.type) {
     case types.CREATE_TEMPLATE_REQUEST:
       return state

package/containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,43 @@
+.line-row{
+  margin-bottom: 16px;
+}
+.image-container{
+  display: flex;
+  height: 150px;
+  width: 320px;
+  border: solid 1px #C2C2C2;
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+//.ant-tabs-bar{
+//  margin-bottom: 0 !important;
+//  display: flex;
+//  align-items: center;
+//  flex-direction: row-reverse;
+//  justify-content: flex-end;
+//}
+//.ant-tabs-tabpane{
+//  padding: 16px 16px 16px 0;
+//  border: solid 1px #D6D6D6;
+//}
+//.ant-radio-wrapper{
+//  font-size: 14px;
+//  font-family: 'open-sans';
+//}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}

package/containers/Line/Create/actions.js

@@ -0,0 +1,90 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template) {
+  console.log('action trigereed createtemplate');
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST, template,
+  };
+}
+
+export function clearCreateResponse() {
+  console.log('clearCreateResponse');
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+
+// FOR EDIT
+
+
+export function editTemplate(template) {
+  console.log('action trigereed editTemplate line @@@');
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST, template,
+  };
+};
+
+export function getTemplateDetails(id) {
+  console.log('getting template line @@@', id);
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: 'LINE',
+  };
+};
+
+export function clearEditResponse() {
+  console.log('clearEditResponse');
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+};
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function getLineTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_LINE_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+};
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+};

package/containers/Line/Create/constants.js

@@ -0,0 +1,39 @@
+/*
+ *
+ * Create constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+
+export const CREATE_TEMPLATE_REQUEST = 'app/containers/Line/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/containers/Line/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/containers/Line/Create/CREATE_TEMPLATE_FAILURE';
+export const UPLOAD_ASSET_REQUEST = 'app/containers/Line/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/containers/Line/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/containers/Line/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/containers/Line/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/containers/Line/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+
+// edit
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/containers/Line/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/containers/Line/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/containers/Line/GET_LINE_TEMPLATES_LIST_FAILURE';