Merge branch 'growth-87-frontend-base' into 'master'

Base for the paid signup flow frontend app

See merge request gitlab-org/gitlab!21494

config/routes.rb

@@ -119,6 +119,7 @@ Rails.application.routes.draw do
       draw :trial_registration
       draw :country
       draw :country_state
+      draw :subscription
     end
 
     Gitlab.ee do

ee/app/assets/stylesheets/pages/subscriptions.scss

+/* Checkout Page */
+.subscriptions-layout-html {
+  .container {
+    margin: 0;
+    max-width: none;
+    padding-top: 40px;
+  }
+
+  .checkout-pane {
+    border-bottom: 1px solid $gray-200;
+    flex-grow: 1;
+    flex-shrink: 0;
+    padding-right: $gl-padding;
+    padding-left: $gl-padding;
+
+    @media(min-width: map-get($grid-breakpoints, lg)) {
+      border-bottom: 0;
+      border-right: 1px solid $border-color;
+    }
+  }
+
+  .summary-pane {
+    padding-bottom: $gl-padding;
+    padding-right: $gl-padding;
+    padding-left: $gl-padding;
+
+    @media(min-width: map-get($grid-breakpoints, lg)) {
+      padding-left: $gl-padding * 3;
+      padding-right: $gl-padding * 3;
+    }
+  }
+}

ee/app/controllers/subscriptions_controller.rb

+# frozen_string_literal: true
+
+class SubscriptionsController < ApplicationController
+  layout 'checkout'
+
+  def new
+    return redirect_to dashboard_projects_path unless Feature.enabled?(:paid_signup_flow)
+  end
+end

ee/app/helpers/subscriptions_helper.rb

+# frozen_string_literal: true
+
+module SubscriptionsHelper
+  def subscription_data
+    {
+      setup_for_company: (current_user.setup_for_company == true).to_s,
+      full_name: current_user.name,
+      plan_data: plan_data.to_json,
+      plan_id: params[:plan_id]
+    }
+  end
+
+  private
+
+  def plan_data
+    FetchSubscriptionPlansService.new(plan: :free).execute
+      .map(&:symbolize_keys)
+      .reject { |plan| plan[:free] }
+      .map { |plan| plan.slice(:id, :code, :price_per_year) }
+  end
+end

ee/app/views/layouts/checkout.html.haml

+!!! 5
+%html.subscriptions-layout-html{ lang: 'en' }
+  = render 'layouts/head'
+  %body.ui-indigo.d-flex.vh-100
+    = render "layouts/header/logo_with_title"
+    = render "layouts/broadcast"
+    .container.d-flex.flex-grow-1
+      = yield

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.align-items-center.bg-gray-light.col-lg-7.d-flex.flex-column.flex-grow-1
+    #checkout{ data: subscription_data }
+  .summary-pane.col-lg-5.d-flex.flex-row.justify-content-center
+    #summary

ee/config/routes/subscription.rb

+# frozen_string_literal: true
+
+resource :subscriptions, only: [:new]

ee/spec/controllers/subscriptions_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe SubscriptionsController do
+  describe 'GET #new' do
+    let_it_be(:user) { create(:user) }
+
+    subject { get :new, params: { plan_id: 'bronze_id' } }
+
+    context 'with unauthorized user' do
+      it { is_expected.to have_gitlab_http_status 302 }
+      it { is_expected.to redirect_to new_user_session_path }
+    end
+
+    context 'with authorized user' do
+      before do
+        sign_in(user)
+      end
+
+      context 'with feature flag enabled' do
+        before do
+          stub_feature_flags(paid_signup_flow: true)
+        end
+
+        it { is_expected.to render_template 'layouts/checkout' }
+        it { is_expected.to render_template :new }
+      end
+
+      context 'with feature flag disabled' do
+        before do
+          stub_feature_flags(paid_signup_flow: false)
+        end
+
+        it { is_expected.to have_gitlab_http_status 302 }
+        it { is_expected.to redirect_to dashboard_projects_path }
+      end
+    end
+  end
+end

ee/spec/helpers/subscriptions_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe SubscriptionsHelper do
+  describe '#subscription_data' do
+    let_it_be(:raw_plan_data) do
+      [
+        {
+          "name" => "Free Plan",
+          "free" => true
+        },
+        {
+          "id" => "bronze_id",
+          "name" => "Bronze Plan",
+          "free" => false,
+          "code" => "bronze",
+          "price_per_year" => 48.0
+        }
+      ]
+    end
+    let_it_be(:user) { create(:user, setup_for_company: nil, name: 'First Last') }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+      allow(helper).to receive(:params).and_return(plan_id: 'bronze_id')
+      allow_any_instance_of(FetchSubscriptionPlansService).to receive(:execute).and_return(raw_plan_data)
+    end
+
+    subject { helper.subscription_data }
+
+    it { is_expected.to include(setup_for_company: 'false') }
+    it { is_expected.to include(full_name: 'First Last') }
+    it { is_expected.to include(plan_data: '[{"id":"bronze_id","code":"bronze","price_per_year":48.0}]') }
+    it { is_expected.to include(plan_id: 'bronze_id') }
+  end
+end

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

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+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']") }
+end

locale/gitlab.pot

@@ -3209,6 +3209,9 @@ msgstr ""
 msgid "Checking username availability..."
 msgstr ""
 
+msgid "Checkout"
+msgstr ""
+
 msgid "Cherry-pick this commit"
 msgstr ""