Add correct links and boolean

.github/labels.yml

@@ -175,7 +175,7 @@
 - name: "bot/bugsnag"
   description: ""
   color: "A32E92"
-  
+
 - name: "bot/bugsnag-clientside"
   description: ""
   color: "A32E92"

CODE_OF_CONDUCT.md

@@ -90,4 +90,4 @@ This policy was initially adopted from the Front-end London Slack community and
 A version history can be seen on [GitHub](https://github.com/exercism/website-copy/edit/main/pages/code_of_conduct.md).
 
 _This policy is a "living" document, and subject to refinement and expansion in the future.
-This policy applies to the Exercism website, the Exercism GitHub organization, any other Exercism-related communication channels (e.g.  Slack, Twitter, email) and any other Exercism entity or event._
+This policy applies to the Exercism website, the Exercism GitHub organization, any other Exercism-related communication channels (e.g. Slack, Twitter, email) and any other Exercism entity or event._

app/css/ui-kit/filters.css

@@ -17,6 +17,11 @@
         filter: var(--lightGold-filter);
     }
 
+    .filter-shadow-huge {
+        -webkit-filter: drop-shadow(0px 4px 128px rgba(79, 114, 205, 0.8));
+        filter: drop-shadow(0px 4px 128px rgba(79, 114, 205, 0.8));
+    }
+
     .filter-orange {
         filter: var(--orange-filter);
     }
@@ -112,8 +117,9 @@
     .filter-prominentLinkColor {
         filter: var(--c-prominent-link-icon-filter);
     }
-    
+
     .filter-shadow-huge {
         -webkit-filter: drop-shadow(0px 4px 128px rgba(79, 114, 205, 0.8));
         filter: drop-shadow(0px 4px 128px rgba(79, 114, 205, 0.8));
-    }
+    }
+}

app/helpers/react_components/student/mentoring_session.rb

@@ -6,42 +6,48 @@ 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"),
-              donation_links: {
-                request: {
-                  endpoint: Exercism::Routes.api_donations_active_subscription_url,
-                  options: {
-                    initial_data: AssembleActiveSubscription.(current_user)
-                  }
-                },
-                user_signed_in: user_signed_in?,
-                captcha_required: !current_user || current_user.captcha_required?,
-                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
+          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:,
+
+          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"),
+            donation_links: {
+              show_donation_modal:,
+              request: {
+                endpoint: Exercism::Routes.current_api_payments_subscriptions_url,
+                options: {
+                  initial_data: AssembleCurrentSubscription.(current_user)
                 }
+              },
+              # TODO: add correct endpoint and initial data
+              user_signed_in: user_signed_in?,
+              captcha_required: !current_user || current_user.captcha_required?,
+              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
               }
             }
           }
-        )
+        }
       end
 
       private
@@ -111,6 +117,11 @@ def iterations
 
         SerializeIterations.(solution.iterations, comment_counts:)
       end
+
+      def show_donation_modal
+        num_testimonials = current_user.provided_testimonials.count
+        num_testimonials.zero? || ((num_testimonials + 1) % 5).zero?
+      end
     end
   end
 end

app/javascript/components/mentoring/discussion/FinishButton.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from 'react'
-import { FinishMentorDiscussionModal } from '../../modals/mentor/FinishMentorDiscussionModal'
-import { ModalProps } from '../../modals/Modal'
-import { MentorDiscussion as Discussion } from '../../types'
 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,

app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx

@@ -1,22 +1,10 @@
 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 { createMachine } from 'xstate'
-import { redirectTo } from '../../../utils/redirect-to'
-import { DonationStep } from './finish-mentor-discussion-modal/DonationStep'
-import { DiscussionLinks } from '../../student/mentoring-session/DiscussionActions'
-
-export type Links = {
-  exercise: string
-}
+import { redirectTo } from '@/utils/redirect-to'
+import { MentorDiscussion, DiscussionLinks } from '@/components/types'
+import { Modal, ModalProps } from '../Modal'
+import * as Step from './finish-mentor-discussion-modal'
 
 export type ReportReason = 'coc' | 'incorrect' | 'other'
 
@@ -65,11 +53,7 @@ const Inner = ({
   switch (currentStep.value) {
     case 'rateMentor':
       return (
-        // <DonationStep
-        //   donationLinks={links.donation}
-        //   mentorHandle={discussion.mentor.handle}
-        // />
-        <RateMentorStep
+        <Step.RateMentorStep
           discussion={discussion}
           onHappy={() => send('HAPPY')}
           onSatisfied={() => send('SATISFIED')}
@@ -78,27 +62,32 @@ const Inner = ({
       )
     case 'addTestimonial':
       return (
-        <AddTestimonialStep
+        <Step.AddTestimonialStep
           onSubmit={() => send('SUBMIT')}
           onSkip={() => redirectTo(links.exercise)}
           onBack={() => send('BACK')}
           discussion={discussion}
         />
       )
     case 'celebration':
-      return (
-        // <DonationStep
-        //   donationLinks={links.donation}
-        //   mentorHandle={discussion.mentor.handle}
-        // />
-        <CelebrationStep
-          mentorHandle={discussion.mentor.handle}
-          links={links}
-        />
-      )
+      if (links.donationLinks.showDonationModal) {
+        return (
+          <Step.DonationStep
+            exerciseLink={links.exercise}
+            donationLinks={links.donationLinks}
+            mentorHandle={discussion.mentor.handle}
+          />
+        )
+      } else
+        return (
+          <Step.CelebrationStep
+            mentorHandle={discussion.mentor.handle}
+            links={links}
+          />
+        )
     case 'satisfied':
       return (
-        <SatisfiedStep
+        <Step.SatisfiedStep
           discussion={discussion}
           onRequeued={() => send('REQUEUED')}
           onBack={() => send('BACK')}
@@ -108,10 +97,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)
@@ -125,7 +114,7 @@ const Inner = ({
         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')

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"

app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx

@@ -21,7 +21,7 @@ export const CelebrationStep = ({
       />
       <h2>Thank you for leaving a testimonial 💙</h2>
       <p>
-        <strong>You’ve helped make {mentorHandle}&apos;s day.</strong>
+        <strong>You&apos;ve helped make {mentorHandle}&apos;s day.</strong>
         Please be sure to share your experience of Exercism with others.
       </p>
       <a href={links.exercise} className="btn-primary btn-l">

app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx

@@ -1,15 +1,17 @@
 import React, { lazy, Suspense } from 'react'
-import { GraphicalIcon } from '@/components/common'
 import { DonationLinks } from '@/components/types'
 const DonationsFormWithModal = lazy(
   () => import('@/components/donations/FormWithModal')
 )
+
 export function DonationStep({
   mentorHandle,
   donationLinks,
+  exerciseLink,
 }: {
   mentorHandle: string
   donationLinks: DonationLinks
+  exerciseLink: string
 }): JSX.Element {
   return (
     <div id="a11y-finish-mentor-discussion" className="flex flex-row">
@@ -27,7 +29,6 @@ export function DonationStep({
           </strong>{' '}
           But we need your help to keep the lights on and enable us to grow and
           expand what we&apos;re doing.{' '}
-          {/* probably remove text-p-large because it doesn't do much heavy lifting, and must force semibold because of that */}
           <strong className="!font-semibold">
             Only 1% of people give to Exercism - please be one of them!
           </strong>
@@ -51,21 +52,20 @@ export function DonationStep({
 
         <h3 className="text-h3 mb-12">Not for now?</h3>
 
-        <button className="btn-enhanced btn-l !shadow-xsZ1v3 py-16 px-24 mb-16">
-          Continue to exercise...
-        </button>
+        <div className="flex">
+          <a
+            href={exerciseLink}
+            className="btn-enhanced btn-l !shadow-xsZ1v3 py-16 px-24 mb-16"
+          >
+            Continue to exercise...
+          </a>
+        </div>
 
         <div className="text-15 text-btnBorder leading-160 font-normal">
           Don&apos;t worry, we won&apos;t show you this again for a while.
         </div>
       </div>
       <div className="flex flex-col items-end bg-transparent">
-        <GraphicalIcon
-          className="mb-40 mr-[53px] !drop-shadow-[0_4px_128px_rgba(79, 114, 205, 0.8)]"
-          icon="wizard-hat"
-          category="graphics"
-        />
-
         <div className="w-[564px]">
           <Suspense fallback={<div className="c-loading-suspense" />}>
             <DonationsFormWithModal

app/javascript/components/modals/student/finish-mentor-discussion-modal/index.ts

@@ -0,0 +1,8 @@
+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'

app/javascript/components/student/MentoringSession.tsx

@@ -15,6 +15,7 @@ import {
   MentorSessionRequest as Request,
   MentorSessionTrack as Track,
   MentorSessionExercise as Exercise,
+  DiscussionLinks,
   DonationLinks,
 } from '../types'
 import { MentoringRequest } from './mentoring-session/MentoringRequest'
@@ -71,7 +72,7 @@ export default function MentoringSession({
   videos: Video[]
   track: Track
   request?: Request
-  links: Links
+  links: DiscussionLinks
   outOfDate: boolean
 }): JSX.Element {
   const [mentorRequest, setMentorRequest] = useState(initialRequest)
@@ -109,7 +110,7 @@ export default function MentoringSession({
                   discussion={discussion}
                   links={{
                     exercise: exercise.links.self,
-                    donation: links.donationLinks,
+                    donationLinks: links.donationLinks,
                   }}
                 />
               ) : null}
@@ -136,7 +137,7 @@ export default function MentoringSession({
                 userHandle={userHandle}
                 iterations={iterations}
                 onIterationScroll={handleIterationScroll}
-                links={{ exercise: exercise.links.self }}
+                links={links}
                 status={status}
               />
             ) : (

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>