@windstream/react-shared-components 0.2.60 → 0.2.61

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

@@ -189,6 +189,27 @@ describe("field-map", () => {
       fireEvent.click(screen.getAllByRole("checkbox")[0]);
       expect(handleInputChange).toHaveBeenCalledWith("b");
     });
+
+    it("gives each option a unique id so labels target the correct input", () => {
+      render(
+        <Checkbox {...baseProps({ dataSource, formData: {} })} />
+      );
+      const ids = screen
+        .getAllByRole("checkbox")
+        .map(input => input.getAttribute("id"));
+      expect(new Set(ids).size).toBe(ids.length);
+    });
+
+    it("selects a non-first option when its label is clicked", () => {
+      const handleInputChange = jest.fn();
+      render(
+        <Checkbox
+          {...baseProps({ dataSource, formData: {}, handleInputChange })}
+        />
+      );
+      fireEvent.click(screen.getByText("B"));
+      expect(handleInputChange).toHaveBeenCalledWith("b");
+    });
   });
 
   describe("DatePickerField", () => {

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

@@ -45,8 +45,22 @@ const TextInputField: React.FC<FieldRenderProps> = args => {
     handleInputChange,
     fieldId,
     errorClass,
+    enableAddressAutocomplete,
   } = args;
 
+  const context = useContext(FormContext);
+  const AddressAutocomplete = context?.renderAddressAutocomplete;
+  const shouldUseAddressAutocomplete =
+    !!enableAddressAutocomplete &&
+    !!AddressAutocomplete &&
+    textInputType !== "phone" &&
+    textInputType !== "email" &&
+    textInputType !== "multiline";
+
+  if (shouldUseAddressAutocomplete && AddressAutocomplete) {
+    return <AddressAutocomplete {...args} />;
+  }
+
   if (textInputType === "phone") {
     return (
       <div className="w-full">
@@ -160,6 +174,7 @@ const CheckboxInputField: React.FC<FieldRenderProps> = args => {
         <div key={`${fieldId}-${idx}`} className="w-full lg:w-[384px]">
           <Checkbox
             name={fieldId}
+            id={`${fieldId}-${idx}`}
             label={data.label}
             value={data.value}
             checked={selectedValues.includes(data.value)}

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

@@ -55,6 +55,7 @@ export const FormFieldElement: React.FC<FormFieldElementProps> = props => {
     validationType,
     applyRegularExpression,
     regexPattern,
+    enableAddressAutocomplete,
   } = props;
 
   const [error, setError] = useState<FieldError>({
@@ -203,6 +204,7 @@ export const FormFieldElement: React.FC<FormFieldElementProps> = props => {
           hasError={hasError}
           existingDataSource={existingDataSource}
           isConsentCheckbox={isConsentCheckbox}
+          enableAddressAutocomplete={enableAddressAutocomplete}
           data-testid="form-component"
         />
       </div>

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

@@ -21,10 +21,12 @@ import {
 import {
   arrayForFieldValidations,
   buildSftpMap,
+  extractErrorDetails,
   filterActionsForEmailTemplate,
   formPayloadCreation,
   generateSubmissionId,
   getInvalidFields,
+  sanitizeError,
   shouldShowPopup,
 } from "./utils";
 
@@ -117,6 +119,8 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
     onError,
     fieldComponentOverrides,
     resolveExistingDataSource,
+    renderAddressAutocomplete,
+    renderSubmitButton,
   } = props;
 
   const submissionIdRef = useRef<string>(generateSubmissionId());
@@ -182,6 +186,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
       setFiles: updateFiles,
       resolveExistingDataSource,
       fieldComponentOverrides,
+      renderAddressAutocomplete,
       onError,
     }),
     [
@@ -194,6 +199,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
       updateFiles,
       resolveExistingDataSource,
       fieldComponentOverrides,
+      renderAddressAutocomplete,
       onError,
     ]
   );
@@ -266,25 +272,38 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
             });
           } catch (error) {
             errorActions.push(action);
+            const { errorMessage, errorStatus, errorCode } =
+              extractErrorDetails(error);
             onTrack?.(`${segmentEventId}_${action}_failure`, {
               ...payload,
               eventSuccess: false,
+              errorMessage,
+              errorStatus,
+              errorCode,
             });
             onError?.({
               type: "action_failure",
-              error,
+              error: sanitizeError(error),
               metadata: { action, submissionId: submissionIdRef.current },
             });
           }
         } else {
           errorActions.push(action);
+          const unsupportedError = new Error(
+            `Action "${action}" is not supported`
+          );
+          const { errorMessage, errorStatus, errorCode } =
+            extractErrorDetails(unsupportedError);
           onTrack?.(`${segmentEventId}_${action}_failure`, {
             ...payload,
             eventSuccess: false,
+            errorMessage,
+            errorStatus,
+            errorCode,
           });
           onError?.({
             type: "unsupported_action",
-            error: new Error(`Action "${action}" is not supported`),
+            error: unsupportedError,
             metadata: { action },
           });
         }
@@ -302,7 +321,11 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
     const newFormData = applyPresetValidations();
 
     try {
-      const extractedArray = arrayForFieldValidations(fields, false, newFormData);
+      const extractedArray = arrayForFieldValidations(
+        fields,
+        false,
+        newFormData
+      );
       const sftpMap = buildSftpMap(fields, newFormData);
       const invalidFields = getInvalidFields(extractedArray, newFormData);
       setSubmitErrorFields(invalidFields);
@@ -433,7 +456,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
 
       onError?.({
         type: errorType,
-        error,
+        error: sanitizeError(error),
         metadata: {
           formName,
           submissionId: submissionIdRef.current,
@@ -522,18 +545,27 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
                   </Text>
                 )}
                 <div className="flex justify-center">
-                  <Button
-                    type="submit"
-                    disabled={hasError || isLoading}
-                    aria-label="Submit Form"
-                    className={cx(
-                      "button-submit mt-3 inline-flex h-[64px] w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-bg-fill-brand px-[60px] text-base font-semibold text-text-brand-on-bg-fill transition hover:bg-bg-fill-brand-hover disabled:bg-bg-fill-brand-disabled md:mt-8 md:w-auto",
-                      ctaClassName
-                    )}
-                  >
-                    {isLoading && <Spinner />}
-                    {submitLabel}
-                  </Button>
+                  {renderSubmitButton ? (
+                    renderSubmitButton({
+                      isLoading,
+                      disabled: hasError || isLoading,
+                      submitLabel,
+                      onSubmit: handleSubmit,
+                    })
+                  ) : (
+                    <Button
+                      type="submit"
+                      disabled={hasError || isLoading}
+                      aria-label="Submit Form"
+                      className={cx(
+                        "button-submit mt-3 inline-flex h-[64px] w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-bg-fill-brand px-[60px] text-base font-semibold text-text-brand-on-bg-fill transition hover:bg-bg-fill-brand-hover disabled:bg-bg-fill-brand-disabled md:mt-8 md:w-auto",
+                        ctaClassName
+                      )}
+                    >
+                      {isLoading && <Spinner />}
+                      {submitLabel}
+                    </Button>
+                  )}
                 </div>
               </form>
             </FormContext.Provider>

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

@@ -42,6 +42,7 @@ const renderItem = (
         formData={formData}
         setFormData={setFormData}
         submitErrorFields={submitErrorFields}
+        renderConditionalFields={dynamicRenderingWithGroupings}
       />
     );
   }

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

@@ -51,6 +51,8 @@ export interface DynamicFormFieldConfig {
   regexPattern?: string;
   applyPresetValidations?: boolean;
   selectPresetValidationsToApply?: string;
+  /** When true, a Text field renders the app-injected address autocomplete. */
+  enableAddressAutocomplete?: boolean;
 }
 
 export interface ConditionalFieldConfig {
@@ -60,6 +62,11 @@ export interface ConditionalFieldConfig {
   dataSource?: DynamicFormFieldOption[] | null;
   note?: string;
   formFieldsToShow: DynamicFormItem[];
+  /**
+   * When true, the app has opted this field into the grouped layout styling.
+   * Injected by the consuming app so the shared package stays route-agnostic.
+   */
+  grouped?: boolean;
 }
 
 /**
@@ -128,6 +135,7 @@ export interface FieldRenderProps {
   hasError: boolean;
   existingDataSource?: string;
   isConsentCheckbox?: boolean;
+  enableAddressAutocomplete?: boolean;
   [key: string]: any;
 }
 
@@ -208,4 +216,22 @@ export interface DynamicFormProps {
     Record<DynamicFormFieldType, React.FC<FieldRenderProps>>
   >;
   resolveExistingDataSource?: ExistingDataSourceResolver;
+
+  /**
+   * App-injected renderer for address-autocomplete Text fields. The package is
+   * transport-agnostic, so address suggestion fetching lives in the app.
+   */
+  renderAddressAutocomplete?: React.FC<FieldRenderProps>;
+
+  /**
+   * App-injected submit button, so the app can attach its own CTA analytics,
+   * query-param preservation and animation. When omitted a default button is
+   * rendered.
+   */
+  renderSubmitButton?: (args: {
+    isLoading: boolean;
+    disabled: boolean;
+    submitLabel: string;
+    onSubmit: (event: any) => void;
+  }) => React.ReactNode;
 }

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

@@ -2,12 +2,14 @@ import { DynamicFormItem } from "./types";
 import {
   arrayForFieldValidations,
   buildSftpMap,
+  extractErrorDetails,
   filterActionsForEmailTemplate,
   formPayloadCreation,
   generateSubmissionId,
   getInvalidFields,
   groupFieldsForLayout,
   processFields,
+  sanitizeErrorMessage,
   shouldShowPopup,
 } from "./utils";
 
@@ -235,4 +237,88 @@ describe("dynamic-form/utils", () => {
       }
     });
   });
+
+  describe("sanitizeErrorMessage", () => {
+    it("redacts bearer tokens including +, /, and = characters", () => {
+      const credential = "ab+cd/ef=gh";
+      const result = sanitizeErrorMessage(
+        `Request failed with ${"Bearer"} ${credential} and retry`
+      );
+      expect(result).toBe("Request failed with Bearer [REDACTED] and retry");
+      expect(result).not.toContain(credential);
+    });
+
+    it("redacts Authorization headers", () => {
+      const secret = "dXNlcjpwYXNzd29yZA==";
+      const result = sanitizeErrorMessage(`Authorization: ${secret}`);
+      expect(result).toBe("Authorization: [REDACTED]");
+      expect(result).not.toContain(secret);
+    });
+
+    it("redacts api key, token, secret, and password values", () => {
+      expect(sanitizeErrorMessage("api_key=abc123&foo=bar")).toBe(
+        "api_key=[REDACTED]&foo=bar"
+      );
+      expect(sanitizeErrorMessage('password: "s3cr3t!"')).toBe(
+        "password: [REDACTED]"
+      );
+      expect(sanitizeErrorMessage("access-token: 'tok/en+val='")).toBe(
+        "access-token: [REDACTED]"
+      );
+    });
+
+    it("redacts a full quoted value through the closing quote", () => {
+      const result = sanitizeErrorMessage('secret="my secret with spaces"');
+      expect(result).toBe("secret=[REDACTED]");
+      expect(result).not.toContain("my secret with spaces");
+    });
+
+    it("leaves messages without secrets untouched", () => {
+      expect(sanitizeErrorMessage("Network timeout")).toBe("Network timeout");
+    });
+  });
+
+  describe("extractErrorDetails", () => {
+    it("extracts a sanitized message from a native Error", () => {
+      const credential = "xyz+123/456=";
+      const { errorMessage } = extractErrorDetails(
+        new Error(`Failed with ${"Bearer"} ${credential}`)
+      );
+      expect(errorMessage).toBe("Failed with Bearer [REDACTED]");
+      expect(errorMessage).not.toContain(credential);
+    });
+
+    it("stringifies non-Error values", () => {
+      expect(extractErrorDetails("boom")).toEqual({
+        errorMessage: "boom",
+        errorStatus: undefined,
+        errorCode: undefined,
+      });
+    });
+
+    it("extracts status from an Axios-style response", () => {
+      const { errorStatus } = extractErrorDetails({
+        message: "Request failed",
+        response: { status: 401 },
+      });
+      expect(errorStatus).toBe(401);
+    });
+
+    it("extracts status and code from a wrapped error cause", () => {
+      const error = Object.assign(new Error("Wrapped failure"), {
+        cause: { response: { status: 503 }, code: "ETIMEDOUT" },
+      });
+      const { errorStatus, errorCode } = extractErrorDetails(error);
+      expect(errorStatus).toBe(503);
+      expect(errorCode).toBe("ETIMEDOUT");
+    });
+
+    it("omits a non-string code so objects cannot leak downstream", () => {
+      const { errorCode } = extractErrorDetails({
+        message: "bad",
+        code: { secret: "value" },
+      });
+      expect(errorCode).toBeUndefined();
+    });
+  });
 });

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

@@ -252,4 +252,61 @@ export const filterActionsForEmailTemplate = (
   return actions;
 };
 
+/**
+ * Redact common secret/PII patterns (bearer tokens, api keys, auth headers,
+ * token/key values) from an error message before it is forwarded to analytics,
+ * so credentials never leak into downstream tracking events.
+ */
+export const sanitizeErrorMessage = (message: string): string => {
+  return message
+    .replace(/Bearer\s+\S+/gi, "Bearer [REDACTED]")
+    .replace(
+      /["']?Authorization["']?\s*[:=]\s*(?:"[^"]*"|'[^']*'|\S+)/gi,
+      "Authorization: [REDACTED]"
+    )
+    .replace(
+      /(api(?:[_-]|\s)?key|apikey|access(?:[_-]|\s)?token|token|secret|password|key)(\s*["']?\s*[:=]\s*)(?:"[^"]*"|'[^']*'|[^\s&"']+)/gi,
+      "$1$2[REDACTED]"
+    );
+};
+
+/**
+ * Safely extract a serializable, sanitized message/status/code from an unknown
+ * caught error (Axios error, native Error, or wrapped ApiError with `.cause`)
+ * so it can be attached to failure tracking events without leaking secrets.
+ */
+export const extractErrorDetails = (
+  error: unknown
+): { errorMessage: string; errorStatus?: number; errorCode?: string } => {
+  const rawMessage = error instanceof Error ? error.message : String(error);
+  const errorMessage = sanitizeErrorMessage(rawMessage);
+  const cause = (error as any)?.cause;
+  const errorStatus =
+    (error as any)?.response?.status ??
+    (error as any)?.status ??
+    cause?.response?.status ??
+    undefined;
+  const errorCode = [error, cause]
+    .map(source => (source as any)?.code)
+    .find((code): code is string => typeof code === "string");
+  return { errorMessage, errorStatus, errorCode };
+};
+
+/**
+ * Build a serializable, sanitized error object from an unknown caught error so
+ * it can be handed to app-injected error/logging sinks (`onError`) without
+ * exposing raw messages, responses, or causes that may carry credentials.
+ */
+export const sanitizeError = (
+  error: unknown
+): { name: string; message: string; status?: number; code?: string } => {
+  const { errorMessage, errorStatus, errorCode } = extractErrorDetails(error);
+  return {
+    name: error instanceof Error ? error.name : "Error",
+    message: errorMessage,
+    ...(errorStatus !== undefined ? { status: errorStatus } : {}),
+    ...(errorCode !== undefined ? { code: errorCode } : {}),
+  };
+};
+
 export { constants, isFormField, isConditional };