fix(PayPal): update config pickup from env (#38423)

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/src/components/Donation/PaypalButton.js

@@ -5,9 +5,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { PayPalButton } from 'react-paypal-button-v2';
-import { paypalClientId } from '../../../config/env.json';
+import { paypalClientId, deploymentEnv } from '../../../config/env.json';
 import { verifySubscriptionPaypal } from '../../utils/ajax';
-import { paypalConfigurator } from '../../../../config/donation-settings';
+import {
+  paypalConfigurator,
+  paypalConfigTypes
+} from '../../../../config/donation-settings';
 import { signInLoadingSelector, userSelector } from '../../redux';
 
 export class PaypalButton extends Component {
@@ -23,7 +26,8 @@ export class PaypalButton extends Component {
 
     const configurationObj = paypalConfigurator(
       donationAmount,
-      donationDuration
+      donationDuration,
+      paypalConfigTypes[deploymentEnv || 'staging']
     );
     if (state === configurationObj) {
       return null;

config/donation-settings.js

@@ -1,6 +1,3 @@
-const path = require('path');
-require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
-
 // Configuration for client side
 const durationsConfig = {
   year: 'yearly',
@@ -48,10 +45,10 @@ const paypalConfigTypes = {
         planId: 'P-1L11422374370240ULZKX3PA'
       },
       '3500': {
-        planId: 'P-1L11422374370240ULZKX3PA'
+        planId: 'P-81U00703FF076883HLZ2PWMI'
       },
       '25000': {
-        planId: 'P-1L11422374370240ULZKX3PA'
+        planId: 'P-7M045671FN915794KLZ2PW6I'
       }
     },
     year: {
@@ -92,12 +89,7 @@ const paypalConfigTypes = {
   }
 };
 
-const paypalConfig =
-  process.env.DEPLOYMENT_ENV && process.env.DEPLOYMENT_ENV === 'live'
-    ? paypalConfigTypes['live']
-    : paypalConfigTypes['staging'];
-
-const paypalConfigurator = (donationAmount, donationDuration) => {
+const paypalConfigurator = (donationAmount, donationDuration, paypalConfig) => {
   if (donationDuration === 'onetime') {
     return { amount: donationAmount, duration: donationDuration };
   }
@@ -117,6 +109,6 @@ module.exports = {
   donationOneTimeConfig,
   donationSubscriptionConfig,
   modalDefaultStateConfig,
-  paypalConfig,
+  paypalConfigTypes,
   paypalConfigurator
 };

config/env.js

@@ -21,7 +21,8 @@ const {
   SERVICEBOT_ID: servicebotId,
   ALGOLIA_APP_ID: algoliaAppId,
   ALGOLIA_API_KEY: algoliaAPIKey,
-  PAYPAL_CLIENT_ID: paypalClientId
+  PAYPAL_CLIENT_ID: paypalClientId,
+  DEPLOYMENT_ENV: deploymentEnv
 } = process.env;
 
 const locations = {
@@ -35,6 +36,7 @@ const locations = {
 
 module.exports = Object.assign(locations, {
   locale,
+  deploymentEnv,
   stripePublicKey:
     !stripePublicKey || stripePublicKey === 'pk_from_stripe_dashboard'
       ? null