@capillarytech/creatives-library 9.0.36 → 9.0.37-alpha.0

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -236,14 +236,18 @@ exports[`Test Templates container Should render sms illustration when no templat
                   <div
                     className="action-container__create-row"
                   >
-                    <CapButton
-                      className="create-new-sms margin-l-8 margin-b-12"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="primary"
+                    <NoPermissionWrapper
+                      allowed={false}
                     >
-                      Create new
-                    </CapButton>
+                      <CapButton
+                        className="create-new-sms margin-l-8 margin-b-12"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="primary"
+                      >
+                        Create new
+                      </CapButton>
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -251,6 +255,7 @@ exports[`Test Templates container Should render sms illustration when no templat
           </CapRow>
           <div>
             <ChannelTypeIllustration
+              canCreate={false}
               createTemplate={[Function]}
               currentChannel="SMS"
               hostName=""
@@ -503,17 +508,21 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   <div
                     className="action-container__create-row"
                   >
-                    <CapLink
-                      className="create-new-link"
-                      onClick={[Function]}
-                      suffix={
-                        <CapIcon
-                          size="s"
-                          type="open-in-new"
-                        />
-                      }
-                      title="Create new template"
-                    />
+                    <NoPermissionWrapper
+                      allowed={false}
+                    >
+                      <CapLink
+                        className="create-new-link"
+                        onClick={[Function]}
+                        suffix={
+                          <CapIcon
+                            size="s"
+                            type="open-in-new"
+                          />
+                        }
+                        title="Create new template"
+                      />
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -810,14 +819,18 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   <div
                     className="action-container__create-row"
                   >
-                    <CapButton
-                      className="create-new-whatsapp margin-l-8 margin-b-12"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="primary"
+                    <NoPermissionWrapper
+                      allowed={false}
                     >
-                      Create new
-                    </CapButton>
+                      <CapButton
+                        className="create-new-whatsapp margin-l-8 margin-b-12"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="primary"
+                      >
+                        Create new
+                      </CapButton>
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -1220,14 +1233,18 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapButton
-                      className="create-new-whatsapp margin-l-8 margin-b-12"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="primary"
+                    <NoPermissionWrapper
+                      allowed={false}
                     >
-                      Create new
-                    </CapButton>
+                      <CapButton
+                        className="create-new-whatsapp margin-l-8 margin-b-12"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="primary"
+                      >
+                        Create new
+                      </CapButton>
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -1324,14 +1341,26 @@ Click {{unsubscribe}} to unsubscribe
                           overlay={
                             <CapMenuComponent>
                               <withItemHOC
-                                className="delete-whatsapp"
+                                className="delete-whatsapp rbac-disabled"
                                 onClick={[Function]}
                               >
-                                <FormattedMessage
-                                  defaultMessage="Delete"
-                                  id="creatives.containersV2.Templates.deleteButton"
-                                  values={Object {}}
-                                />
+                                <CapTooltip
+                                  title={
+                                    <FormattedMessage
+                                      defaultMessage="You don't have permission to perform this action."
+                                      id="creatives.componentsV2.noPermissionAction"
+                                      values={Object {}}
+                                    />
+                                  }
+                                >
+                                  <span>
+                                    <FormattedMessage
+                                      defaultMessage="Delete"
+                                      id="creatives.containersV2.Templates.deleteButton"
+                                      values={Object {}}
+                                    />
+                                  </span>
+                                </CapTooltip>
                               </withItemHOC>
                             </CapMenuComponent>
                           }
@@ -1341,12 +1370,7 @@ Click {{unsubscribe}} to unsubscribe
                           />
                         </CapDropdownComponent>,
                       ],
-                      "hoverOption": <CapButton
-                        className="edit-whatsapp"
-                        onClick={[Function]}
-                      >
-                        Overview
-                      </CapButton>,
+                      "hoverOption": null,
                       "key": "WHATSAPP-card-creatives_whatsapp6",
                       "title": <CapRow
                         align="middle"
@@ -1693,14 +1717,18 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapButton
-                      className="create-new-whatsapp margin-l-8 margin-b-12"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="primary"
+                    <NoPermissionWrapper
+                      allowed={false}
                     >
-                      Create new
-                    </CapButton>
+                      <CapButton
+                        className="create-new-whatsapp margin-l-8 margin-b-12"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="primary"
+                      >
+                        Create new
+                      </CapButton>
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -1797,14 +1825,26 @@ Click {{unsubscribe}} to unsubscribe
                           overlay={
                             <CapMenuComponent>
                               <withItemHOC
-                                className="delete-whatsapp"
+                                className="delete-whatsapp rbac-disabled"
                                 onClick={[Function]}
                               >
-                                <FormattedMessage
-                                  defaultMessage="Delete"
-                                  id="creatives.containersV2.Templates.deleteButton"
-                                  values={Object {}}
-                                />
+                                <CapTooltip
+                                  title={
+                                    <FormattedMessage
+                                      defaultMessage="You don't have permission to perform this action."
+                                      id="creatives.componentsV2.noPermissionAction"
+                                      values={Object {}}
+                                    />
+                                  }
+                                >
+                                  <span>
+                                    <FormattedMessage
+                                      defaultMessage="Delete"
+                                      id="creatives.containersV2.Templates.deleteButton"
+                                      values={Object {}}
+                                    />
+                                  </span>
+                                </CapTooltip>
                               </withItemHOC>
                             </CapMenuComponent>
                           }
@@ -1814,12 +1854,7 @@ Click {{unsubscribe}} to unsubscribe
                           />
                         </CapDropdownComponent>,
                       ],
-                      "hoverOption": <CapButton
-                        className="edit-whatsapp"
-                        onClick={[Function]}
-                      >
-                        Overview
-                      </CapButton>,
+                      "hoverOption": null,
                       "key": "WHATSAPP-card-creatives_whatsapp6",
                       "title": <CapRow
                         align="middle"
@@ -2166,14 +2201,18 @@ exports[`Test Templates container Test max templates warning 1`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapButton
-                      className="create-new-whatsapp margin-l-8 margin-b-12"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="primary"
+                    <NoPermissionWrapper
+                      allowed={false}
                     >
-                      Create new
-                    </CapButton>
+                      <CapButton
+                        className="create-new-whatsapp margin-l-8 margin-b-12"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="primary"
+                      >
+                        Create new
+                      </CapButton>
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -2270,14 +2309,26 @@ Click {{unsubscribe}} to unsubscribe
                           overlay={
                             <CapMenuComponent>
                               <withItemHOC
-                                className="delete-whatsapp"
+                                className="delete-whatsapp rbac-disabled"
                                 onClick={[Function]}
                               >
-                                <FormattedMessage
-                                  defaultMessage="Delete"
-                                  id="creatives.containersV2.Templates.deleteButton"
-                                  values={Object {}}
-                                />
+                                <CapTooltip
+                                  title={
+                                    <FormattedMessage
+                                      defaultMessage="You don't have permission to perform this action."
+                                      id="creatives.componentsV2.noPermissionAction"
+                                      values={Object {}}
+                                    />
+                                  }
+                                >
+                                  <span>
+                                    <FormattedMessage
+                                      defaultMessage="Delete"
+                                      id="creatives.containersV2.Templates.deleteButton"
+                                      values={Object {}}
+                                    />
+                                  </span>
+                                </CapTooltip>
                               </withItemHOC>
                             </CapMenuComponent>
                           }
@@ -2287,12 +2338,7 @@ Click {{unsubscribe}} to unsubscribe
                           />
                         </CapDropdownComponent>,
                       ],
-                      "hoverOption": <CapButton
-                        className="edit-whatsapp"
-                        onClick={[Function]}
-                      >
-                        Overview
-                      </CapButton>,
+                      "hoverOption": null,
                       "key": "WHATSAPP-card-creatives_whatsapp6",
                       "title": <CapRow
                         align="middle"
@@ -2582,17 +2628,21 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapLink
-                      className="create-new-link"
-                      onClick={[Function]}
-                      suffix={
-                        <CapIcon
-                          size="s"
-                          type="open-in-new"
-                        />
-                      }
-                      title="Create new template"
-                    />
+                    <NoPermissionWrapper
+                      allowed={false}
+                    >
+                      <CapLink
+                        className="create-new-link"
+                        onClick={[Function]}
+                        suffix={
+                          <CapIcon
+                            size="s"
+                            type="open-in-new"
+                          />
+                        }
+                        title="Create new template"
+                      />
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -2857,17 +2907,21 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapLink
-                      className="create-new-link"
-                      onClick={[Function]}
-                      suffix={
-                        <CapIcon
-                          size="s"
-                          type="open-in-new"
-                        />
-                      }
-                      title="Create new template"
-                    />
+                    <NoPermissionWrapper
+                      allowed={false}
+                    >
+                      <CapLink
+                        className="create-new-link"
+                        onClick={[Function]}
+                        suffix={
+                          <CapIcon
+                            size="s"
+                            type="open-in-new"
+                          />
+                        }
+                        title="Create new template"
+                      />
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>
@@ -3107,17 +3161,21 @@ exports[`Test Templates container Test removing single filter 1`] = `
                   <div
                     className="action-container__create-row"
                   >
-                    <CapLink
-                      className="create-new-link"
-                      onClick={[Function]}
-                      suffix={
-                        <CapIcon
-                          size="s"
-                          type="open-in-new"
-                        />
-                      }
-                      title="Create new template"
-                    />
+                    <NoPermissionWrapper
+                      allowed={false}
+                    >
+                      <CapLink
+                        className="create-new-link"
+                        onClick={[Function]}
+                        suffix={
+                          <CapIcon
+                            size="s"
+                            type="open-in-new"
+                          />
+                        }
+                        title="Create new template"
+                      />
+                    </NoPermissionWrapper>
                   </div>
                 </div>
               </div>

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,10 +10,9 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
-      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
-      padding: 0.714rem 0;
+      padding: 0;
       /* Only main channel tabs content, not HTML Editor validation panel tabs */
       > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
       > .cap-tab-v2 > .ant-tabs-content {
@@ -97,6 +96,12 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
+  }
+  .ant-tabs-nav-list {
+    gap: 2rem;
+  }
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin: 0 !important;
   }
 `;

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get, pick } from 'lodash';
 import Helmet from 'react-helmet';
 
@@ -34,7 +34,8 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, FTP as FTP_CHANNEL, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP, WEBPUSH } from '../App/constants';
+import { CREATIVES_UI_VIEW, CREATIVE_VIEW, FTP as FTP_CHANNEL, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP, WEBPUSH } from '../App/constants';
+import { getUserAccess, hasPermission, PERMISSIONS } from '../../utils/permissions';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
@@ -47,6 +48,9 @@ import {
   NORMALIZED_CHANNEL_ALIASES,
   SMS,
 } from "../CreativesContainer/constants";
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import { isMFEMode } from '../../utils/mfeDetect';
+import appConfig from '../../app-config';
 
 const { CapCustomCardList } = CapCustomCard;
 
@@ -54,6 +58,7 @@ const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    this.lcpReported = false;
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     if (defaultChannel === LOYALTY) {
       defaultChannel = 'sms';
@@ -222,6 +227,23 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      isMFEMode() &&
+      !this.lcpReported &&
+      !this.props.Templates.getAllTemplatesInProgress &&
+      prevProps.Templates.getAllTemplatesInProgress
+    ) {
+      this.lcpReported = true;
+      MFEEventBus.emit('mfe:segment', {
+        action: 'stop',
+        appId: appConfig.appName,
+        type: 'lcp',
+        timestamp: performance.now(),
+      });
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);
@@ -255,9 +277,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       </CapSpin>
 
     </div>);
-  };
-
-  getGalleryComponent = (location) => <Gallery location={location} isFullMode={this.props.isFullMode}/>
+  }
+  getGalleryComponent = (location) => {
+    const userAccess = getUserAccess(this.props);
+    return (<Gallery
+      location={location}
+      isFullMode={this.props.isFullMode}
+      canCreate={hasPermission(userAccess, PERMISSIONS.CREATIVE_CREATE)}
+      canDelete={hasPermission(userAccess, PERMISSIONS.CREATIVE_DELETE)}
+    />);
+  }
   getCallTaskComponent = () => (
     <CallTask
       onCreateNew={this.props.createNew}
@@ -395,7 +424,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     const useLocalTemplates = get(this.props, 'localTemplatesConfig.useLocalTemplates', false);
     const { accessiblePermissions = []} = cap.user || Global.user || {};
     let isCreativeAccessible = true;
-    if (!accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
+    if (
+      !accessiblePermissions.includes(CREATIVES_UI_VIEW) &&
+      !accessiblePermissions.includes(CREATIVE_VIEW)
+    ) {
       isCreativeAccessible = false;
     }
     // Recompute active pane content every render so local-list mode updates
@@ -422,14 +454,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             />
           )}
           <section className="component-wrapper">
-            {isFullMode && (
-              <CapHeader
-                title={<FormattedMessage {...messages.creatives} />}
-                {...(!useLocalTemplates && {
-                  description: <FormattedMessage {...messages.creativesDesc} />,
-                })}
-              />
-            )}
             {hideChannelTabsForLocalSms ? (
               <section className="templates-v2-local-sms-pane">{activeLocalPane?.content}</section>
             ) : (