Commit f21783fd authored by Alper Akgun's avatar Alper Akgun Committed by David O'Regan

Prefill form values for hand raise leads

parent 483126f9
......@@ -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) => {
......
......@@ -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,
render(createElement) {
return createElement(HandRaiseLeadButton, {
props: {
namespaceId: Number(namespaceId),
provide: {
user: {
namespaceId,
userName,
firstName,
lastName,
companyName,
},
});
},
render(createElement) {
return createElement(HandRaiseLeadButton);
},
});
};
......@@ -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)
......
......@@ -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
......
......@@ -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);
});
......
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment