@capillarytech/creatives-library 9.0.35 → 9.0.36-alpha.1

package/v2Containers/SmsTrai/Create/tests/__snapshots__/index.test.js.snap

@@ -112,8 +112,8 @@ exports[`Creatives SmsTraiCreate test/> done button should be disabled if blank
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -3273,8 +3273,8 @@ exports[`Creatives SmsTraiCreate test/> invalid file drop 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -6417,8 +6417,8 @@ exports[`Creatives SmsTraiCreate test/> renders UI 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -9578,8 +9578,8 @@ exports[`Creatives SmsTraiCreate test/> valid file drop 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -87,8 +87,8 @@ exports[`Creatives SmsTraiEdit test/> should render 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -7411,8 +7411,8 @@ FREE GIFTS-
                                 "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                 "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                 "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -9749,8 +9749,8 @@ FREE GIFTS-
                                   "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                   "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                   "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",
@@ -12238,8 +12238,8 @@ exports[`Creatives SmsTraiEdit test/> should render 2`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -20936,8 +20936,8 @@ FREE GIFTS-
                                 "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                 "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                 "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -23274,8 +23274,8 @@ FREE GIFTS-
                                   "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                   "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                   "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",
@@ -25763,8 +25763,8 @@ exports[`Creatives SmsTraiEdit test/> should save 1`] = `
         "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
         "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
         "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-        "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-        "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+        "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+        "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
         "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
         "creatives.components.CapTagList.Cancel": "Cancel",
         "creatives.components.CapTagList.Ok": "Ok",
@@ -33087,8 +33087,8 @@ FREE GIFTS-
                                 "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                 "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                 "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                 "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                 "creatives.components.CapTagList.Cancel": "Cancel",
                                 "creatives.components.CapTagList.Ok": "Ok",
@@ -35425,8 +35425,8 @@ FREE GIFTS-
                                   "app.v2containers.SmsTrai.Edit.traiEditTitle": "Message",
                                   "app.v2containers.SmsTrai.Edit.unicodeLabel": "Allow unicode characters",
                                   "app.v2containers.SmsTrai.Edit.unsupportedTagsValidationError": "Unsupported tags: {unsupportedTags}. Please remove them from this message.",
-                                  "creatives.components.AccessForbidden.forbiddenDesc": "This page access has not been provided to you.",
-                                  "creatives.components.AccessForbidden.forbiddenHeader": "Access Forbidden",
+                                  "creatives.components.AccessForbidden.forbiddenDesc": "Please contact your organisation administrator to request access.",
+                                  "creatives.components.AccessForbidden.forbiddenHeader": "You don't have permission to view this page.",
                                   "creatives.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
                                   "creatives.components.CapTagList.Cancel": "Cancel",
                                   "creatives.components.CapTagList.Ok": "Ok",

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, injectIntl, intlShape } 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';
@@ -80,11 +81,13 @@ const CHANNEL_CONFIG = {
 
 function ChannelTypeIllustration(props) {
   const {
+    intl,
     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) {
@@ -208,10 +216,13 @@ function ChannelTypeIllustration(props) {
   );
 }
 ChannelTypeIllustration.propTypes = {
+  intl: intlShape.isRequired,
   isFullMode: PropTypes.bool,
   createTemplate: PropTypes.func.isRequired,
   currentChannel: PropTypes.string,
   hostName: PropTypes.string,
   isArchivedMode: PropTypes.bool,
+  canCreate: PropTypes.bool,
 };
-export default ChannelTypeIllustration;
+export { ChannelTypeIllustration };
+export default injectIntl(ChannelTypeIllustration);

package/v2Containers/Templates/_templates.scss

@@ -160,6 +160,102 @@
             line-clamp: 3;
             }
           }
+          .viber-carousel-static-content {
+            width: 100%;
+            overflow: visible;
+            display: flex;
+            flex-direction: column;
+            .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: visible;
+            }
+            .viber-carousel-static-card {
+              flex: 1;
+              min-width: 0;
+              width: 100%;
+              background: $CAP_WHITE;
+              border-radius: $CAP_SPACE_04;
+              overflow: visible;
+              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;
+              flex-shrink: 0;
+            }
+            .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;
+              flex-shrink: 0;
+            }
+            .viber-carousel-static-buttons {
+              display: flex;
+              flex-direction: column;
+              gap: $CAP_SPACE_04;
+              flex-shrink: 0;
+              width: 100%;
+            }
+            .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;
+            }
+          }
         
         }
       
@@ -168,6 +264,44 @@
             word-wrap: break-word;
           }
         }
+
+        &.viber-carousel-static {
+          height: auto;
+          min-height: 21.125rem;
+          overflow: visible;
+
+          .ant-card-body {
+            height: auto;
+            overflow: visible;
+            padding-bottom: $CAP_SPACE_12;
+
+            .ant-card-meta,
+            .ant-card-meta-detail,
+            .ant-card-meta-description {
+              height: auto;
+              max-height: none;
+              overflow: visible;
+            }
+
+            .truncate-text-viber {
+              .ant-card-meta-description {
+                display: block;
+                overflow: visible;
+                max-height: none;
+                -webkit-box-orient: unset;
+                -webkit-line-clamp: unset;
+                line-clamp: unset;
+              }
+            }
+
+            .viber-carousel-static-content,
+            .viber-carousel-static-cards,
+            .viber-carousel-static-card {
+              overflow: visible;
+              height: auto;
+            }
+          }
+        }
     
   
         &.carousel-img-section {
@@ -1222,6 +1356,67 @@
   max-height: 11rem;
   margin-bottom: $CAP_SPACE_04;
 }
+
+/* Listing carousel preview: always grow with content so title + buttons stay visible for any image */
+.cap-custom-card.ant-card.VIBER.viber-carousel-static {
+  height: auto;
+  min-height: 21.125rem;
+  overflow: visible;
+
+  > .ant-card-body {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    padding-bottom: $CAP_SPACE_12;
+  }
+
+  .ant-card-meta,
+  .ant-card-meta-detail,
+  .ant-card-meta-description,
+  .truncate-text-viber,
+  .truncate-text-viber .ant-card-meta-description {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    display: block;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    -webkit-box-orient: unset;
+  }
+
+  .viber-carousel-static-content,
+  .viber-carousel-static-card,
+  .viber-carousel-static-buttons {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .viber-carousel-static-content,
+  .viber-carousel-static-cards,
+  .viber-carousel-static-card {
+    overflow: visible;
+    height: auto;
+  }
+
+  .viber-carousel-static-cards {
+    width: 100%;
+  }
+
+  .viber-carousel-static-image {
+    width: 100%;
+    max-height: 11rem;
+    display: block;
+    flex-shrink: 0;
+  }
+
+  .viber-carousel-static-text,
+  .viber-carousel-static-buttons {
+    width: 100%;
+    flex-shrink: 0;
+    visibility: visible;
+  }
+}
 .whatsapp-doc {
   width: 100%;
   max-height: 123px;
@@ -1473,3 +1668,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;
+}