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

package/package.json

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

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/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -6,7 +6,7 @@
  * - Configured state: shows a two-column CapCard with pen icon, channel preview (left), dynamic controls (right)
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import { CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -82,6 +82,14 @@ const CommunicationFlowCard = ({
   const [showSlideBox, setShowSlideBox] = useState(false);
   const [savedData, setSavedData] = useState(initialData || null);
 
+  // On a hard reload of an edit page, initialData is available but savedData is not yet set.
+  // This effect ensures that savedData is initialized from initialData in that case.
+  useEffect(() => {
+    if (initialData && !savedData) {
+      setSavedData(initialData);
+    }
+  }, [initialData]);
+
   const handleSave = useCallback((data) => {
     setSavedData(data);
     setShowSlideBox(false);

package/v2Containers/CommunicationFlow/Tests/CommunicationFlowCard.test.js

@@ -652,4 +652,62 @@ describe('CommunicationFlowCard', () => {
       expect(screen.getByText('Message:')).toBeInTheDocument();
     });
   });
+
+  describe('async initialData (edit page hard reload)', () => {
+    // On a hard reload of an edit page, the consumer's own by-id fetch hasn't
+    // resolved at first mount, so initialData starts as null and arrives a
+    // render or two later. savedData must pick it up then, not just at mount.
+    it('shows the summary card once initialData arrives after mount, instead of staying stuck on the empty "Add creatives" state', () => {
+      const { rerender } = render(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={null}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getByText('Add creatives')).toBeInTheDocument();
+
+      rerender(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={makeSavedData()}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+      expect(screen.queryByText('Add creatives')).not.toBeInTheDocument();
+    });
+
+    it('does not clobber content the user already saved locally when a later render passes a different initialData', () => {
+      const { rerender } = renderCard({ initialData: null });
+      fireEvent.click(screen.getByText('Add creatives'));
+      fireEvent.click(screen.getByTestId('flow-save'));
+      expect(screen.getByText('Message:')).toBeInTheDocument();
+
+      rerender(
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <CommunicationFlowCard
+            config={baseConfig}
+            initialData={makeSavedData({ contentItems: [{ channel: 'EMAIL', templateData: {} }] })}
+            onSave={jest.fn()}
+            onCancel={jest.fn()}
+            onChange={jest.fn()}
+            cap={{}}
+          />
+        </IntlProvider>,
+      );
+      // Locally-saved SMS content must survive; the later initialData prop must not overwrite it.
+      expect(screen.getByText('SMS')).toBeInTheDocument();
+    });
+  });
 });

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -251,6 +251,7 @@ const ChannelSelectionStep = ({
   };
 
   const handleChannelsVisibleChange = (visible) => {
+    if (visible && renderChannelDropdownOverlay() === null) return;
     setShowChannelsMenu(visible);
   };
 
@@ -438,6 +439,7 @@ const ChannelSelectionStep = ({
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
                 onVisibleChange={handleChannelsVisibleChange}
                 visible={showChannelsMenu}
+                trigger={['click']}
               >
                 <CapButton
                   isAddBtn
@@ -482,6 +484,7 @@ const ChannelSelectionStep = ({
               deliverySetting={value?.deliverySetting}
               onDeliverySettingChange={(deliverySetting) => onChange({ deliverySetting })}
               onDomainPropertiesLoaded={setDomainPropertiesData}
+              orgUnitId={config?.context?.ouId}
               intl={intl}
             />
           )}