@capillarytech/creatives-library 8.0.266-alpha.0 → 8.0.266

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

@@ -0,0 +1,145 @@
+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-${button.id}`} 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.id}
+            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({
+    id: PropTypes.string.isRequired,
+    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/ButtonsLinksSection.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import ButtonList from './ButtonList';
+import ButtonForm from './ButtonForm';
+import { ON_CLICK_BEHAVIOUR_OPTIONS } from '../../constants';
+
+/**
+ * ButtonsLinksSection component - On-click behavior and CTA buttons management
+ */
+export const ButtonsLinksSection = ({
+  onClickBehaviour,
+  onClickBehaviourOptions,
+  onClickBehaviourChange,
+  redirectUrl,
+  redirectUrlError,
+  onRedirectUrlChange,
+  buttonState,
+  formatMessage,
+  messages,
+}) => {
+  const {
+    buttons,
+    isAddingButton,
+    buttonBeingAdded,
+    editingButtonIndex,
+    handleAddPrimaryButton,
+    handleAddSecondaryButton,
+    handleButtonSave,
+    handleButtonCancel,
+    handleButtonEdit,
+    handleButtonDelete,
+    handleButtonReorder,
+    isAddFlow,
+    isEditFlow,
+    showAddPrimaryButton,
+    showAddSecondaryButton,
+    showDisabledSecondaryDuringPrimary,
+    disableSecondaryAddButton,
+  } = buttonState;
+
+  const renderButtonForm = (isEditMode) => (
+    <ButtonForm
+      buttonType={buttonBeingAdded}
+      formatMessage={formatMessage}
+      onSave={handleButtonSave}
+      onCancel={handleButtonCancel}
+      initialData={isEditMode && editingButtonIndex !== null ? buttons[editingButtonIndex] : null}
+      isEditMode={isEditMode}
+    />
+  );
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-buttons-links">
+        <CapHeading type="h4" className="webpush-buttons-links">
+          <FormattedMessage {...messages.buttonsAndLinks} />
+        </CapHeading>
+        <CapHeading type="h5" className="webpush-on-click-behaviour">
+          <FormattedMessage {...messages.onClickBehaviour} />
+        </CapHeading>
+        <CapRadioGroup
+          options={onClickBehaviourOptions}
+          value={onClickBehaviour}
+          onChange={onClickBehaviourChange}
+        />
+        {onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (
+          <CapInput
+            id="webpush-redirect-url-input"
+            className="webpush-redirect-url-input"
+            placeholder={formatMessage(messages.enterUrl)}
+            value={redirectUrl}
+            onChange={onRedirectUrlChange}
+            size="default"
+            status={redirectUrlError ? 'error' : ''}
+            help={redirectUrlError || ''}
+          />
+        )}
+      </CapRow>
+      <CapRow className="creatives-webpush-buttons-section">
+        <CapHeading type="h5" className="webpush-buttons-section-heading">
+          <FormattedMessage {...messages.buttons} />{' '}
+          <span className="optional-text">
+            <FormattedMessage {...messages.optional} />
+          </span>
+        </CapHeading>
+        <ButtonList
+          buttons={buttons}
+          onEdit={handleButtonEdit}
+          onDelete={handleButtonDelete}
+          onReorder={handleButtonReorder}
+          onAddPrimary={handleAddPrimaryButton}
+          onAddSecondary={handleAddSecondaryButton}
+          showAddPrimary={false}
+          showAddSecondary={false}
+          disabled={isAddFlow}
+          disableSecondaryButton={disableSecondaryAddButton}
+          isInlineFormVisible={isEditFlow}
+          inlineFormIndex={isEditFlow ? editingButtonIndex : null}
+          renderInlineForm={isEditFlow ? () => renderButtonForm(true) : null}
+        />
+        {isAddFlow && buttonBeingAdded && renderButtonForm(false)}
+        {(showAddPrimaryButton || showAddSecondaryButton || showDisabledSecondaryDuringPrimary) && (
+          <div className="button-add-controls">
+            {showAddPrimaryButton && (
+              <CapButton
+                type="flat"
+                onClick={handleAddPrimaryButton}
+                className="add-primary-button button-add-trigger"
+                icon="plus"
+              >
+                <FormattedMessage {...messages.addButton} />
+              </CapButton>
+            )}
+            {showAddSecondaryButton && (
+              <CapButton
+                type="flat"
+                onClick={handleAddSecondaryButton}
+                className="add-secondary-button button-add-trigger"
+                icon="plus"
+              >
+                <FormattedMessage {...messages.addButton} />
+              </CapButton>
+            )}
+            {showDisabledSecondaryDuringPrimary && (
+              <CapButton
+                type="flat"
+                className="add-secondary-button button-add-trigger"
+                icon="plus"
+                disabled
+              >
+                <FormattedMessage {...messages.addButton} />
+              </CapButton>
+            )}
+          </div>
+        )}
+      </CapRow>
+    </>
+  );
+};
+
+ButtonsLinksSection.propTypes = {
+  onClickBehaviour: PropTypes.string.isRequired,
+  onClickBehaviourOptions: PropTypes.array.isRequired,
+  onClickBehaviourChange: PropTypes.func.isRequired,
+  redirectUrl: PropTypes.string.isRequired,
+  redirectUrlError: PropTypes.string,
+  onRedirectUrlChange: PropTypes.func.isRequired,
+  buttonState: PropTypes.object.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+};
+
+ButtonsLinksSection.defaultProps = {
+  redirectUrlError: '',
+};
+
+export default ButtonsLinksSection;
+