From 6ca523dce8883e7c25a33c098192165ea790d525 Mon Sep 17 00:00:00 2001 From: anemne <63043552+anemne@users.noreply.github.com> Date: Wed, 11 Sep 2024 09:52:11 +0200 Subject: [PATCH] v3 - calculator ui - offices (#601) * renamed companyInfo query file to companyDetail and added query for officeLocation, added radiobuttogroup over possible locations * prettier fix * name changes * update page after renaming * naming changes * remove object.value when mapping --- src/app/(main)/[slug]/page.tsx | 39 ++++++++++++------- src/app/(main)/layout.tsx | 4 +- src/app/layout.tsx | 4 +- src/compensations/Compensations.tsx | 32 +++++++++++---- src/compensations/CompensationsPreview.tsx | 17 ++++++-- src/components/navigation/footer/Footer.tsx | 2 +- .../navigation/footer/FooterPreview.tsx | 4 +- src/components/navigation/header/Header.tsx | 2 +- .../navigation/header/HeaderPreview.tsx | 4 +- src/components/navigation/mockData.ts | 1 - src/utils/seo.ts | 2 +- .../{companyInfo.ts => companyDetails.ts} | 7 ++++ studio/lib/payloads/compensations.ts | 8 +++- .../{companyInfo.ts => companyDetails.ts} | 2 + 14 files changed, 92 insertions(+), 36 deletions(-) rename studio/lib/payloads/{companyInfo.ts => companyDetails.ts} (71%) rename studio/lib/queries/{companyInfo.ts => companyDetails.ts} (80%) diff --git a/src/app/(main)/[slug]/page.tsx b/src/app/(main)/[slug]/page.tsx index cec17ea63..dfe51b3cf 100644 --- a/src/app/(main)/[slug]/page.tsx +++ b/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(SLUG_QUERY, { slug }, { perspective }), - loadQuery(BLOG_PAGE_QUERY, { slug }, { perspective }), - loadQuery( - COMPENSATIONS_PAGE_QUERY, - { slug }, - { perspective }, - ), - ]); + const [ + initialPage, + initialBlogPage, + initialCompensationsPage, + initialLocationsData, + ] = await Promise.all([ + loadQuery(SLUG_QUERY, { slug }, { perspective }), + loadQuery(BLOG_PAGE_QUERY, { slug }, { perspective }), + loadQuery( + COMPENSATIONS_PAGE_QUERY, + { slug }, + { perspective }, + ), + loadQuery(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 ? ( - + ) : ( - + ); } diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 4affe6efd..9dfeeed10 100644 --- a/src/app/(main)/layout.tsx +++ b/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"; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 06c9dffab..27871391b 100644 --- a/src/app/layout.tsx +++ b/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"; diff --git a/src/compensations/Compensations.tsx b/src/compensations/Compensations.tsx index 3973125dd..710664121 100644 --- a/src/compensations/Compensations.tsx +++ b/src/compensations/Compensations.tsx @@ -2,15 +2,20 @@ 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 { @@ -18,14 +23,16 @@ interface SalaryCalculatorFormState { selectedDegree: Degree; } -const Compensations = ({ compensations }: CompensationsProps) => { +const Compensations = ({ compensations, locations }: CompensationsProps) => { + const [selectedLocation, setSelectedLocation] = useState( + locations[0]._id, + ); const currentYear = new Date().getFullYear(); - + const [salary, setSalary] = useState(null); const [formState, setFormState] = useState({ examinationYear: currentYear - 1, selectedDegree: "bachelor", }); - const [salary, setSalary] = useState(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 (
{compensations.basicTitle} + setSelectedLocation(option.id)} + /> {compensations.showSalaryCalculator && ( <> { )}
- {compensations.benefits.map((benefit) => ( + {compensations.benefitsByLocation.map((benefit) => (
- {benefit.basicTitle} - + {/* TODO: display benefits based on locations */}
))}
diff --git a/src/compensations/CompensationsPreview.tsx b/src/compensations/CompensationsPreview.tsx index deb2e89a7..5a592e6d3 100644 --- a/src/compensations/CompensationsPreview.tsx +++ b/src/compensations/CompensationsPreview.tsx @@ -3,14 +3,18 @@ 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; + initialLocations: QueryResponseInitial; } const CompensationsPreview = ({ initialCompensations, + initialLocations, }: CompensationsPreviewProps) => { const { data } = useQuery( COMPENSATIONS_PAGE_QUERY, @@ -18,10 +22,17 @@ const CompensationsPreview = ({ { initial: initialCompensations }, ); + const { data: locationData } = useQuery( + COMPANY_LOCATIONS_QUERY, + { initial: initialLocations }, + ); + return ( - - - + locationData && ( + + + + ) ); }; diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx index 09b8e2567..999af8c61 100644 --- a/src/components/navigation/footer/Footer.tsx +++ b/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"; diff --git a/src/components/navigation/footer/FooterPreview.tsx b/src/components/navigation/footer/FooterPreview.tsx index ec92f924e..dac79e00c 100644 --- a/src/components/navigation/footer/FooterPreview.tsx +++ b/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"; diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index c58d24f3a..e6ace05b9 100644 --- a/src/components/navigation/header/Header.tsx +++ b/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"; diff --git a/src/components/navigation/header/HeaderPreview.tsx b/src/components/navigation/header/HeaderPreview.tsx index f392192cb..443e5c6ba 100644 --- a/src/components/navigation/header/HeaderPreview.tsx +++ b/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, diff --git a/src/components/navigation/mockData.ts b/src/components/navigation/mockData.ts index fb9a9b952..ec294e3f3 100644 --- a/src/components/navigation/mockData.ts +++ b/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 diff --git a/src/utils/seo.ts b/src/utils/seo.ts index 3420aa9ea..a0b72c1c6 100644 --- a/src/utils/seo.ts +++ b/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"; diff --git a/studio/lib/payloads/companyInfo.ts b/studio/lib/payloads/companyDetails.ts similarity index 71% rename from studio/lib/payloads/companyInfo.ts rename to studio/lib/payloads/companyDetails.ts index 748aa7cfa..57cefdb2a 100644 --- a/studio/lib/payloads/companyInfo.ts +++ b/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; +} diff --git a/studio/lib/payloads/compensations.ts b/studio/lib/payloads/compensations.ts index b341685df..63abc1a1a 100644 --- a/studio/lib/payloads/compensations.ts +++ b/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; } diff --git a/studio/lib/queries/companyInfo.ts b/studio/lib/queries/companyDetails.ts similarity index 80% rename from studio/lib/queries/companyInfo.ts rename to studio/lib/queries/companyDetails.ts index 54452eab9..85c72b648 100644 --- a/studio/lib/queries/companyInfo.ts +++ b/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"]`;