fix: structure compensation data better

varianter · Dec 3, 2024 · 549d76b · 549d76b
1 parent c87e597
commit 549d76b
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 57 deletions.
diff --git a/src/components/sections/compensation-calculator/CompensationCalculator.tsx b/src/components/sections/compensation-calculator/CompensationCalculator.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 
+import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import { LocaleDocument } from "studio/lib/interfaces/locale";
 import { CompensationCalculatorSection } from "studio/lib/interfaces/pages";
@@ -17,12 +18,15 @@ export interface CompensationCalculatorProps {
 
 export default async function CompensationCalculator({
   section,
+  language,
 }: CompensationCalculatorProps) {
-  const salariesRes = getSalaryByYear(2024);
+  const salariesRes = getSalaryByYear(2024, language);
   const localeRes = loadStudioQuery<LocaleDocument>(LOCALE_QUERY).then(
     (d) => d.data,
   );
 
+  console.log("DATA", section);
+
   // TODO: add cn util or andIf
   const calculatorBgClassname =
     section.background === "violet"
@@ -39,21 +43,33 @@ export default async function CompensationCalculator({
 
       <div className={styles.grid}>
         <div className={calculatorBgClassname}>
-          <Text type="h3">{section.calculatorTitle}</Text>
-          <Text type="bodyBig">{section.calculatorDescription}</Text>
+          <Text type="h3">{section.calculatorBlock.calculatorTitle}</Text>
+          <Text type="bodyBig">
+            {section.calculatorBlock.calculatorDescription}
+          </Text>
 
           <Suspense fallback={<div>Loading...</div>}>
             <Calculator
               localeRes={localeRes}
               salariesRes={salariesRes}
               initialYear={2024}
-              initialDegree={"bachelor"}
+              initialDegree={"master"}
             />
           </Suspense>
+
+          {section.calculatorBlock.calculatorLink && (
+            <LinkButton link={section.calculatorBlock.calculatorLink} />
+          )}
         </div>
         <div className={handbookBgClassname}>
-          <Text type="h3">{section.handbookTitle}</Text>
-          <Text type="bodyBig">{section.handbookDescription}</Text>
+          <Text type="h3">{section.handbookBlock.handbookTitle}</Text>
+          <Text type="bodyBig">
+            {section.handbookBlock.handbookDescription}
+          </Text>
+
+          {section.handbookBlock.handbookLink && (
+            <LinkButton link={section.handbookBlock.handbookLink} />
+          )}
         </div>
       </div>
     </div>

diff --git a/src/components/sections/compensation-calculator/api.ts b/src/components/sections/compensation-calculator/api.ts
@@ -7,13 +7,16 @@ import { SalaryData } from "./types";
 
 export async function getSalaryByYear(
   year: number,
+  language: string,
 ): Promise<Result<SalaryData, unknown>> {
   const res = await loadStudioQuery<{
+    slug: string;
     salariesByLocation: { yearlySalaries: { salaries: string } };
   }>(
     COMPENSATIONS_SALARY_BY_YEAR,
     {
       year,
+      language,
     },
     {
       cache: "force-cache",

diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts
@@ -122,10 +122,18 @@ export interface CompensationCalculatorSection {
   _key: string;
   moduleTitle: string;
   background: CompensationCalculatorBackground;
-  calculatorTitle: string;
-  calculatorDescription: string;
-  handbookTitle: string;
-  handbookDescription: string;
+
+  calculatorBlock: {
+    calculatorTitle: string;
+    calculatorDescription: string;
+    calculatorLink: ILink;
+  };
+
+  handbookBlock: {
+    handbookTitle: string;
+    handbookDescription: string;
+    handbookLink: ILink;
+  };
 }
 
 export type Section =

diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
@@ -44,11 +44,19 @@ const SECTIONS_FRAGMENT = groq`
       }
     },
     _type == "compensationCalculator" => {
+      ...,
       "moduleTitle": ${translatedFieldFragment("moduleTitle")},
-      "calculatorTitle": ${translatedFieldFragment("calculatorTitle")},
-      "calculatorDescription": ${translatedFieldFragment("calculatorDescription")},
-      "handbookTitle": ${translatedFieldFragment("handbookTitle")},
-      "handbookDescription": ${translatedFieldFragment("handbookDescription")}
+
+      "calculatorBlock": calculatorBlock {
+        ...,
+        "calculatorTitle": ${translatedFieldFragment("calculatorTitle")},
+        "calculatorDescription": ${translatedFieldFragment("calculatorDescription")},
+      },
+      "handbookBlock": handbookBlock {
+        ...,
+        "handbookTitle": ${translatedFieldFragment("handbookTitle")},
+        "handbookDescription": ${translatedFieldFragment("handbookDescription")}
+      }
     },
     _type == "employees" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")}

diff --git a/studio/lib/queries/specialPages.ts b/studio/lib/queries/specialPages.ts
@@ -34,8 +34,12 @@ export const COMPENSATIONS_SALARIES = groq`
     },
   }
 `;
+
+// Just select the first location and the first year..
+// @TODO: make this a bit more robust.
 export const COMPENSATIONS_SALARY_BY_YEAR = groq`
   *[_type == "compensations"][0] {
+    "slug": ${translatedFieldFragment("slug")},
     "salariesByLocation": salariesByLocation[0] {
       "yearlySalaries": yearlySalaries[0] {
         ...

diff --git a/studio/schemas/objects/sections/compensation-calculator.ts b/studio/schemas/objects/sections/compensation-calculator.ts
@@ -1,5 +1,7 @@
 import { defineField } from "sanity";
 
+import { link } from "studio/schemas/objects/link";
+
 export const compensationCalculatorId = "compensationCalculator";
 
 export enum CompensationCalculatorBackground {
@@ -27,6 +29,7 @@ export const compensationCalculator = defineField({
         { _key: "no", value: "Ansattopplevelsen" },
       ],
     },
+
     {
       name: "background",
       title: "Background",
@@ -41,60 +44,88 @@ export const compensationCalculator = defineField({
     },
 
     {
-      name: "calculatorTitle",
-      type: "internationalizedArrayString",
-      title: "Calculator Title",
-      description: "Title that will be displayed inside the calculator.",
-      initialValue: [
-        { _key: "en", value: "Salary Calculator" },
-        { _key: "no", value: "Lønnskalkulator" },
-      ],
-    },
-    {
-      name: "calculatorDescription",
-      title: "Calculator Description",
-      type: "internationalizedArrayString",
-      description: "Description that will be displayed inside the calculator.",
-      initialValue: [
+      name: "calculatorBlock",
+      type: "object",
+
+      fields: [
         {
-          _key: "en",
-          value:
-            "We believe that salary should be simple, open and predictable. Therefore, we designed a transparent salary model that equalizes all employees.",
+          name: "calculatorTitle",
+          type: "internationalizedArrayString",
+          title: "Calculator Title",
+          description: "Title that will be displayed inside the calculator.",
+          initialValue: [
+            { _key: "en", value: "Salary Calculator" },
+            { _key: "no", value: "Lønnskalkulator" },
+          ],
         },
+
         {
-          _key: "no",
-          value:
-            "Vi mener lønn bør være enkelt, åpent og forutsigbart. Derfor designet vi en transparent lønnsmodell som likestiller alle ansatte.",
+          name: "calculatorDescription",
+          title: "Calculator Description",
+          type: "internationalizedArrayString",
+          description:
+            "Description that will be displayed inside the calculator.",
+          initialValue: [
+            {
+              _key: "en",
+              value:
+                "We believe that salary should be simple, open and predictable. Therefore, we designed a transparent salary model that equalizes all employees.",
+            },
+            {
+              _key: "no",
+              value:
+                "Vi mener lønn bør være enkelt, åpent og forutsigbart. Derfor designet vi en transparent lønnsmodell som likestiller alle ansatte.",
+            },
+          ],
+        },
+
+        {
+          ...link,
+          name: "calculatorLink",
         },
       ],
     },
+
     {
-      name: "handbookTitle",
-      type: "internationalizedArrayString",
-      title: "Handbook Title",
-      description: "Title that will be displayed inside the handbook section.",
-      initialValue: [
-        { _key: "en", value: "Handbook" },
-        { _key: "no", value: "Håndbok" },
-      ],
-    },
-    {
-      name: "handbookDescription",
-      title: "Handbook Description",
-      type: "internationalizedArrayString",
-      description:
-        "Description that will be displayed inside the handbook section.",
+      name: "handbookBlock",
+      type: "object",
 
-      initialValue: [
+      fields: [
+        {
+          name: "handbookTitle",
+          type: "internationalizedArrayString",
+          title: "Handbook Title",
+          description:
+            "Title that will be displayed inside the handbook section.",
+          initialValue: [
+            { _key: "en", value: "Handbook" },
+            { _key: "no", value: "Håndbok" },
+          ],
+        },
         {
-          _key: "en",
-          value:
-            "Words and actions should go hand in hand. All about us, rules and more you can find in the handbook. If we change, we change the handbook.",
+          name: "handbookDescription",
+          title: "Handbook Description",
+          type: "internationalizedArrayString",
+          description:
+            "Description that will be displayed inside the handbook section.",
+
+          initialValue: [
+            {
+              _key: "en",
+              value:
+                "Words and actions should go hand in hand. All about us, rules and more you can find in the handbook. If we change, we change the handbook.",
+            },
+            {
+              _key: "no",
+              value:
+                "Ord og handling bør gå hånd i hånd. Alt om oss, regler og finner du i håndboken. Endrer vi på oss, endrer vi håndboken.",
+            },
+          ],
         },
+
         {
-          _key: "no",
-          value:
-            "Ord og handling bør gå hånd i hånd. Alt om oss, regler og finner du i håndboken. Endrer vi på oss, endrer vi håndboken.",
+          ...link,
+          name: "handbookLink",
         },
       ],
     },