From c99bc74e549842eff9dde063dd83f094504eb079 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Wed, 11 Sep 2024 13:33:49 +0200
Subject: [PATCH] feat(Compensations): display yearly bonuses for selected
 location

---
 src/compensations/Compensations.tsx           |  8 ++++
 .../yearlyBonuses/YearlyBonuses.tsx           | 43 +++++++++++++++++++
 .../yearlyBonuses/yearlyBonuses.module.css    | 15 +++++++
 studio/lib/payloads/compensations.ts          | 10 ++++-
 studio/lib/payloads/global.ts                 |  5 +++
 5 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/compensations/components/yearlyBonuses/YearlyBonuses.tsx
 create mode 100644 src/compensations/components/yearlyBonuses/yearlyBonuses.module.css

diff --git a/src/compensations/Compensations.tsx b/src/compensations/Compensations.tsx
index fa4cc3506..7f2cac51a 100644
--- a/src/compensations/Compensations.tsx
+++ b/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>
   );
diff --git a/src/compensations/components/yearlyBonuses/YearlyBonuses.tsx b/src/compensations/components/yearlyBonuses/YearlyBonuses.tsx
new file mode 100644
index 000000000..78c65167f
--- /dev/null
+++ b/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;
diff --git a/src/compensations/components/yearlyBonuses/yearlyBonuses.module.css b/src/compensations/components/yearlyBonuses/yearlyBonuses.module.css
new file mode 100644
index 000000000..df84061e6
--- /dev/null
+++ b/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;
+}
diff --git a/studio/lib/payloads/compensations.ts b/studio/lib/payloads/compensations.ts
index 49d425cce..33cc77b85 100644
--- a/studio/lib/payloads/compensations.ts
+++ b/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;
 }
 
diff --git a/studio/lib/payloads/global.ts b/studio/lib/payloads/global.ts
index 445bf15f9..1be127644 100644
--- a/studio/lib/payloads/global.ts
+++ b/studio/lib/payloads/global.ts
@@ -2,3 +2,8 @@ export interface Slug {
   _type: string;
   current: string;
 }
+
+export interface Reference {
+  _type: "reference";
+  _ref: string;
+}