show Benefits by location

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;
@@ -93,13 +94,10 @@ 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
+        locationId={selectedLocation}
+        benefits={compensations.benefitsByLocation}
+      />
     </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,29 @@
+import { Benefit } from "studio/lib/payloads/compensations";
+import Text from "src/components/text/Text";
+import { RichText } from "src/components/richText/RichText";
+import styles from "./benefitsByLocation.module.css";
+
+interface BenefitsByLocationProps {
+  locationId: string;
+  benefits?: Benefit[] | any;
+}
+
+export default function BenefitsByLocation({
+  locationId,
+  benefits,
+}: BenefitsByLocationProps) {
+  const selectedBenefitsGroup =
+    benefits.find((location: any) => location.location._ref === locationId)
+      ?.benefitsGroup || [];
+
+  return (
+    <div className={styles.benefits}>
+      {selectedBenefitsGroup.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;
+}