fix: translations for calculation

messages/en.json

@@ -25,6 +25,20 @@
     "visit_cv": "Visit mini-CV",
     "read_more": "Read more"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Salary calculator",
+      "educationInput": "Education",
+      "yearInput": "The year you started in relevant work",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Your annual salary"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
+
   "employee_card": {
     "show": "Showing",
     "of": "out of",

messages/no.json

@@ -21,6 +21,19 @@
     "contact_sale": "Kontakt salg!",
     "contact_us": "Kontakt oss"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Lønnskalkulator",
+      "educationInput": "Utdanning",
+      "yearInput": "Året du begynte i relevant arbeid",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Din årslønn"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
   "custom_link": {
     "visit_cv": "Gå til mini-CV",
     "read_more": "Les mer"

messages/se.json

@@ -21,6 +21,19 @@
     "contact_sale": "Kontakta sälj!",
     "contact_us": "Kontakt oss"
   },
+  "compensation_calculator": {
+    "calculator": {
+      "formLabel": "Lönskalkulator",
+      "educationInput": "Utbildning",
+      "yearInput": "Året du började i relevant arbete",
+      "bonusResult": "+ bonus",
+      "resultLabel": "Din årslön"
+    },
+    "degreeOptions": {
+      "bachelor": "Bachelor",
+      "master": "Master"
+    }
+  },
   "custom_link": {
     "visit_cv": "Besök mini-CV",
     "read_more": "Läs mer"

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

@@ -15,6 +15,7 @@ import { Result } from "studio/utils/result";
 
 import styles from "./compensation-calculator.module.css";
 import { Degree, SalaryData } from "./types";
+import { useTranslations } from "next-intl";
 
 type CalculatorProps = {
   localeRes: Promise<LocaleDocument>;
@@ -24,18 +25,14 @@ type CalculatorProps = {
   initialYear: number;
 };
 
-const degreeOptions: IOption[] = [
-  { id: "bachelor", label: "Bachelor" },
-  { id: "master", label: "Master" },
-];
-
 export default function Calculator({
   localeRes,
   salariesRes,
   initialDegree,
   initialYear,
   background,
 }: CalculatorProps) {
+  const t = useTranslations("compensation_calculator");
   const locale = use(localeRes);
   const salaries = use(salariesRes);
   const [year, setYear] = useState(initialYear);
@@ -48,13 +45,22 @@ export default function Calculator({
     return null;
   }
 
+  const { min, max } = getMinMaxYear(salaries.value);
   const salary = calculateSalary(year, degree, salaries.value) ?? 0;
 
+  const degreeOptions: IOption[] = [
+    { id: "bachelor", label: t("degreeOptions.bachelor") },
+    { id: "master", label: t("degreeOptions.master") },
+  ];
+
   return (
-    <form className={styles.formCalculator} aria-label="salary calculator">
+    <form
+      className={styles.formCalculator}
+      aria-label={t("calculator.formLabel")}
+    >
       <RadioButtonGroup
         id="degree-group"
-        label="Utdanning"
+        label={t("calculator.educationInput")}
         options={degreeOptions}
         background={background}
         selectedId={degree}
@@ -65,11 +71,11 @@ export default function Calculator({
 
       <div className={styles.inputWrapper}>
         <InputField
-          label="Året du begynte i relevant arbeid"
+          label={t("calculator.yearInput")}
           name="examinationYear"
           type="number"
-          min={1085}
-          max={2024}
+          min={min}
+          max={max}
           value={year}
           onChange={(_name, value) => setYear(parseInt(value))}
           required
@@ -78,13 +84,20 @@ export default function Calculator({
 
       {salary !== null ? (
         <div aria-live="polite" className={styles.salaryTextContainer}>
-          <Text type="labelRegular">Din årslønn</Text>
+          <Text type="labelRegular">{t("calculator.resultLabel")}</Text>
           <Text className={styles.salaryText}>
             {formatAsCurrency(salary, locale.locale, locale.currency)}
           </Text>
-          <Text type="labelRegular">+ bonus</Text>
+          <Text type="labelRegular">{t("calculator.bonusResult")}</Text>
         </div>
       ) : null}
     </form>
   );
 }
+
+function getMinMaxYear(salaries: SalaryData) {
+  const years = Object.keys(salaries).map((s) => parseInt(s));
+  const min = Math.min(...years);
+  const max = Math.max(...years);
+  return { min, max };
+}

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

@@ -12,6 +12,7 @@ import { loadStudioQuery } from "studio/lib/store";
 import { getHandbookLinksFromCompensationPage, getSalaryByYear } from "./api";
 import Calculator from "./Calculator";
 import styles from "./compensation-calculator.module.css";
+import { cnIf } from "src/utils/css";
 
 export interface CompensationCalculatorProps {
   language: string;
@@ -28,20 +29,17 @@ export default async function CompensationCalculator({
   );
   const handbookLinksRes = await getHandbookLinksFromCompensationPage(language);
 
-  // TODO: add cn util or andIf
-  const calculatorBgClassname =
-    section.background === "violet"
-      ? `${styles.calculator} ${styles["calculator--violet"]}`
-      : styles.calculator;
-  const handbookBgClassname =
-    section.background === "violet"
-      ? `${styles.handbook} ${styles["handbook--violet"]}`
-      : styles.handbook;
+  const calculatorBgClassname = cnIf({
+    [styles.calculator]: true,
+    [styles["calculator--violet"]]: section.background === "violet",
+  });
+  const handbookBgClassname = cnIf({
+    [styles.handbook]: true,
+    [styles["handbook--violet"]]: section.background === "violet",
+  });
 
   const radioBackground = section.background === "violet" ? "light" : "dark";
 
-  // @TODO add proper translations
-
   return (
     <div className={styles.container}>
       <Text type="h2">{section.moduleTitle}</Text>

src/utils/css.ts

@@ -0,0 +1,9 @@
+export function cn(...classes: (string | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}
+export function cnIf(classes: Record<string, boolean>) {
+  return Object.entries(classes)
+    .filter(([, value]) => value)
+    .map(([key]) => key)
+    .join(" ");
+}