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

package/v2Containers/SmsTrai/Edit/index.js

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