From 6b7aaed66b22e5bd5966323ff4caf2aa15d926d1 Mon Sep 17 00:00:00 2001 From: anemne <63043552+anemne@users.noreply.github.com> Date: Thu, 12 Sep 2024 13:06:28 +0200 Subject: [PATCH] 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 | 14 ++--- src/compensations/compensations.module.css | 13 ---- .../benefitsByLocation/BenefitsByLocation.tsx | 23 +++++++ .../benefitsByLocation.module.css | 12 ++++ studio/lib/payloads/compensations.ts | 7 ++- studio/schema.ts | 4 +- studio/schemas/documents/benefit.ts | 52 ---------------- .../compensations/benefitsByLocation.ts | 62 ++++++++++++++++--- 8 files changed, 105 insertions(+), 82 deletions(-) create mode 100644 src/compensations/components/benefitsByLocation/BenefitsByLocation.tsx create mode 100644 src/compensations/components/benefitsByLocation/benefitsByLocation.module.css delete mode 100644 studio/schemas/documents/benefit.ts diff --git a/src/compensations/Compensations.tsx b/src/compensations/Compensations.tsx index 13c0da409..fa4cc3506 100644 --- a/src/compensations/Compensations.tsx +++ b/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 (
{compensations.basicTitle} @@ -96,13 +102,7 @@ const Compensations = ({ compensations, locations }: CompensationsProps) => { ) : null} )} -
- {compensations.benefitsByLocation.map((benefit) => ( -
- {/* TODO: display benefits based on locations */} -
- ))} -
+
); }; diff --git a/src/compensations/compensations.module.css b/src/compensations/compensations.module.css index f057485d6..b1b8fdd4d 100644 --- a/src/compensations/compensations.module.css +++ b/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; -} diff --git a/src/compensations/components/benefitsByLocation/BenefitsByLocation.tsx b/src/compensations/components/benefitsByLocation/BenefitsByLocation.tsx new file mode 100644 index 000000000..b1d862dd4 --- /dev/null +++ b/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 ( +
+ {benefits.map((benefit: Benefit) => ( +
+ {benefit.basicTitle} + +
+ ))} +
+ ); +} diff --git a/src/compensations/components/benefitsByLocation/benefitsByLocation.module.css b/src/compensations/components/benefitsByLocation/benefitsByLocation.module.css new file mode 100644 index 000000000..c4c1dfc0d --- /dev/null +++ b/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; +} diff --git a/studio/lib/payloads/compensations.ts b/studio/lib/payloads/compensations.ts index e45b2d57e..49d425cce 100644 --- a/studio/lib/payloads/compensations.ts +++ b/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; +} diff --git a/studio/schema.ts b/studio/schema.ts index 74c41e5a5..fd2d3ad9d 100644 --- a/studio/schema.ts +++ b/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, ], }; diff --git a/studio/schemas/documents/benefit.ts b/studio/schemas/documents/benefit.ts deleted file mode 100644 index d1794b83f..000000000 --- a/studio/schemas/documents/benefit.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { defineField, defineType } from "sanity"; -import { richText, title } from "../fields/text"; - -export const benefitId = "benefit"; -export const benefitTypeId = "benefitType"; - -const BENEFIT_TYPE_BASIC_VALUE = "basic"; -const BENEFIT_TYPES = [ - { title: "Basic", value: BENEFIT_TYPE_BASIC_VALUE }, - { title: "Gadgets", value: "gadgets" }, - { 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(), -}); - -const benefit = defineType({ - name: benefitId, - type: "document", - 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, - }; - }, - }, -}); - -export default benefit; diff --git a/studio/schemas/objects/compensations/benefitsByLocation.ts b/studio/schemas/objects/compensations/benefitsByLocation.ts index e49b6a730..991d8681a 100644 --- a/studio/schemas/objects/compensations/benefitsByLocation.ts +++ b/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;