[INTW26] Implement Interview Scheduling Feature

APIClients/InterviewGroupAPIClient.ts

@@ -0,0 +1,23 @@
+import { fetchGraphql } from "@utils/makegqlrequest";
+import { queries } from "graphql/queries";
+
+type Applicant = {
+  firstName: string;
+  lastName: string;
+};
+
+const InterviewGroupAPIClient = {
+  getInterviewedApplicantsByGroupId: async (
+    groupId: string,
+  ): Promise<Applicant[]> => {
+    return fetchGraphql(queries.getInterviewedApplicantsByGroupId, { groupId })
+      .then((result) => result.data.getInterviewedApplicantsByGroupId)
+      .catch((e: Error) => {
+        throw new Error(
+          `Failed to fetch interviewed applicants. Cause: ${e.message}`,
+        );
+      });
+  },
+};
+
+export default InterviewGroupAPIClient;

components/common/SplitPageLayout.tsx

@@ -29,8 +29,8 @@ export const SplitPanelLayout = ({
   const hasWidthOverride = leftWidth || rightWidth;
   const gridStyle = hasWidthOverride
     ? {
-        gridTemplateColumns: `${leftWidth ? `${leftWidth}px` : "1fr"} ${
-          rightWidth ? `${rightWidth}px` : "1fr"
+        gridTemplateColumns: `${leftWidth ? `${leftWidth}fr` : "1fr"} ${
+          rightWidth ? `${rightWidth}fr` : "1fr"
         }`,
       }
     : undefined;

graphql/queries.ts

@@ -47,4 +47,12 @@ export const queries = {
       isAuthorizedByRole(accessToken: $accessToken, roles: $roles)
   }
   `,
+  getInterviewedApplicantsByGroupId: `
+    query GetInterviewedApplicantsByGroupId($groupId: ID!) {
+      getInterviewedApplicantsByGroupId(groupId: $groupId) {
+        firstName
+        lastName
+      }
+    }
+  `,
 };

pages/interview-groups/[interviewGroupId]/index.tsx

@@ -0,0 +1,152 @@
+import { ReactElement, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import InterviewGroupAPIClient from "APIClients/InterviewGroupAPIClient";
+import {
+  SplitPanelLayout,
+  PanelLayout,
+} from "@components/common/SplitPageLayout";
+import ProtectedRoute from "@components/context/ProtectedRoute";
+import RecruitmentPlatformThemeProvider from "@components/recruitmentPlatformCommon/RecruitmentPlatformThemeProvider";
+import { LinkIcon } from "@components/icons/link.icon";
+import { InterviewHeader } from "@components/interview/layout";
+import { NextPageWithLayout } from "../../_app";
+
+const InterviewGroupContent = () => {
+  const { interviewGroupId } = useRouter().query;
+  const [applicants, setApplicants] = useState<
+    { firstName: string; lastName: string }[]
+  >([]);
+
+  useEffect(() => {
+    if (!interviewGroupId || typeof interviewGroupId !== "string") return;
+    InterviewGroupAPIClient.getInterviewedApplicantsByGroupId(interviewGroupId)
+      // TODO: handle error state (e.g. show inline error message if fetch fails)
+      .then(setApplicants);
+  }, [interviewGroupId]);
+
+  const applicantNames = applicants
+    .map((a) => `${a.firstName} ${a.lastName}`)
+    .join(", ");
+
+  return (
+    <PanelLayout
+      title="Interview Pairing"
+      subtitle="Review & coordinate your interviews with your partner"
+      backToHomeHref="/admin"
+      borderLeft
+    >
+      <div className="flex flex-col gap-12 w-full">
+        {/* Section 1: Interview Partner */}
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <p className="font-poppins font-medium text-xl text-blue leading-[1.4]">
+              Your interview partner:
+            </p>
+            <p className="font-source text-base text-black/75 leading-[1.4]">
+              Contact your interview partner, email is provided below.
+            </p>
+          </div>
+          <div className="flex justify-between items-center border border-[#C4C4C4] rounded-lg p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-[42px] h-[42px] rounded-full bg-gray-200 shrink-0" />
+              <div className="flex flex-col gap-1">
+                <span className="font-poppins font-medium text-base text-[#252525] leading-[1.4]">
+                  {/* TODO: replace with real partner name */}
+                  Justin Luu
+                </span>
+                <span className="font-source text-sm text-[#252525] leading-[1.4]">
+                  Interviewing: {applicantNames}
+                </span>
+              </div>
+            </div>
+            <a
+              href="mailto:justinluu@uwblueprint.ca"
+              className="font-source text-base text-[#3279B7] leading-[1.4] no-underline hover:underline"
+            >
+              {/* TODO: replace with real partner email */}
+              Justinluu@uwblueprint.ca
+            </a>
+          </div>
+        </div>
+
+        {/* Section 2: Calendly Coordination */}
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <p className="font-poppins font-medium text-xl text-blue leading-[1.4]">
+              Coordinate schedule availability
+            </p>
+            <p className="font-source text-base text-black/75 leading-[1.4]">
+              Coordinate availabilities with your partner on Calendly to set up
+              schedule times.
+            </p>
+          </div>
+          <a
+            href="https://calendly.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 w-fit cursor-pointer rounded-full py-2 px-4 border-2 border-blue bg-white text-blue text-base font-normal leading-[1.4] no-underline hover:bg-sky-100"
+          >
+            Open Calendly
+            <LinkIcon />
+          </a>
+        </div>
+
+        {/* Section 3: Paste Calendly Link */}
+        <div className="flex flex-col gap-8 border border-[#C4C4C4] rounded-lg p-6">
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+              <p className="font-poppins font-medium text-xl text-blue leading-[1.4]">
+                Paste Calendly link below
+              </p>
+              <p className="font-source text-base text-black/75 leading-[1.4]">
+                Paste your completed Calendly link here below. This link will be
+                used by Admins to send out to your interviewees.
+              </p>
+            </div>
+            <input
+              type="text"
+              placeholder="Paste link here"
+              className="w-full border border-[#7D7D7D] rounded-[5px] py-[10px] px-5 text-sm text-gray-400 font-normal leading-[1.43] outline-none focus:border-blue"
+            />
+          </div>
+          <div className="flex justify-end">
+            <button
+              disabled
+              className="rounded-full py-2 px-4 bg-blue text-white font-source text-base font-normal leading-[1.4] opacity-50 cursor-not-allowed"
+            >
+              Submit Link
+            </button>
+          </div>
+        </div>
+      </div>
+    </PanelLayout>
+  );
+};
+
+const InterviewGroupPage: NextPageWithLayout = () => {
+  return <InterviewGroupContent />;
+};
+
+InterviewGroupPage.getLayout = (page: ReactElement) => (
+  <RecruitmentPlatformThemeProvider>
+    <ProtectedRoute allowedRoles={["Admin", "User"]}>
+      <SplitPanelLayout
+        leftWidth={698}
+        rightWidth={742}
+        header={<InterviewHeader steps={[]} />}
+      >
+        <PanelLayout borderRight contentClassName="flex-1 overflow-y-auto">
+          {/* TODO: replace with Application Review decorative illustration */}
+          <div className="flex items-center justify-center h-full">
+            <p className="font-poppins font-medium text-xl text-black/75">
+              Application Review
+            </p>
+          </div>
+        </PanelLayout>
+        {page}
+      </SplitPanelLayout>
+    </ProtectedRoute>
+  </RecruitmentPlatformThemeProvider>
+);
+
+export default InterviewGroupPage;