Merge branch 'vslobodin/configurable-customer-portal-url' into 'master'

Make customer portal URL configurable via environment variable

See merge request gitlab-org/gitlab!17284

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