Feat(subscription/buy_minutes): add route

Apply 1 suggestion(s) to 1 file(s)

config/feature_flags/development/new_route_ci_minutes_purchase.yml

+---
+name: new_route_ci_minutes_purchase
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54934
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/322582
+milestone: '13.10'
+type: development
+group: group::purchase
+default_enabled: false

ee/app/assets/javascripts/pages/subscriptions/buy_minutes/index.js

+import mountSubscriptionsApplication from 'ee/subscriptions/buy_minutes';
+
+mountSubscriptionsApplication();

ee/app/assets/javascripts/subscriptions/buy_minutes/components/app.vue

+<script>
+import StepOrderApp from 'ee/vue_shared/components/step_order_app.vue';
+
+export default {
+  components: {
+    StepOrderApp,
+  },
+};
+</script>
+<template>
+  <step-order-app>
+    <template #checkout></template>
+    <template #order-summary></template>
+  </step-order-app>
+</template>

ee/app/assets/javascripts/subscriptions/buy_minutes/index.js

+import Vue from 'vue';
+import App from './components/app.vue';
+
+export default () => {
+  const el = document.getElementById('js-buy-minutes');
+
+  return new Vue({
+    el,
+    components: {
+      App,
+    },
+    render(createElement) {
+      return createElement(App);
+    },
+  });
+};

ee/app/assets/javascripts/subscriptions/new/components/app.vue

+<script>
+import StepOrderApp from 'ee/vue_shared/components/step_order_app.vue';
+import Checkout from './checkout.vue';
+import OrderSummary from './order_summary.vue';
+
+export default {
+  components: {
+    StepOrderApp,
+    Checkout,
+    OrderSummary,
+  },
+};
+</script>
+<template>
+  <step-order-app>
+    <template #checkout>
+      <checkout />
+    </template>
+    <template #order-summary>
+      <order-summary />
+    </template>
+  </step-order-app>
+</template>

ee/app/assets/javascripts/subscriptions/new/index.js

 import Vue from 'vue';
-import Checkout from './components/checkout.vue';
-import OrderSummary from './components/order_summary.vue';
+import App from './components/app.vue';
 import createStore from './store';
 
 export default () => {
-  const checkoutEl = document.getElementById('checkout');
-  const summaryEl = document.getElementById('summary');
-  const store = createStore(checkoutEl.dataset);
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: checkoutEl,
-    store,
-    render(createElement) {
-      return createElement(Checkout);
-    },
-  });
+  const el = document.getElementById('js-new-subscription');
+  const store = createStore(el.dataset);
 
   return new Vue({
-    el: summaryEl,
+    el,
     store,
+    components: {
+      App,
+    },
     render(createElement) {
-      return createElement(OrderSummary);
+      return createElement(App);
     },
   });
 };

ee/app/assets/javascripts/vue_shared/components/step_order_app.vue

+<template>
+  <div
+    class="row gl-flex-grow-1 gl-flex-direction-column flex-nowrap gl-lg-flex-direction-row flex-xl-row flex-lg-wrap flex-xl-wrap"
+  >
+    <div
+      class="checkout-pane gl-px-3 gl-align-items-center gl-bg-gray-10 col-lg-7 gl-display-flex gl-flex-direction-column gl-flex-grow-1"
+    >
+      <slot name="checkout"></slot>
+    </div>
+    <div
+      class="gl-pb-3 gl-px-3 px-lg-7 col-lg-5 gl-display-flex gl-flex-direction-row gl-justify-content-center"
+    >
+      <slot name="order-summary"></slot>
+    </div>
+  </div>
+</template>

ee/app/controllers/subscriptions_controller.rb

@@ -2,7 +2,7 @@
 
 class SubscriptionsController < ApplicationController
   layout 'checkout'
-  skip_before_action :authenticate_user!, only: :new
+  skip_before_action :authenticate_user!, only: [:new, :buy_minutes]
 
   feature_category :purchase
 
@@ -24,10 +24,12 @@ class SubscriptionsController < ApplicationController
   end
 
   def new
-    return if current_user
+    redirect_unauthenticated_user('checkout')
+  end
 
-    store_location_for :user, request.fullpath
-    redirect_to new_user_registration_path(redirect_from: 'checkout')
+  def buy_minutes
+    render_404 unless Feature.enabled?(:new_route_ci_minutes_purchase, default_enabled: :yaml)
+    redirect_unauthenticated_user
   end
 
   def payment_form
@@ -90,4 +92,11 @@ class SubscriptionsController < ApplicationController
   def customer_portal_new_subscription_url
     "#{EE::SUBSCRIPTIONS_URL}/subscriptions/new?plan_id=#{params[:plan_id]}&transaction=create_subscription"
   end
+
+  def redirect_unauthenticated_user(from = action_name)
+    return if current_user
+
+    store_location_for :user, request.fullpath
+    redirect_to new_user_registration_path(redirect_from: from)
+  end
 end

ee/app/views/subscriptions/buy_minutes.html.haml

+- page_title _('Buy CI Minutes')
+
+#js-buy-minutes{ data: subscription_data }

ee/app/views/subscriptions/new.html.haml

 - page_title _('Checkout')
 
-.row.flex-grow-1.flex-column.flex-nowrap.flex-lg-row.flex-xl-row.flex-lg-wrap.flex-xl-wrap
-  .checkout-pane.px-3.align-items-center.bg-gray-light.col-lg-7.d-flex.flex-column.flex-grow-1
-    #checkout{ data: subscription_data }
-  .pb-3.px-3.px-lg-7.col-lg-5.d-flex.flex-row.justify-content-center
-    #summary
+#js-new-subscription{ data: subscription_data }
+

ee/config/routes/subscription.rb

 # frozen_string_literal: true
 
 resource :subscriptions, only: [:new, :create] do
+  get :buy_minutes
   get :payment_form
   get :payment_method
 

ee/spec/controllers/subscriptions_controller_spec.rb

@@ -5,21 +5,39 @@ require 'spec_helper'
 RSpec.describe SubscriptionsController do
   let_it_be(:user) { create(:user) }
 
-  describe 'GET #new' do
-    subject { get :new, params: { plan_id: 'bronze_id' } }
+  shared_examples 'unauthenticated subscription request' do |redirect_from|
+    it { is_expected.to have_gitlab_http_status(:redirect) }
+    it { is_expected.to redirect_to new_user_registration_path(redirect_from: redirect_from) }
 
-    context 'with unauthenticated user' do
-      it { is_expected.to have_gitlab_http_status(:redirect) }
-      it { is_expected.to redirect_to new_user_registration_path(redirect_from: 'checkout') }
+    it 'stores subscription URL for later' do
+      subject
 
-      it 'stores subscription URL for later' do
-        subject
+      expected_subscription_path = new_subscriptions_path(plan_id: 'bronze_id') if redirect_from == 'checkout'
+      expected_subscription_path = buy_minutes_subscriptions_path(plan_id: 'bronze_id') if redirect_from == 'buy_minutes'
 
-        expected_subscription_path = new_subscriptions_path(plan_id: 'bronze_id')
+      expect(controller.stored_location_for(:user)).to eq(expected_subscription_path)
+    end
+  end
 
-        expect(controller.stored_location_for(:user)).to eq(expected_subscription_path)
+  describe 'GET #new' do
+    subject { get :new, params: { plan_id: 'bronze_id' } }
+
+    it_behaves_like 'unauthenticated subscription request', 'checkout'
+
+    context 'with authenticated user' do
+      before do
+        sign_in(user)
       end
+
+      it { is_expected.to render_template 'layouts/checkout' }
+      it { is_expected.to render_template :new }
     end
+  end
+
+  describe 'GET #buy_minutes' do
+    subject { get :buy_minutes, params: { plan_id: 'bronze_id' } }
+
+    it_behaves_like 'unauthenticated subscription request', 'buy_minutes'
 
     context 'with authenticated user' do
       before do
@@ -27,7 +45,16 @@ RSpec.describe SubscriptionsController do
       end
 
       it { is_expected.to render_template 'layouts/checkout' }
-      it { is_expected.to render_template :new }
+      it { is_expected.to render_template :buy_minutes }
+    end
+
+    context 'with :new_route_ci_minutes_purchase disabled' do
+      before do
+        sign_in(user)
+        stub_feature_flags(new_route_ci_minutes_purchase: false)
+      end
+
+      it { is_expected.to have_gitlab_http_status(:not_found) }
     end
   end
 

ee/spec/support/shared_examples/views/subscription_shared_examples.rb

+# frozen_string_literal: true
+RSpec.shared_examples_for 'subscription form data' do |js_selector|
+  before do
+    allow(view).to receive(:subscription_data).and_return(
+      setup_for_company: 'true',
+      full_name: 'First Last',
+      plan_data: '[{"id":"bronze_id","code":"bronze","price_per_year":48.0}]',
+      plan_id: 'bronze_id'
+    )
+  end
+
+  subject { render }
+
+  it { is_expected.to have_selector("#{js_selector}[data-setup-for-company='true']") }
+  it { is_expected.to have_selector("#{js_selector}[data-full-name='First Last']") }
+  it { is_expected.to have_selector("#{js_selector}[data-plan-data='[{\"id\":\"bronze_id\",\"code\":\"bronze\",\"price_per_year\":48.0}]']") }
+  it { is_expected.to have_selector("#{js_selector}[data-plan-id='bronze_id']") }
+end

ee/spec/views/subscriptions/buy_minutes.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'subscriptions/buy_minutes' do
+  it_behaves_like 'subscription form data', '#js-buy-minutes'
+end

ee/spec/views/subscriptions/new.html.haml_spec.rb

@@ -3,19 +3,5 @@
 require 'spec_helper'
 
 RSpec.describe 'subscriptions/new' do
-  before do
-    allow(view).to receive(:subscription_data).and_return(
-      setup_for_company: 'true',
-      full_name: 'First Last',
-      plan_data: '[{"id":"bronze_id","code":"bronze","price_per_year":48.0}]',
-      plan_id: 'bronze_id'
-    )
-  end
-
-  subject { render }
-
-  it { is_expected.to have_selector("#checkout[data-setup-for-company='true']") }
-  it { is_expected.to have_selector("#checkout[data-full-name='First Last']") }
-  it { is_expected.to have_selector("#checkout[data-plan-data='[{\"id\":\"bronze_id\",\"code\":\"bronze\",\"price_per_year\":48.0}]']") }
-  it { is_expected.to have_selector("#checkout[data-plan-id='bronze_id']") }
+  it_behaves_like 'subscription form data', '#js-new-subscription'
 end

locale/gitlab.pot

@@ -5199,6 +5199,9 @@ msgstr ""
 msgid "Busy"
 msgstr ""
 
+msgid "Buy CI Minutes"
+msgstr ""
+
 msgid "Buy License"
 msgstr ""