Add bootcamp attendee affiliate code (#7304)

* Add bootcamp affiliate code * Tiny refactor --------- Co-authored-by: dem4ron <[email protected]>
exercism · Jan 13, 2025 · 96081e9 · 96081e9
1 parent bd76ea7
commit 96081e9
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 30 deletions.
diff --git a/app/helpers/react_components/settings/bootcamp_affiliate_coupon_form.rb b/app/helpers/react_components/settings/bootcamp_affiliate_coupon_form.rb
@@ -1,10 +1,12 @@
 module ReactComponents
   module Settings
     class BootcampAffiliateCouponForm < ReactComponent
+      initialize_with :context
       def to_s
         super("settings-bootcamp-affiliate-coupon-form", {
           insiders_status: current_user.insiders_status,
           bootcamp_affiliate_coupon_code: current_user.bootcamp_affiliate_coupon_code,
+          context:,
           links: {
             insiders_path: Exercism::Routes.insiders_path,
             bootcamp_affiliate_coupon_code: Exercism::Routes.bootcamp_affiliate_coupon_code_api_settings_user_preferences_url

diff --git a/app/javascript/components/settings/BootcampAffiliateCouponForm.tsx b/app/javascript/components/settings/BootcampAffiliateCouponForm.tsx
@@ -8,10 +8,12 @@ type Links = {
 }
 
 export default function BootcampAffiliateCouponForm({
+  context,
   insidersStatus,
   bootcampAffiliateCouponCode,
   links,
 }: {
+  context: 'settings' | 'bootcamp'
   insidersStatus: string
   bootcampAffiliateCouponCode: string
   links: Links
@@ -43,46 +45,79 @@ export default function BootcampAffiliateCouponForm({
   const isInsider =
     insidersStatus == 'active' || insidersStatus == 'active_lifetime'
 
-  return (
-    <div>
-      <h2 className="!mb-8">Bootcamp Affiliate Coupon</h2>
-      <InfoMessage
-        isInsider={isInsider}
-        insidersStatus={insidersStatus}
-        insidersPath={links.insidersPath}
-        couponCode={couponCode}
-      />
+  switch (context) {
+    case 'settings':
+      return (
+        <div>
+          <h2 className="!mb-8">Bootcamp Affiliate Coupon</h2>
+          <InfoMessage
+            isInsider={isInsider}
+            insidersStatus={insidersStatus}
+            insidersPath={links.insidersPath}
+          />
 
-      {couponCode ? (
-        <CopyToClipboardButton textToCopy={couponCode} />
-      ) : (
-        <button
-          id="generate-affiliate-coupon-code-button"
-          onClick={generateCouponCode}
-          disabled={!isInsider || loading}
-          type="button"
-          className="btn btn-primary"
-        >
-          {loading
-            ? 'Generating code...'
-            : 'Generate your Affiliate Discount code'}
-        </button>
-      )}
-      <ErrorMessage error={error} />
-    </div>
-  )
+          {couponCode ? (
+            <CopyToClipboardButton textToCopy={couponCode} />
+          ) : (
+            <button
+              id="generate-affiliate-coupon-code-button"
+              onClick={generateCouponCode}
+              disabled={!isInsider || loading}
+              type="button"
+              className="btn btn-primary"
+            >
+              {loading
+                ? 'Generating code...'
+                : 'Generate your Affiliate Discount code'}
+            </button>
+          )}
+          <ErrorMessage error={error} />
+        </div>
+      )
+    case 'bootcamp': {
+      return (
+        <div>
+          <h2 className="mb-2">Affiliate Coupon</h2>
+          <p className="mb-8">
+            To help us get more people benefitting from the Bootcamp, we're
+            giving you an Affiliate Code to share. Anyone using the code gets
+            20% off the Bootcamp, and we give you 20% of what they pay.
+          </p>
+          <p className="mb-12">
+            Please share this Affiliate Code with your friends &amp; colleagues,
+            and on social media.{' '}
+          </p>
+
+          {couponCode ? (
+            <CopyToClipboardButton textToCopy={couponCode} />
+          ) : (
+            <button
+              id="generate-affiliate-coupon-code-button"
+              onClick={generateCouponCode}
+              disabled={!isInsider || loading}
+              type="button"
+              className="btn btn-primary"
+            >
+              {loading
+                ? 'Generating code...'
+                : 'Generate your Affiliate Discount code'}
+            </button>
+          )}
+          <ErrorMessage error={error} />
+        </div>
+      )
+    }
+  }
 }
 
 export function InfoMessage({
   insidersStatus,
   insidersPath,
   isInsider,
-  couponCode,
 }: {
   insidersStatus: string
   insidersPath: string
   isInsider: boolean
-  couponCode: string
 }): JSX.Element {
   if (isInsider) {
     return (

diff --git a/app/javascript/packs/bootcamp-ui-js.tsx b/app/javascript/packs/bootcamp-ui-js.tsx
@@ -10,6 +10,9 @@ const SolveExercisePage = lazy(
 const DrawingPage = lazy(
   () => import('../components/bootcamp/DrawingPage/DrawingPage')
 )
+const BootcampAffiliateCouponForm = lazy(
+  () => import('@/components/settings/BootcampAffiliateCouponForm')
+)
 
 declare global {
   interface Window {
@@ -35,6 +38,19 @@ const mappings = {
       <DrawingPage {...camelizeKeysAs<DrawingPageProps>(data)} />
     </Suspense>
   ),
+  'settings-bootcamp-affiliate-coupon-form': (data: any) => (
+    <Suspense>
+      <BootcampAffiliateCouponForm
+        context={data.context}
+        insidersStatus={data.insiders_status}
+        bootcampAffiliateCouponCode={data.bootcamp_affiliate_coupon_code}
+        links={camelizeKeysAs<{
+          insidersPath: string
+          bootcampAffiliateCouponCode: string
+        }>(data.links)}
+      />
+    </Suspense>
+  ),
 }
 
 // Add all react components here.

diff --git a/app/javascript/packs/internal.tsx b/app/javascript/packs/internal.tsx
@@ -508,6 +508,7 @@ initReact({
   'settings-bootcamp-affiliate-coupon-form': (data: any) => (
     <Suspense fallback={RenderLoader()}>
       <BootcampAffiliateCouponForm
+        context={data.context}
         insidersStatus={data.insiders_status}
         bootcampAffiliateCouponCode={data.bootcamp_affiliate_coupon_code}
         links={camelizeKeysAs<{

diff --git a/app/views/bootcamp/dashboard/index.html.haml b/app/views/bootcamp/dashboard/index.html.haml
@@ -98,6 +98,9 @@
                 %strong Labs:
                 Saturday 25th Jan at 18:00 UTC
 
+            .mb-32
+              = render ReactComponents::Settings::BootcampAffiliateCouponForm.new("bootcamp")
+
             %h2.mb-2 Make the most of the Bootcamp
             %p.mb-16 The more you take part in all areas of the Bootcamp, the more you'll learn.
             .flex.flex-col.gap-16

diff --git a/app/views/settings/insiders.html.haml b/app/views/settings/insiders.html.haml
@@ -9,7 +9,7 @@
         = render ReactComponents::Settings::InsiderBenefitsForm.new
 
       %section{ id: 'bootcamp-affiliate-coupon-form' }
-        = render ReactComponents::Settings::BootcampAffiliateCouponForm.new
+        = render ReactComponents::Settings::BootcampAffiliateCouponForm.new("settings")
 
       - if current_user.lifetime_insider?
         %section{ id: 'bootcamp-free-coupon-form' }