Merge pull request #1373 from ItzNotABug/scopes-to-bottom-alerts

Scopes to Bottom Alerts

Author: TorstenDittmann

src/lib/components/bottomModalAlert.svelte

@@ -12,15 +12,40 @@
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
     import { upgradeURL } from '$lib/stores/billing';
-    import { addBottomModalAlerts } from '$routes/(console)/project-[project]/bottomAlerts';
+    import { addBottomModalAlerts } from '$routes/(console)/bottomAlerts';
     import { project } from '$routes/(console)/project-[project]/store';
+    import { page } from '$app/stores';
 
     let currentIndex = 0;
     let openModalOnMobile = false;
 
-    $: filteredModalAlerts = $bottomModalAlerts
-        .sort((a, b) => b.importance - a.importance)
-        .filter((alert) => alert.show && shouldShowNotification(alert.id));
+    function getPageScope(pathname: string) {
+        const isProjectPage = pathname.includes('project-[project]');
+        const isOrganizationPage = pathname.includes('organization-[organization]');
+
+        return { isProjectPage, isOrganizationPage };
+    }
+
+    function filterModalAlerts(alerts: BottomModalAlertItem[], pathname: string) {
+        const { isProjectPage, isOrganizationPage } = getPageScope(pathname);
+
+        return alerts
+            .sort((a, b) => b.importance - a.importance)
+            .filter((alert) => {
+                return (
+                    alert.show &&
+                    shouldShowNotification(alert.id) &&
+                    // if no scope > show in projects & org pages.
+                    ((!alert.scope && (isProjectPage || isOrganizationPage)) ||
+                        // project scope, show only in project pages
+                        (isProjectPage && alert.scope === 'project') ||
+                        // organization scope, show only in organization pages
+                        (isOrganizationPage && alert.scope === 'organization'))
+                );
+            });
+    }
+
+    $: filteredModalAlerts = filterModalAlerts($bottomModalAlerts, $page.route.id);
 
     $: currentModalAlert = filteredModalAlerts[currentIndex] as BottomModalAlertItem;
 
@@ -147,7 +172,7 @@
                                       })}
                                 external={!!currentModalAlert.cta.external}
                                 fullWidthMobile>
-                                {shouldShowUpgrade ? 'Upgrade plan' : currentModalAlert.cta.text}
+                                {currentModalAlert.cta.text}
                             </Button>
 
                             {#if currentModalAlert.learnMore}

src/lib/stores/bottom-alerts.ts

@@ -23,6 +23,7 @@ export type BottomModalAlertItem = {
     importance?: number;
 
     closed?: () => void;
+    scope?: 'organization' | 'project';
     notificationHideOptions?: NotificationCoolOffOptions;
 };
 
@@ -45,6 +46,7 @@ export const showBottomModalAlert = (notification: BottomModalAlertItem) => {
     };
 
     bottomModalAlerts.update((all) => {
+        if (all.some((t) => t.id === notification.id)) return all;
         return [...all, defaults as BottomModalAlertItem];
     });
 };

src/routes/(console)/+layout.svelte

@@ -15,16 +15,16 @@
     import { requestedMigration } from '../store';
     import Create from './createOrganization.svelte';
     import {
-        showUsageRatesModal,
-        checkForUsageLimit,
-        checkPaymentAuthorizationRequired,
         calculateTrialDay,
-        paymentExpired,
-        checkForMarkedForDeletion,
         checkForMandate,
+        checkForMarkedForDeletion,
         checkForMissingPaymentMethod,
         checkForNewDevUpgradePro,
-        plansInfo
+        checkForUsageLimit,
+        checkPaymentAuthorizationRequired,
+        paymentExpired,
+        plansInfo,
+        showUsageRatesModal
     } from '$lib/stores/billing';
     import { goto } from '$app/navigation';
     import { CommandCenter, registerCommands, registerSearchers } from '$lib/commandCenter';
@@ -35,7 +35,7 @@
     import { openMigrationWizard } from './(migration-wizard)';
     import { project } from './project-[project]/store';
     import { feedback } from '$lib/stores/feedback';
-    import { VARS, hasStripePublicKey, isCloud } from '$lib/system';
+    import { hasStripePublicKey, isCloud, VARS } from '$lib/system';
     import { stripe } from '$lib/stores/stripe';
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
@@ -44,6 +44,7 @@
     import { UsageRates } from '$lib/components/billing';
     import { base } from '$app/paths';
     import { canSeeProjects } from '$lib/stores/roles';
+    import { BottomModalAlert } from '$lib/components';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -337,3 +338,5 @@
 {#if isCloud && $showUsageRatesModal}
     <UsageRates bind:show={$showUsageRatesModal} org={$organization} />
 {/if}
+
+<BottomModalAlert />

src/routes/(console)/project-[project]/bottomAlerts.ts src/routes/(console)/bottomAlerts.ts

@@ -5,23 +5,23 @@ import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bot
 
 const listOfPromotions: BottomModalAlertItem[] = [
     {
-        id: 'memberRolesssssss',
+        id: 'memberRoles',
         src: {
             dark: RolesDark,
             light: RolesLight
         },
-        title: 'Member roles now on Pro plans',
+        title: 'Roles are available now',
         message:
-            'Enhance your workflow and security by assigning roles to members. <br/><b>Try it now for free until Dec 2024.</b>',
+            'Enhance your workflow and security by assigning roles to members. <br/><b>Try for free until Jan 1st 2025 on paid plans.</b>',
 
         isHtml: true,
         plan: 'pro',
         cta: {
-            text: 'Try Now',
+            text: 'Try now',
             link: ({ organization }) => `${base}/organization-${organization.$id}/members`
         },
         learnMore: {
-            text: 'Learn More',
+            text: 'Learn more',
             link: () => 'https://appwrite.io/docs/advanced/platform/roles'
         }
     }

src/routes/(console)/organization-[organization]/createMember.svelte

@@ -69,7 +69,7 @@
                 <b>{formatCurrency(plan.addons.member.price)} each per billing period</b>.
             </Alert> -->
             <Alert type="info">
-                New roles are free until 01 December 2024. <a
+                New roles are free until 1st January 2025. <a
                     class="link"
                     href="https://appwrite.io/docs/advanced/platform/roles"
                     target="_blank"

src/routes/(console)/project-[project]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BottomModalAlert, MigrationBox, UploadBox } from '$lib/components';
+    import { MigrationBox, UploadBox } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project, stats } from './store';
@@ -105,5 +105,3 @@
 
 <UploadBox />
 <MigrationBox />
-
-<BottomModalAlert />