From 421dab38e8083a00c70a00e31ddde55e0bd61b22 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Thu, 4 Nov 2021 19:06:24 +0300 Subject: [PATCH] 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 Co-authored-by: Oliver Eyton-Williams --- .../assets/images/components/patreon-logo.tsx | 21 ++++++++++ client/src/components/Donation/DonateForm.tsx | 6 ++- client/src/components/Donation/Donation.css | 23 +++++++++++ .../components/Donation/patreon-button.tsx | 41 +++++++++++++++++++ config/donation-settings.js | 6 ++- config/read-env.js | 5 +++ sample.env | 3 ++ 7 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 client/src/assets/images/components/patreon-logo.tsx create mode 100644 client/src/components/Donation/patreon-button.tsx diff --git a/client/src/assets/images/components/patreon-logo.tsx b/client/src/assets/images/components/patreon-logo.tsx new file mode 100644 index 0000000000..ff71b7095a --- /dev/null +++ b/client/src/assets/images/components/patreon-logo.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +const PatreonLogo = ( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element => ( + +); + +PatreonLogo.displayName = 'PatreonLogo'; + +export default PatreonLogo; diff --git a/client/src/components/Donation/DonateForm.tsx b/client/src/components/Donation/DonateForm.tsx index 15f35f024d..1cf6fc7ce7 100644 --- a/client/src/components/Donation/DonateForm.tsx +++ b/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 { isPaypalLoading={loading.paypal} isSignedIn={isSignedIn} onDonationStateChange={this.onDonationStateChange} - theme={defaultTheme ? defaultTheme : theme} + theme={priorityTheme} /> + {isMinimalForm && ( <>
{t('donate.or-card')}
@@ -344,7 +346,7 @@ class DonateForm extends Component { postStripeCardDonation={this.postStripeCardDonation} processing={processing} t={t} - theme={defaultTheme ? defaultTheme : theme} + theme={priorityTheme} /> )} diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index 6a5dfd924c..5f337807a6 100644 --- a/client/src/components/Donation/Donation.css +++ b/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; diff --git a/client/src/components/Donation/patreon-button.tsx b/client/src/components/Donation/patreon-button.tsx new file mode 100644 index 0000000000..61df8a3b52 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default PatreonButton; diff --git a/config/donation-settings.js b/config/donation-settings.js index f3775b5ad2..f04359b0d1 100644 --- a/config/donation-settings.js +++ b/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 }; diff --git a/config/read-env.js b/config/read-env.js index 138454fec1..a2b67d3833 100644 --- a/config/read-env.js +++ b/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' }); diff --git a/sample.env b/sample.env index dcc819adf4..22c5a5fd83 100644 --- a/sample.env +++ b/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 # ---------------------