feat(client): add Patreon button (#44113)

* feat(add): add patreon button

* feat: add noreferrer

* Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/assets/images/components/patreon-logo.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const PatreonLogo = (
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    id='patreon-logo'
+    viewBox='10 0 2560 356'
+    xmlns='http://www.w3.org/2000/svg'
+    xmlnsXlink='http://www.w3.org/1999/xlink'
+    {...props}
+  >
+    <g>
+      <path d='M1536.54 72.449v76.933h128.24v61.473h-128.24v74.51h128.24v62.921h-206.64V9.529h206.64v62.92h-128.24M2070.82 178.907c0-55.652-37.76-107.434-99.21-107.434-61.95 0-99.21 51.782-99.21 107.434s37.26 107.435 99.21 107.435c61.45 0 99.21-51.783 99.21-107.435zm-278.77 0c0-92.916 66.79-178.093 179.56-178.093 112.26 0 179.05 85.177 179.05 178.093 0 92.916-66.79 178.093-179.05 178.093-112.77 0-179.56-85.177-179.56-178.093zM186.32 131.97c0-31.46-21.299-58.563-54.206-58.563H78.398v117.109h53.716c32.907 0 54.206-27.086 54.206-58.546zM0 9.529h141.788c75.016 0 123.417 56.628 123.417 122.441s-48.401 122.423-123.417 122.423h-63.39v93.893H0V9.529zM492.17 106.314l-41.621 139.382h82.266L492.17 106.314zm73.081 241.972-13.054-41.134H431.69l-13.072 41.134h-83.73L455.882 9.529h72.105l122.442 338.757h-85.178zM782.055 77.277H705.61V9.529h231.793v67.748h-76.951v271.009h-78.397V77.277M2485.08 230.202V9.529h77.91v338.757h-81.78l-121.97-217.78v217.78h-78.4V9.529h81.78l122.46 220.673M1245.68 131.97c0-31.46-21.3-58.563-54.21-58.563h-53.72v117.109h53.72c32.91 0 54.21-27.086 54.21-58.546zM1059.36 9.529h142.29c75 0 123.4 56.628 123.4 122.441 0 47.425-25.17 89.517-67.28 109.369l67.77 106.947h-90.98l-60.03-93.893h-36.78v93.893h-78.39V9.529z' />
+    </g>
+  </svg>
+);
+
+PatreonLogo.displayName = 'PatreonLogo';
+
+export default PatreonLogo;

client/src/components/Donation/DonateForm.tsx

@@ -29,6 +29,7 @@ import Spacer from '../helpers/spacer';
 import DonateCompletion from './DonateCompletion';
 import type { AddDonationData } from './PaypalButton';
 import PaypalButton from './PaypalButton';
+import PatreonButton from './patreon-button';
 import StripeCardForm, { HandleAuthentication } from './stripe-card-form';
 import WalletsWrapper from './walletsButton';
 
@@ -334,8 +335,9 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
             isPaypalLoading={loading.paypal}
             isSignedIn={isSignedIn}
             onDonationStateChange={this.onDonationStateChange}
-            theme={defaultTheme ? defaultTheme : theme}
+            theme={priorityTheme}
           />
+          <PatreonButton />
           {isMinimalForm && (
             <>
               <div className='separator'>{t('donate.or-card')}</div>
@@ -344,7 +346,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
                 postStripeCardDonation={this.postStripeCardDonation}
                 processing={processing}
                 t={t}
-                theme={defaultTheme ? defaultTheme : theme}
+                theme={priorityTheme}
               />
             </>
           )}

client/src/components/Donation/Donation.css

@@ -92,6 +92,11 @@
 
 .paypal-buttons-container {
   min-height: auto;
+  margin-bottom: 8px;
+}
+
+.donate-page-wrapper .paypal-buttons-container {
+  margin-bottom: 0px;
 }
 
 .donate-input-element {
@@ -428,6 +433,24 @@ button.confirm-donation-btn:hover {
   background-color: #f2ba38;
   border-color: #f2ba38;
 }
+a.patreon-button {
+  border-radius: 5px;
+  background-color: #ff424d;
+  min-height: 42px;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+a.patreon-button svg {
+  max-height: 12px;
+  fill: white;
+}
+a.patreon-button:active,
+a.patreon-button:active:focus,
+a.patreon-button:hover {
+  background-color: #e13d47;
+}
 
 .hide {
   display: none;

client/src/components/Donation/patreon-button.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  donationUrls,
+  patreonDefaultPledgeAmount
+} from '../../../../config/donation-settings';
+import envData from '../../../../config/env.json';
+import PatreonLogo from '../../assets/images/components/patreon-logo';
+
+const { patreonClientId }: { patreonClientId: string | null } = envData as {
+  patreonClientId: string | null;
+};
+
+const PatreonButton = (): JSX.Element | null => {
+  if (
+    !patreonClientId ||
+    !patreonDefaultPledgeAmount ||
+    !donationUrls.successUrl
+  ) {
+    return null;
+  }
+
+  const clientId = `&client_id=${patreonClientId}`;
+  const pledgeLevel = `$&min_cents=${patreonDefaultPledgeAmount}`;
+  const v2Params = '&scope=identity%20identity[email]';
+  const redirectUri = `&redirect_uri=${donationUrls.successUrl}`;
+  const href = `https://www.patreon.com/oauth2/become-patron?response_type=code${pledgeLevel}${clientId}${redirectUri}${v2Params}`;
+
+  return (
+    <a
+      className='patreon-button link-button'
+      data-patreon-widget-type='become-patron-button'
+      href={href}
+      rel='noreferrer'
+      target='_blank'
+    >
+      <PatreonLogo />
+    </a>
+  );
+};
+
+export default PatreonButton;

config/donation-settings.js

@@ -85,12 +85,13 @@ const paypalConfigurator = (donationAmount, donationDuration, paypalConfig) => {
   };
 };
 
-//
 const donationUrls = {
   successUrl: 'https://www.freecodecamp.org/news/thank-you-for-donating/',
   cancelUrl: 'https://freecodecamp.org/donate'
 };
 
+const patreonDefaultPledgeAmount = 500;
+
 module.exports = {
   durationsConfig,
   amountsConfig,
@@ -103,5 +104,6 @@ module.exports = {
   onetimeSKUConfig,
   paypalConfigTypes,
   paypalConfigurator,
-  donationUrls
+  donationUrls,
+  patreonDefaultPledgeAmount
 };

config/read-env.js

@@ -29,6 +29,7 @@ const {
   ALGOLIA_API_KEY: algoliaAPIKey,
   STRIPE_PUBLIC_KEY: stripePublicKey,
   PAYPAL_CLIENT_ID: paypalClientId,
+  PATREON_CLIENT_ID: patreonClientId,
   DEPLOYMENT_ENV: deploymentEnv,
   SHOW_UPCOMING_CHANGES: showUpcomingChanges
 } = process.env;
@@ -65,5 +66,9 @@ module.exports = Object.assign(locations, {
     !paypalClientId || paypalClientId === 'id_from_paypal_dashboard'
       ? null
       : paypalClientId,
+  patreonClientId:
+    !patreonClientId || patreonClientId === 'id_from_patreon_dashboard'
+      ? null
+      : patreonClientId,
   showUpcomingChanges: showUpcomingChanges === 'true'
 });

sample.env

@@ -42,6 +42,9 @@ PAYPAL_VERIFY_WEBHOOK_URL=https://api.sandbox.paypal.com/v1/notifications/verify
 PAYPAL_API_TOKEN_URL=https://api.sandbox.paypal.com/v1/oauth2/token
 PAYPAL_WEBHOOK_ID=webhook_id_from_paypal_dashboard
 
+# Patreon
+PATREON_CLIENT_ID=id_from_patreon_dashboard
+
 # ---------------------
 # Build variants
 # ---------------------