v3 - calculator ui - offices

src/app/(main)/[slug]/page.tsx

@@ -18,6 +18,8 @@ import { loadQuery } from "studio/lib/store";
 import CompensationsPreview from "src/compensations/CompensationsPreview";
 import { homeLink } from "../../../blog/components/utils/linkTypes";
 import CustomErrorMessage from "../../../blog/components/customErrorMessage/CustomErrorMessage";
+import { CompanyLocation } from "studio/lib/payloads/companyDetails";
+import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/companyDetails";
 
 export const dynamic = "force-dynamic";
 
@@ -45,16 +47,21 @@ async function Page({ params }: Props) {
   const { slug } = params;
   const { perspective, isDraftMode } = getDraftModeInfo();
 
-  const [initialPage, initialBlogPage, initialCompensationsPage] =
-    await Promise.all([
-      loadQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
-      loadQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
-      loadQuery<CompensationsPage>(
-        COMPENSATIONS_PAGE_QUERY,
-        { slug },
-        { perspective },
-      ),
-    ]);
+  const [
+    initialPage,
+    initialBlogPage,
+    initialCompensationsPage,
+    initialLocationsData,
+  ] = await Promise.all([
+    loadQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
+    loadQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
+    loadQuery<CompensationsPage>(
+      COMPENSATIONS_PAGE_QUERY,
+      { slug },
+      { perspective },
+    ),
+    loadQuery<CompanyLocation[]>(COMPANY_LOCATIONS_QUERY, {}, { perspective }),
+  ]);
 
   if (initialPage.data) {
     return (
@@ -99,11 +106,17 @@ async function Page({ params }: Props) {
     );
   }
 
-  if (initialCompensationsPage.data) {
+  if (initialCompensationsPage.data && initialLocationsData.data) {
     return isDraftMode ? (
-      <CompensationsPreview initialCompensations={initialCompensationsPage} />
+      <CompensationsPreview
+        initialCompensations={initialCompensationsPage}
+        initialLocations={initialLocationsData}
+      />
     ) : (
-      <Compensations compensations={initialCompensationsPage.data} />
+      <Compensations
+        compensations={initialCompensationsPage.data}
+        locations={initialLocationsData.data}
+      />
     );
   }
 

src/app/(main)/layout.tsx

@@ -1,9 +1,9 @@
 import Footer from "src/components/navigation/footer/Footer";
 import { NAV_QUERY } from "studio/lib/queries/navigation";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyInfo";
+import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import { Header } from "src/components/navigation/header/Header";
 import { Navigation } from "studio/lib/payloads/navigation";
-import { CompanyInfo } from "studio/lib/payloads/companyInfo";
+import { CompanyInfo } from "studio/lib/payloads/companyDetails";
 import { loadQuery } from "studio/lib/store";
 import HeaderPreview from "src/components/navigation/header/HeaderPreview";
 import FooterPreview from "src/components/navigation/footer/FooterPreview";

src/app/layout.tsx

@@ -1,8 +1,8 @@
 import { Darker_Grotesque, Figtree } from "next/font/google";
 import { draftMode } from "next/headers";
 import LiveVisualEditing from "studio/lib/loaders/AutomaticVisualEditing";
-import { CompanyInfo } from "studio/lib/payloads/companyInfo";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyInfo";
+import { CompanyInfo } from "studio/lib/payloads/companyDetails";
+import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import { Metadata } from "next";
 import { loadQuery } from "studio/lib/store";
 import "src/styles/global.css";

src/compensations/Compensations.tsx

@@ -2,30 +2,37 @@
 import styles from "./compensations.module.css";
 import Text from "src/components/text/Text";
 import { CompensationsPage } from "studio/lib/payloads/compensations";
-import { RichText } from "src/components/richText/RichText";
 import SalaryCalculator, {
   Degree,
 } from "./components/salaryCalculator/SalaryCalculator";
 import { useState } from "react";
 import { calculatePension, calculateSalary } from "./utils/calculateSalary";
+import { CompanyLocation } from "studio/lib/payloads/companyDetails";
+import {
+  IOption,
+  RadioButtonGroup,
+} from "src/components/forms/radioButtonGroup/RadioButtonGroup";
 
 interface CompensationsProps {
   compensations: CompensationsPage;
+  locations: CompanyLocation[];
 }
 
 interface SalaryCalculatorFormState {
   examinationYear: number;
   selectedDegree: Degree;
 }
 
-const Compensations = ({ compensations }: CompensationsProps) => {
+const Compensations = ({ compensations, locations }: CompensationsProps) => {
+  const [selectedLocation, setSelectedLocation] = useState<string>(
+    locations[0]._id,
+  );
   const currentYear = new Date().getFullYear();
-
+  const [salary, setSalary] = useState<number | null>(null);
   const [formState, setFormState] = useState<SalaryCalculatorFormState>({
     examinationYear: currentYear - 1,
     selectedDegree: "bachelor",
   });
-  const [salary, setSalary] = useState<number | null>(null);
 
   const updateSelectedDegree = (newDegree: Degree) => {
     setFormState((prevState) => ({
@@ -52,9 +59,21 @@ const Compensations = ({ compensations }: CompensationsProps) => {
     );
   };
 
+  const locationOptions: IOption[] = locations.map((companyLocation) => ({
+    id: companyLocation._id,
+    label: companyLocation.companyLocationName,
+  }));
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{compensations.basicTitle}</Text>
+      <RadioButtonGroup
+        id="location-group"
+        label="Choose your location"
+        options={locationOptions}
+        selectedId={selectedLocation}
+        onValueChange={(option) => setSelectedLocation(option.id)}
+      />
       {compensations.showSalaryCalculator && (
         <>
           <SalaryCalculator
@@ -75,10 +94,9 @@ const Compensations = ({ compensations }: CompensationsProps) => {
         </>
       )}
       <div className={styles.benefits}>
-        {compensations.benefits.map((benefit) => (
+        {compensations.benefitsByLocation.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>
-            <Text type="h2">{benefit.basicTitle}</Text>
-            <RichText value={benefit.richText} />
+            {/* TODO: display benefits based on locations */}
           </div>
         ))}
       </div>

src/compensations/CompensationsPreview.tsx

@@ -3,25 +3,36 @@ import { Suspense } from "react";
 import Compensations from "./Compensations";
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 import { CompensationsPage } from "studio/lib/payloads/compensations";
+import { CompanyLocation } from "studio/lib/payloads/companyDetails";
+import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/companyDetails";
 import { COMPENSATIONS_PAGE_QUERY } from "studio/lib/queries/pages";
 
 interface CompensationsPreviewProps {
   initialCompensations: QueryResponseInitial<CompensationsPage>;
+  initialLocations: QueryResponseInitial<CompanyLocation[]>;
 }
 
 const CompensationsPreview = ({
   initialCompensations,
+  initialLocations,
 }: CompensationsPreviewProps) => {
   const { data } = useQuery<CompensationsPage>(
     COMPENSATIONS_PAGE_QUERY,
     { slug: initialCompensations.data.slug.current },
     { initial: initialCompensations },
   );
 
+  const { data: locationData } = useQuery<CompanyLocation[]>(
+    COMPANY_LOCATIONS_QUERY,
+    { initial: initialLocations },
+  );
+
   return (
-    <Suspense>
-      <Compensations compensations={data} />
-    </Suspense>
+    locationData && (
+      <Suspense>
+        <Compensations compensations={data} locations={locationData} />
+      </Suspense>
+    )
   );
 };
 

src/components/navigation/footer/Footer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ILink, LinkType, Navigation } from "studio/lib/payloads/navigation";
-import { CompanyInfo } from "studio/lib/payloads/companyInfo";
+import { CompanyInfo } from "studio/lib/payloads/companyDetails";
 import { useConvertSanityImageToNextImage } from "src/utils/hooks/useConvertImage";
 import styles from "./footer.module.css";
 import CustomLink from "../../link/CustomLink";

src/components/navigation/footer/FooterPreview.tsx

@@ -2,8 +2,8 @@
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 import { NAV_QUERY } from "studio/lib/queries/navigation";
 import { Navigation } from "studio/lib/payloads/navigation";
-import { CompanyInfo } from "studio/lib/payloads/companyInfo";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyInfo";
+import { CompanyInfo } from "studio/lib/payloads/companyDetails";
+import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import Footer from "./Footer";
 import { SocialMediaProfiles } from "studio/lib/payloads/socialMedia";
 import { SOMEPROFILES_QUERY } from "studio/lib/queries/socialMediaProfiles";

src/components/navigation/header/Header.tsx

@@ -9,7 +9,7 @@ import { linkID } from "studio/schemas/objects/link";
 import { callToActionFieldID } from "studio/schemas/fields/callToActionFields";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
-import { BrandAssets } from "studio/lib/payloads/companyInfo";
+import { BrandAssets } from "studio/lib/payloads/companyDetails";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { getHref } from "src/utils/get";

src/components/navigation/header/HeaderPreview.tsx

@@ -3,8 +3,8 @@ import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 import { NAV_QUERY } from "studio/lib/queries/navigation";
 import { Navigation } from "studio/lib/payloads/navigation";
 import { Header } from "./Header";
-import { CompanyInfo } from "studio/lib/payloads/companyInfo";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyInfo";
+import { CompanyInfo } from "studio/lib/payloads/companyDetails";
+import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 
 export default function HeaderPreview({
   initialNav,

src/components/navigation/mockData.ts

@@ -7,7 +7,6 @@ import { callToActionFieldID } from "studio/schemas/fields/callToActionFields";
 import { linkID } from "studio/schemas/objects/link";
 import primaryLogoFile from "../../stories/assets/energiai-primary-logo.svg";
 import secondaryLogoFile from "../../stories/assets/energiai-secondary-logo.svg";
-import { BrandAssets } from "studio/lib/payloads/companyInfo";
 import { SocialMediaProfiles } from "studio/lib/payloads/socialMedia";
 
 // Mock Navigation Data

src/utils/seo.ts

@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 import { toPlainText } from "@portabletext/toolkit";
 import { urlFor } from "studio/lib/image";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyInfo";
+import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import { loadQuery } from "studio/lib/store";
 import { PortableTextBlock } from "src/components/richText/RichText";
 

studio/lib/payloads/companyInfo.ts → studio/lib/payloads/companyDetails.ts

@@ -15,3 +15,10 @@ interface SiteMetadata {
   siteName: string;
   defaultLanguage: string;
 }
+
+export interface CompanyLocation {
+  _key: string;
+  _id: string;
+  _updatedAt: string;
+  companyLocationName: string;
+}

studio/lib/payloads/compensations.ts

@@ -8,6 +8,12 @@ export interface Benefit {
   richText: PortableTextBlock[];
 }
 
+export interface BenefitsByLocation {
+  _key: string;
+  location: string;
+  benefits: Benefit[];
+}
+
 export interface SalariesPage {
   _type: string;
   _key: string;
@@ -24,6 +30,6 @@ export interface CompensationsPage {
   basicTitle: string;
   page: string;
   slug: Slug;
-  benefits: Benefit[];
+  benefitsByLocation: BenefitsByLocation[];
   showSalaryCalculator: boolean;
 }

studio/lib/queries/companyInfo.ts → studio/lib/queries/companyDetails.ts

@@ -11,3 +11,5 @@ export const COMPANY_INFO_QUERY = groq`*[_type == "companyInfo"]{
     },
     legalPages,
 }[0]`;
+
+export const COMPANY_LOCATIONS_QUERY = groq`*[_type == "companyLocation"]`;