@capillarytech/creatives-library 8.0.266 → 8.0.267

package/v2Containers/WebPush/Create/components/TemplateNameSection.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-
-/**
- * TemplateNameSection component - Template name input (shown only in full mode)
- */
-export const TemplateNameSection = ({
-  isFullMode,
-  value,
-  error,
-  onChange,
-  formatMessage,
-  messages,
-}) => {
-  if (!isFullMode) return null;
-
-  return (
-    <>
-      <CapRow className="input-group creative-name-container">
-        <CapInput
-          id="webpush-template-name-input"
-          className="webpush-template-name-input"
-          label={formatMessage(messages.creativeName)}
-          placeholder={formatMessage(messages.creativeNamePlaceholder)}
-          value={value}
-          onChange={onChange}
-          size="default"
-          status={error ? 'error' : ''}
-          help={error ? formatMessage(messages.emptyTemplateErrorMessage) : ''}
-        />
-      </CapRow>
-      <CapDivider />
-    </>
-  );
-};
-
-TemplateNameSection.propTypes = {
-  isFullMode: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  error: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  formatMessage: PropTypes.func.isRequired,
-  messages: PropTypes.object.isRequired,
-};
-
-TemplateNameSection.defaultProps = {
-  error: false,
-};
-
-export default TemplateNameSection;
-

package/v2Containers/WebPush/Create/components/TemplateNameSection.test.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
-import TemplateNameSection from './TemplateNameSection';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-
-describe('TemplateNameSection', () => {
-  const mockFormatMessage = jest.fn((message) => message.defaultMessage || message);
-  const mockOnChange = jest.fn();
-
-  const mockMessages = {
-    creativeName: {
-      defaultMessage: 'Creative Name',
-    },
-    creativeNamePlaceholder: {
-      defaultMessage: 'Enter creative name',
-    },
-    emptyTemplateErrorMessage: {
-      defaultMessage: 'Template name is required',
-    },
-  };
-
-  const defaultProps = {
-    isFullMode: true,
-    value: 'Test Template',
-    error: false,
-    onChange: mockOnChange,
-    formatMessage: mockFormatMessage,
-    messages: mockMessages,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Rendering in Full Mode', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<TemplateNameSection {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render when isFullMode is true', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} isFullMode={true} />);
-      expect(wrapper.find(CapInput).exists()).toBe(true);
-    });
-
-    it('should render CapInput with correct props', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.prop('id')).toBe('webpush-template-name-input');
-      expect(input.prop('className')).toBe('webpush-template-name-input');
-      expect(input.prop('value')).toBe('Test Template');
-      expect(input.prop('size')).toBe('default');
-    });
-
-    it('should render label correctly', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.creativeName);
-    });
-
-    it('should render placeholder correctly', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.creativeNamePlaceholder);
-    });
-
-    it('should render error status when error is true', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={true} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.emptyTemplateErrorMessage);
-    });
-
-    it('should not render error status when error is false', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={false} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-    });
-
-    it('should render Divider', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
-      expect(wrapper.find(CapDivider).exists()).toBe(true);
-    });
-
-    it('should call onChange when input value changes', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      const event = { target: { value: 'New Template Name' } };
-      input.prop('onChange')(event);
-      expect(mockOnChange).toHaveBeenCalledWith(event);
-    });
-  });
-
-  describe('Not Rendering in Non-Full Mode', () => {
-    it('should not render when isFullMode is false', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} isFullMode={false} />);
-      expect(wrapper.find(CapInput).exists()).toBe(false);
-      expect(wrapper.find(CapDivider).exists()).toBe(false);
-    });
-
-    it('should return null when isFullMode is false', () => {
-      const wrapper = shallowWithIntl(<TemplateNameSection {...defaultProps} isFullMode={false} />);
-      expect(wrapper.type()).toBe(null);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should show error message when error is true', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={true} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.emptyTemplateErrorMessage);
-    });
-
-    it('should not show error message when error is false', () => {
-      const wrapper = mountWithIntl(<TemplateNameSection {...defaultProps} error={false} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-    });
-  });
-
-  describe('Default Props', () => {
-    it('should use default error value when not provided', () => {
-      const wrapper = mountWithIntl(
-        <TemplateNameSection
-          isFullMode={true}
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-        />
-      );
-      const input = wrapper.find(CapInput);
-      expect(input.prop('status')).toBe('');
-      expect(input.prop('help')).toBe('');
-    });
-  });
-});
-

package/v2Containers/WebPush/Create/components/__snapshots__/ButtonsLinksSection.test.js.snap

@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ButtonsLinksSection Rendering should render correctly with default props 1`] = `
-<Fragment>
-  <CapRow
-    className="creatives-webpush-buttons-links"
-  >
-    <CapHeading
-      className="webpush-buttons-links"
-      type="h4"
-    >
-      <FormattedMessage
-        defaultMessage="Buttons and Links"
-        id="app.webpush.buttonsAndLinks"
-        values={Object {}}
-      />
-    </CapHeading>
-    <CapHeading
-      className="webpush-on-click-behaviour"
-      type="h5"
-    >
-      <FormattedMessage
-        defaultMessage="On-click Behaviour"
-        id="app.webpush.onClickBehaviour"
-        values={Object {}}
-      />
-    </CapHeading>
-    <CapRadioGroup
-      errorMessage=""
-      onChange={[MockFunction]}
-      options={
-        Array [
-          Object {
-            "label": "Open Site",
-            "value": "SITE_URL",
-          },
-          Object {
-            "label": "Redirect to URL",
-            "value": "REDIRECT_TO_URL",
-          },
-        ]
-      }
-      value="SITE_URL"
-    />
-  </CapRow>
-  <CapRow
-    className="creatives-webpush-buttons-section"
-  >
-    <CapHeading
-      className="webpush-buttons-section-heading"
-      type="h5"
-    >
-      <FormattedMessage
-        defaultMessage="Buttons"
-        id="app.webpush.buttons"
-        values={Object {}}
-      />
-       
-      <span
-        className="optional-text"
-      >
-        <FormattedMessage
-          defaultMessage="(Optional)"
-          id="app.webpush.optional"
-          values={Object {}}
-        />
-      </span>
-    </CapHeading>
-    <MockButtonList
-      buttons={Array []}
-      disableSecondaryButton={false}
-      disabled={false}
-      inlineFormIndex={null}
-      isInlineFormVisible={false}
-      onAddPrimary={[MockFunction]}
-      onAddSecondary={[MockFunction]}
-      onDelete={[MockFunction]}
-      onEdit={[MockFunction]}
-      onReorder={[MockFunction]}
-      renderInlineForm={null}
-      showAddPrimary={false}
-      showAddSecondary={false}
-    />
-  </CapRow>
-</Fragment>
-`;

package/v2Containers/WebPush/Create/components/__snapshots__/FormActions.test.js.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormActions Rendering should render correctly with default props 1`] = `
-<Fragment>
-  <CapRow
-    className="creatives-webpush-actions"
-  >
-    <CapButton
-      disabled={false}
-      isAddBtn={false}
-      onClick={[MockFunction]}
-      type="primary"
-    />
-  </CapRow>
-</Fragment>
-`;

package/v2Containers/WebPush/Create/components/__snapshots__/MediaSection.test.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MediaSection Rendering should render correctly with default props 1`] = `
-<Fragment>
-  <CapRow
-    className="creatives-webpush-media"
-  >
-    <CapHeading
-      className="webpush-media-type"
-      type="h4"
-    >
-      <FormattedMessage
-        defaultMessage="Media Type"
-        id="app.webpush.mediaType"
-        values={Object {}}
-      />
-    </CapHeading>
-    <_Class
-      className="margin-t-4"
-      disabled={false}
-      labelPosition="top"
-      onChange={[MockFunction]}
-      options={
-        Array [
-          Object {
-            "label": "None",
-            "value": "NONE",
-          },
-          Object {
-            "label": "Image",
-            "value": "IMAGE",
-          },
-        ]
-      }
-      value="NONE"
-      width="100%"
-    />
-  </CapRow>
-  <CapDivider />
-</Fragment>
-`;

package/v2Containers/WebPush/Create/components/__snapshots__/MessageSection.test.js.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MessageSection Rendering should render correctly with default props 1`] = `
-<Fragment>
-  <CapRow
-    className="creatives-webpush-message"
-  >
-    <CapRow
-      className="tooltip-add-label-container webpush-message-taglist"
-    />
-    <CapHeading
-      className="webpush-message"
-      type="h4"
-    >
-      <FormattedMessage
-        defaultMessage="Message"
-        id="app.webpush.message"
-        values={Object {}}
-      />
-    </CapHeading>
-    <InjectIntl(Wrapper)
-      onChange={[MockFunction]}
-      textAreaRef={null}
-      value="Test Message"
-    >
-      <_Class
-        autosize={
-          Object {
-            "maxRows": 5,
-            "minRows": 3,
-          }
-        }
-        errorMessage=""
-        id="webpush-message-input"
-        isRequired={true}
-        labelPosition="top"
-        onChange={[MockFunction]}
-        setInputRef={[MockFunction]}
-        size="default"
-        value="Test Message"
-      />
-    </InjectIntl(Wrapper)>
-    <CapLabel
-      className="webpush-character-count"
-      type="label2"
-    >
-      <span />
-    </CapLabel>
-  </CapRow>
-  <CapDivider
-    className="webpush-message-divider"
-  />
-</Fragment>
-`;

package/v2Containers/WebPush/Create/components/__snapshots__/NotificationTitleSection.test.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationTitleSection Rendering should render correctly with default props 1`] = `
-<CapRow
-  className="creatives-webpush-title"
->
-  <CapRow
-    className="tooltip-add-label-container webpush-title-taglist"
-  />
-  <CapHeading
-    className="webpush-title"
-    type="h4"
-  >
-    <FormattedMessage
-      defaultMessage="Notification Title"
-      id="app.webpush.notificationTitle"
-      values={Object {}}
-    />
-  </CapHeading>
-  <_Class
-    errorMessage=""
-    id="webpush-notification-title-input"
-    isRequired={true}
-    labelPosition="top"
-    maxLength={65}
-    onChange={[MockFunction]}
-    size="default"
-    value="Test Title"
-  />
-  <CapLabel
-    className="webpush-character-count"
-    type="label2"
-  >
-    <span />
-  </CapLabel>
-</CapRow>
-`;

package/v2Containers/WebPush/Create/components/__snapshots__/TemplateNameSection.test.js.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TemplateNameSection Rendering in Full Mode should render correctly with default props 1`] = `
-<Fragment>
-  <CapRow
-    className="input-group creative-name-container"
-  >
-    <_Class
-      className="webpush-template-name-input"
-      help=""
-      id="webpush-template-name-input"
-      labelPosition="top"
-      onChange={[MockFunction]}
-      size="default"
-      status=""
-      value="Test Template"
-    />
-  </CapRow>
-  <CapDivider />
-</Fragment>
-`;

package/v2Containers/WebPush/Create/components/_buttons.scss

@@ -1,246 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-
-// Button components styles for Web Push Create
-
-.webpush-button-form {
-  border: 0.063rem solid $CAP_G07;
-  border-radius: $CAP_SPACE_08;
-  padding: $CAP_SPACE_20;
-  margin-bottom: $CAP_SPACE_16;
-
-  .button-form-row {
-    margin-bottom: $CAP_SPACE_16;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .button-form-heading {
-    margin-bottom: $CAP_SPACE_08;
-    font-weight: 600;
-  }
-
-  .button-form-field {
-    position: relative;
-  }
-
-  .button-character-count-suffix {
-    font-size: $FONT_SIZE_S;
-    color: $FONT_COLOR_03;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .button-form-actions {
-    display: flex;
-    gap: $CAP_SPACE_12;
-    margin-top: $CAP_SPACE_20;
-
-    .button-form-save {
-      background-color: map-get($CAP_PRIMARY, base);
-      border-color: map-get($CAP_PRIMARY, base);
-      
-      &:hover:not(:disabled) {
-        background-color: map-get($CAP_PRIMARY, hover);
-        border-color: map-get($CAP_PRIMARY, hover);
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .button-form-cancel {
-      background-color: $CAP_G12;
-      border-color: $CAP_COLOR_16;
-      color: $FONT_COLOR_01;
-      
-      &:hover {
-        background-color: $CAP_COLOR_16;
-        border-color: $CAP_G06;
-      }
-    }
-  }
-}
-
-.webpush-button-list {
-  .button-list-add-button {
-    margin-top: $CAP_SPACE_12;
-  }
-}
-
-.button-add-controls {
-  display: flex;
-  gap: $CAP_SPACE_12;
-  flex-wrap: wrap;
-  margin-top: $CAP_SPACE_16;
-}
-
-// High specificity selectors to override Cap UI library styles
-// Target both CapButton and Ant Design button classes that may be on the same element
-.button-add-controls button.button-add-trigger,
-.button-add-controls .button-add-trigger.cap-button,
-.button-add-controls .button-add-trigger.ant-btn,
-.button-add-controls .button-add-trigger.cap-button-flat,
-.button-add-controls .button-add-trigger.ant-btn-flat,
-.webpush-button-list button.button-add-trigger,
-.webpush-button-list .button-add-trigger.cap-button,
-.webpush-button-list .button-add-trigger.ant-btn,
-.webpush-button-list .button-add-trigger.cap-button-flat,
-.webpush-button-list .button-add-trigger.ant-btn-flat {
-  border: none;
-  background: transparent;
-  color: map-get($CAP_SECONDARY, base);
-  font-weight: $FONT_WEIGHT_MEDIUM;
-  border-radius: $CAP_SPACE_08;
-  padding: $CAP_SPACE_08 $CAP_SPACE_16;
-  display: inline-flex;
-  align-items: center;
-  gap: $CAP_SPACE_08;
-
-  &:hover:not(:disabled) {
-    background: $CAP_G09;
-  }
-
-  &:disabled {
-    color: $CAP_G05;
-    cursor: not-allowed;
-    background: transparent;
-  }
-}
-
-.button-inline-form {
-  margin-bottom: $CAP_SPACE_12;
-}
-
-.webpush-button-item {
-  border: 0.063rem solid $CAP_G07;
-  border-radius: 0.571rem;
-  padding: 0.7rem 0.857rem;
-  margin-bottom: 0.857rem;
-  background: $CAP_WHITE;
-  transition: all 0.2s ease;
-  cursor: move;
-
-  &:hover {
-    border-color: map-get($CAP_SECONDARY, base);
-    box-shadow: 0 0.142rem 0.571rem $CAP_BLACK_ALPHA08;
-  }
-
-  &[draggable="true"] {
-    cursor: move;
-  }
-
-  .button-item-content {
-    align-items: center;
-  }
-
-  .button-item-drag-handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: move;
-    padding-right: $CAP_SPACE_08;
-
-    .drag-icon {
-      font-size: 1rem;
-      color: $FONT_COLOR_01;
-      font-weight: 700;
-      transform: rotate(90deg);
-      display: inline-block;
-    }
-  }
-
-  .button-item-icon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding-right: $CAP_SPACE_08;
-
-    .link-icon {
-      font-size: $FONT_SIZE_L;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .button-item-info {
-    display: flex;
-    align-items: center;
-    padding-right: $CAP_SPACE_12;
-
-    .button-item-text-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .button-item-text {
-        font-size: 0.813rem;
-        font-weight: $FONT_WEIGHT_MEDIUM;
-        color: $FONT_COLOR_01;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 100%;
-      }
-    }
-  }
-
-  .button-item-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: $CAP_SPACE_12;
-
-    .button-item-url {
-      font-size: $FONT_SIZE_S;
-      color: $FONT_COLOR_03;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 12.857rem;
-      flex-shrink: 1;
-      margin-right: $CAP_SPACE_12;
-    }
-
-    .action-icons {
-      display: flex;
-      align-items: center;
-      gap: $CAP_SPACE_12;
-      flex-shrink: 0;
-
-      .action-icon {
-        font-size: $FONT_SIZE_L;
-        color: $FONT_COLOR_01;
-        cursor: pointer;
-        transition: color 0.2s ease;
-
-        &:hover {
-          color: map-get($CAP_SECONDARY, base);
-        }
-
-        &.delete-icon:hover {
-          color: $CAP_RED;
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-.creatives-webpush-buttons-section {
-  margin-top: $CAP_SPACE_20;
-  margin-bottom: $CAP_SPACE_24;
-
-  .webpush-buttons-section-heading {
-    margin-bottom: $CAP_SPACE_16;
-    font-weight: 600;
-  }
-}
-