v3 - Show Benefits by location (#609)

* show Benefits by location

* cleanup in benefit schema and moved filtering of benefits to compensatins

* Update studio/schemas/objects/compensations/benefitsByLocation.ts

Co-authored-by: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com>

* created reference interface

---------

Co-authored-by: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com>

src/compensations/Compensations.tsx

@@ -12,6 +12,7 @@ import {
   IOption,
   RadioButtonGroup,
 } from "src/components/forms/radioButtonGroup/RadioButtonGroup";
+import BenefitsByLocation from "./components/benefitsByLocation/BenefitsByLocation";
 
 interface CompensationsProps {
   compensations: CompensationsPage;
@@ -64,6 +65,11 @@ const Compensations = ({ compensations, locations }: CompensationsProps) => {
     label: companyLocation.companyLocationName,
   }));
 
+  const benefitsFilteredByLocation =
+    compensations.benefitsByLocation.find(
+      (benefit) => benefit.location._ref === selectedLocation,
+    )?.benefits || [];
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{compensations.basicTitle}</Text>
@@ -96,13 +102,7 @@ const Compensations = ({ compensations, locations }: CompensationsProps) => {
           ) : null}
         </>
       )}
-      <div className={styles.benefits}>
-        {compensations.benefitsByLocation.map((benefit) => (
-          <div key={benefit._key} className={styles.benefitWrapper}>
-            {/* TODO: display benefits based on locations */}
-          </div>
-        ))}
-      </div>
+      <BenefitsByLocation benefits={benefitsFilteredByLocation} />
     </div>
   );
 };

src/compensations/compensations.module.css

@@ -4,16 +4,3 @@
   padding: 10rem 5rem;
   gap: 5rem;
 }
-
-.benefits {
-  display: flex;
-  flex-direction: column;
-  gap: 5rem;
-  max-width: var(--max-content-width-medium);
-}
-
-.benefitWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}

src/compensations/components/benefitsByLocation/BenefitsByLocation.tsx

@@ -0,0 +1,23 @@
+import Text from "src/components/text/Text";
+import { RichText } from "src/components/richText/RichText";
+import styles from "./benefitsByLocation.module.css";
+import { Benefit } from "studio/lib/payloads/compensations";
+
+interface BenefitsByLocationProps {
+  benefits: Benefit[];
+}
+
+export default function BenefitsByLocation({
+  benefits,
+}: BenefitsByLocationProps) {
+  return (
+    <div className={styles.benefits}>
+      {benefits.map((benefit: Benefit) => (
+        <div key={benefit._key} className={styles.benefitWrapper}>
+          <Text type="h2">{benefit.basicTitle}</Text>
+          <RichText value={benefit.richText} />
+        </div>
+      ))}
+    </div>
+  );
+}

src/compensations/components/benefitsByLocation/benefitsByLocation.module.css

@@ -0,0 +1,12 @@
+.benefits {
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+  max-width: var(--max-content-width-medium);
+}
+
+.benefitWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

studio/lib/payloads/compensations.ts

@@ -10,7 +10,7 @@ export interface Benefit {
 
 export interface BenefitsByLocation {
   _key: string;
-  location: string;
+  location: Reference;
   benefits: Benefit[];
 }
 
@@ -41,3 +41,8 @@ export interface CompensationsPage {
   benefitsByLocation: BenefitsByLocation[];
   showSalaryCalculator: boolean;
 }
+
+export interface Reference {
+  _type: "reference";
+  _ref: string;
+}

studio/schema.ts

@@ -11,10 +11,10 @@ import blog from "./schemas/documents/blog";
 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 companyLocation from "./schemas/documents/companyLocation";
 import compensations from "./schemas/documents/compensations";
 import redirect from "./schemas/documents/redirect";
+import benefitsByLocation from "./schemas/objects/compensations/benefitsByLocation";
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
@@ -31,8 +31,8 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     categories,
     legalDocument,
     compensations,
-    benefit,
     redirect,
+    benefitsByLocation,
     companyLocation,
   ],
 };

studio/schemas/objects/compensations/benefitsByLocation.ts

@@ -1,12 +1,36 @@
 import { defineField } from "sanity";
 import { location, locationID } from "../locations";
 import { companyLocationNameID } from "studio/schemas/documents/companyLocation";
-import { benefitId } from "studio/schemas/documents/benefit";
+import { richText, title } from "studio/schemas/fields/text";
 import {
   checkForDuplicateLocations,
   DocumentWithLocation,
 } from "./utils/validation";
 
+const benefitTypeId = "benefitType";
+
+const BENEFIT_TYPE_BASIC_VALUE = "basic";
+const BENEFIT_TYPES = [
+  { title: "Basic", value: BENEFIT_TYPE_BASIC_VALUE },
+  { title: "Bonus", value: "bonus" },
+  { title: "Pension", value: "pension" },
+  { title: "Salary Growth", value: "salaryGrowth" },
+];
+
+const benefitType = defineField({
+  name: benefitTypeId,
+  type: "string",
+  title: "Benefit Type",
+  description:
+    "Choose the type of benefit. Some benefit types include visual graphs that will be displayed together with the text.",
+  options: {
+    list: BENEFIT_TYPES,
+    layout: BENEFIT_TYPES.length > 5 ? "dropdown" : "radio",
+  },
+  initialValue: BENEFIT_TYPE_BASIC_VALUE,
+  validation: (Rule) => Rule.required(),
+});
+
 export const benefitsByLocation = defineField({
   name: "benefitsByLocation",
   title: "Benefits by Location",
@@ -24,21 +48,43 @@ export const benefitsByLocation = defineField({
           validation: (Rule) => Rule.required(),
         },
         defineField({
-          name: "benefitsGroup",
-          title: "Benefits Group",
+          name: "benefits",
+          title: "Benefits",
           description:
             "Enter the benefits offered at the location selected above.",
           type: "array",
-          of: [{ type: benefitId }],
+          of: [
+            {
+              name: "benefit",
+              type: "object",
+              title: "Benefit",
+              fields: [benefitType, title, richText],
+              preview: {
+                select: {
+                  title: title.name,
+                  type: benefitType.name,
+                },
+                prepare({ title, type }) {
+                  const subtitle =
+                    BENEFIT_TYPES.find((o) => o.value === type)?.title ??
+                    "Unknown benefit type";
+                  return {
+                    title,
+                    subtitle,
+                  };
+                },
+              },
+            },
+          ],
         }),
       ],
       preview: {
         select: {
           location: `${locationID}.${companyLocationNameID}`,
-          benefitsGroup: "benefitsGroup",
+          benefits: "benefits",
         },
-        prepare({ location, benefitsGroup }) {
-          const benefitsCount = benefitsGroup ? benefitsGroup.length : 0;
+        prepare({ location, benefits }) {
+          const benefitsCount = benefits ? benefits.length : 0;
           return {
             title: location || "No location selected",
             subtitle: `${benefitsCount} benefit${benefitsCount > 1 ? "s" : ""}`,
@@ -58,3 +104,5 @@ export const benefitsByLocation = defineField({
       );
     }),
 });
+
+export default benefitsByLocation;