@capillarytech/creatives-library 9.0.56-alpha.6 → 9.0.56-alpha.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.56-alpha.6",
+  "version": "9.0.56-alpha.8",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -701,7 +701,7 @@ export const createCentralCommsMetaId = (payload, metaType = TRANSACTION) => {
   return request(url, getAPICallObject('POST', payload, false, false, false, true));
 };
 
-// CCS CommDefinition API, proxied through cap-creatives-api; used by CommunicationFlow's Save, while legacy messageMeta functions remain for CreativesContainer's save flow.
+// Use the CCS CommDefinition API for CommunicationFlow Save; keep legacy messageMeta APIs for CreativesContainer.
 const COMM_DEFINITIONS_PATH = `${API_ENDPOINT}/comm-definitions`;
 
 export const createCommDefinition = (payload) => {

package/utils/templateVarUtils.js

@@ -115,23 +115,7 @@ export const extractTemplateVariables = (templateStr = '', captureRegex) => {
   return variables;
 };
 
-/**
- * Reconciles a var-value map from an external source (e.g. a saved CommDefinition) into this
- * UI's own `${token}_${segmentIndex}` slot-key format used by the WhatsApp/RCS editors' own
- * text-merge logic.
- *
- * Two shapes are recognized:
- *  - Slot format: keys already look like `${token}_${index}` (contain an underscore) — used as-is.
- *  - CCS format: keys are plain sequential occurrence indices ("0", "1", ...), one per variable in
- *    template order — unrelated to this UI's own array-position indexing (which depends on how many
- *    plain-text segments fall between variables) — so it's remapped by walking `segments` in order
- *    and assigning the Nth variable occurrence to `rawVarMap[N]`.
- *
- * @param {Object} rawVarMap
- * @param {string[]} segments - text+var segments, e.g. from `splitContentByOrderedVarTokens`
- * @param {RegExp} regex - matches a variable token
- * @returns {Object} `${token}_${segmentIndex}` -> value
- */
+// Reconcile slot-format (`${token}_${index}`) and CCS-format (`"0"`, `"1"`, ...) var maps into the editor's `${token}_${segmentIndex}` slot-key format.
 export const reconcileVarMapToSlotFormat = (rawVarMap = {}, segments = [], regex) => {
   if (Object.keys(rawVarMap ?? {}).length === 0) return {};
   const isSlotFormat = Object.keys(rawVarMap).some((key) => key.includes('_'));

package/v2Components/CapActionButton/index.js

@@ -101,10 +101,12 @@ export const CapActionButton = (props) => {
   const onButtonTextChange = ({target}) => {
     const { value, id } = target;
     let errorMessage = '';
-    if (value.length > BTN_MAX_LENGTH) {
+    if (!value.trim()) {
+      errorMessage = formatMessage(messages.ctaButtonTextEmptyMessage);
+    } else if (!isValidText(value)) {
+      errorMessage = formatMessage(messages.ctaButtonTextErrorMessage);
+    } else if (value.length > BTN_MAX_LENGTH) {
       errorMessage = formatMessage(messages.ctaButtonTextLengthError, { maxLength: BTN_MAX_LENGTH });
-    } if (!isValidText(value)) {
-      errorMessage = formatMessage(messages.ctaButtonErrorMessage);
     }
     setButtonError(errorMessage);
     updateDisplayAndPostback(value, id);
@@ -446,12 +448,11 @@ export const CapActionButton = (props) => {
             gutter={9}
           >
             <CapColumn
-              span={1}
-              className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+              className={`rcs-saved-cta-cell ${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
               <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'open-in-new')} />
             </CapColumn>
-            <CapColumn span={6}>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-text-cell">
               <CapLabel
                 type="label2"
                 className="rcs-saved-cta-button-text"
@@ -459,64 +460,76 @@ export const CapActionButton = (props) => {
                 {text}
               </CapLabel>
             </CapColumn>
-            <CapColumn flex={1} className="rcs-saved-cta-value-column">
-              <div className="rcs-saved-cta-value-actions">
-                {ctaIsPhone && (
-                  <CapLabel className="phone">+{phoneNumber}</CapLabel>
-                )}
-                {!ctaIsPhone && !ctaIsReply && (
-                  <>
-                    <CapLabel className="url-type" type="label2">
-                      {(cta.urlType || RCS_CTA_URL_TYPE.STATIC) === RCS_CTA_URL_TYPE.DYNAMIC
-                        ? formatMessage(messages.ctaWebsiteTypeDynamic)
-                        : formatMessage(messages.ctaWebsiteTypeStatic)}
-                    </CapLabel>
-                    <CapTooltip title={url} placement="top">
-                      <CapLabel className="url">{url}</CapLabel>
-                    </CapTooltip>
-                  </>
-                )}
-                {isDynamicUrlSubtype && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <TagList
-                    className="rcs-cta-taglist"
-                    label={formatMessage(messages.ctaTagListLabel)}
-                    onTagSelect={(data) => onTagSelect(data, index, url)}
-                    location={location}
-                    tags={tags}
-                    injectedTags={injectedTags}
-                    selectedOfferDetails={selectedOfferDetails}
-                    onContextChange={onContextChange}
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-type-cell">
+              {!ctaIsPhone && !ctaIsReply && (
+                <CapLabel className="url-type" type="label2">
+                  {(cta.urlType || RCS_CTA_URL_TYPE.STATIC) === RCS_CTA_URL_TYPE.DYNAMIC
+                    ? formatMessage(messages.ctaWebsiteTypeDynamic)
+                    : formatMessage(messages.ctaWebsiteTypeStatic)}
+                </CapLabel>
+              )}
+            </CapColumn>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-url-cell">
+              {ctaIsPhone && (
+                <CapLabel className="phone">+{phoneNumber}</CapLabel>
+              )}
+              {!ctaIsPhone && !ctaIsReply && (
+                <CapTooltip
+                  title={url}
+                  placement="top"
+                  wrapperClassName="rcs-cta-url-tooltip-wrapper"
+                  triggerClassName="rcs-cta-url-tooltip-trigger"
+                >
+                  <CapLabel className="url">{url}</CapLabel>
+                </CapTooltip>
+              )}
+            </CapColumn>
+            <CapColumn className="rcs-saved-cta-cell rcs-saved-cta-actions-cell">
+              {isDynamicUrlSubtype && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                <TagList
+                  className="rcs-cta-taglist"
+                  label={formatMessage(messages.ctaTagListLabel)}
+                  onTagSelect={(data) => onTagSelect(data, index, url)}
+                  location={location}
+                  tags={tags}
+                  injectedTags={injectedTags}
+                  selectedOfferDetails={selectedOfferDetails}
+                  onContextChange={onContextChange}
+                />
+              )}
+              {isDynamicUrlSubtype && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
+                  <CapIcon
+                    size="s"
+                    type="return"
+                    className="rcs-cta-tag-revert"
+                    onClick={() => revertTagSelect(index, url)}
                   />
-                )}
-                {isDynamicUrlSubtype && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
-                  <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
-                    <CapIcon
-                      size="s"
-                      type="return"
-                      className="rcs-cta-tag-revert"
-                      onClick={() => revertTagSelect(index, url)}
-                    />
-                  </CapTooltip>
-                )}
-                {(isFullMode && !isEditFlow) && (
-                  <div className="rcs-saved-cta-action-icons">
+                </CapTooltip>
+              )}
+              {(isFullMode && !isEditFlow) && (
+                <CapRow
+                  className="rcs-saved-cta-action-icons"
+                  type="flex"
+                  align="middle"
+                  noWrap
+                >
+                  <CapIcon
+                    size="s"
+                    type="edit"
+                    className="rcs-saved-cta-edit-icon"
+                    onClick={() => editCta(index)}
+                  />
+                  {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
                     <CapIcon
                       size="s"
-                      type="edit"
-                      className="rcs-saved-cta-edit-icon"
-                      onClick={() => editCta(index)}
+                      type="delete"
+                      className="rcs-saved-cta-delete-icon"
+                      onClick={() => deleteButtonHandler(index)}
                     />
-                    {!(isHostIcs && index === 0) && !hideDeleteForSuggestionIndex(index) && !cannotDeleteSavedMandatory(index) && (
-                      <CapIcon
-                        size="s"
-                        type="delete"
-                        className="rcs-saved-cta-delete-icon"
-                        onClick={() => deleteButtonHandler(index)}
-                      />
-                    )}
-                  </div>
-                )}
-              </div>
+                  )}
+                </CapRow>
+              )}
             </CapColumn>
           </CapRow>
         );

package/v2Components/CapActionButton/index.scss

@@ -25,37 +25,51 @@
     margin-bottom: $CAP_SPACE_12;
     flex-wrap: nowrap;
 
-    // Icon/text columns keep a fixed span; this column takes whatever space
-    // is left (flex: 1, set via CapColumn's `flex` prop) instead of a fixed
-    // span that has to add up to exactly 24 alongside its siblings — with a
-    // fixed span, the gutter/margin between columns had nowhere to come from
-    // and pushed this column's content past the card's right border.
-    .rcs-saved-cta-value-column {
+    .rcs-saved-cta-cell {
+        display: flex;
+        align-items: center;
         min-width: 0;
+
+        // Cell children are flex items too — without this their own min-content
+        // (the full text/URL) makes the cell unshrinkable and pushes the row.
+        > * {
+            min-width: 0;
+        }
     }
 
-    // Value text and edit/delete icons share one flex row, right-aligned as a
-    // unit — keeps the value flush against the icons regardless of its length,
-    // instead of the old fixed-span column + absolutely-positioned icon combo
-    // (which drifted out of alignment with variable-length URLs/numbers).
-    .rcs-saved-cta-value-actions {
-        display: flex;
-        align-items: center;
+    // Fixed basis for the 20-char button text cap.
+    .rcs-saved-cta-text-cell {
+        flex: 0 1 10rem;
+    }
+
+    // Fixed, not auto: "Static" is narrower than "Dynamic", which left the URL
+    // starting at a different x per row.
+    .rcs-saved-cta-type-cell {
+        flex: 0 1 4rem;
+    }
+
+    .rcs-saved-cta-url-cell {
+        flex: 1 1 0;
+    }
+
+    .rcs-saved-cta-actions-cell {
+        flex: 0 0 auto;
         justify-content: flex-end;
         gap: $CAP_SPACE_08;
-        width: 100%;
-        min-width: 0;
+    }
 
-        .url-type {
-            flex-shrink: 0;
-        }
+    // CapTooltip nests `.url` two levels down, so these — not `.url` — are the
+    // boxes that must be allowed to shrink for the ellipsis to apply.
+    .rcs-cta-url-tooltip-wrapper {
+        flex: 1 1 0;
+        min-width: 0;
+    }
 
-        .url, .phone {
-            min-width: 0;
-        }
+    .rcs-cta-url-tooltip-trigger {
+        min-width: 0;
     }
 
-    .url {
+    .url, .rcs-saved-cta-button-text, .url-type {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -69,10 +83,6 @@
         word-break: break-word;
     }
 
-    .saved-button-text {
-        font-weight: 500;
-    }
-
     .rcs-saved-cta-action-icons {
         display: flex;
         align-items: center;
@@ -85,8 +95,6 @@
         cursor: pointer;
     }
 
-    // Dynamic-URL tag controls: keep them from stretching the flex row's
-    // height/width — same treatment as the edit/delete icons above.
     .rcs-cta-tag-revert {
         display: flex;
         align-items: center;
@@ -95,7 +103,15 @@
     }
 
     .rcs-cta-taglist {
+        display: flex;
+        align-items: center;
         flex-shrink: 0;
+
+        // CapTagList floats this trigger right, taking it out of flow, which
+        // let it paint over the edit icon instead of occupying real width.
+        .tooltip-add-label-container {
+            float: none;
+        }
     }
 }
 

package/v2Components/CapActionButton/messages.js

@@ -83,9 +83,13 @@ export default defineMessages({
     id: `${prefix}.comingSoonTooltip`,
     defaultMessage: 'Right now only one Call to action button is enabled, in future you would be able to add upto 3 buttons.',
   },
-  ctaButtonErrorMessage: {
-    id: `${prefix}.ctaButtonErrorMessage`,
-    defaultMessage: 'Button text cannot be empty',
+  ctaButtonTextEmptyMessage: {
+    id: `${prefix}.ctaButtonTextEmptyMessage`,
+    defaultMessage: 'Button text cannot be empty or contain only whitespace',
+  },
+  ctaButtonTextErrorMessage: {
+    id: `${prefix}.ctaButtonTextErrorMessage`,
+    defaultMessage: 'Newlines, Emojis, or Special characters are not allowed',
   },
   ctaButtonTextLengthError: {
     id: `${prefix}.ctaButtonTextLengthError`,

package/v2Components/CapActionButton/tests/index.test.js

@@ -521,7 +521,23 @@ describe('CapActionButton', () => {
     initializeComponent([initial]);
     const buttontextInput = screen.getByPlaceholderText('Enter button text');
     fireEvent.change(buttontextInput, { target: { value: '&*^', id: 0 } });
-    expect(screen.getByText(/button text cannot be empty/i)).toBeInTheDocument();
+    expect(screen.getByText(/special characters are not allowed/i)).toBeInTheDocument();
+  });
+
+  it('should show empty error for whitespace-only button text (onButtonTextChange)', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.QUICK_REPLY,
+      text: 'Shop',
+      phoneNumber: '',
+      url: '',
+      postback: 'Shop',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    const buttontextInput = screen.getByPlaceholderText('Enter button text');
+    fireEvent.change(buttontextInput, { target: { value: '   ', id: 0 } });
+    expect(screen.getByText(/cannot be empty or contain only whitespace/i)).toBeInTheDocument();
   });
 
   it('should show error for invalid url (onUrlChange)', () => {

package/v2Components/CapWhatsappCTA/messages.js

@@ -57,6 +57,10 @@ export default defineMessages({
     id: `${prefix}.ctaButtonErrorMessage`,
     defaultMessage: "Newlines, Emojis, or Special characters are not allowed",
   },
+  ctaButtonTextEmptyMessage: {
+    id: `${prefix}.ctaButtonTextEmptyMessage`,
+    defaultMessage: 'Button text cannot be empty or contain only whitespace',
+  },
   addButton: {
     id: `${prefix}.addButton`,
     defaultMessage: 'Add button',

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -126,7 +126,9 @@ export const CapWhatsappCarouselButton = (props) => {
 
   const onButtonTextChange = (value, buttonIndex) => {
     let errorMessage = '';
-    if (!isValidWhatsappCtaText(value)) {
+    if (!value.trim()) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonTextEmptyMessage);
+    } else if (!isValidWhatsappCtaText(value)) {
       errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonErrorMessage);
     }
     onValueChange(buttonIndex, [{fieldName: 'text', value}, {fieldName: 'textError', value: errorMessage}]);
@@ -333,12 +335,11 @@ export const CapWhatsappCarouselButton = (props) => {
               noWrap
             >
               <CapColumn
-                span={1}
-                className={`${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+                className={`whatsapp-saved-cta-cell ${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
               >
                 <CapIcon size="s" type={isPhoneNumberType ? 'call' : isURLtype ? 'launch' : 'six-dots'} />
               </CapColumn>
-              <CapColumn span={6}>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-text-cell">
                 <CapLabel
                   type="label2"
                   className="whatsapp-saved-cta-button-text"
@@ -346,39 +347,47 @@ export const CapWhatsappCarouselButton = (props) => {
                   {button?.text}
                 </CapLabel>
               </CapColumn>
-              {isPhoneNumberType && (
-                <CapColumn span={10} align="left">
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-type-cell">
+                {isURLtype && (
+                  <CapLabel className="url-type" type="label2">
+                    {button?.urlType === STATIC_URL
+                      ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
+                      : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
+                  </CapLabel>
+                )}
+              </CapColumn>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-url-cell whatsapp-url-preview-wrapper">
+                {isPhoneNumberType && (
                   <CapLabel className="phone">
                     {button?.phone_number}
                   </CapLabel>
-                </CapColumn>
-              )}
-              {isURLtype && (
-                <CapRow type="flex" align="middle">
-                  <CapRow type="flex" align="middle" justify="start">
-                    <CapLabel className="url-type" type="label2">
-                      {button?.urlType === STATIC_URL
-                        ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
-                        : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
-                    </CapLabel>
-                  </CapRow>
-                  <CapRow type='flex' className="whatsapp-url-preview-wrapper">
-                    <CapTooltip title={button?.url} placement="top">
-                      <CapColumn span={16} className="margin-r-0">
-                        <CapLabel className="url">{button?.url}</CapLabel>
-                      </CapColumn>
-                    </CapTooltip>
+                )}
+                {isURLtype && (
+                  <CapTooltip
+                    title={button?.url}
+                    placement="top"
+                    wrapperClassName="whatsapp-cta-url-tooltip-wrapper"
+                    triggerClassName="whatsapp-cta-url-tooltip-trigger"
+                  >
+                    <CapLabel className="url">{button?.url}</CapLabel>
+                  </CapTooltip>
+                )}
+              </CapColumn>
+              <CapColumn className="whatsapp-saved-cta-cell whatsapp-saved-cta-actions-cell">
+                {!isEditFlow && (
+                  <CapRow
+                    className="whatsapp-saved-cta-action-icons"
+                    type="flex"
+                    align="middle"
+                    noWrap
+                  >
+                    <CapIcon size="s" type="edit" onClick={() => handleEditButton(index)}/>
+                    {parseInt(carouselIndex, 10) === 0 && (
+                      <CapIcon size="s" type="delete" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}/>
+                    )}
                   </CapRow>
-                </CapRow>
-              )}
-              {!isEditFlow && (
-                <CapRow type='flex' align='middle' justify="end" gap={12} fillSpace>
-                  <CapIcon size="s" type="edit" onClick={() => handleEditButton(index)}/>
-                  {parseInt(carouselIndex, 10) === 0 && (
-                    <CapIcon size="s" type="delete" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}/>
-                  )}
-                </CapRow>
-              )}
+                )}
+              </CapColumn>
               {isEditFlow && button?.urlType === DYNAMIC_URL && button?.url.includes('{{1}}') && (
                 <CapColumn>
                   <TagList

package/v2Components/CapWhatsappCarouselButton/index.scss

@@ -37,7 +37,49 @@
     height: auto;
   }
 
-  .whatsapp-url-preview-wrapper {
-    max-width: 5.714rem;
+  .whatsapp-saved-cta-cell {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    > * {
+      min-width: 0;
+    }
+  }
+
+  .whatsapp-saved-cta-text-cell {
+    flex: 0 1 10rem;
+  }
+
+  .whatsapp-saved-cta-type-cell {
+    flex: 0 1 5.5rem;
+  }
+
+  .whatsapp-saved-cta-url-cell {
+    flex: 1 1 0;
+  }
+
+  .whatsapp-saved-cta-actions-cell {
+    flex: 0 0 4rem;
+    justify-content: flex-end;
+  }
+
+  .whatsapp-saved-cta-action-icons {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: $CAP_SPACE_12;
+  }
+
+  // CapTooltip nests `.url` two levels down, so these — not `.url` — are the
+  // boxes that must be allowed to shrink for the ellipsis to apply.
+  .whatsapp-cta-url-tooltip-wrapper {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .whatsapp-cta-url-tooltip-trigger {
+    width: 100%;
+    min-width: 0;
   }
 }

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -140,8 +140,7 @@ const UnifiedPreview = ({
       }
 
       case CHANNELS.LINE:
-        // LINE carries a single plain-text message today, so it reuses the SMS chat-bubble
-        // preview. Rich types (image/video/sticker/imageMap/carousel/flex) aren't rendered yet.
+        // LINE currently supports plain text only, so reuse the SMS bubble preview; rich message types are not rendered yet.
         return (
           <SmsPreviewContent
             content={typeof content === 'string' ? content : (content?.resolvedBody || '')}

package/v2Components/CommonTestAndPreview/index.js

@@ -209,7 +209,7 @@ const CommonTestAndPreview = (props) => {
     wecrmAccounts = [],
     isLoadingSenderDetails = false,
     orgUnitId = -1,
-    // notify/ui only: { commDefinitionId, referenceId } — routes "Send test" to CCS's send/transaction endpoint.
+    // notify/ui only:{commDefinitionId, referenceId} routes "Send test" to CCS's send/transaction endpoint.
     ccsSendTransaction,
     // Email-specific props
     beeInstance,
@@ -3624,14 +3624,11 @@ const CommonTestAndPreview = (props) => {
       setIsCustomerDataLoading(false);
     }
   };
-  
+
   /**
    * Handle send test message
    */
-  // notify/ui: send the test through CCS's own send/transaction endpoint against the alert's
-  // real CommDefinition, instead of the legacy createMessageMeta/sendTestMessage flow below.
-  // Dispatched via the same action/saga pattern as every other API call in this component,
-  // rather than calling Api.sendTransactionalComm directly.
+  // notify/ui sends tests via CCS's CommDefinition send/transaction endpoint using the standard action/saga flow, not the legacy messageMeta flow.
   const handleCcsSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -221,6 +221,10 @@ const CommunicationFlow = ({
               singleChannelStrategy,
             })
             : await createCommDefinition(payload);
+          if (res?.isError) {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
+          }
           if (isDuplicateReferenceIdError(res)) {
             setSaveError(formatMessage(messages.duplicateReferenceIdError));
             return;
@@ -234,6 +238,9 @@ const CommunicationFlow = ({
                 version: data.version?.version ?? data.version ?? 1,
                 status: data.status,
               };
+            } else {
+              setSaveError(formatMessage(messages.genericSaveError));
+              return;
             }
           } else if (data?.id) {
             ccsCommDefinition = {
@@ -242,9 +249,14 @@ const CommunicationFlow = ({
               version: data.version?.version ?? 1,
               status: data.status,
             };
+          } else {
+            setSaveError(formatMessage(messages.genericSaveError));
+            return;
           }
         } catch (error) {
           console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
+          setSaveError(formatMessage(messages.genericSaveError));
+          return;
         }
       } else if (!name) {
         console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — config.context.name is required');

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -128,16 +128,7 @@
 }
 
 .communication-flow-container {
-  // Anchors the Save footer to the bottom of the slidebox's scrollable content
-  // area regardless of how much step content is above it. <CapRow useLegacy>
-  // carries cap-ui-library's `.ant-row-legacy` rule (`display: block !important`),
-  // which silently defeats a plain `display:flex`/`min-height` here unless the
-  // selector is compounded with `.ant-row-legacy` and marked `!important` too.
-  // Deliberately position-based, not flex + margin-top: auto — a flex version
-  // makes this element (and its .ant-row-legacy children) a flex container, and
-  // flexbox's default align-items: stretch leaks into deeply nested descendants
-  // (e.g. ChannelSelectionStep's fixed-width empty-state card), stretching them
-  // to fill the container instead of keeping their own size.
+  // Anchor the Save footer to the bottom without flex, avoiding .ant-row-legacy overrides and flexbox stretching nested fixed-size content.
   &.ant-row-legacy {
     position: relative !important;
     min-height: calc(100vh - 6.571rem) !important;
@@ -148,10 +139,7 @@
     margin: $CAP_SPACE_32 0;
   }
 
-  // CommunicationStrategyStep's own trailing divider is hidden until content
-  // exists (no dangling line above an empty "Add creative" state), but the gap
-  // it would have provided (.step-divider's margin) must stay — otherwise the
-  // section sits flush against the Channel card in the empty state.
+  // Hide the divider when empty but preserve its margin gap so the section doesn’t sit flush against the Channel card.
   .communication-strategy-row--no-divider {
     margin-bottom: $CAP_SPACE_32;
   }