Update copy on DonationStep (#7083)

* Update copy on `DonationStep` * Remove old `DonationStep` * Adjust test
exercism · Oct 10, 2024 · 8d9217c · 8d9217c
1 parent 9f005d1
commit 8d9217c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/app/helpers/react_components/student/mentoring_session.rb b/app/helpers/react_components/student/mentoring_session.rb
@@ -24,6 +24,7 @@ def to_h
           videos:,
           donation: {
             show_donation_modal:,
+            previous_donor:,
             request: {
               endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
               options: {
@@ -111,6 +112,9 @@ def iterations
         SerializeIterations.(solution.iterations, comment_counts:)
       end
 
+      memoize
+      def previous_donor = current_user.total_donated_in_dollars.positive?
+
       def show_donation_modal
         return false if current_user.insider?
         return false if current_user.donated_in_last_35_days?

diff --git a/app/javascript/components/modals/BegModal.tsx b/app/javascript/components/modals/BegModal.tsx
@@ -159,7 +159,7 @@ export default function ({
   )
 }
 
-function PreviousDonorContent() {
+export function PreviousDonorContent() {
   return (
     <>
       <p className="text-p-large mb-12">
@@ -184,7 +184,7 @@ function PreviousDonorContent() {
   )
 }
 
-function NonDonorContent() {
+export function NonDonorContent() {
   return (
     <>
       <p className="text-p-large mb-12">

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
@@ -3,6 +3,7 @@ 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'
+import { PreviousDonorContent, NonDonorContent } from '../../BegModal'
 const Form = lazy(() => import('@/components/donations/Form'))
 
 export function DonationStep({
@@ -17,19 +18,31 @@ export function DonationStep({
   return (
     <div id="a11y-finish-mentor-discussion" className="flex flex-row">
       <div className="mr-64 max-w-[700px]">
-        <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 alive. 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>
+        <h3 className="text-h4 mb-4 text-prominentLinkColor">
+          One more request…
+        </h3>
+        <h1 className="text-h1 mb-12">Are you finding Exercism helpful?</h1>
+
+        <div className="mb-20 pb-20 border-b-1 border-borderColor7">
+          {!donation.previousDonor ? (
+            <PreviousDonorContent />
+          ) : (
+            <NonDonorContent />
+          )}
+        </div>
+
+        <h3 className="text-h4 mb-6">Can't afford it?</h3>
+        <p className="text-p-large mb-20">
+          If you can&apos;t afford to donate, but would like to help in some
+          other way, please share Exercism with your friends and colleagues, and
+          shout about us on social media. The more people that use us, the more
+          donations we get!
+        </p>
+
+        <h3 className="text-h4 mb-6">Want to know more?</h3>
+        <p className="text-p-large mb-20">
+          I put together a short video that explains why we need donations and
+          how we use them 👇
         </p>
 
         <div className="c-youtube-container mb-32">
@@ -44,17 +57,6 @@ export function DonationStep({
           <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}

diff --git a/app/javascript/components/types.ts b/app/javascript/components/types.ts
@@ -467,6 +467,7 @@ export type MentoredTrackExercise = {
 
 export type MentoringSessionDonation = {
   showDonationModal: boolean
+  previousDonor: boolean
   request: {
     endpoint: string
     options: {

diff --git a/test/helpers/react_components/student/mentoring_session_test.rb b/test/helpers/react_components/student/mentoring_session_test.rb
@@ -53,6 +53,7 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
         videos: [],
         donation: {
           show_donation_modal: true,
+          previous_donor: false,
           request: {
             endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
             options: {
@@ -112,6 +113,7 @@ class ReactComponents::Student::MentoringSessionTest < ReactComponentTestCase
         ],
         donation: {
           show_donation_modal: true,
+          previous_donor: false,
           request: {
             endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
             options: {