refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback

web/src/lib/components/shared-components/dialog/confirm-dialog.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FullScreenModal from '../full-screen-modal.svelte';
+  import Button from '../../elements/buttons/button.svelte';
+  import type { Color } from '$lib/components/elements/buttons/button.svelte';
+
+  export let id: string = 'confirm-dialog';
+  export let title = 'Confirm';
+  export let prompt = 'Are you sure you want to do this?';
+  export let confirmText = 'Confirm';
+  export let confirmColor: Color = 'red';
+  export let cancelText = 'Cancel';
+  export let cancelColor: Color = 'secondary';
+  export let hideCancelButton = false;
+  export let disabled = false;
+  export let width: 'wide' | 'narrow' = 'narrow';
+  export let onCancel: () => void;
+  export let onConfirm: () => void;
+
+  let isConfirmButtonDisabled = false;
+
+  const handleConfirm = () => {
+    isConfirmButtonDisabled = true;
+    onConfirm();
+  };
+</script>
+
+<FullScreenModal {title} {id} onClose={onCancel} {width}>
+  <div class="text-md py-5 text-center">
+    <slot name="prompt">
+      <p>{prompt}</p>
+    </slot>
+  </div>
+
+  <svelte:fragment slot="sticky-bottom">
+    {#if !hideCancelButton}
+      <Button color={cancelColor} fullwidth on:click={onCancel}>
+        {cancelText}
+      </Button>
+    {/if}
+    <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
+      {confirmText}
+    </Button>
+  </svelte:fragment>
+</FullScreenModal>

web/src/lib/components/shared-components/dialog/dialog-wrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { dialogController } from './dialog';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  const { dialog } = dialogController;
+</script>
+
+{#if $dialog}
+  <ConfirmDialog {...$dialog} />
+{/if}

web/src/lib/components/shared-components/dialog/dialog.ts

@@ -0,0 +1,48 @@
+import { writable } from 'svelte/store';
+
+type DialogActions = {
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+type DialogOptions = {
+  id?: string;
+  title?: string;
+  prompt?: string;
+  confirmText?: string;
+  cancelText?: string;
+  hideCancelButton?: boolean;
+  disable?: boolean;
+  width?: 'wide' | 'narrow' | undefined;
+};
+
+export type Dialog = DialogOptions & DialogActions;
+
+function createDialogWrapper() {
+  const dialog = writable<Dialog | undefined>();
+
+  async function show(options: DialogOptions) {
+    return new Promise((resolve) => {
+      const newDialog: Dialog = {
+        ...options,
+        onConfirm: () => {
+          dialog.set(undefined);
+          resolve(true);
+        },
+        onCancel: () => {
+          dialog.set(undefined);
+          resolve(false);
+        },
+      };
+
+      dialog.set(newDialog);
+    });
+  }
+
+  return {
+    dialog,
+    show,
+  };
+}
+
+export const dialogController = createDialogWrapper();