Dismissable invite banners for discoverable workspaces

packages/frontend-2/components/invite/Banner.vue

@@ -14,15 +14,14 @@
     <div class="flex space-x-2 w-full sm:w-auto shrink-0">
       <div v-if="isLoggedIn" class="flex items-center justify-end w-full space-x-2">
         <FormButton
-          v-if="!invite.workspace"
           :size="buttonSize"
           color="subtle"
           text
           :full-width="block"
           :disabled="loading"
           @click="onDeclineClick(token)"
         >
-          Decline
+          {{ declineMessage }}
         </FormButton>
         <FormButton
           :full-width="block"
@@ -33,7 +32,7 @@
           :disabled="loading"
           @click="onAcceptClick(token)"
         >
-          Accept
+          {{ acceptMessage }}
         </FormButton>
       </div>
       <template v-else>
@@ -126,6 +125,8 @@ const mainInfoBlockClasses = computed(() => {
 const avatarSize = computed(() => (props.block ? 'xxl' : 'base'))
 const buttonSize = computed(() => (props.block ? 'lg' : 'sm'))
 const isForRegisteredUser = computed(() => !!props.invite.user?.id)
+const acceptMessage = computed(() => (props.invite.workspace ? 'Join' : 'Accept'))
+const declineMessage = computed(() => (props.invite.workspace ? 'Dismiss' : 'Decline'))
 
 const onLoginSignupClick = async () => {
   postAuthRedirect.setCurrentRoute()

packages/frontend-2/components/workspace/invite/Banners.vue

@@ -13,6 +13,8 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
+import { CookieKeys } from '~/lib/common/helpers/constants'
 import { graphql } from '~~/lib/common/generated/gql'
 import type { WorkspaceInviteBanners_UserFragment } from '~~/lib/common/generated/gql/graphql'
 
@@ -35,8 +37,18 @@ const props = defineProps<{
   invites: WorkspaceInviteBanners_UserFragment
 }>()
 
+const dismissedDiscoverableWorkspaces = useSynchronizedCookie<string[]>(
+  CookieKeys.DismissedDiscoverableWorkspaces,
+  {
+    default: () => []
+  }
+)
+
 const invites = computed(() => props.invites.workspaceInvites || [])
 const discoverableWorkspaces = computed(
-  () => props.invites.discoverableWorkspaces || []
+  () =>
+    props.invites.discoverableWorkspaces?.filter(
+      (workspace) => !dismissedDiscoverableWorkspaces.value.includes(workspace.id)
+    ) || []
 )
 </script>

packages/frontend-2/components/workspace/invite/DiscoverableWorkspaceBanner.vue

@@ -10,11 +10,13 @@
 
 <script setup lang="ts">
 import { useApolloClient } from '@vue/apollo-composable'
+import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
 import { graphql } from '~/lib/common/generated/gql'
 import {
   DashboardJoinWorkspaceDocument,
   type WorkspaceInviteDiscoverableWorkspaceBanner_DiscoverableWorkspaceFragment
 } from '~/lib/common/generated/gql/graphql'
+import { CookieKeys } from '~/lib/common/helpers/constants'
 import {
   getCacheId,
   getFirstErrorMessage,
@@ -50,6 +52,12 @@ const { client: apollo } = useApolloClient()
 const { activeUser } = useActiveUser()
 const { triggerNotification } = useGlobalToast()
 const router = useRouter()
+const dismissedDiscoverableWorkspaces = useSynchronizedCookie<string[]>(
+  CookieKeys.DismissedDiscoverableWorkspaces,
+  {
+    default: () => []
+  }
+)
 
 const invite = computed(() => ({
   workspace: {
@@ -61,7 +69,13 @@ const invite = computed(() => ({
 
 const processJoin = async (accept: boolean) => {
   if (!accept) {
-    // TODO: Use cookies to enable dismissing the discoverable workspace invite
+    dismissedDiscoverableWorkspaces.value = [
+      ...dismissedDiscoverableWorkspaces.value,
+      props.workspace.id
+    ]
+    apollo.cache.evict({
+      id: getCacheId('DiscoverableWorkspace', props.workspace.id)
+    })
     return
   }
 

packages/frontend-2/lib/common/helpers/constants.ts

@@ -4,7 +4,8 @@
 export enum CookieKeys {
   AuthToken = 'authn',
   Theme = 'theme',
-  PostAuthRedirect = 'postAuthRedirect'
+  PostAuthRedirect = 'postAuthRedirect',
+  DismissedDiscoverableWorkspaces = 'dismissedDiscoverableWorkspaces'
 }
 
 /**