diff --git a/src/components/expired-subscription-modal/index.jsx b/src/components/expired-subscription-modal/index.jsx index d53430732f..6e3cc29052 100644 --- a/src/components/expired-subscription-modal/index.jsx +++ b/src/components/expired-subscription-modal/index.jsx @@ -1,27 +1,46 @@ import { - StandardModal, useToggle, + useToggle, AlertModal, Button, ActionRow, } from '@openedx/paragon'; -import { Link } from 'react-router-dom'; import { useSubscriptions } from '../app/data'; const ExpiredSubscriptionModal = () => { const { data: { customerAgreement } } = useSubscriptions(); - const [isOpen, ,close] = useToggle(true); + const [isOpen] = useToggle(true); if (!customerAgreement?.hasCustomLicenseExpirationMessaging) { return null; } + const onClickHandler = () => { + let url = customerAgreement?.urlForButtonInModal; + + if (url) { + // Check if the URL starts with 'http://' or 'https://' + if (!url.startsWith('http://') && !url.startsWith('https://')) { + // Prepend 'https://' if the URL is missing the protocol + url = `https://${url}`; + } + + // Navigate to the full URL + window.open(url, '_blank'); // Opening in a new tab + } + }; return ( - + + + )} > -

- {customerAgreement?.expiredSubscriptionModalMessaging} - {customerAgreement?.hyperLinkTextForExpiredModal} -

-
+ {/* eslint-disable-next-line react/no-danger */} +
+ ); }; diff --git a/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx b/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx index af6ab748af..eb847b106b 100644 --- a/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx +++ b/src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx @@ -15,9 +15,10 @@ describe('', () => { data: { customerAgreement: { hasCustomLicenseExpirationMessaging: false, + modalHeaderText: null, + buttonLabelInModal: null, expiredSubscriptionModalMessaging: null, - urlForExpiredModal: null, - hyperLinkTextForExpiredModal: null, + urlForButtonInModal: null, }, }, }); @@ -33,18 +34,18 @@ describe('', () => { data: { customerAgreement: { hasCustomLicenseExpirationMessaging: true, - expiredSubscriptionModalMessaging: 'Your subscription has expired.', - urlForExpiredModal: '/renew', - hyperLinkTextForExpiredModal: 'Click here to renew', + modalHeaderText: 'Expired Subscription', + buttonLabelInModal: 'Continue Learning', + expiredSubscriptionModalMessaging: '

Your subscription has expired.

', + urlForButtonInModal: '/renew', }, }, }); renderWithRouter(); - expect(screen.getByText('Your subscription has expired.')).toBeInTheDocument(); - expect(screen.getByText('Click here to renew')).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Click here to renew' })).toHaveAttribute('href', '/renew'); + expect(screen.getByText('Expired Subscription')).toBeInTheDocument(); + expect(screen.getByText('Continue Learning')).toBeInTheDocument(); }); test('does not renderwithrouter modal if no customer agreement data is present', () => { @@ -53,19 +54,49 @@ describe('', () => { expect(container).toBeEmptyDOMElement(); }); - test('renderwithrouters close button in modal', () => { + test('Close button (cross) should not be available, making the modal truly blocking', () => { useSubscriptions.mockReturnValue({ data: { customerAgreement: { hasCustomLicenseExpirationMessaging: true, - expiredSubscriptionModalMessaging: 'Subscription expired', - urlForExpiredModal: '/renew', - hyperLinkTextForExpiredModal: 'Renew', + modalHeaderText: 'Expired Subscription', + buttonLabelInModal: 'Continue Learning', + expiredSubscriptionModalMessaging: '

Your subscription has expired.

', + urlForButtonInModal: '/renew', }, }, }); renderWithRouter(); - expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument(); + expect(screen.queryByLabelText(/close/i)).not.toBeInTheDocument(); + }); + test('clicks on Continue Learning button', () => { + // Mock useSubscriptions + useSubscriptions.mockReturnValue({ + data: { + customerAgreement: { + hasCustomLicenseExpirationMessaging: true, + modalHeaderText: 'Expired Subscription', + buttonLabelInModal: 'Continue Learning', + expiredSubscriptionModalMessaging: '

Your subscription has expired.

', + urlForButtonInModal: 'example.com', + }, + }, + }); + + // Mock window.open + const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {}); + + // Render the component + renderWithRouter(); + + const continueButton = screen.getByText('Continue Learning'); + continueButton.click(); + + // Assert window.open was called with the correct URL + expect(windowOpenSpy).toHaveBeenCalledWith('https://example.com', '_blank'); + + // Restore window.open after the test + windowOpenSpy.mockRestore(); }); });