feat(Compensations): display yearly bonuses for selected location

src/compensations/Compensations.tsx

@@ -12,6 +12,7 @@ import {
   IOption,
   RadioButtonGroup,
 } from "src/components/forms/radioButtonGroup/RadioButtonGroup";
+import YearlyBonuses from "./components/yearlyBonuses/YearlyBonuses";
 import BenefitsByLocation from "./components/benefitsByLocation/BenefitsByLocation";
 
 interface CompensationsProps {
@@ -70,6 +71,10 @@ const Compensations = ({ compensations, locations }: CompensationsProps) => {
       (benefit) => benefit.location._ref === selectedLocation,
     )?.benefits || [];
 
+  const yearlyBonusesForLocation = compensations.bonusesByLocation.find(
+    (b) => b.location._ref === selectedLocation,
+  )?.yearlyBonuses;
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{compensations.basicTitle}</Text>
@@ -102,6 +107,9 @@ const Compensations = ({ compensations, locations }: CompensationsProps) => {
           ) : null}
         </>
       )}
+      {yearlyBonusesForLocation && (
+        <YearlyBonuses bonuses={yearlyBonusesForLocation} />
+      )}
       <BenefitsByLocation benefits={benefitsFilteredByLocation} />
     </div>
   );

src/compensations/components/yearlyBonuses/YearlyBonuses.tsx

@@ -0,0 +1,43 @@
+import { BonusPage } from "studio/lib/payloads/compensations";
+import Text from "../../../components/text/Text";
+import styles from "./yearlyBonuses.module.css";
+
+interface YearlyBonusesProps {
+  bonuses: BonusPage[];
+}
+
+const YearlyBonuses = ({ bonuses }: YearlyBonusesProps) => {
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h3"}>Historisk bonus</Text>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>
+              <Text>År</Text>
+            </th>
+            <th className={styles.bonusHeader}>
+              <Text>Beløp</Text>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {bonuses
+            .sort((a, b) => b.year - a.year)
+            .map((bonus) => (
+              <tr key={bonus._key}>
+                <th>
+                  <Text type={"small"}>{bonus.year}</Text>
+                </th>
+                <td className={styles.bonusCell}>
+                  <Text type={"small"}>{bonus.bonus}</Text>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default YearlyBonuses;

src/compensations/components/yearlyBonuses/yearlyBonuses.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.table {
+  text-align: left;
+  max-width: 500px;
+}
+
+.bonusHeader,
+.bonusCell {
+  text-align: right;
+}

studio/lib/payloads/compensations.ts

@@ -1,5 +1,5 @@
 import { PortableTextBlock } from "src/components/richText/RichText";
-import { Slug } from "./global";
+import { Reference, Slug } from "./global";
 
 export interface Benefit {
   _type: string;
@@ -21,6 +21,13 @@ export interface SalariesPage {
   salaries: string;
 }
 
+export interface BonusesByLocationPage {
+  _type: string;
+  _key: string;
+  location: Reference;
+  yearlyBonuses: BonusPage[];
+}
+
 export interface BonusPage {
   _type: string;
   _key: string;
@@ -39,6 +46,7 @@ export interface CompensationsPage {
   slug: Slug;
   pensionPercent?: number;
   benefitsByLocation: BenefitsByLocation[];
+  bonusesByLocation: BonusesByLocationPage[];
   showSalaryCalculator: boolean;
 }
 

studio/lib/payloads/global.ts

@@ -2,3 +2,8 @@ export interface Slug {
   _type: string;
   current: string;
 }
+
+export interface Reference {
+  _type: "reference";
+  _ref: string;
+}