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>

app/css/modals/finish-student-mentor-discussion.css

@@ -209,27 +209,38 @@
             @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 {
                 @apply text-h1 mb-24 text-white text-center;
             }
             & 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;
                 }
             }

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
             }
           }
         )

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
             }
           }
         )

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

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

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

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

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}
       />
     </>
   )

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

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

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,