@capillarytech/creatives-library 2.0.76 → 2.0.77

package/assets/android-message-gui-2.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="360px" height="725px" viewBox="0 0 360 725" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Artboard Copy 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Artboard-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#FFFFFF" x="0" y="660" width="360" height="65"></rect>
+        <g id="Organisms/ui/android/screenshots/wallpaper" transform="translate(120.000000, 0.000000)"></g>
+        <g id="Group-5" transform="translate(16.000000, 680.000000)">
+            <polygon id="Stroke-1" stroke-opacity="0.0117647061" stroke="#000000" stroke-width="1.33333336e-11" points="0 0 23.999999 0 23.999999 23.999999 0 23.999999"></polygon>
+            <polygon id="Fill-3" fill="#7F7F7F" points="18.9999989 12.9999992 12.9999992 12.9999992 12.9999992 18.9999989 10.9999993 18.9999989 10.9999993 12.9999992 4.9999997 12.9999992 4.9999997 10.9999993 10.9999993 10.9999993 10.9999993 4.9999997 12.9999992 4.9999997 12.9999992 10.9999993 18.9999989 10.9999993"></polygon>
+        </g>
+        <text id="Add-text-to-this-mes" font-family="Roboto-Regular, Roboto" font-size="15" font-weight="normal" letter-spacing="0.3" fill="#959595">
+            <tspan x="53" y="697">Add text to this message</tspan>
+        </text>
+        <g id="Group-5" transform="translate(320.000000, 679.000000)">
+            <polygon id="Stroke-1" stroke-opacity="0.0117647061" stroke="#000000" stroke-width="1.33333336e-11" points="0 0 23.999999 0 23.999999 23.999999 0 23.999999"></polygon>
+            <polygon id="Fill-3" fill="#757575" points="2.00999988 20.9999987 22.9999986 11.9999993 2.00999988 2.99999982 1.99999988 9.9999994 16.999999 11.9999993 1.99999988 13.9999992"></polygon>
+        </g>
+        <rect id="Rectangle" stroke="#E6E6E6" fill="#F4F5F7" x="0.5" y="86.5" width="359" height="573"></rect>
+        <g id="Group">
+            <g id="Toolbar">
+                <polygon id="Toolbar-bg" fill="#E51FA3" points="360 0 0 0 0 86 360 86"></polygon>
+                <g id="Toolbar-contents" transform="translate(16.000000, 40.000000)">
+                    <g id="Back">
+                        <rect id="Bounds" x="0" y="0" width="24" height="24"></rect>
+                        <polygon id="Shape" fill="#FFFFFF" points="20 11 7.8 11 13.4 5.4 12 4 4 12 12 20 13.4 18.6 7.8 13 20 13"></polygon>
+                    </g>
+                </g>
+            </g>
+            <g id="Status-bar">
+                <rect id="Status-bar-bg" fill="#CF0E8F" x="0" y="0" width="360" height="24"></rect>
+                <rect id="bounds" x="242" y="0" width="118" height="24"></rect>
+                <g id="battery" transform="translate(337.000000, 4.000000)">
+                    <polygon id="bounds" points="0 0 16 0 16 16 0 16"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="9 1.875 9 1 6 1 6 1.875 3 1.875 3 15 12 15 12 1.875"></polygon>
+                </g>
+                <g id="cellular" transform="translate(317.000000, 4.000000)">
+                    <polygon id="bounds" points="0 0 16 0 16 16 0 16"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="0 15 14 15 14 1"></polygon>
+                </g>
+                <g id="wifi" transform="translate(296.000000, 4.000000)">
+                    <polygon id="bounds" points="2 0 18 0 18 16 2 16"></polygon>
+                    <path d="M0.977372085,4.01593123 C3.48821908,2.12256382 6.61301513,1 10,1 C13.3869849,1 16.5117809,2.12256382 19.0226279,4.01593123 L10,15 L0.977372085,4.01593123 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+            <g id="Icons-/-Navigation-24px-/-White-/-More" transform="translate(332.000000, 42.000000)">
+                <g id="More">
+                    <rect id="Bounds" x="0" y="0" width="12" height="24"></rect>
+                    <path d="M6,8 C7.1,8 8,7.1 8,6 C8,4.9 7.1,4 6,4 C4.9,4 4,4.9 4,6 C4,7.1 4.9,8 6,8 L6,8 Z M6,10 C4.9,10 4,10.9 4,12 C4,13.1 4.9,14 6,14 C7.1,14 8,13.1 8,12 C8,10.9 7.1,10 6,10 L6,10 Z M6,16 C4.9,16 4,16.9 4,18 C4,19.1 4.9,20 6,20 C7.1,20 8,19.1 8,18 C8,16.9 7.1,16 6,16 L6,16 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/components/FormBuilder/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-case-declarations */
 
 /**
 *
@@ -32,6 +33,7 @@ const {CapRadioGroup} = CapRadio;
 // import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
 const isUrl = (str) => {
+  // eslint-disable-next-line no-useless-escape
   const res = str.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
   return res;
 };
@@ -413,8 +415,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   }
   isValidExternalLink = ({obj, key}) => {
-    const url = _.get(obj, key);
-    return (url && url !== "" && isUrl(url));
+    if (key in obj) {
+      const url = _.get(obj, key);
+      return (url && url !== "" && isUrl(url));
+    }
+    return true;
   }
   /* eslint-disable */
   validateForm(tags, injectedTags, isSave, showMessages) {

package/components/SmsPreviewV2/_smsPreviewV2.scss

@@ -0,0 +1,353 @@
+.shell {
+    position: relative;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    left: 50%;
+    padding: 0 10px;
+    width: 450px;
+  
+    .preview-image {
+        width: 51%;
+        &.sms {
+          width: 45%;
+        }
+    }
+  
+    .msgContainer {
+      position: absolute;
+      top: 18%;
+      left: 28.8%;
+      width: 42%;
+      height: 336px;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+  
+      .sms-icon{
+        top: 0;
+        left: 2px;
+        width: 25px;
+        position: absolute;
+      }
+      &.sms{
+        height: 290px;
+        width: 40%;
+        .sms-icon{
+          width: 20px;
+          left: 14px;
+        }
+      }
+  
+      .message-pop{
+        .unicode-disabled{
+          font-size: 16px;
+        }
+        &.sms {
+          max-height: 100%;
+          position: absolute;
+          // width: initial;
+          overflow: auto;
+          top: 0;
+          left: 17%;
+          white-space: pre-wrap;
+          word-break: break-word;
+          line-height: 14px;
+          padding: 0 8px 8px 8px;
+          font-size: 10px;
+          width: 80%;
+          font-family: 'open-sans';
+          .message-pop-item{
+            padding: 4px;
+            background: #3F51B5;
+            color: #FFFFFF;
+            margin-top: 8px;
+            border-radius: 4px;
+            min-height: 26px;
+            &:first-child{
+              margin-top: 0;
+            }
+          }
+        }
+        &:not(.sms){
+          padding: 4px;
+          background: #3F51B5;
+          position: absolute;
+          // width: initial;
+          overflow: auto;
+          top: 0;
+          left: 17%;
+          white-space: pre-wrap;
+          word-break: break-word;
+          border-radius: 4px;
+          max-height: 100%;
+          color: #FFFFFF;
+          width: 70%;
+          min-height: 26px;
+          line-height: 14px;
+          padding: 8px;
+          font-size: 10px;
+          font-family: 'open-sans';
+        }
+      }
+    }
+    .android-push-message-Container, .iphone-push-message-Container{
+      position: absolute;
+      top: 11%;
+      left: 28.8%;
+      width: 42%;
+      height: 336px;
+      overflow: auto;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      .message-pop{
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        max-height: 100%;
+        width: 100%;
+        min-height: 26px;
+        line-height: 15px;
+        font-size: 10px;
+        .body-image{
+          img{
+            max-width: 100%;
+            max-height: 90px;
+            margin: auto;
+            display: block;
+          }
+        }
+      }
+    }
+    .android-push-message-Container{
+      .title, .body-text, .body-image, .app-name{
+        background-color: #FFFFFF;
+        color: #333333;
+      }
+      .app-name{
+        color: #5D5D5D;
+        font-weight: 600;
+        padding: 8px 8px 4px 8px;
+      }
+      .title, .body-image{
+        padding: 0 8px 0 8px;
+  
+      }
+      .body-text{
+        padding: 0 8px 4px 8px;
+        color: #5a5959;
+      }
+      .title{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .actions{
+        background-color: #EEEEEE;
+        height: 32px;
+        padding: 4px;
+        .action{
+          line-height: 24px;
+          font-size: 10px;
+          font-weight: 600;
+          color: #1970DA;
+          height: 12px;
+          margin-left: 8px;
+        }
+      }
+    }
+    .iphone-push-message-Container{
+      top: 8%;
+      .message-pop{
+        border-radius: 4px;
+        word-wrap: break-word;
+      }
+      .title, .body-text, .body-image, .app-name{
+        background-color: #FFFFFF;
+        color: #333333;
+      }
+      .body-image{
+        padding-top: 8px;
+      }
+      .title{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .app-name{
+        padding: 8px;
+        color: #5D5D5D;
+        border-bottom: solid 1px #D6D6D6;
+        .material-icons{
+          font-size: 12px;
+          float: right;
+        }
+      }
+      .title, .body-text{
+        padding: 4px;
+      }
+      .title{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .body-text{
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+      .actions{
+        background-color: #FFFFFF;
+        opacity: 0.8;
+        height: 32px;
+        line-height: 26px;
+        margin-top: 4px;
+        border-radius: 6px;
+        text-align: center;
+        padding: 4px;
+        .action{
+          font-size: 12px;
+          font-weight: 600;
+          color: #000000;
+          text-align: center;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  
+  .align-center {
+    text-align: center;
+  }
+  
+  .align-left {
+    text-align: left;
+  }
+  
+  .preview-container{
+    .preview-info {
+      // font-family: 'proxima-nova';
+      font-weight: 600;
+      font-size: 16px;
+      text-align: center;
+    }
+  }
+  
+  .preview-container.embedded-preview{
+    .preview-image {
+      width: 38% !important;
+    }
+    .message-pop{
+      left: 21% !important;
+      width: 67% !important;
+    }
+    .sms-icon{
+      left: 12% !important;
+    }
+  }
+  
+  
+  
+  #slidebox-container {
+    left: 60vw;
+    width: 40vw;
+  
+    .shell {
+      position: relative;
+      -webkit-transform: translate(-50%);
+      transform: translate(-50%);
+      left: 50%;
+      padding: 0 10px;
+      width: initial;
+  
+      .preview-image {
+        &.sms{
+          width: 45%;
+        }
+      }
+  
+  
+      .msgContainer {
+        position: absolute;
+        top: 14%;
+        left: 29%;
+        width: 42%;
+        height: 275px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+  
+        .sms-icon{
+          top: 6%;
+          left: 2%;
+          width: 12%;
+          position: absolute;
+        }
+  
+        &.sms{
+          height: 290px;
+          width: 40%;
+          top: 16%;
+          .sms-icon{
+            left: 7%;
+          }
+        }
+        .message-pop{
+          &.sms {
+            max-height: 100%;
+            position: absolute;
+            // width: initial;
+            overflow: auto;
+            top: 6%;
+            left: 17%;
+            width: 80%;
+            white-space: pre-wrap;
+            word-break: break-word;
+            line-height: 14px;
+            padding: 0 8px 8px 8px;
+            font-size: 10px;
+            font-family: 'open-sans';
+            .message-pop-item{
+              padding: 8px;
+              background: #3F51B5;
+              color: #FFFFFF;
+              margin-top: 8px;
+              border-radius: 4px;
+              min-height: 26px;
+              &:first-child{
+                margin-top: 0;
+              }
+            }
+          }
+          &:not(.sms){
+            padding: 8px 8px;
+            background: #3F51B5;
+            position: absolute;
+            width: 65%;
+            top: 15%;
+            left: 19%;
+            word-break: break-all;
+            border-radius: 6px;
+            max-height: 100%;
+            overflow: auto;
+            color: #FFFFFF;
+            line-height: 14px;
+            font-family: "open-sans";
+            font-size: 10px;
+          }
+        }
+      }
+    }
+  }
+  .app-icon{
+    width: 10px;
+    height: 10px;
+    opacity: 1;
+    display: inline-block;
+    background-color: #333333;
+    margin-right: 4px;
+  }
+  

package/components/SmsPreviewV2/index.js

@@ -0,0 +1,69 @@
+/**
+*
+* SmsPreviewV2
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import androidPhoneImage from '../../assets/android-message-gui-2.svg';
+
+class SmsPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    let content = [this.props.content];
+    const channel = this.props.channel;
+    let smsDetails = {};
+    if (this.props.content && this.props.charCounterEnabled) {
+      smsDetails = updateCharCount(this.props.content, this.props.unicodeEnabled);
+      content = [];
+      for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
+        content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
+      }
+      if (document.getElementById("msg_count") && this.props.showCount) {
+        document.getElementById("msg_count").val = smsDetails.parts;
+      }
+    }
+    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    return (
+      <CapRow>
+        {this.props.showCount && <CapColumn span={16}>
+          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
+            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
+            {smsDetails.unicode &&
+              <FormattedMessage {...messages.smsFormatType}/>
+            }
+          </CapHeading>}
+        </CapColumn>}
+        <CapColumn span={this.props.showCount ? 8 : 24}>
+          <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
+            { channel && channel.toLowerCase() === 'sms' &&
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="msgContainer sms">
+                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg, index) =>
+                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                        {msg}
+                      </CapColumn>)
+                }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </CapColumn>
+      </CapRow>
+    );
+  }
+}
+
+SmsPreviewV2.propTypes = {
+
+};
+
+export default SmsPreviewV2;

package/components/SmsPreviewV2/messages.js

@@ -0,0 +1,13 @@
+/*
+ * SmsPreviewV2 Messages
+ *
+ * This contains all the text for the SmsPreviewV2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.SmsPreviewV2.header',
+    defaultMessage: 'This is the SmsPreviewV2 component !',
+  },
+});

package/{containers/WeChat → components/SmsPreviewV2}/tests/index.test.js

@@ -1,9 +1,9 @@
 // import React from 'react';
 // import { shallow } from 'enzyme';
 
-// import { WeChat } from '../index';
+// import SmsPreviewV2 from '../index';
 
-describe('<WeChat />', () => {
+describe('<SmsPreviewV2 />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(false);
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.76",
+  "version": "2.0.77",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -205,7 +205,6 @@ function SlideBoxContent(props) {
           route={{ name: 'mobilepush' }}
           templateData={templateData}
           showTemplateName={showTemplateName}
-          getDefaultTags={type}
         />
         }
       {isCreateMPush &&

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -8,16 +8,8 @@ import messages from './messages';
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
-function getChannelLabel(channel) {
-  const labels = {
-    sms: 'SMS',
-    email: 'Email',
-    mobilepush: 'Push notification',
-  };
-  return labels[channel.toLowerCase()];
-}
 function SlideBoxHeader(props) {
-  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName, channel } = props;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName } = props;
   const TemplateName = isFullMode && showTemplateName;
   return (
     <div key="creatives-container-slidebox-header-content">
@@ -55,7 +47,7 @@ function SlideBoxHeader(props) {
         )}
       {!TemplateName && slidBoxContent === 'createTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...messages.createMessageContent} values={{channel: getChannelLabel(channel)}}/>}
+        title={<FormattedMessage {...messages.createMessageContent} />}
         prefix={!isFullMode && showPrefix &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />
@@ -74,6 +66,5 @@ SlideBoxHeader.propTypes = {
   isFullMode: PropTypes.bool,
   showPrefix: PropTypes.bool,
   showTemplateName: PropTypes.func,
-  channel: PropTypes.string,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/index.js

@@ -30,9 +30,6 @@ const SlideBoxWrapper = styled.div`
   .cap-slide-box-v2-container{
     .slidebox-header, .slidebox-content-container, .slidebox-footer{
       padding: 0 32px;
-      &.has-footer{
-        overflow-x: hidden;
-      }
     }
   }
 `;
@@ -387,7 +384,6 @@ class Creatives extends React.Component {
           header={
             <SlideBoxHeader
               key="creatives-container-slidebox-header"
-              channel={currentChannel}
               messages={this.props.messages}
               slidBoxContent={this.state.slidBoxContent}
               templateData={templateData}

package/v2Containers/CreativesContainer/messages.js

@@ -260,7 +260,7 @@ export default defineMessages({
   },
   "createMessageContent": {
     id: `${scope}.editMessageContent`,
-    defaultMessage: `New {channel} message`,
+    defaultMessage: `New message`,
   },
   "creativeTemplatesDesc": {
     id: `${scope}.creativeTemplatesDesc`,

package/v2Containers/MobilePush/Edit/index.js

@@ -1388,7 +1388,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
         temp.injectedEvents = {};
         temp.className = temp.className ? temp.className : '';
-
+        if (this.props.location.query.type === 'embedded' && ((temp.type === "tag-list" || temp.type === "div" || temp.type === "icon") && this.props.location.query.module !== "dvs") && (temp.supportedEvents)) {
+          temp.className = `${temp.className} hide`;
+        }
         // if (this.props.location.query.type === 'embedded' && (temp.type === "input" || temp.type === "textarea" || temp.type === "radioGroup") && this.props.location.query.module !== "dvs") {
         //   temp.className = `${temp.className} disabled`;
         //   temp.disabled = true;

package/v2Containers/MobilepushWrapper/index.js

@@ -63,7 +63,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
     this.setState({templateName: ev.target.value});
   }
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -103,7 +103,6 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               isGetFormData={isGetFormData}
               showTemplateName={showTemplateName}
               route={{ name: 'mobilepush' }}
-              getDefaultTags={type}
           />
 
 
@@ -125,7 +124,6 @@ MobilepushWrapper.propTypes = {
   query: PropTypes.object,
   isFullMode: PropTypes.bool,
   showTemplateName: PropTypes.func,
-  type: PropTypes.string,
 };