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

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

@@ -1,175 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import messages from '../messages';
-import { isValidHttpUrl } from '../utils/urlValidation';
-import { WEBPUSH_BUTTON_TYPES } from '../../constants';
-
-const BUTTON_TEXT_MAX_LENGTH = 20;
-
-const ButtonForm = ({
-  buttonType, // 'primary' or 'secondary'
-  formatMessage,
-  onSave,
-  onCancel,
-  initialData,
-  isEditMode,
-}) => {
-  const [buttonText, setButtonText] = useState(initialData?.text || '');
-  const [buttonUrl, setButtonUrl] = useState(initialData?.url || '');
-  const [buttonTextError, setButtonTextError] = useState('');
-  const [buttonUrlError, setButtonUrlError] = useState('');
-
-  const validateButtonText = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.buttonTextRequired);
-    }
-    return '';
-  }, [formatMessage]);
-
-  const validateButtonUrl = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.buttonUrlRequired);
-    }
-
-    if (!isValidHttpUrl(value)) {
-      return formatMessage(messages.buttonUrlInvalid);
-    }
-
-    return '';
-  }, [formatMessage]);
-
-  const handleButtonTextChange = useCallback((e) => {
-    const { value } = e.target;
-    setButtonText(value);
-    const nextError = validateButtonText(value);
-    setButtonTextError((prev) => (prev === nextError ? prev : nextError));
-  }, [validateButtonText]);
-
-  const handleButtonUrlChange = useCallback((e) => {
-    const { value } = e.target;
-    setButtonUrl(value);
-    const nextError = validateButtonUrl(value);
-    setButtonUrlError((prev) => (prev === nextError ? prev : nextError));
-  }, [validateButtonUrl]);
-
-  const handleSave = useCallback(() => {
-    const textError = validateButtonText(buttonText);
-    const urlError = validateButtonUrl(buttonUrl);
-
-    if (textError || urlError) {
-      setButtonTextError(textError);
-      setButtonUrlError(urlError);
-      return;
-    }
-
-    onSave({
-      text: buttonText.trim(),
-      url: buttonUrl.trim(),
-      type: buttonType,
-    });
-  }, [buttonText, buttonUrl, buttonType, onSave, validateButtonText, validateButtonUrl]);
-
-  const handleCancel = useCallback(() => {
-    onCancel();
-  }, [onCancel]);
-
-  const isSaveDisabled = !buttonText.trim() || !buttonUrl.trim() || buttonTextError || buttonUrlError;
-
-  const renderCharacterCountSuffix = () => {
-    const currentLength = buttonText.length;
-    const maxLength = BUTTON_TEXT_MAX_LENGTH;
-
-    return (
-      <span className="button-character-count-suffix">
-        {`${currentLength}/${maxLength}`}
-      </span>
-    );
-  };
-
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter' && !isSaveDisabled) {
-      e.preventDefault();
-      handleSave();
-    }
-  }, [handleSave, isSaveDisabled]);
-
-  return (
-    <div className="webpush-button-form" onKeyDown={handleKeyDown}>
-      <CapRow className="button-form-row">
-        <CapHeading type="h4" className="button-form-heading">
-          <FormattedMessage {...messages.buttonText} />
-        </CapHeading>
-        <div className="button-form-field">
-          {/* TODO: Enable "+ Add labels" control once label functionality is ready */}
-          <CapInput
-            id={`webpush-button-text-input-${buttonType}`}
-            placeholder={formatMessage(messages.buttonTextPlaceholder)}
-            value={buttonText}
-            onChange={handleButtonTextChange}
-            maxLength={BUTTON_TEXT_MAX_LENGTH}
-            size="default"
-            status={buttonTextError ? 'error' : ''}
-            help={buttonTextError || ''}
-            suffix={renderCharacterCountSuffix()}
-          />
-        </div>
-      </CapRow>
-      <CapRow className="button-form-row">
-        <CapHeading type="h4" className="button-form-heading">
-          <FormattedMessage {...messages.buttonUrlLabel} />
-        </CapHeading>
-        <CapInput
-          id={`webpush-button-url-input-${buttonType}`}
-          placeholder={formatMessage(messages.buttonUrlPlaceholder)}
-          value={buttonUrl}
-          onChange={handleButtonUrlChange}
-          size="default"
-          status={buttonUrlError ? 'error' : ''}
-          help={buttonUrlError || ''}
-        />
-      </CapRow>
-      <CapRow className="button-form-actions">
-        <CapButton
-          type="primary"
-          onClick={handleSave}
-          disabled={isSaveDisabled}
-          className="button-form-save"
-        >
-          <FormattedMessage {...messages.saveButton} />
-        </CapButton>
-        <CapButton
-          type="secondary"
-          onClick={handleCancel}
-          className="button-form-cancel"
-        >
-          <FormattedMessage {...(isEditMode ? messages.cancelButton : messages.deleteButton)} />
-        </CapButton>
-      </CapRow>
-    </div>
-  );
-};
-
-ButtonForm.propTypes = {
-  buttonType: PropTypes.oneOf([WEBPUSH_BUTTON_TYPES.PRIMARY, WEBPUSH_BUTTON_TYPES.SECONDARY]).isRequired,
-  formatMessage: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  initialData: PropTypes.shape({
-    text: PropTypes.string,
-    url: PropTypes.string,
-  }),
-  isEditMode: PropTypes.bool,
-};
-
-ButtonForm.defaultProps = {
-  initialData: null,
-  isEditMode: false,
-};
-
-export default ButtonForm;
-

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

@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-
-const ButtonItem = ({
-  button,
-  index,
-  onEdit,
-  onDelete,
-  onDragStart,
-  onDragOver,
-  onDrop,
-  onDragEnd,
-  disabled,
-}) => {
-  const handleDragStart = (e) => {
-    if (disabled) return;
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', e.currentTarget);
-    onDragStart(index);
-  };
-
-  const handleDragOver = (e) => {
-    if (disabled) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    onDragOver(index);
-  };
-
-  const handleDrop = (e) => {
-    if (disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onDrop(index);
-  };
-
-  return (
-    <div 
-      className={`webpush-button-item ${disabled ? 'disabled' : ''}`}
-      draggable={!disabled}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-      onDragEnd={onDragEnd}
-    >
-      <CapRow align="middle" className="button-item-content">
-        <CapColumn span={1} className="button-item-drag-handle">
-          <CapIcon type="drag" className="drag-icon" />
-        </CapColumn>
-        <CapColumn span={1} className="button-item-icon">
-          <CapIcon type="link" className="link-icon" />
-        </CapColumn>
-        <CapColumn span={14} className="button-item-info">
-          <div className="button-item-text-row">
-            <span className="button-item-text">{button.text}</span>
-          </div>
-        </CapColumn>
-        <CapColumn span={8} className="button-item-actions">
-          <div className="button-item-url">{button.url}</div>
-          <div className="action-icons">
-            <CapIcon
-              type="edit"
-              className="action-icon"
-              onClick={() => !disabled && onEdit(index)}
-            />
-            <CapIcon
-              type="delete"
-              className="action-icon delete-icon"
-              onClick={() => !disabled && onDelete(index)}
-            />
-          </div>
-        </CapColumn>
-      </CapRow>
-    </div>
-  );
-};
-
-ButtonItem.propTypes = {
-  button: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  index: PropTypes.number.isRequired,
-  onEdit: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onDragStart: PropTypes.func.isRequired,
-  onDragOver: PropTypes.func.isRequired,
-  onDrop: PropTypes.func.isRequired,
-  onDragEnd: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-};
-
-ButtonItem.defaultProps = {
-  disabled: false,
-};
-
-export default ButtonItem;
-

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

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import ButtonItem from './ButtonItem';
-import messages from '../messages';
-
-const ButtonList = ({
-  buttons,
-  onEdit,
-  onDelete,
-  onReorder,
-  onAddPrimary,
-  onAddSecondary,
-  showAddPrimary,
-  showAddSecondary,
-  disabled,
-  disableSecondaryButton,
-  isInlineFormVisible,
-  inlineFormIndex,
-  renderInlineForm,
-}) => {
-  const [draggedIndex, setDraggedIndex] = useState(null);
-
-  const handleDragStart = (index) => {
-    if (disabled) return;
-    setDraggedIndex(index);
-  };
-
-  const handleDragOver = (index) => {
-    if (disabled) return;
-    if (draggedIndex === null || draggedIndex === index) return;
-    
-    // Reorder buttons
-    onReorder(draggedIndex, index);
-    setDraggedIndex(index);
-  };
-
-  const handleDrop = () => {
-    if (disabled) return;
-  };
-
-  const handleDragEnd = () => {
-    if (disabled) return;
-    setDraggedIndex(null);
-  };
-
-  const shouldRenderInlineForm = isInlineFormVisible
-    && typeof inlineFormIndex === 'number'
-    && inlineFormIndex >= 0;
-
-  // Don't render the container if there are no buttons
-  if (buttons.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="webpush-button-list">
-      {buttons.map((button, index) => {
-        if (shouldRenderInlineForm && inlineFormIndex === index && typeof renderInlineForm === 'function') {
-          return (
-            <div key={`button-inline-form-${index}`} className="button-inline-form">
-              {renderInlineForm()}
-            </div>
-          );
-        }
-        // Only disable items that are not being edited
-        const isItemDisabled = disabled || (isInlineFormVisible && inlineFormIndex !== null && inlineFormIndex !== index);
-        return (
-          <ButtonItem
-            key={`button-${index}`}
-            button={button}
-            index={index}
-            onEdit={onEdit}
-            onDelete={onDelete}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDrop={handleDrop}
-            onDragEnd={handleDragEnd}
-            disabled={isItemDisabled}
-          />
-        );
-      })}
-      {showAddPrimary && (
-        <CapRow className="button-list-add-button">
-          <CapButton
-            type="flat"
-            onClick={onAddPrimary}
-            className="add-primary-button button-add-trigger"
-            icon="plus"
-            disabled={disabled}
-          >
-            <FormattedMessage {...messages.addPrimaryButton} />
-          </CapButton>
-        </CapRow>
-      )}
-      {showAddSecondary && (
-        <CapRow className="button-list-add-button">
-          <CapButton
-            type="flat"
-            onClick={onAddSecondary}
-            className="add-secondary-button button-add-trigger"
-            icon="plus"
-            disabled={disableSecondaryButton || disabled}
-          >
-            <FormattedMessage {...messages.addSecondaryButton} />
-          </CapButton>
-        </CapRow>
-      )}
-    </div>
-  );
-};
-
-ButtonList.propTypes = {
-  buttons: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  })).isRequired,
-  onEdit: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onReorder: PropTypes.func.isRequired,
-  onAddPrimary: PropTypes.func.isRequired,
-  onAddSecondary: PropTypes.func.isRequired,
-  showAddPrimary: PropTypes.bool.isRequired,
-  showAddSecondary: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool,
-  disableSecondaryButton: PropTypes.bool,
-  isInlineFormVisible: PropTypes.bool,
-  inlineFormIndex: PropTypes.number,
-  renderInlineForm: PropTypes.func,
-};
-
-ButtonList.defaultProps = {
-  disabled: false,
-  disableSecondaryButton: false,
-  isInlineFormVisible: false,
-  inlineFormIndex: null,
-  renderInlineForm: null,
-};
-
-export default ButtonList;
-

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: 1px 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: 1px 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 rgba(0, 0, 0, 0.08);
-  }
-
-  &[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: 13px;
-        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;
-  }
-}
-