diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index cc941594e8..6b0d35ba4a 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -357,6 +357,7 @@ "try-again": "Please try again.", "card-number": "Your Card Number:", "expiration": "Expiration Date:", + "secure-donation": "Secure donation", "faq": "Frequently asked questions", "only-you": "Only you can see this message. Congratulations on earning this certification. It's no easy task. Running freeCodeCamp isn't easy either. Nor is it cheap. Help us help you and many other people around the world. Make a tax-deductible supporting donation to our nonprofit today.", "get-help": "How can I get help with my donations?", diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx index f417a80f19..c57f26a80a 100644 --- a/client/src/components/Donation/donate-form.tsx +++ b/client/src/components/Donation/donate-form.tsx @@ -335,11 +335,18 @@ class DonateForm extends Component { return ( <> - {isAVariant === false && } {this.getDonationButtonLabel()}: -
+
+ {!isAVariant && ( + + + {t('donate.secure-donation')} + + )} {loading.stripe && loading.paypal && this.paymentButtonsLoader()} { processing={processing} t={t} theme={priorityTheme} - isAVariant={isAVariant} /> )} -
+ ); } diff --git a/client/src/components/Donation/donation.css b/client/src/components/Donation/donation.css index 1d69c265d5..61417c928d 100644 --- a/client/src/components/Donation/donation.css +++ b/client/src/components/Donation/donation.css @@ -334,10 +334,6 @@ li.disabled > a { height: 22px; } -.confirm-donation-btn svg.svg-inline--fa.fa-lock { - margin-bottom: 2px; -} - @media screen and (min-width: 355px) { .form-payment-methods { height: 30px; @@ -541,3 +537,20 @@ a.patreon-button:hover { font-size: 1em; border-left-color: var(--quaternary-background); } + +.test-btn-group { + padding: 10px; + border: 2px solid var(--quaternary-background); + border-radius: 4px; +} + +.test-btn-group > legend { + width: fit-content; + font-size: 0.9em; + color: var(--quaternary-color); + border: none; + margin-bottom: 0; + padding: 0 4px; + left: 0; + margin-left: -2px; +} diff --git a/client/src/components/Donation/stripe-card-form.tsx b/client/src/components/Donation/stripe-card-form.tsx index 2ef5568e89..312558c1a6 100644 --- a/client/src/components/Donation/stripe-card-form.tsx +++ b/client/src/components/Donation/stripe-card-form.tsx @@ -17,7 +17,6 @@ import React, { useState } from 'react'; import envData from '../../../../config/env.json'; import { Themes } from '../settings/theme'; import { AddDonationData } from './paypal-button'; -import SecurityLockIcon from './security-lock-icon'; const { stripePublicKey }: { stripePublicKey: string | null } = envData; @@ -35,7 +34,6 @@ interface FormPropTypes { t: (label: string) => string; theme: Themes; processing: boolean; - isAVariant: boolean; } interface Element { @@ -51,8 +49,7 @@ const StripeCardForm = ({ t, onDonationStateChange, postStripeCardDonation, - processing, - isAVariant + processing }: FormPropTypes): JSX.Element => { const [isSubmissionValid, setSubmissionValidity] = useState(true); const [isTokenizing, setTokenizing] = useState(false); @@ -170,7 +167,6 @@ const StripeCardForm = ({ disabled={!stripe || !elements || isSubmitting} type='submit' > - {isAVariant === false && } {t('buttons.donate')} diff --git a/config/donation-settings.js b/config/donation-settings.js index 789a2125af..ebac0e547c 100644 --- a/config/donation-settings.js +++ b/config/donation-settings.js @@ -94,7 +94,7 @@ const patreonDefaultPledgeAmount = 500; const aBTestConfig = { isTesting: true, - type: 'addSecurityLock' + type: 'secureDonationBorder' }; module.exports = {