Commit 796b7376 authored by Angelo Gulina's avatar Angelo Gulina

Add Subscription Activate banner

Subscription Activation shows a success banner
The tests are updated
parent 51202fd4
<script> <script>
import { GlAlert } from '@gitlab/ui';
import { import {
subscriptionActivationNotificationText,
subscriptionActivationTitle, subscriptionActivationTitle,
subscriptionHistoryQueries, subscriptionHistoryQueries,
subscriptionMainTitle, subscriptionMainTitle,
...@@ -13,12 +15,14 @@ import SubscriptionTrialCard from './subscription_trial_card.vue'; ...@@ -13,12 +15,14 @@ import SubscriptionTrialCard from './subscription_trial_card.vue';
export default { export default {
name: 'CloudLicenseApp', name: 'CloudLicenseApp',
components: { components: {
SubscriptionBreakdown, GlAlert,
CloudLicenseSubscriptionActivationForm, CloudLicenseSubscriptionActivationForm,
SubscriptionTrialCard, SubscriptionBreakdown,
SubscriptionPurchaseCard, SubscriptionPurchaseCard,
SubscriptionTrialCard,
}, },
i18n: { i18n: {
subscriptionActivationNotificationText,
subscriptionActivationTitle, subscriptionActivationTitle,
subscriptionMainTitle, subscriptionMainTitle,
}, },
...@@ -48,13 +52,19 @@ export default { ...@@ -48,13 +52,19 @@ export default {
}, },
data() { data() {
return { return {
canShowSubscriptionDetails: this.hasActiveLicense,
currentSubscription: {}, currentSubscription: {},
shouldShowSubscriptionActivationNotification: false,
subscriptionHistory: [], subscriptionHistory: [],
canShowSubscriptionDetails: this.hasActiveLicense, notification: null,
}; };
}, },
methods: { methods: {
didDismissSuccessAlert() {
this.shouldShowSubscriptionActivationNotification = false;
},
handleActivation(hasLicense) { handleActivation(hasLicense) {
this.shouldShowSubscriptionActivationNotification = hasLicense;
this.canShowSubscriptionDetails = hasLicense; this.canShowSubscriptionDetails = hasLicense;
}, },
}, },
...@@ -65,6 +75,14 @@ export default { ...@@ -65,6 +75,14 @@ export default {
<div class="gl-display-flex gl-justify-content-center gl-flex-direction-column"> <div class="gl-display-flex gl-justify-content-center gl-flex-direction-column">
<h4 data-testid="subscription-main-title">{{ $options.i18n.subscriptionMainTitle }}</h4> <h4 data-testid="subscription-main-title">{{ $options.i18n.subscriptionMainTitle }}</h4>
<hr /> <hr />
<gl-alert
v-if="shouldShowSubscriptionActivationNotification"
variant="success"
:title="$options.i18n.subscriptionActivationNotificationText"
class="mb-4"
data-testid="subscription-activation-success-alert"
@dismiss="didDismissSuccessAlert"
/>
<subscription-breakdown <subscription-breakdown
v-if="canShowSubscriptionDetails" v-if="canShowSubscriptionDetails"
:subscription="currentSubscription" :subscription="currentSubscription"
......
...@@ -84,7 +84,6 @@ export default { ...@@ -84,7 +84,6 @@ export default {
<template #header> <template #header>
<h5 class="gl-my-0 gl-font-weight-bold">{{ $options.i18n.title }}</h5> <h5 class="gl-my-0 gl-font-weight-bold">{{ $options.i18n.title }}</h5>
</template> </template>
<p> <p>
<gl-sprintf :message="$options.i18n.howToActivateSubscription"> <gl-sprintf :message="$options.i18n.howToActivateSubscription">
<template #link="{ content }"> <template #link="{ content }">
......
...@@ -4,6 +4,9 @@ import getCurrentLicense from './graphql/queries/get_current_license.query.graph ...@@ -4,6 +4,9 @@ import getCurrentLicense from './graphql/queries/get_current_license.query.graph
import getLicenseHistory from './graphql/queries/get_license_history.query.graphql'; import getLicenseHistory from './graphql/queries/get_license_history.query.graphql';
export const subscriptionMainTitle = s__('SuperSonics|Your subscription'); export const subscriptionMainTitle = s__('SuperSonics|Your subscription');
export const subscriptionActivationNotificationText = s__(
`SuperSonics|Your subscription was successfully activated. You can see the details below.`,
);
export const subscriptionActivationTitle = s__( export const subscriptionActivationTitle = s__(
`SuperSonics|You do not have an active subscription`, `SuperSonics|You do not have an active subscription`,
); );
......
...@@ -4,6 +4,7 @@ import CloudLicenseApp from 'ee/pages/admin/cloud_licenses/components/app.vue'; ...@@ -4,6 +4,7 @@ import CloudLicenseApp from 'ee/pages/admin/cloud_licenses/components/app.vue';
import SubscriptionActivationForm from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue'; import SubscriptionActivationForm from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
import SubscriptionBreakdown from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue'; import SubscriptionBreakdown from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue';
import { import {
subscriptionActivationNotificationText,
subscriptionActivationTitle, subscriptionActivationTitle,
subscriptionHistoryQueries, subscriptionHistoryQueries,
subscriptionMainTitle, subscriptionMainTitle,
...@@ -24,6 +25,8 @@ describe('CloudLicenseApp', () => { ...@@ -24,6 +25,8 @@ describe('CloudLicenseApp', () => {
const findSubscriptionActivationTitle = () => const findSubscriptionActivationTitle = () =>
wrapper.findByTestId('subscription-activation-title'); wrapper.findByTestId('subscription-activation-title');
const findSubscriptionMainTitle = () => wrapper.findByTestId('subscription-main-title'); const findSubscriptionMainTitle = () => wrapper.findByTestId('subscription-main-title');
const findSubscriptionActivationSuccessAlert = () =>
wrapper.findByTestId('subscription-activation-success-alert');
let currentSubscriptionResolver; let currentSubscriptionResolver;
let subscriptionHistoryResolver; let subscriptionHistoryResolver;
...@@ -84,6 +87,33 @@ describe('CloudLicenseApp', () => { ...@@ -84,6 +87,33 @@ describe('CloudLicenseApp', () => {
it('shows the subscription activation form', () => { it('shows the subscription activation form', () => {
expect(findActivateSubscriptionForm().exists()).toBe(true); expect(findActivateSubscriptionForm().exists()).toBe(true);
}); });
it('does not the activation success notification', () => {
expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
});
});
describe('activate the license', () => {
beforeEach(() => {
createComponent({ hasActiveLicense: false }, [
currentSubscriptionResolver,
subscriptionHistoryResolver,
]);
findActivateSubscriptionForm().vm.$emit('subscription-activation', true);
});
it('passes the correct data to the subscription breakdown', () => {
expect(findSubscriptionBreakdown().props()).toMatchObject({
subscription: license.ULTIMATE,
subscriptionList: subscriptionHistory,
});
});
it('shows the activation success notification', () => {
expect(findSubscriptionActivationSuccessAlert().props('title')).toBe(
subscriptionActivationNotificationText,
);
});
}); });
describe('with active license', () => { describe('with active license', () => {
...@@ -114,6 +144,10 @@ describe('CloudLicenseApp', () => { ...@@ -114,6 +144,10 @@ describe('CloudLicenseApp', () => {
subscriptionList: subscriptionHistory, subscriptionList: subscriptionHistory,
}); });
}); });
it('does not the activation success notification', () => {
expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
});
}); });
}); });
}); });
...@@ -30974,6 +30974,9 @@ msgstr "" ...@@ -30974,6 +30974,9 @@ msgstr ""
msgid "SuperSonics|Your subscription" msgid "SuperSonics|Your subscription"
msgstr "" msgstr ""
msgid "SuperSonics|Your subscription was successfully activated. You can see the details below."
msgstr ""
msgid "Support" msgid "Support"
msgstr "" msgstr ""
......
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