@capillarytech/creatives-library 2.0.79 → 2.0.81

package/v2Containers/MobilePush/Edit/messages.js

@@ -247,7 +247,23 @@ export default defineMessages({
     defaultMessage: 'IOS template is not configured, Save without IOS template',
   },
   "selectActionButton": {
-    id: 'app.containers.MobilePush.Create.mobilePush',
+    id: 'app.containers.MobilePush.Edit.mobilePush',
     defaultMessage: 'Select action buttons',
   },
+  "validationError": {
+    id: 'app.containers.MobilePush.Edit.validationError',
+    defaultMessage: 'Validation error',
+  },
+  "invalidIosMessage": {
+    id: 'app.containers.MobilePush.Edit.invalidIosMessage',
+    defaultMessage: 'Validation failed for IOS',
+  },
+  "invalidAndroidMessage": {
+    id: 'app.containers.MobilePush.Edit.invalidAndroidMessage',
+    defaultMessage: 'Validation failed for Android',
+  },
+  "invalidTags": {
+    id: 'app.containers.MobilePush.Create.invalidTags',
+    defaultMessage: 'Invalid tags',
+  },
 });

package/v2Containers/MobilePush/Edit/selectors.js

@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import { fromJS } from 'immutable';
 
 /**
  * Direct selector to the create state domain
  */
-const selectMobilePushEditDomain = () => (state) => state.get('mobileEdit'); // reducer injected as mobileEdit in library mode.
+const selectMobilePushEditDomain = () => (state) => state.get('mobileEdit') || fromJS({}); // reducer injected as mobileEdit in library mode.
 
 
 /**

package/v2Containers/MobilePush/commonMethods.js

@@ -2,15 +2,16 @@ import {get, filter, cloneDeep} from 'lodash';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import messages from './Create/messages';
-function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab}) {
+  const currentTab = tab || this.state.currentTab;
   const newInputFields = cloneDeep(inputFields);
   newInputFields.splice(fieldIndex + 1, 0, {
     rowClassName: 'mobile-push-row',
-    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,
 
     cols: [
       {
-        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,
         type: "radioGroup",  //Resembles component to be used
         metaType: "text",
         datatype: "string",
@@ -33,12 +34,12 @@ function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
   newInputFields.splice(fieldIndex + 2, 0, {
     rowClassName: 'mobile-push-row',
     id: 'cta-deeplink-select-section',
-    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,
 
     cols: [
 
       {
-        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,
         placeholder: "Select DeepLink",
         type: "select",  //Resembles component to be used
         options: deepLinkOptions,
@@ -153,10 +154,11 @@ function getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
   });
   return newInputFields;
 }
-function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field}) {
+function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field, tab}) {
+  const currentTab = tab || this.state.currentTab;
   const inputFields = cloneDeep(inputFieldsArgs);
   const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-  const deeplinkValue = formData[this.state.currentTab - 1][field.id];
+  const deeplinkValue = formData[currentTab - 1][field.id];
   const componentIndex = fieldIndex + 1;
   const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${field.id}-select` : `${field.id}-text`;
   if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {

package/v2Containers/WeChat/MapTemplates/index.js

@@ -20,15 +20,15 @@ import makeSelectWeChat from './selectors';
 import messages from './messages';
 import * as actions from './actions';
 import FormBuilder from '../../../components/FormBuilder';
-import { UserIsAuthenticated } from '../../../../utils/authWrapper';
+import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as globalActions from '../../../containers/Cap/actions';
-import {getMessageObject} from '../../../../utils/messageUtils';
+import {getMessageObject} from '../../../utils/messageUtils';
 import * as templateActions from '../../Templates/actions';
 // import SlideBox from '../../components/SlideBox';
 // import PageHeader from '../../components/PageHeader';
 import './_mapTemplates.scss';
 
-import callNativeEvent from '../../../../utils/callNativeEvent';
+import callNativeEvent from '../../../utils/callNativeEvent';
 
 // const Option = Select.Option;
 
@@ -1141,14 +1141,14 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       return false;
     }
     const temp = schema;
-    let newSchema = _.cloneDeep(schema);
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
       let tempContainer = container;
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    newSchema = this.hideSchemaElementsByModule(schema);
+    let newSchema = _.cloneDeep(schema);
+    newSchema = this.hideSchemaElementsByModule(newSchema);
     this.setState({schema: newSchema});
     return schema;
   }

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

@@ -1,55 +0,0 @@
-<?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/SmsPreviewV2/_smsPreviewV2.scss

@@ -1,353 +0,0 @@
-.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

@@ -1,69 +0,0 @@
-/**
-*
-* 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

@@ -1,13 +0,0 @@
-/*
- * 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 !',
-  },
-});