feat(client): add google pay (#43117)

* feat: initial button setup client

* feat: rename walletsButton to .tsx

* chore: typescriptize wallet component

* chore: re-add keys to config, env, etc + check in gatsby-node

* feat: refactor donate form and wallet component

* feat(client): set labels correctly

* chore: add stripe package back to server

* chore: add stripe back to allowed paths

* chore: copy donate.js code from PR #41924

* feat: attempt to make back end work

* feat: make redux work

* feat: clean up

* feat: hokify

* feat: add error handling

* fix: back-end should be working

* fix: type errors

* fix: clean up back-end

* feat:addd styles

* feat: connect the client to the api

* feat: display wallets button everywhere

* test: add stripe key for cypress action

* test: fix for cypress tests

* test: cypress tests again

* test: maybe?

* test: more

* test: more

* test: more

* test

* askdfjasklfj

* fix: tests finally?

* revert: remove space from cypress yaml action

* remove logs

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/redux/action-types.js

@@ -27,7 +27,8 @@ export const actionTypes = createTypes(
     ...createAsyncTypes('fetchProfileForUser'),
     ...createAsyncTypes('acceptTerms'),
     ...createAsyncTypes('showCert'),
-    ...createAsyncTypes('reportUser')
+    ...createAsyncTypes('reportUser'),
+    ...createAsyncTypes('postChargeStripe')
   ],
   ns
 );

client/src/redux/donation-saga.js

@@ -1,5 +1,13 @@
-import { put, select, takeEvery, delay, call, take } from 'redux-saga/effects';
-import { addDonation } from '../utils/ajax';
+import {
+  put,
+  select,
+  takeEvery,
+  takeLeading,
+  delay,
+  call,
+  take
+} from 'redux-saga/effects';
+import { addDonation, postChargeStripe } from '../utils/ajax';
 import { actionTypes as appTypes } from './action-types';
 
 import {
@@ -9,7 +17,9 @@ import {
   preventProgressDonationRequests,
   recentlyClaimedBlockSelector,
   addDonationComplete,
-  addDonationError
+  addDonationError,
+  postChargeStripeComplete,
+  postChargeStripeError
 } from './';
 
 const defaultDonationError = `Something is not right. Please contact donors@freecodecamp.org`;
@@ -44,9 +54,23 @@ function* addDonationSaga({ payload }) {
   }
 }
 
+function* postChargeStripeSaga({ payload }) {
+  try {
+    yield call(postChargeStripe, payload);
+    yield put(postChargeStripeComplete());
+  } catch (error) {
+    const err =
+      error.response && error.response.data
+        ? error.response.data.error
+        : defaultDonationError;
+    yield put(postChargeStripeError(err));
+  }
+}
+
 export function createDonationSaga(types) {
   return [
     takeEvery(types.tryToShowDonationModal, showDonateModalSaga),
-    takeEvery(types.addDonation, addDonationSaga)
+    takeEvery(types.addDonation, addDonationSaga),
+    takeLeading(types.postChargeStripe, postChargeStripeSaga)
   ];
 }

client/src/redux/index.js

@@ -125,6 +125,14 @@ export const addDonationComplete = createAction(
 );
 export const addDonationError = createAction(actionTypes.addDonationError);
 
+export const postChargeStripe = createAction(actionTypes.postChargeStripe);
+export const postChargeStripeComplete = createAction(
+  actionTypes.postChargeStripeComplete
+);
+export const postChargeStripeError = createAction(
+  actionTypes.postChargeStripeError
+);
+
 export const fetchProfileForUser = createAction(
   actionTypes.fetchProfileForUser
 );
@@ -415,6 +423,29 @@ export const reducer = handleActions(
       ...state,
       donationFormState: { ...defaultDonationFormState, error: payload }
     }),
+    [actionTypes.postChargeStripe]: state => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, processing: true }
+    }),
+    [actionTypes.postChargeStripeComplete]: state => {
+      const { appUsername } = state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          [appUsername]: {
+            ...state.user[appUsername],
+            isDonating: true
+          }
+        },
+
+        donationFormState: { ...defaultDonationFormState, success: true }
+      };
+    },
+    [actionTypes.postChargeStripeError]: (state, { payload }) => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, error: payload }
+    }),
     [actionTypes.fetchUser]: state => ({
       ...state,
       userFetchState: { ...defaultFetchState }