From 85f28919501f7d86f102f52aa94df738ec4ee990 Mon Sep 17 00:00:00 2001
From: Aron Demeter <66035744+dem4ron@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:06:23 +0200
Subject: [PATCH] Add Donation modal after testimonial step (#2972)

* Add donation modal

* Make further styling on Donation step modal, make it accessible, wider, lazyload donation form

* Replace button classes, add inline drop-shadow

* Fix Graphical icon types

* Add links to student mentoring session

* Wire in donatins links

* Refreshing tests - WIP

* Minor changes

* Fix ruby test

* Fix other ruby test

* Populate captcha information

* Remove unused code

* Fix tests

* Add correct links and boolean (#6202)

* Reorganise MentoringSession's donation data (#6206)

* Reorganise MentoringSession's donation data

* Update mentoring_session_test

* Pass down camelized data

* Pass donation data down to sidepanel modal initiator

* Improve layout and copy

* Clean up DonationStep.tsx

* Add logic around when to show modal

* Prevent the modal from closing when the overlay is clicked

* Further donation modal tweaks (#6214)

* Change button text, remove static booleans

* Change default values

* Update celebration text

* Update celebration step

* Update urls

* Use confirmParamsReturnUrl everywhere

* Add successfulDonationStep

* Update xstate

* Change width of SuccessfulDonationStep's container modal

* Change nyan cat height

* Change continue text

* Apply suggestions from code review

* Update test

* Remove recaptcha sitekey

* Change text in test

* Fix more tests

* Update app/models/user.rb

Co-authored-by: Erik Schierboom <erik_schierboom@hotmail.com>

* Update initialData types, Remove unnecessary else

* Remove wizard-hat

* Remove unused filter, undo negating boolean

* Update user_test

* Update app/helpers/react_components/student/mentoring_session.rb

Co-authored-by: Erik Schierboom <erik_schierboom@hotmail.com>

* Update .github/labels.yml

* Update CODE_OF_CONDUCT.md

* Sync yarn.lock and package.json

* Update link name, simplify link types, unify same types

---------

Co-authored-by: Erik Schierboom <erik_schierboom@hotmail.com>
Co-authored-by: Jeremy Walker <jez.walker@gmail.com>
---
 .../finish-student-mentor-discussion.css      |  21 +++-
 .../react_components/donations/footer_form.rb |   2 +-
 .../donations/form_with_modal.rb              |   2 +-
 .../student/mentoring_session.rb              |  59 +++++++---
 app/helpers/view_components/site_footer.rb    |   2 +-
 .../components/donations/FooterForm.tsx       |   5 +-
 app/javascript/components/donations/Form.tsx  |  18 ++-
 .../components/donations/FormWithModal.tsx    |  14 +--
 .../components/donations/StripeForm.tsx       |   6 +-
 .../donations/footer-form/FormModal.tsx       |   6 +-
 .../mentoring/discussion/FinishButton.tsx     |  13 +--
 .../student/FinishMentorDiscussionModal.tsx   |  93 ++++++++++-----
 .../AddTestimonialStep.tsx                    |   6 -
 .../CelebrationStep.tsx                       |  21 ++--
 .../DonationStep.tsx                          |  96 ++++++++++++++++
 .../RateMentorStep.tsx                        |   6 +-
 .../SuccessfulDonationStep.tsx                |  52 +++++++++
 .../finish-mentor-discussion-modal/index.ts   |   9 ++
 .../components/student/MentoringSession.tsx   |  31 ++++-
 app/javascript/components/student/Nudge.tsx   |   2 +-
 .../mentoring-session/DiscussionActions.tsx   |  25 ++--
 .../mentoring-session/DiscussionInfo.tsx      |  16 ++-
 .../mentoring-session/FinishButton.tsx        |  15 ++-
 .../mentoring-session/MentoringRequest.tsx    |  12 +-
 .../MentoringRequestForm.tsx                  |   8 +-
 app/javascript/components/types.ts            |  26 +++++
 app/javascript/packs/internal.tsx             |   5 +-
 app/models/user.rb                            |   5 +
 package.json                                  |   4 +-
 .../student/mentoring_session_test.rb         | 107 +++++++++++++++++-
 test/models/user_test.rb                      |  15 +++
 .../finish_mentor_discussion/happy_test.rb    |   6 +-
 .../satisfied_test.rb                         |   2 +-
 .../mentor_finished_discussion_test.rb        |   4 +-
 yarn.lock                                     |  38 +++----
 35 files changed, 575 insertions(+), 177 deletions(-)
 create mode 100644 app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx
 create mode 100644 app/javascript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx
 create mode 100644 app/javascript/components/modals/student/finish-mentor-discussion-modal/index.ts

diff --git a/app/css/modals/finish-student-mentor-discussion.css b/app/css/modals/finish-student-mentor-discussion.css
index d150b56252..36699d43ed 100644
--- a/app/css/modals/finish-student-mentor-discussion.css
+++ b/app/css/modals/finish-student-mentor-discussion.css
@@ -209,17 +209,28 @@
             @apply mt-24;
         }
     }
+    .successful-donation-step {
+        .badge-container {
+            @apply flex items-center rounded-5 shadow-xsZ1 py-6 px-24 mb-32 border-1 border-lightGold;
+            background: var(--backgroundColorCAlert);
+        }
+        .c-badge-medallion {
+            height: 40px;
+            width: 40px;
+            @apply mr-8;
+        }
+    }
     & section.celebrate-step {
-        @apply p-64;
+        @apply p-64 rounded-8;
         margin: -40px -48px;
 
         @apply flex flex-col items-center justify-start;
 
         &.neon-cat {
-            background: rgb(15, 68, 113);
+            background: rgb(17, 49, 97);
 
             & .gif {
-                height: 160px;
+                height: 80px;
                 @apply mb-24;
             }
             & h2 {
@@ -227,9 +238,9 @@
             }
             & p {
                 @apply text-20 leading-150 text-white text-center;
-                @apply mb-48;
+                @apply mb-20;
                 & strong {
-                    @apply block mb-8;
+                    @apply block mb-4;
                     @apply font-semibold;
                 }
             }
diff --git a/app/helpers/react_components/donations/footer_form.rb b/app/helpers/react_components/donations/footer_form.rb
index 0c79267b3b..e7f8fcea30 100644
--- a/app/helpers/react_components/donations/footer_form.rb
+++ b/app/helpers/react_components/donations/footer_form.rb
@@ -17,7 +17,7 @@ def to_s
             recaptcha_site_key: ENV.fetch('RECAPTCHA_SITE_KEY', Exercism.secrets.recaptcha_site_key),
             links: {
               settings: Exercism::Routes.donations_settings_url,
-              donate: Exercism::Routes.donate_url
+              success: Exercism::Routes.donate_url
             }
           }
         )
diff --git a/app/helpers/react_components/donations/form_with_modal.rb b/app/helpers/react_components/donations/form_with_modal.rb
index 86ca938d68..68b6147730 100644
--- a/app/helpers/react_components/donations/form_with_modal.rb
+++ b/app/helpers/react_components/donations/form_with_modal.rb
@@ -16,7 +16,7 @@ def to_s
             recaptcha_site_key: ENV.fetch('RECAPTCHA_SITE_KEY', Exercism.secrets.recaptcha_site_key),
             links: {
               settings: Exercism::Routes.donations_settings_url,
-              donate: Exercism::Routes.donate_url
+              success: Exercism::Routes.donate_url
             }
           }
         )
diff --git a/app/helpers/react_components/student/mentoring_session.rb b/app/helpers/react_components/student/mentoring_session.rb
index c8b199d347..2022d4c680 100644
--- a/app/helpers/react_components/student/mentoring_session.rb
+++ b/app/helpers/react_components/student/mentoring_session.rb
@@ -6,26 +6,41 @@ class MentoringSession < ReactComponent
       def to_s
         super(
           "student-mentoring-session",
-          {
-            user_handle: student.handle,
-            request: SerializeMentorSessionRequest.(request, student),
-            discussion: discussion ? SerializeMentorDiscussionForStudent.(discussion) : nil,
-            track: SerializeMentorSessionTrack.(track),
-            exercise: SerializeMentorSessionExercise.(exercise),
-            iterations:,
-            mentor: mentor_data,
-            track_objectives: user_track&.objectives.to_s,
-            out_of_date: solution.out_of_date?,
-            videos:,
-            links: {
-              exercise: Exercism::Routes.track_exercise_mentor_discussions_url(track, exercise),
-              create_mentor_request: Exercism::Routes.api_solution_mentor_requests_path(solution.uuid),
-              learn_more_about_private_mentoring: Exercism::Routes.doc_path(:using, "feedback/private"),
-              private_mentoring: solution.external_mentoring_request_url,
-              mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored")
+          to_h
+        )
+      end
+
+      def to_h
+        {
+          user_handle: student.handle,
+          request: SerializeMentorSessionRequest.(request, student),
+          discussion: discussion ? SerializeMentorDiscussionForStudent.(discussion) : nil,
+          track: SerializeMentorSessionTrack.(track),
+          exercise: SerializeMentorSessionExercise.(exercise),
+          iterations:,
+          mentor: mentor_data,
+          track_objectives: user_track&.objectives.to_s,
+          out_of_date: solution.out_of_date?,
+          videos:,
+          donation: {
+            show_donation_modal:,
+            request: {
+              endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
+              options: {
+                initial_data: AssembleCurrentSubscription.(current_user)
+              }
             }
+          },
+          links: {
+            exercise: Exercism::Routes.track_exercise_mentor_discussions_url(track, exercise),
+            create_mentor_request: Exercism::Routes.api_solution_mentor_requests_path(solution.uuid),
+            learn_more_about_private_mentoring: Exercism::Routes.doc_path(:using, "feedback/private"),
+            private_mentoring: solution.external_mentoring_request_url,
+            mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored"),
+            donations_settings: Exercism::Routes.donations_settings_url,
+            donate: Exercism::Routes.donate_url
           }
-        )
+        }
       end
 
       private
@@ -95,6 +110,14 @@ def iterations
 
         SerializeIterations.(solution.iterations, comment_counts:)
       end
+
+      def show_donation_modal
+        return false if current_user.insider?
+        return false if current_user.donated_in_last_35_days?
+
+        num_testimonials = current_user.provided_testimonials.count
+        (num_testimonials % 3).zero?
+      end
     end
   end
 end
diff --git a/app/helpers/view_components/site_footer.rb b/app/helpers/view_components/site_footer.rb
index 196fa3856c..47931c387d 100644
--- a/app/helpers/view_components/site_footer.rb
+++ b/app/helpers/view_components/site_footer.rb
@@ -19,7 +19,7 @@ def cache_key
       parts << ::Track.active.count
       parts << user_part
       parts << stripe_version
-      parts << "v1"
+      parts << "v2"
 
       parts.join(':')
     end
diff --git a/app/javascript/components/donations/FooterForm.tsx b/app/javascript/components/donations/FooterForm.tsx
index b5006d70b9..7f677978cd 100644
--- a/app/javascript/components/donations/FooterForm.tsx
+++ b/app/javascript/components/donations/FooterForm.tsx
@@ -5,15 +5,14 @@ import { CustomAmountInput } from './donation-form/CustomAmountInput'
 import { FormModal } from './footer-form/FormModal'
 import { GraphicalIcon } from '../common'
 import { Request } from '../../hooks/request-query'
-
-type Links = Record<'settings' | 'donate', string>
+import { StripeFormLinks } from './Form'
 
 const PRESET_AMOUNTS = [currency(16), currency(32), currency(64), currency(128)]
 const DEFAULT_AMOUNT = currency(16)
 
 export type FooterFormProps = {
   request: Request
-  links: Links
+  links: StripeFormLinks
   userSignedIn: boolean
   captchaRequired: boolean
   recaptchaSiteKey: string
diff --git a/app/javascript/components/donations/Form.tsx b/app/javascript/components/donations/Form.tsx
index 16ae999f00..16a26ca3ff 100644
--- a/app/javascript/components/donations/Form.tsx
+++ b/app/javascript/components/donations/Form.tsx
@@ -10,14 +10,18 @@ import currency from 'currency.js'
 import { Request, useRequestQuery } from '../../hooks/request-query'
 import { FetchingBoundary } from '../FetchingBoundary'
 import { useQueryCache } from 'react-query'
-import { FormWithModalLinks } from './FormWithModal'
+
+export type StripeFormLinks = {
+  success: string
+  settings: string
+}
 
 const TabsContext = createContext<TabContext>({
   current: 'subscription',
   switchToTab: () => null,
 })
 
-type FormAmount = {
+export type FormAmount = {
   subscription: currency
   payment: currency
 }
@@ -38,10 +42,10 @@ type Props = {
   onSuccess: (type: PaymentIntentType, amount: currency) => void
   userSignedIn: boolean
   captchaRequired: boolean
-  recaptchaSiteKey: string
+  recaptchaSiteKey?: string
   onProcessing?: () => void
   onSettled?: () => void
-  links: FormWithModalLinks
+  links: StripeFormLinks
   id?: string
 }
 
@@ -185,7 +189,7 @@ export const Form = ({
               }
             >
               <StripeForm
-                confirmParamsReturnUrl={links.donate}
+                confirmParamsReturnUrl={links.success}
                 paymentIntentType={transactionType}
                 userSignedIn={userSignedIn}
                 captchaRequired={captchaRequired}
@@ -215,7 +219,7 @@ export const Form = ({
               }
             >
               <StripeForm
-                confirmParamsReturnUrl={links.donate}
+                confirmParamsReturnUrl={links.success}
                 paymentIntentType={transactionType}
                 userSignedIn={userSignedIn}
                 captchaRequired={captchaRequired}
@@ -232,3 +236,5 @@ export const Form = ({
     </TabsContext.Provider>
   )
 }
+
+export default Form
diff --git a/app/javascript/components/donations/FormWithModal.tsx b/app/javascript/components/donations/FormWithModal.tsx
index 83167feaf6..46ffcde4d4 100644
--- a/app/javascript/components/donations/FormWithModal.tsx
+++ b/app/javascript/components/donations/FormWithModal.tsx
@@ -1,21 +1,17 @@
 import React, { useState, useCallback } from 'react'
 import currency from 'currency.js'
 import { Request } from '@/hooks/request-query'
-import { Form } from './Form'
+import { Form, FormAmount, StripeFormLinks } from './Form'
 import SuccessModal from './SuccessModal'
 import { PaymentIntentType } from './stripe-form/useStripeForm'
 
-export type FormWithModalLinks = {
-  donate: string
-  settings: string
-}
-
 type FormWithModalProps = {
   request: Request
   userSignedIn: boolean
-  links: FormWithModalLinks
+  links: StripeFormLinks
   captchaRequired: boolean
   recaptchaSiteKey: string
+  defaultAmount?: Partial<FormAmount>
 }
 
 export default function FormWithModal({
@@ -24,6 +20,7 @@ export default function FormWithModal({
   links,
   captchaRequired,
   recaptchaSiteKey,
+  defaultAmount,
 }: FormWithModalProps): JSX.Element {
   const [paymentMade, setPaymentMade] = useState(false)
 
@@ -49,11 +46,12 @@ export default function FormWithModal({
         links={links}
         recaptchaSiteKey={recaptchaSiteKey}
         captchaRequired={captchaRequired}
+        defaultAmount={defaultAmount}
       />
       <SuccessModal
         open={paymentMade}
         amount={paymentAmount}
-        closeLink={links.donate}
+        closeLink={links.success}
       />
     </>
   )
diff --git a/app/javascript/components/donations/StripeForm.tsx b/app/javascript/components/donations/StripeForm.tsx
index e31f1ab9ce..1f9c29cb7c 100644
--- a/app/javascript/components/donations/StripeForm.tsx
+++ b/app/javascript/components/donations/StripeForm.tsx
@@ -13,7 +13,7 @@ export type StripeFormProps = {
   onSettled?: () => void
   userSignedIn: boolean
   captchaRequired: boolean
-  recaptchaSiteKey: string
+  recaptchaSiteKey?: string
   amount: currency
   submitButtonDisabled?: boolean
   confirmParamsReturnUrl: string
@@ -75,7 +75,7 @@ export function StripeForm({
           />
         </div>
       ) : null}
-      {captchaRequired ? (
+      {captchaRequired && recaptchaSiteKey ? (
         <div className="flex items-center mb-16">
           <ReCAPTCHA
             sitekey={recaptchaSiteKey}
@@ -101,9 +101,9 @@ export function StripeForm({
       ) : null}
 
       <PaymentElement
-        options={paymentElementOptions}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
+        options={paymentElementOptions}
         onChange={handlePaymentElementChange}
       />
       <button
diff --git a/app/javascript/components/donations/footer-form/FormModal.tsx b/app/javascript/components/donations/footer-form/FormModal.tsx
index 976d04c6a0..476b748df3 100644
--- a/app/javascript/components/donations/footer-form/FormModal.tsx
+++ b/app/javascript/components/donations/footer-form/FormModal.tsx
@@ -2,17 +2,15 @@ import React, { useState, useCallback } from 'react'
 import { Modal, ModalProps } from '../../modals/Modal'
 import currency from 'currency.js'
 import SuccessModal from '../SuccessModal'
-import { Form } from '../Form'
+import { Form, StripeFormLinks } from '../Form'
 import { Request } from '../../../hooks/request-query'
 
 type ModalStep = 'donating' | 'processingDonation' | 'donationSuccess'
 
-type Links = Record<'settings' | 'donate', string>
-
 type Props = {
   amount: currency
   request: Request
-  links: Links
+  links: StripeFormLinks
   userSignedIn: boolean
   captchaRequired: boolean
   recaptchaSiteKey: string
diff --git a/app/javascript/components/mentoring/discussion/FinishButton.tsx b/app/javascript/components/mentoring/discussion/FinishButton.tsx
index 2ca6724930..a64d2f1531 100644
--- a/app/javascript/components/mentoring/discussion/FinishButton.tsx
+++ b/app/javascript/components/mentoring/discussion/FinishButton.tsx
@@ -1,11 +1,10 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import { FinishMentorDiscussionModal } from '../../modals/mentor/FinishMentorDiscussionModal'
-import { ModalProps } from '../../modals/Modal'
-import { MentorDiscussion as Discussion } from '../../types'
-import Mousetrap from 'mousetrap'
+import React, { useState, useCallback } from 'react'
 import { useMutation } from 'react-query'
-import { sendRequest } from '../../../utils/send-request'
-import { typecheck } from '../../../utils/typecheck'
+import { sendRequest } from '@/utils/send-request'
+import { typecheck } from '@/utils/typecheck'
+import { FinishMentorDiscussionModal } from '@/components/modals/mentor/FinishMentorDiscussionModal'
+import { ModalProps } from '@/components/modals/Modal'
+import type { MentorDiscussion as Discussion } from '@/components/types'
 
 export const FinishButton = ({
   endpoint,
diff --git a/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx b/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx
index 985a539fbf..6045625a66 100644
--- a/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx
+++ b/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx
@@ -1,20 +1,12 @@
 import React, { useState } from 'react'
-import { MentorDiscussion } from '../../types'
-import { Modal, ModalProps } from '../Modal'
-import { RateMentorStep } from './finish-mentor-discussion-modal/RateMentorStep'
-import { AddTestimonialStep } from './finish-mentor-discussion-modal/AddTestimonialStep'
-import { CelebrationStep } from './finish-mentor-discussion-modal/CelebrationStep'
-import { UnhappyStep } from './finish-mentor-discussion-modal/UnhappyStep'
-import { RequeuedStep } from './finish-mentor-discussion-modal/RequeuedStep'
-import { SatisfiedStep } from './finish-mentor-discussion-modal/SatisfiedStep'
-import { ReportStep } from './finish-mentor-discussion-modal/ReportStep'
 import { useMachine } from '@xstate/react'
-import { Machine } from 'xstate'
-import { redirectTo } from '../../../utils/redirect-to'
-
-export type Links = {
-  exercise: string
-}
+import { createMachine } from 'xstate'
+import { redirectTo } from '@/utils/redirect-to'
+import { MentorDiscussion, MentoringSessionDonation } from '@/components/types'
+import { Modal, ModalProps } from '../Modal'
+import * as Step from './finish-mentor-discussion-modal'
+import { DiscussionActionsLinks } from '@/components/student/mentoring-session/DiscussionActions'
+import currency from 'currency.js'
 
 export type ReportReason = 'coc' | 'incorrect' | 'other'
 
@@ -24,7 +16,7 @@ export type MentorReport = {
   reason: ReportReason
 }
 
-const modalStepMachine = Machine({
+const modalStepMachine = createMachine({
   id: 'modalStep',
   initial: 'rateMentor',
   states: {
@@ -41,29 +33,37 @@ const modalStepMachine = Machine({
     addTestimonial: {
       on: { SUBMIT: 'celebration', BACK: 'rateMentor' },
     },
-    celebration: {},
+    celebration: {
+      on: { SUCCESSFUL_DONATION: 'successfulDonation' },
+    },
     requeued: {},
     report: {
       on: { SUBMIT: 'unhappy', BACK: 'rateMentor' },
     },
     unhappy: {},
+    successfulDonation: {},
   },
 })
 
 const Inner = ({
   discussion,
   links,
+  donation,
+  setMaxWidth,
 }: {
   discussion: MentorDiscussion
-  links: Links
+  links: DiscussionActionsLinks
+  donation: MentoringSessionDonation
+  setMaxWidth: React.Dispatch<React.SetStateAction<string>>
 }): JSX.Element => {
   const [currentStep, send] = useMachine(modalStepMachine)
   const [report, setReport] = useState<MentorReport | null>(null)
+  const [donatedAmount, setDonatedAmount] = useState<currency>(currency(0))
 
   switch (currentStep.value) {
     case 'rateMentor':
       return (
-        <RateMentorStep
+        <Step.RateMentorStep
           discussion={discussion}
           onHappy={() => send('HAPPY')}
           onSatisfied={() => send('SATISFIED')}
@@ -72,7 +72,7 @@ const Inner = ({
       )
     case 'addTestimonial':
       return (
-        <AddTestimonialStep
+        <Step.AddTestimonialStep
           onSubmit={() => send('SUBMIT')}
           onSkip={() => redirectTo(links.exercise)}
           onBack={() => send('BACK')}
@@ -80,15 +80,28 @@ const Inner = ({
         />
       )
     case 'celebration':
+      if (donation.showDonationModal) {
+        return (
+          <Step.DonationStep
+            donation={donation}
+            links={links}
+            onSuccessfulDonation={(_, amount) => {
+              setDonatedAmount(amount)
+              send('SUCCESSFUL_DONATION')
+            }}
+          />
+        )
+      }
       return (
-        <CelebrationStep
+        <Step.CelebrationStep
           mentorHandle={discussion.mentor.handle}
           links={links}
+          setContainerModalMaxWidth={setMaxWidth}
         />
       )
     case 'satisfied':
       return (
-        <SatisfiedStep
+        <Step.SatisfiedStep
           discussion={discussion}
           onRequeued={() => send('REQUEUED')}
           onBack={() => send('BACK')}
@@ -98,10 +111,10 @@ const Inner = ({
         />
       )
     case 'requeued':
-      return <RequeuedStep links={links} />
+      return <Step.RequeuedStep links={links} />
     case 'report':
       return (
-        <ReportStep
+        <Step.ReportStep
           discussion={discussion}
           onSubmit={(report) => {
             setReport(report)
@@ -110,12 +123,20 @@ const Inner = ({
           onBack={() => send('BACK')}
         />
       )
+    case 'successfulDonation':
+      return (
+        <Step.SuccessfulDonationStep
+          amount={donatedAmount}
+          closeLink={links.exerciseMentorDiscussionUrl}
+          setContainerModalMaxWidth={setMaxWidth}
+        />
+      )
     case 'unhappy': {
       if (!report) {
         throw new Error('Report should not be null')
       }
 
-      return <UnhappyStep report={report} links={links} />
+      return <Step.UnhappyStep report={report} links={links} />
     }
     default:
       throw new Error('Unknown modal step')
@@ -125,15 +146,31 @@ const Inner = ({
 export const FinishMentorDiscussionModal = ({
   links,
   discussion,
+  donation,
   ...props
 }: Omit<ModalProps, 'className'> & {
-  links: Links
+  links: DiscussionActionsLinks
   discussion: MentorDiscussion
+  donation: MentoringSessionDonation
   onCancel: () => void
 }): JSX.Element => {
+  const [maxWidth, setMaxWidth] = useState('100%')
   return (
-    <Modal cover className="m-finish-student-mentor-discussion" {...props}>
-      <Inner links={links} discussion={discussion} />
+    <Modal
+      style={{ content: { maxWidth } }}
+      cover
+      aria={{ modal: true, describedby: 'a11y-finish-mentor-discussion' }}
+      className="m-finish-student-mentor-discussion"
+      ReactModalClassName="bg-unnamed15"
+      shouldCloseOnOverlayClick={false}
+      {...props}
+    >
+      <Inner
+        links={links}
+        discussion={discussion}
+        setMaxWidth={setMaxWidth}
+        donation={donation}
+      />
     </Modal>
   )
 }
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/AddTestimonialStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/AddTestimonialStep.tsx
index af6e122442..93d4e2e139 100644
--- a/app/javascript/components/modals/student/finish-mentor-discussion-modal/AddTestimonialStep.tsx
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/AddTestimonialStep.tsx
@@ -79,12 +79,6 @@ export const AddTestimonialStep = ({
               value={value}
               onChange={handleChange}
             />
-            {/*<p className="help">
-              Testimonials are a place to write what impressed you about a
-              mentor.
-              <br />
-              Mentors can choose to display them on their profiles.
-            </p>*/}
             <div className="form-buttons">
               <FormButton
                 type="button"
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx
index bcd4fedac4..84e5c35e20 100644
--- a/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx
@@ -1,30 +1,33 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { GraphicalIcon } from '../../../common'
 
 type Links = {
   exercise: string
 }
 
-/* TODO: (required) Use correct gif */
 export const CelebrationStep = ({
   mentorHandle,
   links,
+  setContainerModalMaxWidth,
 }: {
   mentorHandle: string
   links: Links
+  setContainerModalMaxWidth: React.Dispatch<React.SetStateAction<string>>
 }): JSX.Element => {
+  useEffect(() => {
+    setContainerModalMaxWidth('900px')
+    return () => setContainerModalMaxWidth('100%')
+  }, [setContainerModalMaxWidth])
+
   return (
     <section className="celebrate-step neon-cat">
-      <img
-        src="https://media.giphy.com/media/sIIhZliB2McAo/source.gif"
-        className="gif"
-      />
+      <img src="https://i.gifer.com/17xo.gif" className="gif"/>
       <h2>Thank you for leaving a testimonial 💙</h2>
       <p>
-        <strong>You’ve helped make {mentorHandle}'s day.</strong>
-        Please be sure to share your experience of Exercism with others.
+        <strong>You&apos;ve helped make {mentorHandle}&apos;s day.</strong>
+        Please share your experience of Exercism with others.
       </p>
-      <a href={links.exercise} className="btn-primary btn-l">
+      <a href={links.exercise} className="btn-enhanced btn-l --disabled">
         <span>Back to the exercise</span>
         <GraphicalIcon icon="arrow-right" />
       </a>
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx
new file mode 100644
index 0000000000..be1e4cba2d
--- /dev/null
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx
@@ -0,0 +1,96 @@
+import React, { lazy, Suspense } from 'react'
+import { MentoringSessionDonation } from '@/components/types'
+import currency from 'currency.js'
+import { DiscussionActionsLinks } from '@/components/student/mentoring-session/DiscussionActions'
+import { PaymentIntentType } from '@/components/donations/stripe-form/useStripeForm'
+const Form = lazy(() => import('@/components/donations/Form'))
+
+export function DonationStep({
+  donation,
+  links,
+  onSuccessfulDonation,
+}: {
+  donation: MentoringSessionDonation
+  links: DiscussionActionsLinks
+  onSuccessfulDonation: (type: PaymentIntentType, amount: currency) => void
+}): JSX.Element {
+  return (
+    <div id="a11y-finish-mentor-discussion" className="flex flex-row">
+      <div className="mr-64">
+        <h3 className="text-h4 mb-4 text-lightBlue">One more request…</h3>
+        <h1 className="text-h1 mb-12">
+          We need your help to keep Exercism alive.
+        </h1>
+        <p className="text-p-large mb-12">
+          Exercism relies on donations from wonderful people like you to keep us
+          financially afloat. Currently, not enough people are donating to
+          Exercism and we may have to shut down the site. With your help, we can
+          keep the lights on, and also grow and expand our work.{' '}
+          <strong className="font-medium">
+            Please take one minute to watch this video and see how your donation
+            will help 👇
+          </strong>
+        </p>
+
+        <div className="c-youtube-container mb-32">
+          <iframe
+            width="560"
+            height="315"
+            frameBorder="0"
+            src="https://player.vimeo.com/video/855534271?h=97d3a4c8c2&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&transparent=0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+          <script src="https://player.vimeo.com/api/player.js" />
+        </div>
+
+        <h3 className="text-h3 mb-6">Want to help?</h3>
+        <p className="text-p-large mb-6">
+          If you can&apos;t afford to donate, please don&apos;t feel bad.
+          Exercism is free exactly so that people in your situation can learn.
+          Please just go and enjoy the platform! 🙂
+        </p>
+        <p className="text-p-large mb-16">
+          However, if you can spare a few dollars, please use the form to the
+          right to support us. Every little helps. Thank you! 💙
+        </p>
+
+        <div className="flex">
+          <a
+            href={links.exercise}
+            className="btn-enhanced btn-l !shadow-xsZ1v3 py-16 px-24 mb-16"
+          >
+            Continue without donating
+          </a>
+        </div>
+      </div>
+      <div className="flex flex-col items-end bg-transparent">
+        <div className="w-[564px] shadow-lgZ1 rounded-8 mb-20">
+          <Suspense fallback={<div className="c-loading-suspense" />}>
+            <Form
+              request={donation.request}
+              defaultAmount={{
+                payment: currency(16),
+                subscription: currency(16),
+              }}
+              userSignedIn={true}
+              captchaRequired={false}
+              links={{
+                success: links.exerciseMentorDiscussionUrl,
+                settings: links.donationsSettings,
+              }}
+              onSuccess={onSuccessfulDonation}
+            />
+          </Suspense>
+        </div>
+
+        <div className="border-2 border-gradient bg-lightPurple py-12 px-24 rounded-8">
+          <p className="text-gradient font-semibold leading-160 text-17">
+            Fewer than 1% of who use Exercism choose to donate. If you can
+            afford to do so, please be one of them.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/RateMentorStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/RateMentorStep.tsx
index f96e4d94d5..1b7e95b7b7 100644
--- a/app/javascript/components/modals/student/finish-mentor-discussion-modal/RateMentorStep.tsx
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/RateMentorStep.tsx
@@ -15,7 +15,7 @@ export const RateMentorStep = ({
   onUnhappy: () => void
 }): JSX.Element => {
   return (
-    <section className="rate-step">
+    <section id="a11y-finish-mentor-discussion" className="rate-step">
       <h2>It&apos;s time to review this discussion</h2>
       <div className="container">
         <div className="lhs">
@@ -40,8 +40,8 @@ export const RateMentorStep = ({
             </div>
           ) : null}
           <p className="explanation">
-            To help us and our mentors understand how well we're doing, we’d
-            love some feedback on your discussion with{' '}
+            To help us and our mentors understand how well we&apos;re doing,
+            we&apos;d love some feedback on your discussion with{' '}
             {discussion.mentor.handle}. Good mentors will answer your questions,
             introduce you to new ideas, or encourage you to try new things.
           </p>
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx
new file mode 100644
index 0000000000..7b2c8b9fab
--- /dev/null
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react'
+import currency from 'currency.js'
+import { GraphicalIcon } from '@/components/common'
+import { BadgeMedallion } from '@/components/common/BadgeMedallion'
+import type { BadgeRarity } from '@/components/types'
+
+const badge = { rarity: 'rare' as BadgeRarity, iconName: 'supporter' }
+
+export function SuccessfulDonationStep({
+  amount,
+  closeLink,
+  setContainerModalMaxWidth,
+}: {
+  amount: currency | null
+  closeLink: string
+  setContainerModalMaxWidth: React.Dispatch<React.SetStateAction<string>>
+}): JSX.Element {
+  useEffect(() => {
+    setContainerModalMaxWidth('900px')
+    return () => setContainerModalMaxWidth('100%')
+  }, [setContainerModalMaxWidth])
+
+  return (
+    <div className="successful-donation-step flex flex-col items-center text-center">
+      <GraphicalIcon
+        icon="completed-check-circle"
+        height={64}
+        width={64}
+        className="mb-20"
+      />
+      <h2 className="text-h3 mb-8">
+        You&apos;ve donated {amount?.format()} successfully - thank you 💙
+      </h2>
+      <p className="text-p-large mb-24">
+        We truly appreciate your support. Exercism would not be possible without
+        awesome contributors like yourself. You&apos;ll be sent an email shortly
+        with your donation confirmation and receipt.
+      </p>
+      <div className="badge-container">
+        <BadgeMedallion badge={badge} />
+        <div className="text-textColor2 text-18 leading-150">
+          You&apos;ve earned the{' '}
+          <strong className="font-medium"> Supporter</strong> badge!
+        </div>
+      </div>
+
+      <a href={closeLink} className="btn-primary btn-l w-[50%]">
+        Continue to Exercise
+      </a>
+    </div>
+  )
+}
diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/index.ts b/app/javascript/components/modals/student/finish-mentor-discussion-modal/index.ts
new file mode 100644
index 0000000000..2d66a4ed2e
--- /dev/null
+++ b/app/javascript/components/modals/student/finish-mentor-discussion-modal/index.ts
@@ -0,0 +1,9 @@
+export { AddTestimonialStep } from './AddTestimonialStep'
+export { CelebrationStep } from './CelebrationStep'
+export { UnhappyStep } from './UnhappyStep'
+export { RequeuedStep } from './RequeuedStep'
+export { SatisfiedStep } from './SatisfiedStep'
+export { ReportStep } from './ReportStep'
+export { RateMentorStep } from './RateMentorStep'
+export { DonationStep } from './DonationStep'
+export { SuccessfulDonationStep } from './SuccessfulDonationStep'
diff --git a/app/javascript/components/student/MentoringSession.tsx b/app/javascript/components/student/MentoringSession.tsx
index 4f70e856b6..3c071caa78 100644
--- a/app/javascript/components/student/MentoringSession.tsx
+++ b/app/javascript/components/student/MentoringSession.tsx
@@ -15,6 +15,8 @@ import {
   MentorSessionRequest as Request,
   MentorSessionTrack as Track,
   MentorSessionExercise as Exercise,
+  MentoringSessionDonation,
+  MentoringSessionLinks,
 } from '../types'
 import { MentoringRequest } from './mentoring-session/MentoringRequest'
 import { SplitPane } from '../common/SplitPane'
@@ -26,6 +28,8 @@ export type Links = {
   privateMentoring: string
   mentoringGuide: string
   createMentorRequest: string
+  donationsSettings: string
+  donate: string
 }
 
 export type Video = {
@@ -59,6 +63,7 @@ export default function MentoringSession({
   request: initialRequest,
   links,
   outOfDate,
+  donation,
 }: {
   userHandle: string
   discussion?: MentorDiscussion
@@ -69,14 +74,18 @@ export default function MentoringSession({
   videos: Video[]
   track: Track
   request?: Request
-  links: Links
+  links: MentoringSessionLinks
   outOfDate: boolean
+  donation: MentoringSessionDonation
 }): JSX.Element {
   const [mentorRequest, setMentorRequest] = useState(initialRequest)
 
-  const handleCreateMentorRequest = useCallback((mentorRequest) => {
-    setMentorRequest(mentorRequest)
-  }, [])
+  const handleCreateMentorRequest = useCallback(
+    (mentorRequest: typeof initialRequest) => {
+      setMentorRequest(mentorRequest)
+    },
+    []
+  )
 
   const { iterations, status } = useDiscussionIterations({
     discussion: discussion,
@@ -105,7 +114,12 @@ export default function MentoringSession({
               {discussion ? (
                 <DiscussionActions
                   discussion={discussion}
-                  links={{ exercise: exercise.links.self }}
+                  links={{
+                    ...links,
+                    exercise: exercise.links.self,
+                    exerciseMentorDiscussionUrl: links.exercise,
+                  }}
+                  donation={donation}
                 />
               ) : null}
             </header>
@@ -131,8 +145,13 @@ export default function MentoringSession({
                 userHandle={userHandle}
                 iterations={iterations}
                 onIterationScroll={handleIterationScroll}
-                links={{ exercise: exercise.links.self }}
+                links={{
+                  ...links,
+                  exercise: exercise.links.self,
+                  exerciseMentorDiscussionUrl: links.exercise,
+                }}
                 status={status}
+                donation={donation}
               />
             ) : (
               <MentoringRequest
diff --git a/app/javascript/components/student/Nudge.tsx b/app/javascript/components/student/Nudge.tsx
index 902d0a2013..3d55130cf0 100644
--- a/app/javascript/components/student/Nudge.tsx
+++ b/app/javascript/components/student/Nudge.tsx
@@ -207,7 +207,7 @@ const CompleteExerciseNudge = ({
     <section className={classNames.join(' ')}>
       <GraphicalIcon icon="complete" category="graphics" />
       <div className="info">
-        <h3>Nice, it looks like you’re done here!</h3>
+        <h3>Nice, it looks like you&apos;re done here!</h3>
         <p>
           Complete the exercise to unlock new concepts and exercises.{' '}
           <strong>
diff --git a/app/javascript/components/student/mentoring-session/DiscussionActions.tsx b/app/javascript/components/student/mentoring-session/DiscussionActions.tsx
index 466b1154a5..add711fe28 100644
--- a/app/javascript/components/student/mentoring-session/DiscussionActions.tsx
+++ b/app/javascript/components/student/mentoring-session/DiscussionActions.tsx
@@ -1,19 +1,27 @@
 import React from 'react'
+import {
+  MentorDiscussion,
+  MentoringSessionDonation,
+  MentoringSessionLinks,
+} from '@/components/types'
 import { FinishButton } from './FinishButton'
-import { MentorDiscussion } from '../../types'
-import { GraphicalIcon } from '../../common'
+import GraphicalIcon from '@/components/common/GraphicalIcon'
 
-type Links = {
-  exercise: string
+type DiscussionActionsProps = {
+  discussion: MentorDiscussion
+  donation: MentoringSessionDonation
+  links: DiscussionActionsLinks
+}
+
+export type DiscussionActionsLinks = MentoringSessionLinks & {
+  exerciseMentorDiscussionUrl: string
 }
 
 export const DiscussionActions = ({
   discussion,
   links,
-}: {
-  discussion: MentorDiscussion
-  links: Links
-}): JSX.Element => {
+  donation,
+}: DiscussionActionsProps): JSX.Element => {
   return discussion.isFinished || discussion.status === 'mentor_finished' ? (
     <div className="finished">
       <GraphicalIcon icon="completed-check-circle" />
@@ -24,6 +32,7 @@ export const DiscussionActions = ({
       discussion={discussion}
       links={links}
       className="btn-xs btn-enhanced finish-button"
+      donation={donation}
     >
       <div className="--hint">End discussion</div>
     </FinishButton>
diff --git a/app/javascript/components/student/mentoring-session/DiscussionInfo.tsx b/app/javascript/components/student/mentoring-session/DiscussionInfo.tsx
index 3c539ffd11..74ba813972 100644
--- a/app/javascript/components/student/mentoring-session/DiscussionInfo.tsx
+++ b/app/javascript/components/student/mentoring-session/DiscussionInfo.tsx
@@ -4,15 +4,16 @@ import { AddDiscussionPost } from '../../mentoring/discussion/AddDiscussionPost'
 import { NewMessageAlert } from '../../mentoring/discussion/NewMessageAlert'
 import { PostsWrapper } from '../../mentoring/discussion/PostsContext'
 import { MentorInfo } from './MentorInfo'
-import { MentorDiscussion, Iteration } from '../../types'
+import {
+  MentorDiscussion,
+  Iteration,
+  MentoringSessionDonation,
+} from '../../types'
 import { Mentor } from '../MentoringSession'
 import { GraphicalIcon } from '../../common'
 import { FinishButton } from './FinishButton'
 import { QueryStatus } from 'react-query'
-
-type Links = {
-  exercise: string
-}
+import { DiscussionActionsLinks } from './DiscussionActions'
 
 export const DiscussionInfo = ({
   discussion,
@@ -22,14 +23,16 @@ export const DiscussionInfo = ({
   onIterationScroll,
   links,
   status,
+  donation,
 }: {
   discussion: MentorDiscussion
   mentor: Mentor
   userHandle: string
   iterations: readonly Iteration[]
   onIterationScroll: (iteration: Iteration) => void
-  links: Links
+  links: DiscussionActionsLinks
   status: QueryStatus
+  donation: MentoringSessionDonation
 }): JSX.Element => {
   return (
     <PostsWrapper discussion={discussion}>
@@ -63,6 +66,7 @@ export const DiscussionInfo = ({
                   discussion={discussion}
                   links={links}
                   className="btn-primary btn-s"
+                  donation={donation}
                 >
                   Review &amp; finish discussion
                 </FinishButton>
diff --git a/app/javascript/components/student/mentoring-session/FinishButton.tsx b/app/javascript/components/student/mentoring-session/FinishButton.tsx
index bf0f5085c1..5a59df5d15 100644
--- a/app/javascript/components/student/mentoring-session/FinishButton.tsx
+++ b/app/javascript/components/student/mentoring-session/FinishButton.tsx
@@ -1,24 +1,22 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { FinishMentorDiscussionModal } from '../../modals/student/FinishMentorDiscussionModal'
 import { ConfirmFinishMentorDiscussionModal } from '../../modals/student/ConfirmFinishMentorDiscussionModal'
-import { MentorDiscussion } from '../../types'
-import Mousetrap from 'mousetrap'
-
-type Links = {
-  exercise: string
-}
+import { MentorDiscussion, MentoringSessionDonation } from '../../types'
+import { DiscussionActionsLinks } from './DiscussionActions'
 
 type Status = 'initialized' | 'confirming' | 'finishing'
 
 export const FinishButton = ({
   discussion,
+  donation,
   className,
   children,
   links,
 }: React.PropsWithChildren<{
   className: string
   discussion: MentorDiscussion
-  links: Links
+  donation: MentoringSessionDonation
+  links: DiscussionActionsLinks
 }>): JSX.Element => {
   const [status, setStatus] = useState<Status>('initialized')
 
@@ -52,6 +50,7 @@ export const FinishButton = ({
         onCancel={() => {
           setStatus('initialized')
         }}
+        donation={donation}
       />
     </React.Fragment>
   )
diff --git a/app/javascript/components/student/mentoring-session/MentoringRequest.tsx b/app/javascript/components/student/mentoring-session/MentoringRequest.tsx
index fabda79c36..cc23ab552b 100644
--- a/app/javascript/components/student/mentoring-session/MentoringRequest.tsx
+++ b/app/javascript/components/student/mentoring-session/MentoringRequest.tsx
@@ -6,16 +6,10 @@ import {
   MentorSessionRequest as Request,
   MentorSessionTrack as Track,
   MentorSessionExercise as Exercise,
-} from '../../types'
+  DiscussionLinks,
+} from '@/components/types'
 import { Video } from '../MentoringSession'
 
-type Links = {
-  learnMoreAboutPrivateMentoring: string
-  privateMentoring: string
-  mentoringGuide: string
-  createMentorRequest: string
-}
-
 export const MentoringRequest = ({
   trackObjectives,
   track,
@@ -32,7 +26,7 @@ export const MentoringRequest = ({
   request?: Request
   latestIteration: Iteration
   videos: Video[]
-  links: Links
+  links: DiscussionLinks
   onCreate: (mentorRequest: Request) => void
 }): JSX.Element => {
   return request ? (
diff --git a/app/javascript/components/student/mentoring-session/mentoring-request/MentoringRequestForm.tsx b/app/javascript/components/student/mentoring-session/mentoring-request/MentoringRequestForm.tsx
index c62de8467e..7fc0330173 100644
--- a/app/javascript/components/student/mentoring-session/mentoring-request/MentoringRequestForm.tsx
+++ b/app/javascript/components/student/mentoring-session/mentoring-request/MentoringRequestForm.tsx
@@ -4,14 +4,12 @@ import { MedianWaitTime } from '@/components/common/MedianWaitTime'
 import CopyToClipboardButton from '@/components/common/CopyToClipboardButton'
 import { FormButton } from '@/components/common/FormButton'
 import { FetchingBoundary } from '@/components/FetchingBoundary'
-import {
-  type Links,
-  useMentoringRequest,
-} from './MentoringRequestFormComponents'
+import { useMentoringRequest } from './MentoringRequestFormComponents'
 import type {
   MentorSessionTrack as Track,
   MentorSessionExercise as Exercise,
   MentorSessionRequest as Request,
+  DiscussionLinks,
 } from '@/components/types'
 import {
   TrackObjectivesTextArea,
@@ -30,7 +28,7 @@ export const MentoringRequestForm = ({
   trackObjectives: string
   track: Track
   exercise: Exercise
-  links: Links
+  links: DiscussionLinks
   onSuccess: (mentorRequest: Request) => void
 }): JSX.Element => {
   const {
diff --git a/app/javascript/components/types.ts b/app/javascript/components/types.ts
index 3f9af05297..596b896bd9 100644
--- a/app/javascript/components/types.ts
+++ b/app/javascript/components/types.ts
@@ -453,6 +453,32 @@ export type MentoredTrackExercise = {
   completedByMentor: boolean
 }
 
+export type MentoringSessionDonation = {
+  showDonationModal: boolean
+  request: {
+    endpoint: string
+    options: {
+      initialData: {
+        subscription?: {
+          provider: string
+          interval: string
+          amountInCents: string
+        }
+      }
+    }
+  }
+}
+
+export type MentoringSessionLinks = {
+  exercise: string
+  learnMoreAboutPrivateMentoring: string
+  privateMentoring: string
+  mentoringGuide: string
+  createMentorRequest: string
+  donationsSettings: string
+  donate: string
+}
+
 export type MentoredTrack = {
   slug: string
   title: string
diff --git a/app/javascript/packs/internal.tsx b/app/javascript/packs/internal.tsx
index fcd973e49d..402b84f3e0 100644
--- a/app/javascript/packs/internal.tsx
+++ b/app/javascript/packs/internal.tsx
@@ -24,6 +24,7 @@ import type {
   SharePlatform,
   CompleteRepresentationData,
   Guidance,
+  MentoringSessionDonation,
 } from '@/components/types'
 import type { Links as TryMentoringButtonLinks } from '@/components/mentoring/TryMentoringButton'
 import type { Links as MentoringQueueLinks } from '@/components/mentoring/Queue'
@@ -70,6 +71,7 @@ import type {
   UserPreferences,
 } from '@/components/settings'
 import type { FooterFormProps } from '@/components/donations/FooterForm'
+import type { StripeFormLinks } from '@/components/donations/Form'
 
 // Component imports
 const Editor = lazy(() => import('@/components/Editor'))
@@ -349,6 +351,7 @@ initReact({
         request={camelizeKeysAs<MentorSessionRequest>(data.request)}
         links={camelizeKeysAs<StudentMentoringSessionLinks>(data.links)}
         outOfDate={data.out_of_date}
+        donation={camelizeKeysAs<MentoringSessionDonation>(data.donation)}
       />
     </Suspense>
   ),
@@ -590,7 +593,7 @@ initReact({
     <Suspense fallback={RenderLoader()}>
       <DonationsFormWithModal
         request={camelizeKeysAs<Request>(data.request)}
-        links={data.links}
+        links={camelizeKeysAs<StripeFormLinks>(data.links)}
         userSignedIn={data.user_signed_in}
         captchaRequired={data.captcha_required}
         recaptchaSiteKey={data.recaptcha_site_key}
diff --git a/app/models/user.rb b/app/models/user.rb
index b624a5f905..78ee5c0cf7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -221,6 +221,11 @@ def formatted_reputation(*args)
     User::FormatReputation.(rep)
   end
 
+  memoize
+  def donated_in_last_35_days?
+    payments.where('created_at > ?', Time.current - 35.days).exists?
+  end
+
   memoize
   def current_subscription? = current_subscription.present?
 
diff --git a/package.json b/package.json
index 232092dc58..ed96a9235a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@stripe/stripe-js": "^1.54.1",
     "@tippyjs/react": "^4.2.5",
     "@types/react-google-recaptcha": "^2.1.5",
-    "@xstate/react": "^1.3.1",
+    "@xstate/react": "^3.2.2",
     "abortcontroller-polyfill": "^1.7.3",
     "ace-builds": "^1.4.12",
     "actioncable": "^5.2.4-3",
@@ -90,7 +90,7 @@
     "use-is-mounted": "^1.0.0",
     "use-memory-value": "^1.2.0",
     "uuid": "^8.3.1",
-    "xstate": "^4.16.2"
+    "xstate": "^4.38.2"
   },
   "version": "0.1.0",
   "devDependencies": {
diff --git a/test/helpers/react_components/student/mentoring_session_test.rb b/test/helpers/react_components/student/mentoring_session_test.rb
index 410ac2a654..99a52e854a 100644
--- a/test/helpers/react_components/student/mentoring_session_test.rb
+++ b/test/helpers/react_components/student/mentoring_session_test.rb
@@ -22,6 +22,7 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
     create :mentor_discussion_post, discussion:, iteration: iteration_3, seen_by_student: false
 
     component = ReactComponents::Student::MentoringSession.new(solution, mentor_request, discussion)
+    component.stubs(current_user: student)
 
     assert_component component,
       "student-mentoring-session",
@@ -50,13 +51,25 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
         track_objectives: "",
         out_of_date: false,
         videos: [],
+        donation: {
+          show_donation_modal: true,
+          request: {
+            endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
+            options: {
+              initial_data: AssembleCurrentSubscription.(student)
+            }
+          }
+        },
         links: {
           exercise: Exercism::Routes.track_exercise_mentor_discussions_url(track, exercise),
           create_mentor_request: Exercism::Routes.api_solution_mentor_requests_path(solution.uuid),
           learn_more_about_private_mentoring: Exercism::Routes.doc_path(:using, "feedback/private"),
           private_mentoring: solution.external_mentoring_request_url,
-          mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored")
+          mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored"),
+          donations_settings: Exercism::Routes.donations_settings_url,
+          donate: Exercism::Routes.donate_url
         }
+
       }
   end
 
@@ -73,6 +86,7 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
     iteration = create(:iteration, solution:)
 
     component = ReactComponents::Student::MentoringSession.new(solution, mentor_request, nil)
+    component.stubs(current_user: student)
 
     assert_component component,
       "student-mentoring-session",
@@ -96,13 +110,102 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
             date: Date.new(2021, 9, 1).iso8601
           }
         ],
+        donation: {
+          show_donation_modal: true,
+          request: {
+            endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
+            options: {
+              initial_data: AssembleCurrentSubscription.(student)
+            }
+          }
+        },
         links: {
           exercise: Exercism::Routes.track_exercise_mentor_discussions_url(track, exercise),
           create_mentor_request: Exercism::Routes.api_solution_mentor_requests_path(solution.uuid),
           learn_more_about_private_mentoring: Exercism::Routes.doc_path(:using, "feedback/private"),
           private_mentoring: solution.external_mentoring_request_url,
-          mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored")
+          mentoring_guide: Exercism::Routes.doc_path(:using, "feedback/guide-to-being-mentored"),
+          donations_settings: Exercism::Routes.donations_settings_url,
+          donate: Exercism::Routes.donate_url
         }
       }
   end
+
+  test "doesn't shows modal to insiders" do
+    student = create :user
+    solution = create :concept_solution, user: student
+    create(:iteration, solution:)
+    mentor_request = create(:mentor_request, solution:)
+
+    generate_data = proc do
+      component = ReactComponents::Student::MentoringSession.new(solution, mentor_request, nil)
+      component.stubs(current_user: student)
+      component.to_h
+    end
+
+    # Not an insider shows model
+    assert generate_data.().dig(:donation, :show_donation_modal)
+
+    # Being an insider doesn't
+    student.update!(insiders_status: :active)
+    refute generate_data.().dig(:donation, :show_donation_modal)
+  end
+
+  test "doesn't shows modal to recent donors" do
+    student = create :user
+    solution = create :concept_solution, user: student
+    create(:iteration, solution:)
+    mentor_request = create(:mentor_request, solution:)
+
+    generate_data = proc do
+      component = ReactComponents::Student::MentoringSession.new(solution, mentor_request, nil)
+      component.stubs(current_user: student)
+      component.to_h
+    end
+
+    # No recent donations shows modal
+    student.expects(donated_in_last_35_days?: false)
+    assert generate_data.().dig(:donation, :show_donation_modal)
+
+    # Recent donations block it
+    create :payments_payment, user: student, created_at: Time.current - 34.days
+    student.expects(donated_in_last_35_days?: true)
+    refute generate_data.().dig(:donation, :show_donation_modal)
+  end
+
+  test "sets show_donation_modal correctly" do
+    student = create :user
+    solution = create :concept_solution, user: student
+    create(:iteration, solution:)
+    mentor_request = create(:mentor_request, solution:)
+
+    generate_data = proc do
+      component = ReactComponents::Student::MentoringSession.new(solution, mentor_request, nil)
+      component.stubs(current_user: student)
+      component.to_h
+    end
+
+    # No testimonials shows model
+    assert generate_data.().dig(:donation, :show_donation_modal)
+
+    # 1/2 testimonials doesn't
+    2.times do
+      create(:mentor_testimonial, student:)
+      refute generate_data.().dig(:donation, :show_donation_modal)
+    end
+
+    # 3 testimonials does
+    create(:mentor_testimonial, student:)
+    assert generate_data.().dig(:donation, :show_donation_modal)
+
+    # 4/5 testimonials don't
+    2.times do
+      create(:mentor_testimonial, student:)
+      refute generate_data.().dig(:donation, :show_donation_modal)
+    end
+
+    # 6 testimonials does
+    create(:mentor_testimonial, student:)
+    assert generate_data.().dig(:donation, :show_donation_modal)
+  end
 end
diff --git a/test/models/user_test.rb b/test/models/user_test.rb
index 640829f999..5d7021e9fa 100644
--- a/test/models/user_test.rb
+++ b/test/models/user_test.rb
@@ -454,4 +454,19 @@ class UserTest < ActiveSupport::TestCase
     user.email_status_invalid!
     refute user.may_receive_emails?
   end
+
+  test "donated_in_last_35_days?" do
+    freeze_time do
+      user = create :user
+      refute user.donated_in_last_35_days?
+
+      create :payments_payment, user:, created_at: Time.current - 36.days
+      user.reload
+      refute user.donated_in_last_35_days?
+
+      create :payments_payment, user:, created_at: Time.current - 34.days
+      user.reload
+      assert user.donated_in_last_35_days?
+    end
+  end
 end
diff --git a/test/system/flows/student/finish_mentor_discussion/happy_test.rb b/test/system/flows/student/finish_mentor_discussion/happy_test.rb
index 2f29a51fdb..6f93f5316b 100644
--- a/test/system/flows/student/finish_mentor_discussion/happy_test.rb
+++ b/test/system/flows/student/finish_mentor_discussion/happy_test.rb
@@ -30,9 +30,9 @@ class HappyTest < ApplicationSystemTestCase
             click_on "It was good!"
             fill_in "Leave #{discussion.mentor.handle} a testimonial (optional)", with: "Good mentor!"
             click_on "Finish"
-            click_on "Back to the exercise"
+            click_on "Continue without donating"
 
-            assert_text "Nice, it looks like you’re done here!"
+            assert_text "Nice, it looks like you're done here!"
           end
         end
 
@@ -58,7 +58,7 @@ class HappyTest < ApplicationSystemTestCase
             click_on "Skip"
 
             wait_for_redirect
-            assert_text "Nice, it looks like you’re done here!"
+            assert_text "Nice, it looks like you're done here!"
           end
         end
       end
diff --git a/test/system/flows/student/finish_mentor_discussion/satisfied_test.rb b/test/system/flows/student/finish_mentor_discussion/satisfied_test.rb
index 9af3bcdef3..9e555d724b 100644
--- a/test/system/flows/student/finish_mentor_discussion/satisfied_test.rb
+++ b/test/system/flows/student/finish_mentor_discussion/satisfied_test.rb
@@ -31,7 +31,7 @@ class SatisfiedTest < ApplicationSystemTestCase
             click_on "No thanks"
 
             wait_for_redirect
-            assert_text "Nice, it looks like you’re done here!"
+            assert_text "Nice, it looks like you're done here!"
           end
         end
 
diff --git a/test/system/flows/student/mentor_finished_discussion_test.rb b/test/system/flows/student/mentor_finished_discussion_test.rb
index c436a2fbc9..807ee3036f 100644
--- a/test/system/flows/student/mentor_finished_discussion_test.rb
+++ b/test/system/flows/student/mentor_finished_discussion_test.rb
@@ -48,9 +48,9 @@ class MentorFinishedDiscussionTest < ApplicationSystemTestCase
           click_on "It was good!"
           fill_in "Leave #{discussion.mentor.handle} a testimonial (optional)", with: "Good mentor!"
           click_on "Finish"
-          click_on "Back to the exercise"
+          click_on "Continue without donating"
 
-          assert_text "Nice, it looks like you’re done here!"
+          assert_text "Nice, it looks like you're done here! "
         end
       end
     end
diff --git a/yarn.lock b/yarn.lock
index 4c02ce3d2f..140fb7558e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2329,13 +2329,13 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
-"@xstate/react@^1.3.1":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@xstate/react/-/react-1.6.3.tgz#706f3beb7bc5879a78088985c8fd43b9dab7f725"
-  integrity sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==
+"@xstate/react@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@xstate/react/-/react-3.2.2.tgz#ddf0f9d75e2c19375b1e1b7335e72cb99762aed8"
+  integrity sha512-feghXWLedyq8JeL13yda3XnHPZKwYDN5HPBLykpLeuNpr9178tQd2/3d0NrH6gSd0sG5mLuLeuD+ck830fgzLQ==
   dependencies:
-    use-isomorphic-layout-effect "^1.0.0"
-    use-subscription "^1.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+    use-sync-external-store "^1.0.0"
 
 JSONStream@^1.3.4, JSONStream@^1.3.5:
   version "1.3.5"
@@ -10219,22 +10219,20 @@ use-is-mounted@^1.0.0:
   resolved "https://registry.yarnpkg.com/use-is-mounted/-/use-is-mounted-1.0.0.tgz#9b92038aa43d5f9b429fec5bcb337f090da686b2"
   integrity sha512-hageAWvDBwxHxOgmMzVyT3xkJsj8jv3AUCEm0E1SAmPZ0rnTYal2CNhxVXvlV+orZ62NitsR5/va2djaP/iCLw==
 
-use-isomorphic-layout-effect@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
-  integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
 use-memory-value@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-memory-value/-/use-memory-value-1.2.0.tgz#81fa1899fb2f0b687e24a00eb7b7fea00e2f5047"
   integrity sha512-q4V1dsRM68aaVBZ33msnKTqAfFWCt4nowAhlYqNGoSnRCJt1AFcDAbtgj7YvYQaGGtJNFW7U9MhYthCU09OMmg==
 
-use-subscription@^1.3.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
 use@^3.1.0:
   version "3.1.1"
@@ -10521,10 +10519,10 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xstate@^4.16.2:
-  version "4.29.0"
-  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.29.0.tgz#74161f1e4b7fadb073593085f4fbb58068ee0b86"
-  integrity sha512-F6WF5s6xG/bm8Oxi2ETuzwGQW8yleL5I4JPxZl49m7Uw7D4LAXu+4dvUK78Uo4D863sM8auqw6+1Xmj9mFlmDQ==
+xstate@^4.38.2:
+  version "4.38.2"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.38.2.tgz#1b74544fc9c8c6c713ba77f81c6017e65aa89804"
+  integrity sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==
 
 xtend@~4.0.1:
   version "4.0.2"