Prefill form values for hand raise leads

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

@@ -32,22 +32,13 @@ export default {
     autofocusonshow,
   },
   mixins: [Tracking.mixin()],
-  props: {
-    namespaceId: {
-      type: Number,
-      required: true,
-    },
-    userName: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['user'],
   data() {
     return {
       isLoading: false,
-      firstName: '',
-      lastName: '',
-      companyName: '',
+      firstName: this.user.firstName,
+      lastName: this.user.lastName,
+      companyName: this.user.companyName,
       companySize: null,
       phoneNumber: '',
       country: null,
@@ -76,7 +67,7 @@ export default {
   computed: {
     modalHeaderText() {
       return sprintf(this.$options.i18n.modalHeaderText, {
-        userName: this.userName,
+        userName: this.user.userName,
       });
     },
     mustEnterState() {
@@ -141,11 +132,11 @@ export default {
     },
     formParams() {
       return {
-        namespaceId: this.namespaceId,
-        companyName: this.companyName,
-        companySize: this.companySize,
+        namespaceId: Number(this.user.namespaceId),
         firstName: this.firstName,
         lastName: this.lastName,
+        companyName: this.companyName,
+        companySize: this.companySize,
         phoneNumber: this.phoneNumber,
         country: this.country,
         state: this.mustEnterState ? this.state : null,
@@ -154,7 +145,7 @@ export default {
     },
   },
   methods: {
-    clearForm() {
+    resetForm() {
       this.firstName = '';
       this.lastName = '';
       this.companyName = '';
@@ -173,7 +164,7 @@ export default {
             message: this.$options.i18n.handRaiseActionSuccess,
             type: FLASH_TYPES.SUCCESS,
           });
-          this.clearForm();
+          this.resetForm();
           this.track('hand_raise_submit_form_succeeded');
         })
         .catch((error) => {

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

@@ -3,18 +3,22 @@ import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/
 import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
 
 export const initHandRaiseLeadButton = (el) => {
-  const { namespaceId, userName } = el.dataset;
+  const { namespaceId, userName, firstName, lastName, companyName } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
+    provide: {
+      user: {
+        namespaceId,
+        userName,
+        firstName,
+        lastName,
+        companyName,
+      },
+    },
     render(createElement) {
-      return createElement(HandRaiseLeadButton, {
-        props: {
-          namespaceId: Number(namespaceId),
-          userName,
-        },
-      });
+      return createElement(HandRaiseLeadButton);
     },
   });
 };

ee/app/helpers/billing_plans_helper.rb

@@ -142,6 +142,16 @@ module BillingPlansHelper
     end
   end
 
+  def hand_raise_props(namespace)
+    {
+      namespace_id: namespace.id,
+      user_name: current_user.username,
+      first_name: current_user.first_name,
+      last_name: current_user.last_name,
+      company_name: current_user.organization
+    }
+  end
+
   private
 
   def add_seats_url(group)

ee/app/views/shared/billings/_billing_plan.html.haml

@@ -67,7 +67,7 @@
       .gl-min-h-7.gl-display-flex.gl-flex-wrap.gl-justify-content-end
         - if show_contact_sales_button?(purchase_link.action, plan_offer_type)
           - if Feature.enabled?(:in_app_hand_raise_pql, namespace)
-            .js-hand-raise-lead-button{ data: { namespace_id: namespace.id, user_name: current_user.username } }
+            .js-hand-raise-lead-button{ data: hand_raise_props(namespace) }
           - else
             = link_to s_('BillingPlan|Contact sales'), "#{contact_sales_url}?test=inappcontactsales#{plan.code}", class: ["btn gl-button", show_upgrade_button ? "btn-success-secondary" : "btn-success"], data: { 'track-action': 'click_button', 'track-label': 'contact_sales', 'track-property': plan.code }
         - if show_upgrade_button

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

@@ -18,7 +18,7 @@ describe('HandRaiseLeadButton', () => {
   let fakeApollo;
   let trackingSpy;
 
-  const createComponent = (props = {}) => {
+  const createComponent = () => {
     const mockResolvers = {
       Query: {
         countries() {
@@ -34,16 +34,21 @@ describe('HandRaiseLeadButton', () => {
     return shallowMountExtended(HandRaiseLeadButton, {
       localVue,
       apolloProvider: fakeApollo,
-      propsData: {
-        namespaceId: 1,
-        userName: 'Joe',
-        ...props,
+      provide: {
+        user: {
+          namespaceId: '1',
+          userName: 'joe',
+          firstName: 'Joe',
+          lastName: 'Doe',
+          companyName: 'ACME',
+        },
       },
     });
   };
 
   const findButton = () => wrapper.findComponent(GlButton);
   const findModal = () => wrapper.findComponent(GlModal);
+  const findFormInput = (testId) => wrapper.findByTestId(testId);
 
   afterEach(() => {
     wrapper.destroy();
@@ -65,6 +70,23 @@ describe('HandRaiseLeadButton', () => {
       expect(findButton().text()).toBe(i18n.buttonText);
     });
 
+    it('has the default injected values', async () => {
+      const formInputValues = [
+        { id: 'first-name', value: 'Joe' },
+        { id: 'last-name', value: 'Doe' },
+        { id: 'company-name', value: 'ACME' },
+        { id: 'phone-number', value: '' },
+        { id: 'company-size', value: undefined },
+        { id: 'country', value: undefined },
+      ];
+
+      formInputValues.forEach(({ id, value }) => {
+        expect(findFormInput(id).attributes('value')).toBe(value);
+      });
+
+      expect(findFormInput('state').exists()).toBe(false);
+    });
+
     it('has the correct form input in the form content', () => {
       const visibleFields = [
         'first-name',
@@ -81,7 +103,7 @@ describe('HandRaiseLeadButton', () => {
     });
 
     it('has the correct text in the modal content', () => {
-      expect(findModal().text()).toContain(sprintf(i18n.modalHeaderText, { userName: 'Joe' }));
+      expect(findModal().text()).toContain(sprintf(i18n.modalHeaderText, { userName: 'joe' }));
       expect(findModal().text()).toContain(i18n.modalFooterText);
     });
 

ee/spec/helpers/billing_plans_helper_spec.rb

@@ -394,6 +394,20 @@ RSpec.describe BillingPlansHelper, :saas do
     end
   end
 
+  describe "#hand_raise_props" do
+    let_it_be(:namespace) { create(:namespace) }
+    let_it_be(:user) { create(:user, username: 'Joe', first_name: 'Joe', last_name: 'Doe', organization: 'ACME') }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    it 'builds correct hash' do
+      props = helper.hand_raise_props(namespace)
+      expect(props).to eq(namespace_id: namespace.id, user_name: 'Joe', first_name: 'Joe', last_name: 'Doe', company_name: 'ACME')
+    end
+  end
+
   describe '#upgrade_button_text' do
     using RSpec::Parameterized::TableSyntax