115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
/* globals gettext */
|
|
|
|
import Backbone from 'backbone';
|
|
|
|
class UnenrollView extends Backbone.View {
|
|
|
|
constructor(options) {
|
|
const defaults = {
|
|
el: '.unenroll-modal',
|
|
};
|
|
super(Object.assign({}, defaults, options));
|
|
}
|
|
|
|
handleTrigger(triggerElement) {
|
|
this.$previouslyFocusedElement = triggerElement;
|
|
}
|
|
|
|
switchToSlideOne() {
|
|
// Randomize survey option order
|
|
const survey = document.querySelector('.options');
|
|
for (let i = survey.children.length - 1; i >= 0; i -= 1) {
|
|
survey.appendChild(survey.children[Math.trunc(Math.random() * i)]);
|
|
}
|
|
this.$('.inner-wrapper header').hide();
|
|
this.$('#unenroll_form').hide();
|
|
this.$('.slide1').removeClass('hidden');
|
|
|
|
if (window.trapFocusForAccessibleModal) {
|
|
window.trapFocusForAccessibleModal(
|
|
this.$previouslyFocusedElement,
|
|
window.focusableElementsString,
|
|
this.closeButtonSelector,
|
|
this.modalId,
|
|
this.mainPageSelector,
|
|
);
|
|
}
|
|
}
|
|
|
|
switchToSlideTwo() {
|
|
let reason = this.$(".reasons_survey input[name='reason']:checked").attr('val');
|
|
const courserunKey = $('#unenroll_course_id').val() + $('#unenroll_course_number').val();
|
|
if (reason === 'Other') {
|
|
reason = this.$('.other_text').val();
|
|
}
|
|
if (reason) {
|
|
window.analytics.track('unenrollment_reason.selected', {
|
|
category: 'user-engagement',
|
|
label: reason,
|
|
displayName: 'v1',
|
|
course_id: courserunKey,
|
|
});
|
|
}
|
|
this.$('.slide1').addClass('hidden');
|
|
this.$('.survey_course_name').text(this.$('#unenroll_course_name').text());
|
|
this.$('.slide2').removeClass('hidden');
|
|
this.$('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
|
|
this.$('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
|
|
|
|
if (window.trapFocusForAccessibleModal) {
|
|
window.trapFocusForAccessibleModal(
|
|
this.$previouslyFocusedElement,
|
|
window.focusableElementsString,
|
|
this.closeButtonSelector,
|
|
this.modalId,
|
|
this.mainPageSelector,
|
|
);
|
|
}
|
|
}
|
|
|
|
unenrollComplete(event, xhr) {
|
|
if (xhr.status === 200) {
|
|
if (!this.isEdx) {
|
|
location.href = this.urls.dashboard;
|
|
} else {
|
|
this.switchToSlideOne();
|
|
this.$('.reasons_survey:first .submit_reasons').click(this.switchToSlideTwo.bind(this));
|
|
}
|
|
} else if (xhr.status === 403) {
|
|
location.href = `${this.urls.signInUser}?course_id=${
|
|
encodeURIComponent($('#unenroll_course_id').val())}&enrollment_action=unenroll`;
|
|
} else {
|
|
$('#unenroll_error').text(
|
|
gettext('Unable to determine whether we should give you a refund because' +
|
|
' of System Error. Please try again later.'),
|
|
).stop()
|
|
.css('display', 'block');
|
|
}
|
|
}
|
|
|
|
startSubmit() {
|
|
this.$('.submit').prop('disabled', true);
|
|
}
|
|
|
|
initialize(options) {
|
|
const view = this;
|
|
this.urls = options.urls;
|
|
this.isEdx = options.isEdx;
|
|
|
|
this.closeButtonSelector = '.unenroll-modal .close-modal';
|
|
this.$closeButton = $(this.closeButtonSelector);
|
|
this.modalId = `#${this.$el.attr('id')}`;
|
|
this.mainPageSelector = '#dashboard-main';
|
|
|
|
this.triggerSelector = '.action-unenroll';
|
|
$(this.triggerSelector).each((index, element) => {
|
|
$(element).on('click', view.handleTrigger.bind($(element)));
|
|
});
|
|
|
|
this.$('.submit .submit-button').on('click', this.startSubmit.bind(this));
|
|
$('#unenroll_form').on('ajax:complete', this.unenrollComplete.bind(this));
|
|
}
|
|
}
|
|
|
|
export default UnenrollView;
|