@capillarytech/creatives-library 9.0.45 → 9.0.46

package/v2Containers/SmsTrai/Edit/index.js

@@ -19,11 +19,14 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import {
   CAP_SPACE_16,
   CAP_SPACE_12,
+  CAP_SPACE_08,
   CAP_SPACE_24,
   CAP_SPACE_32,
   CAP_SPACE_04,
@@ -51,6 +54,7 @@ import {
   FULL,
   ALL,
   LIBRARY,
+  HORIZONTAL_WHITESPACE_ONLY_REGEX,
 } from './constants';
 import v2EditSmsReducer from '../../Sms/Edit/reducer';
 import { v2SmsEditSagas } from '../../Sms/Edit/sagas';
@@ -68,6 +72,15 @@ import {
 } from '../../../utils/templateVarUtils';
 import VarSegmentMessageEditor from '../../../v2Components/VarSegmentMessageEditor';
 import rcsMessages from '../../Rcs/messages';
+import {
+  ANY_DLT_HASH_TOKEN_GLOBAL_REGEX,
+  ANY_DLT_HASH_TOKEN_PROBE_REGEX,
+  DLT_LEGACY_VAR_REGEX,
+  DLT_LEGACY_VAR_TOKEN,
+  isAnyDltVarToken,
+  getDltVarTypeMeta,
+  getDltVarCharLimit,
+} from './dltVarTypes';
 
 import './index.scss';
 
@@ -257,8 +270,8 @@ export const SmsTraiEdit = (props) => {
                 <span className="sms-trai-rcs-fallback-var-hint" style={dltVarSlotHintStyle}>
                   {formatMessage(messages.textAreaCounts, {
                     varCounts,
-                    var: SMS_TRAI_VAR,
-                    charCounts: varCounts * CHARLIMIT,
+                    var: dltSegmentToken,
+                    charCounts: varCounts * getDltVarCharLimit(dltSegmentToken, CHARLIMIT),
                   })}
                 </span>
               );
@@ -288,9 +301,13 @@ export const SmsTraiEdit = (props) => {
     }
 `;
   const TraiEditTemplateDetails = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: ${CAP_SPACE_08};
     margin-bottom: ${CAP_SPACE_16};
     .cap-label-span {
-      margin-right: ${CAP_SPACE_12};
+      margin-right: 0;
     }
   `;
 
@@ -415,18 +432,21 @@ export const SmsTraiEdit = (props) => {
     if (isRcsSmsFallback) return;
     traiDataRef.current = isFullMode ? templateDetails : templateData;
     if (traiDataRef.current && !isEmpty(traiDataRef.current)) {
-      let msg = get(traiDataRef.current, `versions.base.sms-editor`, '');
+      const msg = get(traiDataRef.current, `versions.base.sms-editor`, '') || '';
       const templateMessageArray = [];
-      while (msg.length !== 0) {
-        const index = msg.search(SMS_TRAI_VAR);
-        if (index !== -1) {
-          templateMessageArray.push(msg.substring(0, index));
-          templateMessageArray.push(SMS_TRAI_VAR);
-          msg = msg.substring(index + 7, msg.length);
-        } else {
-          templateMessageArray.push(msg);
-          break;
+      let cursor = 0;
+      ANY_DLT_HASH_TOKEN_GLOBAL_REGEX.lastIndex = 0;
+      let match = ANY_DLT_HASH_TOKEN_GLOBAL_REGEX.exec(msg);
+      while (match) {
+        if (match.index > cursor) {
+          templateMessageArray.push(msg.substring(cursor, match.index));
         }
+        templateMessageArray.push(match[0]);
+        cursor = match.index + match[0].length;
+        match = ANY_DLT_HASH_TOKEN_GLOBAL_REGEX.exec(msg);
+      }
+      if (cursor < msg.length) {
+        templateMessageArray.push(msg.substring(cursor));
       }
       const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
       updateTempMsgArray(filteredTemplateMessageArray);
@@ -488,16 +508,18 @@ export const SmsTraiEdit = (props) => {
         let varCount = 1;
         let horizontalSpaceCount = 0;
         for (let i = 0; i < tempMsgArray.length; i += 1) {
-          if (tempMsgArray[i] === SMS_TRAI_VAR) {
+          if (isAnyDltVarToken(tempMsgArray[i])) {
             const nextElem =
               tempMsgArray[i === tempMsgArray.length - 1 ? -1 : i + 1];
-            if (nextElem?.replace(/[^\S\r\n]/gm, '') === '') {
+            if (nextElem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') === '') {
               horizontalSpaceCount += 1;
             }
-            if (tempMsgArray[i] !== nextElem && nextElem?.replace(/[^\S\r\n]/gm, '') !== '') {
-              varMapRef.current[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
+            if (tempMsgArray[i] !== nextElem && nextElem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') !== '') {
+              const slotStartIndex = (i - varCount - horizontalSpaceCount) + 1;
+              varMapRef.current[`${SMS_TRAI_VAR}_${slotStartIndex}`] = {
                 data: '',
                 count: varCount,
+                token: tempMsgArray[slotStartIndex] || tempMsgArray[i],
               };
               varCount = 1;
               horizontalSpaceCount = 0;
@@ -567,7 +589,7 @@ export const SmsTraiEdit = (props) => {
     if (
       !isFullMode &&
       updatedSmsEditor?.length > 0 &&
-      !updatedSmsEditor.includes(SMS_TRAI_VAR)
+      !updatedSmsEditor.some(isAnyDltVarToken)
     ) {
       tagValidationResponseRef.current = runValidateTags(updatedSmsEditor.join(''));
       const missing = (tagValidationResponseRef.current.missingTags || []).length > 0;
@@ -600,7 +622,7 @@ export const SmsTraiEdit = (props) => {
         for (let i = _id; i < loopIndex; i += 1) {
           if (i === _id) {
             arr[i] = varMapRef.current[key].data; //data for first #var# of the textbox
-          } else if (arr[i] === SMS_TRAI_VAR) {
+          } else if (isAnyDltVarToken(arr[i])) {
             arr[i] = ''; //'' for remaining #var# of a textbox
           }
         }
@@ -698,7 +720,7 @@ export const SmsTraiEdit = (props) => {
     const editorJoined = Array.isArray(updatedSmsEditor)
       ? updatedSmsEditor.join('')
       : String(updatedSmsEditor || '');
-    if (!isRcsSmsFallback && editorJoined.includes(SMS_TRAI_VAR) && !isFullMode) {
+    if (!isRcsSmsFallback && ANY_DLT_HASH_TOKEN_PROBE_REGEX.test(editorJoined) && !isFullMode) {
       updateIsValidationError(true);
     } else {
       // Only show full-screen spinner when waiting on full-mode SMS edit API — not for RCS SMS fallback
@@ -807,7 +829,7 @@ export const SmsTraiEdit = (props) => {
       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;
       for (let i = textAreaId; i < loopIndex; i += 1) {
-        if (arr[i] === SMS_TRAI_VAR) {
+        if (isAnyDltVarToken(arr[i])) {
           arr[i] = '';
         }
       }
@@ -830,17 +852,18 @@ export const SmsTraiEdit = (props) => {
     const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
 
     varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data = value;
+    const slotToken = varMapRef.current[`${SMS_TRAI_VAR}_${_id}`]?.token || SMS_TRAI_VAR;
     if (value === '') {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id || arr[i] === '') {
-          arr[i] = SMS_TRAI_VAR;
+          arr[i] = slotToken;
         }
       }
     } else {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id) {
           arr[i] = varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data;
-        } else if (arr[i] === SMS_TRAI_VAR) {
+        } else if (isAnyDltVarToken(arr[i])) {
           arr[i] = '';
         }
       }
@@ -853,7 +876,7 @@ export const SmsTraiEdit = (props) => {
     if (idValue >= 0 && updatedSmsEditor) {
       if (
         updatedSmsEditor[idValue] &&
-        updatedSmsEditor[idValue] !== SMS_TRAI_VAR
+        !isAnyDltVarToken(updatedSmsEditor[idValue])
       ) {
         return updatedSmsEditor[idValue];
       }
@@ -862,62 +885,86 @@ export const SmsTraiEdit = (props) => {
     return '';
   };
 
-  const capHeading = (index, varCount) => {
-    if ((index, varCount)) {
-      return (
-        <CapHeading
-          key={`label${index}`}
-          type="h6"
-          style={{ margin: `${CAP_SPACE_04} 0`, float: 'right' }}
-        >
-          {formatMessage(messages.textAreaCounts, {
-            varCounts: varCount,
-            var: SMS_TRAI_VAR,
-            charCounts: varCount * CHARLIMIT,
-          })}
-        </CapHeading>
-      );
+  const getSlotDisplayMeta = (token) => {
+    const meta = getDltVarTypeMeta(token);
+    if (!meta) {
+      return {
+        placeholder: props.intl.formatMessage(messages.inputplaceHolderText),
+        charLimit: CHARLIMIT,
+      };
     }
-    return <></>;
+    return {
+      placeholder: formatMessage(messages[meta.placeholderKey]),
+      charLimit: meta.charLimit,
+    };
   };
 
+  const renderSlotCounter = (currentValue, charLimit) => (
+    <CapLabelInline type="label4" className="sms-trai-slot-counter">
+      {formatMessage(messages.slotCharCounter, {
+        current: (currentValue || '').length,
+        max: charLimit,
+      })}
+    </CapLabelInline>
+  );
+
   const renderedContent = () => {
     const renderArray = [];
     if (tempMsgArray?.length !== 0) {
       let varCount = 0;
+      let slotStartIndex = -1;
+      let slotToken = SMS_TRAI_VAR;
       tempMsgArray.forEach((elem, index) => {
         let prevElem = '';
         prevElem =
           tempMsgArray[[index === 0 ? -1 : index - 1]];
-        if (elem.includes(SMS_TRAI_VAR)) {
+        if (isAnyDltVarToken(elem)) {
+          if (varCount === 0) {
+            slotStartIndex = index;
+            slotToken = elem;
+          }
           varCount += 1;
-          if (prevElem !== SMS_TRAI_VAR && prevElem?.replace(/[^\S\r\n]/gm, '') !== '') {
+          if (!isAnyDltVarToken(prevElem) && prevElem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') !== '') {
+            const currentSlotToken = slotToken;
+            const currentSlotIndex = slotStartIndex;
+            const { placeholder, charLimit: baseLimit } = getSlotDisplayMeta(currentSlotToken);
+            const slotValue = textAreaValue(currentSlotIndex);
             renderArray.push(
-              <TextArea
-                id={index}
-                key={`${elem}${index}`}
-                placeholder={props.intl.formatMessage(
-                  messages.inputplaceHolderText,
-                )}
-                autosize={{ minRows: 1, maxRows: 3 }}
-                onChange={textAreaValueChange}
-                value={textAreaValue(index)}
-                onFocus={setTextAreaId}
-                errorMessage={
-                  isValidationError &&
-                  updatedSmsEditor[index] === SMS_TRAI_VAR &&
-                  formatMessage(messages.textAreaError)
-                }
-              />,
+              <CapRow
+                type="flex-column"
+                key={`slot_${currentSlotToken}_${index}`}
+                className="sms-trai-slot"
+              >
+                <CapRow type="flex" noWrap align="middle" className="sms-trai-slot__field">
+                  <CapColumn className="sms-trai-slot__chip">
+                    <CapLabel type="label3">{currentSlotToken}</CapLabel>
+                  </CapColumn>
+                  <CapColumn flex="auto" className="sms-trai-slot__input-wrap">
+                    <TextArea
+                      id={currentSlotIndex}
+                      placeholder={placeholder}
+                      autosize={{ minRows: 1, maxRows: 1 }}
+                      onChange={textAreaValueChange}
+                      value={slotValue}
+                      onFocus={setTextAreaId}
+                      errorMessage={
+                        isValidationError &&
+                        isAnyDltVarToken(updatedSmsEditor[currentSlotIndex]) &&
+                        formatMessage(messages.textAreaError)
+                      }
+                    />
+                  </CapColumn>
+                </CapRow>
+                {renderSlotCounter(slotValue, baseLimit * varCount)}
+              </CapRow>,
             );
           }
           if (index === tempMsgArray.length - 1) {
-            renderArray.push(capHeading(index, varCount));
             varCount = 0;
+            slotStartIndex = -1;
           }
-        } else if (varCount > 0 && elem.replace(/[^\S\r\n]/gm, '') !== '') {
+        } else if (varCount > 0 && elem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') !== '') {
           renderArray.push(
-            capHeading(index, varCount),
             <CapHeading
               key={`${elem}${index}`}
               style={{ margin: `${CAP_SPACE_16} 0`, clear: 'both' }}
@@ -926,7 +973,8 @@ export const SmsTraiEdit = (props) => {
             </CapHeading>,
           );
           varCount = 0;
-        } else if (elem.replace(/[^\S\r\n]/gm, '') !== '') {
+          slotStartIndex = -1;
+        } else if (elem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') !== '') {
           renderArray.push(
             <CapHeading
               key={`${elem}${index}`}
@@ -969,7 +1017,7 @@ export const SmsTraiEdit = (props) => {
       return;
     }
     const msgLenWithoutVar = tempMsgArray
-      ?.filter((i) => i !== SMS_TRAI_VAR)
+      ?.filter((i) => !isAnyDltVarToken(i))
       .join('');
     const varLen = calculateLenForTextBox();
     const totalMsgLen = msgLenWithoutVar?.length + varLen;
@@ -979,13 +1027,15 @@ 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) {
+      const slot = varMapRef.current[i];
+      const slotLimit = getDltVarCharLimit(slot.token, CHARLIMIT) * slot.count;
+      if (slot.data) {
+        countVarChar += slot.data?.length;
+        if (!showMsgLengthNote && slot.data?.length > slotLimit) {
           updateshowMsgLengthNote(true);
         }
       } else {
-        countVarChar += varMapRef.current[i].count * CHARLIMIT;
+        countVarChar += slotLimit;
       }
     });
     return countVarChar;
@@ -1014,12 +1064,8 @@ export const SmsTraiEdit = (props) => {
   const disablehandler = () => {
     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;
-      }
-      return false;
+      const msg = get(traiDataRef.current, `versions.base.sms-editor`, '') || '';
+      return !ANY_DLT_HASH_TOKEN_PROBE_REGEX.test(msg);
     }
     return true;
   };
@@ -1069,7 +1115,7 @@ export const SmsTraiEdit = (props) => {
   const shouldShowPreview =
     !isRcsSmsFallback || (showPreviewInRcsFallback && !hidePreview);
   const smsSidePreviewColumn = (
-    <CapColumn span={8} offset={0}>
+    <CapColumn span={6} offset={0}>
       <UnifiedPreview
         channel={SMS}
         content={updatedSmsEditor.join('')}
@@ -1097,25 +1143,35 @@ export const SmsTraiEdit = (props) => {
         <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>
+            <>
+              <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 className="sms-trai-sender-id-chip">
+                  <CapIcon
+                    type="closed-lock"
+                    size="s"
+                    className="sms-trai-sender-id-chip__lock"
+                  />
+                  <CapLabelInline type="label2">
+                    {[...get(traiDataRef.current, 'versions.base.header', [])].join(', ')}
+                  </CapLabelInline>
+                </CapLabelInline>
+                <CapLabelInline type="label1" className="sms-trai-sender-id-locked-note">
+                  {formatMessage(messages.senderIdLockedNote)}
+                </CapLabelInline>
+              </TraiEditTemplateDetails>
+            </>
           )}
           {isRcsSmsFallback &&
             traiDataRef.current &&
@@ -1137,14 +1193,68 @@ export const SmsTraiEdit = (props) => {
                   <CapLabelInline type="label1">
                     {formatMessage(messages.senderIdlabel)}
                   </CapLabelInline>
-                  <CapLabelInline type="label2">
-                    {[...get(traiDataRef.current, 'versions.base.header', [])].join(', ')}
+                  <CapLabelInline className="sms-trai-sender-id-chip">
+                    <CapIcon type="closed-lock" size="s" className="sms-trai-sender-id-chip__lock" />
+                    <CapLabelInline type="label2">
+                      {[...get(traiDataRef.current, 'versions.base.header', [])].join(', ')}
+                    </CapLabelInline>
+                  </CapLabelInline>
+                  <CapLabelInline type="label1" className="sms-trai-sender-id-locked-note">
+                    {formatMessage(messages.senderIdLockedNote)}
                   </CapLabelInline>
                 </>
               ) : null}
             </TraiEditTemplateDetails>
           )}
-          <CapColumn span={shouldShowPreview ? 16 : 24}>
+          {isRcsSmsFallback
+            && traiDltEnabled
+            && !isEmpty(traiDataRef.current)
+            && get(traiDataRef.current, 'versions.base.type', '')
+              ?.toLowerCase()
+              ?.includes('promo') && (
+            <CapInfoNote
+              type="clock-circle"
+              className="sms-trai-promotional-window-banner"
+              noteText={formatMessage(messages.promotionalWindowBanner)}
+            />
+          )}
+          {isRcsSmsFallback
+            && traiDltEnabled
+            && DLT_LEGACY_VAR_REGEX.test(
+              get(traiDataRef.current, 'versions.base.sms-editor', '') || '',
+            ) && (
+            <CapInfoNote
+              type="warning"
+              className="sms-trai-legacy-warning-banner"
+              noteText={formatMessage(messages.smsLegacyFormatWarning, {
+                legacyToken: DLT_LEGACY_VAR_TOKEN,
+              })}
+            />
+          )}
+          <CapColumn span={shouldShowPreview ? 18 : 24}>
+            {!isRcsSmsFallback
+              && !isEmpty(traiDataRef.current)
+              && get(traiDataRef.current, 'versions.base.type', '')
+                ?.toLowerCase()
+                ?.includes('promo') && (
+              <CapInfoNote
+                type="clock-circle"
+                className="sms-trai-promotional-window-banner"
+                noteText={formatMessage(messages.promotionalWindowBanner)}
+              />
+            )}
+            {!isRcsSmsFallback
+              && DLT_LEGACY_VAR_REGEX.test(
+                get(traiDataRef.current, 'versions.base.sms-editor', '') || '',
+              ) && (
+              <CapInfoNote
+                type="warning"
+                className="sms-trai-legacy-warning-banner"
+                noteText={formatMessage(messages.smsLegacyFormatWarning, {
+                  legacyToken: DLT_LEGACY_VAR_TOKEN,
+                })}
+              />
+            )}
             <CapRow useLegacy>
               <CapHeader
                 title={formatMessage(messages.traiEditTitle)}

package/v2Containers/SmsTrai/Edit/index.scss

@@ -107,7 +107,9 @@
 /* Non–RCS fallback: segmented editor shell + character count row (was inline styles on CapRow) */
 .sms-trai-editor-segment-row {
   background-color: $CAP_G10;
-  padding: $CAP_SPACE_16;
+  padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_16 $CAP_SPACE_24;
+  border-radius: 0.375rem;
+  margin-right: $CAP_SPACE_16;
 }
 
 .sms-trai-length-row {
@@ -124,3 +126,117 @@
 .sms-trai-edit-bottom-spacer {
   margin-bottom: 6.25rem;
 }
+
+.sms-trai-slot {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 $CAP_SPACE_16 0;
+}
+
+.sms-trai-slot__field {
+  display: flex;
+  align-items: stretch;
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.sms-trai-slot__chip {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4.5rem;
+  padding: 0 $CAP_SPACE_08;
+  background-color: $CAP_G10;
+  border-right: 1px solid $CAP_G07;
+  color: $FONT_COLOR_02;
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  white-space: nowrap;
+}
+
+.sms-trai-slot__input-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.sms-trai-slot__input-wrap .ant-input,
+.sms-trai-slot__input-wrap textarea.ant-input {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: $CAP_SPACE_08 $CAP_SPACE_12;
+  min-height: 2.5rem;
+  box-shadow: none;
+  overflow-x: auto;
+}
+
+.sms-trai-slot__input-wrap .ant-input::placeholder,
+.sms-trai-slot__input-wrap textarea.ant-input::placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sms-trai-slot__input-wrap .ant-input:focus,
+.sms-trai-slot__input-wrap .ant-input:active,
+.sms-trai-slot__input-wrap textarea.ant-input:focus,
+.sms-trai-slot__input-wrap textarea.ant-input:active {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.sms-trai-slot-counter {
+  align-self: flex-end;
+  margin-top: $CAP_SPACE_04;
+  color: $FONT_COLOR_02;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.sms-trai-sender-id-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: $CAP_SPACE_04;
+  padding: $CAP_SPACE_02 $CAP_SPACE_08;
+  border: 1px solid $CAP_G07;
+  border-radius: 0.25rem;
+  background-color: $CAP_G10;
+  line-height: 1.25rem;
+}
+
+.sms-trai-sender-id-chip__lock {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1;
+  color: $FONT_COLOR_02;
+}
+.sms-trai-sender-id-chip__lock svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.sms-trai-sender-id-locked-note {
+  margin-left: $CAP_SPACE_08;
+  color: $FONT_COLOR_02;
+  font-style: italic;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+.sms-trai-promotional-window-banner.ant-alert,
+.sms-trai-legacy-warning-banner.ant-alert {
+  margin: 0 $CAP_SPACE_16 $CAP_SPACE_16 0;
+
+  .ant-alert-title,
+  .ant-alert-title span {
+    font-weight: $FONT_WEIGHT_REGULAR;
+    white-space: normal;
+  }
+}

package/v2Containers/SmsTrai/Edit/messages.js

@@ -82,4 +82,44 @@ export default defineMessages({
     id: `${prefix}.incompleteOrInvalidTagsError`,
     defaultMessage: 'Incomplete or invalid tags. Please provide values for all variables (e.g. {{optout}}, {{fullname}}).',
   },
+  slotCharCounter: {
+    id: `${prefix}.slotCharCounter`,
+    defaultMessage: '{current}/{max}',
+  },
+  senderIdLockedNote: {
+    id: `${prefix}.senderIdLockedNote`,
+    defaultMessage: "— locked to this template, can't be overridden",
+  },
+  promotionalWindowBanner: {
+    id: `${prefix}.promotionalWindowBanner`,
+    defaultMessage: 'Promotional template — can only be delivered between 10:00 AM and 9:00 PM IST.',
+  },
+  smsLegacyFormatWarning: {
+    id: `${prefix}.smsLegacyFormatWarning`,
+    defaultMessage: "Uses old {legacyToken} placeholders — can't be used until re-registered with typed variables on the DLT portal.",
+  },
+  dltVarPlaceholderNumeric: {
+    id: `${prefix}.dltVarPlaceholderNumeric`,
+    defaultMessage: 'Digits 0–9 only. No letters, spaces, symbols or links.',
+  },
+  dltVarPlaceholderAlphanumeric: {
+    id: `${prefix}.dltVarPlaceholderAlphanumeric`,
+    defaultMessage: 'Letters & digits, common punctuation and spaces. No links, numbers as CTA, or email.',
+  },
+  dltVarPlaceholderUrl: {
+    id: `${prefix}.dltVarPlaceholderUrl`,
+    defaultMessage: 'A valid web link that matches a Call-To-Action (CTA) registered for this template.',
+  },
+  dltVarPlaceholderUrlott: {
+    id: `${prefix}.dltVarPlaceholderUrlott`,
+    defaultMessage: 'A valid app / OTT deep link that matches a registered CTA for this template.',
+  },
+  dltVarPlaceholderCbn: {
+    id: `${prefix}.dltVarPlaceholderCbn`,
+    defaultMessage: 'A valid phone number — digits with an optional +/country code. No free text.',
+  },
+  dltVarPlaceholderEmail: {
+    id: `${prefix}.dltVarPlaceholderEmail`,
+    defaultMessage: 'A valid email address in the form name@domain.tld.',
+  },
 });