refactor: add org aggregate-ratings-card component

src/orgs/components/org-reviews/aggregate-ratings-card.tsx

@@ -0,0 +1,66 @@
+import { DetailsPanelCardWrapper } from '~/shared/components/details-panel/card-wrapper';
+import { Heading } from '~/shared/components/heading';
+
+import { ORG_RATING_LABELS } from '~/orgs/core/constants';
+import { OrgDetails } from '~/orgs/core/schemas';
+
+interface Props {
+  showInfos: boolean;
+  infoTexts: React.ReactNode;
+  actions: React.ReactNode;
+  aggregateRatings: OrgDetails['aggregateRatings'];
+}
+
+export const AggregateRatingsCard = ({
+  showInfos,
+  infoTexts,
+  actions,
+  aggregateRatings,
+}: Props) => {
+  const ratings = Object.entries(aggregateRatings).filter(
+    ([, rating]) => rating !== null,
+  ) as [string, number][];
+
+  // const ratings = Object.entries({
+  //   benefits: null,
+  //   careerGrowth: 4.5,
+  //   diversityInclusion: 3.9,
+  //   management: 3.4,
+  //   product: 3.3,
+  //   compensation: 4.9,
+  //   onboarding: 4.6,
+  //   workLifeBalance: null,
+  // }).filter(([, rating]) => rating !== null) as [string, number][];
+
+  return (
+    <DetailsPanelCardWrapper>
+      <Heading text={HEADING_TEXT} />
+
+      {showInfos && <>{infoTexts}</>}
+
+      <div className="grid-cold-1 2xl:grid-cols-3 grid gap-3 sm:grid-cols-2">
+        {ratings.map(([label, rating]) => (
+          <div
+            key={label}
+            className="flex shrink-0 flex-wrap items-center justify-start gap-2"
+          >
+            <p>{rating.toFixed(1)}</p>
+            {/* <Rating
+              count={1}
+              fractions={5}
+              value={(rating ?? 0) / 5}
+              color="gold"
+            /> */}
+            <p className="shrink-0">
+              {ORG_RATING_LABELS[label as keyof typeof ORG_RATING_LABELS]}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {showInfos && <>{actions}</>}
+    </DetailsPanelCardWrapper>
+  );
+};
+
+const HEADING_TEXT = 'Aggregate Ratings';

src/orgs/components/org-reviews/anon-review.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { DetailsPanelCardWrapper } from '~/shared/components/details-panel/card-wrapper';
+import { Heading } from '~/shared/components/heading';
+
+interface Props {
+  actions: React.ReactNode;
+  infoTexts: React.ReactNode;
+}
+
+export const AnonReview = ({ actions, infoTexts }: Props) => {
+  return (
+    <DetailsPanelCardWrapper>
+      <Heading text={HEADING_TEXT} />
+
+      {infoTexts}
+
+      {actions}
+    </DetailsPanelCardWrapper>
+  );
+};
+
+const HEADING_TEXT = 'Leave a Review';

src/orgs/components/org-reviews/index.tsx

@@ -1,6 +1,8 @@
 import { OrgDetails } from '~/orgs/core/schemas';
 
-import { LeaveReview } from './leave-review';
+import { AggregateRatingsCard } from './aggregate-ratings-card';
+import { AnonReview } from './anon-review';
+import { InfoTexts } from './info-texts';
 import { ReviewButton } from './review-button';
 import { ShareButton } from './share-button';
 
@@ -9,23 +11,36 @@ interface Props {
 }
 
 export const OrgReviews = ({ org }: Props) => {
-  const { orgId } = org;
+  const { orgId, aggregateRatings } = org;
 
-  const noReviews = org.reviewCount === 0;
+  const showAnonReview = org.reviewCount === 0;
   const hasRating = Object.values(org.aggregateRatings).some(
     (n) => n !== null && n !== 0,
   );
   const reviews = org.reviews.filter((r) => !!r.review.title);
 
+  const actions = (
+    <div className="flex gap-4">
+      <ReviewButton orgId={orgId} />
+      <ShareButton orgId={orgId} />
+    </div>
+  );
+
+  const infoTexts = <InfoTexts />;
+
   return (
     <div className="flex flex-col gap-6">
-      {noReviews && (
-        <LeaveReview
-          reviewButton={<ReviewButton orgId={orgId} />}
-          shareButton={<ShareButton orgId={orgId} />}
+      {showAnonReview && <AnonReview actions={actions} infoTexts={infoTexts} />}
+
+      {hasRating && (
+        <AggregateRatingsCard
+          showInfos={!showAnonReview}
+          actions={actions}
+          infoTexts={infoTexts}
+          aggregateRatings={aggregateRatings}
         />
       )}
-      {hasRating && <p>TODO: AggregateSection</p>}
+
       {reviews.map((r) => (
         <pre key={`${JSON.stringify(r.review)}`}>
           {JSON.stringify({ review: r.review }, undefined, '\t')}

src/orgs/components/org-reviews/info-texts.tsx

@@ -0,0 +1,16 @@
+import { Text } from '~/shared/components/text';
+
+export const InfoTexts = () => {
+  return (
+    <>
+      {INFO_TEXTS.map((text, i) => (
+        <Text key={i} text={text} />
+      ))}
+    </>
+  );
+};
+
+const INFO_TEXTS = [
+  'Only devs associated with the org can review it.',
+  "If you know anyone who works or worked here here, please invite them to review this organization. It's easy: Share the link above with them!",
+];

src/orgs/core/constants.ts

@@ -34,3 +34,14 @@ export const ORG_REVIEW_TIMEZONES = [
 export const ORG_TEST_IDS = {
   ORG_CARD: 'org-card',
 } as const;
+
+export const ORG_RATING_LABELS = {
+  benefits: 'Benefits' as const,
+  careerGrowth: 'Career Growth' as const,
+  diversityInclusion: 'Diversity & Inclusion' as const,
+  management: 'Management' as const,
+  product: 'Product' as const,
+  compensation: 'Compensation' as const,
+  onboarding: 'Onboarding' as const,
+  workLifeBalance: 'Work Life Balance' as const,
+};