From 838af6262b1031efd518b18db0ca470ee464bbd0 Mon Sep 17 00:00:00 2001
From: Jacob Lynch <10119024+JacobLynch@users.noreply.github.com>
Date: Fri, 17 Jan 2025 18:06:07 -0700
Subject: [PATCH] Fix <TeamMembers> side modals (#10391)

Fix the exception in each product page where the meet the team section has team members with bios that should click open in the side modal.
---
 src/components/Product/AbTesting/index.tsx        | 10 ++++++++--
 src/components/Product/DataWarehouse/index.tsx    | 10 ++++++++--
 src/components/Product/FeatureFlags/index.tsx     | 10 ++++++++--
 src/components/Product/Pipelines/index.js         |  7 ++++++-
 src/components/Product/ProductAnalytics/index.tsx | 10 ++++++++--
 src/components/Product/SessionReplay/index.tsx    | 10 ++++++++--
 src/components/Product/Surveys/index.tsx          | 10 ++++++++--
 src/components/Product/TeamMembers.tsx            |  4 ++--
 8 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/Product/AbTesting/index.tsx b/src/components/Product/AbTesting/index.tsx
index 403da31aff11..b30eeb6c1c41 100644
--- a/src/components/Product/AbTesting/index.tsx
+++ b/src/components/Product/AbTesting/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import { IconBrackets, IconGraph, IconFlask, IconToggle, IconPeople, IconRewindPlay } from '@posthog/icons'
@@ -34,6 +34,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'experiments',
@@ -301,6 +303,7 @@ export const ProductAbTesting = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
 
     return (
         <>
@@ -309,6 +312,9 @@ export const ProductAbTesting = () => {
                 description="Run statistically-significant multivariate tests and robust targeting & exclusion rules."
                 image={`/images/og/ab-testing.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="purple"
@@ -550,7 +556,7 @@ export const ProductAbTesting = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">
diff --git a/src/components/Product/DataWarehouse/index.tsx b/src/components/Product/DataWarehouse/index.tsx
index 42e7ec90e1b2..221c094614f2 100644
--- a/src/components/Product/DataWarehouse/index.tsx
+++ b/src/components/Product/DataWarehouse/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import { IconDatabase, IconGraph, IconHogQL, IconClock, IconToggle, IconDecisionTree } from '@posthog/icons'
@@ -26,6 +26,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import Profile from '../../Team/Profile'
+import SideModal from '../../Modal/SideModal'
 
 const product = {
     slug: 'data-warehouse',
@@ -205,6 +207,7 @@ export const ProductDataWarehouse = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
@@ -212,6 +215,9 @@ export const ProductDataWarehouse = () => {
                 description="Unify and query data from any source and analyze it alongside your product data."
                 image={`/images/og/data-warehouse.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="lilac"
@@ -372,7 +378,7 @@ export const ProductDataWarehouse = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building the {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </div>
             </section>
 
diff --git a/src/components/Product/FeatureFlags/index.tsx b/src/components/Product/FeatureFlags/index.tsx
index 590fabf407c0..4e975d22e20d 100644
--- a/src/components/Product/FeatureFlags/index.tsx
+++ b/src/components/Product/FeatureFlags/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -45,6 +45,8 @@ import Install from '../Install'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'feature-flags',
@@ -404,6 +406,7 @@ export const ProductFeatureFlags = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
@@ -411,6 +414,9 @@ export const ProductFeatureFlags = () => {
                 description="Safely roll out features to specific users or groups."
                 image={`/images/og/feature-flags.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="seagreen"
@@ -634,7 +640,7 @@ export const ProductFeatureFlags = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">
diff --git a/src/components/Product/Pipelines/index.js b/src/components/Product/Pipelines/index.js
index 0fdb0454685f..2cd7f8ea980c 100644
--- a/src/components/Product/Pipelines/index.js
+++ b/src/components/Product/Pipelines/index.js
@@ -62,6 +62,7 @@ import ReactFlow, {
     Panel,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
+import Profile from '../../Team/Profile'
 
 const team = 'CDP'
 const teamSlug = '/teams/cdp'
@@ -469,6 +470,7 @@ function PipelinesPage({ location }) {
     const [selectedDestination, setSelectedDestination] = React.useState(null)
     const [modalOpen, setModalOpen] = React.useState(false)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = React.useState(false)
 
     const product = {
         slug: 'cdp',
@@ -484,6 +486,9 @@ function PipelinesPage({ location }) {
                 description="Get all your data into PostHog with 60+ sources & destinations"
                 image={`images/og/cdp.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <SideModal
                 title={
                     selectedDestination ? (
@@ -729,7 +734,7 @@ function PipelinesPage({ location }) {
                     PostHog works in small teams. <Link to={teamSlug}>Here's the team</Link> responsible for building
                     our customer data platform.
                 </p>
-                <TeamMembers teamName={team} />
+                <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
             </section>
 
             <section
diff --git a/src/components/Product/ProductAnalytics/index.tsx b/src/components/Product/ProductAnalytics/index.tsx
index d312999a54e3..7ce9c94def55 100644
--- a/src/components/Product/ProductAnalytics/index.tsx
+++ b/src/components/Product/ProductAnalytics/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -45,6 +45,8 @@ import MobileSlides from 'components/Products/MobileSlides'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'product-analytics',
@@ -761,6 +763,7 @@ export const ProductProductAnalytics = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
@@ -768,6 +771,9 @@ export const ProductProductAnalytics = () => {
                 description="PostHog is the only product analytics platform built to natively work with Session Replay, Feature Flags, Experiments, and Surveys."
                 image={`/images/og/product-analytics.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="blue"
@@ -996,7 +1002,7 @@ export const ProductProductAnalytics = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">
diff --git a/src/components/Product/SessionReplay/index.tsx b/src/components/Product/SessionReplay/index.tsx
index bd357f80aca2..9c2c8970477e 100644
--- a/src/components/Product/SessionReplay/index.tsx
+++ b/src/components/Product/SessionReplay/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -42,6 +42,8 @@ import Install from '../Install'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'session-replay',
@@ -390,6 +392,7 @@ export const ProductSessionReplay = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
@@ -397,6 +400,9 @@ export const ProductSessionReplay = () => {
                 description="Session Replay helps you diagnose issues and understand user behavior in your product, mobile app, or website."
                 image={`/images/og/session-replay.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="yellow"
@@ -613,7 +619,7 @@ export const ProductSessionReplay = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">
diff --git a/src/components/Product/Surveys/index.tsx b/src/components/Product/Surveys/index.tsx
index c2c22cf628d1..aff8211df1f4 100644
--- a/src/components/Product/Surveys/index.tsx
+++ b/src/components/Product/Surveys/index.tsx
@@ -1,5 +1,5 @@
 import CloudinaryImage from 'components/CloudinaryImage'
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'components/Link'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
@@ -38,6 +38,8 @@ import { FAQ } from 'components/Products/FAQ'
 import { SEO } from 'components/seo'
 import { useLayoutData } from 'components/Layout/hooks'
 import Plans from 'components/Pricing/Plans'
+import SideModal from '../../Modal/SideModal'
+import Profile from '../../Team/Profile'
 
 const product = {
     slug: 'surveys',
@@ -384,6 +386,7 @@ export const ProductSurveys = () => {
         }
     `)
     const { fullWidthContent } = useLayoutData()
+    const [activeProfile, setActiveProfile] = useState(false)
     return (
         <>
             <SEO
@@ -391,6 +394,9 @@ export const ProductSurveys = () => {
                 description="Ask anything with no-code surveys – or use the API for complete control."
                 image={`/images/og/surveys.jpg`}
             />
+            <SideModal open={!!activeProfile} setOpen={setActiveProfile}>
+                {activeProfile && <Profile profile={{ ...activeProfile }} />}
+            </SideModal>
             <div className={`${fullWidthContent ? 'max-w-full px-8' : 'max-w-7xl mx-auto'} px-5 py-10 md:pt-20 pb-0`}>
                 <Hero
                     color="salmon"
@@ -595,7 +601,7 @@ export const ProductSurveys = () => {
                         PostHog works in small teams. The <Link to={teamSlug}>{team}</Link> team is responsible for
                         building {product.lowercase}.
                     </p>
-                    <TeamMembers teamName={team} />
+                    <TeamMembers teamName={team} setActiveProfile={setActiveProfile} />
                 </section>
 
                 <section id="roadmap" className="mb-20 px-5">
diff --git a/src/components/Product/TeamMembers.tsx b/src/components/Product/TeamMembers.tsx
index dc82f1d2da88..80bf0d658154 100644
--- a/src/components/Product/TeamMembers.tsx
+++ b/src/components/Product/TeamMembers.tsx
@@ -2,7 +2,7 @@ import { TeamMember, teamQuery } from 'components/People'
 import { useStaticQuery } from 'gatsby'
 import React from 'react'
 
-export default function TeamMembers({ teamName }) {
+export default function TeamMembers({ teamName, setActiveProfile }) {
     const { team } = useStaticQuery(teamQuery)
 
     const teamMembers = team.teamMembers.filter((teamMember) =>
@@ -22,7 +22,7 @@ export default function TeamMembers({ teamName }) {
             )}
             <ul className="list-none m-0 p-0 grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-20">
                 {teamMembers.map((teamMember, index) => {
-                    return <TeamMember key={index} {...teamMember} />
+                    return <TeamMember key={index} {...teamMember} setActiveProfile={setActiveProfile} />
                 })}
             </ul>
         </>