Restyle signup welcome page

According to the new design

app/assets/javascripts/pages/registrations/welcome/index.js

-import LengthValidator from '~/pages/sessions/new/length_validator';
-import NoEmojiValidator from '~/emoji/no_emoji_validator';
-
-document.addEventListener('DOMContentLoaded', () => {
-  new LengthValidator(); // eslint-disable-line no-new
-  new NoEmojiValidator(); // eslint-disable-line no-new
-});

app/controllers/registrations_controller.rb

@@ -56,7 +56,6 @@ class RegistrationsController < Devise::RegistrationsController
     return redirect_to stored_location_or_dashboard_or_almost_there_path(current_user) if current_user.role.present? && !current_user.setup_for_company.nil?
 
     current_user.name = nil if current_user.name == current_user.username
-    render layout: 'devise_experimental_separate_sign_up_flow'
   end
 
   def update_registration
@@ -68,7 +67,7 @@ class RegistrationsController < Devise::RegistrationsController
       set_flash_message! :notice, :signed_up
       redirect_to stored_location_or_dashboard_or_almost_there_path(current_user)
     else
-      render :welcome, layout: 'devise_experimental_separate_sign_up_flow'
+      render :welcome
     end
   end
 

ee/app/assets/javascripts/pages/registrations/update_registration/index.js

+import mountProgressBar from 'ee/registrations/welcome';
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountProgressBar();
+});

ee/app/assets/javascripts/pages/registrations/welcome/index.js

+import mountProgressBar from 'ee/registrations/welcome';
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountProgressBar();
+});

ee/app/assets/javascripts/registrations/welcome/index.js

+import Vue from 'vue';
+import { PROGRESS_STEPS } from 'ee/subscriptions/new/constants';
+import ProgressBar from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+
+export default () => {
+  const progressBarEl = document.getElementById('progress-bar');
+
+  return new Vue({
+    el: progressBarEl,
+    render(createElement) {
+      return createElement(ProgressBar, { props: { step: PROGRESS_STEPS.editProfile } });
+    },
+  });
+};

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

@@ -155,11 +155,20 @@ $subscriptions-full-width-lg: 541px;
     }
   }
 
-  .edit-group {
+  .edit-group,
+  .edit-profile {
     max-width: 400px;
 
     .bar {
       width: 100%;
     }
+
+    .normal {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .field_with_errors {
+      display: inline;
+    }
   }
 }

ee/app/controllers/ee/registrations_controller.rb

@@ -25,5 +25,15 @@ module EE
 
       clean_params
     end
+
+    # Part of an experiment to build a new sign up flow. Will be resolved
+    # with https://gitlab.com/gitlab-org/growth/engineering/issues/64
+    def choose_layout
+      if %w(welcome update_registration).include?(action_name)
+        'checkout'
+      else
+        super
+      end
+    end
   end
 end

ee/app/helpers/ee/registrations_helper.rb

+# frozen_string_literal: true
+
+module EE
+  module RegistrationsHelper
+    def in_paid_signup_flow?
+      experiment_enabled?(:paid_signup_flow) && session['user_return_to'] == new_subscriptions_path
+    end
+  end
+end

ee/app/views/registrations/welcome.html.haml

+- page_title _('Your profile')
+
+.row.flex-grow-1.bg-gray-light
+  .d-flex.flex-column.align-items-center.w-100.gl-p-3
+    .edit-profile.login-page.d-flex.flex-column.align-items-center.pt-lg-3
+      - if in_paid_signup_flow?
+        #progress-bar
+      %h2.center= _('Welcome to GitLab.com<br>@%{name}!').html_safe % { name: html_escape(current_user.first_name) }
+      %p
+        .center= _('In order to personalize your experience with GitLab<br>we would like to know a bit more about you.').html_safe
+
+      = form_for(current_user, url: users_sign_up_update_registration_path, html: { class: 'card w-100 gl-p-3', 'aria-live' => 'assertive' }) do |f|
+        .devise-errors
+          = render 'devise/shared/error_messages', resource: current_user
+        .row
+          .form-group.col-sm-12
+            = f.label :role, _('Role'), class: 'label-bold'
+            = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, {}, class: 'form-control input-lg', autofocus: true
+            .form-text.text-muted= _('This will help us personalize your onboarding experience.')
+        .row
+          .form-group.col-sm-12
+            = f.label :setup_for_company, _('Who will be using this GitLab subscription?'), class: 'label-bold'
+            .d-flex.flex-column.flex-lg-row
+              .flex-grow-1
+                = f.radio_button :setup_for_company, true
+                = f.label :setup_for_company, _('My company or team'), class: 'normal', value: 'true'
+              .flex-grow-1
+                = f.radio_button :setup_for_company, false
+                = f.label :setup_for_company, _('Just me'), class: 'normal', value: 'false'
+        .row
+          .form-group.col-sm-12.mb-0
+            = button_tag class: %w[btn btn-success w-100] do
+              = in_paid_signup_flow? ? _('Continue') : _('Get started!')

ee/spec/controllers/registrations_controller_spec.rb

@@ -41,4 +41,16 @@ describe RegistrationsController do
       end
     end
   end
+
+  describe '#welcome' do
+    subject { get :welcome }
+
+    before do
+      sign_in(create(:user))
+    end
+
+    it 'renders the checkout layout' do
+      expect(subject).to render_template(:checkout)
+    end
+  end
 end

ee/spec/helpers/ee/registrations_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe EE::RegistrationsHelper do
+  using RSpec::Parameterized::TableSyntax
+
+  describe '#in_paid_signup_flow?' do
+    where(:user_return_to_path, :paid_signup_flow_enabled, :expected_result) do
+      '/-/subscriptions/new' | true  | true
+      '/-/subscriptions/new' | false | false
+      '/'                    | true  | false
+      '/'                    | false | false
+    end
+
+    with_them do
+      it 'returns the expected_result' do
+        allow(helper).to receive(:experiment_enabled?).with(:paid_signup_flow).and_return(paid_signup_flow_enabled)
+        allow(helper).to receive(:session).and_return('user_return_to' => user_return_to_path)
+
+        expect(helper.in_paid_signup_flow?).to eq(expected_result)
+      end
+    end
+  end
+end

ee/spec/views/registrations/welcome.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'registrations/welcome' do
+  let_it_be(:user) { User.new }
+
+  before do
+    allow(view).to receive(:current_user).and_return(user)
+    allow(view).to receive(:in_paid_signup_flow?).and_return(in_paid_signup_flow)
+
+    render
+  end
+
+  subject { rendered }
+
+  context 'in paid_signup_flow' do
+    let(:in_paid_signup_flow) { true }
+
+    it { is_expected.to have_button('Continue') }
+    it { is_expected.to have_selector('#progress-bar') }
+  end
+
+  context 'not in paid_signup_flow' do
+    let(:in_paid_signup_flow) { false }
+
+    it { is_expected.to have_button('Get started!') }
+    it { is_expected.not_to have_selector('#progress-bar') }
+  end
+end

locale/gitlab.pot

@@ -10240,6 +10240,9 @@ msgstr ""
 msgid "In order to gather accurate feature usage data, it can take 1 to 2 weeks to see your index."
 msgstr ""
 
+msgid "In order to personalize your experience with GitLab<br>we would like to know a bit more about you."
+msgstr ""
+
 msgid "In order to tailor your experience with GitLab we<br>would like to know a bit more about you."
 msgstr ""
 
@@ -10782,6 +10785,9 @@ msgstr ""
 msgid "June"
 msgstr ""
 
+msgid "Just me"
+msgstr ""
+
 msgid "Key"
 msgstr ""
 
@@ -12251,6 +12257,9 @@ msgstr ""
 msgid "Multiple uploaders found: %{uploader_types}"
 msgstr ""
 
+msgid "My company or team"
+msgstr ""
+
 msgid "My-Reaction"
 msgstr ""
 
@@ -19439,6 +19448,9 @@ msgstr ""
 msgid "This user will be the author of all events in the activity feed that are the result of an update, like new branches being created or new commits being pushed to existing branches. Upon creation or when reassigning you can only assign yourself to be the mirror user."
 msgstr ""
 
+msgid "This will help us personalize your onboarding experience."
+msgstr ""
+
 msgid "This will redirect you to an external sign in page."
 msgstr ""
 
@@ -21227,6 +21239,9 @@ msgstr ""
 msgid "Welcome to GitLab, %{first_name}!"
 msgstr ""
 
+msgid "Welcome to GitLab.com<br>@%{name}!"
+msgstr ""
+
 msgid "Welcome to the Guided GitLab Tour"
 msgstr ""
 
@@ -21286,6 +21301,9 @@ msgstr ""
 msgid "Who will be able to see this group?"
 msgstr ""
 
+msgid "Who will be using this GitLab subscription?"
+msgstr ""
+
 msgid "Wiki"
 msgstr ""
 
@@ -22000,6 +22018,9 @@ msgstr ""
 msgid "Your password reset token has expired."
 msgstr ""
 
+msgid "Your profile"
+msgstr ""
+
 msgid "Your project limit is %{limit} projects! Please contact your administrator to increase it"
 msgstr ""
 

spec/controllers/registrations_controller_spec.rb

@@ -415,4 +415,36 @@ describe RegistrationsController do
       patch :update_registration, params: { user: { role: 'software_developer', setup_for_company: 'false' } }
     end
   end
+
+  describe '#welcome' do
+    subject { get :welcome }
+
+    before do
+      sign_in(create(:user))
+    end
+
+    context 'signup_flow experiment enabled' do
+      before do
+        stub_experiment_for_user(signup_flow: true)
+      end
+
+      it 'renders the devise_experimental_separate_sign_up_flow layout' do
+        expected_layout = Gitlab.ee? ? :checkout : :devise_experimental_separate_sign_up_flow
+
+        expect(subject).to render_template(expected_layout)
+      end
+    end
+
+    context 'signup_flow experiment disabled' do
+      before do
+        stub_experiment_for_user(signup_flow: false)
+      end
+
+      it 'renders the devise layout' do
+        expected_layout = Gitlab.ee? ? :checkout : :devise
+
+        expect(subject).to render_template(expected_layout)
+      end
+    end
+  end
 end

spec/features/users/signup_spec.rb

@@ -445,8 +445,8 @@ end
 
 describe 'With experimental flow' do
   before do
-    stub_experiment(signup_flow: true)
-    stub_experiment_for_user(signup_flow: true)
+    stub_experiment(signup_flow: true, paid_signup_flow: false)
+    stub_experiment_for_user(signup_flow: true, paid_signup_flow: false)
   end
 
   it_behaves_like 'Signup'