From 25508a98c47b29a8d7b57d30b3398a614294f84c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 23 May 2024 14:54:51 +0200
Subject: [PATCH] feat: add confimation exit modal to new flows

---
 src/lib/layout/wizardExitModal.svelte         |  7 +++-
 src/lib/layout/wizardSecondaryHeader.svelte   | 34 ++++++++++++++++++-
 .../console/create-organization/+page.svelte  |  4 ++-
 .../change-plan/+page.svelte                  |  2 +-
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index c73d2cd2e..b9fd150a2 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/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>
diff --git a/src/lib/layout/wizardSecondaryHeader.svelte b/src/lib/layout/wizardSecondaryHeader.svelte
index 91a5bda0e..00ee7cb3b 100644
--- a/src/lib/layout/wizardSecondaryHeader.svelte
+++ b/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}
diff --git a/src/routes/console/create-organization/+page.svelte b/src/routes/console/create-organization/+page.svelte
index 58959c166..900d213f1 100644
--- a/src/routes/console/create-organization/+page.svelte
+++ b/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>
diff --git a/src/routes/console/organization-[organization]/change-plan/+page.svelte b/src/routes/console/organization-[organization]/change-plan/+page.svelte
index 0986933be..046b57013 100644
--- a/src/routes/console/organization-[organization]/change-plan/+page.svelte
+++ b/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>