compensation fixes

messages/en.json

@@ -47,7 +47,8 @@
     "degreeOptions": {
       "bachelor": "Bachelor",
       "master": "Master"
-    }
+    },
+    "no_compensation_data": "Whoops, the accounts seem to be on holiday. {city}, huh..."
   },
   "employee_card": {
     "show": "Showing",

messages/no.json

@@ -43,7 +43,9 @@
     "degreeOptions": {
       "bachelor": "Bachelor",
       "master": "Master"
-    }
+    },
+    "test": "test",
+    "no_compensation_data": "Woops, regnskapet er på avveie. {city} altså..."
   },
   "custom_link": {
     "visit_cv": "Gå til mini-CV",

messages/se.json

@@ -43,7 +43,8 @@
     "degreeOptions": {
       "bachelor": "Bachelor",
       "master": "Master"
-    }
+    },
+    "no_compensation_data": "Hoppsan, bokföringen är på villovägar. {city} alltså..."
   },
   "custom_link": {
     "visit_cv": "Besök mini-CV",

src/components/compensations/CompensationSelector.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import {
@@ -24,9 +25,14 @@ export default function CompensationSelector({
   locations,
   locale,
 }: CompensationsProps) {
+  const t = useTranslations("compensation_calculator");
+
   const [selectedLocation, setSelectedLocation] = useState<string>(
     locations[0]._id,
   );
+  const [selectedLocationLabel, setSelectedLocationLabel] = useState<string>(
+    locations[0].companyLocationName,
+  );
 
   const locationOptions: IOption[] = locations.map((companyLocation) => ({
     id: companyLocation._id,
@@ -44,18 +50,27 @@ export default function CompensationSelector({
 
   return (
     <div className={styles.compensationWrapper}>
-      {yearlyBonusesForLocation && (
-        <YearlyBonuses bonuses={yearlyBonusesForLocation} locale={locale} />
-      )}
       <RadioButtonGroup
         id="location-group"
         label="Velg lokasjon"
         options={locationOptions}
         selectedId={selectedLocation}
-        onValueChange={(option) => setSelectedLocation(option.id)}
+        onValueChange={(option) => {
+          setSelectedLocation(option.id);
+          setSelectedLocationLabel(option.label);
+        }}
       />
 
-      <BenefitsByLocation benefits={benefitsFilteredByLocation} />
+      {yearlyBonusesForLocation && (
+        <YearlyBonuses bonuses={yearlyBonusesForLocation} locale={locale} />
+      )}
+      {benefitsFilteredByLocation.length > 0 ? (
+        <BenefitsByLocation benefits={benefitsFilteredByLocation} />
+      ) : (
+        <span>
+          {t("no_compensation_data", { city: selectedLocationLabel })}
+        </span>
+      )}
     </div>
   );
 }

src/components/compensations/Compensations.tsx

@@ -21,21 +21,23 @@ export default async function Compensations({
   language,
 }: CompensationsProps) {
   return (
-    <div className={styles.wrapper}>
-      <Text className={styles.text} type="h1">
-        {compensations.basicTitle}
-      </Text>
+    <div className={styles.outerWrapper}>
+      <div className={styles.wrapper}>
+        <Text className={styles.text} type="h1">
+          {compensations.basicTitle}
+        </Text>
 
-      <CompensationCalculator
-        section={compensations.compensationCalculator}
-        language={language}
-      />
+        <CompensationCalculator
+          section={compensations.compensationCalculator}
+          language={language}
+        />
 
-      <CompensationSelector
-        compensations={compensations}
-        locations={locations}
-        locale={locale}
-      />
+        <CompensationSelector
+          compensations={compensations}
+          locations={locations}
+          locale={locale}
+        />
+      </div>
     </div>
   );
 }

src/components/compensations/compensations.module.css

@@ -1,18 +1,25 @@
+.outerWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
   padding: 10rem 5rem;
-  gap: 5rem;
-  justify-content: center;
+  gap: 3rem;
   width: 100%;
+  max-width: var(--max-content-width-large);
 }
 
 .text {
   max-width: var(--max-content-width-large);
-  align-self: center;
 }
 
 .compensationWrapper {
+  display: flex;
+  flex-direction: column;
   max-width: var(--max-content-width-large);
-  align-self: center;
+  gap: 2rem;
 }

src/components/compensations/components/benefitsByLocation/benefitsByLocation.module.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   gap: 5rem;
   max-width: var(--max-content-width-medium);
+  padding-top: 4rem;
 }
 
 .benefitWrapper {

src/components/sections/compensation-calculator/CompensationCalculator.tsx

@@ -71,10 +71,10 @@ export default async function CompensationCalculator({
           )}
         </div>
         <Handbook
-          title={section.handbookBlock.handbookTitle}
-          description={section.handbookBlock.handbookDescription}
+          title={section.handbookBlock?.handbookTitle}
+          description={section.handbookBlock?.handbookDescription}
           language={language}
-          link={section.handbookBlock.handbookLink}
+          link={section.handbookBlock?.handbookLink}
           sectionBackground={section.background}
         />
       </div>