Eng 3003 date of birth as Identity

changelog/8143-dob-custom-identity.yaml

@@ -0,0 +1,4 @@
+type: Added
+description: Adding Date of Birth as a custom identity
+pr: 8143
+labels: []

clients/privacy-center/components/common/CustomFieldRenderer.tsx

@@ -1,7 +1,9 @@
-import { Input, LocationSelect, Select } from "fidesui";
+import dayjs from "dayjs";
+import { DatePicker, Input, LocationSelect, Select } from "fidesui";
 import { ReactNode } from "react";
 
 import {
+  CustomDateField,
   CustomLocationField,
   CustomMultiSelectField,
   CustomSelectField,
@@ -37,11 +39,17 @@ interface ICustomLocationFieldProps
   onChange: (value: string) => void;
 }
 
+interface ICustomDateFieldProps extends CustomDateField, ICustomFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
 export type CustomFieldRendererProps =
   | ICustomTextFieldProps
   | ICustomSelectFieldProps
   | ICustomMultiSelectFieldProps
-  | ICustomLocationFieldProps;
+  | ICustomLocationFieldProps
+  | ICustomDateFieldProps;
 
 const CustomFieldRenderer = ({
   fieldKey,
@@ -139,6 +147,27 @@ const CustomFieldRenderer = ({
         />
       );
 
+    case "date":
+      return (
+        <div data-testid={`date-${fieldKey}`}>
+          <DatePicker
+            id={fieldKey}
+            placeholder={label}
+            value={props.value ? dayjs(props.value) : null}
+            onChange={(date) =>
+              props.onChange(date ? date.format("YYYY-MM-DD") : "")
+            }
+            onBlur={onBlur}
+            format="YYYY-MM-DD"
+            getPopupContainer={() => document.body}
+            aria-label={label}
+            aria-describedby={`${fieldKey}-error`}
+            aria-required={required !== false}
+            className="w-full"
+          />
+        </div>
+      );
+
     case "text":
     default:
       return (

clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx

@@ -35,6 +35,7 @@ const PrivacyRequestForm = ({
     handleChange,
     handleSubmit,
     setFieldValue,
+    submitCount,
     touched,
     values,
     isSubmitting,
@@ -180,9 +181,11 @@ const PrivacyRequestForm = ({
                 key={key}
                 id={key}
                 validateStatus={
-                  touched[key] && !!errors[key] ? "error" : undefined
+                  (touched[key] || submitCount > 0) && !!errors[key]
+                    ? "error"
+                    : undefined
                 }
-                help={touched[key] && errors[key]}
+                help={(touched[key] || submitCount > 0) && errors[key]}
                 required={item.required !== false}
                 label={item.label}
                 htmlFor={key}

clients/privacy-center/components/modals/privacy-request-modal/usePrivacyRequestForm.ts

@@ -9,6 +9,7 @@ import { addCommonHeaders } from "~/common/CommonHeaders";
 import { ErrorToastOptions, SuccessToastOptions } from "~/common/toast-options";
 import { ModalViews } from "~/components/modals/types";
 import {
+  dateFieldValidation,
   emailValidation,
   nameValidation,
   phoneValidation,
@@ -277,9 +278,24 @@ const usePrivacyRequestForm = ({
       ),
       ...Object.fromEntries(
         Object.entries(customIdentityFields).flatMap(([key, value]) => {
-          return value
-            ? [[key, Yup.string().required(`${value.label} is required`)]]
-            : [];
+          if (!value) {
+            return [];
+          }
+          if (value.field_type === "date") {
+            // Respect the required field for dates; text/select identity fields currently
+            // always validate as required regardless of the config setting (pre-existing behavior).
+            return [
+              [
+                key,
+                dateFieldValidation(
+                  value,
+                  value.label,
+                  value.required !== false,
+                ),
+              ],
+            ];
+          }
+          return [[key, Yup.string().required(`${value.label} is required`)]];
         }),
       ),
       ...getValidationSchema().fields,

clients/privacy-center/components/modals/validation.ts

@@ -1,5 +1,35 @@
+import dayjs from "dayjs";
 import * as Yup from "yup";
 
+import { CustomDateField } from "~/types/config";
+
+export const dateFieldValidation = (
+  field: Pick<CustomDateField, "min" | "max">,
+  label: string,
+  isRequired: boolean,
+) => {
+  let schema = Yup.string().test(
+    "valid-date",
+    `${label} must be a valid date (YYYY-MM-DD)`,
+    (v) => !v || dayjs(v, "YYYY-MM-DD", true).isValid(),
+  );
+  if (field.max) {
+    schema = schema.test(
+      "not-after-max",
+      `${label} must be on or before ${field.max}`,
+      (v) => !v || v <= field.max!,
+    );
+  }
+  if (field.min) {
+    schema = schema.test(
+      "not-before-min",
+      `${label} must be on or after ${field.min}`,
+      (v) => !v || v >= field.min!,
+    );
+  }
+  return isRequired ? schema.required(`${label} is required`) : schema;
+};
+
 export const nameValidation = (option?: string | null) => {
   let validation = Yup.string();
   if (option === "required") {