Move WebConstants values to environment config files (#1184)

* Moving the web constants to the app config for more flexibility

* removing personal integrations from QA

* changing the PayPal Configuration setup to match the pattern in the services module

* removing the webConstants file after successful test

* renaming the braintree config key to something more understandable

config/base.json

@@ -1,3 +1,9 @@
 {
-    "urls": {}
+    "urls": {},
+    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
+    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
+    "paypal": {
+        "businessId": "AD3LAUZSNVPJY",
+        "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
+    }
 }

config/cloud.json

@@ -3,5 +3,11 @@
         "icons": "https://icons.bitwarden.net",
         "notifications": "https://notifications.bitwarden.com",
         "enterprise": "https://portal.bitwarden.com"
+    },
+    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
+    "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
+    "paypal": {
+        "businessId": "4ZDA7DLUUJGMN",
+        "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
     }
 }

config/qa.json

@@ -4,5 +4,4 @@
         "notifications": "https://notifications.qa.bitwarden.pw",
         "enterprise": "https://portal.qa.bitwarden.pw"
     }
-
 }

src/app/settings/add-credit.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
+import { PayPalConfig } from 'jslib-common/abstractions/environment.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -16,8 +17,6 @@ import { PaymentMethodType } from 'jslib-common/enums/paymentMethodType';
 
 import { BitPayInvoiceRequest } from 'jslib-common/models/request/bitPayInvoiceRequest';
 
-import { WebConstants } from '../../services/webConstants';
-
 @Component({
     selector: 'app-add-credit',
     templateUrl: 'add-credit.component.html',
@@ -33,8 +32,8 @@ export class AddCreditComponent implements OnInit {
     @ViewChild('ppButtonForm', { read: ElementRef, static: true }) ppButtonFormRef: ElementRef;
 
     paymentMethodType = PaymentMethodType;
-    ppButtonFormAction = WebConstants.paypal.buttonActionProduction;
-    ppButtonBusinessId = WebConstants.paypal.businessIdProduction;
+    ppButtonFormAction: string;
+    ppButtonBusinessId: string;
     ppButtonCustomField: string;
     ppLoading = false;
     subject: string;
@@ -47,10 +46,9 @@ export class AddCreditComponent implements OnInit {
 
     constructor(private userService: UserService, private apiService: ApiService,
         private platformUtilsService: PlatformUtilsService) {
-        if (process.env.ENV !== 'cloud' || platformUtilsService.isDev()) {
-            this.ppButtonFormAction = WebConstants.paypal.buttonActionSandbox;
-            this.ppButtonBusinessId = WebConstants.paypal.businessIdSandbox;
-        }
+        const payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig;
+        this.ppButtonFormAction = payPalConfig.buttonAction;
+        this.ppButtonBusinessId = payPalConfig.businessId;
     }
 
     async ngOnInit() {

src/app/settings/payment.component.ts

@@ -9,8 +9,6 @@ import { PaymentMethodType } from 'jslib-common/enums/paymentMethodType';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
-import { WebConstants } from '../../services/webConstants';
-
 const StripeElementStyle = {
     base: {
         color: '#333333',
@@ -67,8 +65,7 @@ export class PaymentComponent implements OnInit {
         this.stripeScript.src = 'https://js.stripe.com/v3/';
         this.stripeScript.async = true;
         this.stripeScript.onload = () => {
-            this.stripe = (window as any).Stripe(process.env.ENV === 'cloud' && !platformUtilsService.isDev() ?
-                WebConstants.stripeLiveKey : WebConstants.stripeTestKey);
+            this.stripe = (window as any).Stripe(process.env.STRIPE_KEY);
             this.stripeElements = this.stripe.elements();
             this.setStripeElement();
         };
@@ -126,8 +123,7 @@ export class PaymentComponent implements OnInit {
         if (this.method === PaymentMethodType.PayPal) {
             window.setTimeout(() => {
                 (window as any).braintree.dropin.create({
-                    authorization: process.env.ENV === 'cloud' ?
-                        WebConstants.btProductionKey : WebConstants.btSandboxKey,
+                    authorization: process.env.BRAINTREE_KEY,
                     container: '#bt-dropin-container',
                     paymentOptionPriority: ['paypal'],
                     paypal: {

src/services/webConstants.ts

@@ -1,12 +0,0 @@
-export class WebConstants {
-    static readonly stripeTestKey = 'pk_test_KPoCfZXu7mznb9uSCPZ2JpTD';
-    static readonly stripeLiveKey = 'pk_live_bpN0P37nMxrMQkcaHXtAybJk';
-    static readonly btSandboxKey = 'sandbox_r72q8jq6_9pnxkwm75f87sdc2';
-    static readonly btProductionKey = 'production_qfbsv8kc_njj2zjtyngtjmbjd';
-    static readonly paypal = {
-        businessIdProduction: '4ZDA7DLUUJGMN',
-        businessIdSandbox: 'AD3LAUZSNVPJY',
-        buttonActionProduction: 'https://www.paypal.com/cgi-bin/webscr',
-        buttonActionSandbox: 'https://www.sandbox.paypal.com/cgi-bin/webscr',
-    };
-}

webpack.config.js

@@ -148,6 +148,9 @@ const plugins = [
         'APPLICATION_VERSION': pjson.version,
         'CACHE_TAG': Math.random().toString(36).substring(7),
         'URLS': envConfig['urls'] ?? {},
+        'STRIPE_KEY': envConfig['stripeKey'] ?? '', 
+        'BRAINTREE_KEY': envConfig['braintreeKey'] ?? '',
+        'PAYPAL_CONFIG': envConfig['paypal'] ?? {},
     }),
     new AngularCompilerPlugin({
         tsConfigPath: 'tsconfig.json',