@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.16

package/v2Containers/SmsTrai/Edit/index.js

@@ -1,11 +1,10 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-undef */
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage } from 'react-intl';
-import { get, cloneDeep, isEmpty } from 'lodash';
+import { get, cloneDeep, isEmpty, isObject } from 'lodash';
 import styled from 'styled-components';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -28,13 +27,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';
@@ -42,8 +41,6 @@ import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox
 import withCreatives from '../../../hoc/withCreatives';
 import {
   CHARLIMIT,
-  SMS,
-  SMS_TRAI_CONTENT_MAX_LENGTH,
   SMS_TRAI_VAR,
   TAG,
   EMBEDDED,
@@ -52,39 +49,24 @@ 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,
@@ -100,20 +82,10 @@ 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;
@@ -123,149 +95,14 @@ 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: '0.75rem',
-                fontWeight: 400,
-                lineHeight: '1rem',
-              };
-              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};
@@ -281,6 +118,7 @@ export const SmsTraiEdit = (props) => {
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
+    }
 `;
   const TraiEditTemplateDetails = styled.div`
     margin-bottom: ${CAP_SPACE_16};
@@ -289,127 +127,41 @@ 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: forceFullTagContext ? FULL : (isEmbedded ? type : FULL),
+      embedded: isEmbedded ? type : FULL,
     };
     if (getDefaultTags) {
       query.context = getDefaultTags;
     }
-    fetchTagSchemaIfNewQuery(query);
+    globalActions.fetchSchemaForEntity(query);
+    //fetching template data in fullmode
     const { id } = params || {};
     if (id) {
       actions.getTemplateDetails(id);
     }
+    //cleanup code
     return () => {
       actions.resetEditTemplate();
-      varMapRef.current = {};
+      varMap = {};
     };
   }, []);
 
+  //computing placeholder array for mapping values and rendering dynamic form
   useEffect(() => {
-    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`, '');
+    traiData = isFullMode ? templateDetails : templateData;
+    if (traiData && !isEmpty(traiData)) {
+      let msg = get(traiData, `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) {
@@ -423,59 +175,30 @@ export const SmsTraiEdit = (props) => {
       }
       const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
       updateTempMsgArray(filteredTemplateMessageArray);
+      //stop spinner
       updateLoading(false);
     }
-  }, [templateDetails || templateData, isRcsSmsFallback, isFullMode]);
+  }, [templateDetails || templateData]);
 
+  //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 = traiDataRef.current?.versions?.base || {};
+      const traiBase = traiData?.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)) {
-        varMapRef.current = cloneDeep(varMapped);
+        varMap = 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) {
@@ -486,7 +209,7 @@ export const SmsTraiEdit = (props) => {
               horizontalSpaceCount += 1;
             }
             if (tempMsgArray[i] !== nextElem && nextElem?.replace(/[^\S\r\n]/gm, '') !== '') {
-              varMapRef.current[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
+              varMap[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
                 data: '',
                 count: varCount,
               };
@@ -500,6 +223,7 @@ export const SmsTraiEdit = (props) => {
         setUpdatedSmsEditor(tempMsgArray);
       }
       updateIsUnicodeAllowed(unicodeValidity);
+      // calcaulate message length here
       calculateTotalMessageLength();
     }
   }, [tempMsgArray]);
@@ -513,84 +237,17 @@ 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(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 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 _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] = varMapRef.current[key].data; //data for first #var# of the textbox
+            arr[i] = varMap[key].data; //data for first #var# of the textbox
           } else if (arr[i] === SMS_TRAI_VAR) {
             arr[i] = ''; //'' for remaining #var# of a textbox
           }
@@ -600,8 +257,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),
@@ -680,121 +337,66 @@ export const SmsTraiEdit = (props) => {
   };
 
   const onDoneCallback = () => {
-    // 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) {
+    if (updatedSmsEditor.includes(SMS_TRAI_VAR) && !isFullMode) {
+      //during save textbox should not be empty
       updateIsValidationError(true);
     } else {
-      // 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,
-        };
-      }
+      //start spinner
+      updateLoading(true);
+      const traiVersions = traiData.versions || {};
+      traiVersions.base = {
+        ...traiVersions.base,
+        'var-mapped': varMap,
+        'updated-sms-editor': updatedSmsEditor,
+        'unicode-validity': isUnicodeAllowed,
+      };
       traiVersions.history = [traiVersions.base];
-      // 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);
+      if (isFullMode) {
+        actions.editTemplate(traiData, onUpdateTemplateComplete);
       } else {
         getFormSubscriptionData({
-          value: traiVersions,
-          // Consumers/tests read `versions.base` first (see getBaseFromSmsTraiFormData, rcsDltEditCompletionHandler).
-          versions: traiVersions,
+          value: traiData.versions,
           _id: params && params.id,
           validity: true,
           type: SMS,
         });
-        updateLoading(false);
       }
     }
   };
+  //Saving on done end
 
-  const locationQueryType = location?.query?.type;
-  const locationQueryModule = location?.query?.module;
-
+  // tag code start
   useEffect(() => {
-    let tag = getStandardTagsFromMeta(metaEntities);
-    if ((!Array.isArray(tag) || tag.length === 0) && Array.isArray(supportedTags) && supportedTags.length > 0) {
+    let tag =
+      metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
       tag = supportedTags;
     }
-    if (
-      locationQueryType === EMBEDDED &&
-      locationQueryModule === LIBRARY &&
-      !getDefaultTags
-    ) {
-      tag = supportedTags || [];
-    }
-    updateTags(Array.isArray(tag) ? tag : []);
-  }, [metaEntities, getDefaultTags, supportedTags, locationQueryType, locationQueryModule]);
+    updateTags(tag);
+  }, [metaEntities]);
 
   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: normalizedContext === ALL ? DEFAULT : normalizedContext,
-      embedded: forceFullTagContext ? FULL : (isEmbedded ? type : FULL),
+      context:
+        (data || '').toLowerCase() === ALL
+          ? DEFAULT
+          : (data || '').toLowerCase(),
+      embedded: isEmbedded ? type : FULL,
     };
-    fetchTagSchemaIfNewQuery(query);
+    globalActions.fetchSchemaForEntity(query);
   };
 
   const onTagSelect = (data) => {
-    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) {
+    if (textAreaId >= 0 && varMap && updatedSmsEditor) {
       const arr = [...updatedSmsEditor];
-      const varMapKeys = Object.keys(varMapRef.current)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+      const varMapKeys = Object.keys(varMap)?.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] = '';
@@ -802,23 +404,26 @@ export const SmsTraiEdit = (props) => {
       }
       const messageData = `${arr[textAreaId]}{{${data}}}`;
       arr[textAreaId] = messageData;
-      varMapRef.current[`${SMS_TRAI_VAR}_${textAreaId}`].data = messageData;
+      varMap[`${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(varMapRef.current)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+    const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
     const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
 
-    varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data = value;
+    //assign entered value to varMap
+    varMap[`${SMS_TRAI_VAR}_${_id}`].data = value;
+    //based on entered value update updatedSmsEditor
     if (value === '') {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id || arr[i] === '') {
@@ -828,7 +433,7 @@ export const SmsTraiEdit = (props) => {
     } else {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id) {
-          arr[i] = varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data;
+          arr[i] = varMap[`${SMS_TRAI_VAR}_${_id}`].data;
         } else if (arr[i] === SMS_TRAI_VAR) {
           arr[i] = '';
         }
@@ -931,32 +536,18 @@ export const SmsTraiEdit = (props) => {
   };
 
   const smsLengthForVar = () => (
-    <CapHeading
-      type="h5"
-      className={isRcsSmsFallback ? 'rcs-character-count rcs-character-count--compact' : 'sms-trai-char-count-heading'}
-    >
-      {isRcsSmsFallback
-        ? formatMessage(messages.charactersCountLabel, {
-            current: totalMessageLength,
-            max: SMS_TRAI_CONTENT_MAX_LENGTH,
-          })
-        : formatMessage(messages.totalCharacters, {
-            smsCount: Math.ceil(totalMessageLength / 160),
-            number: totalMessageLength,
-          })}
+    <CapHeading type="h5" style={{ marginTop: CAP_SPACE_04, float: 'right' }}>
+      {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('');
@@ -967,43 +558,22 @@ export const SmsTraiEdit = (props) => {
 
   const calculateLenForTextBox = () => {
     let countVarChar = 0;
-    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) {
+    Object.keys(varMap).forEach((i) => {
+      if (varMap[i].data) {
+        countVarChar += varMap[i].data?.length;
+        if (!showMsgLengthNote && varMap[i].data?.length > varMap[i].count * CHARLIMIT) {
           updateshowMsgLengthNote(true);
         }
       } else {
-        countVarChar += varMapRef.current[i].count * CHARLIMIT;
+        countVarChar += varMap[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 (isRcsSmsFallback) return false;
-    if (traiDataRef.current && !isEmpty(traiDataRef.current)) {
-      const msg = get(traiDataRef.current, `versions.base.sms-editor`, '');
+    if (traiData && !isEmpty(traiData)) {
+      const msg = get(traiData, `versions.base.sms-editor`, '');
       const index = msg.search(SMS_TRAI_VAR);
       if (index === -1) {
         return true;
@@ -1017,6 +587,7 @@ export const SmsTraiEdit = (props) => {
     updateIsUnicodeAllowed(checked);
   };
 
+  // Get template content for test and preview
   const getTemplateContent = () => {
     if (!updatedSmsEditor || updatedSmsEditor.length === 0) {
       return '';
@@ -1024,179 +595,109 @@ export const SmsTraiEdit = (props) => {
     return updatedSmsEditor.join('');
   };
 
+  // Build formData for TestAndPreviewSlidebox - templateConfigs with templateId and template for DLT test
   const getFormDataForTestAndPreview = () => {
-    const smsBase = get(traiDataRef.current, 'versions.base') || get(templateDetails, 'versions.base') || get(templateData, 'versions.base');
+    const smsBase = get(traiData, '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 headerIds = get(traiDataRef.current, 'versions.base.header', []) || [];
-    // For RCS SMS fallback, use the broader `useRcsFallbackVarSegment` flag (covers hasTraiDltFeature
-    // and isRcsEditFlow cases where isTraiDLTEnable alone is false). For regular TRAI SMS edit,
-    // use `traiDltEnabled` derived from isTraiDLTEnable — useRcsFallbackVarSegment is always false
-    // when isRcsSmsFallback is false and would incorrectly disable DLT mode in Test & Preview.
-    const effectiveDltEnabled = isRcsSmsFallback ? useRcsFallbackVarSegment : traiDltEnabled;
     return {
       templateConfigs: {
-        templateId: smsBase.template_id,
-        template,
-        traiDltEnabled: effectiveDltEnabled,
-        registeredSenderIds: effectiveDltEnabled ? headerIds : [],
+        templateId: smsBase.template_id, template, traiDltEnabled: true, registeredSenderIds: get(traiData, `versions.base.header`, []),
       },
     };
   };
 
+  // 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={0}>
-      <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)}
-        className={[
-          isRcsSmsFallback && 'sms-trai-edit-rcs-fallback',
-          isOverview && 'sms-trai-edit--overview',
-        ]
-          .filter(Boolean)
-          .join(' ') || undefined}
-      >
+      <CapSpin spinning={loading || fetchingLiquidTags} tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}>
         <CapRow typeof='flex' align='top' noWrap fullWidth>
           <CapRow type='flex' vertical fullWidth>
-          {traiDataRef.current && !isEmpty(traiDataRef.current) && !isRcsSmsFallback && (
-            <TraiEditTemplateDetails>
-              <CapLabelInline type="label1">
-                {formatMessage(messages.templateLabel)}
-              </CapLabelInline>
-              <CapLabelInline type="label2">
-                {get(traiDataRef.current, `versions.base.template_name`, '')}
-              </CapLabelInline>
-
-              <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>
-            </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={shouldShowPreview ? 16 : 24}>
-            <CapRow useLegacy>
-              <CapHeader
-                title={formatMessage(messages.traiEditTitle)}
-                size={isRcsSmsFallback ? 'label1' : 'regular'}
-                suffix={(
-                  <TagList
-                    label={formatMessage(messages.addLabels)}
-                    onTagSelect={onTagSelect}
-                    location={location}
-                    tags={tags || []}
-                    onContextChange={handleOnTagsContextChange}
-                    injectedTags={injectedTags || {}}
-                    channel={SMS}
-                    hidePopover={false}
-                    disabled={!isRcsSmsFallback && disablehandler()}
-                    selectedOfferDetails={selectedOfferDetails}
-                    eventContextTags={eventContextTags}
-                    popoverOverlayStyle={isRcsSmsFallback ? { zIndex: 10020 } : undefined}
-                    popoverOverlayClassName={isRcsSmsFallback ? 'sms-fallback-taglist-popover rcs-sms-fallback-taglist-popover' : undefined}
-                  />
-                )}
-              />
-            </CapRow>
-
-            {isRcsSmsFallback ? (
-              <>
-                {renderRcsFallbackMessage(fallbackText)}
-              </>
-            ) : (
-              <>
-                <CapRow useLegacy className="sms-trai-editor-segment-row">
-                  <div className="sms-trai-segmented-editor">
-                    {renderedContent()}
-                  </div>
-                </CapRow>
-                <CapRow useLegacy className="sms-trai-length-row">
-                  {smsLengthForVar()}
-                </CapRow>
-              </>
+            {traiData && !isEmpty(traiData) && (
+              <TraiEditTemplateDetails>
+                <CapLabelInline type="label1">
+                  {formatMessage(messages.templateLabel)}
+                </CapLabelInline>
+                <CapLabelInline type="label2">
+                  {get(traiData, `versions.base.template_name`, '')}
+                </CapLabelInline>
+
+                <CapLabelInline type="label1">
+                  {formatMessage(messages.traiEditSeperator)}
+                </CapLabelInline>
+
+                <CapLabelInline type="label1">
+                  {formatMessage(messages.senderIdlabel)}
+                </CapLabelInline>
+                <CapLabelInline type="label2">
+                  {[...get(traiData, `versions.base.header`, [])].join(', ')}
+                </CapLabelInline>
+              </TraiEditTemplateDetails>
             )}
-            {isRcsSmsFallback && isTagValidationError && (
+            <CapColumn span={24}>
               <CapRow useLegacy>
-                {tagValidationErrorMessage()}
+                <CapHeader
+                  title={formatMessage(messages.traiEditTitle)}
+                  size="regular"
+                  suffix={(
+                    <TagList
+                      label={formatMessage(messages.addLabels)}
+                      onTagSelect={onTagSelect}
+                      location={location}
+                      tags={tags || []}
+                      onContextChange={handleOnTagsContextChange}
+                      injectedTags={injectedTags || {}}
+                      hidePopover={disablehandler()}
+                      selectedOfferDetails={selectedOfferDetails}
+                      eventContextTags={eventContextTags}
+                      waitEventContextTags={waitEventContextTags}
+                    />
+                  )}
+                />
               </CapRow>
-            )}
-            {!isRcsSmsFallback && isTagValidationError && tagValidationErrorMessage()}
-            <CapCheckbox
-              onChange={unicodeHandler}
-              checked={isUnicodeAllowed}
-              disabled={
-                isRcsSmsFallback
-                  ? isRcsEditFlow
-                  : disablehandler()
-              }
-              style={{ marginTop: '1rem' }}
-            >
-              {formatMessage(messages.unicodeLabel)}
-            </CapCheckbox>
-            {showMsgLengthNote && <CapInfoNote message={<FormattedMessage {...messages.msgLengthNote} values={{ var: '{#var#}' }} />} />}
-            <div className="sms-trai-edit-bottom-spacer" />
-          </CapColumn>
+
+              <CapRow
+                useLegacy
+                style={{
+                  backgroundColor: CAP_G10,
+                  padding: CAP_SPACE_16,
+                }}
+              >
+                {renderedContent()}
+              </CapRow>
+              <CapRow useLegacy>
+                {smsLengthForVar()}
+              </CapRow>
+              <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()} style={{ marginTop: '1rem' }}>
+                {formatMessage(messages.unicodeLabel)}
+              </CapCheckbox>
+              {showMsgLengthNote && <CapInfoNote message={<FormattedMessage {...messages.msgLengthNote} values={{ var: '{#var#}' }} />} />}
+              <div style={{ marginBottom: '100px' }} />
+            </CapColumn>
           </CapRow>
-          {shouldShowPreview && 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>
         </CapRow>
         <SMSTraiFooter>
           {isLiquidValidationError && !liquidErrorPanelDismissed && (
@@ -1222,9 +723,8 @@ export const SmsTraiEdit = (props) => {
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
-            onClick={onDoneCallback}
+            onClick={onSubmitWrapper}
             className="create-msg"
-            disabled={isTagValidationError}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
@@ -1241,15 +741,6 @@ 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(),