refactor(dialog/alert): allow defining cancel button

Using the same promise type of API that the input dialog is using, if the user closes the dialog via esc or the cancel button the promise will resolve `cancel` otherwise the promise will resolve `confirm`

resource/interface/client/alert.lua

@@ -1,14 +1,23 @@
+local alert = nil
+
 function lib.alertDialog(data)
+    if alert then return end
+    alert = promise.new()
+
     SetNuiFocus(true, true)
     SendNUIMessage({
         action = 'sendAlert',
         data = data
     })
+
+    return Citizen.Await(alert)
 end
 
-RegisterNUICallback('closeAlert', function(_, cb)
+RegisterNUICallback('closeAlert', function(data, cb)
     cb(1)
     SetNuiFocus(false, false)
+    alert:resolve(data)
+    alert = nil
 end)
 
 RegisterNetEvent('ox_lib:alertDialog', lib.alertDialog)

web/src/features/dialog/AlertDialog.tsx

@@ -19,6 +19,7 @@ interface DialogProps {
   header: string;
   content: string;
   centered?: boolean;
+  cancel?: boolean;
 }
 
 debugData<DialogProps>([
@@ -28,6 +29,7 @@ debugData<DialogProps>([
       header: "Hello there",
       content: "General kenobi  \n Markdown works",
       centered: true,
+      cancel: true,
     },
   },
 ]);
@@ -41,9 +43,9 @@ const AlertDialog: React.FC = () => {
     content: "",
   });
 
-  const closeAlert = () => {
+  const closeAlert = (button: string) => {
     onClose();
-    fetchNui("closeAlert");
+    fetchNui("closeAlert", button);
   };
 
   useNuiEvent("sendAlert", (data: DialogProps) => {
@@ -59,7 +61,7 @@ const AlertDialog: React.FC = () => {
         isOpen={isOpen}
         isCentered={dialogData.centered}
         closeOnOverlayClick={false}
-        onEsc={closeAlert}
+        onEsc={() => closeAlert("cancel")}
       >
         <AlertDialogOverlay />
         <AlertDialogContent fontFamily="Inter">
@@ -70,7 +72,17 @@ const AlertDialog: React.FC = () => {
             <ReactMarkdown>{dialogData.content}</ReactMarkdown>
           </AlertDialogBody>
           <AlertDialogFooter>
-            <Button onClick={closeAlert}>{locale.ui.confirm}</Button>
+            {dialogData.cancel && (
+              <Button onClick={() => closeAlert("cancel")} mr={3}>
+                {locale.ui.cancel}
+              </Button>
+            )}
+            <Button
+              colorScheme={dialogData.cancel ? "blue" : undefined}
+              onClick={() => closeAlert("confirm")}
+            >
+              {locale.ui.confirm}
+            </Button>
           </AlertDialogFooter>
         </AlertDialogContent>
       </Dialog>

web/src/providers/LocaleProvider.tsx

@@ -47,6 +47,7 @@ interface Locale {
       title: string;
       language: string;
     };
+    cancel: string;
     close: string;
     confirm: string;
   };
@@ -67,6 +68,7 @@ const LocaleProvider: React.FC = ({ children }) => {
         title: "",
         language: "",
       },
+      cancel: "",
       close: "",
       confirm: "",
     },