@capillarytech/creatives-library 3.0.29 → 3.0.30

package/components/FormBuilder/index.js

@@ -2037,8 +2037,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     img.src = _URL.createObjectURL(file);
     img.onload = () => {
       const fileParams = {
-        width: this.width,
-        height: this.height,
+        width: img.width,
+        height: img.height,
         error: file.size / (1e+6) > 5,
       };
       this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);

package/components/TemplatePreview/index.js

@@ -152,6 +152,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 }
                 <div style={{marginTop: '8px', fontSize: '16px'}} >{`${this.props.intl.formatMessage(messages.sms)}: ${smsDetails.parts}`}</div>
                 <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.charactersPerSms)}: ${smsDetails.chars_used}`}</div>
+                { smsDetails.optoutUrlPresent && <div>
+                  <span style={{fontWeight: '100', fontSize: '12px'}}>{this.props.intl.formatMessage(messages.includes)}</span>
+                  <span style={{fontSize: '12px'}}>{this.props.intl.formatMessage(messages.optout)}</span>
+                  <span style={{fontWeight: '100', fontSize: '12px'}}>{this.props.intl.formatMessage(messages.tag)}</span>: {smsDetails.optouturlLength}
+                </div>}
               </p>
             </div>
             : ''

package/components/TemplatePreview/messages.js

@@ -26,4 +26,16 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
+  includes: {
+    id: 'app.components.TemplatePreview.includes',
+    defaultMessage: 'Includes ',
+  },
+  optout: {
+    id: 'app.components.TemplatePreview.optout',
+    defaultMessage: 'Optout ',
+  },
+  tag: {
+    id: 'app.components.TemplatePreview.tag',
+    defaultMessage: 'tag ',
+  },
 });

package/config/app.js

@@ -9,12 +9,14 @@ const config = {
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',
+    subscription_api_endpoint: '/arya/api/v1/subscription',
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
     arya_endpoint: 'https://nightly.capillary.in/arya/api/v1',
+    subscription_api_endpoint: 'https://nightly.capillary.in/arya/api/v1/subscription',
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',

package/containers/Cap/index.js

@@ -166,6 +166,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const map = {
       'en': 'en',
       'zh-cn': 'zh',
+      'zh': 'zh',
     };
     return map[locale];
   }

package/containers/Line/Create/index.js

@@ -717,8 +717,8 @@ export class Line extends Component {
     } else {
       data.fileParams.isGeneratePreview = true;
       const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
+      // const blob = data.file.slice(0, -1, 'image');
+      const newFile = new File([data.file], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image/jpeg'});
       this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
     }
   };

package/containers/Line/Edit/index.js

@@ -718,8 +718,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.props.globalActions.addMessageToQueue(message);
     } else {
       const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
+      // const blob = data.file.slice(0, -1, 'image');
+      const newFile = new File([data.file], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
       this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
     }
   };

package/containers/MobilePush/Create/index.js

@@ -1706,8 +1706,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       this.props.globalActions.addMessageToQueue(message);
     } else {
       const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
+      // const blob = data.file.slice(0, -1, 'image');
+      const newFile = new File([data.file], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
       this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
     }
   };

package/containers/MobilePush/Edit/index.js

@@ -1064,8 +1064,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.props.globalActions.addMessageToQueue(message);
     } else {
       const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
+      // const blob = data.file.slice(0, -1, 'image');
+      const newFile = new File([data.file], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
       this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
     }
   };

package/containers/Sms/Create/index.js

@@ -20,8 +20,7 @@ import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
-import * as charCount from '../../../utils/smsCharCount';
-import {checkUnicode} from '../../../utils/smsCharCountV2';
+import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 
@@ -223,7 +222,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
-    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
+    const msgObj = updateCharCount(baseData['sms-editor']);
     result.base.msg_count = msgObj.msgCount;
     console.log("Message Count", msgObj.msgCount);
     const response = {

package/containers/Templates/index.js

@@ -222,13 +222,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
           }
         });
-        this.setState({selectedAccount: selectedAccount.name}, () => {
-          params.wecrmId = selectedAccount.configs.wecrm_app_id;
-          params.wecrmToken = selectedAccount.configs.wecrm_token;
-          params.originalId = selectedAccount.sourceAccountIdentifier;
-          nextProps.actions.setWeChatAccount(selectedAccount);
-          this.getAllTemplates({params});
-        });
+        if (!_.isEmpty(selectedAccount)) {
+          this.setState({selectedAccount: selectedAccount.name}, () => {
+            params.wecrmId = selectedAccount.configs.wecrm_app_id;
+            params.wecrmToken = selectedAccount.configs.wecrm_token;
+            params.originalId = selectedAccount.sourceAccountIdentifier;
+            nextProps.actions.setWeChatAccount(selectedAccount);
+            this.getAllTemplates({params});
+          });
+        }
       } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
         _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
           if ((nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) || (nextProps.location.query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === nextProps.location.query.source_account_id)) {

package/hoc/withCreatives.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { injectIntl } from 'react-intl';
+import * as globalActions from '../v2Containers/Cap/actions';
+import * as creativesContainerActions from '../v2Containers/CreativesContainer/actions';
+import { UserIsAuthenticated } from '../utils/authWrapper';
+
+/**
+ * Higher Order Component to common out creatives channel logic
+ * @param {*} WrappedComponent
+ * @returns {*} modified wrapped component
+ */
+export default ({
+  WrappedComponent,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth,
+  }) => {
+  const CreativesCommon = (props) => {
+    useEffect(() => {
+      const {
+        globalActions: {
+          setInjectedTags,
+        },
+        forwardedTags = {},
+      } = props;
+      // setting the passed tags from parent in Cap store
+      setInjectedTags(forwardedTags);
+    }, []);
+
+    return <WrappedComponent {...props} />;
+  };
+
+  const hocMapDispatchToProps = (dispatch) => {
+    const passedMapDispatchToProps = mapDispatchToProps(dispatch);
+    return {
+      ...passedMapDispatchToProps,
+      globalActions: bindActionCreators(globalActions, dispatch),
+      creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
+    };
+  };
+
+  const CreativeComponent = connect(mapStateToProps, hocMapDispatchToProps)(injectIntl(CreativesCommon));
+  return userAuth ? UserIsAuthenticated(CreativeComponent) : CreativeComponent;
+};

package/hoc/withStyles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+/**
+ * Higher Order Component to have consistent logic of styling components
+ * @param {*} WrappedComponent
+ * @returns {*} styled wrapped component
+ */
+export default (WrappedComponent, styles) => {
+  const StyledComponent = styled(WrappedComponent)`${styles};`;
+  StyledComponent.defaultProps = WrappedComponent.defaultProps;
+  return StyledComponent;
+};

package/index.js

@@ -51,7 +51,7 @@ import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
-
+import { updateCharCount } from './utils/smsCharCountV2';
 
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
@@ -103,4 +103,5 @@ export { CapContainer,
   TemplatesV2Container,
   CreativesContainer,
   WeChat,
+  updateCharCount,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.0.29",
+  "version": "3.0.30",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -16,9 +16,7 @@
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
     "normalizr": "^3.2.3",
-    "perfect-scrollbar": "^0.7.0",
     "react-datepicker": "^0.46.0",
-    "react-grid-layout": "^0.14.6",
     "react-router": "^3.2.0",
     "react-router-dom": "^4.2.2",
     "redux": "3.6.0",
@@ -27,7 +25,6 @@
     "redux-immutable": "3.0.8",
     "reselect": "2.5.4",
     "styled-components": "^3.2.1",
-    "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }
 }

package/routes.js

@@ -12,7 +12,7 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
-
+import {updateCharCount} from './utils/smsCharCountV2';
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
 };
@@ -23,6 +23,7 @@ const loadModule = (cb) => (componentModule) => {
 
 export default function createRoutes(store) {
   // Create reusable async injectors using getAsyncInjectors factory
+  updateCharCount("", false); // calling here to get unsubscribeurl from api.
   const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
   injectSagas(rootSaga.default);
   injectSagas(languageSaga.default);

package/services/api.js

@@ -10,10 +10,12 @@ import * as API from '../utils/ApiCaller';
 let API_ENDPOINT = config.development.api_endpoint;
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
+let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
   ARYA_ENDPOINT = config.production.arya_endpoint;
+  SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
 }
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -324,3 +326,15 @@ export const getLocizMessage = (locale) => {
   const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getUnsubscribeUrl = () => {
+  const body = {
+    orgUnitId: -1,
+    source: 'INSTORE',
+    accountId: '',
+    priority: 'BULK',
+    channel: 'mobile',
+  };
+  const url = `${SUBSCRIPTION_API_ENDPOINT}/unsubscribeUrl`;
+  return request(url, getAPICallObject('POST', body));
+};

package/utils/smsCharCountV2.js

@@ -1,4 +1,9 @@
 import React from 'react';
+import * as Api from './../services/api';
+let optoutUrl;
+let showOptoutCount = true;
+let responseState = "REQUEST";
+
 function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
 }
@@ -49,13 +54,27 @@ export function checkUnicode(content) {
   return false;
 }
 export function updateCharCount(content, isUnicodeEnabled) {
-  console.log(content);
-  var chars_arr = content.split("");
-  console.log(chars_arr);
+  if (showOptoutCount && optoutUrl === undefined && responseState === 'REQUEST') {
+    Api.getUnsubscribeUrl().then((res) => {
+      optoutUrl = res.response.response;
+      responseState = "SUCCESS";
+    }).catch((err) => {
+      showOptoutCount = false;
+      responseState = "FAIL";
+      optoutUrl = undefined;
+      console.log('get optouturl error: ', err);
+    });
+  }
+  const optoutTag = /{{optout}}/g;
+  const optoutTagLength = 14;
+  const contentOriginal = content;
+  const noOfOptout = (content.match(optoutTag) || []).length;
+  content = showOptoutCount ? content.replace(optoutTag, "") : content;
+  var chars_arr = contentOriginal.split("");
   var coding = '7bit';
   var parts = 1;
   var part = 1;
-  var chars_used = 0;
+  var chars_used = showOptoutCount ? ((optoutUrl && optoutUrl.length || 0) * noOfOptout) : 0;
   var chars_sms = 160;
   var sms_parts_container = [];
   var partc = [];
@@ -127,17 +146,20 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   }
 
+  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
   console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
   console.log('Parts:', parts);
   console.log('SMS Chars:', chars_sms);
   console.log('SMS Char total:', chars_used);
-
+  console.log('SMS optouturl: ', optoutUrl);
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,
     chars_sms,
     chars_used,
     char_list: partc,
+    optouturlLength: (optoutUrl && optoutUrl.length) || 0,
+    optoutUrlPresent: noOfOptout > 0,
+    responseState,
   };
 }
-

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -350,3 +350,11 @@
   background-color: #333333;
   margin-right: 4px;
 }
+
+.character-count-col{
+  margin-top: 8px;
+  margin-left: 40px;
+  .optout-tag-heading{
+    font-size: 12px;
+  }
+}

package/v2Components/TemplatePreview/index.js

@@ -59,24 +59,42 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <FormattedMessage {...messages.smsFormatType}/>
             }
           </CapHeading>}
+          {smsDetails.optoutUrlPresent && <CapHeading type="h6">
+            <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
+          </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 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>
+                {!this.props.showCount && <div>
+                  <CapColumn className="character-count-col" span={20}>
+                    {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
+                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
+                      {smsDetails.unicode &&
+                        <FormattedMessage {...messages.smsFormatType}/>
+                      }
+                    </CapHeading>}
+                    {smsDetails.optoutUrlPresent && <CapHeading type="h6" className="optout-tag-heading">
+                      <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
+                    </CapHeading>}
+                  </CapColumn>
+                </div>}
               </div>
-          }
+            }
             {channel && channel.toLowerCase() === 'wechat' ?
             ( <div className="shell align-center" id="sms-preview">
               <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>

package/v2Components/TemplatePreview/messages.js

@@ -22,6 +22,10 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
+  optoutCharactersTotal: {
+    id: 'app.components.TemplatePreview.optoutCharactersTotal',
+    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
+  },
   smsFormatType: {
     id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -50,6 +50,7 @@ function SlideBoxContent(props) {
       showTemplateName,
       onValidationFail,
       channelsToHide,
+      forwardedTags,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
@@ -97,6 +98,7 @@ function SlideBoxContent(props) {
         onCallTaskSubmit={onCallTaskSubmit}
         cap={cap}
         channelsToHide={channelsToHide}
+        forwardedTags={forwardedTags}
         />
         )}
       {isPreview && (
@@ -107,44 +109,52 @@ function SlideBoxContent(props) {
         charCounterEnabled
         templateData={templateData}
         showCount
+        forwardedTags={forwardedTags}
       />
         )}
       {isEmailPreview && (
         <EmailPreviewV2
           templateData={templateData}
-         />
+          forwardedTags={forwardedTags}
+        />
       )
       }
-      {isMpushPreview &&
-        <MobilePushPreview templateData={templateData} channel={channel}/>
-      }
+      {isMpushPreview && (
+        <MobilePushPreview
+          templateData={templateData}
+          channel={channel}
+          forwardedTags={forwardedTags}
+        />
+      )}
       {isEditSms && (
-      <SmsEdit
-        setIsLoadingContent={setIsLoadingContent}
-        location={creativesLocationProps}
-        isFullMode={isFullMode}
-        route={{ name: 'sms' }}
-        params={{id: templateData._id}}
-        isGetFormData={isGetFormData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
-        templateData={templateData}
-        // subscriptionTemplateDetails={templateData} // used only in library mode
-          />
-        )}
+        <SmsEdit
+          setIsLoadingContent={setIsLoadingContent}
+          location={creativesLocationProps}
+          isFullMode={isFullMode}
+          route={{ name: 'sms' }}
+          params={{id: templateData._id}}
+          isGetFormData={isGetFormData}
+          getFormSubscriptionData={getFormData}
+          getDefaultTags={type}
+          templateData={templateData}
+          forwardedTags={forwardedTags}
+        />
+      )}
       {
         isEditCallTask &&
           <CallTask
             mode={'edit'}
             templateData={templateData}
             onCallTaskSubmit={onCallTaskSubmit}
-        />
+            forwardedTags={forwardedTags}
+          />
       }
       {
          isCreateCallTask &&
          <CallTask
            mode={'create'}
            onCallTaskSubmit={onCallTaskSubmit}
+           forwardedTags={forwardedTags}
         />
        }
       {isCreateSms && (
@@ -157,7 +167,8 @@ function SlideBoxContent(props) {
         getFormSubscriptionData={getFormData}
         getDefaultTags={type}
         isFullMode={isFullMode}
-          />
+        forwardedTags={forwardedTags}
+      />
         )}
       {isEmailCreate && (
       <EmailWrapper
@@ -177,6 +188,7 @@ function SlideBoxContent(props) {
         onResetStep={onResetStep}
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
+        forwardedTags={forwardedTags}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -198,7 +210,8 @@ function SlideBoxContent(props) {
         cap={cap}
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
-          />
+        forwardedTags={forwardedTags}
+      />
         )}
       {isEditMPush &&
         <MobliPushEdit
@@ -216,6 +229,7 @@ function SlideBoxContent(props) {
           showTemplateName={showTemplateName}
           getDefaultTags={type}
           onValidationFail={onValidationFail}
+          forwardedTags={forwardedTags}
         />
         }
       {isCreateMPush &&
@@ -238,6 +252,7 @@ function SlideBoxContent(props) {
         onResetStep={onResetStep}
         showTemplateName={showTemplateName}
         query={query}
+        forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}/>
         }
     </CreativesWrapper>
@@ -271,5 +286,6 @@ SlideBoxContent.propTypes = {
   showTemplateName: PropTypes.func,
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
+  forwardedTags: PropTypes.object,
 };
 export default SlideBoxContent;