@capillarytech/creatives-library 6.11.7 → 6.11.9

package/components/TemplatePreview/index.js

@@ -217,6 +217,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           alignItems: 'center',
           backgroundColor: !video ? 'transparent' : CAP_G06,
           marginTop: 0,
+          padding: 0,
         }}
         key={video}
       >
@@ -224,7 +225,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           video
           ? (
             <>
-              <video width="150" style={{ opacity: 0.5 }}>
+              <video style={{ opacity: 0.5, width: '100%' }}>
                 <source src={video} type="video/mp4" />
               </video>
               <div

package/containers/Cap/actions.js

@@ -38,9 +38,10 @@ export function removeMessageFromQueue(messageIndex) {
   };
 }
 
-export function getUserData() {
+export function getUserData(callback) {
   return {
     type: types.GET_USER_DATA_REQUEST,
+    callback,
   };
 }
 

package/containers/Cap/index.js

@@ -22,6 +22,9 @@ import config from '../../config/app';
 import Toastr from '../../components/Toastr';
 import messages from './messages';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
+import { CREATIVES_UI_VIEW } from '../../v2Containers/App/constants';
+import AccessForbidden from '../../v2Components/AccessForbidden';
+
 const gtm = window.dataLayer || [];
 
 const CapWrapper = styled.div`
@@ -39,6 +42,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.state = {
       menuData: [],
       switchedOrg: false,
+      isCreativesAccessible: true,
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -47,7 +51,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   componentWillMount() {
-    this.props.actions.getUserData();
+    this.props.actions.getUserData((userData) => {
+      if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+        this.setState({ isCreativesAccessible: false });
+      }
+    });
     if (this.props.Global.user) {
       const userGtmData = this.getUserGtmData(this.props);
       gtm.push(userGtmData);
@@ -195,14 +203,12 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     // const changeOrg = this.props.actions.changeOrg;
     // const logout = this.props.actions.logout;
-    console.log('props', this.props);
     const proxyOrgList = [];
     let defaultOrgName = '';
     let defaultOrgId = '';
     let userName = '';
     const navigateToDashboard = this.navigateToDashboard;
     if (userData && userData.user && userData.user !== '') {
-      console.log('Org name ', userData.user.orgName, userData.user.orgID);
       defaultOrgName = userData.user.orgName;
       defaultOrgId = userData.user.orgID;
       proxyOrgList.push({ text: defaultOrgName, value: defaultOrgId });
@@ -272,6 +278,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
         ],
       },
     ];
+    const { isCreativesAccessible } = this.state;
     return (
       <CapWrapper>
          { this.props.loader.localeLoading || this.props.Global.fetching_userdata ? 
@@ -301,7 +308,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               logout={this.logout}
             /> : ''}
           <div className="main">
-            {loggedIn && type !== 'embedded' && this.props.location.pathname.indexOf('v2') === -1 ? <div id="cap-sidebar" className={'sidebar'}>
+            {isCreativesAccessible && loggedIn && type !== 'embedded' && this.props.location.pathname.indexOf('v2') === -1 ? <div id="cap-sidebar" className={'sidebar'}>
               <Sidebar
                 menuData={menuData}
                 actionComponents={actionComponents}
@@ -309,7 +316,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               />
             </div> : '' }
             <div className="main-content">
-              {React.Children.toArray(this.props.children)}
+              {!isCreativesAccessible ? <AccessForbidden /> : React.Children.toArray(this.props.children)}
             </div>
           </div>
         </div>

package/containers/Cap/sagas.js

@@ -68,7 +68,7 @@ function* logoutFlow() {
   }
 }
 
-export function* fetchUserInfo() {
+export function* fetchUserInfo({ callback }) {
   try {
     const result = yield call(Api.getUserData);
     const userData = result.user;
@@ -87,6 +87,9 @@ export function* fetchUserInfo() {
         },
       ];
     }
+    if (callback) {
+      callback(userData);
+    }
     yield call(LocalStorage.saveItem, 'orgID', result.currentOrgId);
     yield call(LocalStorage.saveItem, 'user', userData);
     yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails});

package/global-styles.js

@@ -13,4 +13,8 @@ injectGlobal`
     min-height: 100%;
     min-width: 100%;
   }
+
+  .text-align-center {
+    text-align: center;
+  }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.11.7",
+  "version": "6.11.9",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -34,4 +34,4 @@
     "webpack-bugsnag-plugins": "^1.4.3",
     "whatwg-fetch": "2.0.1"
   }
-}
+}

package/v2Components/AccessForbidden/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { CapRow, CapHeading } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
+const AccessForbidden = () => {
+  console.log('NIKHIL access');
+  return (
+    <CapRow className="margin-t-32 text-align-center">
+      <CapHeading type="h2">
+        <FormattedMessage {...messages.forbiddenHeader} />
+      </CapHeading>
+      <CapHeading type="h3" className="margin-t-24">
+        <FormattedMessage {...messages.forbiddenDesc} />
+      </CapHeading>
+    </CapRow>
+  );
+};
+
+export default AccessForbidden;

package/v2Components/AccessForbidden/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.components.AccessForbidden';
+
+export default defineMessages({
+  forbiddenHeader: {
+    id: `${prefix}.forbiddenHeader`,
+    defaultMessage: 'Access Forbidden',
+  },
+  forbiddenDesc: {
+    id: `${prefix}.forbiddenDesc`,
+    defaultMessage: 'This page access has not been provided to you.',
+  },
+});

package/v2Components/NavigationBar/messages.js

@@ -9,51 +9,51 @@ import { defineMessages } from 'react-intl';
 export const scope = 'creatives.componentsV2.NavigationBar';
 
 export default defineMessages({
-  header: {
+  "header": {
     id: `${scope}.header`,
     defaultMessage: 'This is the NavigationBar component!',
   },
-  selectedProductDefault: {
+  "selectedProductDefault": {
     id: `${scope}.selectedProductDefault`,
     defaultMessage: 'Engage+',
   },
-  insights: {
+  "insights": {
     id: `${scope}.insights`,
     defaultMessage: 'Insights+',
   },
-  orgSettings: {
+  "orgSettings": {
     id: `${scope}.orgSettings`,
     defaultMessage: 'Organisation settings',
   },
-  logout: {
+  "logout": {
     id: `${scope}.logout`,
     defaultMessage: 'Logout',
   },
-  businessProcesses: {
+  "businessProcesses": {
     id: `${scope}.businessProcesses`,
     defaultMessage: 'Workbench',
   },
-  campaign: {
-    id: `${scope}.campaign`,
+  'campaigns/ui/list': {
+    id: `${scope}.campaigns/ui/list`,
     defaultMessage: 'Engage+',
   },
-  wecrm: {
+  "wecrm": {
     id: `${scope}.wecrm`,
     defaultMessage: 'Wecrm',
   },
-  loyaltyProgram: {
+  "loyaltyProgram": {
     id: `${scope}.loyaltyProgram`,
     defaultMessage: 'Loyalty+',
   },
-  storePerformance: {
+  "storePerformance": {
     id: `${scope}.storePerformance`,
     defaultMessage: 'Store Performance',
   },
-  memberCare: {
+  "memberCare": {
     id: `${scope}.memberCare`,
     defaultMessage: 'Member Care',
   },
-  storeCare: {
+  "storeCare": {
     id: `${scope}.storeCare`,
     defaultMessage: 'Store Care',
   },

package/v2Components/TemplatePreview/index.js

@@ -191,6 +191,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           alignItems: 'center',
           backgroundColor: !video ? 'transparent' : CAP_G06,
           marginTop: 0,
+          padding: 0,
         }}
         key={video}
       >
@@ -198,7 +199,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           video
           ? (
             <>
-              <video width="126" style={{ opacity: 0.5 }}>
+              <video style={{ opacity: 0.5, width: '100%' }}>
                 <source src={video} type="video/mp4" />
               </video>
               <div

package/v2Containers/App/constants.js

@@ -47,3 +47,5 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
+
+export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';

package/v2Containers/Cap/index.js

@@ -19,7 +19,7 @@ import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath } from '../../config/path';
-import { GTM_TRACKING_ID } from '../App/constants';
+import { GTM_TRACKING_ID, CREATIVES_UI_VIEW } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import {
   HELP_URL,
@@ -44,6 +44,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     super(props);
     this.state = {
       switchedOrg: false,
+      isCreativesAccessible: true,
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -52,7 +53,10 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   componentWillMount() {
-    this.props.actions.getUserData(() => {
+    this.props.actions.getUserData((userData) => {
+      if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+        this.setState({ isCreativesAccessible: false });
+      }
       this.setDimensionData();
     });
     this.props.actions.getTopbarMenuData();
@@ -178,6 +182,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
+    const { isCreativesAccessible } = this.state;
     console.log('v2 locale loading', this.props.loader.localeLoading);
     return (
       <CapWrapper>
@@ -200,6 +205,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                 <NavigationBar
                   userData={Global}
                   changeOrg={this.changeOrg}
+                  isCreativesAccessible={isCreativesAccessible}
                   logout={this.logout}
                   settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
                   orgSettingsUrl={ORG_SETTINGS_URL}

package/v2Containers/Line/Container/Video/index.js

@@ -105,12 +105,12 @@ export const LineVideo = ({
     } = content;
     const videoUrl = originalContentUrl || videoSrc;
     const videoActionLabel = label || actionLabel;
+    const videoPreviewUrl = previewImageUrl || rootPreviewImageUrl;
     if (videoUrl && type === 'video') {
       updateVideoStatus(true);
       updateCreateNew(true);
       updateVideoSrc(videoUrl);
       updateTextMessageTitle(messageTitle);
-      updateImagePreview(previewImageUrl || rootPreviewImageUrl);
       updateVideoName(videoName);
       updateVideoWidth(width || videoWidth);
       updateVideoHeight(height || videoHeight);
@@ -119,6 +119,9 @@ export const LineVideo = ({
       updateActionLabel(videoActionLabel);
       updateSelectedAction(selectedAction || (!!videoActionLabel ? DISPLAY_ACTION_BUTTON : HIDE_ACTION_BUTTON));
       updateTitle(altText);
+      if (videoPreviewUrl) {
+        updateImagePreview(videoPreviewUrl);
+      }
     }
   }, [content]);
 
@@ -198,7 +201,8 @@ export const LineVideo = ({
   const updateMetadataLoaded = () => {
     const { current: { duration, videoHeight, videoWidth } = {} } = videoEl;
     if (duration) {
-      updateVideoDuration(moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss"));
+      const value = moment('1900-01-01 00:00:00').add(duration, 'seconds').format("HH.mm.ss");
+      updateVideoDuration(value);
       updateVideoHeight(videoHeight);
       updateVideoWidth(videoWidth);
       updateMessageState({
@@ -214,7 +218,7 @@ export const LineVideo = ({
         actionUrl,
         videoHeight,
         videoWidth,
-        videoDuration,
+        videoDuration: value,
         selectedAction,
         messageType: 'videoSrc',
       });

package/v2Containers/TemplatesV2/index.js

@@ -26,6 +26,8 @@ import Line from '../Line/Container';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
+import { CREATIVES_UI_VIEW } from '../App/constants';
+import AccessForbidden from '../../v2Components/AccessForbidden';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -215,27 +217,34 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const { isFullMode, className } = this.props;
+    const { isFullMode, className, authData = {}} = this.props;
+    const { accessiblePermissions = []} = authData.user || {};
+    let isCreativeAccessible = true;
+    if (!accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+      isCreativeAccessible = false;
+    }
+
     return (
-      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
-        {isFullMode && <Helmet
-          title={this.props.intl.formatMessage(messages.creatives)}
-          meta={[
-            { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
-          ]}
-        />}
+      !isCreativeAccessible ? <AccessForbidden /> : (
+        <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+          {isFullMode && <Helmet
+            title={this.props.intl.formatMessage(messages.creatives)}
+            meta={[
+              { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
+            ]}
+          />}
           <div className="component-wrapper">
             {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-              <StyledCapTab
-                panes={this.state.panes}
-                onChange={this.channelChange}
-                activeKey={this.state.selectedChannel}
-                defaultActiveKey={this.state.selectedChannel}
-                isFullMode={isFullMode}
-              />
+            <StyledCapTab
+              panes={this.state.panes}
+              onChange={this.channelChange}
+              activeKey={this.state.selectedChannel}
+              defaultActiveKey={this.state.selectedChannel}
+              isFullMode={isFullMode}
+            />
           </div>
-      </div>
-
+        </div>
+      )
     );
   }
 }
@@ -258,6 +267,7 @@ TemplatesV2.propTypes = {
   onFacebookSubmit: PropTypes.func,
   messageDetails: PropTypes.object,
   cap: PropTypes.object,
+  authData: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {