@capillarytech/creatives-library 8.0.345-alpha.14 → 8.0.345-alpha.15

package/v2Containers/SmsTrai/Edit/index.js

@@ -1,10 +1,11 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-undef */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage } from 'react-intl';
-import { get, cloneDeep, isEmpty, isObject } from 'lodash';
+import { get, cloneDeep, isEmpty } from 'lodash';
 import styled from 'styled-components';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -27,13 +28,13 @@ import {
   CAP_SPACE_32,
   CAP_SPACE_04,
   CAP_WHITE,
-  CAP_G10,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectTemplateDetailsResponse } from '../../Sms/Edit/selectors';
 import { makeSelectMetaEntities, selectLiquidStateDetails, setInjectedTags } from '../../Cap/selectors';
 import * as smsEditActions from '../../Sms/Edit/actions';
 import * as globalActions from '../../Cap/actions';
 import messages from './messages';
+import globalMessages from '../../Cap/messages';
 import TagList from '../../TagList';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import UnifiedPreview from '../../../v2Components/CommonTestAndPreview/UnifiedPreview';
@@ -41,6 +42,8 @@ import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox
 import withCreatives from '../../../hoc/withCreatives';
 import {
   CHARLIMIT,
+  SMS,
+  SMS_TRAI_CONTENT_MAX_LENGTH,
   SMS_TRAI_VAR,
   TAG,
   EMBEDDED,
@@ -49,24 +52,39 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
-import { SMS } from '../../CreativesContainer/constants';
 import v2EditSmsReducer from '../../Sms/Edit/reducer';
 import { v2SmsEditSagas } from '../../Sms/Edit/sagas';
 import ErrorInfoNote from '../../../v2Components/ErrorInfoNote';
+import { isTraiDLTEnable, hasTraiDltFeature } from '../../../utils/common';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
 import { validateTags } from '../../../utils/tagValidations';
-import globalMessages from '../../Cap/messages';
 import { ANDROID } from '../../../v2Components/CommonTestAndPreview/constants';
+import {
+  getFallbackResolvedContent,
+  splitTemplateVarString,
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  isAnyTemplateVarToken,
+  isDltHashVarToken,
+} from '../../../utils/templateVarUtils';
+import VarSegmentMessageEditor from '../../../v2Components/VarSegmentMessageEditor';
+import rcsMessages from '../../Rcs/messages';
+
+import './index.scss';
 
-let varMap = {};
-let traiData = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
 
+/** Redux `metaEntities` may be an Immutable.Map; TagList needs plain `tags.standard`. */
+const getStandardTagsFromMeta = (metaEntities) => {
+  if (!metaEntities) return [];
+  const plain = typeof metaEntities.toJS === 'function' ? metaEntities.toJS() : metaEntities;
+  const standard = get(plain, 'tags.standard');
+  return Array.isArray(standard) ? standard : [];
+};
+
 export const SmsTraiEdit = (props) => {
   const {
     intl,
-    handleClose,
     params,
     actions,
     templateDetails,
@@ -82,10 +100,20 @@ export const SmsTraiEdit = (props) => {
     templateData = {},
     selectedOfferDetails,
     eventContextTags,
-    waitEventContextTags,
     fetchingLiquidTags,
     getLiquidTags,
     showLiquidErrorInFooter,
+    smsRegister,
+    // RCS -> SMS fallback edit mode
+    isRcsSmsFallback = false,
+    /** When editing an existing RCS template, lock Unicode (matches product: no mid-edit toggle). */
+    isRcsEditFlow = false,
+    showPreviewInRcsFallback = false,
+    hidePreview = false,
+    isOverview = false,
+    forceFullTagContext = false,
+    /** RCS parent: merge `rcsSmsFallbackVarMapped` into `smsFallbackData` (same idea as `cardVarMapped`). */
+    onRcsFallbackEditorStateChange,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -95,14 +123,149 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
   const [totalMessageLength, setTotalMessageLength] = useState(0);
   const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(true);
+  const [fallbackText, setFallbackText] = useState('');
+  const [fallbackVarMappedData, setFallbackVarMappedData] = useState({});
+  const [fallbackFocusedId, setFallbackFocusedId] = useState('');
   const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
   const [liquidErrorMessages, setLiquidErrorMessages] = useState({});
   const [isLiquidValidationError, setIsLiquidValidationError] = useState(false);
   /** After user closes the validation panel, keep it hidden until Save is clicked again (even if ErrorInfoNote remounts). */
   const [liquidErrorPanelDismissed, setLiquidErrorPanelDismissed] = useState(false);
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
+
+  /** Per-instance only — was module-level (leaked across mounts / multiple editors). */
+  const varMapRef = useRef({});
+  const traiDataRef = useRef({});
+  const tagValidationResponseRef = useRef({});
+  /** De-dupe repeated /meta/TAG fetches from popover/context callbacks. */
+  const lastTagSchemaQueryKeyRef = useRef(null);
+  /** Latest template props for RCS fallback init — avoids effect deps on unstable `templateData` references. */
+  const rcsFallbackTemplateSourceRef = useRef({ isFullMode, templateDetails, templateData });
+  rcsFallbackTemplateSourceRef.current = { isFullMode, templateDetails, templateData };
+
+  const fetchTagSchemaIfNewQuery = (query) => {
+    const key = JSON.stringify(query);
+    if (lastTagSchemaQueryKeyRef.current === key) return;
+    lastTagSchemaQueryKeyRef.current = key;
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const traiDltEnabled = useMemo(
+    () => isTraiDLTEnable(isFullMode, smsRegister),
+    [isFullMode, smsRegister],
+  );
+  /**
+   * VarSegment for RCS SMS fallback when:
+   * - `isTraiDLTEnable` passes (library + `smsRegister === 'DLT'`, or full-mode library), or
+   * - org has TRAI DLT (`hasTraiDltFeature`) — needed when slidebox used to force `isFullMode={false}`
+   *   or `smsRegister` is missing so `isTraiDLTEnable` alone is false, or
+   * - RCS template inline edit (`isRcsEditFlow`).
+   */
+  const useRcsFallbackVarSegment = useMemo(() => {
+    if (!isRcsSmsFallback) return false;
+    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 renderDescriptionCharacterCount = (className = "rcs-character-count") => (
+    <CapLabel type="label1" className={className}>
+      {formatMessage(messages.charactersCountLabel, {
+        current: totalMessageLength,
+        max: SMS_TRAI_CONTENT_MAX_LENGTH,
+      })}
+    </CapLabel>
+  );
+
+  const dltConsecutiveRunLength = (segments, index) => {
+    if (!Array.isArray(segments) || typeof segments[index] !== 'string' || !isDltHashVarToken(segments[index])) {
+      return 0;
+    }
+    let lo = index;
+    while (lo > 0 && isDltHashVarToken(segments[lo - 1])) lo -= 1;
+    let hi = index;
+    while (hi < segments.length - 1 && isDltHashVarToken(segments[hi + 1])) hi += 1;
+    return hi - lo + 1;
+  };
+
+  const renderRcsFallbackMessage = (str = '') => {
+    if (!useRcsFallbackVarSegment) {
+      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"
+            />
+            {renderDescriptionCharacterCount()}
+          </div>
+        </CapRow>
+      );
+    }
+    return (
+      <CapRow className="rcs-create-template-message-input">
+        <div className="rcs_text_area_wrapper">
+          <VarSegmentMessageEditor
+            templateString={str}
+            valueMap={fallbackVarMappedData || {}}
+            onChange={(varSegmentFieldId, nextSlotValue) => {
+              setFallbackVarMappedData((previousSlotMap) => ({
+                ...(previousSlotMap || {}),
+                [varSegmentFieldId]: nextSlotValue,
+              }));
+            }}
+            onFocus={setFallbackFocusedId}
+            varRegex={COMBINED_SMS_TEMPLATE_VAR_REGEX}
+            placeholderPrefix=""
+            getPlaceholder={() => formatMessage(rcsMessages.fallbackMsgPlaceholder)}
+            renderVarFooter={(dltSegmentToken, dltSegmentIndex) => {
+              if (!isDltHashVarToken(dltSegmentToken)) return null;
+              const segments = splitTemplateVarString(str, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+              const varCounts = dltConsecutiveRunLength(segments, dltSegmentIndex);
+              if (varCounts < 1) return null;
+              /* Inline layout/color so hint is visible even if CapSpin / load order blocks SCSS */
+              const dltVarSlotHintStyle = {
+                display: 'block',
+                marginTop: CAP_SPACE_04,
+                marginLeft: 'auto',
+                marginRight: 0,
+                width: 'fit-content',
+                maxWidth: '100%',
+                textAlign: 'right',
+                color: 'rgba(0, 0, 0, 0.45)',
+                fontSize: 12,
+                fontWeight: 400,
+                lineHeight: '16px',
+              };
+              return (
+                <span className="sms-trai-rcs-fallback-var-hint" style={dltVarSlotHintStyle}>
+                  {formatMessage(messages.textAreaCounts, {
+                    varCounts,
+                    var: SMS_TRAI_VAR,
+                    charCounts: varCounts * CHARLIMIT,
+                  })}
+                </span>
+              );
+            }}
+          />
+          {(!isFullMode)
+            ? renderDescriptionCharacterCount('rcs-character-count rcs-character-count--compact')
+            : (isFullMode && renderDescriptionCharacterCount())}
+        </div>
+      </CapRow>
+    );
+  };
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
@@ -118,7 +281,6 @@ export const SmsTraiEdit = (props) => {
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
-    }
 `;
   const TraiEditTemplateDetails = styled.div`
     margin-bottom: ${CAP_SPACE_16};
@@ -127,41 +289,127 @@ export const SmsTraiEdit = (props) => {
     }
   `;
 
+  /**
+   * RCS embedded SMS fallback receives a new `templateData` object from `mapFallbackValueToEditTemplateData`
+   * on every parent render. Depending on `[templateDetails || templateData]` re-ran init and wiped
+   * VarSegmentMessageEditor state whenever Test & Preview (or any) re-rendered Rcs. Key only changes
+   * when template id / sms-editor / header actually change.
+   *
+   * Do NOT include `unicode-validity` in the key: parent merges `onRcsFallbackEditorStateChange`
+   * unicode patches into `templateData`, which would change the key every toggle and re-run init —
+   * resetting local checkbox state (visible as the unicode control flipping).
+   *
+   * Do NOT include `rcs-sms-fallback-var-mapped` in the key: the parent merges slot edits into
+   * `templateData` on every change, so the key would change each keystroke and this effect would
+   * re-run and reset slots — visible as toggling between old and new values.
+   */
+  const rcsFallbackTemplateInitKey = useMemo(() => {
+    if (!isRcsSmsFallback) return null;
+    // RCS fallback slidebox always passes `templateData` from `mapFallbackValueToEditTemplateData`.
+    // `templateDetails` stays empty there (no route id fetch) — do not branch on `isFullMode` or init
+    // key is null, the effect never runs, and `loading` stays true forever.
+    const activeSmsTemplateSource = templateData;
+    if (!activeSmsTemplateSource || isEmpty(activeSmsTemplateSource)) return null;
+    const templateBase = get(activeSmsTemplateSource, 'versions.base', {}) || {};
+    const smsEditorTemplateString = templateBase?.['sms-editor'] ?? '';
+    const registeredSenderHeaderList = templateBase?.header;
+    const headerListFingerprint = Array.isArray(registeredSenderHeaderList)
+      ? registeredSenderHeaderList.join('\u001f')
+      : '';
+    const templateRecordId = activeSmsTemplateSource?._id ?? '';
+    return [
+      templateRecordId,
+      smsEditorTemplateString,
+      headerListFingerprint,
+    ].join('\u0000');
+  }, [isRcsSmsFallback, templateData]);
+
   useEffect(() => {
-    //fetching tags
     const { type, module } = location.query || {};
     const isEmbedded = type === EMBEDDED;
     const query = {
       layout: SMS,
       type: TAG,
       context: isEmbedded ? module : DEFAULT,
-      embedded: isEmbedded ? type : FULL,
+      embedded: forceFullTagContext ? FULL : (isEmbedded ? type : FULL),
     };
     if (getDefaultTags) {
       query.context = getDefaultTags;
     }
-    globalActions.fetchSchemaForEntity(query);
-    //fetching template data in fullmode
+    fetchTagSchemaIfNewQuery(query);
     const { id } = params || {};
     if (id) {
       actions.getTemplateDetails(id);
     }
-    //cleanup code
     return () => {
       actions.resetEditTemplate();
-      varMap = {};
+      varMapRef.current = {};
     };
   }, []);
 
-  //computing placeholder array for mapping values and rendering dynamic form
   useEffect(() => {
-    traiData = isFullMode ? templateDetails : templateData;
-    if (traiData && !isEmpty(traiData)) {
-      let msg = get(traiData, `versions.base.sms-editor`, '');
+    if (!isRcsSmsFallback || rcsFallbackTemplateInitKey == null) return;
+    const {
+      isFullMode: isFullModeFromRef,
+      templateDetails: templateDetailsFromRef,
+      templateData: templateDataFromRef,
+    } = rcsFallbackTemplateSourceRef.current;
+    const activeTemplateSourceForInit = isRcsSmsFallback
+      ? templateDataFromRef
+      : (isFullModeFromRef ? templateDetailsFromRef : templateDataFromRef);
+    if (!activeTemplateSourceForInit || isEmpty(activeTemplateSourceForInit)) return;
+    traiDataRef.current = activeTemplateSourceForInit;
+    const templateBase = get(activeTemplateSourceForInit, 'versions.base', {});
+    const unicodeValidity = get(templateBase, 'unicode-validity', true);
+    const templateMsg = get(activeTemplateSourceForInit, 'versions.base.sms-editor', '') || '';
+    if (!useRcsFallbackVarSegment) {
+      setFallbackText(templateMsg);
+      setFallbackVarMappedData({});
+      setUpdatedSmsEditor(String(templateMsg).split(''));
+      setTotalMessageLength(String(templateMsg).length);
+      updateIsUnicodeAllowed(unicodeValidity);
+      updateLoading(false);
+      return;
+    }
+    const savedVarMap = get(templateBase, 'rcs-sms-fallback-var-mapped', {}) || {};
+    const initialVarMap = {};
+    const templateSegments = splitTemplateVarString(templateMsg, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+    let varOrdinal = 0;
+    templateSegments.forEach((segmentToken, segmentIndexInTemplate) => {
+      const isVar =
+        typeof segmentToken === 'string' && isAnyTemplateVarToken(segmentToken);
+      if (!isVar) return;
+      varOrdinal += 1;
+      const varSegmentSlotId = `${segmentToken}_${segmentIndexInTemplate}`;
+      const persistedSlotValue =
+        savedVarMap?.[varSegmentSlotId]
+        ?? savedVarMap?.[`${segmentToken}_${varOrdinal}`];
+      // Persisted '' means the user cleared the slot — must not fall back to `segmentToken` for mustache
+      // (that would resurrect {{…}} in the input and look like the tag "came back").
+      if (typeof persistedSlotValue === 'string') {
+        initialVarMap[varSegmentSlotId] = persistedSlotValue;
+      } else if (isDltHashVarToken(segmentToken)) {
+        initialVarMap[varSegmentSlotId] = '';
+      } else {
+        initialVarMap[varSegmentSlotId] = segmentToken;
+      }
+    });
+    setFallbackText(templateMsg);
+    setFallbackVarMappedData(initialVarMap);
+    const initialResolvedFallbackDisplay = getFallbackResolvedContent(templateMsg, initialVarMap);
+    setUpdatedSmsEditor(initialResolvedFallbackDisplay.split(''));
+    setTotalMessageLength(initialResolvedFallbackDisplay.length);
+    updateIsUnicodeAllowed(unicodeValidity);
+    updateLoading(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- init only when semantic key changes; template props are read from ref
+  }, [isRcsSmsFallback, rcsFallbackTemplateInitKey, useRcsFallbackVarSegment]);
+
+  useEffect(() => {
+    if (isRcsSmsFallback) return;
+    traiDataRef.current = isFullMode ? templateDetails : templateData;
+    if (traiDataRef.current && !isEmpty(traiDataRef.current)) {
+      let msg = get(traiDataRef.current, `versions.base.sms-editor`, '');
       const templateMessageArray = [];
-      //converting sms-editor string to an array split at '{#var#}'
-      //split and push string before '{#var#}[0 to index]', push '{#var#}',
-      //split and repeat for remaining string[index+7  to length]
       while (msg.length !== 0) {
         const index = msg.search(SMS_TRAI_VAR);
         if (index !== -1) {
@@ -175,30 +423,59 @@ export const SmsTraiEdit = (props) => {
       }
       const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
       updateTempMsgArray(filteredTemplateMessageArray);
-      //stop spinner
       updateLoading(false);
     }
-  }, [templateDetails || templateData]);
+  }, [templateDetails || templateData, isRcsSmsFallback, isFullMode]);
 
-  //compute/get varMapped and updated-sms-editor
   useEffect(() => {
+    if (!isRcsSmsFallback) return;
+    if (!useRcsFallbackVarSegment) {
+      const plainFallbackSmsText = fallbackText || '';
+      setUpdatedSmsEditor(plainFallbackSmsText.split(''));
+      setTotalMessageLength(plainFallbackSmsText.length);
+      return;
+    }
+    const resolvedFallbackDisplay = getFallbackResolvedContent(
+      fallbackText || '',
+      fallbackVarMappedData || {},
+    );
+    setUpdatedSmsEditor(resolvedFallbackDisplay.split(''));
+    setTotalMessageLength(resolvedFallbackDisplay.length);
+  }, [isRcsSmsFallback, useRcsFallbackVarSegment, fallbackText, fallbackVarMappedData]);
+
+  useEffect(() => {
+    if (!isRcsSmsFallback) return;
+    if (typeof onRcsFallbackEditorStateChange !== 'function') return;
+    onRcsFallbackEditorStateChange({
+      rcsSmsFallbackVarMapped: fallbackVarMappedData || {},
+    });
+  }, [isRcsSmsFallback, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
+
+  useEffect(() => {
+    if (!isRcsSmsFallback) return;
+    if (typeof onRcsFallbackEditorStateChange !== 'function') return;
+    onRcsFallbackEditorStateChange({
+      unicodeValidity: isUnicodeAllowed,
+    });
+  }, [isRcsSmsFallback, isUnicodeAllowed, onRcsFallbackEditorStateChange]);
+
+  useEffect(() => {
+    if (isRcsSmsFallback) return;
     if (tempMsgArray.length !== 0) {
-      const traiBase = traiData?.versions?.base || {};
+      const traiBase = traiDataRef.current?.versions?.base || {};
       const {
         'var-mapped': varMapped = {},
         'updated-sms-editor': traiSmsEditor = '',
         'unicode-validity': unicodeValidity = true,
       } = traiBase;
-      //if varMap and updated-sms-editor is already present on non first edits,use those values
       if (!isEmpty(varMapped)) {
-        varMap = cloneDeep(varMapped);
+        varMapRef.current = cloneDeep(varMapped);
         if (isFullMode) {
           setUpdatedSmsEditor(traiSmsEditor);
         } else {
           computeUpdatedSmsEditor();
         }
       } else {
-        //computing and setting varMap for first edit
         let varCount = 1;
         let horizontalSpaceCount = 0;
         for (let i = 0; i < tempMsgArray.length; i += 1) {
@@ -209,7 +486,7 @@ export const SmsTraiEdit = (props) => {
               horizontalSpaceCount += 1;
             }
             if (tempMsgArray[i] !== nextElem && nextElem?.replace(/[^\S\r\n]/gm, '') !== '') {
-              varMap[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
+              varMapRef.current[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
                 data: '',
                 count: varCount,
               };
@@ -223,7 +500,6 @@ export const SmsTraiEdit = (props) => {
         setUpdatedSmsEditor(tempMsgArray);
       }
       updateIsUnicodeAllowed(unicodeValidity);
-      // calcaulate message length here
       calculateTotalMessageLength();
     }
   }, [tempMsgArray]);
@@ -237,17 +513,84 @@ export const SmsTraiEdit = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    const runValidateTags = (content) =>
+      validateTags({
+        content,
+        tagsParam: tags,
+        location,
+        tagModule: getDefaultTags,
+        isFullMode,
+      }) || {};
+
+    if (isRcsSmsFallback) {
+      if (isFullMode) {
+        tagValidationResponseRef.current = {};
+        updateIsTagValidationError(false);
+        return;
+      }
+      // 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) {
+        tagValidationResponseRef.current = {};
+        updateIsTagValidationError(false);
+        return;
+      }
+      const validationContent = fallbackText || '';
+      if (!validationContent.trim()) {
+        tagValidationResponseRef.current = {};
+        updateIsTagValidationError(false);
+        return;
+      }
+      tagValidationResponseRef.current = validateTags({
+        content: validationContent,
+        tagsParam: tags,
+        location,
+        tagModule: getDefaultTags,
+        isFullMode: true,
+      }) || {};
+      const braceErr = !!tagValidationResponseRef.current.isBraceError;
+      // Plain (non-VarSegment) fallback textarea: only unbalanced `{{…}}` disables Done.
+      updateIsTagValidationError(braceErr);
+      return;
+    }
+    if (
+      !isFullMode &&
+      updatedSmsEditor?.length > 0 &&
+      !updatedSmsEditor.includes(SMS_TRAI_VAR)
+    ) {
+      tagValidationResponseRef.current = runValidateTags(updatedSmsEditor.join(''));
+      const missing = (tagValidationResponseRef.current.missingTags || []).length > 0;
+      const braceErr = !!tagValidationResponseRef.current.isBraceError;
+      updateIsTagValidationError(missing || braceErr);
+    } else if (!isRcsSmsFallback) {
+      tagValidationResponseRef.current = {};
+      updateIsTagValidationError(false);
+    }
+  }, [
+    updatedSmsEditor,
+    tags,
+    isRcsSmsFallback,
+    isFullMode,
+    useRcsFallbackVarSegment,
+    fallbackText,
+    fallbackVarMappedData,
+    getDefaultTags,
+    location,
+  ]);
+
   const computeUpdatedSmsEditor = () => {
     const arr = [...tempMsgArray];
-    const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
-    for (const key in varMap) {
-      if (varMap[key].data !== '') {
+    const varMapKeys = Object.keys(varMapRef.current)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+    for (const key in varMapRef.current) {
+      if (varMapRef.current[key].data !== '') {
         const _id = Number(key.slice(8)); //Eg: -> extracting index 1 from keys like {#var# } _1
         const loopIndex =
           varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
         for (let i = _id; i < loopIndex; i += 1) {
           if (i === _id) {
-            arr[i] = varMap[key].data; //data for first #var# of the textbox
+            arr[i] = varMapRef.current[key].data; //data for first #var# of the textbox
           } else if (arr[i] === SMS_TRAI_VAR) {
             arr[i] = ''; //'' for remaining #var# of a textbox
           }
@@ -257,8 +600,8 @@ export const SmsTraiEdit = (props) => {
     setUpdatedSmsEditor(arr);
   };
 
-  //Saving on done start
   const onUpdateTemplateComplete = (editResponse, errorMsg) => {
+    updateLoading(false);
     if (editResponse?.templateId) {
       CapNotification.success({
         message: formatMessage(messages.smsEditNotification),
@@ -337,66 +680,121 @@ export const SmsTraiEdit = (props) => {
   };
 
   const onDoneCallback = () => {
-    if (updatedSmsEditor.includes(SMS_TRAI_VAR) && !isFullMode) {
-      //during save textbox should not be empty
+    // RCS fallback: allow Save when only "missing tags" ({{name}} may not be in TagList); still block unbalanced braces.
+    if (isTagValidationError) {
+      if (!isRcsSmsFallback) return;
+      const tagValidationSnapshot = tagValidationResponseRef.current ?? {};
+      if (tagValidationSnapshot.isBraceError) return;
+    }
+    const editorJoined = Array.isArray(updatedSmsEditor)
+      ? updatedSmsEditor.join('')
+      : String(updatedSmsEditor || '');
+    if (!isRcsSmsFallback && editorJoined.includes(SMS_TRAI_VAR) && !isFullMode) {
       updateIsValidationError(true);
     } else {
-      //start spinner
-      updateLoading(true);
-      const traiVersions = traiData.versions || {};
-      traiVersions.base = {
-        ...traiVersions.base,
-        'var-mapped': varMap,
-        'updated-sms-editor': updatedSmsEditor,
-        'unicode-validity': isUnicodeAllowed,
-      };
+      // Only show full-screen spinner when waiting on full-mode SMS edit API — not for RCS SMS fallback
+      // handoff (getFormSubscriptionData → SmsFallback closeSlidebox) and not for embedded sync handoff.
+      if (isFullMode && !isRcsSmsFallback) {
+        updateLoading(true);
+      }
+      if (!traiDataRef.current.versions) {
+        traiDataRef.current.versions = { base: {}, history: [] };
+      }
+      const traiVersions = traiDataRef.current.versions;
+      if (isRcsSmsFallback) {
+        const {
+          'var-mapped': _ignoredVarMapped,
+          'updated-sms-editor': _ignoredUpdatedSmsEditor,
+          'rcs-sms-fallback-var-mapped': _ignoredFallbackVarMapped,
+          ...baseWithoutDerivedFields
+        } = traiVersions.base || {};
+        traiVersions.base = {
+          ...baseWithoutDerivedFields,
+          'sms-editor': fallbackText || '',
+          'unicode-validity': isUnicodeAllowed,
+          ...(useRcsFallbackVarSegment && {
+            'rcs-sms-fallback-var-mapped': fallbackVarMappedData || {},
+          }),
+        };
+      } else {
+        traiVersions.base = {
+          ...traiVersions.base,
+          'var-mapped': varMapRef.current,
+          'updated-sms-editor': updatedSmsEditor,
+          'unicode-validity': isUnicodeAllowed,
+        };
+      }
       traiVersions.history = [traiVersions.base];
-      if (isFullMode) {
-        actions.editTemplate(traiData, onUpdateTemplateComplete);
+      // RCS → SMS fallback (slidebox / inline): always hand off via getFormSubscriptionData so parent
+      // can persist fallback state and close the slide — never the standalone TRAI editTemplate API here.
+      if (isFullMode && !isRcsSmsFallback) {
+        actions.editTemplate(traiDataRef.current, onUpdateTemplateComplete);
       } else {
         getFormSubscriptionData({
-          value: traiData.versions,
+          value: traiVersions,
+          // Consumers/tests read `versions.base` first (see getBaseFromSmsTraiFormData, rcsDltEditCompletionHandler).
+          versions: traiVersions,
           _id: params && params.id,
           validity: true,
           type: SMS,
         });
+        updateLoading(false);
       }
     }
   };
-  //Saving on done end
 
-  // tag code start
+  const locationQueryType = location?.query?.type;
+  const locationQueryModule = location?.query?.module;
+
   useEffect(() => {
-    let tag =
-      metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    const { type, module } = location.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+    let tag = getStandardTagsFromMeta(metaEntities);
+    if ((!Array.isArray(tag) || tag.length === 0) && Array.isArray(supportedTags) && supportedTags.length > 0) {
       tag = supportedTags;
     }
-    updateTags(tag);
-  }, [metaEntities]);
+    if (
+      locationQueryType === EMBEDDED &&
+      locationQueryModule === LIBRARY &&
+      !getDefaultTags
+    ) {
+      tag = supportedTags || [];
+    }
+    updateTags(Array.isArray(tag) ? tag : []);
+  }, [metaEntities, getDefaultTags, supportedTags, locationQueryType, locationQueryModule]);
 
   const handleOnTagsContextChange = (data) => {
+    // CapTagList passes "Outbound" | "Loyalty" from the module filter; TagList may pass "Outbound" on init.
+    if (data == null || data === '') return;
+    const normalizedContext = String(data).toLowerCase();
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
     const query = {
       layout: SMS,
       type: TAG,
-      context:
-        (data || '').toLowerCase() === ALL
-          ? DEFAULT
-          : (data || '').toLowerCase(),
-      embedded: isEmbedded ? type : FULL,
+      context: normalizedContext === ALL ? DEFAULT : normalizedContext,
+      embedded: forceFullTagContext ? FULL : (isEmbedded ? type : FULL),
     };
-    globalActions.fetchSchemaForEntity(query);
+    fetchTagSchemaIfNewQuery(query);
   };
 
   const onTagSelect = (data) => {
-    if (textAreaId >= 0 && varMap && updatedSmsEditor) {
+    if (isRcsSmsFallback) {
+      if (!useRcsFallbackVarSegment) {
+        setFallbackText((prev) => `${prev || ''}{{${data}}}`);
+        return;
+      }
+      if (!fallbackFocusedId) return;
+      const prevVal = fallbackVarMappedData?.[fallbackFocusedId] ?? '';
+      const nextVal = `${prevVal}{{${data}}}`;
+      setFallbackVarMappedData((prev) => ({
+        ...(prev || {}),
+        [fallbackFocusedId]: nextVal,
+      }));
+      return;
+    }
+    if (textAreaId >= 0 && varMapRef.current && updatedSmsEditor) {
       const arr = [...updatedSmsEditor];
-      const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+      const varMapKeys = Object.keys(varMapRef.current)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
       const loopIndex = varMapKeys[varMapKeys?.indexOf(textAreaId) + 1] || arr.length;
-      //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
       for (let i = textAreaId; i < loopIndex; i += 1) {
         if (arr[i] === SMS_TRAI_VAR) {
           arr[i] = '';
@@ -404,26 +802,23 @@ export const SmsTraiEdit = (props) => {
       }
       const messageData = `${arr[textAreaId]}{{${data}}}`;
       arr[textAreaId] = messageData;
-      varMap[`${SMS_TRAI_VAR}_${textAreaId}`].data = messageData;
+      varMapRef.current[`${SMS_TRAI_VAR}_${textAreaId}`].data = messageData;
       setUpdatedSmsEditor(arr);
     }
   };
-  //setting the id of currently selected text area, is used onTagSelect
+
   const setTextAreaId = (event) => {
     updateTextAreaId(Number(event.target.id));
   };
-  // tag code end
 
-  // on change event of Text Area
   const textAreaValueChange = ({ target: { value, id } }) => {
+    if (isRcsSmsFallback) return;
     const _id = Number(id);
     const arr = [...updatedSmsEditor];
-    const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+    const varMapKeys = Object.keys(varMapRef.current)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
     const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
 
-    //assign entered value to varMap
-    varMap[`${SMS_TRAI_VAR}_${_id}`].data = value;
-    //based on entered value update updatedSmsEditor
+    varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data = value;
     if (value === '') {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id || arr[i] === '') {
@@ -433,7 +828,7 @@ export const SmsTraiEdit = (props) => {
     } else {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id) {
-          arr[i] = varMap[`${SMS_TRAI_VAR}_${_id}`].data;
+          arr[i] = varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data;
         } else if (arr[i] === SMS_TRAI_VAR) {
           arr[i] = '';
         }
@@ -536,18 +931,33 @@ export const SmsTraiEdit = (props) => {
   };
 
   const smsLengthForVar = () => (
-    <CapHeading type="h5" style={{ marginTop: CAP_SPACE_04, float: 'right' }}>
-      {formatMessage(messages.totalCharacters, {
-        smsCount: Math.ceil(totalMessageLength / 160),
-        number: totalMessageLength,
-      })}
+    <CapHeading
+      type="h5"
+      className={isRcsSmsFallback ? 'rcs-character-count rcs-character-count--compact' : ''}
+      style={isRcsSmsFallback ? {} : { marginTop: CAP_SPACE_04, marginBottom: 0 }}
+    >
+      {isRcsSmsFallback
+        ? formatMessage(messages.charactersCountLabel, {
+            current: totalMessageLength,
+            max: SMS_TRAI_CONTENT_MAX_LENGTH,
+          })
+        : formatMessage(messages.totalCharacters, {
+            smsCount: Math.ceil(totalMessageLength / 160),
+            number: totalMessageLength,
+          })}
     </CapHeading>
   );
 
-  // to compute the length of the message
-  //40 characters is blocked per'{#var#}' if textbox is empty otherwise it will be textbox length
-  // and the remaining string length is added to it
   const calculateTotalMessageLength = () => {
+    if (isRcsSmsFallback) {
+      if (useRcsFallbackVarSegment) {
+        const resolved = getFallbackResolvedContent(fallbackText || '', fallbackVarMappedData || {});
+        setTotalMessageLength(resolved.length);
+      } else {
+        setTotalMessageLength((fallbackText || '').length);
+      }
+      return;
+    }
     const msgLenWithoutVar = tempMsgArray
       ?.filter((i) => i !== SMS_TRAI_VAR)
       .join('');
@@ -558,22 +968,43 @@ export const SmsTraiEdit = (props) => {
 
   const calculateLenForTextBox = () => {
     let countVarChar = 0;
-    Object.keys(varMap).forEach((i) => {
-      if (varMap[i].data) {
-        countVarChar += varMap[i].data?.length;
-        if (!showMsgLengthNote && varMap[i].data?.length > varMap[i].count * CHARLIMIT) {
+    Object.keys(varMapRef.current).forEach((i) => {
+      if (varMapRef.current[i].data) {
+        countVarChar += varMapRef.current[i].data?.length;
+        if (!showMsgLengthNote && varMapRef.current[i].data?.length > varMapRef.current[i].count * CHARLIMIT) {
           updateshowMsgLengthNote(true);
         }
       } else {
-        countVarChar += varMap[i].count * CHARLIMIT;
+        countVarChar += varMapRef.current[i].count * CHARLIMIT;
       }
     });
     return countVarChar;
   };
 
+  const tagValidationErrorMessage = () => {
+    const { missingTags = [], unsupportedTags = [], isBraceError } = tagValidationResponseRef.current || {};
+    const listForMessage = (unsupportedTags && unsupportedTags.length > 0)
+      ? unsupportedTags
+      : missingTags;
+    if (isBraceError) {
+      return <CapError>{formatMessage(globalMessages.unbalanacedCurlyBraces)}</CapError>;
+    }
+    if (listForMessage.length > 0) {
+      return (
+        <CapError>
+          {formatMessage(messages.unsupportedTagsValidationError, {
+            unsupportedTags: listForMessage,
+          })}
+        </CapError>
+      );
+    }
+    return null;
+  };
+
   const disablehandler = () => {
-    if (traiData && !isEmpty(traiData)) {
-      const msg = get(traiData, `versions.base.sms-editor`, '');
+    if (isRcsSmsFallback) return false;
+    if (traiDataRef.current && !isEmpty(traiDataRef.current)) {
+      const msg = get(traiDataRef.current, `versions.base.sms-editor`, '');
       const index = msg.search(SMS_TRAI_VAR);
       if (index === -1) {
         return true;
@@ -587,7 +1018,6 @@ export const SmsTraiEdit = (props) => {
     updateIsUnicodeAllowed(checked);
   };
 
-  // Get template content for test and preview
   const getTemplateContent = () => {
     if (!updatedSmsEditor || updatedSmsEditor.length === 0) {
       return '';
@@ -595,42 +1025,69 @@ export const SmsTraiEdit = (props) => {
     return updatedSmsEditor.join('');
   };
 
-  // Build formData for TestAndPreviewSlidebox - templateConfigs with templateId and template for DLT test
   const getFormDataForTestAndPreview = () => {
-    const smsBase = get(traiData, 'versions.base') || get(templateDetails, 'versions.base') || get(templateData, 'versions.base');
+    const smsBase = get(traiDataRef.current, 'versions.base') || get(templateDetails, 'versions.base') || get(templateData, 'versions.base');
     if (!smsBase || !smsBase.template_id) {
       return {};
     }
     const templateRaw = smsBase['updated-sms-editor'] || smsBase['sms-editor'] || '';
     const template = Array.isArray(templateRaw) ? templateRaw.join('') : templateRaw;
+    const traiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+    const headerIds = get(traiDataRef.current, 'versions.base.header', []) || [];
     return {
       templateConfigs: {
-        templateId: smsBase.template_id, template, traiDltEnabled: true, registeredSenderIds: get(traiData, `versions.base.header`, []),
+        templateId: smsBase.template_id,
+        template,
+        traiDltEnabled: traiDlt,
+        registeredSenderIds: traiDlt ? headerIds : [],
       },
     };
   };
 
-  // Handle test and preview button click
   const handleTestAndPreview = () => {
     setShowTestAndPreviewSlidebox(true);
   };
 
-  // Handle close test and preview slidebox
   const handleCloseTestAndPreview = () => {
     setShowTestAndPreviewSlidebox(false);
   };
 
+  const shouldShowPreview =
+    !isRcsSmsFallback || (showPreviewInRcsFallback && !hidePreview);
+  const smsSidePreviewColumn = (
+    <CapColumn span={8} offset={1}>
+      <UnifiedPreview
+        channel={SMS}
+        content={updatedSmsEditor.join('')}
+        device={ANDROID}
+        showDeviceToggle={false}
+        showHeader={false}
+        formatMessage={formatMessage}
+        senderId={isUnicodeAllowed ? 'Unicode' : 'ASCII'}
+      />
+    </CapColumn>
+  );
+
   return (
     <>
-      <CapSpin spinning={loading || fetchingLiquidTags} tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}>
+      <CapSpin
+        spinning={loading || fetchingLiquidTags}
+        tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}
+        className={[
+          isRcsSmsFallback && 'sms-trai-edit-rcs-fallback',
+          isOverview && 'sms-trai-edit--overview',
+        ]
+          .filter(Boolean)
+          .join(' ') || undefined}
+      >
         <CapRow>
-          {traiData && !isEmpty(traiData) && (
+          {traiDataRef.current && !isEmpty(traiDataRef.current) && !isRcsSmsFallback && (
             <TraiEditTemplateDetails>
               <CapLabelInline type="label1">
                 {formatMessage(messages.templateLabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {get(traiData, `versions.base.template_name`, '')}
+                {get(traiDataRef.current, `versions.base.template_name`, '')}
               </CapLabelInline>
 
               <CapLabelInline type="label1">
@@ -641,15 +1098,42 @@ export const SmsTraiEdit = (props) => {
                 {formatMessage(messages.senderIdlabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {[...get(traiData, `versions.base.header`, [])].join(', ')}
+                {[...get(traiDataRef.current, `versions.base.header`, [])].join(', ')}
+              </CapLabelInline>
+            </TraiEditTemplateDetails>
+          )}
+          {isRcsSmsFallback &&
+            traiDataRef.current &&
+            !isEmpty(traiDataRef.current) &&
+            !loading && (
+            <TraiEditTemplateDetails className="sms-trai-edit-rcs-fallback__template-meta">
+              <CapLabelInline type="label1">
+                {formatMessage(messages.templateNameLabel)}
+              </CapLabelInline>
+              <CapLabelInline type="label2">
+                {get(traiDataRef.current, 'versions.base.template_name', '')
+                  || get(traiDataRef.current, 'name', '')}
               </CapLabelInline>
+              {traiDltEnabled ? (
+                <>
+                  <CapLabelInline type="label1">
+                    {formatMessage(messages.traiEditSeperator)}
+                  </CapLabelInline>
+                  <CapLabelInline type="label1">
+                    {formatMessage(messages.senderIdlabel)}
+                  </CapLabelInline>
+                  <CapLabelInline type="label2">
+                    {[...get(traiDataRef.current, 'versions.base.header', [])].join(', ')}
+                  </CapLabelInline>
+                </>
+              ) : null}
             </TraiEditTemplateDetails>
           )}
-          <CapColumn span={14}>
+          <CapColumn span={shouldShowPreview ? 14 : 24}>
             <CapRow>
               <CapHeader
                 title={formatMessage(messages.traiEditTitle)}
-                size="regular"
+                size={isRcsSmsFallback ? 'label1' : 'regular'}
                 suffix={(
                   <TagList
                     label={formatMessage(messages.addLabels)}
@@ -658,43 +1142,55 @@ export const SmsTraiEdit = (props) => {
                     tags={tags || []}
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
-                    hidePopover={disablehandler()}
+                    channel={SMS}
+                    hidePopover={false}
+                    disabled={!isRcsSmsFallback && disablehandler()}
                     selectedOfferDetails={selectedOfferDetails}
                     eventContextTags={eventContextTags}
-                    waitEventContextTags={waitEventContextTags}
+                    popoverOverlayStyle={isRcsSmsFallback ? { zIndex: 10020 } : undefined}
+                    popoverOverlayClassName={isRcsSmsFallback ? 'sms-fallback-taglist-popover rcs-sms-fallback-taglist-popover' : undefined}
                   />
                 )}
               />
             </CapRow>
 
-            <CapRow
-              style={{
-                backgroundColor: CAP_G10,
-                padding: CAP_SPACE_16,
-              }}
+            {isRcsSmsFallback ? (
+              <>
+                {renderRcsFallbackMessage(fallbackText)}
+              </>
+            ) : (
+              <>
+                <CapRow className="sms-trai-editor-segment-row">
+                  <div className="sms-trai-segmented-editor">
+                    {renderedContent()}
+                  </div>
+                </CapRow>
+                <CapRow className="sms-trai-length-row">
+                  {smsLengthForVar()}
+                </CapRow>
+              </>
+            )}
+            {isRcsSmsFallback && isTagValidationError && (
+              <CapRow>
+                {tagValidationErrorMessage()}
+              </CapRow>
+            )}
+            {!isRcsSmsFallback && isTagValidationError && tagValidationErrorMessage()}
+            <CapCheckbox
+              onChange={unicodeHandler}
+              checked={isUnicodeAllowed}
+              disabled={
+                isRcsSmsFallback
+                  ? isRcsEditFlow
+                  : disablehandler()
+              }
             >
-              {renderedContent()}
-            </CapRow>
-            <CapRow>
-              {smsLengthForVar()}
-            </CapRow>
-            <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>
               {formatMessage(messages.unicodeLabel)}
             </CapCheckbox>
             {showMsgLengthNote && <CapInfoNote message={<FormattedMessage {...messages.msgLengthNote} values={{ var: '{#var#}' }} />} />}
-            <div style={{ marginBottom: '100px' }} />
-          </CapColumn>
-          <CapColumn span={8} offset={1}>
-            <UnifiedPreview
-              channel={SMS}
-              content={updatedSmsEditor.join('')}
-              device={ANDROID}
-              showDeviceToggle={false}
-              showHeader={false}
-              formatMessage={formatMessage}
-              senderId={isUnicodeAllowed ? 'Unicode' : 'ASCII'}
-            />
+            <div className="sms-trai-edit-bottom-spacer" />
           </CapColumn>
+          {shouldShowPreview && smsSidePreviewColumn}
         </CapRow>
         <SMSTraiFooter>
           {isLiquidValidationError && !liquidErrorPanelDismissed && (
@@ -720,8 +1216,9 @@ export const SmsTraiEdit = (props) => {
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
-            onClick={onSubmitWrapper}
+            onClick={onDoneCallback}
             className="create-msg"
+            disabled={isTagValidationError}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
@@ -738,6 +1235,15 @@ export const SmsTraiEdit = (props) => {
   );
 };
 
+SmsTraiEdit.propTypes = {
+  isRcsSmsFallback: PropTypes.bool,
+  isRcsEditFlow: PropTypes.bool,
+  showPreviewInRcsFallback: PropTypes.bool,
+  hidePreview: PropTypes.bool,
+  isOverview: PropTypes.bool,
+  onRcsFallbackEditorStateChange: PropTypes.func,
+};
+
 const mapStateToProps = createStructuredSelector({
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),