[offers][fix] display intern cycle in offer card (#547)

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',
+};

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

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;
 };

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;
             })