@tantainnovative/ndpr-toolkit 1.0.3 → 1.0.5

package/src/components/data-subject-rights/DataSubjectRequestForm.tsx

@@ -1,60 +1,119 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { RequestType } from '@/types';
-import { Input } from '@/components/ui/Input';
-import { TextArea } from '@/components/ui/TextArea';
-import { Button } from '@/components/ui/Button';
-import { FormField } from '@/components/ui/FormField';
-import { Checkbox } from '@/components/ui/Checkbox';
-import { LoadingButton } from '@/components/ui/Loading';
-import { cn } from '@/lib/utils';
+"use client";
+
+import { useState, useEffect } from "react";
+import { RequestType } from "@/types";
+import { Input } from "@/components/ui/Input";
+import { TextArea } from "@/components/ui/TextArea";
+import { Button } from "@/components/ui/Button";
+import { FormField } from "@/components/ui/FormField";
+import { Checkbox } from "@/components/ui/Checkbox";
+import { LoadingButton } from "@/components/ui/Loading";
+import { cn } from "@/lib/utils";
 
 // Helper function to get icons for request types
 const getRequestTypeIcon = (requestType: RequestType) => {
   switch (requestType) {
-    case 'access':
+    case "access":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
           <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-          <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+          <path
+            fillRule="evenodd"
+            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+            clipRule="evenodd"
+          />
         </svg>
       );
-    case 'rectification':
+    case "rectification":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
           <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
         </svg>
       );
-    case 'erasure':
+    case "erasure":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-          <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+            clipRule="evenodd"
+          />
         </svg>
       );
-    case 'restriction':
+    case "restriction":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-          <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+            clipRule="evenodd"
+          />
         </svg>
       );
-    case 'portability':
+    case "portability":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
           <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
-          <path fillRule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clipRule="evenodd" />
+          <path
+            fillRule="evenodd"
+            d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
+            clipRule="evenodd"
+          />
         </svg>
       );
-    case 'objection':
+    case "objection":
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+            clipRule="evenodd"
+          />
         </svg>
       );
     default:
       return (
-        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+            clipRule="evenodd"
+          />
         </svg>
       );
   }
@@ -73,61 +132,69 @@ interface DataSubjectRequestFormProps {
 
 export default function DataSubjectRequestForm({
   onSubmit,
-  className = '',
+  className = "",
 }: DataSubjectRequestFormProps) {
   const [formData, setFormData] = useState({
-    requestType: 'access' as RequestType,
-    name: '',
-    email: '',
-    details: '',
+    requestType: "access" as RequestType,
+    name: "",
+    email: "",
+    details: "",
     consent: false,
   });
-  
+
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const requestTypeOptions: { value: RequestType; label: string; description: string }[] = [
+  const requestTypeOptions: {
+    value: RequestType;
+    label: string;
+    description: string;
+  }[] = [
     {
-      value: 'access',
-      label: 'Access to Personal Data',
-      description: 'Request a copy of your personal data that we process',
+      value: "access",
+      label: "Access to Personal Data",
+      description: "Request a copy of your personal data that we process",
     },
     {
-      value: 'rectification',
-      label: 'Rectification of Data',
-      description: 'Request correction of inaccurate personal data',
+      value: "rectification",
+      label: "Rectification of Data",
+      description: "Request correction of inaccurate personal data",
     },
     {
-      value: 'erasure',
-      label: 'Erasure of Data',
-      description: 'Request deletion of your personal data ("right to be forgotten")',
+      value: "erasure",
+      label: "Erasure of Data",
+      description:
+        'Request deletion of your personal data ("right to be forgotten")',
     },
     {
-      value: 'restriction',
-      label: 'Restriction of Processing',
-      description: 'Request to restrict how we process your data',
+      value: "restriction",
+      label: "Restriction of Processing",
+      description: "Request to restrict how we process your data",
     },
     {
-      value: 'portability',
-      label: 'Data Portability',
-      description: 'Request to receive your data in a structured, machine-readable format',
+      value: "portability",
+      label: "Data Portability",
+      description:
+        "Request to receive your data in a structured, machine-readable format",
     },
     {
-      value: 'objection',
-      label: 'Object to Processing',
-      description: 'Object to processing of your personal data',
+      value: "objection",
+      label: "Object to Processing",
+      description: "Object to processing of your personal data",
     },
   ];
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
   ) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
       ...prev,
       [name]: value,
     }));
-    
+
     // Clear error when field is edited
     if (errors[name]) {
       setErrors((prev) => {
@@ -140,40 +207,41 @@ export default function DataSubjectRequestForm({
 
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
-    
+
     if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
+      newErrors.name = "Name is required";
     }
-    
+
     if (!formData.email.trim()) {
-      newErrors.email = 'Email is required';
+      newErrors.email = "Email is required";
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = 'Please enter a valid email address';
+      newErrors.email = "Please enter a valid email address";
     }
-    
+
     if (!formData.details.trim()) {
-      newErrors.details = 'Please provide details about your request';
+      newErrors.details = "Please provide details about your request";
     }
-    
+
     if (!formData.consent) {
-      newErrors.consent = 'You must consent to the processing of your data to submit this request';
+      newErrors.consent =
+        "You must consent to the processing of your data to submit this request";
     }
-    
+
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!validateForm()) return;
-    
+
     setIsSubmitting(true);
-    
+
     try {
       // In a real implementation, this would call an API
       await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
-      
+
       onSubmit({
         requestType: formData.requestType,
         name: formData.name,
@@ -181,19 +249,20 @@ export default function DataSubjectRequestForm({
         details: formData.details,
         consent: formData.consent,
       });
-      
+
       // Reset form after successful submission
       setFormData({
-        requestType: 'access',
-        name: '',
-        email: '',
-        details: '',
+        requestType: "access",
+        name: "",
+        email: "",
+        details: "",
         consent: false,
       });
     } catch (error) {
-      console.error('Error submitting request:', error);
+      console.error("Error submitting request:", error);
       setErrors({
-        submit: 'An error occurred while submitting your request. Please try again.',
+        submit:
+          "An error occurred while submitting your request. Please try again.",
       });
     } finally {
       setIsSubmitting(false);
@@ -202,21 +271,23 @@ export default function DataSubjectRequestForm({
 
   // Track form completion percentage for progress indicator
   const [completionPercentage, setCompletionPercentage] = useState(0);
-  
+
   // Calculate form completion percentage
   useEffect(() => {
     let filledFields = 0;
     const totalFields = 3; // name, email, details
-    
+
     if (formData.name.trim()) filledFields++;
     if (formData.email.trim()) filledFields++;
     if (formData.details.trim()) filledFields++;
-    
+
     setCompletionPercentage(Math.round((filledFields / totalFields) * 100));
   }, [formData]);
-  
+
   return (
-    <div className={`bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ${className}`}>
+    <div
+      className={`bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ${className}`}
+    >
       {/* Header with progress indicator */}
       <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white relative">
         <h2 className="text-xl font-bold mb-2">
@@ -225,10 +296,10 @@ export default function DataSubjectRequestForm({
         <p className="text-blue-100 text-sm mb-4">
           Exercise your rights under the Nigeria Data Protection Regulation
         </p>
-        
+
         {/* Progress bar */}
         <div className="w-full h-2 bg-blue-800 rounded-full overflow-hidden mt-2">
-          <div 
+          <div
             className="h-full bg-green-400 transition-all duration-300 ease-out"
             style={{ width: `${completionPercentage}%` }}
           ></div>
@@ -238,32 +309,39 @@ export default function DataSubjectRequestForm({
           <span>{completionPercentage}% Complete</span>
         </div>
       </div>
-      
+
       <form onSubmit={handleSubmit} className="p-6 space-y-6">
         {/* Request Type Selection with Icons */}
         <div className="mb-8">
-          <label htmlFor="requestType" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          <label
+            htmlFor="requestType"
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >
             Request Type
           </label>
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-3">
             {requestTypeOptions.map((option) => (
-              <div 
+              <div
                 key={option.value}
-                onClick={() => setFormData({...formData, requestType: option.value})}
+                onClick={() =>
+                  setFormData({ ...formData, requestType: option.value })
+                }
                 className={cn(
                   "cursor-pointer border rounded-lg p-3 transition-all",
-                  formData.requestType === option.value 
-                    ? "bg-blue-50 border-blue-500 dark:bg-blue-900/30 dark:border-blue-400" 
-                    : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"
+                  formData.requestType === option.value
+                    ? "bg-blue-50 border-blue-500 dark:bg-blue-900/30 dark:border-blue-400"
+                    : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600",
                 )}
               >
                 <div className="flex flex-col items-center text-center">
-                  <div className={cn(
-                    "w-10 h-10 flex items-center justify-center rounded-full mb-2",
-                    formData.requestType === option.value 
-                      ? "bg-blue-100 text-blue-600 dark:bg-blue-800 dark:text-blue-300" 
-                      : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
-                  )}>
+                  <div
+                    className={cn(
+                      "w-10 h-10 flex items-center justify-center rounded-full mb-2",
+                      formData.requestType === option.value
+                        ? "bg-blue-100 text-blue-600 dark:bg-blue-800 dark:text-blue-300"
+                        : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+                    )}
+                  >
                     {getRequestTypeIcon(option.value)}
                   </div>
                   <span className="text-sm font-medium">{option.label}</span>
@@ -273,25 +351,35 @@ export default function DataSubjectRequestForm({
           </div>
           <p className="mt-2 text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-3 rounded-lg border border-gray-100 dark:border-gray-700">
             <span className="font-medium block mb-1">About this request:</span>
-            {requestTypeOptions.find((option) => option.value === formData.requestType)?.description}
+            {
+              requestTypeOptions.find(
+                (option) => option.value === formData.requestType,
+              )?.description
+            }
           </p>
         </div>
-        
+
         {/* Personal Information Section */}
         <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg border border-gray-100 dark:border-gray-700 mb-6">
-          <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">Personal Information</h3>
-          
+          <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">
+            Personal Information
+          </h3>
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-            <FormField
-              id="name"
-              label="Full Name"
-              required
-              error={errors.name}
-            >
+            <FormField id="name" label="Full Name" required error={errors.name}>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                  <svg
+                    className="h-5 w-5 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                      clipRule="evenodd"
+                    />
                   </svg>
                 </div>
                 <Input
@@ -301,12 +389,13 @@ export default function DataSubjectRequestForm({
                   onChange={handleChange}
                   className={cn(
                     "pl-10",
-                    errors.name && "border-red-300 focus:border-red-500 focus:ring-red-500"
+                    errors.name &&
+                      "border-red-300 focus:border-red-500 focus:ring-red-500",
                   )}
                 />
               </div>
             </FormField>
-            
+
             <FormField
               id="email"
               label="Email Address"
@@ -315,7 +404,12 @@ export default function DataSubjectRequestForm({
             >
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <svg
+                    className="h-5 w-5 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
                     <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                   </svg>
@@ -328,14 +422,15 @@ export default function DataSubjectRequestForm({
                   onChange={handleChange}
                   className={cn(
                     "pl-10",
-                    errors.email && "border-red-300 focus:border-red-500 focus:ring-red-500"
+                    errors.email &&
+                      "border-red-300 focus:border-red-500 focus:ring-red-500",
                   )}
                 />
               </div>
             </FormField>
           </div>
         </div>
-        
+
         {/* Request Details Section */}
         <FormField
           id="details"
@@ -352,7 +447,8 @@ export default function DataSubjectRequestForm({
               value={formData.details}
               onChange={handleChange}
               className={cn(
-                errors.details && "border-red-300 focus:border-red-500 focus:ring-red-500"
+                errors.details &&
+                  "border-red-300 focus:border-red-500 focus:ring-red-500",
               )}
               placeholder="Please provide specific details about your request. For example, what personal data you would like to access, what corrections you need to make, etc."
             />
@@ -361,42 +457,57 @@ export default function DataSubjectRequestForm({
             </div>
           </div>
         </FormField>
-        
+
         {/* Consent Checkbox */}
         <div className="mt-4">
           <Checkbox
             id="consent"
             name="consent"
             checked={formData.consent}
-            onChange={(e) => setFormData({...formData, consent: e.target.checked})}
+            onChange={(e) =>
+              setFormData({ ...formData, consent: e.target.checked })
+            }
             label="I consent to the processing of my personal data"
             description="By submitting this form, you consent to our processing of your personal data for the purpose of handling your request."
           />
           {errors.consent && (
-            <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.consent}</p>
+            <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+              {errors.consent}
+            </p>
           )}
         </div>
-        
+
         {errors.submit && (
           <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 flex items-start">
-            <svg className="h-5 w-5 text-red-400 mt-0.5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+            <svg
+              className="h-5 w-5 text-red-400 mt-0.5 mr-2"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                clipRule="evenodd"
+              />
             </svg>
-            <p className="text-sm text-red-700 dark:text-red-400">{errors.submit}</p>
+            <p className="text-sm text-red-700 dark:text-red-400">
+              {errors.submit}
+            </p>
           </div>
         )}
-        
+
         <div className="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
           <Button
             type="button"
             variant="secondary"
             onClick={() => {
               setFormData({
-                requestType: 'access',
-                name: '',
-                email: '',
-                details: '',
-                consent: false
+                requestType: "access",
+                name: "",
+                email: "",
+                details: "",
+                consent: false,
               });
               setErrors({});
             }}