@windstream/react-shared-components 0.2.54 → 0.2.56

package/src/contentful/blocks/dynamic-form/conditional-fields.test.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import ConditionalFormFields from "./conditional-fields";
+import { FormContext, FormContextType } from "./context";
+import { DynamicFormItem } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+const makeContext = (
+  overrides: Partial<FormContextType> = {}
+): FormContextType => ({
+  fieldErrors: {},
+  setFieldError: jest.fn(),
+  clearFieldError: jest.fn(),
+  hasError: false,
+  setHasError: jest.fn(),
+  selectedState: null,
+  setSelectedState: jest.fn(),
+  files: [],
+  setFiles: jest.fn(),
+  ...overrides,
+});
+
+const nestedField: DynamicFormItem = {
+  itemType: "formField",
+  fieldId: "detail",
+  fieldType: "Text",
+  displayName: "Account Detail",
+};
+
+const renderConditional = (
+  props: Partial<React.ComponentProps<typeof ConditionalFormFields>> = {},
+  ctx: Partial<FormContextType> = {}
+) => {
+  const setFormData = jest.fn();
+  const utils = render(
+    <FormContext.Provider value={makeContext(ctx)}>
+      <ConditionalFormFields
+        fieldId="hasAccount"
+        displayName="Do you have an account?"
+        requiredField
+        dataSource={[
+          { label: "Yes", value: "yes" },
+          { label: "No", value: "no" },
+        ]}
+        formFieldsToShow={[nestedField]}
+        formData={{}}
+        setFormData={setFormData}
+        submitErrorFields={[]}
+        {...props}
+      />
+    </FormContext.Provider>
+  );
+  return { ...utils, setFormData };
+};
+
+describe("ConditionalFormFields", () => {
+  it("renders the label and radio options", () => {
+    renderConditional();
+    expect(
+      screen.getByText("Do you have an account?")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Yes")).toBeInTheDocument();
+    expect(screen.getByText("No")).toBeInTheDocument();
+  });
+
+  it("renders a note when provided", () => {
+    renderConditional({ note: "Please answer" });
+    expect(screen.getByText("Please answer")).toBeInTheDocument();
+  });
+
+  it("reveals the nested fields when 'yes' is selected", () => {
+    const { setFormData } = renderConditional();
+    expect(screen.queryByText("Account Detail")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("Yes"));
+    expect(screen.getByText("Account Detail")).toBeInTheDocument();
+    expect(setFormData.mock.calls[0][0]({})).toEqual({ hasAccount: "yes" });
+  });
+
+  it("keeps the nested fields hidden when 'no' is selected", () => {
+    renderConditional();
+    fireEvent.click(screen.getByText("No"));
+    expect(screen.queryByText("Account Detail")).not.toBeInTheDocument();
+  });
+
+  it("clears the form error state on change", () => {
+    const setHasError = jest.fn();
+    renderConditional({}, { setHasError });
+    fireEvent.click(screen.getByText("Yes"));
+    expect(setHasError).toHaveBeenCalledWith(false);
+  });
+
+  it("defaults formFieldsToShow to an empty list", () => {
+    render(
+      <FormContext.Provider value={makeContext()}>
+        <ConditionalFormFields
+          fieldId="hasAccount"
+          displayName="Trigger"
+          formFieldsToShow={undefined as any}
+          formData={{}}
+          setFormData={jest.fn()}
+          submitErrorFields={[]}
+        />
+      </FormContext.Provider>
+    );
+    fireEvent.click(screen.getByText("Trigger"));
+    expect(screen.getByText("Trigger")).toBeInTheDocument();
+  });
+});

package/src/contentful/blocks/dynamic-form/conditional-fields.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useContext, useState } from "react";
+import { FormContext } from "./context";
+import { FormFieldTypeMap, labelCreator } from "./field-map";
+import { dynamicRenderingWithGroupings } from "./render";
+import { ConditionalFieldConfig } from "./types";
+
+import { Text } from "@shared/components/text";
+
+type FieldError = { fieldId?: string; errorMessage: string };
+type FormValues = Record<string, any>;
+
+export interface ConditionalFormFieldsProps extends ConditionalFieldConfig {
+  formData: FormValues;
+  setFormData: (updater: (prev: FormValues) => FormValues) => void;
+  submitErrorFields: string[];
+}
+
+const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
+  const context = useContext(FormContext);
+  const {
+    formData,
+    setFormData,
+    submitErrorFields,
+    fieldId,
+    displayName,
+    requiredField,
+    formFieldsToShow = [],
+    dataSource,
+    note,
+  } = props;
+
+  const [showElements, setShowElements] = useState(false);
+  const [error, setError] = useState<FieldError>({
+    fieldId: "",
+    errorMessage: "",
+  });
+
+  const Component = FormFieldTypeMap["Radio"];
+  if (!Component) return null;
+
+  const hasError = submitErrorFields.includes(fieldId);
+  let errorClass = "";
+  if (hasError) {
+    errorClass =
+      fieldId === "Datepicker" || fieldId === "Dropdown"
+        ? "border border-border-critical border-solid rounded-xl"
+        : "border border-border-critical";
+  }
+
+  const handleConditionalInputChange = (event: string): void => {
+    setError({ fieldId: "", errorMessage: "" });
+    context?.setHasError(false);
+    setShowElements(event?.toLowerCase() === "yes");
+    setFormData(prev => ({ ...prev, [fieldId]: event }));
+  };
+
+  return (
+    <div className="w-full">
+      <div className="mb-4">
+        {labelCreator(displayName, requiredField)}
+        <Component
+          displayName={displayName}
+          requiredField={requiredField}
+          formData={formData}
+          fieldId={fieldId}
+          handleInputChange={handleConditionalInputChange}
+          error={error}
+          hasError={hasError}
+          dataSource={dataSource}
+          errorClass={errorClass}
+        />
+        {error.fieldId === fieldId && error.errorMessage && (
+          <Text as="div" className="footnote mt-1 text-text-critical">
+            {error.errorMessage}
+          </Text>
+        )}
+        {note && (
+          <Text as="div" className="footnote mt-1">
+            {note}
+          </Text>
+        )}
+      </div>
+      <div
+        className={`transition duration-300 ease-in-out ${
+          showElements ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
+        }`}
+      >
+        {showElements &&
+          dynamicRenderingWithGroupings(
+            false,
+            formFieldsToShow,
+            formData,
+            setFormData,
+            submitErrorFields
+          )}
+      </div>
+    </div>
+  );
+};
+
+export default ConditionalFormFields;

package/src/contentful/blocks/dynamic-form/constants.ts

@@ -0,0 +1,28 @@
+export const constants = {
+  IP_PHONE_NUMBER: "ip_or_phone",
+  TARGET_EMAIL: "target_email",
+  REQUIRED_FIELDS_MISSING: "Required fields missing",
+  PROVIDE_AT_LEAST_ONE: "Please provide at least one",
+  ONE_REQUIRED_FIELD: "At least One Required",
+};
+
+export const DEFAULT_VALIDATION_ERROR_TEXT =
+  "* Please fill all required fields and checkboxes";
+
+export const Regex = {
+  phone:
+    /^(?:\d{10}|\(\d{3}\)\s\d{3}-\d{4}|\d{3}-\d{3}-\d{4}|\+1\s\d{3}-\d{3}-\d{4})$/,
+  ipv4: /^(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$/,
+  ipv6: /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:))$/,
+  email:
+    /^[a-zA-Z0-9._%+-]+@((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{1,}|(?:\d{1,3}\.){3}\d{1,3})$/,
+};
+
+export const FormFieldTypes = {
+  Imageupload: "Imageupload",
+  Datepicker: "Datepicker",
+  Checkbox: "Checkbox",
+  Dropdown: "Dropdown",
+  Radio: "Radio",
+  Text: "Text",
+} as const;

package/src/contentful/blocks/dynamic-form/context.ts

@@ -0,0 +1,35 @@
+import { createContext } from "react";
+import type React from "react";
+import {
+  DynamicFormFieldType,
+  ExistingDataSourceResolver,
+  FieldRenderProps,
+} from "./types";
+
+export type FormContextType = {
+  fieldErrors: Record<string, string>;
+  setFieldError: (fieldId: string, errorMessage: string) => void;
+  clearFieldError: (fieldId: string) => void;
+  hasError: boolean;
+  setHasError: (error: boolean) => void;
+  selectedState: any;
+  setSelectedState: (state: any) => void;
+  files: File[];
+  setFiles: (files: File[]) => void;
+  /** Injected resolver for app-owned data sources (e.g. State/City lists). */
+  resolveExistingDataSource?: ExistingDataSourceResolver;
+  /** App-provided field renderer overrides. */
+  fieldComponentOverrides?: Partial<
+    Record<DynamicFormFieldType, React.FC<FieldRenderProps>>
+  >;
+  /** Optional error reporter (logger) injected by the app. */
+  onError?: (info: {
+    type: string;
+    error: unknown;
+    metadata?: Record<string, any>;
+  }) => void;
+};
+
+export const FormContext = createContext<FormContextType | undefined>(
+  undefined
+);

package/src/contentful/blocks/dynamic-form/field-map.test.tsx

@@ -0,0 +1,421 @@
+import React from "react";
+import { FormContext, FormContextType } from "./context";
+import {
+  FormFieldTypeMap,
+  formatFormPhoneNumber,
+  labelCreator,
+} from "./field-map";
+import { FieldRenderProps } from "./types";
+
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+
+const baseProps = (
+  overrides: Partial<FieldRenderProps> = {}
+): FieldRenderProps => ({
+  loading: false,
+  displayName: "Field",
+  requiredField: false,
+  formData: {},
+  fieldId: "f1",
+  handleInputChange: jest.fn(),
+  dataSource: null,
+  error: { fieldId: "", errorMessage: "" },
+  errorClass: "",
+  hasError: false,
+  ...overrides,
+});
+
+const makeContext = (
+  overrides: Partial<FormContextType> = {}
+): FormContextType => ({
+  fieldErrors: {},
+  setFieldError: jest.fn(),
+  clearFieldError: jest.fn(),
+  hasError: false,
+  setHasError: jest.fn(),
+  selectedState: null,
+  setSelectedState: jest.fn(),
+  files: [],
+  setFiles: jest.fn(),
+  ...overrides,
+});
+
+const renderWithContext = (
+  ui: React.ReactElement,
+  ctx: Partial<FormContextType> = {}
+) =>
+  render(
+    <FormContext.Provider value={makeContext(ctx)}>{ui}</FormContext.Provider>
+  );
+
+describe("field-map", () => {
+  describe("formatFormPhoneNumber", () => {
+    it("returns empty string for undefined/empty", () => {
+      expect(formatFormPhoneNumber("")).toBe("");
+      expect(formatFormPhoneNumber(undefined as unknown as string)).toBe("");
+    });
+
+    it("formats numbers of varying length", () => {
+      expect(formatFormPhoneNumber("12")).toBe("12");
+      expect(formatFormPhoneNumber("1234")).toBe("123-4");
+      expect(formatFormPhoneNumber("1234567")).toBe("123-456-7");
+      expect(formatFormPhoneNumber("1234567890")).toBe("123-456-7890");
+    });
+
+    it("truncates to 10 digits", () => {
+      expect(formatFormPhoneNumber("123456789012")).toBe("123-456-7890");
+    });
+
+    it("strips non-digit characters", () => {
+      expect(formatFormPhoneNumber("(123) 456-7890")).toBe("123-456-7890");
+    });
+  });
+
+  describe("labelCreator", () => {
+    it("renders the label without a required marker", () => {
+      render(<>{labelCreator("Email")}</>);
+      expect(screen.getByText("Email")).toBeInTheDocument();
+    });
+
+    it("renders a required asterisk when required", () => {
+      const { container } = render(<>{labelCreator("Email", true)}</>);
+      expect(container.querySelector(".text-text-critical")).toHaveTextContent(
+        "*"
+      );
+    });
+  });
+
+  describe("TextInputField", () => {
+    const Text = FormFieldTypeMap.Text;
+
+    it("renders a plain text input and forwards changes", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Text
+          {...baseProps({ formData: { f1: "hello" }, handleInputChange })}
+        />
+      );
+      const input = screen.getByLabelText("Field") as HTMLInputElement;
+      expect(input.value).toBe("hello");
+      fireEvent.change(input, { target: { value: "world" } });
+      expect(handleInputChange).toHaveBeenCalled();
+    });
+
+    it("renders a phone input with a formatted value", () => {
+      render(
+        <Text
+          {...baseProps({
+            textInputType: "phone",
+            formData: { f1: "1234567890" },
+          })}
+        />
+      );
+      const input = screen.getByLabelText("Field") as HTMLInputElement;
+      expect(input.value).toBe("123-456-7890");
+      expect(input).toHaveAttribute("type", "tel");
+    });
+
+    it("renders an empty phone input when no value present", () => {
+      render(<Text {...baseProps({ textInputType: "phone" })} />);
+      const input = screen.getByLabelText("Field") as HTMLInputElement;
+      expect(input.value).toBe("");
+    });
+
+    it("renders a multiline textarea", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Text
+          {...baseProps({ textInputType: "multiline", handleInputChange })}
+        />
+      );
+      const textarea = screen.getByLabelText("Field");
+      expect(textarea.tagName).toBe("TEXTAREA");
+      fireEvent.change(textarea, { target: { value: "abc" } });
+      expect(handleInputChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("ConsentCheckbox", () => {
+    const Checkbox = FormFieldTypeMap.Checkbox;
+
+    it("toggles and reports the new checked state", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Checkbox
+          {...baseProps({ isConsentCheckbox: true, handleInputChange })}
+        />
+      );
+      const checkbox = screen.getByRole("checkbox");
+      fireEvent.click(checkbox);
+      expect(handleInputChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe("CheckboxInputField (multi-select)", () => {
+    const Checkbox = FormFieldTypeMap.Checkbox;
+    const dataSource = [
+      { label: "A", value: "a" },
+      { label: "B", value: "b" },
+    ];
+
+    it("adds a value when an unchecked option is clicked", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Checkbox
+          {...baseProps({ dataSource, formData: {}, handleInputChange })}
+        />
+      );
+      fireEvent.click(screen.getAllByRole("checkbox")[0]);
+      expect(handleInputChange).toHaveBeenCalledWith("a");
+    });
+
+    it("removes a value when a checked option is clicked", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Checkbox
+          {...baseProps({
+            dataSource,
+            formData: { f1: "a,b" },
+            handleInputChange,
+          })}
+        />
+      );
+      fireEvent.click(screen.getAllByRole("checkbox")[0]);
+      expect(handleInputChange).toHaveBeenCalledWith("b");
+    });
+  });
+
+  describe("DatePickerField", () => {
+    const Datepicker = FormFieldTypeMap.Datepicker;
+
+    it("renders a datetime-local input and forwards the value", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Datepicker
+          {...baseProps({ formData: { f1: "2026-01-01T10:00" }, handleInputChange })}
+        />
+      );
+      const input = screen.getByLabelText("Field") as HTMLInputElement;
+      expect(input).toHaveAttribute("type", "datetime-local");
+      fireEvent.change(input, { target: { value: "2026-02-02T12:00" } });
+      expect(handleInputChange).toHaveBeenCalledWith("2026-02-02T12:00");
+    });
+  });
+
+  describe("RadioButtonInputField", () => {
+    const Radio = FormFieldTypeMap.Radio;
+    const dataSource = [
+      { label: "Yes", value: "yes" },
+      { label: "No", value: "no" },
+    ];
+
+    it("renders options and reports the selected value", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Radio
+          {...baseProps({ dataSource, formData: { f1: "yes" }, handleInputChange })}
+        />
+      );
+      const radios = screen.getAllByRole("radio");
+      expect(radios).toHaveLength(2);
+      fireEvent.click(screen.getByText("No"));
+      expect(handleInputChange).toHaveBeenCalledWith("no");
+    });
+  });
+
+  describe("DropdownInputField", () => {
+    const Dropdown = FormFieldTypeMap.Dropdown;
+
+    it("renders with the provided static data source", () => {
+      renderWithContext(
+        <Dropdown
+          {...baseProps({
+            dataSource: [{ label: "One", value: "1" }],
+            formData: { f1: "1" },
+          })}
+        />
+      );
+      expect(screen.getByText("One")).toBeInTheDocument();
+    });
+
+    it("resolves options from an existing data source", async () => {
+      const resolve = jest
+        .fn()
+        .mockResolvedValue([{ label: "Resolved", value: "r" }]);
+      renderWithContext(
+        <Dropdown
+          {...baseProps({ dataSource: null, existingDataSource: "State List" })}
+        />,
+        { resolveExistingDataSource: resolve }
+      );
+      await waitFor(() =>
+        expect(resolve).toHaveBeenCalledWith("State List", {
+          selectedState: null,
+        })
+      );
+    });
+
+    it("reports errors from the resolver", async () => {
+      const resolve = jest.fn().mockRejectedValue(new Error("nope"));
+      const onError = jest.fn();
+      renderWithContext(
+        <Dropdown
+          {...baseProps({ dataSource: null, existingDataSource: "State List" })}
+        />,
+        { resolveExistingDataSource: resolve, onError }
+      );
+      await waitFor(() => expect(onError).toHaveBeenCalled());
+    });
+
+    it("skips resolving for the 'City List' source until a state is selected", async () => {
+      const handleInputChange = jest.fn();
+      renderWithContext(
+        <Dropdown
+          {...baseProps({
+            dataSource: null,
+            existingDataSource: "City List",
+            handleInputChange,
+          })}
+        />
+      );
+      await waitFor(() => expect(handleInputChange).toHaveBeenCalledWith(null));
+    });
+
+    it("fetches cities when a state is already selected", async () => {
+      const resolve = jest
+        .fn()
+        .mockResolvedValue([{ label: "City", value: "c" }]);
+      renderWithContext(
+        <Dropdown
+          {...baseProps({ dataSource: null, existingDataSource: "City List" })}
+        />,
+        { resolveExistingDataSource: resolve, selectedState: { value: "TX" } }
+      );
+      await waitFor(() =>
+        expect(resolve).toHaveBeenCalledWith("City List", {
+          selectedState: { value: "TX" },
+        })
+      );
+    });
+  });
+
+  describe("ImageuploadField", () => {
+    const Imageupload = FormFieldTypeMap.Imageupload;
+
+    beforeAll(() => {
+      global.URL.createObjectURL = jest.fn(() => "blob:preview");
+      global.URL.revokeObjectURL = jest.fn();
+    });
+
+    const imageFile = (name = "pic.png", size = 100) => {
+      const file = new File(["x"], name, { type: "image/png" });
+      Object.defineProperty(file, "size", { value: size });
+      return file;
+    };
+
+    it("adds an accepted image file and shows its preview", async () => {
+      const setFiles = jest.fn();
+      const { container } = renderWithContext(
+        <Imageupload {...baseProps({})} />,
+        { setFiles }
+      );
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [imageFile()] } });
+      });
+      expect(setFiles).toHaveBeenCalled();
+      expect(await screen.findByAltText("pic.png")).toBeInTheDocument();
+    });
+
+    it("rejects non-image files", async () => {
+      const { container } = renderWithContext(<Imageupload {...baseProps({})} />);
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      const textFile = new File(["x"], "notes.txt", { type: "text/plain" });
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [textFile] } });
+      });
+      expect(
+        screen.getByText("Only image files are allowed.")
+      ).toBeInTheDocument();
+    });
+
+    it("rejects when more than five files are added", async () => {
+      const { container } = renderWithContext(<Imageupload {...baseProps({})} />);
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      const files = Array.from({ length: 6 }, (_, i) => imageFile(`p${i}.png`));
+      await act(async () => {
+        fireEvent.change(input, { target: { files } });
+      });
+      expect(
+        screen.getByText("You can only upload a maximum of 5 files.")
+      ).toBeInTheDocument();
+    });
+
+    it("rejects when total size exceeds the 20MB limit", async () => {
+      const { container } = renderWithContext(<Imageupload {...baseProps({})} />);
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      const big = imageFile("big.png", 21 * 1024 * 1024);
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [big] } });
+      });
+      expect(
+        screen.getByText("Total file size should not be more than 20 MB.")
+      ).toBeInTheDocument();
+    });
+
+    it("removes a previously added file", async () => {
+      const handleInputChange = jest.fn();
+      const { container } = renderWithContext(
+        <Imageupload {...baseProps({ handleInputChange })} />
+      );
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [imageFile()] } });
+      });
+      const removeButton = await screen.findByRole("button", { name: "Remove" });
+      fireEvent.click(removeButton);
+      expect(handleInputChange).toHaveBeenCalled();
+    });
+
+    it("accepts files dropped onto the dropzone", async () => {
+      const setFiles = jest.fn();
+      renderWithContext(<Imageupload {...baseProps({})} />, { setFiles });
+      const dropzone = screen.getByText("Drop files here or")
+        .parentElement as HTMLElement;
+      await act(async () => {
+        fireEvent.dragOver(dropzone);
+        fireEvent.dragLeave(dropzone);
+        fireEvent.drop(dropzone, {
+          dataTransfer: { files: [imageFile()], clearData: jest.fn() },
+        });
+      });
+      expect(setFiles).toHaveBeenCalled();
+    });
+
+    it("opens the native file dialog when 'Choose files' is clicked", () => {
+      const { container } = renderWithContext(<Imageupload {...baseProps({})} />);
+      const input = container.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement;
+      const clickSpy = jest.spyOn(input, "click").mockImplementation(() => {});
+      fireEvent.click(screen.getByRole("button", { name: /choose files/i }));
+      expect(clickSpy).toHaveBeenCalled();
+    });
+  });
+});