From 4034c59ba2c799f06ad2a4ecfdca1a995c61e3ff Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 7 Apr 2022 15:24:42 +0300
Subject: [PATCH] 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 |  1 +
 .../src/components/Donation/donate-form.tsx   | 14 +++++++++----
 client/src/components/Donation/donation.css   | 21 +++++++++++++++----
 .../components/Donation/stripe-card-form.tsx  |  6 +-----
 config/donation-settings.js                   |  2 +-
 5 files changed, 30 insertions(+), 14 deletions(-)

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<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>
       </>
     );
   }
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 && <SecurityLockIcon />}
         {t('buttons.donate')}
       </Button>
     </Form>
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 = {