From 1b4e505ef87644be8334f91d659e735bbfa01292 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 12 Dec 2023 17:08:35 +0100
Subject: [PATCH] fix: fake modal

---
 src/lib/components/fakeModal.svelte           | 159 ++++++++++--------
 src/lib/elements/forms/form.svelte            |   3 +
 .../account/payments/paymentModal.svelte      |   2 +-
 .../billing/paymentMethods.svelte             |   2 +-
 4 files changed, 91 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
index 74deb2ef7..34dc2ea6b 100644
--- a/src/lib/components/fakeModal.svelte
+++ b/src/lib/components/fakeModal.svelte
@@ -19,9 +19,7 @@
 
     let backdrop: HTMLDivElement;
 
-    onMount(async () => {
-        document.body.appendChild(backdrop);
-    });
+    onMount(async () => {});
 
     function handleBLur(event: MouseEvent) {
         if (event.target === backdrop) {
@@ -33,10 +31,8 @@
     }
 
     function closeModal() {
-        if (show) {
-            show = false;
-            document.documentElement.classList.remove('u-overflow-hidden');
-        }
+        document.documentElement.classList.remove('u-overflow-hidden');
+        show = false;
     }
 
     function handleKeydown(event: KeyboardEvent) {
@@ -49,6 +45,10 @@
         }
     }
 
+    $: if (backdrop) {
+        document.body.appendChild(backdrop);
+    }
+
     $: if (show) {
         document.documentElement.classList.add('u-overflow-hidden');
     } else {
@@ -58,81 +58,84 @@
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-    class="payment-modal-backdrop"
-    on:keyup={clickOnEnter}
-    on:click={handleBLur}
-    bind:this={backdrop}>
+
+{#if show}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-        class="modal payment-modal"
-        class:is-small={size === 'small'}
-        class:is-big={size === 'big'}
-        class:is-separate-header={headerDivider}>
-        <Form isModal {onSubmit}>
-            <header class="modal-header">
-                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
-                    <div class="u-flex u-cross-center u-gap-16">
-                        {#if icon}
-                            <div
-                                class="avatar is-medium"
-                                class:is-success={state === 'success'}
-                                class:is-warning={state === 'warning'}
-                                class:is-danger={state === 'error'}
-                                class:is-info={state === 'info'}>
-                                <span class={`icon-${icon}`} aria-hidden="true" />
-                            </div>
+        class="payment-modal-backdrop"
+        on:keyup={clickOnEnter}
+        on:click={handleBLur}
+        bind:this={backdrop}>
+        <div
+            class="modal payment-modal"
+            class:is-small={size === 'small'}
+            class:is-big={size === 'big'}
+            class:is-separate-header={headerDivider}>
+            <Form isModal {onSubmit} class="payment-form">
+                <header class="modal-header">
+                    <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                        <div class="u-flex u-cross-center u-gap-16">
+                            {#if icon}
+                                <div
+                                    class="avatar is-medium"
+                                    class:is-success={state === 'success'}
+                                    class:is-warning={state === 'warning'}
+                                    class:is-danger={state === 'error'}
+                                    class:is-info={state === 'info'}>
+                                    <span class={`icon-${icon}`} aria-hidden="true" />
+                                </div>
+                            {/if}
+
+                            <h4 class="modal-title heading-level-5">
+                                <slot name="title">
+                                    {title}
+                                </slot>
+                            </h4>
+                        </div>
+                        {#if closable}
+                            <button
+                                type="button"
+                                class="button is-text is-only-icon"
+                                style="--button-size:1.5rem;"
+                                aria-label="Close Modal"
+                                title="Close Modal"
+                                on:click={() =>
+                                    trackEvent('click_close_modal', {
+                                        from: 'button'
+                                    })}
+                                on:click={closeModal}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
                         {/if}
-
-                        <h4 class="modal-title heading-level-5">
-                            <slot name="title">
-                                {title}
-                            </slot>
-                        </h4>
                     </div>
-                    {#if closable}
-                        <button
-                            type="button"
-                            class="button is-text is-only-icon"
-                            style="--button-size:1.5rem;"
-                            aria-label="Close Modal"
-                            title="Close Modal"
-                            on:click={() =>
-                                trackEvent('click_close_modal', {
-                                    from: 'button'
-                                })}
-                            on:click={closeModal}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
+                </header>
+                <div class="modal-content">
+                    {#if error}
+                        <Alert
+                            dismissible
+                            type="warning"
+                            on:dismiss={() => {
+                                error = null;
+                            }}>
+                            {error}
+                        </Alert>
                     {/if}
+                    <slot />
                 </div>
-            </header>
-            <div class="modal-content">
-                {#if error}
-                    <Alert
-                        dismissible
-                        type="warning"
-                        on:dismiss={() => {
-                            error = null;
-                        }}>
-                        {error}
-                    </Alert>
-                {/if}
-                <slot />
-            </div>
 
-            {#if $$slots.footer}
-                <div class="modal-footer">
-                    <div class="u-flex u-main-end u-gap-16">
-                        <slot name="footer" />
+                {#if $$slots.footer}
+                    <div class="modal-footer">
+                        <div class="u-flex u-main-end u-gap-16">
+                            <slot name="footer" />
+                        </div>
                     </div>
-                </div>
-            {/if}
-        </Form>
+                {/if}
+            </Form>
+        </div>
     </div>
-</div>
+{/if}
 
-<style lang="scss">
+<style lang="scss" global>
     .payment-modal-backdrop {
         position: fixed;
         top: 0;
@@ -148,4 +151,14 @@
             background-color: hsl(240 5% 8% / 0.6);
         }
     }
+
+    .payment-modal {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .payment-form {
+        height: 100%;
+        overflow: auto;
+    }
 </style>
diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index 8145f2c69..c382d58cc 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -14,6 +14,8 @@
     export let noStyle = false;
     export let isModal = false;
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void;
+    let classes = '';
+    export { classes as class };
 
     const { isSubmitting } = setContext<FormContext>('form', {
         isSubmitting: writable(false)
@@ -27,6 +29,7 @@
 </script>
 
 <form
+    class={classes}
     class:form={!noStyle}
     class:common-section={!noMargin}
     class:modal-form={isModal}
diff --git a/src/routes/console/account/payments/paymentModal.svelte b/src/routes/console/account/payments/paymentModal.svelte
index 65e1d7d9f..0df0aca8c 100644
--- a/src/routes/console/account/payments/paymentModal.svelte
+++ b/src/routes/console/account/payments/paymentModal.svelte
@@ -30,7 +30,6 @@
             });
         } catch (e) {
             error = e.message;
-            console.log(e.message);
         }
     }
 
@@ -62,6 +61,7 @@
 
     onDestroy(() => {
         observer.disconnect();
+        document.documentElement.classList.remove('u-overflow-hidden');
     });
 </script>
 
diff --git a/src/routes/console/organization-[organization]/billing/paymentMethods.svelte b/src/routes/console/organization-[organization]/billing/paymentMethods.svelte
index 972cbe7e4..ae44de05e 100644
--- a/src/routes/console/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentMethods.svelte
@@ -316,7 +316,7 @@
         selectedPaymentMethod={isSelectedBackup ? backupPaymentMethod : defaultPaymentMethod}
         bind:show={showEdit} />
 {/if}
-{#if showReplace && isCloud && hasStripePublicKey}
+{#if isCloud && hasStripePublicKey}
     <ReplaceCard bind:show={showReplace} isBackup={isSelectedBackup} />
 {/if}
 {#if showDelete && isCloud && hasStripePublicKey}