fix: invitation acceptance flow

packages/hoppscotch-app/helpers/backend/GQLClient.ts

@@ -6,6 +6,7 @@ import {
   watchEffect,
   watchSyncEffect,
   WatchStopHandle,
+  set,
 } from "@nuxtjs/composition-api"
 import {
   createClient,
@@ -222,7 +223,8 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
 
   const execute = (updatedVars?: DocVarType) => {
     if (updatedVars) {
-      args.variables = updatedVars as any
+      set(args, "variables", updatedVars)
+      // args.variables = updatedVars as any
     }
 
     isPaused.value = false

packages/hoppscotch-app/helpers/backend/gql/queries/GetInviteDetails.graphql

@@ -0,0 +1,15 @@
+query GetInviteDetails($inviteID: ID!) {
+  teamInvitation(inviteID: $inviteID) {
+    id
+    inviteeEmail
+    inviteeRole
+    team {
+      id
+      name
+    }
+    creator {
+      uid
+      displayName
+    }
+  }
+}

packages/hoppscotch-app/locales/en.json

@@ -481,6 +481,8 @@
     "invalid_invite_link": "Invalid invite link",
     "invalid_invite_link_description": "The link you followed is invalid. Contact your team owner.",
     "invite": "Invite",
+    "login_to_continue": "Login to continue",
+    "login_to_continue_description": "You need to be logged in to join a team.",
     "invite_more": "Invite more",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",

packages/hoppscotch-app/pages/join-team.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="flex flex-col min-h-screen items-center justify-between">
+    <div
+      v-if="invalidLink"
+      class="flex flex-1 items-center justify-center flex-col"
+    >
+      <i class="opacity-75 pb-2 material-icons">report</i>
+      <h1 class="heading text-center">
+        {{ $t("team.invalid_invite_link") }}
+      </h1>
+      <p class="text-center">
+        {{ $t("team.invalid_invite_link_description") }}
+      </p>
+    </div>
+    <div
+      v-else-if="currentUser === null"
+      class="flex-col flex-1 p-4 flex items-center justify-center"
+    >
+      <h1 class="heading">{{ $t("team.login_to_continue") }}</h1>
+      <p class="mt-2">{{ $t("team.login_to_continue_description") }}</p>
+      <ButtonPrimary
+        :label="$t('auth.login_to_hoppscotch')"
+        class="mt-8"
+        @click.native="showLogin = true"
+      />
+    </div>
+    <div v-else class="flex-col flex-1 p-4 flex items-center justify-center">
+      <div
+        v-if="inviteDetails.loading"
+        class="flex-col flex-1 p-4 flex items-center justify-center"
+      >
+        <SmartSpinner />
+      </div>
+      <div v-else>
+        <div
+          v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
+          class="flex flex-col p-4 items-center"
+        >
+          <i class="mb-4 material-icons">help_outline</i>
+          {{ $t("error.something_went_wrong") }}
+        </div>
+        <div
+          v-if="!inviteDetails.loading && E.isRight(inviteDetails.data)"
+          class="flex-col flex-1 p-4 flex items-center justify-center"
+        >
+          <h1 class="heading">
+            {{
+              $t("team.join_team", {
+                team: inviteDetails.data.right.teamInvitation.team.name,
+              })
+            }}
+          </h1>
+          <p class="text-secondaryLight mt-2">
+            {{
+              $t("team.invited_to_team", {
+                owner:
+                  inviteDetails.data.right.teamInvitation.creator.displayName,
+                team: inviteDetails.data.right.teamInvitation.team.name,
+              })
+            }}
+          </p>
+          <div class="mt-8">
+            <ButtonPrimary
+              :label="
+                $t('team.join_team', {
+                  team: inviteDetails.data.right.teamInvitation.team.name,
+                })
+              "
+              :loading="loading"
+              :disabled="revokedLink"
+              @click.native="joinTeam"
+            />
+          </div>
+          <pre v-if="error" class="p-4 text-red-500">{{ error }}</pre>
+        </div>
+      </div>
+    </div>
+    <div class="p-4">
+      <ButtonSecondary
+        class="tracking-wide !font-bold !text-secondaryDark"
+        label="HOPPSCOTCH"
+        to="/"
+      />
+    </div>
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute } from "@nuxtjs/composition-api"
+import * as E from "fp-ts/Either"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import {
+  GetInviteDetailsDocument,
+  GetInviteDetailsQuery,
+  GetInviteDetailsQueryVariables,
+} from "~/helpers/backend/graphql"
+import { acceptTeamInvitation } from "~/helpers/backend/mutations/TeamInvitation"
+import { initializeFirebase } from "~/helpers/fb"
+import { currentUser$, onLoggedIn } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+
+type GetInviteDetailsError = "team_invite/not_valid_viewer"
+
+export default defineComponent({
+  layout: "empty",
+
+  setup() {
+    const route = useRoute()
+
+    const inviteDetails = useGQLQuery<
+      GetInviteDetailsQuery,
+      GetInviteDetailsQueryVariables,
+      GetInviteDetailsError
+    >({
+      query: GetInviteDetailsDocument,
+      variables: {
+        inviteID: route.value.query.id as string,
+      },
+      defer: true,
+    })
+
+    onLoggedIn(() => {
+      console.log("loog aayi")
+
+      if (typeof route.value.query.id === "string") {
+        console.log("query run aayi", route.value.query.id)
+
+        inviteDetails.execute({
+          inviteID: route.value.query.id,
+        })
+      }
+    })
+
+    return {
+      E,
+      inviteDetails,
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  data() {
+    return {
+      invalidLink: false,
+      showLogin: false,
+      loading: false,
+      revokedLink: false,
+      error: null,
+      inviteID: "",
+    }
+  },
+  beforeMount() {
+    initializeFirebase()
+  },
+  mounted() {
+    if (typeof this.$route.query.id === "string") {
+      this.inviteID = this.$route.query.id
+    }
+    this.invalidLink = !this.inviteID
+    // TODO: check revokeTeamInvitation
+    // TODO: check login user already a member
+  },
+  methods: {
+    joinTeam() {
+      this.loading = true
+      pipe(
+        acceptTeamInvitation(this.inviteID),
+        TE.matchW(
+          () => {
+            this.loading = false
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
+          },
+          () => {
+            this.loading = false
+            this.$router.push("/")
+          }
+        )
+      )()
+    },
+  },
+})
+</script>

packages/hoppscotch-app/pages/team-invite.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="flex flex-col min-h-screen items-center justify-between">
-    <div
-      v-if="invalidLink"
-      class="flex flex-1 items-center justify-center flex-col"
-    >
-      <h1 class="heading text-center">
-        {{ $t("team.invalid_invite_link") }}
-      </h1>
-      <p class="text-center">
-        {{ $t("team.invalid_invite_link_description") }}
-      </p>
-    </div>
-    <div v-else class="flex-col flex-1 p-4 flex items-center justify-center">
-      <h1 class="heading">{{ $t("team.join_team", { team: "Tesla" }) }}</h1>
-      <p class="text-secondaryLight mt-2">
-        {{ $t("team.invited_to_team", { owner: "Elon Musk", team: "Tesla" }) }}
-      </p>
-      <div v-if="currentUser === null" class="mt-8">
-        <ButtonPrimary
-          :label="$t('auth.login_to_hoppscotch')"
-          @click.native="showLogin = true"
-        />
-      </div>
-      <div v-else class="mt-8">
-        <ButtonPrimary
-          :label="$t('team.join_team', { team: 'Tesla' })"
-          :loading="loading"
-          :disabled="revokedLink"
-          @click.native="joinTeam"
-        />
-      </div>
-      <pre v-if="error" class="p-4 text-red-500">{{ error }}</pre>
-      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-    </div>
-    <div class="p-4">
-      <ButtonSecondary
-        class="tracking-wide !font-bold !text-secondaryDark"
-        label="HOPPSCOTCH"
-        to="/"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
-import { initializeFirebase } from "~/helpers/fb"
-import { currentUser$ } from "~/helpers/fb/auth"
-import { useReadonlyStream } from "~/helpers/utils/composables"
-
-export default defineComponent({
-  layout: "empty",
-  setup() {
-    return {
-      currentUser: useReadonlyStream(currentUser$, null),
-    }
-  },
-  data() {
-    return {
-      invalidLink: false,
-      showLogin: false,
-      loading: false,
-      revokedLink: false,
-      error: null,
-      teamID: "",
-    }
-  },
-  beforeMount() {
-    initializeFirebase()
-  },
-  mounted() {
-    this.teamID = this.$route.query.id
-    this.invalidLink = !this.teamID
-    // TODO: check revokeTeamInvitation
-    // TODO: check login user already a member
-  },
-  methods: {
-    joinTeam() {
-      this.loading = true
-      // TODO: run join team mutation
-      // TODO: show success toast and redirect to home page / error toast
-      // this.$router.push({ path: "/" })
-      // $toast.success(`${t("team.join")}`, {
-      //   icon: "person",
-      // })
-      // this.$toast.error(this.$t("error.something_went_wrong"), {
-      //   icon: "error_outline",
-      // })
-      // console.error(e)
-    },
-  },
-})
-</script>