@windstream/react-shared-components 0.2.55 → 0.2.57

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

@@ -0,0 +1,319 @@
+import React from "react";
+import { FormContext, FormContextType } from "./context";
+import FormFieldElement, { FormFieldElementProps } from "./form-field";
+import { FieldRenderProps } 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,
+});
+
+type FieldProps = Partial<FormFieldElementProps> & {
+  fieldId: string;
+  fieldType: FormFieldElementProps["fieldType"];
+};
+
+/**
+ * Renders a FormFieldElement whose inner field component is swapped for a
+ * button so the field's `handleInputChange` can be invoked with a controlled
+ * event, exercising every branch of the change handler deterministically.
+ */
+const setup = (opts: {
+  field: FieldProps;
+  ctx?: Partial<FormContextType>;
+  event?: any;
+}) => {
+  const setFormData = jest.fn();
+  const Trigger: React.FC<FieldRenderProps> = props => (
+    <button
+      data-testid="trigger"
+      onClick={() => props.handleInputChange(opts.event)}
+    >
+      go
+    </button>
+  );
+  const context = makeContext({
+    ...opts.ctx,
+    fieldComponentOverrides: { [opts.field.fieldType]: Trigger },
+  });
+  const utils = render(
+    <FormContext.Provider value={context}>
+      <FormFieldElement
+        formData={{}}
+        setFormData={setFormData}
+        submitErrorFields={[]}
+        {...(opts.field as FormFieldElementProps)}
+      />
+    </FormContext.Provider>
+  );
+  return { ...utils, setFormData, context };
+};
+
+const trigger = () => fireEvent.click(screen.getByTestId("trigger"));
+
+describe("FormFieldElement", () => {
+  it("renders nothing for an unknown field type", () => {
+    const { container } = render(
+      <FormFieldElement
+        formData={{}}
+        setFormData={jest.fn()}
+        submitErrorFields={[]}
+        fieldId="x"
+        fieldType={"Nope" as any}
+      />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders a display label for a standard field", () => {
+    render(
+      <FormFieldElement
+        formData={{}}
+        setFormData={jest.fn()}
+        submitErrorFields={[]}
+        fieldId="firstName"
+        fieldType="Text"
+        displayName="First Name"
+        requiredField
+      />
+    );
+    expect(screen.getByText("First Name")).toBeInTheDocument();
+  });
+
+  it("renders the grouping instruction label for a grouped validation field", () => {
+    render(
+      <FormFieldElement
+        formData={{}}
+        setFormData={jest.fn()}
+        submitErrorFields={[]}
+        fieldId="g1"
+        fieldType="Text"
+        displayName="Group Field"
+        validationGroupId="grp"
+        validationType="At least One Required"
+        validationNote="Provide one of these"
+      />
+    );
+    expect(screen.getByText("Provide one of these")).toBeInTheDocument();
+  });
+
+  it("renders a note when provided", () => {
+    render(
+      <FormFieldElement
+        formData={{}}
+        setFormData={jest.fn()}
+        submitErrorFields={[]}
+        fieldId="firstName"
+        fieldType="Text"
+        displayName="First Name"
+        note="Helpful hint"
+      />
+    );
+    expect(screen.getByText("Helpful hint")).toBeInTheDocument();
+  });
+
+  it("applies an error border class for fields in the submit-error set", () => {
+    const { container } = render(
+      <FormContext.Provider value={makeContext()}>
+        <FormFieldElement
+          formData={{}}
+          setFormData={jest.fn()}
+          submitErrorFields={["Dropdown"]}
+          fieldId="Dropdown"
+          fieldType="Text"
+          displayName="Dropdown"
+        />
+      </FormContext.Provider>
+    );
+    expect(container.querySelector(".rounded-xl")).toBeInTheDocument();
+  });
+
+  describe("handleInputChange", () => {
+    it("stores the raw value for a Checkbox field", () => {
+      const { setFormData, context } = setup({
+        field: { fieldId: "f1", fieldType: "Checkbox", dataSource: [] },
+        event: "a,b",
+      });
+      trigger();
+      expect(context.clearFieldError).toHaveBeenCalledWith("f1");
+      expect(context.setHasError).toHaveBeenCalledWith(false);
+      expect(setFormData.mock.calls[0][0]({})).toEqual({ f1: "a,b" });
+    });
+
+    it("stores the value for a Radio field", () => {
+      const { setFormData } = setup({
+        field: { fieldId: "f1", fieldType: "Radio" },
+        event: "yes",
+      });
+      trigger();
+      expect(setFormData.mock.calls[0][0]({})).toEqual({ f1: "yes" });
+    });
+
+    it("stores the option value for a Dropdown field", () => {
+      const { setFormData, context } = setup({
+        field: { fieldId: "f1", fieldType: "Dropdown" },
+        event: { value: "x" },
+      });
+      trigger();
+      expect(setFormData.mock.calls[0][0]({})).toEqual({ f1: "x" });
+      expect(context.setSelectedState).not.toHaveBeenCalled();
+    });
+
+    it("tracks the selected state for a State List Dropdown", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "state",
+          fieldType: "Dropdown",
+          existingDataSource: "State List",
+        },
+        event: { value: "TX" },
+      });
+      trigger();
+      expect(context.setSelectedState).toHaveBeenCalledWith({ value: "TX" });
+    });
+
+    it("stores the value for a Datepicker field", () => {
+      const { setFormData } = setup({
+        field: { fieldId: "when", fieldType: "Datepicker" },
+        event: "2026-01-01T09:00",
+      });
+      trigger();
+      expect(setFormData.mock.calls[0][0]({})).toEqual({
+        when: "2026-01-01T09:00",
+      });
+    });
+
+    it("raises an error for an empty Datepicker value", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "when",
+          fieldType: "Datepicker",
+          errorMessage: "Pick a date",
+        },
+        event: "",
+      });
+      trigger();
+      expect(context.setHasError).toHaveBeenCalledWith(true);
+      expect(context.setFieldError).toHaveBeenCalledWith("when", "Pick a date");
+      expect(screen.getByText("Pick a date")).toBeInTheDocument();
+    });
+
+    it("stores uploaded files under the 'files' key for Imageupload", () => {
+      const files = [new File(["x"], "a.png", { type: "image/png" })];
+      const { setFormData } = setup({
+        field: { fieldId: "img", fieldType: "Imageupload" },
+        event: files,
+      });
+      trigger();
+      expect(setFormData.mock.calls[0][0]({})).toEqual({ files });
+    });
+
+    it("stores an empty text value and skips further validation", () => {
+      const { setFormData } = setup({
+        field: { fieldId: "f1", fieldType: "Text" },
+        event: { target: { name: "f1", value: "" } },
+      });
+      trigger();
+      expect(setFormData.mock.calls[0][0]({})).toEqual({ f1: "" });
+    });
+
+    it("formats a phone value and flags an incomplete number", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "phone",
+          fieldType: "Text",
+          textInputType: "phone",
+          errorMessage: "Bad phone",
+        },
+        event: { target: { name: "phone", value: "123" } },
+      });
+      trigger();
+      expect(context.setHasError).toHaveBeenCalledWith(true);
+      expect(context.setFieldError).toHaveBeenCalledWith("phone", "Bad phone");
+    });
+
+    it("accepts a complete phone number without flagging an error", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "phone",
+          fieldType: "Text",
+          textInputType: "phone",
+          errorMessage: "Bad phone",
+        },
+        event: { target: { name: "phone", value: "1234567890" } },
+      });
+      trigger();
+      expect(context.setFieldError).not.toHaveBeenCalled();
+    });
+
+    it("flags an invalid email value", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "email",
+          fieldType: "Text",
+          textInputType: "email",
+          errorMessage: "Bad email",
+        },
+        event: { target: { name: "email", value: "not-an-email" } },
+      });
+      trigger();
+      expect(context.setFieldError).toHaveBeenCalledWith("email", "Bad email");
+    });
+
+    it("accepts a valid email value", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "email",
+          fieldType: "Text",
+          textInputType: "email",
+          errorMessage: "Bad email",
+        },
+        event: { target: { name: "email", value: "user@example.com" } },
+      });
+      trigger();
+      expect(context.setFieldError).not.toHaveBeenCalled();
+    });
+
+    it("flags a value that fails a custom regular expression", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "code",
+          fieldType: "Text",
+          applyRegularExpression: true,
+          regexPattern: "^[0-9]+$",
+          errorMessage: "Digits only",
+        },
+        event: { target: { name: "code", value: "abc" } },
+      });
+      trigger();
+      expect(context.setFieldError).toHaveBeenCalledWith("code", "Digits only");
+    });
+
+    it("accepts a value that matches a custom regular expression", () => {
+      const { context } = setup({
+        field: {
+          fieldId: "code",
+          fieldType: "Text",
+          applyRegularExpression: true,
+          regexPattern: "^[0-9]+$",
+          errorMessage: "Digits only",
+        },
+        event: { target: { name: "code", value: "123" } },
+      });
+      trigger();
+      expect(context.setFieldError).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,224 @@
+"use client";
+
+import React, { useContext, useState } from "react";
+import { constants, Regex } from "./constants";
+import { FormContext } from "./context";
+import {
+  formatFormPhoneNumber,
+  FormFieldTypeMap,
+  labelCreator,
+} from "./field-map";
+import { DynamicFormFieldConfig, FieldRenderProps } from "./types";
+
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+type FieldError = { fieldId?: string; errorMessage: string };
+type FormValues = Record<string, any>;
+
+export interface FormFieldElementProps
+  extends Omit<DynamicFormFieldConfig, "itemType"> {
+  loading?: boolean;
+  formData: FormValues;
+  setFormData: (updater: (prev: FormValues) => FormValues) => void;
+  submitErrorFields: string[];
+  isGrouped?: boolean;
+}
+
+const validateEmail = (email: string): boolean => {
+  const [, domainPart] = email.split("@");
+  if (!domainPart || domainPart.includes("..")) return false;
+  return Regex.email.test(email);
+};
+
+export const FormFieldElement: React.FC<FormFieldElementProps> = props => {
+  const context = useContext(FormContext);
+  const {
+    loading,
+    formData,
+    setFormData,
+    submitErrorFields,
+    isGrouped = false,
+    fieldId,
+    fieldType,
+    fieldClassName,
+    displayName,
+    requiredField,
+    textInputType,
+    errorMessage,
+    dataSource,
+    existingDataSource,
+    note,
+    noteClassName,
+    validationNote,
+    validationGroupId,
+    validationType,
+    applyRegularExpression,
+    regexPattern,
+  } = props;
+
+  const [error, setError] = useState<FieldError>({
+    fieldId: "",
+    errorMessage: "",
+  });
+
+  const Override = fieldType
+    ? context?.fieldComponentOverrides?.[fieldType]
+    : undefined;
+  const Component: React.FC<FieldRenderProps> | undefined =
+    Override || (fieldType ? FormFieldTypeMap[fieldType] : undefined);
+
+  if (!Component) {
+    return null;
+  }
+
+  const groupingField = validationGroupId && validationType && !isGrouped;
+  const isConsentCheckbox =
+    fieldType === "Checkbox" && !dataSource && !existingDataSource;
+
+  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 setFieldErrorLocal = (id: string | undefined, message: string) => {
+    setError({ fieldId: id, errorMessage: message });
+  };
+
+  const updateFormData = (name: string, value: any) => {
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleInputChange = (event: any): void => {
+    context?.clearFieldError(fieldId!);
+    setError({ fieldId: "", errorMessage: "" });
+    context?.setHasError(false);
+
+    if (fieldType === "Checkbox" || fieldType === "Radio") {
+      updateFormData(fieldId!, event);
+    } else if (fieldType === "Dropdown") {
+      updateFormData(fieldId!, event?.value);
+      if (existingDataSource === "State List") {
+        context?.setSelectedState(event);
+      }
+    } else if (fieldType === "Datepicker") {
+      if (event) {
+        updateFormData(fieldId!, event);
+      } else {
+        setFieldErrorLocal(fieldId, errorMessage || "");
+        context?.setHasError(true);
+        context?.setFieldError(fieldId!, errorMessage || "");
+      }
+    } else if (fieldType === "Imageupload") {
+      const nextFiles = Array.isArray(event) ? event : [];
+      context?.setFiles(nextFiles);
+      updateFormData(fieldId!, nextFiles);
+      return;
+    } else {
+      const { name, value } = event.target;
+      if (!value) {
+        updateFormData(name, value);
+        return;
+      }
+      if (textInputType === "phone") {
+        const formattedNumber = formatFormPhoneNumber(value);
+        const digitsOnly = formattedNumber.replace(/\D/g, "");
+        updateFormData(name, digitsOnly);
+        event.target.value = digitsOnly;
+        if (digitsOnly.length !== 10) {
+          setFieldErrorLocal(fieldId, errorMessage || "");
+          context?.setHasError(true);
+          context?.setFieldError(fieldId!, errorMessage || "");
+        }
+        return;
+      }
+      if (textInputType === "email" && !validateEmail(value)) {
+        setFieldErrorLocal(fieldId, errorMessage || "");
+        context?.setHasError(true);
+        context?.setFieldError(fieldId!, errorMessage || "");
+      }
+      if (applyRegularExpression && regexPattern) {
+        try {
+          const regex = new RegExp(regexPattern);
+          if (!regex.test(value) && value !== "") {
+            setFieldErrorLocal(fieldId, errorMessage || "");
+            context?.setHasError(true);
+            context?.setFieldError(fieldId!, errorMessage || "");
+          }
+        } catch (error) {
+          context?.onError?.({
+            type: "invalid_regex_pattern",
+            error,
+            metadata: { fieldId, regexPattern },
+          });
+        }
+      }
+      updateFormData(name, value);
+    }
+  };
+
+  return (
+    <div
+      className={cx(
+        groupingField
+          ? "groupingField rounded-b-xl rounded-t-xl border border-border-secondary bg-bg-surface-secondary px-5 pb-5 pt-1"
+          : "",
+        fieldClassName?.split("|")[1] || "w-full"
+      )}
+    >
+      {groupingField && !isGrouped
+        ? labelCreator(
+            validationNote || constants.PROVIDE_AT_LEAST_ONE,
+            true,
+            "body2"
+          )
+        : null}
+
+      {!isConsentCheckbox && labelCreator(displayName, requiredField)}
+
+      <div
+        className={
+          fieldType === "Checkbox" || fieldType === "Radio"
+            ? !isConsentCheckbox
+              ? "mt-6"
+              : ""
+            : ""
+        }
+      >
+        <Component
+          loading={loading}
+          displayName={displayName}
+          requiredField={requiredField}
+          formData={formData}
+          fieldId={fieldId}
+          textInputType={textInputType}
+          handleInputChange={handleInputChange}
+          dataSource={dataSource}
+          error={error}
+          errorClass={errorClass}
+          hasError={hasError}
+          existingDataSource={existingDataSource}
+          isConsentCheckbox={isConsentCheckbox}
+          data-testid="form-component"
+        />
+      </div>
+
+      {error.fieldId === fieldId && error.errorMessage && (
+        <Text as="div" className="footnote text-text-critical">
+          {error.errorMessage}
+        </Text>
+      )}
+      {note && (
+        <Text as="div" className={cx("footnote", noteClassName)}>
+          {note}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+export default FormFieldElement;