Commit 78b0d418 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch...

Merge branch 'customers-2200-mlunoe-handle-non-existing-group-gracefully-in-new-subscription-flow' into 'master'

Fix(New Subscription): handle non-existing groups

See merge request gitlab-org/gitlab!48626
parents 55f36fa5 944e0639
......@@ -17,7 +17,13 @@ export default {
};
},
computed: {
...mapGetters(['totalAmount', 'name', 'usersPresent']),
...mapGetters([
'totalAmount',
'name',
'usersPresent',
'isGroupSelected',
'isSelectedGroupPresent',
]),
titleWithName() {
return sprintf(this.$options.i18n.title, { name: this.name });
},
......@@ -33,7 +39,10 @@ export default {
};
</script>
<template>
<div class="order-summary d-flex flex-column flex-grow-1 gl-mt-2 mt-lg-5">
<div
v-if="!isGroupSelected || isSelectedGroupPresent"
class="order-summary gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mt-2 mt-lg-5"
>
<div class="d-lg-none">
<div @click="toggleCollapse">
<h4 class="d-flex justify-content-between gl-font-lg" :class="{ 'gl-mb-7': !collapsed }">
......
......@@ -45,9 +45,14 @@ export const vat = (state, getters) => state.taxRate * getters.totalExVat;
export const totalAmount = (_, getters) => getters.totalExVat + getters.vat;
export const name = (state, getters) => {
if (state.isSetupForCompany && state.organizationName) return state.organizationName;
else if (getters.isGroupSelected) return getters.selectedGroupName;
else if (state.isSetupForCompany) return s__('Checkout|Your organization');
if (state.isSetupForCompany && state.organizationName) {
return state.organizationName;
} else if (getters.isGroupSelected && getters.isSelectedGroupPresent) {
return getters.selectedGroupName;
} else if (state.isSetupForCompany) {
return s__('Checkout|Your organization');
}
return state.fullName;
};
......@@ -56,9 +61,20 @@ export const usersPresent = state => state.numberOfUsers > 0;
export const isGroupSelected = state =>
state.selectedGroup !== null && state.selectedGroup !== NEW_GROUP;
export const isSelectedGroupPresent = (state, getters) => {
return (
getters.isGroupSelected && state.groupData.some(group => group.value === state.selectedGroup)
);
};
export const selectedGroupUsers = (state, getters) => {
if (!getters.isGroupSelected) return 1;
return state.groupData.find(group => group.value === state.selectedGroup).numberOfUsers;
if (!getters.isGroupSelected) {
return 1;
} else if (getters.isSelectedGroupPresent) {
return state.groupData.find(group => group.value === state.selectedGroup).numberOfUsers;
}
return null;
};
export const selectedGroupName = (state, getters) => {
......
---
title: Fix the user experience when the user is unauthorized or trying to subscribe
for a non-existing group
merge_request: 48626
author:
type: fixed
......@@ -105,11 +105,28 @@ describe('Subscriptions Getters', () => {
).toBe('My organization');
});
it('returns the organization name when a group is selected but does not exist', () => {
expect(
getters.name(
{ isSetupForCompany: true },
{
isGroupSelected: true,
isSelectedGroupPresent: false,
selectedGroupName: 'Selected group',
},
),
).toBe('Your organization');
});
it('returns the selected group name a group is selected', () => {
expect(
getters.name(
{ isSetupForCompany: true },
{ isGroupSelected: true, selectedGroupName: 'Selected group' },
{
isGroupSelected: true,
isSelectedGroupPresent: true,
selectedGroupName: 'Selected group',
},
),
).toBe('Selected group');
});
......@@ -161,16 +178,54 @@ describe('Subscriptions Getters', () => {
).toBe(1);
});
it('returns `null` when a group is selected, but not present', () => {
expect(
getters.selectedGroupUsers(
{ groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
{ isGroupSelected: true, isSelectedGroupPresent: false },
),
).toBe(null);
});
it('returns the number of users of the selected group when a group is selected', () => {
expect(
getters.selectedGroupUsers(
{ groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
{ isGroupSelected: true },
{ isGroupSelected: true, isSelectedGroupPresent: true },
),
).toBe(3);
});
});
describe('isSelectedGroupPresent', () => {
it('returns false when group is not selected', () => {
expect(
getters.isSelectedGroupPresent(
{ groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: null },
{ isGroupSelected: false },
),
).toBe(false);
});
it('returns false when group is selected, but not present', () => {
expect(
getters.isSelectedGroupPresent(
{ groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 321 },
{ isGroupSelected: true },
),
).toBe(false);
});
it('returns true when group is selected and is present', () => {
expect(
getters.isSelectedGroupPresent(
{ groupData: [{ numberOfUsers: 3, value: 123 }], selectedGroup: 123 },
{ isGroupSelected: true },
),
).toBe(true);
});
});
describe('selectedGroupName', () => {
it('returns null when no group is selected', () => {
expect(
......
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