@capillarytech/creatives-library 6.11.8 → 6.12.0

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.8",
+  "version": "6.12.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,152 +1,152 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
-  position: absolute;
-  left: 53.5%;
-  top:28%;
-  background: white;
-  width: 19.5%;
-  text-align: left;
-  height: fit-content;
-  border-radius: 0.285rem;
-}
-
-.shell-lock-screen-android .lock-screen-preview{
-  .wechat-android-sender-id{
-    position: absolute;
-    top: 46%;
-    font-size: 10px;
-    left: 28%;
-  }
-  .wechat-android-title{
-    position: absolute;
-    top: 49%;
-    font-size: 10px;
-    left: 28%;
-    color: #5e6c84;
-  }
-  .wechat-android-action-buttons{
-    position: absolute;
-    left: 28%;
-    top: 53%;
-    font-size: 10px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-sender-id{
-    position: absolute;
-    top: 44%;
-    font-size: 10px;
-    left: 28.5%;
-  }
-  .wechat-ios-title{
-    position: absolute;
-    top: 47%;
-    font-size: 10px;
-    left: 28.5%;
-    color: #5e6c84;
-  }
-  .wechat-ios-action-reply{
-    position: absolute;
-    left: 35%;
-    top: 59%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-action-cancel{
-    position: absolute;
-    left: 34.5%;
-    top: 66%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-}
-
-.wechatMsgContainer{
-    position: absolute;
-    left: 30%;
-    top: 20%;
-    background: white;
-    width: 40%;
-    text-align: left;
-    height: fit-content;
-    border-radius: $CAP_SPACE_04;
-    .richmedia-template {
-        .richmedia-image-container {
-          width: 100%;
-          height: 102px;
-          position: relative;
-          img {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
-        }
-        .name-container-with-abstract {
-          padding: $CAP_SPACE_12;
-          height: 68px;
-        }
-        .name-container {
-          position: absolute;
-          bottom: 0px;
-          height: 44px;
-          padding-top: 16px;
-          padding-left: 12px;
-          color: $CAP_WHITE;
-          opacity: 0.7;
-          width: 100%;
-          background-image: linear-gradient(to top,black 0% ,transparent 100%);
-        }
-        .additional-richmedia-container {
-          display: flex;
-          justify-content: space-between;
-          margin: 8px;
-          padding-bottom: 8px;
-          img {
-            border-radius: 4px;
-          }
-        }
-        .additional-richmedia-container:not(:last-child) {
-            border-bottom: 1px solid #dfe2e7;
-          }
-        div {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-}
-.wechatMsgContainerOutbound{
-    position: absolute;
-    left: 35%;
-    top: 20%;
-    background: white;
-    width: 30%;
-    text-align: left;
-}
-.wechatMsgContainerCardLayout {
-    position: absolute;
-    left: 20%;
-    top: 20%;
-    background: white;
-    width: 60%;
-    text-align: left;
-}
-.overflow-handle-preview {
-    overflow-y: auto;
-}
-.overflow-handle-preview-outbound {
-    height: 330px;
-    overflow-y: auto;
-}
-.preview-overflow-wrap-fields {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-align: left;
-    width: 200px;
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
+  position: absolute;
+  left: 53.5%;
+  top:28%;
+  background: white;
+  width: 19.5%;
+  text-align: left;
+  height: fit-content;
+  border-radius: 0.285rem;
+}
+
+.shell-lock-screen-android .lock-screen-preview{
+  .wechat-android-sender-id{
+    position: absolute;
+    top: 46%;
+    font-size: 10px;
+    left: 28%;
+  }
+  .wechat-android-title{
+    position: absolute;
+    top: 49%;
+    font-size: 10px;
+    left: 28%;
+    color: #5e6c84;
+  }
+  .wechat-android-action-buttons{
+    position: absolute;
+    left: 28%;
+    top: 53%;
+    font-size: 10px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-sender-id{
+    position: absolute;
+    top: 44%;
+    font-size: 10px;
+    left: 28.5%;
+  }
+  .wechat-ios-title{
+    position: absolute;
+    top: 47%;
+    font-size: 10px;
+    left: 28.5%;
+    color: #5e6c84;
+  }
+  .wechat-ios-action-reply{
+    position: absolute;
+    left: 35%;
+    top: 59%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-action-cancel{
+    position: absolute;
+    left: 34.5%;
+    top: 66%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+}
+
+.wechatMsgContainer{
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    background: white;
+    width: 40%;
+    text-align: left;
+    height: fit-content;
+    border-radius: $CAP_SPACE_04;
+    .richmedia-template {
+        .richmedia-image-container {
+          width: 100%;
+          height: 102px;
+          position: relative;
+          img {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+          }
+        }
+        .name-container-with-abstract {
+          padding: $CAP_SPACE_12;
+          height: 68px;
+        }
+        .name-container {
+          position: absolute;
+          bottom: 0px;
+          height: 44px;
+          padding-top: 16px;
+          padding-left: 12px;
+          color: $CAP_WHITE;
+          opacity: 0.7;
+          width: 100%;
+          background-image: linear-gradient(to top,black 0% ,transparent 100%);
+        }
+        .additional-richmedia-container {
+          display: flex;
+          justify-content: space-between;
+          margin: 8px;
+          padding-bottom: 8px;
+          img {
+            border-radius: 4px;
+          }
+        }
+        .additional-richmedia-container:not(:last-child) {
+            border-bottom: 1px solid #dfe2e7;
+          }
+        div {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+}
+.wechatMsgContainerOutbound{
+    position: absolute;
+    left: 35%;
+    top: 20%;
+    background: white;
+    width: 30%;
+    text-align: left;
+}
+.wechatMsgContainerCardLayout {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    background: white;
+    width: 60%;
+    text-align: left;
+}
+.overflow-handle-preview {
+    overflow-y: auto;
+}
+.overflow-handle-preview-outbound {
+    height: 330px;
+    overflow-y: auto;
+}
+.preview-overflow-wrap-fields {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    width: 200px;
   }

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -1,33 +1,33 @@
-/*
- * WechatRichmediaTemplatePreview Messages
- *
- * This contains all the text for the WechatRichmediaTemplatePreview component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.header',
-    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
-  },
-  select: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.select',
-    defaultMessage: 'Select',
-  },
-  edit: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
-    defaultMessage: 'Edit',
-  },
-  MarkAsRead: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
-    defaultMessage: 'Mark as read',
-  },
-  reply: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
-    defaultMessage: 'Reply',
-  },
-  cancel: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
-    defaultMessage: 'Cancel',
-  },
-});
+/*
+ * WechatRichmediaTemplatePreview Messages
+ *
+ * This contains all the text for the WechatRichmediaTemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.header',
+    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
+  },
+  select: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
+    defaultMessage: 'Edit',
+  },
+  MarkAsRead: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
+    defaultMessage: 'Mark as read',
+  },
+  reply: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
+    defaultMessage: 'Reply',
+  },
+  cancel: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
+    defaultMessage: 'Cancel',
+  },
+});

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/tests/index.test.js

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