Commit eb0990a2 authored by Vitaly Slobodin's avatar Vitaly Slobodin

Fix loading subscription details

Introducing multiple GraphQL clients
introduced some errors in loading
Subscription details.
This commit fixes that and simplifies this process
a bit.
parent 8280b77a
......@@ -8,9 +8,12 @@ import { NEW_GROUP } from 'ee/subscriptions/new/constants';
import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
import { sprintf, s__, __ } from '~/locale';
import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
import { getParameterValues } from '~/lib/utils/url_utility';
import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
import createFlash from '~/flash';
export default {
components: {
components: {
GlFormGroup,
GlFormSelect,
GlFormInput,
......@@ -34,45 +37,37 @@ export default {
customer: {},
isSetupForCompany: null,
isNewUser: null,
selectedPlanId: null,
};
},
apollo: {
state: {
query: STATE_QUERY,
update(data) {
const {
subscription = {},
namespaces = [],
customer = {},
isSetupForCompany = null,
isNewUser = null,
} = data;
return {
subscription,
namespaces,
customer,
isSetupForCompany,
isNewUser,
};
},
result({ data }) {
const { subscription, namespaces, customer, isSetupForCompany, isNewUser } = data || {};
manual: true,
result({ data, loading }) {
if (loading) {
return;
}
this.subscription = subscription;
this.namespaces = namespaces;
this.customer = customer;
this.isSetupForCompany = isSetupForCompany;
this.isNewUser = isNewUser;
this.subscription = data.subscription;
this.namespaces = data.namespaces;
this.customer = data.customer;
this.isSetupForCompany = data.isSetupForCompany;
this.isNewUser = data.isNewUser;
this.selectedPlanId = data.selectedPlanId;
},
},
},
mounted() {
this.preselectPlan();
},
computed: {
selectedPlanModel: {
get() {
return this.subscription.planId || this.plans[0].code;
return this.selectedPlanId || this.plans[0].id;
},
set(planId) {
this.updateSubscription({ subscription: { planId } });
this.updateState({ subscription: { planId } });
},
},
selectedGroupModel: {
......@@ -83,7 +78,7 @@ export default {
const quantity =
this.namespaces.find((namespace) => namespace.id === namespaceId)?.users || 1;
this.updateSubscription({ subscription: { namespaceId, quantity } });
this.updateState({ subscription: { namespaceId, quantity } });
},
},
numberOfUsersModel: {
......@@ -91,7 +86,7 @@ export default {
return this.selectedGroupUsers || 1;
},
set(number) {
this.updateSubscription({ subscription: { quantity: number } });
this.updateState({ subscription: { quantity: number } });
},
},
companyModel: {
......@@ -99,11 +94,11 @@ export default {
return this.customer.company;
},
set(company) {
this.updateSubscription({ customer: { company } });
this.updateState({ customer: { company } });
},
},
selectedPlan() {
const selectedPlan = this.plans.find((plan) => plan.code === this.subscription.planId);
const selectedPlan = this.plans.find((plan) => plan.id === this.selectedPlanId);
if (!selectedPlan) {
return this.plans[0];
}
......@@ -111,13 +106,13 @@ export default {
return selectedPlan;
},
selectedPlanTextLine() {
return sprintf(this.$options.i18n.selectedPlan, { selectedPlanText: this.selectedPlan.code });
return sprintf(this.$options.i18n.selectedPlan, { selectedPlanText: this.selectedPlan.id });
},
selectedGroup() {
return this.namespaces.find((namespace) => namespace.id === this.subscription.namespaceId);
},
selectedGroupUsers() {
return (
this.namespaces.find((namespace) => namespace.id === this.subscription.namespaceId)
?.users || 1
);
return this.selectedGroup?.users || 1;
},
isGroupSelected() {
return this.subscription.namespaceId !== null;
......@@ -129,14 +124,10 @@ export default {
},
isValid() {
if (this.isSetupForCompany) {
return (
!isEmpty(this.subscription.planId) &&
(!isEmpty(this.customer.company) || this.isNewGroupSelected) &&
this.isNumberOfUsersValid
);
return this.isNumberOfUsersValid && !isEmpty(this.selectedPlanId) && (!isEmpty(this.customer.company) || this.isGroupSelected);
}
return !isEmpty(this.subscription.planId) && this.subscription.quantity === 1;
return (this.subscription.quantity === 1) && !isEmpty(this.selectedPlanId);
},
isShowingGroupSelector() {
return !this.isNewUser && this.namespaces.length;
......@@ -167,37 +158,54 @@ export default {
},
},
methods: {
updateSubscription(payload = {}) {
updateState(payload = {}) {
this.$apollo.mutate({
mutation: UPDATE_STATE,
variables: {
input: payload,
},
}).catch((error) => {
createFlash({ message: GENERAL_ERROR_MESSAGE, error, captureError: true });
});
},
toggleIsSetupForCompany() {
this.updateSubscription({ isSetupForCompany: !this.isSetupForCompany });
},
preselectPlan() {
if (this.selectedPlanId) {
return;
}
let plan = this.plans[0];
const planIdFromSearchParams = getParameterValues('planId');
if (planIdFromSearchParams.length > 0) {
plan = this.plans.find((plan) => plan.id === planIdFromSearchParams[0].id) || plan;
}
this.updateState({ selectedPlanId: plan.id });
},
},
i18n: {
stepTitle: s__('Checkout|Subscription details'),
nextStepButtonText: s__('Checkout|Continue to billing'),
selectedPlanLabel: s__('Checkout|GitLab plan'),
selectedGroupLabel: s__('Checkout|GitLab group'),
groupSelectPrompt: __('Select'),
groupSelectCreateNewOption: s__('Checkout|Create a new group'),
selectedGroupDescription: s__('Checkout|Your subscription will be applied to this group'),
createNewGroupDescription: s__("Checkout|You'll create your new group after checkout"),
organizationNameLabel: s__('Checkout|Name of company or organization using GitLab'),
numberOfUsersLabel: s__('Checkout|Number of users'),
needMoreUsersLink: s__('Checkout|Need more users? Purchase GitLab for your %{company}.'),
companyOrTeam: s__('Checkout|company or team'),
selectedPlan: s__('Checkout|%{selectedPlanText} plan'),
group: __('Group'),
users: __('Users'),
},
stepId: STEPS[0].id,
};
i18n: {
stepTitle: s__('Checkout|Subscription details'),
nextStepButtonText: s__('Checkout|Continue to billing'),
selectedPlanLabel: s__('Checkout|GitLab plan'),
selectedGroupLabel: s__('Checkout|GitLab group'),
groupSelectPrompt: __('Select'),
groupSelectCreateNewOption: s__('Checkout|Create a new group'),
selectedGroupDescription: s__('Checkout|Your subscription will be applied to this group'),
createNewGroupDescription: s__("Checkout|You'll create your new group after checkout"),
organizationNameLabel: s__('Checkout|Name of company or organization using GitLab'),
numberOfUsersLabel: s__('Checkout|Number of users'),
needMoreUsersLink: s__('Checkout|Need more users? Purchase GitLab for your %{company}.'),
companyOrTeam: s__('Checkout|company or team'),
selectedPlan: s__('Checkout|%{selectedPlanText} plan'),
group: __('Group'),
users: __('Users'),
},
stepId: STEPS[0].id,
};
</script>
<template>
<step
......@@ -213,7 +221,7 @@ export default {
v-model="selectedPlanModel"
v-autofocusonshow
:options="plans"
value-field="code"
value-field="id"
text-field="name"
data-qa-selector="plan_name"
/>
......@@ -271,7 +279,7 @@ export default {
{{ selectedPlanTextLine }}
</strong>
<div v-if="isSetupForCompany" ref="summary-line-2">
{{ $options.i18n.group }}: {{ customer.company || selectedGroupName }}
{{ $options.i18n.group }}: {{ customer.company || selectedGroup.name }}
</div>
<div ref="summary-line-3">{{ $options.i18n.users }}: {{ subscription.quantity }}</div>
</template>
......
......@@ -24,8 +24,8 @@ export function writeInitialDataToApolloCache(apolloProvider, dataset) {
isSetupForCompany,
namespaces,
fullName,
selectedPlanId: planId,
subscription: {
planId,
paymentMethodId: null,
quantity: 1,
namespaceId: null,
......
query state {
query State {
namespaces @client {
id
name
......@@ -7,6 +7,7 @@ query state {
isNewUser @client
fullName @client
isSetupForCompany @client
selectedPlanId @client
customer @client {
country
address1
......@@ -17,7 +18,6 @@ query state {
company
}
subscription @client {
planId
paymentMethodId
quantity
namespaceId
......
......@@ -263,25 +263,14 @@ describe('Subscription Details', () => {
describe('when setting up for a company', () => {
it('should be valid', () => {
wrapper = createComponent({
subscription: { planId: 'firstPlanId', namespaceId: 483, quantity: 14 },
subscription: { namespaceId: 483, quantity: 14 },
selectedPlanId: 'firstPlanId',
customer: { company: 'Organization name' },
});
expect(isStepValid()).toBe(true);
});
it('should be invalid when no plan is selected', async () => {
wrapper = createComponent({
isSetupForCompany: true,
subscription: { planId: null, namespaceId: 483, quantity: 14 },
customer: { company: 'Organization name' },
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when no organization name is given, and no group is selected', async () => {
wrapper = createComponent({
isSetupForCompany: true,
......@@ -321,7 +310,8 @@ describe('Subscription Details', () => {
beforeEach(() => {
wrapper = createComponent({
isSetupForCompany: false,
subscription: { planId: 'firstPlanId', namespaceId: 483, quantity: 1 },
subscription: { namespaceId: 483, quantity: 1 },
selectedPlanId: 'firstPlanId',
customer: { company: 'Organization name' },
});
});
......@@ -330,22 +320,11 @@ describe('Subscription Details', () => {
expect(isStepValid()).toBe(true);
});
it('should be invalid when no plan is selected', async () => {
wrapper = createComponent({
isSetupForCompany: false,
subscription: { planId: null, namespaceId: 483, quantity: 1 },
customer: { company: 'Organization name' },
});
await nextTick();
expect(isStepValid()).toBe(false);
});
it('should be invalid when no number of users is 0', async () => {
wrapper = createComponent({
isSetupForCompany: false,
subscription: { planId: 'firstPlanId', namespaceId: 483, quantity: 0 },
subscription: { namespaceId: 483, quantity: 0 },
selectedPlanId: 'firstPlanId',
customer: { company: 'Organization name' },
});
......@@ -357,7 +336,8 @@ describe('Subscription Details', () => {
it('should be invalid when no number of users is greater than 1', async () => {
wrapper = createComponent({
isSetupForCompany: false,
subscription: { planId: 'firstPlanId', namespaceId: 483, quantity: 2 },
subscription: { namespaceId: 483, quantity: 2 },
selectedPlanId: 'firstPlanId',
customer: { company: 'Organization name' },
});
......
......@@ -19,12 +19,12 @@ export const mockSetupForCompany = 'true';
export const stateData = {
namespaces: [],
subscription: {
planId: 'secondPlanId',
quantity: 1,
namespaceId: null,
paymentMethodId: null,
__typename: 'Subscription',
},
selectedPlanId: null,
customer: {
country: null,
address1: null,
......
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