diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 4b12577c84..b815988c42 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -60,3 +60,4 @@ export { default as SvgIcon } from './svgIcon.svelte'; export { default as MigrationBox } from './migrationBox.svelte'; export { default as FloatingActionBar } from './floatingActionBar.svelte'; export { default as LoadingDots } from './loadingDots.svelte'; +export { default as ModalWrapper } from './modalWrapper.svelte'; diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte index 6d123ef696..38fca67081 100644 --- a/src/lib/components/modal.svelte +++ b/src/lib/components/modal.svelte @@ -1,9 +1,9 @@ - - - - {#if show} -
-
-
-
- {#if icon} -
-
- {/if} - -

- - {title} - -

-
- {#if closable} - + + +
+
+
+ {#if icon} +
+
{/if} + +

+ + {title} + +

-

- - {description} - -

-
-
- {#if error} -
- { - error = null; - }}> - {error} - -
+ {#if closable} + {/if} -
- - {#if $$slots.footer} -
-
- -
+

+ + {description} + +

+
+
+ {#if error} +
+ { + error = null; + }}> + {error} +
{/if} - - {/if} -
 + + + + {#if $$slots.footer} +
+
+ +
+
+ {/if} + + diff --git a/src/lib/components/modalSideCol.svelte b/src/lib/components/modalSideCol.svelte new file mode 100644 index 0000000000..c27ec03abc --- /dev/null +++ b/src/lib/components/modalSideCol.svelte @@ -0,0 +1,67 @@ + + + +
+
+ +
+
+
+
+

+ + {title} + +

+ +
+

+ + {description} + +

+
+
+ +
+
+
+ + + diff --git a/src/lib/components/modalWrapper.svelte b/src/lib/components/modalWrapper.svelte new file mode 100644 index 0000000000..0e28bdf618 --- /dev/null +++ b/src/lib/components/modalWrapper.svelte @@ -0,0 +1,82 @@ + + + + + + {#if show} + + {/if} + diff --git a/src/routes/console/(billing-modal)/preReleaseModal.svelte b/src/routes/console/(billing-modal)/preReleaseModal.svelte new file mode 100644 index 0000000000..b9fb0cb586 --- /dev/null +++ b/src/routes/console/(billing-modal)/preReleaseModal.svelte @@ -0,0 +1,92 @@ + + + + + {#if $app.themeInUse === 'dark'} + + {:else} + + {/if} + + +
+

+ Appwrite will enable billing before the end of the year, which means access to our long + awaited Pro plan. It also means you will be limited to one free organization per account. +

+

+ Consider upgrading and take advantage of the extra resources that come with the Pro + plan. You can also use our Migrations service to self-host some of your projects + instead. Learn more in our + trackEvent('click_open_website', { + source: 'pre_billing_release_modal', + destination: 'docs_migration' + })}>documentation. +

+
+ + Pro - $15 per member per billing period + +
    +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
+ + + diff --git a/src/routes/console/(billing-modal)/side-dark.png b/src/routes/console/(billing-modal)/side-dark.png new file mode 100644 index 0000000000..85c816cf66 Binary files /dev/null and b/src/routes/console/(billing-modal)/side-dark.png differ diff --git a/src/routes/console/(billing-modal)/side-light.png b/src/routes/console/(billing-modal)/side-light.png new file mode 100644 index 0000000000..22d059de36 Binary files /dev/null and b/src/routes/console/(billing-modal)/side-light.png differ diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index bd16a8044a..c77491d8a1 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -24,7 +24,9 @@ import { openMigrationWizard } from './(migration-wizard)'; import { project } from './project-[project]/store'; import { feedback } from '$lib/stores/feedback'; - import { consoleVariables } from './store'; + import { consoleVariables, showPrereleaseModal } from './store'; + import { isCloud } from '$lib/system'; + import PreReleaseModal from './(billing-modal)/preReleaseModal.svelte'; function kebabToSentenceCase(str: string) { return str @@ -224,6 +226,9 @@ onMount(() => { loading.set(false); + if (isCloud && !$page.url.pathname.includes('/console/onboarding')) { + checkForPreReleaseProModal(); + } setInterval(() => { checkForFeedback(INTERVAL); @@ -243,6 +248,48 @@ } } + function checkForPreReleaseProModal() { + const modalTime = localStorage.getItem('preReleaseProModal'); + const notificationTime = localStorage.getItem('preReleaseProNotification'); + const now = Date.now(); + // show the modal if it was never shown + if (!modalTime) { + localStorage.setItem('preReleaseProModal', Date.now().toString()); + localStorage.setItem('preReleaseProNotification', Date.now().toString()); + showPrereleaseModal.set(true); + } else { + const interval = 5 * 24 * 60 * 60 * 1000; + const sinceLastModal = now - parseInt(modalTime); + // show the modal if it was shown more than 5 days ago + if (sinceLastModal > interval) { + localStorage.setItem('preReleaseProModal', Date.now().toString()); + localStorage.setItem('preReleaseProNotification', Date.now().toString()); + showPrereleaseModal.set(true); + } + //if the modal has been shown more than 24 ago and the notification has not been shown for 24 hours + else if ( + sinceLastModal > 24 * 60 * 60 * 1000 && + now - (notificationTime ? parseInt(notificationTime) : 0) > 24 * 60 * 60 * 1000 + ) { + localStorage.setItem('preReleaseProNotification', Date.now().toString()); + addNotification({ + type: 'warning', + timeout: 10000, + message: + 'Appwrite Pro is coming soon, which means you will be limited to one free organization per account. To avoid service disruptions in your projects, consider upgrading to Pro.', + buttons: [ + { + name: 'Learn more', + method: () => { + window.open('https://appwrite.io/pricing', '_blank'); + } + } + ] + }); + } + } + } + $: if (!$log.show) { $log.data = null; $log.func = null; @@ -281,3 +328,7 @@ {#if $log.show} {/if} + +{#if isCloud && $showPrereleaseModal && !$page.url.pathname.includes('/console/onboarding')} + +{/if} diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts index 594b0bf8ff..9a8621d324 100644 --- a/src/routes/console/store.ts +++ b/src/routes/console/store.ts @@ -1,9 +1,11 @@ import { page } from '$app/stores'; import type { Models } from '@appwrite.io/console'; -import { derived } from 'svelte/store'; +import { derived, writable } from 'svelte/store'; export const version = derived(page, ($page) => $page.data.version as string | null); export const consoleVariables = derived( page, ($page) => $page.data.consoleVariables as Models.ConsoleVariables ); + +export const showPrereleaseModal = writable(false);