From 1cabfb54c7782c7f4d4a78d24f9487a1c3e978c1 Mon Sep 17 00:00:00 2001 From: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com> Date: Fri, 30 Aug 2024 11:00:11 +0200 Subject: [PATCH] v3 - replace SalaryAndBenefits with Compensations list (#551) * feat: Office document * refactor(compensations): rename salaryAndBenefits to compensations * feat(studio): move Compensations under Static Pages * feat(Compensations): document list for compensations * chore(salaryAndBenefits): add deprecation TODO --- src/app/(main)/[slug]/page.tsx | 26 ++++++-------- .../Compensations.tsx} | 18 +++++----- src/compensations/CompensationsPreview.tsx | 28 +++++++++++++++ .../compensations.module.css} | 0 .../salaryCalculator/SalaryCalculator.tsx | 2 +- .../salaryCalculator.module.css | 0 .../utils/calculateSalary.ts | 0 .../utils/salaryData.ts | 0 .../SalaryAndBenefitsPreview.tsx | 28 --------------- ...{salaryAndBenefits.ts => compensations.ts} | 2 +- studio/lib/queries/pages.ts | 4 +-- studio/schema.ts | 5 ++- studio/schemas/deskStructure.ts | 17 ++++------ studio/schemas/documents/compensations.ts | 34 +++++++++++++++++++ studio/schemas/documents/salaryAndBenefits.ts | 12 ++++--- studio/schemas/objects/link.ts | 4 +-- 16 files changed, 107 insertions(+), 73 deletions(-) rename src/{salaryAndBenefits/SalaryAndBenefits.tsx => compensations/Compensations.tsx} (81%) create mode 100644 src/compensations/CompensationsPreview.tsx rename src/{salaryAndBenefits/salaryAndBenefits.module.css => compensations/compensations.module.css} (100%) rename src/{salaryAndBenefits => compensations}/components/salaryCalculator/SalaryCalculator.tsx (96%) rename src/{salaryAndBenefits => compensations}/components/salaryCalculator/salaryCalculator.module.css (100%) rename src/{salaryAndBenefits => compensations}/utils/calculateSalary.ts (100%) rename src/{salaryAndBenefits => compensations}/utils/salaryData.ts (100%) delete mode 100644 src/salaryAndBenefits/SalaryAndBenefitsPreview.tsx rename studio/lib/payloads/{salaryAndBenefits.ts => compensations.ts} (91%) create mode 100644 studio/schemas/documents/compensations.ts diff --git a/src/app/(main)/[slug]/page.tsx b/src/app/(main)/[slug]/page.tsx index cf9988578..c16aa1c8b 100644 --- a/src/app/(main)/[slug]/page.tsx +++ b/src/app/(main)/[slug]/page.tsx @@ -2,21 +2,21 @@ import { Metadata } from "next"; import { redirect } from "next/navigation"; import { Blog } from "src/blog/Blog"; import BlogPreview from "src/blog/BlogPreview"; -import SalaryAndBenefits from "src/salaryAndBenefits/SalaryAndBenefits"; +import Compensations from "src/compensations/Compensations"; import { getDraftModeInfo } from "src/utils/draftmode"; import SectionRenderer from "src/utils/renderSection"; import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo"; import { BlogPage, PageBuilder, Post } from "studio/lib/payloads/pages"; -import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits"; +import { CompensationsPage } from "studio/lib/payloads/compensations"; import { BLOG_PAGE_QUERY, POSTS_QUERY, - SALARY_AND_BENEFITS_PAGE_QUERY, + COMPENSATIONS_PAGE_QUERY, SEO_SLUG_QUERY, SLUG_QUERY, } from "studio/lib/queries/pages"; import { loadQuery } from "studio/lib/store"; -import SalaryAndBenefitsPreview from "src/salaryAndBenefits/SalaryAndBenefitsPreview"; +import CompensationsPreview from "src/compensations/CompensationsPreview"; export const dynamic = "force-dynamic"; @@ -36,12 +36,12 @@ async function Page({ params }: Props) { const { slug } = params; const { perspective, isDraftMode } = getDraftModeInfo(); - const [initialPage, initialBlogPage, initialSalaryAndBenefitsPage] = + const [initialPage, initialBlogPage, initialCompensationsPage] = await Promise.all([ loadQuery(SLUG_QUERY, { slug }, { perspective }), loadQuery(BLOG_PAGE_QUERY, { slug }, { perspective }), - loadQuery( - SALARY_AND_BENEFITS_PAGE_QUERY, + loadQuery( + COMPENSATIONS_PAGE_QUERY, { slug }, { perspective }, ), @@ -50,7 +50,7 @@ async function Page({ params }: Props) { if ( !initialPage.data && !initialBlogPage.data && - !initialSalaryAndBenefitsPage.data + !initialCompensationsPage.data ) { console.log(`Page ${slug} not found`); // TODO: add error snackbar @@ -102,15 +102,11 @@ async function Page({ params }: Props) { ); } - if (initialSalaryAndBenefitsPage.data) { + if (initialCompensationsPage.data) { return isDraftMode ? ( - + ) : ( - + ); } diff --git a/src/salaryAndBenefits/SalaryAndBenefits.tsx b/src/compensations/Compensations.tsx similarity index 81% rename from src/salaryAndBenefits/SalaryAndBenefits.tsx rename to src/compensations/Compensations.tsx index 0beeed23a..3973125dd 100644 --- a/src/salaryAndBenefits/SalaryAndBenefits.tsx +++ b/src/compensations/Compensations.tsx @@ -1,7 +1,7 @@ "use client"; -import styles from "./salaryAndBenefits.module.css"; +import styles from "./compensations.module.css"; import Text from "src/components/text/Text"; -import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits"; +import { CompensationsPage } from "studio/lib/payloads/compensations"; import { RichText } from "src/components/richText/RichText"; import SalaryCalculator, { Degree, @@ -9,8 +9,8 @@ import SalaryCalculator, { import { useState } from "react"; import { calculatePension, calculateSalary } from "./utils/calculateSalary"; -interface SalaryAndBenefitsProps { - salaryAndBenefits: SalaryAndBenefitsPage; +interface CompensationsProps { + compensations: CompensationsPage; } interface SalaryCalculatorFormState { @@ -18,7 +18,7 @@ interface SalaryCalculatorFormState { selectedDegree: Degree; } -const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => { +const Compensations = ({ compensations }: CompensationsProps) => { const currentYear = new Date().getFullYear(); const [formState, setFormState] = useState({ @@ -54,8 +54,8 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => { return (
- {salaryAndBenefits.basicTitle} - {salaryAndBenefits.showSalaryCalculator && ( + {compensations.basicTitle} + {compensations.showSalaryCalculator && ( <> { )}
- {salaryAndBenefits.benefits.map((benefit) => ( + {compensations.benefits.map((benefit) => (
{benefit.basicTitle} @@ -86,4 +86,4 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => { ); }; -export default SalaryAndBenefits; +export default Compensations; diff --git a/src/compensations/CompensationsPreview.tsx b/src/compensations/CompensationsPreview.tsx new file mode 100644 index 000000000..deb2e89a7 --- /dev/null +++ b/src/compensations/CompensationsPreview.tsx @@ -0,0 +1,28 @@ +"use client"; +import { Suspense } from "react"; +import Compensations from "./Compensations"; +import { QueryResponseInitial, useQuery } from "@sanity/react-loader"; +import { CompensationsPage } from "studio/lib/payloads/compensations"; +import { COMPENSATIONS_PAGE_QUERY } from "studio/lib/queries/pages"; + +interface CompensationsPreviewProps { + initialCompensations: QueryResponseInitial; +} + +const CompensationsPreview = ({ + initialCompensations, +}: CompensationsPreviewProps) => { + const { data } = useQuery( + COMPENSATIONS_PAGE_QUERY, + { slug: initialCompensations.data.slug.current }, + { initial: initialCompensations }, + ); + + return ( + + + + ); +}; + +export default CompensationsPreview; diff --git a/src/salaryAndBenefits/salaryAndBenefits.module.css b/src/compensations/compensations.module.css similarity index 100% rename from src/salaryAndBenefits/salaryAndBenefits.module.css rename to src/compensations/compensations.module.css diff --git a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx b/src/compensations/components/salaryCalculator/SalaryCalculator.tsx similarity index 96% rename from src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx rename to src/compensations/components/salaryCalculator/SalaryCalculator.tsx index b13015c52..1a731e514 100644 --- a/src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx +++ b/src/compensations/components/salaryCalculator/SalaryCalculator.tsx @@ -5,7 +5,7 @@ import { RadioButtonGroup, } from "src/components/forms/radioButtonGroup/RadioButtonGroup"; import Button from "src/components/buttons/Button"; -import { maxExperience } from "src/salaryAndBenefits/utils/calculateSalary"; +import { maxExperience } from "src/compensations/utils/calculateSalary"; export type Degree = "bachelor" | "master"; diff --git a/src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css b/src/compensations/components/salaryCalculator/salaryCalculator.module.css similarity index 100% rename from src/salaryAndBenefits/components/salaryCalculator/salaryCalculator.module.css rename to src/compensations/components/salaryCalculator/salaryCalculator.module.css diff --git a/src/salaryAndBenefits/utils/calculateSalary.ts b/src/compensations/utils/calculateSalary.ts similarity index 100% rename from src/salaryAndBenefits/utils/calculateSalary.ts rename to src/compensations/utils/calculateSalary.ts diff --git a/src/salaryAndBenefits/utils/salaryData.ts b/src/compensations/utils/salaryData.ts similarity index 100% rename from src/salaryAndBenefits/utils/salaryData.ts rename to src/compensations/utils/salaryData.ts diff --git a/src/salaryAndBenefits/SalaryAndBenefitsPreview.tsx b/src/salaryAndBenefits/SalaryAndBenefitsPreview.tsx deleted file mode 100644 index af89ce5fc..000000000 --- a/src/salaryAndBenefits/SalaryAndBenefitsPreview.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; -import { Suspense } from "react"; -import SalaryAndBenefits from "./SalaryAndBenefits"; -import { QueryResponseInitial, useQuery } from "@sanity/react-loader"; -import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits"; -import { SALARY_AND_BENEFITS_PAGE_QUERY } from "studio/lib/queries/pages"; - -interface SalaryAndBenefitsPreviewProps { - initialSalaryAndBenefits: QueryResponseInitial; -} - -const SalaryAndBenefitsPreview = ({ - initialSalaryAndBenefits, -}: SalaryAndBenefitsPreviewProps) => { - const { data } = useQuery( - SALARY_AND_BENEFITS_PAGE_QUERY, - { slug: initialSalaryAndBenefits.data.slug.current }, - { initial: initialSalaryAndBenefits }, - ); - - return ( - - - - ); -}; - -export default SalaryAndBenefitsPreview; diff --git a/studio/lib/payloads/salaryAndBenefits.ts b/studio/lib/payloads/compensations.ts similarity index 91% rename from studio/lib/payloads/salaryAndBenefits.ts rename to studio/lib/payloads/compensations.ts index ff6636c49..468e3733b 100644 --- a/studio/lib/payloads/salaryAndBenefits.ts +++ b/studio/lib/payloads/compensations.ts @@ -8,7 +8,7 @@ export interface Benefit { richText: PortableTextBlock[]; } -export interface SalaryAndBenefitsPage { +export interface CompensationsPage { _createdAt: string; _id: string; _rev: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 37d140c10..6350cf0a1 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -87,8 +87,8 @@ export const BLOG_PAGE_QUERY = groq` *[_type == "blog" && slug.current == $slug][0] `; -export const SALARY_AND_BENEFITS_PAGE_QUERY = groq` - *[_type == "salaryAndBenefits" && slug.current == $slug][0] +export const COMPENSATIONS_PAGE_QUERY = groq` + *[_type == "compensations" && slug.current == $slug][0] `; export const POSTS_QUERY = groq` diff --git a/studio/schema.ts b/studio/schema.ts index 17c539428..0891cdcf2 100644 --- a/studio/schema.ts +++ b/studio/schema.ts @@ -12,11 +12,13 @@ import posts from "./schemas/documents/post"; import categories from "./schemas/fields/categories"; import legalDocument from "./schemas/documents/legalDocuments"; import benefit from "./schemas/documents/benefit"; -import salaryAndBenefits from "./schemas/documents/salaryAndBenefits"; import office from "./schemas/documents/office"; +import compensations from "./schemas/documents/compensations"; +import salaryAndBenefits from "./schemas/documents/salaryAndBenefits"; export const schema: { types: SchemaTypeDefinition[] } = { types: [ + office, siteSettings, navigationManager, socialMediaLinks, @@ -29,6 +31,7 @@ export const schema: { types: SchemaTypeDefinition[] } = { posts, categories, legalDocument, + compensations, salaryAndBenefits, benefit, office, diff --git a/studio/schemas/deskStructure.ts b/studio/schemas/deskStructure.ts index 5960f0092..7eae57d4d 100644 --- a/studio/schemas/deskStructure.ts +++ b/studio/schemas/deskStructure.ts @@ -14,7 +14,7 @@ import { soMeLinksID } from "./documents/socialMediaProfiles"; import { siteSettingsID } from "./documents/siteSettings"; import { postId } from "./documents/post"; import { legalDocumentID } from "./documents/legalDocuments"; -import { salaryAndBenefitsId } from "./documents/salaryAndBenefits"; +import { compensationsId } from "./documents/compensations"; export default (S: StructureBuilder) => S.list() @@ -66,15 +66,12 @@ export default (S: StructureBuilder) => .documentId(blogId) .title("Blog Overview & Settings"), ), + S.listItem() + .title("Compensations") + .icon(HeartIcon) + .child( + S.documentTypeList(compensationsId).title("Compensations"), + ), ]), ), - S.listItem() - .title("Salary and Benefits") - .icon(HeartIcon) - .child( - S.document() - .schemaType(salaryAndBenefitsId) - .documentId(salaryAndBenefitsId) - .title("Salary and Benefits"), - ), ]); diff --git a/studio/schemas/documents/compensations.ts b/studio/schemas/documents/compensations.ts new file mode 100644 index 000000000..098b49db4 --- /dev/null +++ b/studio/schemas/documents/compensations.ts @@ -0,0 +1,34 @@ +import { defineField, defineType } from "sanity"; +import { titleSlug } from "../schemaTypes/slug"; +import seo from "../objects/seo"; +import { title } from "../fields/text"; +import { benefitId } from "./benefit"; + +export const compensationsId = "compensations"; + +const compensations = defineType({ + name: compensationsId, + type: "document", + title: "Compensations", + fields: [ + title, + titleSlug, + seo, + defineField({ + name: "showSalaryCalculator", + title: "Show Salary Calculator", + description: "Should the salary calculator be visible on the page?", + type: "boolean", + initialValue: true, + }), + defineField({ + name: "benefits", + title: "Benefits", + description: "Manage benefits for the compensations page", + type: "array", + of: [{ type: benefitId }], + }), + ], +}); + +export default compensations; diff --git a/studio/schemas/documents/salaryAndBenefits.ts b/studio/schemas/documents/salaryAndBenefits.ts index 6268463af..afda357e8 100644 --- a/studio/schemas/documents/salaryAndBenefits.ts +++ b/studio/schemas/documents/salaryAndBenefits.ts @@ -1,15 +1,19 @@ import { defineField, defineType } from "sanity"; +import { title } from "../fields/text"; import { titleSlug } from "../schemaTypes/slug"; import seo from "../objects/seo"; -import { title } from "../fields/text"; import { benefitId } from "./benefit"; -export const salaryAndBenefitsId = "salaryAndBenefits"; +// TODO: deprecated, drop support once important deployments have updated const salaryAndBenefits = defineType({ - name: salaryAndBenefitsId, - type: "document", + name: "salaryAndBenefits", title: "Salary and Benefits", + type: "document", + deprecated: { + reason: "Use the Compensations document type instead", + }, + readOnly: true, fields: [ title, titleSlug, diff --git a/studio/schemas/objects/link.ts b/studio/schemas/objects/link.ts index d18095797..3ed110cd0 100644 --- a/studio/schemas/objects/link.ts +++ b/studio/schemas/objects/link.ts @@ -22,7 +22,7 @@ interface Parent { // Lazy reference to avoid circular dependency const lazyPageBuilderID = () => "pageBuilder"; const lazyBlogID = () => "blog"; -const lazySalaryAndBenefitsID = () => "salaryAndBenefits"; +const lazyCompensationsID = () => "compensations"; export const link = defineField({ name: linkID, @@ -61,7 +61,7 @@ export const link = defineField({ to: [ { type: lazyPageBuilderID() }, { type: lazyBlogID() }, - { type: lazySalaryAndBenefitsID() }, + { type: lazyCompensationsID() }, ], validation: (Rule: any) => Rule.custom((value: any, context: any) => {