Accept invite

apps/dashboard/package.json

@@ -13,7 +13,7 @@
     "check:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.3",
+    "@hookform/resolvers": "^3.3.4",
     "@logsnag/next": "^1.0.2",
     "@midday/gocardless": "workspace:*",
     "@midday/jobs": "workspace:*",
@@ -43,7 +43,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
-    "react-hotkeys-hook": "^4.4.1",
+    "react-hotkeys-hook": "^4.4.3",
     "react-pin-field": "^3.1.4",
     "recharts": "^2.10.3",
     "resend": "^2.1.0",

apps/dashboard/src/actions/decline-invite-action.ts

@@ -12,10 +12,7 @@ export const declineInviteAction = action(
     const supabase = createClient();
     const user = await getUser();
 
-    console.log(id);
-
-    // await supabase.from("user_invites").delete().eq("id", id);
-
+    await supabase.from("user_invites").delete().eq("id", id);
     revalidateTag(`team_invites_${user.data.team_id}`);
 
     return id;

apps/dashboard/src/app/[locale]/@dashboard/teams/invite/[code]/page.tsx

@@ -1,3 +1,75 @@
-export default function InviteCode() {
-  return <h1>Join team by code verify</h1>;
+import { joinTeamByInviteCode } from "@midday/supabase/mutations";
+import { createClient } from "@midday/supabase/server";
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default async function InviteCode({ params }) {
+  const supabase = createClient();
+  const { code } = params;
+
+  if (code) {
+    const data = await joinTeamByInviteCode(supabase, code);
+
+    if (data?.success) {
+      redirect("/");
+    }
+  }
+
+  return (
+    <div>
+      <div className="absolute left-5 top-4 md:left-10 md:top-10">
+        <Link href="/">
+          <Icons.Logo />
+        </Link>
+      </div>
+
+      <div className="flex min-h-screen justify-center items-center overflow-hidden p-6 md:p-0">
+        <div className="relative z-20 m-auto flex w-full max-w-[380px] flex-col">
+          <div className="flex w-full flex-col relative">
+            <div className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[20px] -left-[100px] animate-[pulse_2s_ease-in-out_infinite]" />
+            <div className="w-[3px] h-[3px] bg-primary rounded-full absolute -top-[70px] left-[5%] animate-[pulse_2s_ease-in-out_infinite]" />
+            <div
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[120px] left-[80px] animate-[pulse_2s_ease-in-out_infinite]"
+              style={{ animationDelay: "500ms" }}
+            />
+            <div
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute -top-[80px] left-[180px] animate-[pulse_2s_ease-in-out_infinite]"
+              style={{ animationDelay: "0ms" }}
+            />
+            <div
+              className="w-[3px] h-[3px] bg-[#FFD02B] rounded-full absolute -top-[20px] -right-[40px] animate-[pulse_2s_ease-in-out_infinite]"
+              style={{ animationDelay: "200ms" }}
+            />
+            <div
+              className="w-[2px] h-[2px] bg-primary rounded-full absolute -top-[100px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
+              style={{ animationDelay: "2s" }}
+            />
+
+            <div
+              className="w-[5px] h-[5px] bg-primary rounded-full absolute top-[80px] -right-[100px] animate-[pulse_2s_ease-in-out_infinite]"
+              style={{ animationDelay: "0ms" }}
+            />
+
+            <div className="pb-4 bg-gradient-to-r from-primary dark:via-primary dark:to-[#848484] to-[#000] inline-block text-transparent bg-clip-text">
+              <h1 className="font-medium pb-1 text-3xl">
+                Invite link has expired
+              </h1>
+            </div>
+
+            <p className="font-medium pb-1 text-2xl text-[#606060]">
+              Notify the sender for a new one.
+            </p>
+
+            <div className="pointer-events-auto mt-6 flex flex-col mb-4">
+              <Link href="https://midday.ai" className="w-full">
+                <Button className="w-full">Back to home page</Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

packages/email/emails/invite.tsx

@@ -50,7 +50,7 @@ export const InviteEmail = ({
   locale = "en",
 }: InviteEmailProps) => {
   const { t } = getI18n({ locale });
-  const inviteLink = `${baseAppUrl}/invite/${inviteCode}`;
+  const inviteLink = `${baseAppUrl}/teams/invite/${inviteCode}`;
 
   return (
     <Html>

packages/supabase/src/mutations/index.ts

@@ -1,5 +1,9 @@
 import { addDays } from "date-fns";
-import { getCurrentUserTeamQuery, getSession } from "../queries";
+import {
+  getCurrentUserTeamQuery,
+  getSession,
+  getUserInviteQuery,
+} from "../queries";
 import { Client, Database } from "../types";
 import { remove } from "../utils/storage";
 
@@ -337,3 +341,37 @@ export async function leaveTeam(supabase: Client, params: LeaveTeamParams) {
     .select()
     .single();
 }
+
+export async function joinTeamByInviteCode(supabase: Client, code: string) {
+  const {
+    data: { session },
+  } = await getSession(supabase);
+  const { data: inviteDate } = await getUserInviteQuery(supabase, {
+    code,
+    email: session?.user?.email,
+  });
+
+  if (inviteDate) {
+    // Add user team
+    await supabase.from("users_on_team").insert({
+      user_id: session?.user.id,
+      team_id: inviteDate?.team_id,
+      role: inviteDate.role,
+    });
+
+    // Set current team
+    await supabase
+      .from("users")
+      .update({
+        team_id: inviteDate?.team_id,
+      })
+      .eq("id", session?.user.id);
+
+    // remove invite
+    await supabase.from("user_invites").delete().eq("code", code);
+
+    return { success: true };
+  }
+
+  return null;
+}

packages/supabase/src/queries/index.ts

@@ -634,3 +634,20 @@ export async function getUserInvitesQuery(supabase: Client, email: string) {
     .eq("email", email)
     .throwOnError();
 }
+
+type GetUserInviteQueryParams = {
+  code: string;
+  email: string;
+};
+
+export async function getUserInviteQuery(
+  supabase: Client,
+  params: GetUserInviteQueryParams
+) {
+  return supabase
+    .from("user_invites")
+    .select("*")
+    .eq("code", params.code)
+    .eq("email", params.email)
+    .single();
+}