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

@@ -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<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
       loadQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
-      loadQuery<SalaryAndBenefitsPage>(
-        SALARY_AND_BENEFITS_PAGE_QUERY,
+      loadQuery<CompensationsPage>(
+        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 ? (
-      <SalaryAndBenefitsPreview
-        initialSalaryAndBenefits={initialSalaryAndBenefitsPage}
-      />
+      <CompensationsPreview initialCompensations={initialCompensationsPage} />
     ) : (
-      <SalaryAndBenefits
-        salaryAndBenefits={initialSalaryAndBenefitsPage.data}
-      />
+      <Compensations compensations={initialCompensationsPage.data} />
     );
   }
 

src/salaryAndBenefits/SalaryAndBenefits.tsx → src/compensations/Compensations.tsx

@@ -1,24 +1,24 @@
 "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,
 } from "./components/salaryCalculator/SalaryCalculator";
 import { useState } from "react";
 import { calculatePension, calculateSalary } from "./utils/calculateSalary";
 
-interface SalaryAndBenefitsProps {
-  salaryAndBenefits: SalaryAndBenefitsPage;
+interface CompensationsProps {
+  compensations: CompensationsPage;
 }
 
 interface SalaryCalculatorFormState {
   examinationYear: number;
   selectedDegree: Degree;
 }
 
-const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
+const Compensations = ({ compensations }: CompensationsProps) => {
   const currentYear = new Date().getFullYear();
 
   const [formState, setFormState] = useState<SalaryCalculatorFormState>({
@@ -54,8 +54,8 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
 
   return (
     <div className={styles.wrapper}>
-      <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
-      {salaryAndBenefits.showSalaryCalculator && (
+      <Text type="h1">{compensations.basicTitle}</Text>
+      {compensations.showSalaryCalculator && (
         <>
           <SalaryCalculator
             examinationYearValue={formState.examinationYear}
@@ -75,7 +75,7 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
         </>
       )}
       <div className={styles.benefits}>
-        {salaryAndBenefits.benefits.map((benefit) => (
+        {compensations.benefits.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>
             <Text type="h2">{benefit.basicTitle}</Text>
             <RichText value={benefit.richText} />
@@ -86,4 +86,4 @@ const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
   );
 };
 
-export default SalaryAndBenefits;
+export default Compensations;

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<CompensationsPage>;
+}
+
+const CompensationsPreview = ({
+  initialCompensations,
+}: CompensationsPreviewProps) => {
+  const { data } = useQuery<CompensationsPage>(
+    COMPENSATIONS_PAGE_QUERY,
+    { slug: initialCompensations.data.slug.current },
+    { initial: initialCompensations },
+  );
+
+  return (
+    <Suspense>
+      <Compensations compensations={data} />
+    </Suspense>
+  );
+};
+
+export default CompensationsPreview;

src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx → 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";
 

studio/lib/payloads/salaryAndBenefits.ts → 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;

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`

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,

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"),
-        ),
     ]);

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;

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,

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) => {