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

package/v2Components/CapActionButton/messages.js

@@ -12,7 +12,7 @@ export default defineMessages({
   },
   ctaQr: {
     id: `${prefix}.ctaQr`,
-    defaultMessage: 'Quick Reply',
+    defaultMessage: 'Quick reply',
   },
   ctaPhoneNo: {
     id: `${prefix}.ctaPhoneNo`,
@@ -47,9 +47,17 @@ export default defineMessages({
     id: `${prefix}.templateMessageLength`,
     defaultMessage: 'Characters count: {currentLength}/{maxLength}',
   },
+  ctaFieldCharCountInline: {
+    id: `${prefix}.ctaFieldCharCountInline`,
+    defaultMessage: '{current}/{max}',
+  },
   ctaType: {
     id: `${prefix}.ctaType`,
-    defaultMessage: 'Type of action',
+    defaultMessage: 'Button type',
+  },
+  ctaUrlRadio: {
+    id: `${prefix}.ctaUrlRadio`,
+    defaultMessage: 'URL',
   },
   templateButtonTextPlaceholder: {
     id: `${prefix}.templateButtonTextPlaceholder`,
@@ -145,7 +153,15 @@ export default defineMessages({
   },
   ctaWebsiteType: {
     id: `${prefix}.ctaWebsiteType`,
-    defaultMessage: 'URL Type',
+    defaultMessage: 'URL type',
+  },
+  ctaUrlField: {
+    id: `${prefix}.ctaUrlField`,
+    defaultMessage: 'URL',
+  },
+  ctaEnterUrlPlaceholder: {
+    id: `${prefix}.ctaEnterUrlPlaceholder`,
+    defaultMessage: 'Enter URL',
   },
   ctaWebsiteTypeStatic: {
     id: `${prefix}.ctaWebsiteTypeStatic`,

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

@@ -5,7 +5,7 @@ import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { waitFor } from '@testing-library/react';
 import { CapActionButton } from '../index';
 import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
-import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
+import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
@@ -13,6 +13,7 @@ const initializeComponent = (
   data,
   isEditFlow = false,
   maxButtons = 3,
+  host = '',
 ) => {
   // Normalize legacy test data shape to match component props
   const normalizeType = (legacyType) => {
@@ -38,6 +39,7 @@ const initializeComponent = (
       isEditFlow={isEditFlow}
       maxButtons={maxButtons}
       isFullMode={true}
+      host={host}
     />,
   );
 };
@@ -60,7 +62,7 @@ describe('CapActionButton', () => {
         isSaved: false,
       },
     ]);
-    expect(screen.getByText('Type of action')).toBeInTheDocument();
+    expect(screen.getByText('Button type')).toBeInTheDocument();
     expect(screen.getByText('Button text')).toBeInTheDocument();
     expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
@@ -123,7 +125,7 @@ describe('CapActionButton', () => {
         id: 1,
       },
     };
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, urlEvent);
     expect(updateHandler).toHaveBeenCalledWith(
       {
@@ -163,6 +165,27 @@ describe('CapActionButton', () => {
     );
   });
 
+  it('should show delete for quick reply index 0 for non-ICS hosts but hide it for ICS (stop button)', () => {
+    const button = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.QUICK_REPLY,
+      text: 'Reply',
+      phoneNumber: '',
+      url: '',
+      postback: 'Reply',
+      isSaved: false,
+    };
+
+    // Non-ICS (Infobip/others): delete should be available
+    const { unmount } = initializeComponent([button], false, 3, 'rcsinfobipbulk');
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    unmount();
+
+    // ICS: index 0 is reserved; delete should be hidden
+    initializeComponent([button], false, 3, HOST_ICS);
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+  });
+
   it('should respect character length limits', async () => {
     const initialData = {
       index: 0,
@@ -201,7 +224,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initialData]);
-    const urlInput = await screen.getByPlaceholderText('Enter website URL');
+    const urlInput = await screen.getByPlaceholderText('Enter URL');
     const longUrl = 'https://example.com/' + 'a'.repeat(URL_MAX_LENGTH + 1);
     fireEvent.change(urlInput, { target: { value: longUrl, id: 0 } });
     expect(urlInput.value.length).toBeLessThanOrEqual(URL_MAX_LENGTH);
@@ -248,7 +271,8 @@ describe('CapActionButton', () => {
       { index: 0, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'stop', phoneNumber: '', url: '', postback: 'stop', isSaved: true },
       { index: 1, ctaType: RCS_BUTTON_TYPES.QUICK_REPLY, displayText: 'Saved', phoneNumber: '', url: '', postback: 'Saved', isSaved: true },
     ];
-    const { container } = initializeComponent(suggestions);
+    // Use ICS host so index 0 (STOP) stays non-deletable and we only get delete icon for index 1
+    const { container } = initializeComponent(suggestions, false, 3, HOST_ICS);
     const deleteIcons = container.querySelectorAll('.rcs-saved-cta-delete-icon');
     expect(deleteIcons.length).toBeGreaterThan(0);
     fireEvent.click(deleteIcons[0]);
@@ -306,7 +330,8 @@ describe('CapActionButton', () => {
       postback: 'stop',
       isSaved: true,
     };
-    const { container } = initializeComponent([stopButton]);
+    // Only ICS treats index 0 as a mandatory STOP quick reply
+    const { container } = initializeComponent([stopButton], false, 3, HOST_ICS);
     expect(container.querySelector('.rcs-saved-cta-delete-icon')).not.toBeInTheDocument();
   });
 
@@ -427,7 +452,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([button]);
-    expect(screen.getByPlaceholderText(/enter website url/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/enter url/i)).toBeInTheDocument();
   });
 
   it('should update both displayText and postback when button text changes (updateDisplayAndPostback)', () => {
@@ -507,7 +532,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    const urlInput = screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, { target: { value: 'http://localhost:3030/creatives/ui/v2', id: 1 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
   });
@@ -607,12 +632,12 @@ describe('CapActionButton', () => {
       );
     };
     render(<StatefulWrapper />);
-    let urlInput = screen.getByPlaceholderText('Enter website URL');
+    let urlInput = screen.getByPlaceholderText('Enter URL');
     // Enter invalid URL
     fireEvent.change(urlInput, { target: { value: 'badurl', id: 0 } });
     expect(await screen.findByText(/url is not valid/i)).toBeInTheDocument();
     // Re-grab input after re-render and enter valid URL
-    urlInput = screen.getByPlaceholderText('Enter website URL');
+    urlInput = screen.getByPlaceholderText('Enter URL');
     fireEvent.change(urlInput, { target: { value: 'https://good.com', id: 0 } });
     await waitFor(() => expect(screen.queryByText(/url is not valid/i)).not.toBeInTheDocument());
   });
@@ -867,15 +892,14 @@ describe('CapActionButton function logic', () => {
     expect(renderCtaOptions(label, tooltipLabel, false)).toBe('Test');
   });
 
-  it('renderLength returns correct CapHeading', () => {
-    const CapHeading = ({ type, className, children }) => <div className={className}>{children}</div>;
-    const formatMessage = (msg, values) => `${values.currentLength}/${values.maxLength}`;
-    const renderLength = (len, max) => (
-      <CapHeading type="label1" className="rcs-render-btn-length">
-        {formatMessage({}, { currentLength: len, maxLength: max })}
-      </CapHeading>
+  it('inner char count uses current/max format', () => {
+    const formatMessage = (msg, values) => `${values.current}/${values.max}`;
+    const renderInnerCharCount = (len, max) => (
+      <span className="rcs-cta-inner-char-count">
+        {formatMessage({}, { current: len, max })}
+      </span>
     );
-    const result = renderLength(5, 25);
+    const result = renderInnerCharCount(5, 25);
     expect(result.props.children).toBe('5/25');
   });
 });

package/v2Components/CapImageUpload/index.js

@@ -5,7 +5,7 @@
 *
 */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
@@ -92,7 +92,7 @@ function CapImageUpload(props) {
     [imageSrc],
   );
 
-  const WithLabel = LabelHOC(ImageComponent);
+  const WithLabel = useMemo(() => LabelHOC(ImageComponent), [ImageComponent]);
 
   const uploadImages = useCallback((e, { files }) => {
     if (e) {

package/v2Components/CapTagList/index.js

@@ -346,6 +346,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     const {
       hidePopover = false, intl = {}, moduleFilterEnabled, label, modalProps, channel, fetchingSchemaError = false,
+      overlayStyle,
+      overlayClassName,
+      getPopupContainer,
     } = this.props;
     const {formatMessage} = intl;
     const {
@@ -439,6 +442,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             classNames={{
               container: 'tag-list-popover-container'
             }}
+            overlayStyle={overlayStyle}
+            overlayClassName={overlayClassName}
+            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
@@ -510,6 +516,10 @@ CapTagList.propTypes = {
   disableTooltipMsg: PropTypes.string,
   fetchingSchemaError: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  overlayClassName: PropTypes.string,
+  /** e.g. () => document.body — avoids overflow/stacking issues inside slideboxes */
+  getPopupContainer: PropTypes.func,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -8,6 +8,8 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import messages from './messages';
+import { CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY } from './constants';
+import { getPersonalizationTagColumnLabel } from './utils';
 
 const CustomValuesEditor = ({
   isExtractingTags,
@@ -16,9 +18,7 @@ const CustomValuesEditor = ({
   setShowJSON,
   customValues,
   handleJSONTextChange,
-  extractedTags,
-  requiredTags,
-  optionalTags,
+  sections,
   handleCustomValueChange,
   handleDiscardCustomValues,
   handleUpdatePreview,
@@ -77,51 +77,70 @@ const CustomValuesEditor = ({
         </CapRow>
       ) : (
         <>
-          {extractedTags?.length > 0 && (
-            <CapRow className="values-table">
-              <CapRow className="table-header" align='middle' justify='space-between'>
-                <CapLabel type="label31" className="header-cell">
-                  <FormattedMessage {...messages.personalizationTags} />
+          {(sections || []).filter((tagsSection) =>
+            (tagsSection?.requiredTags?.length || 0) + (tagsSection?.optionalTags?.length || 0) > 0).map((section) => (
+            <React.Fragment key={section.key || section.title?.id || section.title || CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY}>
+              {section.title ? (
+                <CapLabel type="label2" className="tags-section-title">
+                  {typeof section.title === 'string' ? section.title : <FormattedMessage {...section.title} />}
                 </CapLabel>
-                <CapLabel type="label31" className="header-cell">
-                  <FormattedMessage {...messages.customValues} />
-                </CapLabel>
-              </CapRow>
-              {requiredTags.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row" align='middle' justify='start'>
-                  <CapRow className="tag-name" align='top' justify='start'>
-                    {`${tag.fullPath}*`}
-                  </CapRow>
-                  <CapRow className="tag-input">
-                    <CapInput
-                      type="text"
-                      isRequired
-                      className="tag-input-field"
-                      value={customValues[tag.fullPath] || ''}
-                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
-                      placeholder={formatMessage(messages.enterValue)}
-                      size="small"
-                    />
-                  </CapRow>
+              ) : null}
+              <CapRow className="values-table">
+                <CapRow type="flex" className="table-header">
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.personalizationTags} />
+                  </CapLabel>
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.customValues} />
+                  </CapLabel>
                 </CapRow>
-              ))}
-              {optionalTags?.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row" align='middle' justify='start'>
-                  <CapRow className="tag-name" justify='start'>{tag.fullPath}</CapRow>
-                  <CapRow className="tag-input">
-                    <CapInput
-                      type="text"
-                      className="tag-input-field"
-                      value={customValues[tag.fullPath] || ''}
-                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
-                      placeholder={formatMessage(messages.enterValue)}
-                      size="small"
-                    />
+                {(section?.requiredTags || []).map((tag, tagIndex) => {
+                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
+                  const tagKey = tag?.fullPath ?? `required-${tagIndex}`;
+                  return (
+                  <CapRow key={tagKey} type="flex" noWrap className="value-row">
+                    <CapRow type="flex" className="tag-name">
+                      {personalizationTagColumnText}
+                      <span className="required-tag-indicator" aria-hidden="true">*</span>
+                    </CapRow>
+                    <CapRow type="flex" className="tag-input">
+                      <CapInput
+                        type="text"
+                        isRequired
+                        className="tag-input-field"
+                        value={customValues?.[tagKey] ?? ''}
+                        onChange={(e) => handleCustomValueChange(tagKey, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
                   </CapRow>
-                </CapRow>
-              ))}
-            </CapRow>
-          )}
+                  );
+                })}
+                {(section?.optionalTags || []).map((tag, tagIndex) => {
+                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
+                  const tagKey = tag?.fullPath ?? `optional-${tagIndex}`;
+                  return (
+                  <CapRow key={tagKey} type="flex" noWrap className="value-row">
+                    <CapRow type="flex" className="tag-name">
+                      {personalizationTagColumnText}
+                    </CapRow>
+                    <CapRow type="flex" className="tag-input">
+                      <CapInput
+                        type="text"
+                        className="tag-input-field"
+                        value={customValues?.[tagKey] ?? ''}
+                        onChange={(e) => handleCustomValueChange(tagKey, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
+                  </CapRow>
+                  );
+                })}
+              </CapRow>
+            </React.Fragment>
+          ))}
         </>
       )}
       <CapRow type='flex' align='middle' justify='space-between' className="editor-actions">
@@ -155,9 +174,12 @@ CustomValuesEditor.propTypes = {
   setShowJSON: PropTypes.func.isRequired,
   customValues: PropTypes.object.isRequired,
   handleJSONTextChange: PropTypes.func.isRequired,
-  extractedTags: PropTypes.array.isRequired,
-  requiredTags: PropTypes.array.isRequired,
-  optionalTags: PropTypes.array.isRequired,
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    requiredTags: PropTypes.array,
+    optionalTags: PropTypes.array,
+  })).isRequired,
   handleCustomValueChange: PropTypes.func.isRequired,
   handleDiscardCustomValues: PropTypes.func.isRequired,
   handleUpdatePreview: PropTypes.func.isRequired,

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

@@ -18,11 +18,17 @@
   }
 
   &__summary-entry {
+    display: flex;
+    align-items: baseline;
+    gap: 0;
     margin-right: $CAP_SPACE_18;
   }
 
-  &__summary-key {
-    line-height: $CAP_SPACE_16;
+  &__summary-key,
+  &__summary-value {
+    line-height: 1.4;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   &__edit-icon {