From 3ba517a787fce091fbfc532a505007a860a59d2a Mon Sep 17 00:00:00 2001
From: ElpisHelle <ElpisHelle0710@gmail.com>
Date: Wed, 7 Jun 2023 16:01:58 +0100
Subject: [PATCH] feat: implement user collaboration features (#1221)

---
 components/atoms/Textarea/text-area.tsx       |  28 ++-
 .../CollaborationCard/collaboration-card.tsx  |  43 +++--
 .../contributor-highlight-card.tsx            |  28 ++-
 .../contributor-profile-header.tsx            | 177 ++++++++++++++----
 .../HighlightInput/highlight-input-form.tsx   |  28 +--
 .../collaboration-requests-wrapper.tsx        |  72 +++++++
 .../contributor-profile-page.tsx              |   2 +
 .../contributor-profile-tab.tsx               | 122 ++++++------
 lib/hooks/useUserCollaborations.ts            |  84 +++++++++
 next-types.d.ts                               |  14 ++
 .../molecules/collaboration-card.stories.tsx  |   4 +-
 .../collaboration-summary-card.stories.tsx    |  21 ++-
 12 files changed, 468 insertions(+), 155 deletions(-)
 create mode 100644 components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
 create mode 100644 lib/hooks/useUserCollaborations.ts

diff --git a/components/atoms/Textarea/text-area.tsx b/components/atoms/Textarea/text-area.tsx
index d4a6c65..3a09dcc 100644
--- a/components/atoms/Textarea/text-area.tsx
+++ b/components/atoms/Textarea/text-area.tsx
@@ -1,16 +1,34 @@
-import * as React from "react";
+import React, { ChangeEvent, useRef } from "react";
 import clsx from "clsx";
 
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  defaultRow?: number;
+  onChangeText?: (value: string) => void;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, onChangeText, ...props }, ref) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const autoGrowTextarea = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChangeText?.(event.target.value);
+    autoGrowTextarea();
+  };
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
   return (
     <textarea
+      onChange={handleInputChange}
       className={clsx(
-        "flex h-20  md:min-h-26 md:h-auto w-full rounded-md  py-2  text-sm placeholder:text-slate-400    disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-20 md:min-h-26 md:h-auto w-full rounded-md  py-2  text-sm placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
-      ref={ref}
+      ref={textareaRef}
       {...props}
     />
   );
diff --git a/components/molecules/CollaborationCard/collaboration-card.tsx b/components/molecules/CollaborationCard/collaboration-card.tsx
index 4c43a9b..bab529c 100644
--- a/components/molecules/CollaborationCard/collaboration-card.tsx
+++ b/components/molecules/CollaborationCard/collaboration-card.tsx
@@ -1,27 +1,44 @@
 import React from "react";
 import Avatar from "components/atoms/Avatar/avatar";
+import clsx from "clsx";
+import { getAvatarByUsername } from "lib/utils/github";
+import Button from "components/atoms/Button/button";
 
-export interface CollaborationRequestObject {
+export interface CollaborationRequestObject extends React.ComponentProps<"div"> {
   requestor: DbUser | undefined;
   outreachMessage: string;
+  requestId: string;
+  onAccept: (id: string) => void;
+  onDecline: (id: string) => void;
 }
 
-const CollaborationCard = ({ requestor, outreachMessage }: CollaborationRequestObject) => {
+const CollaborationCard = ({
+  requestor,
+  outreachMessage,
+  className,
+  requestId,
+  onAccept,
+  onDecline,
+}: CollaborationRequestObject) => {
   return (
-    <div className="bg-white flex flex-col gap-4 rounded-2xl p-4 border border-light-slate-6 max-w-2xl">
-      <div className="flex justify-between text-sm items-center ">
-        <div className="flex gap-2 text-sm items-center">
-          <Avatar
-            className="!rounded-none"
-            size="sm"
-            avatarURL="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
-          />
+    <div className={clsx("flex flex-col w-full gap-4 p-4 bg-white border rounded-2xl border-light-slate-6", className)}>
+      <div className="flex items-center justify-between text-sm ">
+        <div className="flex items-center gap-2 text-sm">
+          <Avatar className="!rounded-none" size="sm" avatarURL={getAvatarByUsername(requestor?.login || "")} />
 
-          <div>Microsoft</div>
+          <div>{requestor?.name}</div>
         </div>
         <div className="flex gap-2">
-          <button className="px-2">Ignore</button>
-          <button className="bg-light-orange-9 px-2 py-1 outline-none rounded-lg text-white">Accept</button>
+          <button onClick={() => onDecline(requestId)} className="px-2">
+            Ignore
+          </button>
+          <Button
+            onClick={() => onAccept(requestId)}
+            variant="primary"
+            className="!px-2 !py-1 !text-xs md:text-sm text-white rounded-lg outline-none bg-light-orange-9"
+          >
+            Accept
+          </Button>
         </div>
       </div>
       <div>{outreachMessage}</div>
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index d7216a8..2dd51b5 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -7,7 +7,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from "components/atoms/Dropdown/dropdown";
 import { HiOutlineEmojiHappy } from "react-icons/hi";
 import { TfiMoreAlt } from "react-icons/tfi";
@@ -25,7 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-  DialogCloseButton
+  DialogCloseButton,
 } from "../Dialog/dialog";
 import { generateApiPrUrl } from "lib/utils/github";
 import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo";
@@ -39,7 +39,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger
+  AlertDialogTrigger,
 } from "../AlertDialog/alert-dialog";
 import { deleteHighlight } from "lib/hooks/deleteHighlight";
 import { useToast } from "lib/hooks/useToast";
@@ -72,7 +72,7 @@ const ContributorHighlightCard = ({
   id,
   refreshCallBack,
   emojis,
-  shipped_date
+  shipped_date,
 }: ContributorHighlightCardProps) => {
   const { toast } = useToast();
   const twitterTweet = `${title || "Open Source Highlight"} - OpenSauced from ${user}`;
@@ -202,14 +202,11 @@ const ContributorHighlightCard = ({
     }
   }, [highlight]);
 
-  function FollowUser(){
-    
+  function FollowUser() {
     const { follow, unFollow, isError } = useFollowUser(user);
-                
-    return (loggedInUser ? (
-      <DropdownMenuItem
-        className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}
-      >
+
+    return loggedInUser ? (
+      <DropdownMenuItem className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}>
         <div onClick={isError ? follow : unFollow} className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
           <FaUserPlus size={22} />
           <span>
@@ -227,7 +224,7 @@ const ContributorHighlightCard = ({
           <span>Follow {user}</span>
         </div>
       </DropdownMenuItem>
-    ));
+    );
   }
 
   return (
@@ -269,11 +266,8 @@ const ContributorHighlightCard = ({
                     <span>Share to Linkedin</span>
                   </a>
                 </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)}
-                  className="rounded-md"
-                >
-                  <div className = "flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
+                <DropdownMenuItem onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)} className="rounded-md">
+                  <div className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
                     <BsLink45Deg size={22} />
                     <span>Copy link</span>
                   </div>
diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
index 8501f76..2d35c21 100644
--- a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
+++ b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -1,14 +1,25 @@
 import React, { useState, useEffect } from "react";
-import Avatar from "components/atoms/Avatar/avatar";
+import { useRouter } from "next/router";
 import Image from "next/image";
+import { TfiMoreAlt } from "react-icons/tfi";
+import { FiCopy } from "react-icons/fi";
+import { SignInWithOAuthCredentials, User } from "@supabase/supabase-js";
+import { usePostHog } from "posthog-js/react";
+
+import Avatar from "components/atoms/Avatar/avatar";
 import RainbowBg from "img/rainbow-cover.png";
 import Button from "components/atoms/Button/button";
-import Link from "next/link";
-import { MarkGithubIcon } from "@primer/octicons-react";
-import { User } from "@supabase/supabase-js";
-import { FiCopy } from "react-icons/fi";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog";
+import { Textarea } from "components/atoms/Textarea/text-area";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "components/atoms/Dropdown/dropdown";
+
+import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
 import { useToast } from "lib/hooks/useToast";
-import { usePostHog } from "posthog-js/react";
 
 interface ContributorProfileHeaderProps {
   avatarUrl?: string;
@@ -19,8 +30,10 @@ interface ContributorProfileHeaderProps {
   handleUnfollow: Function;
   user: User | null;
   username: string | undefined;
-  handleSignIn: Function;
+  handleSignIn: (params: SignInWithOAuthCredentials) => void;
   isOwner: boolean;
+  isRecievingCollaborations?: boolean;
+  isPremium?: boolean;
 }
 const ContributorProfileHeader = ({
   avatarUrl,
@@ -33,10 +46,21 @@ const ContributorProfileHeader = ({
   user,
   handleSignIn,
   isOwner,
+  isRecievingCollaborations,
+  isPremium,
 }: ContributorProfileHeaderProps) => {
+  const router = useRouter();
+  const currentPath = router.asPath;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { requestCollaboration } = useUserCollaborations();
+  const [message, setMessage] = useState("");
+
   const posthog = usePostHog();
+
   const { toast } = useToast();
   const [host, setHost] = useState("");
+
   const handleFollowClick = () => {
     if (isFollowing) {
       handleUnfollow();
@@ -45,6 +69,25 @@ const ContributorProfileHeader = ({
     }
   };
 
+  const handleCollaborationRequest = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (message && username) {
+      setLoading(true);
+      await requestCollaboration({ username, message });
+      setIsDialogOpen(false);
+      setTimeout(() => {
+        document.body.setAttribute("style", "pointer-events:auto !important");
+      }, 1);
+      setLoading(false);
+      setMessage("");
+    }
+  };
+
+  const handleTextAreaInputChange = (e: string) => {
+    setMessage(e);
+  };
+
   const handleCopyToClipboard = async (content: string) => {
     const url = new URL(content).toString();
     posthog!.capture("clicked: profile copied", {
@@ -85,7 +128,7 @@ const ContributorProfileHeader = ({
             isCircle
           />
         </div>
-        <div className="translate-y-[125px] md:hidden ">
+        <div className="translate-y-[110px] md:hidden ">
           <Avatar
             initialsClassName="text-[70px] -translate-y-1 leading-none"
             initials={githubName?.charAt(0)}
@@ -97,38 +140,100 @@ const ContributorProfileHeader = ({
           />
         </div>
         {isConnected && (
-          <div className="flex flex-col items-center gap-3 md:translate-y-0 translate-y-28 md:flex-row">
-            <Button
-              onClick={() => handleCopyToClipboard(`${host}/user/${user?.user_metadata.user_name}`)}
-              className="px-10 py-2 mb-10 bg-white md:mb-6 "
-              variant="text"
-            >
-              <FiCopy className="mr-1 mt-1" /> Share
-            </Button>
-            {user ? (
-              !isOwner && (
-                <Button onClick={handleFollowClick} className="px-10 py-2 mb-10 bg-white md:mb-6 " variant="text">
-                  {isFollowing ? "Following" : "Follow"}
+          <div className="flex flex-col items-center gap-3 translate-y-24 md:translate-y-0 md:flex-row">
+            {/* Mobile dropdown menu */}
+
+            <DropdownMenu>
+              <div className="flex items-center gap-2 mb-10 md:gap-6">
+                <Button
+                  onClick={() => handleCopyToClipboard(`${host}/user/${user?.user_metadata.user_name}`)}
+                  className="px-8 py-2 bg-white "
+                  variant="text"
+                >
+                  <FiCopy className="mt-1 mr-1" /> Share
                 </Button>
-              )
-            ) : (
-              <Button
-                onClick={async () => await handleSignIn({ provider: "github" })}
-                className="px-10 py-2 mb-10 bg-white md:mb-6 "
-                variant="text"
-              >
-                Follow
-              </Button>
-            )}
-
-            <Link href="#">
-              <Button className="hidden px-8 py-2" variant="primary">
-                Collaborate
-              </Button>
-            </Link>
+                {!isOwner && (
+                  <DropdownMenuTrigger title="More options" className="p-2 mr-3 bg-white rounded-full cursor-pointer ">
+                    <TfiMoreAlt size={20} className="" />
+                  </DropdownMenuTrigger>
+                )}
+              </div>
+
+              <DropdownMenuContent align="end" className="flex flex-col gap-1 py-2 rounded-lg">
+                {user ? (
+                  !isOwner && (
+                    <>
+                      <DropdownMenuItem className="rounded-md">
+                        <button onClick={handleFollowClick} className="flex items-center gap-1 pl-3 pr-7">
+                          {isFollowing ? "Following" : "Follow"}
+                        </button>
+                      </DropdownMenuItem>
+                      {isPremium && isRecievingCollaborations && (
+                        <DropdownMenuItem className="rounded-md">
+                          <button onClick={() => setIsDialogOpen(true)} className="flex items-center gap-1 pl-3 pr-7">
+                            Collaborate
+                          </button>
+                        </DropdownMenuItem>
+                      )}
+                    </>
+                  )
+                ) : (
+                  <>
+                    <DropdownMenuItem className="rounded-md">
+                      <button
+                        onClick={async () =>
+                          handleSignIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
+                        }
+                        className="flex items-center gap-1 pl-3 pr-7"
+                      >
+                        Follow
+                      </button>
+                    </DropdownMenuItem>
+                    {isRecievingCollaborations && (
+                      <DropdownMenuItem className="rounded-md">
+                        <button
+                          onClick={async () =>
+                            handleSignIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
+                          }
+                          className="flex items-center gap-1 pl-3 pr-7"
+                        >
+                          Collaborate
+                        </button>
+                      </DropdownMenuItem>
+                    )}
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         )}
       </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="w-full md:!w-2/3 px-4 py-8 md:space-y-4">
+          <DialogHeader>
+            <DialogTitle className="!text-3xl text-left">Collaborate with {username}!</DialogTitle>
+          </DialogHeader>
+
+          <form onSubmit={handleCollaborationRequest} className="flex flex-col w-full gap-4 px-4 md:gap-8 md:px-14 ">
+            <div className="space-y-2">
+              <label htmlFor="message">Send a message</label>
+              <Textarea
+                defaultRow={1}
+                value={message}
+                className="w-full px-2 mb-2 transition text-light-slate-11 focus:outline-none"
+                name="message"
+                id="message"
+                onChangeText={handleTextAreaInputChange}
+              />
+            </div>
+
+            <Button loading={loading} title="submit" className="self-end w-max" variant="primary">
+              Send
+            </Button>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index 272fb41..0fdcda2 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { BsCalendar2Event } from "react-icons/bs";
 import { format } from "date-fns";
@@ -23,16 +23,12 @@ interface HighlightInputFormProps {
 const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.Element => {
   const [isDivFocused, setIsDivFocused] = useState(false);
   const [loading, setLoading] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [bodyText, setBodyText] = useState("");
-  const [row, setRow] = useState(4);
   const [title, setTitle] = useState("");
   const [charCount, setCharCount] = useState(0);
   const [pullrequestLink, setPullRequestLink] = useState("");
 
-  let rowLomit = 10;
   const charLimit = 500;
-  let messageLastScrollHeight = textAreaRef.current ? textAreaRef.current?.scrollHeight : 50;
 
   const [date, setDate] = useState<Date | undefined>();
 
@@ -54,15 +50,8 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
     }
   }, [bodyText, pullrequestLink]);
 
-  const handleTextAreaInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setBodyText(e.target.value);
-    if (row < rowLomit && textAreaRef.current && textAreaRef.current?.scrollHeight > messageLastScrollHeight) {
-      setRow((prev) => prev + 1);
-    } else if (row > 1 && textAreaRef.current && textAreaRef.current?.scrollHeight < messageLastScrollHeight) {
-      setRow((prev) => prev--);
-    }
-    if (!bodyText) setRow(1);
-    messageLastScrollHeight = textAreaRef.current?.scrollHeight || 80;
+  const handleTextAreaInputChange = (value: string) => {
+    setBodyText(value);
   };
 
   // Handle submit highlights
@@ -93,7 +82,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           highlight,
           title,
           url: url,
-          shipped_at: date
+          shipped_at: date,
         });
 
         setLoading(false);
@@ -137,15 +126,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
               className={`resize-y min-h-[80px] max-h-99 font-normal text-light-slate-11 mb-2 transition focus:outline-none rounded-lg ${
                 !isDivFocused ? "hidden" : ""
               }`}
-              ref={textAreaRef}
-              rows={row}
+              defaultRow={4}
               value={bodyText}
               placeholder={`Share your thoughts and link to it.
 
 https://github.com/open-sauced/insights/pull/913`}
-              onChange={(e) => {
-                handleTextAreaInputChange(e);
-                setCharCount(e.target.value.length);
+              onChangeText={(value) => {
+                handleTextAreaInputChange(value);
+                setCharCount(value.length);
               }}
             />
 
diff --git a/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx b/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
new file mode 100644
index 0000000..721e277
--- /dev/null
+++ b/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { format, isToday, isYesterday, formatDistanceToNowStrict } from "date-fns";
+import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
+import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import DashContainer from "components/atoms/DashedContainer/DashContainer";
+
+function formatPostDate(date: Date) {
+  if (isToday(date)) {
+    return "Today";
+  } else if (isYesterday(date)) {
+    return "Yesterday";
+  } else {
+    return formatDistanceToNowStrict(date, { addSuffix: true });
+  }
+}
+
+const CollaborationRequestsWrapper = () => {
+  const { data, updateCollaborationStatus, deleteCollaborationRequest } = useUserCollaborations();
+  let currentDate: string;
+
+  const getDateGroupHeader = (date: Date, index: number) => {
+    const dateString = date.toLocaleDateString();
+    if (dateString !== currentDate) {
+      currentDate = dateString;
+
+      return (
+        <p className={`mt-4 text-light-slate-10 md:pt-4 md:mt-8 ${index !== 0 && " border-t"}`}>
+          {formatPostDate(new Date(date))}
+        </p>
+      );
+    }
+    return;
+  };
+
+  return (
+    <div>
+      {data && data.length > 0 ? (
+        data
+          .slice()
+          .filter((request) => request.status === "pending")
+          .sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
+          .map((requests, i) => {
+            return (
+              <div className="flex flex-col w-full " key={i}>
+                <div className="w-full mt-1 text-center md:text-left">
+                  {getDateGroupHeader(new Date(requests.created_at), i)}
+                </div>
+                <CollaborationCard
+                  onDecline={deleteCollaborationRequest}
+                  onAccept={updateCollaborationStatus}
+                  requestId={requests.id}
+                  className="self-end w-full mt-1 md:w-5/6 md:mt-1"
+                  outreachMessage={requests.message}
+                  requestor={requests.request_user}
+                />
+              </div>
+            );
+          })
+      ) : (
+        <DashContainer className="flex-col gap-6 md:gap-8 text-light-slate-9">
+          <p>No pending requests.</p>
+          <p className="text-center md:px-16">
+            Sometimes you got to be a friend to make a friend. Considering requesting collaboration on sharing profile
+            on social channels like GitHub or Twitter
+          </p>
+        </DashContainer>
+      )}
+    </div>
+  );
+};
+
+export default CollaborationRequestsWrapper;
diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
index 55108de..c4da5c6 100644
--- a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
+++ b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
@@ -99,8 +99,10 @@ const ContributorProfilePage = ({
         <SkeletonWrapper height={200} />
       ) : (
         <ContributorProfileHeader
+          isPremium={user ? user.role >= 50 : false}
           handleSignIn={signIn}
           username={user?.login}
+          isRecievingCollaborations={user?.receive_collaboration}
           user={loggedInUser}
           isFollowing={followError ? false : true}
           isConnected={iscConnected}
diff --git a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
index 5647656..1de03dc 100644
--- a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
+++ b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
@@ -31,6 +31,7 @@ import RecommendedRepoCard from "components/molecules/RecommendedRepoCard/recomm
 import recommendations from "lib/utils/recommendations";
 import Title from "components/atoms/Typography/title";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+import CollaborationRequestsWrapper from "../CollaborationRequestWrapper/collaboration-requests-wrapper";
 
 interface ContributorProfileTabProps {
   contributor?: DbUser;
@@ -45,7 +46,7 @@ interface ContributorProfileTabProps {
   repoList: RepoList[];
 }
 
-const tabLinks: string[] = ["Highlights", "Contributions", "Recommendations"];
+const tabLinks: string[] = ["Highlights", "Contributions", "Requests", "Recommendations"];
 
 const ContributorProfileTab = ({
   contributor,
@@ -59,7 +60,7 @@ const ContributorProfileTab = ({
   recentContributionCount,
   repoList,
 }: ContributorProfileTabProps): JSX.Element => {
-  const { login, interests: userInterests } = contributor || {};
+  const { login, interests: userInterests, receive_collaboration } = contributor || {};
   const { user } = useSupabaseAuth();
   const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
   const [showInterests, setShowInterests] = useState(false);
@@ -131,16 +132,19 @@ const ContributorProfileTab = ({
 
   return (
     <Tabs defaultValue={uppercaseFirst(currentPathname as string)} className="">
-      <TabsList className="justify-start w-full border-b">
+      <TabsList className="justify-start w-full overflow-x-scroll border-b">
         {tabLinks.map((tab) => (
           <TabsTrigger
             key={tab}
             className={clsx(
-              "data-[state=active]:border-sauced-orange data-[state=active]:border-b-2 text-2xl",
+              "data-[state=active]:border-sauced-orange shrink-0 data-[state=active]:border-b-2 text-2xl",
               tab === "Recommendations" &&
                 "font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#EA4600] to-[#EB9B00]",
               user && user.user_metadata.user_name !== login && tab === "Recommendations" && "hidden",
-              !user && tab === "Recommendations" && "hidden"
+              user && user.user_metadata.user_name !== login && tab === "Requests" && "hidden",
+              !user && tab === "Recommendations" && "hidden",
+              !user && tab === "Requests" && "hidden",
+              !receive_collaboration && tab === "Requests" && "hidden"
             )}
             value={tab}
           >
@@ -311,60 +315,66 @@ const ContributorProfileTab = ({
         </div>
       </TabsContent>
 
-      {/* Recommendation tab details */}
-
       {user && user.user_metadata.user_name === login && (
-        <TabsContent value="Recommendations">
-          {userInterests && userInterests.length > 0 ? (
-            <div className="space-y-2 ">
-              <Title className="!font-normal my-6" level={5}>
-                Here are some repositories we think would be great for you. Click on one that you like and start
-                contributing!
-              </Title>
-              <div className="flex flex-wrap gap-4">
-                {recommendedrepos.map((repo, i) => (
-                  <RecommendedRepoCard className="md:w-[45%]" key={i.toString()} fullName={repo} />
-                ))}
-                {recommendedrepos.length === 1 && (
-                  <RecommendedRepoCard className="md:w-[45%]" fullName="open-sauced/insights" />
-                )}
-              </div>
-            </div>
-          ) : (
-            <DashContainer>
-              {/* Empty Interest state */}
-              <div className="flex flex-col items-center gap-4">
-                <p className="font-normal text-center">
-                  If you’re just getting started, recommendations are a great to find projects and start making
-                  contributions on repositories.
-                  <br /> <br /> Select some interests and we give you some recommendations!
-                </p>
+        <>
+          {/* Collaboration requests tab details */}
+          <TabsContent value="Requests">
+            <CollaborationRequestsWrapper />
+          </TabsContent>
 
-                {showInterests && (
-                  <div className="flex flex-wrap justify-center w-full gap-2 mt-6 md:max-w-sm">
-                    {interestArray.map((topic, index) => (
-                      <LanguagePill
-                        onClick={() => handleSelectInterest(topic)}
-                        classNames={`${(selectedInterest || []).includes(topic) && "bg-light-orange-10 text-white"}`}
-                        topic={topic}
-                        key={index}
-                      />
-                    ))}
-                  </div>
-                )}
-                {showInterests ? (
-                  <Button loading={loading} className="mt-4" onClick={handleUpdateInterest} variant="primary">
-                    Save Interests
-                  </Button>
-                ) : (
-                  <Button onClick={() => setShowInterests(true)} variant="primary">
-                    Select Interests
-                  </Button>
-                )}
+          {/* Recommendation tab details */}
+          <TabsContent value="Recommendations">
+            {userInterests && userInterests.length > 0 ? (
+              <div className="space-y-2 ">
+                <Title className="!font-normal my-6" level={5}>
+                  Here are some repositories we think would be great for you. Click on one that you like and start
+                  contributing!
+                </Title>
+                <div className="flex flex-wrap gap-4">
+                  {recommendedrepos.map((repo, i) => (
+                    <RecommendedRepoCard className="md:w-[45%]" key={i.toString()} fullName={repo} />
+                  ))}
+                  {recommendedrepos.length === 1 && (
+                    <RecommendedRepoCard className="md:w-[45%]" fullName="open-sauced/insights" />
+                  )}
+                </div>
               </div>
-            </DashContainer>
-          )}
-        </TabsContent>
+            ) : (
+              <DashContainer>
+                {/* Empty Interest state */}
+                <div className="flex flex-col items-center gap-4">
+                  <p className="font-normal text-center">
+                    If you’re just getting started, recommendations are a great to find projects and start making
+                    contributions on repositories.
+                    <br /> <br /> Select some interests and we give you some recommendations!
+                  </p>
+
+                  {showInterests && (
+                    <div className="flex flex-wrap justify-center w-full gap-2 mt-6 md:max-w-sm">
+                      {interestArray.map((topic, index) => (
+                        <LanguagePill
+                          onClick={() => handleSelectInterest(topic)}
+                          classNames={`${(selectedInterest || []).includes(topic) && "bg-light-orange-10 text-white"}`}
+                          topic={topic}
+                          key={index}
+                        />
+                      ))}
+                    </div>
+                  )}
+                  {showInterests ? (
+                    <Button loading={loading} className="mt-4" onClick={handleUpdateInterest} variant="primary">
+                      Save Interests
+                    </Button>
+                  ) : (
+                    <Button onClick={() => setShowInterests(true)} variant="primary">
+                      Select Interests
+                    </Button>
+                  )}
+                </div>
+              </DashContainer>
+            )}
+          </TabsContent>
+        </>
       )}
     </Tabs>
   );
diff --git a/lib/hooks/useUserCollaborations.ts b/lib/hooks/useUserCollaborations.ts
new file mode 100644
index 0000000..99e8119
--- /dev/null
+++ b/lib/hooks/useUserCollaborations.ts
@@ -0,0 +1,84 @@
+import publicApiFetcher from "lib/utils/public-api-fetcher";
+import useSWR, { Fetcher } from "swr";
+import useSupabaseAuth from "./useSupabaseAuth";
+import { useToast } from "./useToast";
+
+interface UserCollaborationResponse {
+  data?: DbUserCollaboration[];
+  meta: Meta;
+}
+
+type collaborationRequestPayload = {
+  username: string;
+  message: string;
+};
+const useUserCollaborations = () => {
+  const { sessionToken } = useSupabaseAuth();
+  const { toast } = useToast();
+  const { data, error, mutate } = useSWR<UserCollaborationResponse, Error>(
+    "user/collaborations",
+    publicApiFetcher as Fetcher<UserCollaborationResponse, Error>
+  );
+
+  async function requestCollaboration(payload: collaborationRequestPayload) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (req && req.ok) {
+      const response = await req.json();
+      toast({ description: "Collaboration request Sent!", title: "Success", variant: "success" });
+    } else {
+      const response = await req?.json();
+      toast({ description: response.message[0], title: "Error", variant: "danger" });
+
+      console.log(response.message);
+    }
+  }
+
+  async function updateCollaborationStatus(requestId: string) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({ status: "accept" }),
+    });
+
+    if (req.ok) {
+      toast({ description: "Request accepted successfully!", title: "Success", variant: "success" });
+      mutate();
+    }
+  }
+
+  async function deleteCollaborationRequest(requestId: string) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+    });
+    if (req.ok) {
+      toast({ description: "Request deleted successfully!", title: "Success", variant: "success" });
+      mutate();
+    }
+  }
+
+  return {
+    data: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: !!error,
+    requestCollaboration,
+    updateCollaborationStatus,
+    deleteCollaborationRequest,
+  };
+};
+
+export { useUserCollaborations };
diff --git a/next-types.d.ts b/next-types.d.ts
index 7978f44..14c4d09 100644
--- a/next-types.d.ts
+++ b/next-types.d.ts
@@ -231,3 +231,17 @@ interface DbUserNotification {
   readonly user_id: number;
   readonly meta_id: string;
 }
+
+interface DbUserCollaboration {
+  readonly id: string;
+  readonly user_id: number;
+  readonly request_user_id: number;
+  readonly request_user: DbUser;
+  readonly created_at: string;
+  readonly updated_at: string;
+  readonly deleted_at: string;
+  readonly request_emailed_at: string;
+  readonly collaboration_emailed_at: string;
+  readonly status: "pending" | "accept" | "reject";
+  readonly message: string;
+}
diff --git a/stories/molecules/collaboration-card.stories.tsx b/stories/molecules/collaboration-card.stories.tsx
index b7bbd3b..c370982 100644
--- a/stories/molecules/collaboration-card.stories.tsx
+++ b/stories/molecules/collaboration-card.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentStory } from "@storybook/react";
 import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Card"
+  title: "Design System/Molecules/Collaboration Card",
 };
 
 export default storyConfig;
@@ -14,5 +14,5 @@ export const CollaborationCardStory = CollaborationCardTemplate.bind({});
 CollaborationCardStory.args = {
   outreachMessage:
     " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-  requestor: undefined
+  requestor: undefined,
 };
diff --git a/stories/molecules/collaboration-summary-card.stories.tsx b/stories/molecules/collaboration-summary-card.stories.tsx
index bcbedc4..e89a78e 100644
--- a/stories/molecules/collaboration-summary-card.stories.tsx
+++ b/stories/molecules/collaboration-summary-card.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory } from "@storybook/react";
 import CollaborationSummaryCard from "components/molecules/CollaborationSummaryCard/collaboration-summary-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Summary card"
+  title: "Design System/Molecules/Collaboration Summary card",
 };
 
 export default storyConfig;
@@ -19,19 +19,28 @@ CollaborationCardStory.args = {
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
     },
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
     },
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
-    }
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
+    },
   ],
   connectionsCount: 34,
-  messagesCount: 23
+  messagesCount: 23,
 };