Make customer portal URL configurable

This commit adds the ability to set up
the URL of the customer portal via
an environment variable so all
requests and URLs can be routed
to local instance of customer portal.

ee/app/assets/javascripts/billings/components/app.vue

@@ -11,12 +11,17 @@ export default {
     planUpgradeHref: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
     namespaceId: {
       type: String,
       required: false,
-      default: null,
+      default: '',
+    },
+    customerPortalUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
     namespaceName: {
       type: String,
@@ -33,5 +38,9 @@ export default {
 </script>
 
 <template>
-  <subscription-table :namespace-name="namespaceName" :plan-upgrade-href="planUpgradeHref" />
+  <subscription-table
+    :namespace-name="namespaceName"
+    :plan-upgrade-href="planUpgradeHref"
+    :customer-portal-url="customerPortalUrl"
+  />
 </template>

ee/app/assets/javascripts/billings/components/subscription_table.vue

@@ -4,12 +4,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SubscriptionTableRow from './subscription_table_row.vue';
-import {
-  CUSTOMER_PORTAL_URL,
-  TABLE_TYPE_DEFAULT,
-  TABLE_TYPE_FREE,
-  TABLE_TYPE_TRIAL,
-} from '../constants';
+import { TABLE_TYPE_DEFAULT, TABLE_TYPE_FREE, TABLE_TYPE_TRIAL } from '../constants';
 
 export default {
   name: 'SubscriptionTable',
@@ -22,10 +17,15 @@ export default {
       type: String,
       required: true,
     },
+    customerPortalUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     planUpgradeHref: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
   },
   computed: {
@@ -44,7 +44,8 @@ export default {
 
       return {
         text: s__('SubscriptionTable|Upgrade'),
-        href: !this.isFreePlan && this.planUpgradeHref ? this.planUpgradeHref : CUSTOMER_PORTAL_URL,
+        href:
+          !this.isFreePlan && this.planUpgradeHref ? this.planUpgradeHref : this.customerPortalUrl,
       };
     },
     manageButton() {
@@ -54,7 +55,7 @@ export default {
 
       return {
         text: s__('SubscriptionTable|Manage'),
-        href: CUSTOMER_PORTAL_URL,
+        href: this.customerPortalUrl,
       };
     },
     buttons() {
@@ -78,7 +79,6 @@ export default {
   methods: {
     ...mapActions('subscription', ['fetchSubscription']),
   },
-  customerPortalUrl: CUSTOMER_PORTAL_URL,
 };
 </script>
 
@@ -89,7 +89,7 @@ export default {
       class="card prepend-top-default subscription-table js-subscription-table"
     >
       <div class="js-subscription-header card-header">
-        <strong> {{ subscriptionHeader }} </strong>
+        <strong>{{ subscriptionHeader }}</strong>
         <div class="controls">
           <a
             v-for="(button, index) in buttons"
@@ -99,9 +99,8 @@ export default {
             rel="noopener noreferrer"
             class="btn btn-inverted-secondary"
             :class="{ 'ml-2': index !== 0 }"
+            >{{ button.text }}</a
           >
-            {{ button.text }}
-          </a>
         </div>
       </div>
       <div class="card-body flex-grid d-flex flex-column flex-sm-row flex-md-row flex-lg-column">

ee/app/assets/javascripts/billings/constants.js

-export const CUSTOMER_PORTAL_URL = 'https://customers.gitlab.com/subscriptions';
 export const TABLE_TYPE_DEFAULT = 'default';
 export const TABLE_TYPE_FREE = 'free';
 export const TABLE_TYPE_TRIAL = 'trial';

ee/app/assets/javascripts/billings/index.js

@@ -17,12 +17,13 @@ export default (containerId = 'js-billing-plans') => {
     },
     data() {
       const { dataset } = this.$options.el;
-      const { namespaceId, namespaceName, planUpgradeHref } = dataset;
+      const { namespaceId, namespaceName, planUpgradeHref, customerPortalUrl } = dataset;
 
       return {
         namespaceId,
         namespaceName,
         planUpgradeHref,
+        customerPortalUrl,
       };
     },
     render(createElement) {
@@ -31,6 +32,7 @@ export default (containerId = 'js-billing-plans') => {
           namespaceId: this.namespaceId,
           namespaceName: this.namespaceName,
           planUpgradeHref: this.planUpgradeHref,
+          customerPortalUrl: this.customerPortalUrl,
         },
       });
     },

ee/app/helpers/billing_plans_helper.rb

@@ -31,7 +31,8 @@ module BillingPlansHelper
     {
       namespace_id: group.id,
       namespace_name: group.name,
-      plan_upgrade_href: plan_upgrade_url(group, plan)
+      plan_upgrade_href: plan_upgrade_url(group, plan),
+      customer_portal_url: "#{EE::SUBSCRIPTIONS_URL}/subscriptions"
     }
   end
 

ee/lib/ee.rb

 # frozen_string_literal: true
 
 module EE
-  SUBSCRIPTIONS_URL = 'https://customers.gitlab.com'.freeze
+  SUBSCRIPTIONS_URL = ENV.fetch('CUSTOMER_PORTAL_URL', 'https://customers.gitlab.com').freeze
   SUBSCRIPTIONS_PLANS_URL = "#{SUBSCRIPTIONS_URL}/plans".freeze
   SUBSCRIPTIONS_MORE_MINUTES_URL = "#{SUBSCRIPTIONS_URL}/buy_pipeline_minutes".freeze
   CUSTOMER_SUPPORT_URL = 'https://support.gitlab.com'.freeze

ee/spec/frontend/billings/components/__snapshots__/app_spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`SubscriptionApp component on creation matches the snapshot 1`] = `
 <subscriptiontable-stub
+  customerportalurl="https://customers.gitlab.com/subscriptions"
   namespacename="bronze"
   planupgradehref="/url"
 />

ee/spec/frontend/billings/components/app_spec.js

@@ -11,6 +11,7 @@ describe('SubscriptionApp component', () => {
     namespaceId: '42',
     namespaceName: 'bronze',
     planUpgradeHref: '/url',
+    customerPortalUrl: 'https://customers.gitlab.com/subscriptions',
   };
 
   const factory = (props = appProps) => {
@@ -57,6 +58,7 @@ describe('SubscriptionApp component', () => {
       expectComponentWithProps(SubscriptionTable, {
         namespaceName: appProps.namespaceName,
         planUpgradeHref: appProps.planUpgradeHref,
+        customerPortalUrl: appProps.customerPortalUrl,
       });
     });
   });

ee/spec/frontend/billings/components/subscription_table_spec.js

@@ -8,6 +8,7 @@ import SubscriptionTableRow from 'ee/billings/components/subscription_table_row.
 import mockDataSubscription from '../mock_data';
 
 const TEST_NAMESPACE_NAME = 'GitLab.com';
+const CUSTOMER_PORTAL_URL = 'https://customers.gitlab.com/subscriptions';
 
 describe('SubscriptionTable component', () => {
   let store;
@@ -40,6 +41,7 @@ describe('SubscriptionTable component', () => {
         propsData: {
           namespaceName: TEST_NAMESPACE_NAME,
           planUpgradeHref: '/url/',
+          customerPortalUrl: CUSTOMER_PORTAL_URL,
         },
       });
 
@@ -100,6 +102,7 @@ describe('SubscriptionTable component', () => {
         factory({
           propsData: {
             namespaceName: TEST_NAMESPACE_NAME,
+            customerPortalUrl: CUSTOMER_PORTAL_URL,
             planUpgradeHref,
           },
         });

ee/spec/helpers/billing_plans_helper_spec.rb

@@ -18,6 +18,8 @@ describe BillingPlansHelper do
   end
 
   describe '#subscription_plan_data_attributes' do
+    let(:customer_portal_url) { "https://customers.gitlab.com/subscriptions" }
+
     let(:group) { build(:group) }
     let(:plan) do
       Hashie::Mash.new(id: 'external-paid-plan-hash-code')
@@ -31,7 +33,8 @@ describe BillingPlansHelper do
         expect(helper.subscription_plan_data_attributes(group, plan))
           .to eq(namespace_id: group.id,
                  namespace_name: group.name,
-                 plan_upgrade_href: upgrade_href)
+                 plan_upgrade_href: upgrade_href,
+                 customer_portal_url: customer_portal_url)
       end
     end
 
@@ -50,6 +53,7 @@ describe BillingPlansHelper do
         expect(helper.subscription_plan_data_attributes(group, plan))
           .to eq(namespace_id: group.id,
                  namespace_name: group.name,
+                 customer_portal_url: customer_portal_url,
                  plan_upgrade_href: nil)
       end
     end