@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,86 @@
+// 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": "OPEN_SITE",
+          },
+          Object {
+            "label": "Redirect to URL",
+            "value": "REDIRECT_TO_URL",
+          },
+        ]
+      }
+      value="OPEN_SITE"
+    />
+  </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

@@ -0,0 +1,16 @@
+// 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

@@ -0,0 +1,41 @@
+// 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

@@ -0,0 +1,54 @@
+// 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

@@ -0,0 +1,37 @@
+// 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

@@ -0,0 +1,21 @@
+// 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

@@ -0,0 +1,246 @@
+@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;
+  }
+}
+