@capillarytech/creatives-library 8.0.126 → 8.0.127-alpha.1

package/v2Containers/MobilePushNew/components/tests/PlatformContentFields.test.js

@@ -0,0 +1,343 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { IntlProvider } from "react-intl";
+import PlatformContentFields from "../PlatformContentFields";
+import {
+  ANDROID, IOS, DEEP_LINK, EXTERNAL_LINK,
+} from "../../constants";
+
+// Simple mock components
+jest.mock("@capillarytech/cap-ui-library/CapRow", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapColumn", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapInput", () => ({
+  value, onChange, errorMessage, ...props
+}) => (
+  <div>
+    <input value={value || ""} onChange={onChange} {...props} />
+    {errorMessage && <div data-testid="error-message">{errorMessage}</div>}
+  </div>
+));
+jest.mock("@capillarytech/cap-ui-library/CapHeading", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapError", () => ({ children }) => <div data-testid="cap-error">{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapDivider", () => () => <div data-testid="divider" />);
+jest.mock("@capillarytech/cap-ui-library/CapSelect", () => ({
+  CapCustomSelect: ({ value, onChange, options }) => (
+    <select value={value} onChange={(e) => onChange && onChange(e.target.value)}>
+      {options?.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+jest.mock("@capillarytech/cap-ui-library/CapCheckbox", () => ({ checked, onChange, children }) => (
+  <div>
+    <input type="checkbox" checked={checked} onChange={onChange} data-testid="action-checkbox" />
+    <span>{children}</span>
+  </div>
+));
+jest.mock("@capillarytech/cap-ui-library/CapLabel", () => ({ children }) => <label>{children}</label>);
+jest.mock("@capillarytech/cap-ui-library/CapInfoNote", () => ({ message }) => <div data-testid="info-note">{message}</div>);
+
+// Mock child components
+jest.mock("../../../TagList", () => () => <div data-testid="tag-list">TagList</div>);
+jest.mock("../MediaUploaders", () => () => <div data-testid="media-uploaders">MediaUploaders</div>);
+jest.mock("../CtaButtons", () => () => <div data-testid="cta-buttons">CtaButtons</div>);
+
+// Mock messages
+jest.mock("../../messages", () => ({
+  sameContentNote: { id: "sameContentNote", defaultMessage: "Same content note" },
+  title: { id: "title", defaultMessage: "Title" },
+  titlePlaceholder: { id: "titlePlaceholder", defaultMessage: "Enter title" },
+  message: { id: "message", defaultMessage: "Message" },
+  messagePlaceholder: { id: "messagePlaceholder", defaultMessage: "Enter message" },
+  mediaType: { id: "mediaType", defaultMessage: "Media Type" },
+  buttonsAndLinks: { id: "buttonsAndLinks", defaultMessage: "Buttons and Links" },
+  optionalText: { id: "optionalText", defaultMessage: "Optional" },
+  actionOnClickBody: { id: "actionOnClickBody", defaultMessage: "Action on click" },
+  actionDescription: { id: "actionDescription", defaultMessage: "Action description" },
+  linkType: { id: "linkType", defaultMessage: "Link Type" },
+  selectDeepLink: { id: "selectDeepLink", defaultMessage: "Select deep link" },
+  deepLink: { id: "deepLink", defaultMessage: "Deep Link" },
+  externalLink: { id: "externalLink", defaultMessage: "External Link" },
+  enterExternalLink: { id: "enterExternalLink", defaultMessage: "Enter external link" },
+}));
+
+// Mock constants
+jest.mock("../../constants", () => ({
+  ANDROID: "android",
+  IOS: "ios",
+  MEDIA_TYPES_OPTIONS: [
+    { value: "IMAGE", label: "Image" },
+    { value: "VIDEO", label: "Video" },
+    { value: "CAROUSEL", label: "Carousel" },
+  ],
+  LINK_TYPE_OPTIONS: [
+    { value: "DEEP_LINK", label: "Deep Link" },
+    { value: "EXTERNAL_LINK", label: "External Link" },
+  ],
+  DEEP_LINK: "DEEP_LINK",
+  EXTERNAL_LINK: "EXTERNAL_LINK",
+}));
+
+describe("PlatformContentFields", () => {
+  const defaultProps = {
+    deviceType: ANDROID,
+    content: {
+      title: "Test Title",
+      message: "Test Message",
+      mediaType: "IMAGE",
+      actionOnClick: false,
+      linkType: DEEP_LINK,
+    },
+    errors: {
+      title: "",
+      message: "",
+      externalLink: "",
+    },
+    handlers: {
+      handleTitleChange: jest.fn(),
+      handleMessageChange: jest.fn(),
+      handleMediaTypeChange: jest.fn(),
+      handleActionOnClickChange: jest.fn(),
+      handleLinkTypeChange: jest.fn(),
+      handleDeepLinkChange: jest.fn(),
+      handleExternalLinkChange: jest.fn(),
+      onTagSelect: jest.fn(),
+      handleOnTagsContextChange: jest.fn(),
+    },
+    tagListProps: {
+      tags: ["tag1", "tag2"],
+    },
+    mediaUploaderProps: {
+      uploadProps: "test",
+    },
+    ctaButtonProps: {
+      buttons: [],
+    },
+    linkProps: {
+      deepLink: [
+        { value: "link1", label: "Link 1" },
+        { value: "link2", label: "Link 2" },
+      ],
+      deepLinkValue: "link1",
+      externalLinkValue: "https://example.com",
+    },
+    sameContent: false,
+    formatMessage: jest.fn((msg) => msg.defaultMessage),
+  };
+
+  const renderComponent = (props = {}) => render(
+    <IntlProvider locale="en">
+      <PlatformContentFields {...defaultProps} {...props} />
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic Rendering", () => {
+    it("should render without crashing", () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it("should render title input with correct value", () => {
+      const { container } = renderComponent();
+      const titleInput = container.querySelector('input[value="Test Title"]');
+      expect(titleInput).toBeInTheDocument();
+    });
+
+    it("should render message input with correct value", () => {
+      const { container } = renderComponent();
+      const messageInput = container.querySelector('input[value="Test Message"]');
+      expect(messageInput).toBeInTheDocument();
+    });
+
+    it("should render MediaUploaders component", () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId("media-uploaders")).toBeInTheDocument();
+    });
+
+    it("should render CtaButtons component", () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId("cta-buttons")).toBeInTheDocument();
+    });
+
+    it("should render TagList components", () => {
+      const { getAllByTestId } = renderComponent();
+      const tagLists = getAllByTestId("tag-list");
+      expect(tagLists).toHaveLength(2);
+    });
+  });
+
+  describe("Title Field", () => {
+    it("should call title change handler", () => {
+      const { container } = renderComponent();
+      const titleInput = container.querySelector('input[value="Test Title"]');
+
+      fireEvent.change(titleInput, { target: { value: "New Title" } });
+
+      expect(defaultProps.handlers.handleTitleChange).toHaveBeenCalled();
+    });
+
+    it("should display title error when present", () => {
+      const { getByTestId } = renderComponent({
+        errors: { ...defaultProps.errors, title: "Title is required" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Title is required");
+    });
+  });
+
+  describe("Message Field", () => {
+    it("should call message change handler", () => {
+      const { container } = renderComponent();
+      const messageInput = container.querySelector('input[value="Test Message"]');
+
+      fireEvent.change(messageInput, { target: { value: "New Message" } });
+
+      expect(defaultProps.handlers.handleMessageChange).toHaveBeenCalled();
+    });
+
+    it("should display message error when present", () => {
+      const { getByTestId } = renderComponent({
+        errors: { ...defaultProps.errors, message: "Message is required" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Message is required");
+    });
+  });
+
+  describe("Media Type Selection", () => {
+    it("should call media type change handler", () => {
+      const { container } = renderComponent();
+      const mediaSelect = container.querySelector('select');
+
+      fireEvent.change(mediaSelect, { target: { value: "VIDEO" } });
+
+      expect(defaultProps.handlers.handleMediaTypeChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("Action on Click", () => {
+    it("should call action on click change handler", () => {
+      const { getByTestId } = renderComponent();
+      const checkbox = getByTestId("action-checkbox");
+
+      fireEvent.click(checkbox);
+
+      expect(defaultProps.handlers.handleActionOnClickChange).toHaveBeenCalled();
+    });
+
+    it("should show action controls when actionOnClick is true", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true },
+      });
+
+      expect(container.textContent).toContain("Link Type");
+    });
+
+    it("should hide action controls when actionOnClick is false", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: false },
+      });
+
+      expect(container.textContent).not.toContain("Link Type");
+    });
+  });
+
+  describe("Device Type Handling", () => {
+    it("should render with Android device type", () => {
+      const { container } = renderComponent({ deviceType: ANDROID });
+      const titleInput = container.querySelector('#mobile-push-title-name-input-android');
+      expect(titleInput).toBeInTheDocument();
+    });
+
+    it("should render with iOS device type", () => {
+      const { container } = renderComponent({ deviceType: IOS });
+      const titleInput = container.querySelector('#mobile-push-title-name-input-ios');
+      expect(titleInput).toBeInTheDocument();
+    });
+  });
+
+  describe("External Link Input", () => {
+    it("should call external link change handler", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true, linkType: EXTERNAL_LINK },
+      });
+
+      const externalLinkInput = container.querySelector('input[value="https://example.com"]');
+
+      if (externalLinkInput) {
+        fireEvent.change(externalLinkInput, { target: { value: "https://newlink.com" } });
+        expect(defaultProps.handlers.handleExternalLinkChange).toHaveBeenCalled();
+      }
+    });
+
+    it("should display external link error when present", () => {
+      const { getByTestId } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true, linkType: EXTERNAL_LINK },
+        errors: { ...defaultProps.errors, externalLink: "Invalid URL" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Invalid URL");
+    });
+  });
+
+  describe("Carousel Media Type", () => {
+    it("should hide action controls when mediaType is CAROUSEL", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, mediaType: "CAROUSEL" },
+      });
+
+      expect(container.textContent).not.toContain("Buttons and Links");
+    });
+
+    it("should show action controls when mediaType is not CAROUSEL", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, mediaType: "IMAGE" },
+      });
+
+      expect(container.textContent).toContain("Buttons and Links");
+    });
+  });
+
+  describe("formatMessage Integration", () => {
+    it("should call formatMessage with correct arguments", () => {
+      renderComponent();
+
+      expect(defaultProps.formatMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: "titlePlaceholder",
+          defaultMessage: "Enter title",
+        })
+      );
+    });
+  });
+
+  describe("Error Handling", () => {
+    it("should handle missing linkProps gracefully", () => {
+      const { container } = renderComponent({
+        linkProps: {},
+      });
+
+      expect(container).toBeInTheDocument();
+    });
+
+    it("should handle undefined values gracefully", () => {
+      const { container } = renderComponent({
+        content: {
+          ...defaultProps.content,
+          title: undefined,
+          message: undefined,
+        },
+      });
+
+      expect(container).toBeInTheDocument();
+    });
+  });
+});

package/v2Containers/MobilePushNew/constants.js

@@ -0,0 +1,115 @@
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+export const CREATE_TEMPLATE_REQUEST = 'app/v2Containers/MPUSH_NEW/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/v2Containers/MPUSH_NEW/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/MPUSH_NEW/Create/CREATE_TEMPLATE_FAILURE';
+
+export const UPLOAD_ASSET_REQUEST = 'app/v2Containers/MPUSH_NEW/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/v2Containers/MPUSH_NEW/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/v2Containers/MPUSH_NEW/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/v2Containers/MPUSH_NEW/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/MPUSH_NEW/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/MPUSH_NEW/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/MPUSH_NEW/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+export const GET_IOS_CTAS = 'app/v2Containers/MPUSH_NEW/Create/GET_IOS_CTAS';
+export const GET_IOS_CTAS_SUCCESS = 'app/v2Containers/MPUSH_NEW/Create/GET_IOS_CTAS_SUCCESS';
+export const GET_IOS_CTAS_FAILURE = 'app/v2Containers/MPUSH_NEW/Create/GET_IOS_CTAS_FAILURE';
+export const RESET_STORE = 'app/v2Containers/MPUSH_NEW/Create/RESET_STORE';
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/MPUSH_NEW/Create/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/MPUSH_NEW/Create/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/MPUSH_NEW/Create/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/MPUSH_NEW/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/MPUSH_NEW/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/MPUSH_NEW/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/MPUSH_NEW/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/v2Containers/MPUSH_NEW/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/v2Containers/MPUSH_NEW/Edit/SET_SELECTED_TEMPLATE';
+
+export const SET_WECHAT_ACCOUNT = "app/v2Containers/MobilePush/SET_WECHAT_ACCOUNT";
+export const GET_WECRM_ACCOUNTS_REQUEST = "app/v2Containers/MobilePush/GET_WECRM_ACCOUNTS_REQUEST";
+export const GET_WECRM_ACCOUNTS_SUCCESS = "app/v2Containers/MobilePush/GET_WECRM_ACCOUNTS_SUCCESS";
+export const GET_WECRM_ACCOUNTS_FAILURE = "app/v2Containers/MobilePush/GET_WECRM_ACCOUNTS_FAILURE";
+
+export const GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST = 'app/v2Containers/WeChat/MPUSH_NEW_TEMPLATES_LIST_REQUEST';
+export const GET_MOBILEPUSH_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/WeChat/MPUSH_NEW_TEMPLATES_LIST_SUCCESS';
+export const GET_MOBILEPUSH_TEMPLATES_LIST_FAILURE = 'app/v2Containers/WeChat/MPUSH_NEW_TEMPLATES_LIST_FAILURE';
+
+export const MAPP_SDK = 'MAPP_SDK';
+
+export const MEDIA_TYPES_OPTIONS = [
+  { label: "NONE", value: "NONE" },
+  { label: "IMAGE", value: "IMAGE" },
+  { label: "VIDEO", value: "VIDEO" },
+  { label: "GIF", value: "GIF" },
+  { label: "CAROUSEL", value: "CAROUSEL" },
+];
+
+export const MOBILE_PUSH_CHANNEL = "MOBILEPUSH";
+export const ANDROID = "ANDROID";
+export const IOS = "IOS";
+export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+export const MPUSH_IMG_SIZE = 2000000; // 2MB
+export const MPUSH_VIDEO_SIZE = 209715200; // 200MB (200 * 1024 * 1024)
+export const ALLOWED_EXTENSIONS_VIDEO_REGEX = /\.(3gp|mp4|mov|m4v)$/i;
+export const ALLOWED_GIF_REGEX = /\.(gif)$/i;
+export const MPUSH_GIF_SIZE = 209715200; // 200MB (200 * 1024 * 1024)
+
+// Image dimension limits (in pixels)
+export const MPUSH_IMG_MAX_WIDTH = 2048;
+export const MPUSH_IMG_MAX_HEIGHT = 2048;
+
+// File size limits for validation displays
+export const MAX_VIDEO_DURATION = 600; // 10 minutes in seconds
+export const MIN_VIDEO_DURATION = 1; // 1 second minimum
+
+export const DEEP_LINK = 'DEEP_LINK';
+export const EXTERNAL_LINK = 'EXTERNAL_LINK';
+
+export const LINK_TYPE_OPTIONS = [
+  { label: 'Deep Link', value: DEEP_LINK },
+  { label: 'External Link', value: EXTERNAL_LINK },
+];
+
+export const EXTERNAL_LINK_LOWERCASE = 'external link';
+export const PRIMARY = 'PRIMARY';
+export const SECONDARY = 'SECONDARY';
+
+export const INITIAL_CTA_DATA = [];
+
+// Additional validation constants
+export const IMAGE_SIZE_TEXT = '2 MB';
+export const VIDEO_SIZE_TEXT = '200 MB';
+export const GIF_SIZE_TEXT = '200 MB';
+export const IMAGE_FORMAT_TEXT = 'JPEG, PNG';
+export const VIDEO_FORMAT_TEXT = '3GP, MP4, MOV, M4V';
+export const GIF_FORMAT_TEXT = 'GIF';
+
+// File size limits for validation
+export const MAX_IMAGE_DIMENSION = 2048; // 2048x2048 pixels
+
+
+export const IMAGE = "IMAGE";
+export const VIDEO = "VIDEO";
+export const GIF = "GIF";
+export const CAROUSEL = "CAROUSEL";
+export const MANUAL_CAROUSEL = "MANUAL_CAROUSEL";
+export const AUTO_CAROUSEL = "AUTO_CAROUSEL";
+export const FILMSTRIP_CAROUSEL = "FILMSTRIP_CAROUSEL";
+export const TEXT = "TEXT";
+export const BIG_TEXT = "BIG_TEXT";
+export const BIG_PICTURE = "BIG_PICTURE";
+export const INITIAL_CONTENT = {
+  title: "",
+  message: "",
+  mediaType: "NONE",
+  buttons: [],
+  actionOnClick: false,
+  linkType: DEEP_LINK,
+  deepLinkValue: "",
+  externalLinkValue: "",
+  carouselData: [], // Platform-specific carousel data
+};