@capillarytech/creatives-library 8.0.345-alpha.15 → 8.0.345-alpha.16

package/v2Components/CapActionButton/index.scss

@@ -1,27 +1,14 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
 
-// Horizontal RCS button type radios (Phone number | URL | Quick reply)
-.cap-rcs-cta-type-radio.cap-radio-group-v2 {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0.5rem;
-
-  .ant-radio-wrapper {
-    margin-right: $CAP_SPACE_24;
-    margin-bottom: 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+#rcs-cta-type{
+    width: 90%;
 }
 
 .cap-rcs-saved-cta {
     position: relative;
     border: solid $CAP_SPACE_01 $CAP_G06;
     padding: 0.625rem;
-    border-radius: 0.25rem; // 4px
+    border-radius: $CAP_SPACE_04;
     margin-bottom: $CAP_SPACE_12;
 
     div:not(:last-child) {
@@ -52,139 +39,9 @@
     }
 }
 
-// Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).
-// Phone: react-phone-input-2 — overlay count + padding on .form-control
-.rcs-cta-inner-char-count {
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  color: $FONT_COLOR_03;
-  white-space: nowrap;
-}
-
-.rcs-cta-input-with-inner-count {
-  position: relative;
-  width: 100%;
-
-  &--phone .rcs-cta-inner-char-count {
-    position: absolute;
-    right: 0.6875rem;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-    pointer-events: none;
-  }
-}
-
-// RCS phone field: Figma — one light border, 4px radius, ~antd Input large height, full width, count inside right
-.rcs-button-cta-create-container .rcs-cta-input-with-inner-count--phone {
-  .react-tel-input.rcs-cta-phone-input {
-    width: 100%;
-  }
-
-  .rcs-cta-phone-input .form-control {
-    width: 100% !important;
-    max-width: none;
-    height: 2.5rem;
-    min-height: 2.5rem;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 3rem;
-    padding-right: 3.5rem;
-    margin: 0;
-    font-size: 0.875rem;
-    line-height: 2.5rem;
-    color: $CAP_G01;
-    background: $CAP_WHITE;
-    border: 1px solid $CAP_G06;
-    border-radius: 0.25rem;
-    box-shadow: none;
-
-    &::placeholder {
-      color: $CAP_G05;
-    }
-
-    &:hover {
-      border-color: $CAP_G11;
-    }
-
-    &:focus {
-      border-color: $CAP_G01;
-      box-shadow: none;
-      outline: none;
-    }
-  }
-
-  .rcs-cta-phone-input .flag-dropdown {
-    top: 1px;
-    bottom: 1px;
-    left: 1px;
-    padding: 0;
-    background: $CAP_WHITE;
-    border: none;
-    border-radius: 0.1875rem 0 0 0.1875rem; // inset from outer 4px radius
-  }
-
-  .rcs-cta-phone-input .flag-dropdown.open {
-    border-radius: 0.1875rem 0 0 0;
-  }
-
-  .rcs-cta-phone-input .selected-flag {
-    width: 2.75rem;
-    padding: 0 0 0 0.5rem;
-    background: transparent;
-    border-radius: 0.1875rem 0 0 0.1875rem;
-  }
-
-  .rcs-cta-phone-input .selected-flag:hover,
-  .rcs-cta-phone-input .selected-flag:focus {
-    background: $CAP_G09;
-  }
-
-  .rcs-cta-phone-input .selected-flag .arrow {
-    left: 1.375rem;
-    border-top-color: $CAP_G04;
-  }
-}
-
-// URL CTA: URL type (narrow) + URL field (~1:3) per Figma
-.rcs-cta-url-fields-row {
-  .rcs-cta-url-type-col .ant-select {
-    width: 100%;
-  }
-}
-
-// RCS “create CTA” card: 0.5rem padding + gaps (Figma-tight; fixes excess space above first label)
-.rcs-button-cta-create-container.cap-row-v2 {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: 100%;
-  border: solid 1px $CAP_G06;
-  padding: 1.25rem;
-  border-radius: 0.25rem; // 4px — match .cap-rcs-saved-cta
-
-  // Stack “Button type” (radios) above “Button text”
-  .rcs-button-cta-create.cap-row-v2 {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    margin: 0;
-  }
-
-  // Space after each field label (CapHeading margins are often zeroed by the library)
-  .cta-label {
-    margin-bottom: 0;
-    margin-top: 0.75rem;
-  }
-
-  .cta-label + * {
-    margin-top: 0.5rem;
-  }
-
-  // “Button type” heading has no .cta-label — keep same label→control gap as other fields
-  .rcs-button-cta-create > .ant-col:first-of-type .cap-rcs-cta-type-radio {
-    margin-top: 0.5rem;
-  }
+.rcs-button-cta-create-container {
+    border: solid 1px $CAP_G06;
+    padding: 10px;
 }   
 
 .disabled {
@@ -198,12 +55,4 @@
 
 .button-disabled-tooltip-wrapper {
     display: inline-block;
-    margin-top: 1.25rem;
-}
-
-// Space between Save and Delete on RCS / carousel CTA rows
-.rcs-cta-save-delete-btn {
-    .rcs-cta-delete-btn {
-        margin-left: 0.75rem;
-    }
 }

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

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

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { CapActionButton } from '../index';
 import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
-import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
+import { RCS_BUTTON_TYPES } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
 const deleteHandler = jest.fn();
@@ -12,7 +12,6 @@ const initializeComponent = (
   data,
   isEditFlow = false,
   maxButtons = 3,
-  host = '',
 ) => {
   // Normalize legacy test data shape to match component props
   const normalizeType = (legacyType) => {
@@ -38,7 +37,6 @@ const initializeComponent = (
       isEditFlow={isEditFlow}
       maxButtons={maxButtons}
       isFullMode={true}
-      host={host}
     />,
   );
 };
@@ -61,7 +59,7 @@ describe('CapActionButton', () => {
         isSaved: false,
       },
     ]);
-    expect(screen.getByText('Button type')).toBeInTheDocument();
+    expect(screen.getByText('Type of action')).toBeInTheDocument();
     expect(screen.getByText('Button text')).toBeInTheDocument();
     expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
@@ -124,7 +122,7 @@ describe('CapActionButton', () => {
         id: 1,
       },
     };
-    const urlInput = await screen.getByPlaceholderText('Enter URL');
+    const urlInput = await screen.getByPlaceholderText('Enter website URL');
     fireEvent.change(urlInput, urlEvent);
     expect(updateHandler).toHaveBeenCalledWith(
       {
@@ -164,27 +162,6 @@ 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,
@@ -221,7 +198,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initialData]);
-    const urlInput = await screen.getByPlaceholderText('Enter URL');
+    const urlInput = await screen.getByPlaceholderText('Enter website 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);
@@ -268,8 +245,7 @@ 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 },
     ];
-    // 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 { container } = initializeComponent(suggestions);
     const deleteIcons = container.querySelectorAll('.rcs-saved-cta-delete-icon');
     expect(deleteIcons.length).toBeGreaterThan(0);
     fireEvent.click(deleteIcons[0]);
@@ -327,8 +303,7 @@ describe('CapActionButton', () => {
       postback: 'stop',
       isSaved: true,
     };
-    // Only ICS treats index 0 as a mandatory STOP quick reply
-    const { container } = initializeComponent([stopButton], false, 3, HOST_ICS);
+    const { container } = initializeComponent([stopButton]);
     expect(container.querySelector('.rcs-saved-cta-delete-icon')).not.toBeInTheDocument();
   });
 
@@ -449,7 +424,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([button]);
-    expect(screen.getByPlaceholderText(/enter url/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/enter website url/i)).toBeInTheDocument();
   });
 
   it('should update both displayText and postback when button text changes (updateDisplayAndPostback)', () => {
@@ -529,7 +504,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter URL');
+    const urlInput = screen.getByPlaceholderText('Enter website URL');
     fireEvent.change(urlInput, { target: { value: 'http://localhost:3030/creatives/ui/v2', id: 1 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
   });
@@ -615,7 +590,7 @@ describe('CapActionButton', () => {
       isSaved: false,
     };
     initializeComponent([initial]);
-    const urlInput = screen.getByPlaceholderText('Enter URL');
+    const urlInput = screen.getByPlaceholderText('Enter website URL');
     // Enter invalid URL
     fireEvent.change(urlInput, { target: { value: 'badurl', id: 0 } });
     expect(screen.getByText(/url is not valid/i)).toBeInTheDocument();
@@ -874,14 +849,15 @@ describe('CapActionButton function logic', () => {
     expect(renderCtaOptions(label, tooltipLabel, false)).toBe('Test');
   });
 
-  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>
+  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>
     );
-    const result = renderInnerCharCount(5, 25);
+    const result = renderLength(5, 25);
     expect(result.props.children).toBe('5/25');
   });
 });

package/v2Components/CapTagList/index.js

@@ -386,9 +386,6 @@ 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 {
@@ -481,9 +478,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             content={contentSection}
             trigger="click"
             placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
-            overlayStyle={overlayStyle}
-            overlayClassName={overlayClassName}
-            getPopupContainer={getPopupContainer}
           >
             <CapTooltip
               title={
@@ -555,10 +549,6 @@ 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,7 +8,6 @@ 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';
 
 const CustomValuesEditor = ({
   isExtractingTags,
@@ -17,16 +16,15 @@ const CustomValuesEditor = ({
   setShowJSON,
   customValues,
   handleJSONTextChange,
-  sections,
+  extractedTags,
+  requiredTags,
+  optionalTags,
   handleCustomValueChange,
   handleDiscardCustomValues,
   handleUpdatePreview,
   isUpdatingPreview,
   formatMessage,
 }) => {
-  /** Same as SMS Test & Preview: show token path from extract-tags (fullPath or name). */
-  const getPersonalizationTagColumnLabel = (tagNode) => tagNode?.fullPath ?? tagNode?.name ?? '';
-
   if (isExtractingTags) {
     return (
       <CapRow className="loading-container">
@@ -79,68 +77,52 @@ const CustomValuesEditor = ({
         </CapRow>
       ) : (
         <>
-          {(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} />}
+          {extractedTags?.length > 0 && (
+            <CapRow className="values-table">
+              <CapRow className="table-header">
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.personalizationTags} />
                 </CapLabel>
-              ) : null}
-              <CapRow className="values-table">
-                <CapRow className="table-header">
-                  <CapLabel type="label31" className="header-cell">
-                    <FormattedMessage {...messages.personalizationTags} />
-                  </CapLabel>
-                  <CapLabel type="label31" className="header-cell">
-                    <FormattedMessage {...messages.customValues} />
-                  </CapLabel>
-                </CapRow>
-                {(section?.requiredTags || []).map((tag, tagIndex) => {
-                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
-                  return (
-                  <CapRow key={tag?.fullPath ?? `required-${tagIndex}`} className="value-row">
-                    <CapRow className="tag-name">
-                      {personalizationTagColumnText}
-                      <span className="required-tag-indicator">*</span>
-                    </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>
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.customValues} />
+                </CapLabel>
+              </CapRow>
+              {requiredTags.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">
+                    {tag.fullPath}
+                    <span className="required-tag-indicator">*</span>
                   </CapRow>
-                  );
-                })}
-                {(section?.optionalTags || []).map((tag, tagIndex) => {
-                  const personalizationTagColumnText = getPersonalizationTagColumnLabel(tag);
-                  return (
-                  <CapRow key={tag?.fullPath ?? `optional-${tagIndex}`} className="value-row">
-                    <CapRow className="tag-name">
-                      {personalizationTagColumnText}
-                    </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"
-                      />
-                    </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>
-                  );
-                })}
-              </CapRow>
-            </React.Fragment>
-          ))}
+                </CapRow>
+              ))}
+              {optionalTags?.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">{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"
+                    />
+                  </CapRow>
+                </CapRow>
+              ))}
+            </CapRow>
+          )}
         </>
       )}
       <CapRow className="editor-actions">
@@ -174,12 +156,9 @@ CustomValuesEditor.propTypes = {
   setShowJSON: PropTypes.func.isRequired,
   customValues: PropTypes.object.isRequired,
   handleJSONTextChange: PropTypes.func.isRequired,
-  sections: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    requiredTags: PropTypes.array,
-    optionalTags: PropTypes.array,
-  })).isRequired,
+  extractedTags: PropTypes.array.isRequired,
+  requiredTags: PropTypes.array.isRequired,
+  optionalTags: PropTypes.array.isRequired,
   handleCustomValueChange: PropTypes.func.isRequired,
   handleDiscardCustomValues: PropTypes.func.isRequired,
   handleUpdatePreview: PropTypes.func.isRequired,

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

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