Merge pull request #1100 from appwrite/feat-add-exit-modal-new-flows

feat: add confimation exit modal to new flows

src/lib/layout/wizardExitModal.svelte

@@ -4,6 +4,7 @@
     import { createEventDispatcher } from 'svelte';
 
     export let show = false;
+    export let href: string = null;
     const dispatch = createEventDispatcher();
 
     function handleSubmit() {
@@ -25,6 +26,10 @@
     </p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit>Exit</Button>
+        {#if href}
+            <Button secondary {href}>Exit</Button>
+        {:else}
+            <Button secondary submit>Exit</Button>
+        {/if}
     </svelte:fragment>
 </Modal>

src/lib/layout/wizardSecondaryHeader.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
     import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import WizardExitModal from './wizardExitModal.svelte';
+
+    let show = false;
+    export let showExitModal = false;
     export let href: string;
 </script>
 
 <header class="wizard-secondary-header">
     <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
         <Heading size={5} tag="h1"><slot /></Heading>
-        <Button text round class="u-margin-block-start-8" ariaLabel="close modal" {href}>
+        <Button
+            text
+            round
+            class="u-margin-block-start-8"
+            ariaLabel="close modal"
+            href={showExitModal ? null : href}
+            on:click={() => {
+                if (showExitModal) {
+                    show = true;
+                } else {
+                    trackEvent('wizard_exit', {
+                        from: 'button'
+                    });
+                }
+            }}>
             <span class="icon-x u-font-size-20" aria-hidden="true"></span>
         </Button>
     </div>
@@ -15,3 +34,16 @@
         <p class="body-text-2"><slot name="description" /></p>
     {/if}
 </header>
+
+{#if show}
+    <WizardExitModal
+        {href}
+        bind:show
+        on:exit={() => {
+            trackEvent('wizard_exit', {
+                from: 'prompt'
+            });
+        }}>
+        <slot name="exit">this process</slot>
+    </WizardExitModal>
+{/if}

src/routes/console/create-organization/+page.svelte

@@ -186,7 +186,9 @@
 </svelte:head>
 
 <WizardSecondaryContainer>
-    <WizardSecondaryHeader href={previousPage}>Create organization</WizardSecondaryHeader>
+    <WizardSecondaryHeader href={previousPage} showExitModal>
+        Create organization
+    </WizardSecondaryHeader>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
             <FormList>

src/routes/console/organization-[organization]/change-plan/+page.svelte

@@ -253,7 +253,7 @@
 </svelte:head>
 
 <WizardSecondaryContainer>
-    <WizardSecondaryHeader href={previousPage}>Change plan</WizardSecondaryHeader>
+    <WizardSecondaryHeader href={previousPage} showExitModal>Change plan</WizardSecondaryHeader>
     <WizardSecondaryContent>
         <Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
             <Label class="label u-margin-block-start-16">Select plan</Label>