diff --git a/src/orgs/components/org-reviews/aggregate-ratings-card.tsx b/src/orgs/components/org-reviews/aggregate-ratings-card.tsx new file mode 100644 index 000000000..8e02a6ece --- /dev/null +++ b/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 ( + + + + {showInfos && <>{infoTexts}} + +
+ {ratings.map(([label, rating]) => ( +
+

{rating.toFixed(1)}

+ {/* */} +

+ {ORG_RATING_LABELS[label as keyof typeof ORG_RATING_LABELS]} +

+
+ ))} +
+ + {showInfos && <>{actions}} +
+ ); +}; + +const HEADING_TEXT = 'Aggregate Ratings'; diff --git a/src/orgs/components/org-reviews/anon-review.tsx b/src/orgs/components/org-reviews/anon-review.tsx new file mode 100644 index 000000000..11c37745b --- /dev/null +++ b/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 ( + + + + {infoTexts} + + {actions} + + ); +}; + +const HEADING_TEXT = 'Leave a Review'; diff --git a/src/orgs/components/org-reviews/index.tsx b/src/orgs/components/org-reviews/index.tsx index b92488512..dd5158ed4 100644 --- a/src/orgs/components/org-reviews/index.tsx +++ b/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 = ( +
+ + +
+ ); + + const infoTexts = ; + return (
- {noReviews && ( - } - shareButton={} + {showAnonReview && } + + {hasRating && ( + )} - {hasRating &&

TODO: AggregateSection

} + {reviews.map((r) => (
           {JSON.stringify({ review: r.review }, undefined, '\t')}
diff --git a/src/orgs/components/org-reviews/info-texts.tsx b/src/orgs/components/org-reviews/info-texts.tsx
new file mode 100644
index 000000000..aa919ff4a
--- /dev/null
+++ b/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) => (
+        
+      ))}
+    
+  );
+};
+
+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!",
+];
diff --git a/src/orgs/components/org-reviews/leave-review.tsx b/src/orgs/components/org-reviews/leave-review.tsx
deleted file mode 100644
index 8f000fea8..000000000
--- a/src/orgs/components/org-reviews/leave-review.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DetailsPanelCardWrapper } from '~/shared/components/details-panel/card-wrapper';
-import { Heading } from '~/shared/components/heading';
-import { Text } from '~/shared/components/text';
-
-interface Props {
-  reviewButton: React.ReactNode;
-  shareButton: React.ReactNode;
-}
-
-export const LeaveReview = ({ reviewButton, shareButton }: Props) => {
-  return (
-    
-      
-
-      {BODY_TEXTS.map((text, i) => (
-        
-      ))}
-
-      
- {reviewButton} - {shareButton} -
-
- ); -}; - -const HEADING_TEXT = 'Leave a Review'; - -const BODY_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!', -]; diff --git a/src/orgs/core/constants.ts b/src/orgs/core/constants.ts index 8a83ed645..fbd40708b 100644 --- a/src/orgs/core/constants.ts +++ b/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, +};