Merge branch '296507-eng-ux-trial-onboarding-review-enhancements' into 'master'

Trial onboarding UX enhancements

See merge request gitlab-org/gitlab!51911

app/views/layouts/welcome.html.haml

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

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

@@ -172,7 +172,7 @@ $subscriptions-full-width-lg: 541px;
   .edit-group,
   .edit-profile,
   .new-project {
-    max-width: 400px;
+    max-width: 460px;
 
     .bar {
       width: 100%;

ee/app/helpers/ee/welcome_helper.rb

@@ -16,6 +16,10 @@ module EE
       params[:trial_onboarding_flow] == 'true'
     end
 
+    def in_trial_during_signup_flow?
+      params[:trial] == 'true'
+    end
+
     def in_invitation_flow?
       redirect_path.present? && redirect_path.starts_with?('/-/invites/')
     end

ee/app/views/registrations/projects/new.html.haml

 - page_title _('Your first project')
 - visibility_level = selected_visibility_level(@project, params.dig(:project, :visibility_level))
 
-- if params[:trial] == 'true'
-  .row.bg-gray-light
-    .d-flex.flex-column.align-items-center.w-100
+- if in_trial_during_signup_flow? || in_trial_onboarding_flow?
+  .row
+    .d-flex.flex-column.align-items-center.w-100.gl-mt-3
       = render 'trial_is_activated_banner'
-.row.flex-grow-1.bg-gray-light
+.row.gl-flex-grow-1
   .d-flex.flex-column.align-items-center.w-100.p-3
     .new-project.d-flex.flex-column.align-items-center.pt-5
       - unless in_trial_onboarding_flow?

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

 - return unless learn_gitlab_project
 - page_title _('Get started with GitLab')
 
-.row.gl-flex-grow-1.gl-bg-gray-10
+.row.gl-flex-grow-1
   .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full
-    .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-pt-6.gl-w-half
+    .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-pt-6.gl-w-half.gl-mt-3
       = image_tag 'learn-gitlab-avatar.jpg', width: '90'
       %h2.gl-text-center.gl-mt-5= _('Get started with GitLab')
       %p.gl-text-center.gl-mb-5= _('We created a sandbox project that will help you learn the basics of GitLab. You’ll be guided by issues in an issue board. You can go through the issues at your own pace.')

ee/spec/views/registrations/projects/new.html.haml_spec.rb

@@ -7,11 +7,13 @@ RSpec.describe 'registrations/projects/new' do
   let_it_be(:namespace) { create(:namespace) }
   let_it_be(:project) { create(:project, namespace: namespace) }
   let_it_be(:trial_onboarding_flow) { false }
+  let_it_be(:trial_during_signup_flow) { false }
 
   before do
     assign(:project, project)
     allow(view).to receive(:current_user).and_return(user)
     allow(view).to receive(:in_trial_onboarding_flow?).and_return(trial_onboarding_flow)
+    allow(view).to receive(:in_trial_during_signup_flow?).and_return(trial_during_signup_flow)
     allow(view).to receive(:import_sources_enabled?).and_return(false)
 
     render
@@ -27,5 +29,17 @@ RSpec.describe 'registrations/projects/new' do
     it 'hides the progress bar in trial onboarding' do
       expect(rendered).not_to have_selector('#progress-bar')
     end
+
+    it 'show the trial activation' do
+      expect(rendered).to have_content('Congratulations, your free trial is activated.')
+    end
+  end
+
+  context 'in trial flow' do
+    let_it_be(:trial_during_signup_flow) { true }
+
+    it 'show the trial activation' do
+      expect(rendered).to have_content('Congratulations, your free trial is activated.')
+    end
   end
 end