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

package/v2Containers/SmsTrai/Edit/index.js

@@ -169,12 +169,11 @@ export const SmsTraiEdit = (props) => {
     return traiDltEnabled || hasTraiDltFeature() || isRcsEditFlow;
   }, [isRcsSmsFallback, traiDltEnabled, isRcsEditFlow]);
 
-  /**
-   * RCS SMS fallback: always show character count vs TRAI max (`SMS_TRAI_CONTENT_MAX_LENGTH`).
-   * Do not use `totalCharacters` ({smsCount} SMS via length/160) here: resolved template + variable
-   * values can exceed one GSM segment while DLT still shows a single registered template — length/160
-   * is only a rough segment hint and reads as “wrong SMS count” in campaigns.
-   */
+
+  const [rcsFallbackVarSegmentModeActive, setRcsFallbackVarSegmentModeActive] = useState(false);
+  const useRcsFallbackVarSegmentForCurrentText = isRcsSmsFallback && rcsFallbackVarSegmentModeActive;
+
+
   const renderDescriptionCharacterCount = (className = "rcs-character-count") => (
     <CapLabel type="label1" className={className}>
       {formatMessage(messages.charactersCountLabel, {
@@ -196,18 +195,24 @@ export const SmsTraiEdit = (props) => {
   };
 
   const renderRcsFallbackMessage = (str = '') => {
-    if (!useRcsFallbackVarSegment) {
+    if (!useRcsFallbackVarSegmentForCurrentText) {
       return (
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
-            <TextArea
-              id="rcs_fallback_message_textarea"
-              autosize={{ minRows: 4, maxRows: 12 }}
-              value={fallbackText}
-              onChange={(e) => setFallbackText(e.target.value)}
-              placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
-              data-testid="rcs_fallback_plain_text_area"
-            />
+            <div className="var-segment-message-editor__var-slot">
+              <TextArea
+                id="rcs_fallback_message_textarea"
+                autosize={{ minRows: 1, maxRows: 3 }}
+                value={fallbackText}
+                onChange={(e) => setFallbackText(e.target.value)}
+                onBlur={() => {
+                  const hasVarToken = (fallbackText.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
+                  if (hasVarToken) setRcsFallbackVarSegmentModeActive(true);
+                }}
+                placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
+                data-testid="rcs_fallback_plain_text_area"
+              />
+            </div>
             {renderDescriptionCharacterCount()}
           </div>
         </CapRow>
@@ -362,7 +367,9 @@ export const SmsTraiEdit = (props) => {
     const templateBase = get(activeTemplateSourceForInit, 'versions.base', {});
     const unicodeValidity = get(templateBase, 'unicode-validity', true);
     const templateMsg = get(activeTemplateSourceForInit, 'versions.base.sms-editor', '') || '';
-    if (!useRcsFallbackVarSegment) {
+    const templateMsgHasVarToken = (templateMsg.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
+    setRcsFallbackVarSegmentModeActive(templateMsgHasVarToken);
+    if (!templateMsgHasVarToken) {
       setFallbackText(templateMsg);
       setFallbackVarMappedData({});
       setUpdatedSmsEditor(String(templateMsg).split(''));
@@ -429,7 +436,7 @@ export const SmsTraiEdit = (props) => {
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
-    if (!useRcsFallbackVarSegment) {
+    if (!useRcsFallbackVarSegmentForCurrentText) {
       const plainFallbackSmsText = fallbackText || '';
       setUpdatedSmsEditor(plainFallbackSmsText.split(''));
       setTotalMessageLength(plainFallbackSmsText.length);
@@ -441,15 +448,17 @@ export const SmsTraiEdit = (props) => {
     );
     setUpdatedSmsEditor(resolvedFallbackDisplay.split(''));
     setTotalMessageLength(resolvedFallbackDisplay.length);
-  }, [isRcsSmsFallback, useRcsFallbackVarSegment, fallbackText, fallbackVarMappedData]);
+  }, [isRcsSmsFallback, useRcsFallbackVarSegmentForCurrentText, fallbackText, fallbackVarMappedData]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
+    // Skip until hydration populates fallbackVarMappedData, or this wipes the parent's rcsSmsFallbackVarMapped before init restores it.
+    if (loading) return;
     if (typeof onRcsFallbackEditorStateChange !== 'function') return;
     onRcsFallbackEditorStateChange({
       rcsSmsFallbackVarMapped: fallbackVarMappedData || {},
     });
-  }, [isRcsSmsFallback, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
+  }, [isRcsSmsFallback, loading, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
@@ -532,7 +541,7 @@ export const SmsTraiEdit = (props) => {
       // TRAI/DLT VarSegment: `validateIfTagClosed` only understands paired `{{…}}` and breaks on
       // legitimate `{#…#}` / mixed TRAI shapes (extra `{`/`}` counts). Do not tie Done to it;
       // slot completeness is enforced by `areAllRcsSmsFallbackVarSlotsFilled` on the RCS screen.
-      if (useRcsFallbackVarSegment) {
+      if (useRcsFallbackVarSegmentForCurrentText) {
         tagValidationResponseRef.current = {};
         updateIsTagValidationError(false);
         return;
@@ -573,7 +582,7 @@ export const SmsTraiEdit = (props) => {
     tags,
     isRcsSmsFallback,
     isFullMode,
-    useRcsFallbackVarSegment,
+    useRcsFallbackVarSegmentForCurrentText,
     fallbackText,
     fallbackVarMappedData,
     getDefaultTags,
@@ -712,7 +721,8 @@ export const SmsTraiEdit = (props) => {
           ...baseWithoutDerivedFields,
           'sms-editor': fallbackText || '',
           'unicode-validity': isUnicodeAllowed,
-          ...(useRcsFallbackVarSegment && {
+          // Gate on useRcsFallbackVarSegmentForCurrentText (not the static DLT flag), or non-DLT var-token flows lose slot values on save.
+          ...(useRcsFallbackVarSegmentForCurrentText && {
             'rcs-sms-fallback-var-mapped': fallbackVarMappedData || {},
           }),
         };
@@ -778,8 +788,9 @@ export const SmsTraiEdit = (props) => {
 
   const onTagSelect = (data) => {
     if (isRcsSmsFallback) {
-      if (!useRcsFallbackVarSegment) {
+      if (!useRcsFallbackVarSegmentForCurrentText) {
         setFallbackText((prev) => `${prev || ''}{{${data}}}`);
+        setRcsFallbackVarSegmentModeActive(true);
         return;
       }
       if (!fallbackFocusedId) return;
@@ -949,7 +960,7 @@ export const SmsTraiEdit = (props) => {
 
   const calculateTotalMessageLength = () => {
     if (isRcsSmsFallback) {
-      if (useRcsFallbackVarSegment) {
+      if (useRcsFallbackVarSegmentForCurrentText) {
         const resolved = getFallbackResolvedContent(fallbackText || '', fallbackVarMappedData || {});
         setTotalMessageLength(resolved.length);
       } else {

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, 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

@@ -1,6 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
+   margin-top: $CAP_SPACE_08;
   // .creatives-templates-list.full-mode{
     .v2-pagination-container, .v2-pagination-container-half {
       .ant-tabs-tabpane-active{
@@ -1427,7 +1428,6 @@
   justify-content: space-between;
   align-items: center;
   gap: $CAP_SPACE_08;
-  margin-right: $CAP_SPACE_32;
 }
 
 .template-listing-more-btn {
@@ -1473,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;
+}