@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonItem.test.js.snap

@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ButtonItem Rendering should render correctly with default props 1`] = `
-<div
-  className="webpush-button-item "
-  draggable={true}
-  onDragEnd={[MockFunction]}
-  onDragOver={[Function]}
-  onDragStart={[Function]}
-  onDrop={[Function]}
->
-  <CapRow
-    align="middle"
-    className="button-item-content"
-  >
-    <CapColumn
-      className="button-item-drag-handle"
-      span={1}
-    >
-      <CapIcon
-        className="drag-icon"
-        type="drag"
-      />
-    </CapColumn>
-    <CapColumn
-      className="button-item-icon"
-      span={1}
-    >
-      <CapIcon
-        className="link-icon"
-        type="link"
-      />
-    </CapColumn>
-    <CapColumn
-      className="button-item-info"
-      span={14}
-    >
-      <div
-        className="button-item-text-row"
-      >
-        <span
-          className="button-item-text"
-        >
-          Click Me
-        </span>
-      </div>
-    </CapColumn>
-    <CapColumn
-      className="button-item-actions"
-      span={8}
-    >
-      <div
-        className="button-item-url"
-      >
-        https://example.com
-      </div>
-      <div
-        className="action-icons"
-      >
-        <CapIcon
-          className="action-icon"
-          onClick={[Function]}
-          type="edit"
-        />
-        <CapIcon
-          className="action-icon delete-icon"
-          onClick={[Function]}
-          type="delete"
-        />
-      </div>
-    </CapColumn>
-  </CapRow>
-</div>
-`;

package/v2Containers/WebPush/Create/components/tests/__snapshots__/ButtonList.test.js.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ButtonList Rendering should render correctly with default props 1`] = `
-<div
-  className="webpush-button-list"
->
-  <MockButtonItem
-    button={
-      Object {
-        "id": "btn-1",
-        "text": "Primary Button",
-        "type": "primary",
-        "url": "https://example.com",
-      }
-    }
-    disabled={false}
-    index={0}
-    key="btn-1"
-    onDelete={[MockFunction]}
-    onDragEnd={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onEdit={[MockFunction]}
-  />
-  <MockButtonItem
-    button={
-      Object {
-        "id": "btn-2",
-        "text": "Secondary Button",
-        "type": "secondary",
-        "url": "https://example2.com",
-      }
-    }
-    disabled={false}
-    index={1}
-    key="btn-2"
-    onDelete={[MockFunction]}
-    onDragEnd={[Function]}
-    onDragOver={[Function]}
-    onDragStart={[Function]}
-    onDrop={[Function]}
-    onEdit={[MockFunction]}
-  />
-</div>
-`;

package/v2Containers/WebPush/Create/hooks/useButtonManagement.js

@@ -1,150 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { WEBPUSH_BUTTON_TYPES } from '../../constants';
-
-/**
- * Custom hook for managing Web Push CTA buttons
- * @param {Array} initialButtons - Initial button data
- * @returns {Object} Button state and handlers
- */
-export const useButtonManagement = (initialButtons = []) => {
-  const [buttons, setButtons] = useState(initialButtons);
-  const [isAddingButton, setIsAddingButton] = useState(false);
-  const [buttonBeingAdded, setButtonBeingAdded] = useState(null);
-  const [editingButtonIndex, setEditingButtonIndex] = useState(null);
-
-  const handleAddPrimaryButton = useCallback(() => {
-    setIsAddingButton(true);
-    setButtonBeingAdded(WEBPUSH_BUTTON_TYPES.PRIMARY);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleAddSecondaryButton = useCallback(() => {
-    setIsAddingButton(true);
-    setButtonBeingAdded(WEBPUSH_BUTTON_TYPES.SECONDARY);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleButtonSave = useCallback(
-    (buttonData) => {
-      if (editingButtonIndex !== null) {
-        // Editing existing button - preserve existing ID
-        const newButtons = [...buttons];
-        newButtons[editingButtonIndex] = {
-          ...buttonData,
-          id: buttons[editingButtonIndex].id,
-        };
-        setButtons(newButtons);
-      } else {
-        // Adding new button - generate unique ID
-        const buttonWithId = {
-          ...buttonData,
-          id: uuidv4(),
-        };
-        setButtons((prev) => [...prev, buttonWithId]);
-      }
-      setIsAddingButton(false);
-      setButtonBeingAdded(null);
-      setEditingButtonIndex(null);
-    },
-    [buttons, editingButtonIndex],
-  );
-
-  const handleButtonCancel = useCallback(() => {
-    setIsAddingButton(false);
-    setButtonBeingAdded(null);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleButtonEdit = useCallback(
-    (index) => {
-      if (
-        typeof index !== 'number' ||
-        !Number.isInteger(index) ||
-        index < 0 ||
-        index >= buttons.length
-      ) {
-        console.warn(
-          'handleButtonEdit: Invalid index provided',
-          { index, buttonsLength: buttons.length, indexType: typeof index },
-        );
-        return;
-      }
-      setIsAddingButton(true);
-      setButtonBeingAdded(buttons[index].type);
-      setEditingButtonIndex(index);
-    },
-    [buttons],
-  );
-
-  const handleButtonDelete = useCallback(
-    (index) => {
-      const newButtons = [...buttons];
-      newButtons.splice(index, 1);
-      setButtons(newButtons);
-    },
-    [buttons],
-  );
-
-  const handleButtonReorder = useCallback(
-    (fromIndex, toIndex) => {
-      const newButtons = [...buttons];
-      const [movedButton] = newButtons.splice(fromIndex, 1);
-      newButtons.splice(toIndex, 0, movedButton);
-      setButtons(newButtons);
-    },
-    [buttons],
-  );
-
-  const isAddFlow = useMemo(
-    () => isAddingButton && editingButtonIndex === null,
-    [isAddingButton, editingButtonIndex],
-  );
-
-  const isEditFlow = useMemo(
-    () => isAddingButton && editingButtonIndex !== null,
-    [isAddingButton, editingButtonIndex],
-  );
-
-  const showAddPrimaryButton = useMemo(
-    () => buttons.length === 0 && !isAddingButton,
-    [buttons.length, isAddingButton],
-  );
-
-  const showAddSecondaryButton = useMemo(
-    () => buttons.length === 1 && !isAddingButton,
-    [buttons.length, isAddingButton],
-  );
-
-  const showDisabledSecondaryDuringPrimary = useMemo(
-    () => isAddFlow && buttonBeingAdded === WEBPUSH_BUTTON_TYPES.PRIMARY && buttons.length === 0,
-    [isAddFlow, buttonBeingAdded, buttons.length],
-  );
-
-  const disableSecondaryAddButton = useMemo(
-    () => isAddFlow && buttonBeingAdded === WEBPUSH_BUTTON_TYPES.PRIMARY,
-    [isAddFlow, buttonBeingAdded],
-  );
-
-  return {
-    buttons,
-    setButtons,
-    isAddingButton,
-    buttonBeingAdded,
-    editingButtonIndex,
-    handleAddPrimaryButton,
-    handleAddSecondaryButton,
-    handleButtonSave,
-    handleButtonCancel,
-    handleButtonEdit,
-    handleButtonDelete,
-    handleButtonReorder,
-    isAddFlow,
-    isEditFlow,
-    showAddPrimaryButton,
-    showAddSecondaryButton,
-    showDisabledSecondaryDuringPrimary,
-    disableSecondaryAddButton,
-  };
-};
-

package/v2Containers/WebPush/Create/hooks/useButtonManagement.test.js

@@ -1,406 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { act } from 'react';
-import { useButtonManagement } from './useButtonManagement';
-import { WEBPUSH_BUTTON_TYPES } from '../../constants';
-
-describe('useButtonManagement', () => {
-  describe('Initialization', () => {
-    it('should initialize with empty buttons array by default', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      expect(result.current.buttons).toEqual([]);
-      expect(result.current.isAddingButton).toBe(false);
-      expect(result.current.buttonBeingAdded).toBe(null);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-
-    it('should initialize with provided initial buttons', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      expect(result.current.buttons).toEqual(initialButtons);
-    });
-  });
-
-  describe('Adding Buttons', () => {
-    it('should handle adding primary button', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      expect(result.current.isAddingButton).toBe(true);
-      expect(result.current.buttonBeingAdded).toBe(WEBPUSH_BUTTON_TYPES.PRIMARY);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-
-    it('should handle adding secondary button', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddSecondaryButton();
-      });
-
-      expect(result.current.isAddingButton).toBe(true);
-      expect(result.current.buttonBeingAdded).toBe(WEBPUSH_BUTTON_TYPES.SECONDARY);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-  });
-
-  describe('Saving Buttons', () => {
-    it('should add new button when not editing', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      const buttonData = {
-        type: WEBPUSH_BUTTON_TYPES.PRIMARY,
-        text: 'Click Me',
-        url: 'https://example.com',
-      };
-
-      act(() => {
-        result.current.handleButtonSave(buttonData);
-      });
-
-      expect(result.current.buttons).toHaveLength(1);
-      expect(result.current.buttons[0]).toEqual(expect.objectContaining(buttonData));
-      expect(result.current.buttons[0].id).toBeDefined();
-      expect(typeof result.current.buttons[0].id).toBe('string');
-      expect(result.current.isAddingButton).toBe(false);
-      expect(result.current.buttonBeingAdded).toBe(null);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-
-    it('should update existing button when editing', () => {
-      const initialButtons = [
-        { id: 'test-id-1', type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Old Text', url: 'https://old.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonEdit(0);
-      });
-
-      const updatedButtonData = {
-        type: WEBPUSH_BUTTON_TYPES.PRIMARY,
-        text: 'New Text',
-        url: 'https://new.com',
-      };
-
-      act(() => {
-        result.current.handleButtonSave(updatedButtonData);
-      });
-
-      expect(result.current.buttons).toHaveLength(1);
-      expect(result.current.buttons[0]).toEqual(expect.objectContaining(updatedButtonData));
-      expect(result.current.buttons[0].id).toBe('test-id-1'); // ID should be preserved
-      expect(result.current.isAddingButton).toBe(false);
-      expect(result.current.buttonBeingAdded).toBe(null);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-
-    it('should add multiple buttons', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      const button1 = {
-        type: WEBPUSH_BUTTON_TYPES.PRIMARY,
-        text: 'Button 1',
-        url: 'https://example.com/1',
-      };
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-        result.current.handleButtonSave(button1);
-      });
-
-      const button2 = {
-        type: WEBPUSH_BUTTON_TYPES.SECONDARY,
-        text: 'Button 2',
-        url: 'https://example.com/2',
-      };
-
-      act(() => {
-        result.current.handleAddSecondaryButton();
-        result.current.handleButtonSave(button2);
-      });
-
-      expect(result.current.buttons).toHaveLength(2);
-      expect(result.current.buttons[0]).toEqual(expect.objectContaining(button1));
-      expect(result.current.buttons[0].id).toBeDefined();
-      expect(result.current.buttons[1]).toEqual(expect.objectContaining(button2));
-      expect(result.current.buttons[1].id).toBeDefined();
-      expect(result.current.buttons[0].id).not.toBe(result.current.buttons[1].id);
-    });
-  });
-
-  describe('Canceling Button Operations', () => {
-    it('should cancel adding button', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      act(() => {
-        result.current.handleButtonCancel();
-      });
-
-      expect(result.current.isAddingButton).toBe(false);
-      expect(result.current.buttonBeingAdded).toBe(null);
-      expect(result.current.editingButtonIndex).toBe(null);
-    });
-
-    it('should cancel editing button', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonEdit(0);
-      });
-
-      act(() => {
-        result.current.handleButtonCancel();
-      });
-
-      expect(result.current.isAddingButton).toBe(false);
-      expect(result.current.buttonBeingAdded).toBe(null);
-      expect(result.current.editingButtonIndex).toBe(null);
-      expect(result.current.buttons).toEqual(initialButtons);
-    });
-  });
-
-  describe('Editing Buttons', () => {
-    it('should set up editing state for existing button', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonEdit(0);
-      });
-
-      expect(result.current.isAddingButton).toBe(true);
-      expect(result.current.buttonBeingAdded).toBe(WEBPUSH_BUTTON_TYPES.PRIMARY);
-      expect(result.current.editingButtonIndex).toBe(0);
-    });
-
-    it('should set correct button type when editing', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonEdit(0);
-      });
-
-      expect(result.current.buttonBeingAdded).toBe(WEBPUSH_BUTTON_TYPES.SECONDARY);
-    });
-  });
-
-  describe('Deleting Buttons', () => {
-    it('should delete button at specified index', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonDelete(0);
-      });
-
-      expect(result.current.buttons).toHaveLength(1);
-      expect(result.current.buttons[0]).toEqual(initialButtons[1]);
-    });
-
-    it('should delete last button', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonDelete(0);
-      });
-
-      expect(result.current.buttons).toHaveLength(0);
-    });
-
-    it('should delete middle button correctly', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 3', url: 'https://example.com/3' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonDelete(1);
-      });
-
-      expect(result.current.buttons).toHaveLength(2);
-      expect(result.current.buttons[0]).toEqual(initialButtons[0]);
-      expect(result.current.buttons[1]).toEqual(initialButtons[2]);
-    });
-  });
-
-  describe('Reordering Buttons', () => {
-    it('should reorder buttons correctly', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 3', url: 'https://example.com/3' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonReorder(0, 2);
-      });
-
-      expect(result.current.buttons).toHaveLength(3);
-      expect(result.current.buttons[0]).toEqual(initialButtons[1]);
-      expect(result.current.buttons[1]).toEqual(initialButtons[2]);
-      expect(result.current.buttons[2]).toEqual(initialButtons[0]);
-    });
-
-    it('should move button to beginning', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonReorder(1, 0);
-      });
-
-      expect(result.current.buttons[0]).toEqual(initialButtons[1]);
-      expect(result.current.buttons[1]).toEqual(initialButtons[0]);
-    });
-
-    it('should move button to end', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
-        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonReorder(0, 1);
-      });
-
-      expect(result.current.buttons[0]).toEqual(initialButtons[1]);
-      expect(result.current.buttons[1]).toEqual(initialButtons[0]);
-    });
-  });
-
-  describe('Computed Values', () => {
-    it('should return isAddFlow as true when adding new button', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      expect(result.current.isAddFlow).toBe(true);
-      expect(result.current.isEditFlow).toBe(false);
-    });
-
-    it('should return isEditFlow as true when editing existing button', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      act(() => {
-        result.current.handleButtonEdit(0);
-      });
-
-      expect(result.current.isAddFlow).toBe(false);
-      expect(result.current.isEditFlow).toBe(true);
-    });
-
-    it('should show add primary button when no buttons exist', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      expect(result.current.showAddPrimaryButton).toBe(true);
-      expect(result.current.showAddSecondaryButton).toBe(false);
-    });
-
-    it('should show add secondary button when one button exists', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      expect(result.current.showAddPrimaryButton).toBe(false);
-      expect(result.current.showAddSecondaryButton).toBe(true);
-    });
-
-    it('should not show add buttons when adding primary button', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      expect(result.current.showAddPrimaryButton).toBe(false);
-      expect(result.current.showAddSecondaryButton).toBe(false);
-    });
-
-    it('should show disabled secondary during primary add flow', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      act(() => {
-        result.current.handleAddPrimaryButton();
-      });
-
-      expect(result.current.showDisabledSecondaryDuringPrimary).toBe(true);
-      expect(result.current.disableSecondaryAddButton).toBe(true);
-    });
-
-    it('should not show disabled secondary when not in primary add flow', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      expect(result.current.showDisabledSecondaryDuringPrimary).toBe(false);
-      expect(result.current.disableSecondaryAddButton).toBe(false);
-    });
-
-    it('should not show disabled secondary when buttons already exist', () => {
-      const initialButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button', url: 'https://example.com' },
-      ];
-      const { result } = renderHook(() => useButtonManagement(initialButtons));
-
-      expect(result.current.showDisabledSecondaryDuringPrimary).toBe(false);
-      expect(result.current.disableSecondaryAddButton).toBe(false);
-    });
-  });
-
-  describe('setButtons', () => {
-    it('should allow direct button state update', () => {
-      const { result } = renderHook(() => useButtonManagement());
-
-      const newButtons = [
-        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'New Button', url: 'https://example.com' },
-      ];
-
-      act(() => {
-        result.current.setButtons(newButtons);
-      });
-
-      expect(result.current.buttons).toEqual(newButtons);
-    });
-  });
-});
-

package/v2Containers/WebPush/Create/hooks/useCharacterCount.js

@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-
-/**
- * Custom hook for managing character count display and updates
- * @param {Function} formatMessage - i18n format message function
- * @param {Object} messages - Message definitions
- * @returns {Object} Character count utilities
- */
-export const useCharacterCount = (formatMessage, messages) => {
-  /**
-   * Updates the character count display via ref
-   * @param {Object} labelRef - React ref to the label element
-   * @param {number} currentLength - Current character count
-   * @param {number} maxLength - Maximum allowed characters
-   */
-  const updateCharacterCount = useCallback(
-    (labelRef, currentLength, maxLength) => {
-      if (labelRef?.current) {
-        labelRef.current.textContent = formatMessage(messages.characterCount, {
-          currentLength,
-          maxLength,
-        });
-      }
-    },
-    [formatMessage, messages],
-  );
-
-  return { updateCharacterCount };
-};
-