feat(client): add secure donation border to donation form (#45637)

* feat: add secure donation border to donation form

* feat: add string to translations

* Apply suggestions from code review

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

* feat: cleanup and reorder logic

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

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?",

client/src/components/Donation/donate-form.tsx

@@ -335,11 +335,18 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     return (
       <>
         <b className={isMinimalForm ? 'donation-label-modal' : ''}>
-          {isAVariant === false && <SecurityLockIcon />}
           {this.getDonationButtonLabel()}:
         </b>
         <Spacer />
-        <div className={'donate-btn-group'}>
+        <fieldset
+          className={`donate-btn-group ${isAVariant ? '' : 'test-btn-group'}`}
+        >
+          {!isAVariant && (
+            <legend>
+              <SecurityLockIcon />
+              {t('donate.secure-donation')}
+            </legend>
+          )}
           {loading.stripe && loading.paypal && this.paymentButtonsLoader()}
           <WalletsWrapper
             amount={donationAmount}
@@ -374,11 +381,10 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
                 processing={processing}
                 t={t}
                 theme={priorityTheme}
-                isAVariant={isAVariant}
               />
             </>
           )}
-        </div>
+        </fieldset>
       </>
     );
   }

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;
+}

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,
+  processing
-  isAVariant
 }: 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 && <SecurityLockIcon />}
         {t('buttons.donate')}
       </Button>
     </Form>

config/donation-settings.js

@@ -94,7 +94,7 @@ const patreonDefaultPledgeAmount = 500;
 
 const aBTestConfig = {
   isTesting: true,
-  type: 'addSecurityLock'
+  type: 'secureDonationBorder'
 };
 
 module.exports = {