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>
This commit is contained in:
Ahmad Abdolsaheb
GitHub
21
client/src/assets/images/components/patreon-logo.tsx
Normal file
21
client/src/assets/images/components/patreon-logo.tsx
Normal file
@ -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;
|
||||
@ -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}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -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;
|
||||
|
||||
41
client/src/components/Donation/patreon-button.tsx
Normal file
41
client/src/components/Donation/patreon-button.tsx
Normal file
@ -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;
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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'
|
||||
});
|
||||
|
||||
@ -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
|
||||
# ---------------------
|
||||
|
||||
Reference in New Issue
Block a user