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();
});
});