Merge branch 'create-company-form' into 'master'

Create "about your company" page for registration flow

See merge request gitlab-org/gitlab!82529

config/routes.rb

@@ -66,6 +66,7 @@ Rails.application.routes.draw do
     end
 
     Gitlab.ee do
+      resources :company, only: [:new]
       resources :groups, only: [:new, :create]
       resources :projects, only: [:new, :create]
       resources :groups_projects, only: [:new, :create] do

ee/app/assets/javascripts/pages/registrations/company/new/index.js

+import mountComponents from 'ee/registrations/company/new';
+
+mountComponents();

ee/app/assets/javascripts/registrations/company/new/index.js

+import Vue from 'vue';
+import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
+import RegistrationForm from 'ee/registrations/components/company_form.vue';
+
+export default () => {
+  const el = document.querySelector('#js-company-registration-form');
+
+  const { trial, createLeadPath } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: { createLeadPath },
+    render(createElement) {
+      return createElement(RegistrationForm, {
+        props: { trial },
+      });
+    },
+  });
+};

ee/app/assets/javascripts/registrations/components/company_form.vue

+<script>
+import { GlForm, GlButton, GlFormGroup, GlFormInput, GlFormSelect, GlFormText } from '@gitlab/ui';
+import {
+  LEADS_COMPANY_NAME_LABEL,
+  LEADS_COMPANY_SIZE_LABEL,
+  LEADS_PHONE_NUMBER_LABEL,
+  companySizes,
+} from 'ee/vue_shared/leads/constants';
+import csrf from '~/lib/utils/csrf';
+import { __ } from '~/locale';
+import CountryOrRegionSelector from 'ee/trials/components/country_or_region_selector.vue';
+import {
+  TRIAL_COMPANY_SIZE_PROMPT,
+  TRIAL_PHONE_DESCRIPTION,
+  TRIAL_FORM_SUBMIT_TEXT,
+} from 'ee/trials/constants';
+import RegistrationTrialToggle from 'ee/registrations/components/registration_trial_toggle.vue';
+
+export default {
+  csrf,
+  components: {
+    GlForm,
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlFormSelect,
+    GlFormText,
+    CountryOrRegionSelector,
+    RegistrationTrialToggle,
+  },
+  inject: ['createLeadPath'],
+  props: {
+    trial: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      companyName: '',
+      companySize: null,
+      phoneNumber: null,
+      country: '',
+      state: '',
+      websiteUrl: '',
+    };
+  },
+  computed: {
+    companySizeOptionsWithDefault() {
+      return [
+        {
+          name: this.$options.i18n.companySizeSelectPrompt,
+          id: null,
+        },
+        ...companySizes,
+      ];
+    },
+  },
+  i18n: {
+    companyNameLabel: LEADS_COMPANY_NAME_LABEL,
+    companySizeLabel: LEADS_COMPANY_SIZE_LABEL,
+    companySizeSelectPrompt: TRIAL_COMPANY_SIZE_PROMPT,
+    phoneNumberLabel: LEADS_PHONE_NUMBER_LABEL,
+    phoneNumberDescription: TRIAL_PHONE_DESCRIPTION,
+    formSubmitText: TRIAL_FORM_SUBMIT_TEXT,
+    optional: __('(optional)'),
+    websiteLabel: __('Website'),
+    trialLabel: __('GitLab Ultimate trial'),
+    trialDescription: __('Try all GitLab features for free for 30 days. No credit card required.'),
+  },
+};
+</script>
+
+<template>
+  <gl-form :action="createLeadPath" method="post" novalidate>
+    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mt-5">
+      <gl-form-group
+        :label="$options.i18n.companyNameLabel"
+        label-size="sm"
+        label-for="company_name"
+        class="gl-mr-5 gl-w-half gl-xs-w-full"
+      >
+        <gl-form-input
+          id="company_name"
+          :value="companyName"
+          name="company_name"
+          data-testid="company_name"
+          required
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.companySizeLabel"
+        label-size="sm"
+        label-for="company_size"
+        class="gl-w-half gl-xs-w-full company-size"
+      >
+        <gl-form-select
+          id="company_size"
+          :value="companySize"
+          name="company_size"
+          :options="companySizeOptionsWithDefault"
+          value-field="id"
+          text-field="name"
+          data-testid="company_size"
+          required
+        />
+      </gl-form-group>
+    </div>
+    <country-or-region-selector :country="country" :state="state" data-testid="country" required />
+    <gl-form-group
+      :label="$options.i18n.phoneNumberLabel"
+      :optional-text="$options.i18n.optional"
+      label-size="sm"
+      :description="$options.i18n.phoneNumberDescription"
+      label-for="phone_number"
+      optional
+    >
+      <gl-form-input
+        id="phone_number"
+        :value="phoneNumber"
+        name="phone_number"
+        type="tel"
+        data-testid="phone_number"
+        pattern="^(\+)*[0-9-\s]+$"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.websiteLabel"
+      :optional-text="$options.i18n.optional"
+      label-size="sm"
+      label-for="website_url"
+      optional
+    >
+      <gl-form-input
+        id="website_url"
+        :value="websiteUrl"
+        name="website_url"
+        data-testid="website_url"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.trialLabel"
+      label-size="sm"
+      :optional-text="$options.i18n.optional"
+      optional
+    >
+      <gl-form-text class="gl-pb-3">{{ $options.i18n.trialDescription }}</gl-form-text>
+      <registration-trial-toggle :active="trial" data-testid="trial" />
+    </gl-form-group>
+    <gl-button type="submit" variant="confirm" class="gl-w-20">
+      {{ $options.i18n.formSubmitText }}
+    </gl-button>
+  </gl-form>
+</template>
+
+<style>
+.company-size {
+  line-height: 1.2rem;
+}
+</style>

ee/app/controllers/registrations/company_controller.rb

+# frozen_string_literal: true
+
+module Registrations
+  class CompanyController < ApplicationController
+    layout 'minimal'
+
+    before_action :check_if_gl_com_or_dev
+    feature_category :onboarding
+
+    def new
+    end
+  end
+end

ee/app/controllers/trials_controller.rb

@@ -132,7 +132,7 @@ class TrialsController < ApplicationController
 
   def company_params
     params.permit(:company_name, :company_size, :first_name, :last_name, :phone_number,
-                  :country, :state, :glm_content, :glm_source).merge(extra_params)
+                  :country, :state, :website_url, :glm_content, :glm_source).merge(extra_params)
   end
 
   def extra_params

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

+- page_title _('Start your Free Ultimate Trial')
+
+.row
+  .col-md-6.m-sm-6
+    %h2.gl-pb-5.gl-my-0
+      = _("About your company")
+
+    #js-company-registration-form{ data: { trial: params[:trial] == 'true', create_lead_path: create_lead_trials_path } }
+
+  .col-md-4.gl-display-inline-flex.gl-vertical-align-middle
+    = image_tag 'illustrations/saas-trial-illustration.svg', alt: '', class: 'gl-display-none d-md-inline gl-w-full'

ee/spec/controllers/registrations/company_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Registrations::CompanyController do
+  let_it_be(:user) { create(:user) }
+
+  describe 'GET #new' do
+    subject { get :new }
+
+    context 'with an unauthenticated user' do
+      it { is_expected.to have_gitlab_http_status(:redirect) }
+      it { is_expected.to redirect_to(new_user_session_path) }
+    end
+
+    context 'with an authenticated user' do
+      let(:com) { true }
+
+      before do
+        sign_in(user)
+        allow(::Gitlab).to receive(:com?).and_return(com)
+      end
+
+      context 'when on .com' do
+        it { is_expected.to have_gitlab_http_status(:ok) }
+        it { is_expected.to render_template 'layouts/minimal' }
+        it { is_expected.to render_template(:new) }
+      end
+
+      context 'when not on .com' do
+        let(:com) { false }
+
+        it { is_expected.to have_gitlab_http_status(:not_found) }
+      end
+    end
+  end
+end

ee/spec/features/trial_registrations/company_information_spec.rb

+# frozen_string_literal: true
+require 'spec_helper'
+
+RSpec.describe 'Company Information', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:fields) { ['Company Name', 'Number of employees', 'Country', 'Telephone number (optional)', 'Website (optional)', 'GitLab Ultimate trial (optional)'] }
+
+  before do
+    allow(Gitlab).to receive(:com?).and_return(true).at_least(:once)
+    sign_in(user)
+    visit new_users_sign_up_company_path
+
+    expect(page).to have_content('About your company')
+  end
+
+  it 'shows the expected fields' do
+    fields.each { |field| expect(page).to have_content(field) }
+  end
+
+  context 'send company information to create lead' do
+    it 'with all required fields' do
+      trial_user_params = {
+        "company_name" => 'GitLab',
+        "company_size" => '1 - 99'.delete(' '),
+        "phone_number" => '+1 23 456-78-90',
+        "country" => 'US',
+        "state" => '',
+        "work_email" => user.email,
+        "uid" => user.id,
+        "setup_for_company" => user.setup_for_company,
+        "skip_email_confirmation" => true,
+        "gitlab_com_trial" => true,
+        "provider" => "gitlab",
+        "newsletter_segment" => user.email_opted_in,
+        "website_url" => 'gitlab.com'
+      }
+
+      lead_params = {
+        trial_user: ActionController::Parameters.new(trial_user_params).permit!
+      }
+
+      fill_in 'company_name', with: 'GitLab'
+      select '1 - 99', from: 'company_size'
+      select 'United States of America', from: 'country'
+      fill_in 'website_url', with: 'gitlab.com'
+      fill_in 'phone_number', with: '+1 23 456-78-90'
+
+      expect_next_instance_of(GitlabSubscriptions::CreateLeadService) do |service|
+        expect(service).to receive(:execute).with(lead_params).and_return({ success: true })
+      end
+
+      click_button 'Continue'
+    end
+  end
+end

ee/spec/frontend/registrations/company/new/components/company_form_spec.js

+import { GlButton, GlForm } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import RegistrationForm from 'ee/registrations/components/company_form.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TRIAL_FORM_SUBMIT_TEXT } from 'ee/trials/constants';
+import RegistrationTrialToggle from 'ee/registrations/components/registration_trial_toggle.vue';
+
+const localVue = createLocalVue();
+
+const SUBMIT_PATH = '_submit_path_';
+
+describe('RegistrationForm', () => {
+  let wrapper;
+
+  const createComponent = ({ mountFunction = shallowMountExtended } = {}) => {
+    return mountFunction(RegistrationForm, {
+      localVue,
+      provide: {
+        createLeadPath: SUBMIT_PATH,
+      },
+      propsData: { trial: true },
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findFormInput = (testId) => wrapper.findByTestId(testId);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('has the "Continue" text on the submit button', () => {
+      expect(findButton().text()).toBe(TRIAL_FORM_SUBMIT_TEXT);
+    });
+
+    it('sets the trial value to be true', () => {
+      expect(wrapper.props().trial).toBe(true);
+      expect(wrapper.findComponent(RegistrationTrialToggle).props('active')).toBe(true);
+    });
+
+    it.each`
+      testid
+      ${'company_name'}
+      ${'company_size'}
+      ${'country'}
+      ${'phone_number'}
+      ${'website_url'}
+      ${'trial'}
+    `('has the correct form input in the form content', ({ testid }) => {
+      expect(findFormInput(testid).exists()).toBe(true);
+    });
+  });
+
+  describe('submitting', () => {
+    it('submits the form when button is clicked', () => {
+      expect(findButton().attributes('type')).toBe('submit');
+    });
+
+    it('displays form with correct action', () => {
+      expect(findForm().attributes('action')).toBe(SUBMIT_PATH);
+    });
+  });
+});

locale/gitlab.pot

@@ -1811,6 +1811,9 @@ msgstr ""
 msgid "About this feature"
 msgstr ""
 
+msgid "About your company"
+msgstr ""
+
 msgid "Abuse Reports"
 msgstr ""
 
@@ -16782,6 +16785,9 @@ msgstr ""
 msgid "GitLab Team Member"
 msgstr ""
 
+msgid "GitLab Ultimate trial"
+msgstr ""
+
 msgid "GitLab User"
 msgstr ""
 
@@ -39438,6 +39444,9 @@ msgstr ""
 msgid "Try again?"
 msgstr ""
 
+msgid "Try all GitLab features for free for 30 days. No credit card required."
+msgstr ""
+
 msgid "Try all GitLab has to offer for 30 days."
 msgstr ""
 
@@ -41880,6 +41889,9 @@ msgstr ""
 msgid "Webhooks|Wiki page events"
 msgstr ""
 
+msgid "Website"
+msgstr ""
+
 msgid "Website:"
 msgstr ""