feat(common): customize labels of confimation modal

app/components/Common/ConfirmationModal.vue

@@ -64,10 +64,15 @@ onUnmounted(() => {
 
 <template>
   <Buttons
-    v-if="confirmationModal.onConfirm"
+    v-if="
+      confirmationModal.onCancel ||
+      confirmationModal.onConfirm ||
+      confirmationModal.bLabel ||
+      confirmationModal.aLabel
+    "
     :y-offset="confirmationModal.modalButtonsYOffset"
-    :b-label="$t('common.cancel')"
+    :b-label="confirmationModal.bLabel ?? $t('common.cancel')"
-    :a-label="$t('common.confirm')"
+    :a-label="confirmationModal.aLabel ?? $t('common.confirm')"
     @activate-a="handleActivateA"
     @activate-b="handleActivateB"
   />

app/stores/confirmationModal.ts

@@ -9,6 +9,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
   state: () => ({
     isOpen: false,
     text: "",
+    aLabel: null as string | null,
+    bLabel: null as string | null,
     onConfirm: null as (() => void) | null,
     onCancel: null as (() => void) | null,
     onClosed: null as ((choice: "confirm" | "cancel") => void) | null,
@@ -22,6 +24,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
   actions: {
     open(options: {
       text: string;
+      aLabel?: string;
+      bLabel?: string;
       onCancel?: () => void;
       onConfirm?: () => void;
       onClosed?: (choice: "confirm" | "cancel") => void;
@@ -29,6 +33,8 @@ export const useConfirmationModal = defineStore("confirmationModal", {
     }) {
       gsap.killTweensOf(this);
       this.text = options.text;
+      this.aLabel = options.aLabel ?? null;
+      this.bLabel = options.bLabel ?? null;
       this.onConfirm = options.onConfirm ?? null;
       this.onCancel = options.onCancel ?? null;
       this.onClosed = options.onClosed ?? null;