Convert trial lead creation form to Vue

- needed for next step where we will add state

Changelog: changed
EE: true

app/assets/javascripts/google_tag_manager/index.js

@@ -60,10 +60,7 @@ export const trackSaasTrialSubmit = () => {
     return;
   }
 
-  const form = document.getElementById('new_trial');
-  form.addEventListener('submit', () => {
-    pushEvent('saasTrialSubmit');
-  });
+  pushEvent('saasTrialSubmit');
 };
 
 export const trackSaasTrialSkip = () => {

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue

@@ -15,7 +15,32 @@ import Tracking from '~/tracking';
 import countriesQuery from 'ee/subscriptions/graphql/queries/countries.query.graphql';
 import statesQuery from 'ee/subscriptions/graphql/queries/states.query.graphql';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
-import { i18n, companySizes, COUNTRIES_WITH_STATES_ALLOWED } from '../constants';
+import {
+  LEADS_COMPANY_NAME_LABEL,
+  LEADS_COMPANY_SIZE_LABEL,
+  LEADS_COUNTRY_LABEL,
+  LEADS_COUNTRY_PROMPT,
+  LEADS_FIRST_NAME_LABEL,
+  LEADS_LAST_NAME_LABEL,
+  LEADS_PHONE_NUMBER_LABEL,
+  companySizes,
+} from 'ee/vue_shared/leads/constants';
+import {
+  COUNTRIES_WITH_STATES_ALLOWED,
+  PQL_COMPANY_SIZE_PROMPT,
+  PQL_PHONE_DESCRIPTION,
+  PQL_STATE_LABEL,
+  PQL_STATE_PROMPT,
+  PQL_COMMENT_LABEL,
+  PQL_BUTTON_TEXT,
+  PQL_MODAL_TITLE,
+  PQL_MODAL_PRIMARY,
+  PQL_MODAL_CANCEL,
+  PQL_MODAL_HEADER_TEXT,
+  PQL_MODAL_FOOTER_TEXT,
+  PQL_HAND_RAISE_ACTION_ERROR,
+  PQL_HAND_RAISE_ACTION_SUCCESS,
+} from '../constants';
 
 export default {
   name: 'HandRaiseLeadButton',
@@ -180,7 +205,28 @@ export default {
         });
     },
   },
-  i18n,
+  i18n: {
+    firstNameLabel: LEADS_FIRST_NAME_LABEL,
+    lastNameLabel: LEADS_LAST_NAME_LABEL,
+    companyNameLabel: LEADS_COMPANY_NAME_LABEL,
+    companySizeLabel: LEADS_COMPANY_SIZE_LABEL,
+    phoneNumberLabel: LEADS_PHONE_NUMBER_LABEL,
+    countryLabel: LEADS_COUNTRY_LABEL,
+    countrySelectPrompt: LEADS_COUNTRY_PROMPT,
+    companySizeSelectPrompt: PQL_COMPANY_SIZE_PROMPT,
+    phoneNumberDescription: PQL_PHONE_DESCRIPTION,
+    stateLabel: PQL_STATE_LABEL,
+    stateSelectPrompt: PQL_STATE_PROMPT,
+    commentLabel: PQL_COMMENT_LABEL,
+    buttonText: PQL_BUTTON_TEXT,
+    modalTitle: PQL_MODAL_TITLE,
+    modalPrimary: PQL_MODAL_PRIMARY,
+    modalCancel: PQL_MODAL_CANCEL,
+    modalHeaderText: PQL_MODAL_HEADER_TEXT,
+    modalFooterText: PQL_MODAL_FOOTER_TEXT,
+    handRaiseActionError: PQL_HAND_RAISE_ACTION_ERROR,
+    handRaiseActionSuccess: PQL_HAND_RAISE_ACTION_SUCCESS,
+  },
 };
 </script>
 

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/constants.js

 import { __, s__ } from '~/locale';
 
-export const i18n = Object.freeze({
-  firstNameLabel: __('First Name'),
-  lastNameLabel: __('Last Name'),
-  companyNameLabel: __('Company Name'),
-  companySizeLabel: __('Number of employees'),
-  companySizeSelectPrompt: __('- Select -'),
-  phoneNumberLabel: __('Telephone number'),
-  phoneNumberDescription: __('Provide a number our sales team can use to call you.'),
-  countryLabel: __('Country'),
-  countrySelectPrompt: __('Please select a country'),
-  stateLabel: __('State/Province/City'),
-  stateSelectPrompt: s__('PQL|Please select a city or state'),
-  commentLabel: s__('PQL|Message for the Sales team (optional)'),
-  buttonText: s__('PQL|Contact sales'),
-  modalTitle: s__('PQL|Contact our Sales team'),
-  modalPrimary: s__('PQL|Submit information'),
-  modalCancel: s__('PQL|Cancel'),
-  modalHeaderText: s__(
-    'PQL|Hello %{userName}. Before putting you in touch with our sales team, we would like you to verify and complete the information below.',
-  ),
-  modalFooterText: s__(
-    'PQL|By providing my contact information, I agree GitLab may contact me via email about its product, services and events. You may opt-out at any time by unsubscribing in emails or visiting our communication preference center.',
-  ),
-  handRaiseActionError: s__('PQL|An error occurred while sending hand raise lead.'),
-  handRaiseActionSuccess: s__(
-    'PQL|Thank you for reaching out! Our sales team will get back to you soon.',
-  ),
-});
-
-export const companySizes = Object.freeze([
-  {
-    name: '1 - 99',
-    id: '1-99',
-  },
-  {
-    name: '100 - 499',
-    id: '100-499',
-  },
-  {
-    name: '500 - 1,999',
-    id: '500-1,999',
-  },
-  {
-    name: '2,000 - 9,999',
-    id: '2,000-9,999',
-  },
-  {
-    name: '10,000 +',
-    id: '10,000+',
-  },
-]);
+export const PQL_COMPANY_SIZE_PROMPT = __('- Select -');
+export const PQL_PHONE_DESCRIPTION = __('Provide a number our sales team can use to call you.');
+export const PQL_STATE_LABEL = __('State/Province/City');
+export const PQL_STATE_PROMPT = s__('PQL|Please select a city or state');
+export const PQL_COMMENT_LABEL = s__('PQL|Message for the Sales team (optional)');
+export const PQL_BUTTON_TEXT = s__('PQL|Contact sales');
+export const PQL_MODAL_TITLE = s__('PQL|Contact our Sales team');
+export const PQL_MODAL_PRIMARY = s__('PQL|Submit information');
+export const PQL_MODAL_CANCEL = s__('PQL|Cancel');
+export const PQL_MODAL_HEADER_TEXT = s__(
+  'PQL|Hello %{userName}. Before putting you in touch with our sales team, we would like you to verify and complete the information below.',
+);
+export const PQL_MODAL_FOOTER_TEXT = s__(
+  'PQL|By providing my contact information, I agree GitLab may contact me via email about its product, services and events. You may opt-out at any time by unsubscribing in emails or visiting our communication preference center.',
+);
+export const PQL_HAND_RAISE_ACTION_ERROR = s__(
+  'PQL|An error occurred while sending hand raise lead.',
+);
+export const PQL_HAND_RAISE_ACTION_SUCCESS = s__(
+  'PQL|Thank you for reaching out! Our sales team will get back to you soon.',
+);
 
 export const COUNTRIES_WITH_STATES_ALLOWED = ['US', 'CA'];

ee/app/assets/javascripts/pages/trials/create_lead/index.js

-import 'ee/trials/country_select';
 import 'ee/trials/track_trial_user_errors';
+import { initTrialCreateLeadForm } from 'ee/trials/init_create_lead_form';
+
+initTrialCreateLeadForm();

ee/app/assets/javascripts/pages/trials/new/index.js

-import 'ee/trials/country_select';
-import { trackSaasTrialSubmit, trackSaasTrialSkip } from '~/google_tag_manager';
+import { trackSaasTrialSkip } from '~/google_tag_manager';
+import { initTrialCreateLeadForm } from 'ee/trials/init_create_lead_form';
 
-trackSaasTrialSubmit();
+initTrialCreateLeadForm();
 trackSaasTrialSkip();

ee/app/assets/javascripts/trials/components/trial_create_lead_form.vue

+<script>
+import { GlForm, GlButton, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+import countriesQuery from 'ee/subscriptions/graphql/queries/countries.query.graphql';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+import { trackSaasTrialSubmit } from '~/google_tag_manager';
+import {
+  LEADS_COMPANY_NAME_LABEL,
+  LEADS_COMPANY_SIZE_LABEL,
+  LEADS_COUNTRY_LABEL,
+  LEADS_COUNTRY_PROMPT,
+  LEADS_FIRST_NAME_LABEL,
+  LEADS_LAST_NAME_LABEL,
+  LEADS_PHONE_NUMBER_LABEL,
+  companySizes,
+} from 'ee/vue_shared/leads/constants';
+import {
+  TRIAL_COMPANY_SIZE_PROMPT,
+  TRIAL_FORM_SUBMIT_TEXT,
+  TRIAL_PHONE_DESCRIPTION,
+} from '../constants';
+
+export default {
+  name: 'TrialCreateLeadForm',
+  csrf,
+  components: {
+    GlForm,
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlFormSelect,
+  },
+  directives: {
+    autofocusonshow,
+  },
+  inject: ['user', 'submitPath'],
+  data() {
+    return {
+      ...this.user,
+      countries: [],
+    };
+  },
+  apollo: {
+    countries: {
+      query: countriesQuery,
+    },
+  },
+  computed: {
+    companySizeOptionsWithDefault() {
+      return [
+        {
+          name: this.$options.i18n.companySizeSelectPrompt,
+          id: null,
+        },
+        ...companySizes,
+      ];
+    },
+    countryOptionsWithDefault() {
+      return [
+        {
+          name: this.$options.i18n.countrySelectPrompt,
+          id: null,
+        },
+        ...this.countries,
+      ];
+    },
+  },
+  methods: {
+    onSubmit() {
+      trackSaasTrialSubmit();
+    },
+  },
+  i18n: {
+    firstNameLabel: LEADS_FIRST_NAME_LABEL,
+    lastNameLabel: LEADS_LAST_NAME_LABEL,
+    companyNameLabel: LEADS_COMPANY_NAME_LABEL,
+    companySizeLabel: LEADS_COMPANY_SIZE_LABEL,
+    phoneNumberLabel: LEADS_PHONE_NUMBER_LABEL,
+    countryLabel: LEADS_COUNTRY_LABEL,
+    countrySelectPrompt: LEADS_COUNTRY_PROMPT,
+    formSubmitText: TRIAL_FORM_SUBMIT_TEXT,
+    companySizeSelectPrompt: TRIAL_COMPANY_SIZE_PROMPT,
+    phoneNumberDescription: TRIAL_PHONE_DESCRIPTION,
+  },
+};
+</script>
+
+<template>
+  <gl-form :action="submitPath" method="post" @submit="onSubmit">
+    <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.firstNameLabel"
+        label-size="sm"
+        label-for="first_name"
+        class="gl-mr-5 gl-w-half gl-xs-w-full"
+      >
+        <gl-form-input
+          id="first_name"
+          :value="firstName"
+          name="first_name"
+          data-qa-selector="first_name"
+          data-testid="first_name"
+          required
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.lastNameLabel"
+        label-size="sm"
+        label-for="last_name"
+        class="gl-w-half gl-xs-w-full"
+      >
+        <gl-form-input
+          id="last_name"
+          :value="lastName"
+          name="last_name"
+          data-qa-selector="last_name"
+          data-testid="last_name"
+          required
+        />
+      </gl-form-group>
+    </div>
+    <gl-form-group :label="$options.i18n.companyNameLabel" label-size="sm" label-for="company_name">
+      <gl-form-input
+        id="company_name"
+        :value="companyName"
+        name="company_name"
+        data-qa-selector="company_name"
+        data-testid="company_name"
+        required
+      />
+    </gl-form-group>
+    <gl-form-group :label="$options.i18n.companySizeLabel" label-size="sm" label-for="company_size">
+      <gl-form-select
+        id="company_size"
+        :value="companySize"
+        name="company_size"
+        :options="companySizeOptionsWithDefault"
+        value-field="id"
+        text-field="name"
+        data-qa-selector="number_of_employees"
+        data-testid="company_size"
+        required
+      />
+    </gl-form-group>
+    <gl-form-group
+      v-if="!$apollo.loading.countries"
+      :label="$options.i18n.countryLabel"
+      label-size="sm"
+      label-for="country"
+    >
+      <gl-form-select
+        id="country"
+        :value="country"
+        name="country"
+        :options="countryOptionsWithDefault"
+        value-field="id"
+        text-field="name"
+        data-qa-selector="country"
+        data-testid="country"
+        required
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.phoneNumberLabel"
+      label-size="sm"
+      :description="$options.i18n.phoneNumberDescription"
+      label-for="phone_number"
+    >
+      <gl-form-input
+        id="phone_number"
+        :value="phoneNumber"
+        name="phone_number"
+        type="tel"
+        data-qa-selector="telephone_number"
+        data-testid="phone_number"
+        pattern="^(\+)*[0-9-\s]+$"
+        required
+      />
+    </gl-form-group>
+    <gl-button type="submit" variant="confirm" class="gl-w-20" data-qa-selector="continue">
+      {{ $options.i18n.formSubmitText }}
+    </gl-button>
+  </gl-form>
+</template>

ee/app/assets/javascripts/trials/constants.js

+import { s__, __ } from '~/locale';
+
+export const TRIAL_FORM_SUBMIT_TEXT = s__('Trial|Continue');
+export const TRIAL_COMPANY_SIZE_PROMPT = __('Please select');
+export const TRIAL_PHONE_DESCRIPTION = s__('Trial|Allowed characters: +, 0-9, -, and spaces.');

ee/app/assets/javascripts/trials/init_create_lead_form.js

+import Vue from 'vue';
+import TrialCreateLeadForm from 'ee/trials/components/trial_create_lead_form.vue';
+import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
+
+export const initTrialCreateLeadForm = () => {
+  const el = document.querySelector('#js-trial-create-lead-form');
+
+  const {
+    submitPath,
+    firstName,
+    lastName,
+    companyName,
+    companySize,
+    country,
+    phoneNumber,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      user: {
+        firstName,
+        lastName,
+        companyName,
+        companySize: companySize || null,
+        country: country || null,
+        phoneNumber,
+      },
+      submitPath,
+    },
+    render(createElement) {
+      return createElement(TrialCreateLeadForm);
+    },
+  });
+};

ee/app/assets/javascripts/vue_shared/leads/constants.js

+import { __ } from '~/locale';
+
+export const LEADS_FIRST_NAME_LABEL = __('First Name');
+export const LEADS_LAST_NAME_LABEL = __('Last Name');
+export const LEADS_COMPANY_NAME_LABEL = __('Company Name');
+export const LEADS_COMPANY_SIZE_LABEL = __('Number of employees');
+export const LEADS_PHONE_NUMBER_LABEL = __('Telephone number');
+export const LEADS_COUNTRY_LABEL = __('Country');
+export const LEADS_COUNTRY_PROMPT = __('Please select a country');
+
+export const companySizes = Object.freeze([
+  {
+    name: '1 - 99',
+    id: '1-99',
+  },
+  {
+    name: '100 - 499',
+    id: '100-499',
+  },
+  {
+    name: '500 - 1,999',
+    id: '500-1,999',
+  },
+  {
+    name: '2,000 - 9,999',
+    id: '2,000-9,999',
+  },
+  {
+    name: '10,000 +',
+    id: '10,000+',
+  },
+]);

ee/app/helpers/ee/trial_helper.rb

@@ -13,6 +13,15 @@ module EE
       ], selected)
     end
 
+    def create_lead_form_data
+      {
+        submit_path: create_lead_trials_path(glm_params),
+        first_name: current_user.first_name,
+        last_name: current_user.last_name,
+        company_name: current_user.organization
+      }.merge(params.slice(:first_name, :last_name, :company_name, :company_size, :phone_number, :country).to_unsafe_h.symbolize_keys)
+    end
+
     def should_ask_company_question?
       glm_params[:glm_source] != 'about.gitlab.com'
     end

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

 - page_title _('Start your Free Ultimate Trial')
-- glm_params = { glm_source: params[:glm_source], glm_content: params[:glm_content] }
 - content_for :page_specific_javascripts do
   = render "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
@@ -15,27 +14,7 @@
 
     = render 'errors'
 
-    = form_tag create_lead_trials_path(glm_params), method: :post, id: "new_trial" do |_f|
-      .form-row
-        .col-12.col-sm-6.form-group
-          = label_tag :first_name, s_('Trial|First name'), for: :first_name, class: 'col-form-label'
-          = text_field_tag :first_name, params[:first_name] || current_user.first_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'first_name' }
-        .col-12.col-sm-6.form-group
-          = label_tag :last_name, s_('Trial|Last name'), for: :last_name, class: 'col-form-label'
-          = text_field_tag :last_name, params[:last_name] || current_user.last_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'last_name' }
-      .form-group
-        = label_tag :company_name, s_('Trial|Company name'), for: :company_name, class: 'col-form-label'
-        = text_field_tag :company_name, params[:company_name] || current_user.organization, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'company_name' }
-      .form-group.gl-select2-html5-required-fix
-        = label_tag :company_size, s_('Trial|Number of employees'), for: :company_size, class: 'col-form-label'
-        = select_tag :company_size, company_size_options_for_select(params[:company_size]), class: 'select2', required: true, data: { qa_selector: 'number_of_employees' }
-      .form-group.gl-select2-html5-required-fix
-        = render 'select_country'
-      .form-group
-        = label_tag :phone_number, s_('Trial|Telephone number'), for: :phone_number, class: 'col-form-label'
-        = telephone_field_tag :phone_number, params[:phone_number], pattern: '^(\+)*[0-9-\s]+$', class: 'form-control gl-form-input', required: true, data: { qa_selector: 'telephone_number' }
-        %p.gl-text-gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
-      = submit_tag s_('Trial|Continue'), class: 'btn gl-button btn-confirm gl-w-20', data: { qa_selector: 'continue' }
+    #js-trial-create-lead-form{ data: create_lead_form_data }
 
     = render 'skip_trial'
 

ee/spec/features/google_analytics_datalayer_spec.rb

@@ -64,29 +64,6 @@ RSpec.describe 'GitLab.com Google Analytics DataLayer', :js do
     end
   end
 
-  context 'on new trial page' do
-    it 'tracks form submissions in the dataLayer' do
-      sign_in user
-      visit new_trial_path
-
-      evaluate_script('document.getElementById("new_trial").addEventListener("submit", e => e.preventDefault())')
-
-      fill_in 'first_name', with: user_attrs[:first_name]
-      fill_in 'last_name', with: user_attrs[:last_name]
-      fill_in 'company_name', with: user_attrs[:company_name]
-      evaluate_script("document.getElementById('company_size').value = '1-99'")
-      fill_in 'phone_number', with: user_attrs[:phone_number]
-      evaluate_script("document.getElementById('country_select').value = 'US'")
-
-      click_button 'Continue'
-
-      data_layer = execute_script('return window.dataLayer')
-      last_event_in_data_layer = data_layer[-1]
-
-      expect(last_event_in_data_layer["event"]).to eq("saasTrialSubmit")
-    end
-  end
-
   context 'on trial group select page' do
     it 'tracks create group events' do
       sign_in user

ee/spec/features/trials/capture_lead_spec.rb

@@ -3,80 +3,103 @@
 require 'spec_helper'
 
 RSpec.describe 'Trial Capture Lead', :js do
-  include Select2Helper
-  let(:user) { create(:user) }
+  let_it_be(:user) { create(:user) }
 
   before do
     allow(Gitlab).to receive(:com?).and_return(true).at_least(:once)
     sign_in(user)
-  end
+    visit new_trial_path
 
-  context 'when user' do
-    before do
-      visit new_trial_path
+    wait_for_requests
+  end
 
-      wait_for_requests
+  context 'with valid company information' do
+    let(:form_data) do
+      {
+        phone_number: '+1 23 456-78-90',
+        company_size: '1 - 99',
+        company_name: 'GitLab',
+        country: { id: 'US', name: 'United States of America' }
+      }
     end
 
-    context 'enters valid company information' do
-      before do
-        expect_any_instance_of(GitlabSubscriptions::CreateLeadService).to receive(:execute) do
-          { success: true }
-        end
+    before do
+      trial_user_params = {
+        "company_name" => form_data[:company_name],
+        "company_size" => form_data[:company_size].delete(' '),
+        "first_name" => user.first_name,
+        "last_name" => user.last_name,
+        "phone_number" => form_data[:phone_number],
+        "country" => form_data.dig(:country, :id),
+        "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
+      }
+
+      lead_params = {
+        trial_user: ActionController::Parameters.new(trial_user_params).permit!
+      }
+
+      expect_any_instance_of(GitlabSubscriptions::CreateLeadService).to receive(:execute).with(lead_params) do
+        { success: true }
       end
+    end
 
-      it 'proceeds to the next step' do
-        fill_in 'company_name', with: 'GitLab'
-        select2 '1-99', from: '#company_size'
-        fill_in 'phone_number', with: '+1 23 456-78-90'
-        select2 'US', from: '#country_select'
+    it 'proceeds to the next step' do
+      fill_in 'company_name', with: form_data[:company_name]
+      select form_data[:company_size], from: 'company_size'
+      fill_in 'phone_number', with: form_data[:phone_number]
+      select form_data.dig(:country, :name), from: 'country'
 
-        click_button 'Continue'
+      click_button 'Continue'
 
-        expect(page).not_to have_css('flash-container')
-        expect(current_path).to eq(select_trials_path)
-      end
+      expect(page).not_to have_css('flash-container')
+      expect(current_path).to eq(select_trials_path)
     end
+  end
 
-    context 'enters company information' do
-      before do
-        fill_in 'company_name', with: 'GitLab'
-        select2 '1-99', from: '#company_size'
-        select2 'US', from: '#country_select'
-      end
-
-      context 'without phone number' do
-        it 'shows validation error' do
-          click_button 'Continue'
+  context 'with phone number validations' do
+    before do
+      fill_in 'company_name', with: 'GitLab'
+      select '1 - 99', from: 'company_size'
+      select 'United States of America', from: 'country'
+    end
 
-          message = page.find('#phone_number').native.attribute('validationMessage')
+    context 'without phone number' do
+      it 'shows validation error' do
+        click_button 'Continue'
 
-          expect(message).to eq('Please fill out this field.')
-          expect(current_path).to eq(new_trial_path)
-        end
+        expect(phone_validation_message).to eq('Please fill out this field.')
+        expect(current_path).to eq(new_trial_path)
       end
+    end
 
-      context 'with invalid phone number format' do
-        it 'shows validation error' do
-          invalid_phone_numbers = [
-            '+1 (121) 22-12-23',
-            '+12190AX ',
-            'Tel:129120',
-            '11290+12'
-          ]
-
-          invalid_phone_numbers.each do |phone_number|
-            fill_in 'phone_number', with: phone_number
+    context 'with invalid phone number format' do
+      it 'shows validation error' do
+        invalid_phone_numbers = [
+          '+1 (121) 22-12-23',
+          '+12190AX ',
+          'Tel:129120',
+          '11290+12'
+        ]
 
-            click_button 'Continue'
+        invalid_phone_numbers.each do |phone_number|
+          fill_in 'phone_number', with: phone_number
 
-            message = page.find('#phone_number').native.attribute('validationMessage')
+          click_button 'Continue'
 
-            expect(message).to eq('Please match the requested format.')
-            expect(current_path).to eq(new_trial_path)
-          end
+          expect(phone_validation_message).to eq('Please match the requested format.')
+          expect(current_path).to eq(new_trial_path)
         end
       end
     end
+
+    def phone_validation_message
+      page.find('[data-testid="phone_number"]').native.attribute('validationMessage')
+    end
   end
 end

ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js

@@ -6,7 +6,13 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue';
-import { i18n } from 'ee/hand_raise_leads/hand_raise_lead/constants';
+import {
+  PQL_BUTTON_TEXT,
+  PQL_MODAL_PRIMARY,
+  PQL_MODAL_CANCEL,
+  PQL_MODAL_HEADER_TEXT,
+  PQL_MODAL_FOOTER_TEXT,
+} from 'ee/hand_raise_leads/hand_raise_lead/constants';
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
 import { formData, states, countries } from './mock_data';
 
@@ -67,7 +73,7 @@ describe('HandRaiseLeadButton', () => {
     });
 
     it('has the "Contact sales" text on the button', () => {
-      expect(findButton().text()).toBe(i18n.buttonText);
+      expect(findButton().text()).toBe(PQL_BUTTON_TEXT);
     });
 
     it('has the default injected values', async () => {
@@ -103,17 +109,17 @@ describe('HandRaiseLeadButton', () => {
     });
 
     it('has the correct text in the modal content', () => {
-      expect(findModal().text()).toContain(sprintf(i18n.modalHeaderText, { userName: 'joe' }));
-      expect(findModal().text()).toContain(i18n.modalFooterText);
+      expect(findModal().text()).toContain(sprintf(PQL_MODAL_HEADER_TEXT, { userName: 'joe' }));
+      expect(findModal().text()).toContain(PQL_MODAL_FOOTER_TEXT);
     });
 
     it('has the correct modal props', () => {
       expect(findModal().props('actionPrimary')).toStrictEqual({
-        text: i18n.modalPrimary,
+        text: PQL_MODAL_PRIMARY,
         attributes: [{ variant: 'success' }, { disabled: true }],
       });
       expect(findModal().props('actionCancel')).toStrictEqual({
-        text: i18n.modalCancel,
+        text: PQL_MODAL_CANCEL,
       });
     });
 
@@ -139,7 +145,7 @@ describe('HandRaiseLeadButton', () => {
       await wrapper.vm.$nextTick();
 
       expect(findModal().props('actionPrimary')).toStrictEqual({
-        text: i18n.modalPrimary,
+        text: PQL_MODAL_PRIMARY,
         attributes: [{ variant: 'success' }, { disabled: false }],
       });
     });

ee/spec/frontend/trials/components/mock_data.js

+export const submitPath = '_submit_path_';
+export const formData = {
+  firstName: 'Joe',
+  lastName: 'Doe',
+  companyName: 'ACME',
+  companySize: '1-99',
+  phoneNumber: '192919',
+  country: 'US',
+};

ee/spec/frontend/trials/components/trial_create_lead_form_spec.js

+import { GlButton, GlForm } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import TrialCreateLeadForm from 'ee/trials/components/trial_create_lead_form.vue';
+import { TRIAL_FORM_SUBMIT_TEXT } from 'ee/trials/constants';
+import { trackSaasTrialSubmit } from '~/google_tag_manager';
+import { formData, submitPath } from './mock_data';
+
+jest.mock('~/google_tag_manager', () => ({
+  trackSaasTrialSubmit: jest.fn(),
+}));
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('TrialCreateLeadForm', () => {
+  let wrapper;
+
+  const createComponent = ({ mountFunction = shallowMountExtended } = {}) => {
+    const mockResolvers = {
+      Query: {
+        countries() {
+          return [{ id: 'US', name: 'United States' }];
+        },
+      },
+    };
+
+    return mountFunction(TrialCreateLeadForm, {
+      localVue,
+      apolloProvider: createMockApollo([], mockResolvers),
+      provide: {
+        submitPath,
+        user: formData,
+      },
+    });
+  };
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findFormInput = (testId) => wrapper.findByTestId(testId);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('has the "Continue" text on the submit button', () => {
+      expect(findButton().text()).toBe(TRIAL_FORM_SUBMIT_TEXT);
+    });
+
+    it.each`
+      testid            | value
+      ${'first_name'}   | ${'Joe'}
+      ${'last_name'}    | ${'Doe'}
+      ${'company_name'} | ${'ACME'}
+      ${'phone_number'} | ${'192919'}
+      ${'company_size'} | ${'1-99'}
+      ${'country'}      | ${'US'}
+    `('has the default injected value for $testid', ({ testid, value }) => {
+      expect(findFormInput(testid).attributes('value')).toBe(value);
+    });
+
+    it('has the correct form input in the form content', () => {
+      const visibleFields = [
+        'first_name',
+        'last_name',
+        'company_name',
+        'company_size',
+        'phone_number',
+        'country',
+      ];
+
+      visibleFields.forEach((f) => expect(wrapper.findByTestId(f).exists()).toBe(true));
+    });
+  });
+
+  describe('submitting', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ mountFunction: mountExtended });
+    });
+
+    it('tracks the saas Trial', () => {
+      findForm().trigger('submit');
+
+      expect(trackSaasTrialSubmit).toHaveBeenCalled();
+    });
+  });
+});

ee/spec/helpers/ee/trial_helper_spec.rb

@@ -5,6 +5,56 @@ require 'spec_helper'
 RSpec.describe EE::TrialHelper do
   using RSpec::Parameterized::TableSyntax
 
+  describe '#create_lead_form_data' do
+    let(:user) do
+      double('User', first_name: '_first_name_', last_name: '_last_name_', organization: '_company_name_')
+    end
+
+    let(:extra_params) do
+      {
+        first_name: '_params_first_name_',
+        last_name: '_params_last_name_',
+        company_name: '_params_company_name_',
+        company_size: '_company_size_',
+        phone_number: '1234',
+        country: '_country_'
+      }
+    end
+
+    let(:params) do
+      ActionController::Parameters.new(extra_params.merge(glm_source: '_glm_source_', glm_content: '_glm_content_'))
+    end
+
+    before do
+      allow(helper).to receive(:params).and_return(params)
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    it 'provides expected form data' do
+      keys = extra_params.keys + [:submit_path]
+
+      expect(helper.create_lead_form_data.keys.map(&:to_sym)).to match_array(keys)
+    end
+
+    it 'allows overriding data with params' do
+      expect(helper.create_lead_form_data).to match(a_hash_including(extra_params))
+    end
+
+    context 'when params are empty' do
+      let(:extra_params) { {} }
+
+      it 'uses the values from current user' do
+        current_user_attributes = {
+          first_name: user.first_name,
+          last_name: user.last_name,
+          company_name: user.organization
+        }
+
+        expect(helper.create_lead_form_data).to match(a_hash_including(current_user_attributes))
+      end
+    end
+  end
+
   describe '#should_ask_company_question?' do
     before do
       allow(helper).to receive(:glm_params).and_return(glm_source ? { glm_source: glm_source } : {})

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

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'trials/new.html.haml' do
-  include ApplicationHelper
-  let_it_be(:variant) { :control }
-  let_it_be(:user) { build(:user) }
-
-  before do
-    allow(view).to receive(:current_user) { user }
-
-    render
-  end
-
-  subject { rendered }
-
-  it 'has fields for first, last company name and size', :aggregate_failures do
-    is_expected.to have_field('first_name')
-    is_expected.to have_field('last_name')
-    is_expected.to have_field('company_name')
-    sizes = ['Please select', '1 - 99', '100 - 499', '500 - 1,999', '2,000 - 9,999', '10,000 +']
-    is_expected.to have_select('company_size', options: sizes, selected: [])
-  end
-end

locale/gitlab.pot

@@ -37553,6 +37553,9 @@ msgstr ""
 msgid "Trials|Your trial ends on %{boldStart}%{trialEndDate}%{boldEnd}. We hope you’re enjoying the features of GitLab %{planName}. To keep those features after your trial ends, you’ll need to buy a subscription. (You can also choose GitLab Premium if it meets your needs.)"
 msgstr ""
 
+msgid "Trial|Allowed characters: +, 0-9, -, and spaces."
+msgstr ""
+
 msgid "Trial|Company name"
 msgstr ""
 
@@ -37568,15 +37571,9 @@ msgstr ""
 msgid "Trial|Dismiss"
 msgstr ""
 
-msgid "Trial|First name"
-msgstr ""
-
 msgid "Trial|GitLab Ultimate trial (optional)"
 msgstr ""
 
-msgid "Trial|Last name"
-msgstr ""
-
 msgid "Trial|Number of employees"
 msgstr ""
 

spec/frontend/google_tag_manager/index_spec.js

@@ -135,9 +135,6 @@ describe('~/google_tag_manager/index', () => {
   describe.each([
     createOmniAuthTestCase(trackFreeTrialAccountSubmissions, 'freeThirtyDayTrial'),
     createOmniAuthTestCase(trackNewRegistrations, 'standardSignUp'),
-    createTestCase(trackSaasTrialSubmit, {
-      forms: [{ id: 'new_trial', expectation: { event: 'saasTrialSubmit' } }],
-    }),
     createTestCase(trackSaasTrialSkip, {
       links: [{ cls: 'js-skip-trial', expectation: { event: 'saasTrialSkip' } }],
     }),
@@ -202,6 +199,18 @@ describe('~/google_tag_manager/index', () => {
     });
   });
 
+  describe('No listener events', () => {
+    it('when trackSaasTrialSubmit is invoked', () => {
+      expect(spy).not.toHaveBeenCalled();
+
+      trackSaasTrialSubmit();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ event: 'saasTrialSubmit' });
+      expect(logError).not.toHaveBeenCalled();
+    });
+  });
+
   describe.each([
     { dataLayer: null },
     { gon: { features: null } },