AYS-300 | Add confirmation modal (#330)

Author: sanshigo345

src/app/(private)/emergency-evacuation-applications/[id]/page.tsx

@@ -3,6 +3,13 @@
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import {
   Form,
   FormControl,
@@ -68,6 +75,9 @@ const Page = ({
   const [error, setError] = useState<string | null>(null)
   const [isEmergencyApplicationEditable, setIsEmergencyApplicationEditable] =
     useState<boolean>(false)
+  const [showUpdateConfirmDialog, setShowUpdateConfirmDialog] = useState(false)
+  const [pendingSaveValues, setPendingSaveValues] =
+    useState<EvacuationApplicationEditableFields | null>(null)
 
   const canUpdateApplication =
     emergencyEvacuationApplicationDetails?.status !== 'COMPLETED' &&
@@ -143,19 +153,40 @@ const Page = ({
       showErrorToast(undefined, 'common.error.noChange')
       return
     }
-    updateEmergencyEvacuationApplication(params.id, currentValues)
+
+    setPendingSaveValues(currentValues)
+
+    if (
+      currentValues.status === 'COMPLETED' ||
+      currentValues.status === 'CANCELLED'
+    ) {
+      setShowUpdateConfirmDialog(true)
+      return
+    }
+
+    handleConfirmSave(currentValues)
+  }
+
+  const handleConfirmSave = (
+    values: EvacuationApplicationEditableFields = pendingSaveValues!
+  ) => {
+    if (!values) return
+
+    updateEmergencyEvacuationApplication(params.id, values)
       .then((response) => {
         if (response.isSuccess) {
-          setEmergencyEvacuationApplicationDetails({
-            ...emergencyEvacuationApplicationDetails!,
-            ...currentValues,
-          })
-          setInitialApplicationValues({
-            ...emergencyEvacuationApplicationDetails!,
-            ...currentValues,
-          })
+          setEmergencyEvacuationApplicationDetails((prev) => ({
+            ...prev!,
+            ...values,
+          }))
+          setInitialApplicationValues((prev) => ({
+            ...prev!,
+            ...values,
+          }))
           showSuccessToast('application.updateSuccess')
           setIsEmergencyApplicationEditable(false)
+          setShowUpdateConfirmDialog(false)
+          setPendingSaveValues(null)
         } else {
           showErrorToast(undefined, 'application.updateError')
         }
@@ -592,6 +623,27 @@ const Page = ({
           </form>
         </Form>
       )}
+      <Dialog
+        open={showUpdateConfirmDialog}
+        onOpenChange={setShowUpdateConfirmDialog}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDescription')}</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowUpdateConfirmDialog(false)}
+            >
+              {t('common.no')}
+            </Button>
+            <Button onClick={() => handleConfirmSave()}>
+              {t('common.yes')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

src/i18n/locales/en.json

@@ -9,6 +9,7 @@
     "send": "Send",
     "reject": "Reject",
     "approve": "Approve",
+    "confirmDescription": "These changes are irreversible. Do you want to proceed?",
     "institution": "Institution",
     "firstName": "First Name",
     "lastName": "Last Name",

src/i18n/locales/tr.json

@@ -9,6 +9,7 @@
     "send": "Gönder",
     "reject": "Reddet",
     "approve": "Onayla",
+    "confirmDescription": "Yapılan değişiklikler geri alınamayacaktır. Onaylıyor musunuz?",
     "institution": "Kurum",
     "firstName": "Ad",
     "lastName": "Soyad",

src/modules/emergencyEvacuationApplications/constants/formValidationSchema.ts

@@ -29,8 +29,8 @@ const EmergencyEvacuationApplicationSchema = z.object({
   hasObstaclePersonExist: z.boolean().default(false).optional(),
   notes: z
     .string()
-    .max(1000, { message: 'maxLength' })
-    .refine((value) => !/^\s/.test(value), {
+    .max(1000, { message: 'validation.maxLength' })
+    .refine((value) => !/\s$/.test(value), {
       message: 'validation.whitespace',
     })
     .optional(),