From bd21b93df2316672485992e4f59ce3e918b39cac Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com>
Date: Wed, 9 Nov 2022 12:00:16 +0800
Subject: [PATCH] [offers][fix] display intern cycle in offer card (#547)

---
 .../src/components/offers/InternshipCycles.ts | 10 ++++++++
 .../components/offers/profile/OfferCard.tsx   | 23 +++++++++++++++----
 apps/portal/src/components/offers/types.ts    |  4 +++-
 .../pages/offers/profile/[offerProfileId].tsx |  2 ++
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/components/offers/InternshipCycles.ts b/apps/portal/src/components/offers/InternshipCycles.ts
index 1f90539f..ee70365a 100644
--- a/apps/portal/src/components/offers/InternshipCycles.ts
+++ b/apps/portal/src/components/offers/InternshipCycles.ts
@@ -16,3 +16,13 @@ export const InternshipCycleOptions = [emptyOption].concat(
     value: label.replace(/\s+/g, '-').toLowerCase(),
   })),
 );
+
+export const InternshipCycleValuesToLabels: Record<string, string> = {
+  fall: 'Fall',
+  'full-year': 'Full year',
+  'half-year': 'Half year',
+  others: 'Others',
+  spring: 'Spring',
+  summer: 'Summer',
+  winter: 'Winter',
+};
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 2ed305f3..fd4336dc 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -1,11 +1,13 @@
 import {
   ArrowTrendingUpIcon,
   BuildingOfficeIcon,
+  CalendarIcon,
   MapPinIcon,
 } from '@heroicons/react/20/solid';
 import { JobType } from '@prisma/client';
 
 import { JobTypeLabel } from '~/components/offers/constants';
+import { InternshipCycleValuesToLabels } from '~/components/offers/InternshipCycles';
 import type { OfferDisplayData } from '~/components/offers/types';
 
 import { getLocationDisplayText } from '~/utils/offers/string';
@@ -21,12 +23,14 @@ export default function OfferCard({
     bonus,
     companyName,
     duration,
+    internshipCycle,
     jobTitle,
     jobLevel,
     jobType,
     location,
     receivedMonth,
     totalCompensation,
+    startYear,
     stocks,
     monthlySalary,
     negotiationStrategy,
@@ -41,9 +45,9 @@ export default function OfferCard({
             <h3 className="text-lg font-medium leading-6 text-slate-900">
               {jobTitle} {jobType && <>({JobTypeLabel[jobType]})</>}
             </h3>
-            <div className="mt-1 flex flex-row flex-wrap space-x-4 sm:mt-0">
+            <div className="mt-1 flex flex-row flex-wrap sm:mt-0">
               {companyName && (
-                <div className="mt-2 flex items-center text-sm text-slate-500">
+                <div className="mr-4 mt-2 flex items-center text-sm text-slate-500">
                   <BuildingOfficeIcon
                     aria-hidden="true"
                     className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
@@ -52,7 +56,7 @@ export default function OfferCard({
                 </div>
               )}
               {location && (
-                <div className="mt-2 flex items-center text-sm text-slate-500">
+                <div className="mr-4 mt-2 flex items-center text-sm text-slate-500">
                   <MapPinIcon
                     aria-hidden="true"
                     className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
@@ -60,6 +64,17 @@ export default function OfferCard({
                   {getLocationDisplayText(location)}
                 </div>
               )}
+              {(internshipCycle || startYear) && (
+                <div className="mt-2 flex items-center text-sm text-slate-500">
+                  <CalendarIcon
+                    aria-hidden="true"
+                    className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+                  />
+                  {internshipCycle && startYear
+                    ? `${startYear} ${InternshipCycleValuesToLabels[internshipCycle]}`
+                    : internshipCycle || startYear}
+                </div>
+              )}
               {jobLevel && (
                 <div className="mt-2 flex items-center text-sm text-slate-500">
                   <ArrowTrendingUpIcon
@@ -169,4 +184,4 @@ export default function OfferCard({
       <BottomSection />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index dcf61944..6a010746 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -180,6 +180,7 @@ export type OfferDisplayData = {
   companyName?: string | null;
   duration?: number | null;
   id?: string;
+  internshipCycle?: string;
   jobLevel?: string | null;
   jobTitle?: string | null;
   jobType?: JobType;
@@ -188,6 +189,7 @@ export type OfferDisplayData = {
   negotiationStrategy?: string | null;
   otherComment?: string | null;
   receivedMonth?: string | null;
+  startYear?: number;
   stocks?: string | null;
   totalCompensation?: string | null;
 };
@@ -209,4 +211,4 @@ export type CommentEntity = {
   replyingToId: string;
   userId: string;
   username: string;
-};
\ No newline at end of file
+};
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index 144e6585..5880ce9a 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -98,6 +98,7 @@ export default function OfferProfile() {
               const filteredOffer: OfferDisplayData = {
                 companyName: res.company.name,
                 id: res.offersIntern!.id,
+                internshipCycle: res.offersIntern!.internshipCycle,
                 jobTitle: getLabelForJobTitleType(
                   res.offersIntern!.title as JobTitleType,
                 ),
@@ -109,6 +110,7 @@ export default function OfferProfile() {
                 negotiationStrategy: res.negotiationStrategy,
                 otherComment: res.comments,
                 receivedMonth: formatDate(res.monthYearReceived),
+                startYear: res.offersIntern!.startYear,
               };
               return filteredOffer;
             })