Commit 91c66b41 authored by Vitaly Slobodin's avatar Vitaly Slobodin

Merge branch '289925-subscription-expiration-banner-not-dismissable' into 'master'

Fix(eetrialbanner): fix EE trial banner to allow dismiss

See merge request gitlab-org/gitlab!50436
parents c1c16352 0a9de64a
---
title: 'Fix(eetrialbanner): fix EE trial banner to allow dismiss'
merge_request: 50436
author:
type: fixed
......@@ -14,7 +14,7 @@ export default class EETrialBanner {
init() {
// Wait for navbars to render before querying
this.setCookies();
this.$trialBanner.on('close.bs.alert', (e) => this.handleTrialBannerDismiss(e));
this.$trialBanner.on('click', (e) => this.handleTrialBannerDismiss(e.target));
}
/**
......@@ -93,7 +93,14 @@ export default class EETrialBanner {
this.toggleSecondaryNavbarMargin(state);
}
handleTrialBannerDismiss() {
handleTrialBannerDismiss(element) {
// Check if a close button was clicked inside the parent element
if (!element.classList.contains('js-close')) {
return;
}
// A closed button has been clicked, dismiss the banner and handle setting the cookie
this.toggleBanner(false);
this.toggleMainNavbarMargin(false);
this.toggleSecondaryNavbarMargin(false);
if (Cookies.get(this.COOKIE_KEY)) {
......
......@@ -3,12 +3,11 @@
- if message.present? && subscribable.present?
.container-fluid.container-limited.pt-3
.gl-alert.alert-dismissible.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } }
%button.close.p-2{ type: 'button', 'aria-label' => 'Dismiss banner', data: { dismiss: 'alert', track_event: 'click_button', track_label: 'dismiss_subscribable_banner' } }
%span{ 'aria-hidden' => 'true' }
= sprite_icon('merge-request-close-m', size: 24)
.d-flex.flex-row
.pr-4.pl-3.pt-2
.gl-alert.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } }
%button.gl-alert-dismiss{ type: 'button', 'aria-label' => 'Dismiss', data: { track_event: 'click_button', track_label: 'dismiss_subscribable_banner' } }
= sprite_icon('close', css_class: 'gl-icon js-close')
.gl-display-flex.gl-flex-direction-row
.gl-pr-6.gl-pl-5.gl-pt-3
- if subscribable.expired?
- if subscribable.block_changes?
= image_tag('illustrations/subscription-downgraded.svg')
......@@ -16,11 +15,11 @@
= image_tag('illustrations/subscription-cancelled.svg')
- else
= image_tag('illustrations/subscription-warning.svg')
.text-left.pt-2
.gl-text-left.gl-pt-3
= message
- if subscribable.block_changes?
= link_to 'Upgrade your plan', 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'upgrade' }
= link_to _('Upgrade your plan'), 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn gl-button btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'upgrade' }
- else
= link_to 'Renew subscription', 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'renew' }
= link_to "That's ok, I don't want to renew", '#', data: { dismiss: 'alert', track_event: 'click_text', track_label: 'subscribable_action', track_property: 'thats_ok' }, 'aria-label' => 'Dismiss banner', class: 'btn btn-inverted-secondary ml-2'
= link_to _('Renew subscription'), 'https://customers.gitlab.com/subscriptions/my_renewal', class: 'btn gl-button btn-primary', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'renew' }
= link_to _('That is ok, I do not want to renew'), '#', data: { track_event: 'click_text', track_label: 'subscribable_action', track_property: 'thats_ok' }, 'aria-label' => 'Dismiss', class: 'btn gl-button btn-info btn-info-secondary gl-ml-3 js-close'
import Cookies from 'js-cookie';
import initEETrialBanner from 'ee/ee_trial_banner';
describe('EE gitlab license banner dismiss', () => {
const dismiss = () => {
const button = document.querySelector('.js-close');
button.click();
};
const renew = () => {
const button = document.querySelector('.gl-button');
button.click();
};
const isHidden = () =>
document.querySelector('.js-gitlab-ee-license-banner').classList.contains('hidden');
beforeEach(() => {
setFixtures(`
<div class="js-gitlab-ee-license-banner">
<button class="js-close"></button>
<a href="#" class="btn gl-button btn-primary"></a>
</div>
`);
initEETrialBanner();
});
it('should remove the license banner when a close button is clicked', () => {
expect(isHidden()).toBeFalsy();
dismiss();
expect(isHidden()).toBeTruthy();
});
it('calls Cookies.set for `show_ee_trial_banner` when a close button is clicked', () => {
jest.spyOn(Cookies, 'set');
dismiss();
expect(Cookies.set).toHaveBeenCalledWith('show_ee_trial_banner', 'false');
});
it('should not call Cookies.set for `show_ee_trial_banner` when a non close button is clicked', () => {
jest.spyOn(Cookies, 'set');
renew();
expect(Cookies.set).not.toHaveBeenCalled();
});
});
......@@ -23507,6 +23507,9 @@ msgstr ""
msgid "Rename/Move"
msgstr ""
msgid "Renew subscription"
msgstr ""
msgid "Reopen"
msgstr ""
......@@ -27692,6 +27695,9 @@ msgstr ""
msgid "Thanks for your purchase!"
msgstr ""
msgid "That is ok, I do not want to renew"
msgstr ""
msgid "That's it, well done!"
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