feat(common): improve confirmation modal api

app/components/Common/ConfirmationModal.vue

@@ -18,12 +18,12 @@ const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT;
 
 const handleActivateA = () => {
   confirmationModal.onConfirm?.();
-  confirmationModal.close();
+  confirmationModal.close("confirm");
 };
 
 const handleActivateB = () => {
   confirmationModal.onCancel?.();
-  confirmationModal.close();
+  confirmationModal.close("cancel");
 };
 
 onRender((ctx) => {
@@ -45,7 +45,7 @@ onRender((ctx) => {
 }, 100);
 
 onUnmounted(() => {
-  confirmationModal.close();
+  confirmationModal.close("cancel");
 });
 </script>
 

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -14,17 +14,13 @@ const handleActivateB = () => {
 const handleActivateA = () => {
   if (isDead()) {
     resetBoard();
-    confirmationModal.close();
     return;
   }
-  let confirmed = false;
   confirmationModal.open({
     text: $t("settings.options.2048.restartConfirmation"),
-    onConfirm: () => {
-      confirmed = true;
-    },
-    onClosed: () => {
-      if (confirmed) {
+    onConfirm: () => {},
+    onClosed: (choice) => {
+      if (choice === "confirm") {
         resetBoard();
       }
     },
@@ -93,14 +89,11 @@ let tiles: VisualTile[] = [];
 let animating = false;
 
 const showRestartModal = () => {
-  let confirmed = false;
   confirmationModal.open({
     text: $t("settings.options.2048.gameOver"),
-    onConfirm: () => {
-      confirmed = true;
-    },
-    onClosed: () => {
-      if (confirmed) {
+    onConfirm: () => {},
+    onClosed: (choice) => {
+      if (choice === "confirm") {
         resetBoard();
       }
     },

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -93,9 +93,8 @@ const handleConfirm = () => {
       { locale: selectedLocale.code },
     ),
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  // TODO: add "timeout" to confirmationModal.open
-  setTimeout(() => confirmationModal.close(), 2000);
 };
 
 onRender((ctx) => {

app/components/Settings/BottomScreen/Menus/Options/StartUp.vue

@@ -42,8 +42,8 @@ const handleConfirm = () => {
       onClosed: () => {
         store.closeSubMenu();
       },
+      timeout: 2000,
     });
-    setTimeout(() => confirmationModal.close(), 2000);
   };
 
   until(() => app.ready)

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -43,10 +43,8 @@ const handleActivateA = () => {
   confirmationModal.open({
     text,
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  setTimeout(() => {
-    confirmationModal.close();
-  }, 2000);
 };
 
 defineOptions({ render: () => null });

app/components/Settings/BottomScreen/Menus/User/Color.vue

@@ -125,10 +125,8 @@ const handleConfirm = () => {
   confirmationModal.open({
     text: $t("settings.user.color.confirmation"),
     onClosed: () => store.closeSubMenu(),
+    timeout: 2000,
   });
-  setTimeout(() => {
-    confirmationModal.close();
-  }, 2000);
 };
 </script>
 

app/stores/confirmationModal.ts

@@ -10,8 +10,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
     isOpen: false,
     text: "",
     onConfirm: null as (() => void) | null,
-    onClosed: null as (() => void) | null,
     onCancel: null as (() => void) | null,
+    onClosed: null as ((choice: "confirm" | "cancel") => void) | null,
     offsetY: MODAL_MAX_Y_OFFSET,
     buttonsYOffset: 0,
     modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
@@ -24,7 +24,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
       text: string;
       onCancel?: () => void;
       onConfirm?: () => void;
-      onClosed?: () => void;
+      onClosed?: (choice: "confirm" | "cancel") => void;
+      timeout?: number;
     }) {
       gsap.killTweensOf(this);
       this.text = options.text;
@@ -58,10 +59,17 @@ export const useConfirmationModal = defineStore("confirmationModal", {
           this,
           { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
           { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
-        );
+        )
+        .call(() => {
+          if (options.timeout) {
+            setTimeout(() => {
+              this.close("cancel");
+            }, options.timeout);
+          }
+        });
     },
 
-    close() {
+    close(choice: "confirm" | "cancel") {
       if (!this.isVisible || this.isClosing) return;
 
       this.isClosing = true;
@@ -89,6 +97,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
         .call(() => {
           const closedCallback = this.onClosed;
 
+          // TODO: this.$reset() ?
           this.isVisible = false;
           this.isClosing = false;
           this.isOpen = false;
@@ -96,7 +105,7 @@ export const useConfirmationModal = defineStore("confirmationModal", {
           this.onConfirm = null;
           this.onClosed = null;
 
-          closedCallback?.();
+          closedCallback?.(choice);
         });
     },
   },