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

package/v2Containers/Templates/ChannelTypeIllustration.js

@@ -2,8 +2,9 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { CapIllustration } from "@capillarytech/cap-ui-library";
+import globalMessages from '../Cap/messages';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -79,12 +80,14 @@ const CHANNEL_CONFIG = {
 };
 
 function ChannelTypeIllustration(props) {
+  const intl = useIntl();
   const {
     isFullMode,
     createTemplate,
     currentChannel,
     hostName,
     isArchivedMode,
+    canCreate = true,
   } = props;
 
   const templateText = useMemo(() => {
@@ -183,6 +186,11 @@ function ChannelTypeIllustration(props) {
     if (config.hasButton) {
       result.buttonLabel = <FormattedMessage {...config.buttonMessage} values={{ template: templateText }} />;
       result.onClick = createTemplate;
+      // RBAC: gray out + disable the create button for users without create permission.
+      if (!canCreate) {
+        result.disabled = true;
+        result.buttonTooltip = intl.formatMessage(globalMessages.noPermissionAction);
+      }
     }
 
     if (config.descriptionMessage) {
@@ -213,5 +221,6 @@ ChannelTypeIllustration.propTypes = {
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
   isArchivedMode: PropTypes.bool,
+  canCreate: PropTypes.bool,
 };
 export default ChannelTypeIllustration;

package/v2Containers/Templates/_templates.scss

@@ -160,96 +160,6 @@
             line-clamp: 3;
             }
           }
-          .viber-carousel-static-content {
-            width: 100%;
-            overflow: hidden;
-            .viber-carousel-static-message-box {
-              width: 100%;
-              height: auto;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_WHITE;
-              margin-bottom: $CAP_SPACE_08;
-              display: flex;
-              align-items: flex-start;
-            }
-            .viber-carousel-static-message {
-              display: -webkit-box;
-              width: 100%;
-              color: $CAP_G01;
-              line-height: 1.3;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              -webkit-line-clamp: 2;
-              line-clamp: 2;
-              -webkit-box-orient: vertical;
-              white-space: normal;
-              word-break: break-word;
-            }
-            .viber-carousel-static-cards {
-              display: flex;
-              gap: $CAP_SPACE_08;
-              overflow: hidden;
-            }
-            .viber-carousel-static-card {
-              flex: 1;
-              min-width: 0;
-              background: $CAP_WHITE;
-              border-radius: $CAP_SPACE_04;
-              overflow: hidden;
-              display: flex;
-              flex-direction: column;
-            }
-            .viber-carousel-static-image {
-              width: 100%;
-              max-height: 11rem;
-              margin-bottom: $CAP_SPACE_04;
-              border-radius: $CAP_SPACE_04;
-              display: block;
-            }
-            .viber-carousel-static-image-placeholder {
-              width: 100%;
-              height: 7.143rem;
-              border-radius: $CAP_SPACE_04;
-            }
-            .viber-carousel-static-image-placeholder {
-              background: $CAP_G07;
-            }
-            .viber-carousel-static-text {
-              display: block;
-              color: $CAP_G01;
-              margin: $CAP_SPACE_04 0;
-              line-height: 1.3;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: normal;
-              -webkit-line-clamp: 2;
-              line-clamp: 2;
-              -webkit-box-orient: vertical;
-              display: -webkit-box;
-            }
-            .viber-carousel-static-buttons {
-              display: flex;
-              flex-direction: column;
-              gap: $CAP_SPACE_04;
-              margin-top: auto;
-            }
-            .viber-carousel-static-button {
-              display: block;
-              min-height: 1.5rem;
-              border-radius: $CAP_SPACE_12;
-              background: $CAP_PURPLE01;
-              color: $CAP_WHITE;
-              text-align: center;
-              padding: 0.179rem $CAP_SPACE_08;
-              white-space: normal;
-            }
-            .viber-carousel-static-button-secondary {
-              color: $CAP_PURPLE01;
-              background: transparent;
-              border: none;
-              box-shadow: none;
-            }
-          }
         
         }
       
@@ -258,30 +168,6 @@
             word-wrap: break-word;
           }
         }
-
-        &.viber-carousel-static {
-          height: auto;
-          min-height: 21.125rem;
-
-          .ant-card-body {
-            padding-bottom: $CAP_SPACE_12;
-          }
-
-          .truncate-text-viber {
-            .ant-card-meta-description {
-              display: block;
-              overflow: visible;
-              -webkit-line-clamp: unset;
-              line-clamp: unset;
-            }
-          }
-
-          .viber-carousel-static-content,
-          .viber-carousel-static-cards,
-          .viber-carousel-static-card {
-            overflow: visible;
-          }
-        }
     
   
         &.carousel-img-section {
@@ -1587,3 +1473,9 @@
     min-width: 0;
   }
 }
+
+// RBAC: dim + block a control the user lacks permission for (used with CapTooltip).
+.rbac-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}