@capillarytech/creatives-library 2.0.61 → 2.0.63

package/app.js

@@ -67,7 +67,7 @@ if (module.hot) {
     render(translationMessages);
   });
 }
-const openSansObserver = new FontFaceObserver('Open Sans', {});
+const openSansObserver = new FontFaceObserver('Roboto', {});
 // When Open Sans is loaded, add a font-family using Open Sans to the body
 openSansObserver.load().then(() => {
   document.body.classList.add('fontLoaded');

package/assets/NoImage1.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropsTypes from 'prop-types';
+const SvgNoImage1 = (props) => (
+  <svg
+    width={props.width || "1em"}
+    height={props.height || "1em"}
+    viewBox="0 0 244 124"
+    fill="currentColor"
+    {...props}
+  >
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#FFF"
+        fillRule="nonzero"
+        d="M7.692 0h228.616c2.675 0 3.645.278 4.623.801a5.452 5.452 0 0 1 2.268 2.268c.523.978.801 1.948.801 4.623v108.616c0 2.675-.278 3.645-.801 4.623a5.452 5.452 0 0 1-2.268 2.268c-.978.523-1.948.801-4.623.801H7.692c-2.675 0-3.645-.278-4.623-.801a5.452 5.452 0 0 1-2.268-2.268c-.523-.978-.801-1.948-.801-4.623V7.692c0-2.675.278-3.645.801-4.623A5.452 5.452 0 0 1 3.07.801C4.047.278 5.017 0 7.692 0z"
+      />
+      <circle cx={212.074} cy={61} r={19} fill="#F4F5F7" />
+      <circle cx={20} cy={19} r={8} fill="#F4F5F7" />
+      <rect width={62} height={12} x={12} y={45} fill="#EBECF0" rx={4} />
+      <rect width={162} height={12} x={12} y={65} fill="#EBECF0" rx={4} />
+      <rect
+        width={62}
+        height={20}
+        x={12}
+        y={92}
+        fill="#2466EA"
+        opacity={0.2}
+        rx={4}
+      />
+      <rect
+        width={62}
+        height={20}
+        x={86}
+        y={92}
+        fill="#2466EA"
+        opacity={0.2}
+        rx={4}
+      />
+      <rect width={54} height={12} x={32} y={13} fill="#F4F5F7" rx={4} />
+      <rect width={23} height={12} x={98} y={13} fill="#F4F5F7" rx={4} />
+    </g>
+  </svg>
+);
+
+SvgNoImage1.propTypes = {
+  width: PropsTypes.width,
+  height: PropsTypes.height,
+};
+
+export default SvgNoImage1;

package/assets/WithImage1.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+const SvgWithImage1 = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 244 248"
+    fill="currentColor"
+    {...props}
+  >
+    <defs>
+      <rect id="with-image-1_svg__a" width={220} height={120} rx={4} />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#FFF"
+        fillRule="nonzero"
+        d="M7.692 0h228.616c2.675 0 3.645.278 4.623.801a5.452 5.452 0 0 1 2.268 2.268c.523.978.801 1.948.801 4.623v232.616c0 2.675-.278 3.645-.801 4.623a5.452 5.452 0 0 1-2.268 2.268c-.978.523-1.948.801-4.623.801H7.692c-2.675 0-3.645-.278-4.623-.801a5.452 5.452 0 0 1-2.268-2.268c-.523-.978-.801-1.948-.801-4.623V7.692c0-2.675.278-3.645.801-4.623A5.452 5.452 0 0 1 3.07.801C4.047.278 5.017 0 7.692 0z"
+      />
+      <circle cx={212.074} cy={57} r={19} fill="#F4F5F7" />
+      <circle cx={20} cy={19} r={8} fill="#F4F5F7" />
+      <use
+        fill="#F4F5F7"
+        transform="translate(12 86)"
+        xlinkHref="#with-image-1_svg__a"
+      />
+      <path
+        fill="#DFE2E7"
+        d="M97.5 141a9.5 9.5 0 1 1 0-19 9.5 9.5 0 0 1 0 19zm7.802 29H88l13.458-16.823a4 4 0 0 1 6.247 0l4.42 5.524 12.102-20.044a4 4 0 0 1 6.848 0L150 170h-44.698z"
+      />
+      <rect
+        width={62}
+        height={20}
+        x={12}
+        y={216}
+        fill="#2466EA"
+        opacity={0.2}
+        rx={4}
+      />
+      <rect width={62} height={12} x={12} y={41} fill="#EBECF0" rx={4} />
+      <rect width={162} height={12} x={12} y={61} fill="#EBECF0" rx={4} />
+      <rect width={54} height={12} x={32} y={13} fill="#F4F5F7" rx={4} />
+      <rect width={23} height={12} x={98} y={13} fill="#F4F5F7" rx={4} />
+      <rect
+        width={62}
+        height={20}
+        x={86}
+        y={216}
+        fill="#2466EA"
+        opacity={0.2}
+        rx={4}
+      />
+    </g>
+  </svg>
+);
+
+export default SvgWithImage1;

package/components/FormBuilder/_formBuilder.scss

@@ -3,12 +3,17 @@
 .form-tab-header{
   display: flex;
   align-items: center;
-  font-family: open-sans, sans-serif !important;
   font-style: normal;
   font-weight: 600;
 }
 
-
+.form-builder-radio-group {
+ 
+    .cap-radio-v2{
+      display: inline-block;
+    }
+  
+}
 
 .textarea-error-message {
   top: initial !important;
@@ -59,7 +64,7 @@
     display: inline-block;
     font-size: 16px;
     margin: 4px;
-    font-family: Open-Sans;
+    // font-family: Open-Sans;
     text-align: center;
     width: 24px;
     height: 24px;

package/components/FormBuilder/index.js

@@ -12,6 +12,7 @@ import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
 import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import TemplatePreview from '../../components/TemplatePreview';
 import TagList from '../../containers/TagList';
 import SmsEditor from '../SmsEditor';
@@ -564,43 +565,49 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           const selector = index > 0 ? `${Number(index) + 1}` : '';
           let message = tab[`message-editor${selector}`];
 
-          message = message.trim();
-
           if (errorData[parseInt(index)]) {
-            if (message === "") {
-              errorData[parseInt(index)][`message-editor${selector}`] = true;
-              isValid = false;
-              isCurrentTabValid = false;
-            } else {
-              errorData[parseInt(index)][`message-editor${selector}`] = false;
-              const tagValidationResponse = this.validateTags(message, tags, injectedTags);
-              
-              if (tagValidationResponse.valid) {
-                errorData[parseInt(index)][`message-editor${selector}`] = false;
-              } else {
+            if (message) {
+              message = message.trim();
+
+              if (message === "") {
                 errorData[parseInt(index)][`message-editor${selector}`] = true;
                 isValid = false;
+                isCurrentTabValid = false;
+              } else {
+                errorData[parseInt(index)][`message-editor${selector}`] = false;
+                const tagValidationResponse = this.validateTags(message, tags, injectedTags);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-editor${selector}`] = false;
+                } else {
+                  errorData[parseInt(index)][`message-editor${selector}`] = true;
+                  isValid = false;
+                }
               }
-            }
 
+            }
+            
+            
 
-            const title = tab[`message-title${selector}`].trim();
-            if (title === "") {
-              errorData[parseInt(index)][`message-title${selector}`] = true;
-              isValid = false;
-              isCurrentTabValid = false;
-            } else {
-              errorData[parseInt(index)][`message-title${selector}`] = false;
-              const tagValidationResponse = this.validateTags(title, tags, injectedTags);
-              
-              if (tagValidationResponse.valid) {
-                errorData[parseInt(index)][`message-title${selector}`] = false;
-              } else {
+            let title = tab[`message-title${selector}`]
+            if(title){
+              title = title.trim();
+              if (title === "") {
                 errorData[parseInt(index)][`message-title${selector}`] = true;
                 isValid = false;
+                isCurrentTabValid = false;
+              } else {
+                errorData[parseInt(index)][`message-title${selector}`] = false;
+                const tagValidationResponse = this.validateTags(title, tags, injectedTags);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-title${selector}`] = false;
+                } else {
+                  errorData[parseInt(index)][`message-title${selector}`] = true;
+                  isValid = false;
+                }
               }
             }
-
             // if(tab['primary-cta-link'].trim() === ""){
             //   errorData[parseInt(index)][`primary-cta-link`] = true;
             //   isValid = false;
@@ -1132,7 +1139,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if (col.type === 'checkbox') {
-          if (isContainer) {
+          if (isContainer && !formData[index][col.id]) {
             formData[index][col.id] = false;
           } else if (!isContainer && formData[col.id] === undefined) {
             formData[col.id] = false;
@@ -1963,7 +1970,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     val.injectedEvents[event].call(this.props.parent, data);
   }
   openFileDialog = () => {
-    console.log("filedialog: ");
     document.getElementById("fileName").click();
   };
   handleOk = (ev) => {
@@ -2027,7 +2033,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return val.value;
   }
   uploadImages = (e, {files}, val) => {
-    console.log("uploadImages: ", e, {files}, val);
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
@@ -2164,7 +2169,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             columns.push(
-              <CapColumn key={val.id} span={val.width}>
+              <CapColumn key={val.id} span={val.width} offset={val.offset}>
                 <CapInput
                   id={val.id}
                   errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2202,6 +2207,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
                   errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                  label={val.label}
                   autosize={val.autosize ? val.autosizeParams : false}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   style={val.style ? val.style : {}}
@@ -2450,13 +2456,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   renderPrimitiveElement(val, childIndex) {
     const type = val.type;
     const tabName = this.state.formData[childIndex - 1] && this.state.formData[childIndex - 1].name ? this.state.formData[childIndex - 1].name : `${val.value} ${childIndex}`;
-    let value = val.dynamicTab ? tabName : val.value;
+    const value = val.dynamicTab ? tabName : val.value;
     switch (type) {
       case "span":
         return <span id={`${val.id}${childIndex > 1 ? childIndex : ''}`}>{val.dynamicTab ? tabName : val.value}</span>;
       case "div":
-        if (this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][val.id] && this.state.formData[`${this.state.currentTab - 1}`][val.id].trim() !== "") {
-          value = this.state.formData[`${this.state.currentTab - 1}`][val.id];
+        let children = _.get(this.state, `formData[${this.state.currentTab - 1}][${val.id}]`) || value;
+        if (_.isEmpty(value) && !_.isEmpty(val.value)) {
+          children = val.value;
         }
         return (<div
           className={val.className ? val.className : ''}
@@ -2464,7 +2471,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
           style={val.style ? val.style : {}}
           onInput={(e) => { e.stopPropagation(); this.callChildEvent(e.target.textContent, val, 'onChange'); }}
-        >{value}</div>);
+        >{children}</div>);
       default:
         return '';
     }
@@ -2523,10 +2530,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key={val.id} span={val.width}>
+                <CapColumn key={val.id} span={val.width} offset={val.offset}>
                   <CapInput
                     id={val.id}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    label={val.label}
                     className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                     // fluid={val.fluid}
                     style={val.style ? val.style : {}}
@@ -2563,6 +2571,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     disabled={val.disabled}
                     className={`${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    label={val.label}
                     autosize={val.autosize ? val.autosizeParams : false}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
@@ -2581,13 +2590,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               columns.push(
                 <CapColumn key="input" span={val.width} offset={val.offset}>
                   <CapCheckbox
+                    key={val.id}
                     className={`${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    onChange={(e) => this.updateFormData(e.target.checked, val)}
+                    onChange={(e) => this.updateFormData(e.target.checked, val, val.submitAction)}
                     checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     style={val.style ? val.style : {}}
                     disabled={val.disabled}
+                    inductiveText={val.inductiveText}
                   >
                     {val.label}
                   </CapCheckbox>
@@ -2621,15 +2632,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadioGroup
                     key={`${val.id}-radio-group`}
-                    className={`${ifError ? 'error' : ''}`}
+                    className={`form-builder-radio-group ${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     value={this.handleSetRadioValue(this.state.formData, self.state.currentTab, val)}
                     name={val.name ? val.name : `${val.id}-name`}
-                    options={val.options}
                     disabled={val.disabled}
                   >
+                    {val.options.map((option, index) => <CapRadio value={option} inductiveText={val.inductiveText && val.inductiveText[index]}>{option}</CapRadio>) }
+
                   </CapRadioGroup>
                   {/*{ifError ?*/}
                   {/*<div className="error"> {val.errorMessage}</div>*/}
@@ -2658,17 +2670,34 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case 'upload':
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const ImageComponent = (props) => (
+              <div>
+                <div className={`image-container ${ifError ? 'error' : ''}`}>
+                  {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
+                    <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
+                    :
+                    <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
+                  }
+                </div>
+                {ifError && <div><span className="error">{props.errorMessage}</span></div>}
+
+              </div>
+             );
+            const WithLabel = LabelHOC(ImageComponent);
             columns.push(
               <CapColumn span={val.width} offset={val.offset} style={val.style}>
+                {val.showPreview && <WithLabel {...val.previewProps}/>}
                 <form encType="multipart/form-data" id={val.id}>
                   <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept="image/*" />
-                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right', marginTop: '-68px'}}>
                     {val.label}
                   </CapButton>
                 </form>
               </CapColumn>
-            );
+              );
             break;
+
           case "table":
             columns.push(
               <CapTable dataSource={self.props.iosCtasData} loading={self.props.iosCtasData ? !self.props.iosCtasData.length : true} onRowClick={(row) => this.updateFormData(row, val, "onRowClick" )} pagination={val.pagination}>
@@ -2844,7 +2873,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
                 <CapSelect
                   id={val.id}
                   options={options}
@@ -3045,33 +3074,34 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const currentLang = this.state.formData[this.state.currentTab - 1].selectedLanguages[index];
             paneTabKey = this.state.formData[this.state.currentTab - 1] && this.state.formData[this.state.currentTab - 1][currentLang] && this.state.formData[this.state.currentTab - 1][currentLang].tabKey;
           }
-
-          renderedPanes.push(
-            <TabPane
-              forceRender
-              tab={
-                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-                  {
-                  _.forEach(renderedContentSections, (value) => {
+          if (pane.isSupported) {
+            renderedPanes.push(
+              <TabPane
+                forceRender
+                tab={
+                  <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                    {
+                    _.forEach(renderedContentSections, (value) => {
+                      if (value) {
+                        return value;
+                      }
+                      return value;
+                    })
+                    }
+                  </div>
+                }
+                key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
+                {
+                  _.forEach(renderedSections, (value) => {
                     if (value) {
                       return value;
                     }
                     return value;
                   })
-                  }
-                </div>
-              }
-              key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
-              {
-                _.forEach(renderedSections, (value) => {
-                  if (value) {
-                    return value;
-                  }
-                  return value;
-                })
-              }
-            </TabPane>);
-          paneIndex += 1;
+                }
+              </TabPane>);
+            paneIndex += 1;
+          }
         });
         extraActionSections = container.tabBarExtraContent && container.tabBarExtraContent.sections ? container.tabBarExtraContent.sections.map((section) => {
           result = this.renderSection(section);

package/components/PreviewSideBar/_previewsidebar.scss

@@ -6,7 +6,7 @@
 .preview-info{
   text-align: center;
   color: #333333;
-  font-family: Open-Sans;
+  // font-family: Open-Sans;
   line-height: 24px;
   font-size: 14px;
 }

package/components/TemplatePreview/_templatePreview.scss

@@ -229,7 +229,7 @@
 
 .preview-container{
   .preview-info {
-    font-family: 'proxima-nova';
+    // font-family: 'proxima-nova';
     font-weight: 600;
     font-size: 16px;
     text-align: center;

package/containers/CreativesContainer/SlideBoxContent.js

@@ -54,7 +54,7 @@ function SlideBoxContent(props) {
   let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
-  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === 'CALLTASK';
+  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;

package/containers/CreativesContainer/index.js

@@ -265,7 +265,7 @@ class Creatives extends React.Component {
     if (!isFullMode ) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-      const isCallTask = channel === 'CALLTASK';
+      const isCallTask = channel === constants.CALL_TASK;
       showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview') && !isCallTask;
       if (isMobilepush) {
         showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(mobilePushCreateMode));

package/containers/MobilePush/Create/_mobilePushCreate.scss

@@ -19,3 +19,16 @@
   padding: 16px 16px 16px 0;
   border: solid 1px #D6D6D6;
 }
+ 
+.ant-tabs-tab {
+  .form-tab-header{
+    .unsupported-channel {
+      .ant-tabs-nav & {
+        display: none;
+    
+      }
+    }  
+  }
+}
+
+

package/containers/MobilePush/Create/actions.js

@@ -44,3 +44,9 @@ export function clearAsset() {
     type: types.CLEAR_ASSET,
   };
 }
+
+export function resetStore() {
+  return {
+    type: types.RESET_STORE,
+  };
+}

package/containers/MobilePush/Create/constants.js

@@ -21,3 +21,4 @@ export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/containers/PushMessage/Create/
 export const GET_IOS_CTAS = 'app/containers/PushMessage/Create/GET_IOS_CTAS';
 export const GET_IOS_CTAS_SUCCESS = 'app/containers/PushMessage/Create/GET_IOS_CTAS_SUCCESS';
 export const GET_IOS_CTAS_FAILURE = 'app/containers/PushMessage/Create/GET_IOS_CTAS_FAILURE';
+export const RESET_STORE = 'app/containers/PushMessage/Create/RESET_STORE';