feat: display membership overlay on posts route for PRO posts (#1498)

* feat: add go pro overlay to posts * refactor: move posts query to function * refactor: swap display logic
skillrecordings · Dec 19, 2024 · d3f0c21 · d3f0c21
1 parent 04d26bc
commit d3f0c21
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 84 deletions.
diff --git a/src/components/pages/lessons/overlay/confirm-membership.tsx b/src/components/pages/lessons/overlay/confirm-membership.tsx
@@ -16,7 +16,9 @@ type HeaderProps = {
 type ConfirmMembershipProps = {
   sessionId: string
   viewLesson: Function
-  lesson: LessonResource
+  lesson: {
+    slug: string
+  }
 }
 
 const Illustration = () => (
@@ -101,7 +103,9 @@ const ExistingMemberConfirmation: React.FC<
   React.PropsWithChildren<{
     session: any
     viewLesson: Function
-    lesson: LessonResource
+    lesson: {
+      slug: string
+    }
   }>
 > = ({session, viewLesson, lesson}) => {
   return (
@@ -142,10 +146,8 @@ const NewMemberConfirmation: React.FC<
   React.PropsWithChildren<{
     session: any
     currentState: any
-    viewLesson: Function
-    lesson: LessonResource
   }>
-> = ({session, currentState, viewLesson, lesson}) => {
+> = ({session, currentState}) => {
   return (
     <Header
       heading={<>Thank you so much for joining egghead! </>}
@@ -269,12 +271,7 @@ const ConfirmMembership: React.FC<
           viewLesson={cleanUrlAndViewLesson}
         />
       ) : (
-        <NewMemberConfirmation
-          lesson={lesson}
-          session={session}
-          currentState={currentState}
-          viewLesson={cleanUrlAndViewLesson}
-        />
+        <NewMemberConfirmation session={session} currentState={currentState} />
       )}
     </div>
   ) : (

diff --git a/src/components/pages/lessons/overlay/go-pro-cta-overlay.tsx b/src/components/pages/lessons/overlay/go-pro-cta-overlay.tsx
@@ -22,9 +22,15 @@ import ConfirmMembership from './confirm-membership'
 import {useRouter} from 'next/router'
 import noop from '@/utils/noop'
 import OverlayWrapper from '@/components/pages/lessons/overlay/wrapper'
+import {usePathname} from 'next/navigation'
 
 type JoinCTAProps = {
-  lesson: LessonResource
+  lesson: {
+    slug: string
+    collection?: {
+      title: string
+    }
+  }
   viewLesson?: Function
 }
 
@@ -35,9 +41,8 @@ type FormikValues = {
 const GoProCtaOverlay: FunctionComponent<
   React.PropsWithChildren<JoinCTAProps>
 > = ({lesson}) => {
-  // useRouter's `asPath` can include query params, so using
-  // `window.location.pathname` instead.
-  const cleanPath = window?.location?.pathname
+  const pathname = usePathname()
+  const {collection} = lesson
 
   const {viewer, authToken} = useViewer()
   const {state, send, priceId, quantity, availableCoupons, currentPlan} =
@@ -165,7 +170,7 @@ const GoProCtaOverlay: FunctionComponent<
           authToken,
           quantity,
           coupon: state.context.couponToApply?.couponCode,
-          successPath: cleanPath,
+          successPath: pathname ?? undefined,
         })
 
         leaveSpinningForRedirect = true
@@ -186,8 +191,8 @@ const GoProCtaOverlay: FunctionComponent<
   }
 
   switch (true) {
-    case !isEmpty(lesson.collection):
-      primaryCtaText = `Level up with ${lesson.collection.title} right now.`
+    case !isEmpty(collection):
+      primaryCtaText = `Level up with ${collection?.title} right now.`
       break
     default:
       primaryCtaText = 'Ready to take your career to the next level?'