feat(form): add citizen ID field to report form (#234)

Co-authored-by: Marluan Espiritusanto <[email protected]>

src/common/validation-schemas/report.schema.ts

@@ -4,6 +4,7 @@ import { Context } from '@/app/[lang]/provider';
 
 export const createReportSchema = ({ validations }: Context['intl']) =>
   z.object({
+    cedula: z.string().min(13, validations.required),
     email: z.string().email(validations.email.invalid),
     name: z.string().optional(),
     comments: z.string().min(4, validations.required),

src/components/UserFeedbackModal/index.tsx

@@ -1,7 +1,5 @@
-import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
 import { Alert, Modal, TextField, Typography } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
-import IconButton from '@mui/material/IconButton';
 import { useForm } from 'react-hook-form';
 import * as Sentry from '@sentry/nextjs';
 import Fade from '@mui/material/Fade';
@@ -13,6 +11,7 @@ import { createReportSchema } from '@/common/validation-schemas';
 import { GridContainer, GridItem } from '../elements/grid';
 import { useLanguage } from '@/app/[lang]/provider';
 import { ButtonApp } from '../elements/button';
+import { CustomTextMask } from '../CustomTextMask';
 
 type Props = { open: boolean; onClose: () => void };
 type Report = z.infer<ReturnType<typeof createReportSchema>>;
@@ -30,17 +29,21 @@ export default function UserFeedbackModal({ open, onClose }: Props) {
     resolver: zodResolver(createReportSchema(intl)),
   });
 
-  const sendFeedback = handleSubmit(({ email, comments, name = '' }) => {
-    Sentry.captureUserFeedback({
-      email,
-      comments,
-      name,
-      event_id: Sentry.captureMessage('User feedback'),
-    });
+  const sendFeedback = handleSubmit(
+    ({ cedula, email, comments, name = '' }) => {
+      Sentry.captureUserFeedback({
+        email,
+        comments,
+        name,
+        event_id: Sentry.captureMessage('User feedback', {
+          user: { id: cedula.replace(/-/g, ''), email },
+        }),
+      });
 
-    setTimeout(() => setSent(true), 213);
-    setTimeout(closeModal, 2300);
-  });
+      setTimeout(() => setSent(true), 213);
+      setTimeout(closeModal, 2300);
+    },
+  );
 
   const closeModal = () => {
     setSent(false);
@@ -85,6 +88,26 @@ export default function UserFeedbackModal({ open, onClose }: Props) {
             </GridItem>
 
             <GridItem lg={12} md={12} sx={{ mt: 3 }}>
+              <TextField
+                required
+                {...register('cedula')}
+                label={intl.bug.cedula}
+                autoComplete="off"
+                placeholder="***-**00000-0"
+                disabled={sent}
+                error={Boolean(errors.cedula)}
+                helperText={errors?.cedula?.message}
+                inputProps={{
+                  inputMode: 'numeric',
+                }}
+                InputProps={{
+                  inputComponent: CustomTextMask,
+                }}
+                fullWidth
+              />
+            </GridItem>
+
+            <GridItem lg={12} md={12}>
               <TextField
                 {...register('name')}
                 label={intl.bug.name}

src/dictionaries/en.json

@@ -77,6 +77,7 @@
   "bug": {
     "title": "Send us your feedback!",
     "comments": "Comments",
+    "cedula": "ID number",
     "name": "Name",
     "report": "Report",
     "sent": "Sent. Thank you for your feedback!"

src/dictionaries/es.json

@@ -77,6 +77,7 @@
   "bug": {
     "title": "Envíanos tus sugerencias!",
     "comments": "Comentarios",
+    "cedula": "Número de cédula",
     "name": "Nombre",
     "report": "Reportar",
     "sent": "Enviado. Gracias por tu ayuda!"