@windstream/react-shared-components 0.2.54 → 0.2.56

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

@@ -0,0 +1,255 @@
+import { constants } from "./constants";
+import { DynamicFormFieldConfig, DynamicFormItem, FormAction } from "./types";
+
+export const generateSubmissionId = (): string => {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+  // RFC4122-ish fallback
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+const isFormField = (
+  item: DynamicFormItem
+): item is DynamicFormItem & { itemType: "formField" } =>
+  item.itemType === "formField";
+
+const isConditional = (
+  item: DynamicFormItem
+): item is DynamicFormItem & { itemType: "conditional" } =>
+  item.itemType === "conditional";
+
+/**
+ * Expand conditional field groups: when the conditional trigger value is "yes"
+ * its nested fields participate in validation / payload building.
+ */
+export const processFields = (
+  items: DynamicFormItem[],
+  formData: Record<string, any>
+): DynamicFormItem[] => {
+  const additional = items.filter(isConditional).flatMap(entry => {
+    const value = formData[entry.fieldId];
+    if (typeof value === "string" && value.toLowerCase() === "yes") {
+      return entry.formFieldsToShow;
+    }
+    return [];
+  });
+  return [...items, ...additional];
+};
+
+export const arrayForFieldValidations = (
+  items: DynamicFormItem[],
+  sftp = false,
+  formData: Record<string, any> = {}
+): any[] => {
+  const processed = processFields(items, formData);
+  return processed.filter(isFormField).map(field => {
+    if (sftp) {
+      return { [field.fieldId]: field.sftpFieldId };
+    }
+    const { fieldId, requiredField, fieldType, formSection, dataSource } =
+      field;
+    return { fieldId, requiredField, fieldType, formSection, dataSource };
+  });
+};
+
+export const buildSftpMap = (
+  items: DynamicFormItem[],
+  formData: Record<string, any> = {}
+): Record<string, string> => {
+  return arrayForFieldValidations(items, true, formData).reduce(
+    (acc, curr) => ({ ...acc, ...curr }),
+    {} as Record<string, string>
+  );
+};
+
+export const groupFormDataBySection = (
+  extractedArray: Array<any>,
+  formObject: Record<string, any>
+): Record<string, Array<Record<string, any>>> => {
+  const groupedData: Record<string, Array<Record<string, any>>> = {};
+  extractedArray.forEach(item => {
+    const { fieldId, formSection } = item;
+    if (!formSection || typeof formSection !== "string") return;
+    if (!groupedData[formSection]) {
+      groupedData[formSection] = [];
+    }
+    if (fieldId in formObject) {
+      groupedData[formSection].push({ [fieldId]: formObject[fieldId] });
+    }
+  });
+  return groupedData;
+};
+
+export const formPayloadCreation = (
+  items: DynamicFormItem[],
+  formData: Record<string, any>
+): Record<string, any> => {
+  const strippedFormData = Object.fromEntries(
+    Object.entries(formData).filter(
+      ([, value]) => value !== "" && value !== undefined
+    )
+  );
+  const extractedArray = arrayForFieldValidations(
+    items,
+    false,
+    strippedFormData
+  );
+
+  const hasMentionedFormSection = extractedArray.every(item => {
+    const formSection = item.formSection;
+    return typeof formSection === "string" && formSection !== "";
+  });
+
+  if (hasMentionedFormSection && extractedArray.length > 0) {
+    return { ...groupFormDataBySection(extractedArray, strippedFormData) };
+  }
+  return { form1: { ...strippedFormData } };
+};
+
+export const getInvalidFields = (
+  elementsArray: Array<any>,
+  formObject: Record<string, any>
+): string[] => {
+  return elementsArray
+    .filter(element => {
+      if (!element.requiredField) return false;
+      const value = formObject[element.fieldId];
+      if (element.fieldType === "Checkbox" && !element.dataSource) {
+        return value !== true;
+      }
+      return value === "" || value === null || value === undefined;
+    })
+    .map(element => element.fieldId);
+};
+
+/**
+ * Build the section-aware, width-aware layout groups used for rendering.
+ * Mirrors the original grouping logic but operates on normalized items.
+ */
+export const groupFieldsForLayout = (items: DynamicFormItem[]): any[] => {
+  const groups: any[] = [];
+  let i = 0;
+
+  while (i < items.length) {
+    const current = items[i];
+
+    if (!isFormField(current)) {
+      groups.push({ type: "single", fields: [current] });
+      i++;
+      continue;
+    }
+
+    const currentValidationGroupId = current.validationGroupId;
+
+    if (currentValidationGroupId) {
+      const groupFields: DynamicFormItem[] = [];
+      let j = i;
+      while (j < items.length) {
+        const field = items[j];
+        if (
+          isFormField(field) &&
+          field.validationGroupId === currentValidationGroupId
+        ) {
+          groupFields.push(field);
+          j++;
+        } else {
+          break;
+        }
+      }
+
+      const validationGroup: any = {
+        type: "validationGroup",
+        validationGroupId: currentValidationGroupId,
+        validationNote: current.validationNote,
+        validationType: current.validationType,
+        subGroups: [] as any[],
+      };
+
+      let k = 0;
+      while (k < groupFields.length) {
+        const field = groupFields[k] as DynamicFormFieldConfig & {
+          itemType: string;
+        };
+        const fieldWidth = field.fieldWidth;
+
+        if (fieldWidth === false) {
+          const nextField = groupFields[k + 1] as
+            | (DynamicFormFieldConfig & { itemType: string })
+            | undefined;
+          if (nextField && nextField.fieldWidth === false) {
+            validationGroup.subGroups.push({
+              type: "double",
+              fields: [field, nextField],
+            });
+            k += 2;
+          } else {
+            validationGroup.subGroups.push({ type: "single", fields: [field] });
+            k++;
+          }
+        } else {
+          validationGroup.subGroups.push({ type: "single", fields: [field] });
+          k++;
+        }
+      }
+
+      groups.push(validationGroup);
+      i = j;
+    } else {
+      const currentFieldWidth = current.fieldWidth;
+      if (currentFieldWidth === false) {
+        const nextField = items[i + 1];
+        if (
+          nextField &&
+          isFormField(nextField) &&
+          nextField.fieldWidth === false &&
+          !nextField.validationGroupId
+        ) {
+          groups.push({ type: "double", fields: [current, nextField] });
+          i += 2;
+        } else {
+          groups.push({ type: "single", fields: [current] });
+          i++;
+        }
+      } else {
+        groups.push({ type: "single", fields: [current] });
+        i++;
+      }
+    }
+  }
+
+  return groups;
+};
+
+export const shouldShowPopup = (
+  items: DynamicFormItem[],
+  formData: Record<string, any>
+): boolean => {
+  return items.some(item => {
+    if (!isFormField(item)) return false;
+    const ds = item.dataSource;
+    if (!Array.isArray(ds)) return false;
+    const selectedValue = formData[item.fieldId];
+    const selectedOption = ds.find((opt: any) => opt.value === selectedValue);
+    return selectedOption?.popup === true;
+  });
+};
+
+export const filterActionsForEmailTemplate = (
+  actions: FormAction[],
+  emailTemplate?: string
+): FormAction[] => {
+  if (!emailTemplate) {
+    return actions.filter(a => a !== "email");
+  }
+  return actions;
+};
+
+export { constants, isFormField, isConditional };

package/src/contentful/blocks/primary-hero/index.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PrimaryHero } from "./index";
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
   Checklist: ({ items }: any) => (
@@ -14,8 +14,14 @@ jest.mock("@shared/components/checklist", () => ({
 }));
 
 jest.mock("@shared/components/next-image", () => ({
-  NextImage: ({ src, alt, className }: any) => (
-    <img data-testid="next-image" src={src} alt={alt} className={className} />
+  NextImage: ({ src, alt, className, onClick }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      className={className}
+      onClick={onClick}
+    />
   ),
 }));
 
@@ -347,6 +353,25 @@ describe("PrimaryHero", () => {
       expect(badges).toHaveLength(2);
     });
 
+    it("adds cursor class and triggers onImageClick for badge image", () => {
+      const onImageClick = jest.fn();
+
+      render(
+        <PrimaryHero
+          {...baseProps}
+          badgeImage="https://img.test/badge.png"
+          onImageClick={onImageClick}
+        />
+      );
+
+      const badges = screen.getAllByAltText("Badge");
+      expect(badges).toHaveLength(2);
+      badges.forEach((badge) => expect(badge).toHaveClass("cursor-pointer"));
+
+      fireEvent.click(badges[0]);
+      expect(onImageClick).toHaveBeenCalledTimes(1);
+    });
+
     it("does not render badge image when not provided", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByAltText("Badge")).not.toBeInTheDocument();

package/src/contentful/blocks/primary-hero/index.tsx

@@ -310,7 +310,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <NextImage
                     src={badgeImageUrl || ""}
                     alt={"Badge"}
-                    className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
+                    className={cx(
+                      "absolute left-5 top-5 aspect-square w-26 object-cover object-center",
+                      onImageClick && "cursor-pointer"
+                    )}
+                    onClick={onImageClick}
                     width={104}
                     height={104}
                     quality={90}

package/src/contentful/index.ts

@@ -102,6 +102,26 @@ export type { TypeCartRetentionBannerFields as CartRetentionBannerProps } from "
 export { IframeEmbed } from "./blocks/iframe-embed";
 export type { IframeEmbedProps } from "./blocks/iframe-embed/types";
 
+export { DynamicForm } from "./blocks/dynamic-form";
+export type {
+  DynamicFormProps,
+  DynamicFormItem,
+  DynamicFormFieldConfig,
+  DynamicFormFieldOption,
+  DynamicFormFieldType,
+  ConditionalFieldConfig,
+  DynamicFormPayload,
+  SubmitHandler,
+  SubmitContext,
+  FormAction,
+  FieldRenderProps,
+  ExistingDataSourceResolver,
+} from "./blocks/dynamic-form/types";
+export {
+  constants as dynamicFormConstants,
+  Regex as dynamicFormRegex,
+} from "./blocks/dynamic-form/constants";
+
 // Contentful Rich Text Hooks & Utils
 export { toDocument } from "../utils/contentful/to-document";