@windstream/react-shared-components 0.2.55 → 0.2.57

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/fiber-form/index.tsx

@@ -536,6 +536,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
             <Button
               type="submit"
               disabled={isSubmitting}
+              aria-busy={isSubmitting}
               className={cx(
                 "flex h-16 w-[198px] max-w-full cursor-pointer items-center justify-center overflow-hidden rounded-button border border-brand bg-bg-fill-brand px-[60px] py-4 text-center font-black leading-7 text-text-brand-on-bg-fill no-underline transition-colors duration-300 ease-in-out enabled:hover:border-[var(--color-bg-fill-brand-hover)] enabled:hover:bg-bg-fill-brand-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-brand disabled:cursor-not-allowed",
                 isSubmitting && "opacity-75",

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";