feat(payments-next):Redirect old Subscription Management page to new page

packages/fxa-content-server/app/scripts/lib/payment-server.js

@@ -19,12 +19,16 @@ const PaymentServer = {
    * @param {Object} subscriptionsConfig
    * @param {String} redirectPath
    * @param {Object} [rpQueryParams={}]
+   * @param {String} [paymentsNextUrl]
+   * @param {Boolean} [usePaymentsNext]
    */
   async navigateToPaymentServer(
     view,
     subscriptionsConfig,
     redirectPath,
-    rpQueryParams = {}
+    rpQueryParams = {},
+    paymentsNextUrl,
+    usePaymentsNext,
   ) {
     const {
       managementClientId,
@@ -63,7 +67,8 @@ const PaymentServer = {
             flow_id: flowId,
             ...rpQueryParams,
           });
-    const url = `${managementUrl}/${redirectPath}${queryString}`;
+    const baseUrl = usePaymentsNext ? paymentsNextUrl : managementUrl;
+    const url = `${baseUrl}/${redirectPath}${queryString}`;
 
     const unauthenticatedRedirect = () => {
       if (isAllowedUnauthenticatedRoute(redirectPath)) {

packages/fxa-content-server/app/scripts/views/subscriptions_management_redirect.js

@@ -14,8 +14,15 @@ class SubscriptionsManagementRedirectView extends FormView {
 
   initialize(options) {
     this._subscriptionsConfig = {};
-    if (options && options.config && options.config.subscriptions) {
-      this._subscriptionsConfig = options.config.subscriptions;
+    this._paymentsNextUrl = undefined;
+    if (options && options.config) {
+      if (options.config.subscriptions) {
+        this._subscriptionsConfig = options.config.subscriptions;
+        this._usePaymentsNext = !!options.config.subscriptions.usePaymentsNextSubscriptionManagement;
+      }
+      if (options.config.paymentsNextHostedUrl) {
+        this._paymentsNextUrl = options.config.paymentsNextHostedUrl;
+      }
     }
 
     // Flow events need to be initialized before the navigation
@@ -27,7 +34,10 @@ class SubscriptionsManagementRedirectView extends FormView {
     return PaymentServer.navigateToPaymentServer(
       this,
       this._subscriptionsConfig,
-      'subscriptions'
+      this._usePaymentsNext ? 'subscriptions/landing' : 'subscriptions',
+      {},
+      this._paymentsNextUrl,
+      this._usePaymentsNext,
     );
   }
 }

packages/fxa-content-server/app/scripts/views/support.js

@@ -46,8 +46,15 @@ const SupportView = BaseView.extend({
     this.productSupportApps = {};
 
     this._subscriptionsConfig = {};
-    if (options && options.config && options.config.subscriptions) {
-      this._subscriptionsConfig = options.config.subscriptions;
+    this._paymentsNextUrl = undefined;
+    if (options && options.config) {
+      if (options.config.subscriptions) {
+        this._subscriptionsConfig = options.config.subscriptions;
+        this._usePaymentsNext = !!options.config.subscriptions.usePaymentsNextSubscriptionManagement;
+      }
+      if (options.config.paymentsNextHostedUrl) {
+        this._paymentsNextUrl = options.config.paymentsNextHostedUrl;
+      }
     }
   },
 
@@ -334,8 +341,10 @@ const SupportView = BaseView.extend({
     PaymentServer.navigateToPaymentServer(
       this,
       this._subscriptionsConfig,
-      'subscriptions',
-      queryParams
+      this._usePaymentsNext ? 'subscriptions/landing' : 'subscriptions',
+      queryParams,
+      this._paymentsNextUrl,
+      this._usePaymentsNext,
     );
   },
 });

packages/fxa-content-server/app/tests/spec/views/subscriptions_management_redirect.js

@@ -36,7 +36,9 @@ describe('views/subscriptions_management_redirect', function () {
         managementScopes: 'MOCK_SCOPES',
         managementTokenTTL: 900,
         managementUrl: 'http://example.com',
+        usePaymentsNextSubscriptionManagement: true,
       },
+      paymentsNextHostedUrl: 'http://payments-next.example.com',
     };
 
     sinon.stub(user, 'sessionStatus').callsFake(() => Promise.resolve(account));
@@ -68,8 +70,16 @@ describe('views/subscriptions_management_redirect', function () {
     it('renders correctly, initializes flow events, navigates to payments server', () => {
       assert.lengthOf(view.$('.redirect-loading'), 1);
       assert.isTrue(view.initializeFlowEvents.calledOnce);
-      assert.deepEqual(PaymentServer.navigateToPaymentServer.args, [
-        [view, config.subscriptions, 'subscriptions'],
+      assert.deepEqual(
+        PaymentServer.navigateToPaymentServer.args, [
+        [
+          view,
+          config.subscriptions,
+          'subscriptions/landing',
+          {},
+          config.paymentsNextHostedUrl,
+          true,
+        ],
       ]);
     });
   });

packages/fxa-content-server/server/lib/configuration.js

@@ -1032,6 +1032,12 @@ const conf = (module.exports = convict({
       env: 'SUBSCRIPTIONS_FIRESTORE_CONFIGS_ENABLED',
       format: Boolean,
     },
+    usePaymentsNextSubscriptionManagement : {
+      default: true,
+      doc: 'Whether to redirect to the new Subscription Management Page',
+      env: 'FEATURE_FLAGS_PAYMENTS_NEXT_SUBSCRIPTION_MANAGEMENT',
+      format: Boolean,
+    }
   },
   sync_tokenserver_url: {
     default: 'http://localhost:8000/token',

packages/fxa-content-server/server/lib/routes/react-app/route-definition-index.js

@@ -82,9 +82,11 @@ function getIndexRouteDefinition(config) {
   const WEBPACK_PUBLIC_PATH = `${STATIC_RESOURCE_URL}/${config.get(
     'jsResourcePath'
   )}/`;
+  const PAYMENTS_NEXT_HOSTED_URL = config.get('payments_next_hosted_url');
 
   const configForFrontEnd = {
     authServerUrl: AUTH_SERVER_URL,
+    paymentsNextHostedUrl: PAYMENTS_NEXT_HOSTED_URL,
     maxEventOffset: MAX_EVENT_OFFSET,
     env: ENV,
     isCoppaEnabled: COPPA_ENABLED,

packages/fxa-payments-server/server/config/index.js

@@ -24,6 +24,12 @@ const conf = convict({
       env: 'SUBSCRIPTIONS_STRIPE_TAX_ENABLED',
       format: Boolean,
     },
+    paymentsNextSubscriptionManagement: {
+      default: false,
+      doc: 'Whether to redirect to the new Subscription Management Page',
+      format: Boolean,
+      env: 'FEATURE_FLAGS_PAYMENTS_NEXT_SUBSCRIPTION_MANAGEMENT',
+    },
   },
   amplitude: {
     enabled: {
@@ -357,6 +363,14 @@ const conf = convict({
         format: 'url',
       },
     },
+    paymentsNext: {
+      url: {
+        default: 'http://localhost:3035',
+        doc: 'the url of the Payments-Next server',
+        env: 'PAYMENTS_NEXT_HOSTED_URL',
+        format: 'url',
+      }
+    }
   },
   staticResources: {
     directory: {

packages/fxa-payments-server/server/lib/server.js

@@ -91,6 +91,9 @@ module.exports = () => {
       profile: {
         url: config.get('servers.profile.url'),
       },
+      paymentsNext: {
+        url: config.get('servers.paymentsNext.url'),
+      }
     },
     paypal: {
       apiUrl: config.get('paypal.apiUrl'),
@@ -236,6 +239,33 @@ module.exports = () => {
     });
   }
 
+  app.use((req, res, next) => {
+    if (!FEATURE_FLAGS.paymentsNextSubscriptionManagement) {
+      return next();
+    }
+
+    let nextUrl;
+    try {
+      nextUrl = config.get('servers.paymentsNext.url');
+    } catch {
+      return next();
+    }
+    if (!nextUrl) {
+      return next();
+    }
+
+    if (req.path === '/subscriptions' || req.path.startsWith('/subscriptions/')) {
+      const queryBeginIndex = req.originalUrl.indexOf('?');
+      const queryString = queryBeginIndex >= 0 ? req.originalUrl.slice(queryBeginIndex) : '';
+
+      const redirectTo = `${nextUrl}/subscriptions/landing${queryString}`;
+
+      return res.redirect(redirectTo);
+    }
+
+    return next();
+  });
+
   // Note - the static route handlers must come last
   // because the proxyUrl handler's app.use('/') captures
   // all requests that match no others.