feat: updated the custom expiration model design and truly blocking (#…

…1209)

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 (
-    <StandardModal
+    <AlertModal
+      title={customerAgreement?.modalHeaderText}
       isOpen={isOpen}
-      className="d-flex justify-content-center align-items-center text-wrap text-right "
-      hasCloseButton
-      onClose={close}
+      isBlocking
+      footerNode={(
+        <ActionRow>
+          <Button
+            onClick={onClickHandler}
+          >
+            {customerAgreement?.buttonLabelInModal}
+          </Button>
+        </ActionRow>
+      )}
     >
-      <p className="text-center">
-        {customerAgreement?.expiredSubscriptionModalMessaging}
-        <Link className="text-decoration-none" to={customerAgreement?.urlForExpiredModal}> {customerAgreement?.hyperLinkTextForExpiredModal}</Link>
-      </p>
-    </StandardModal>
+      {/* eslint-disable-next-line react/no-danger */}
+      <div dangerouslySetInnerHTML={{ __html: customerAgreement?.expiredSubscriptionModalMessaging }} />
+    </AlertModal>
   );
 };
 

src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx

@@ -15,9 +15,10 @@ describe('<ExpiredSubscriptionModal />', () => {
       data: {
         customerAgreement: {
           hasCustomLicenseExpirationMessaging: false,
+          modalHeaderText: null,
+          buttonLabelInModal: null,
           expiredSubscriptionModalMessaging: null,
-          urlForExpiredModal: null,
-          hyperLinkTextForExpiredModal: null,
+          urlForButtonInModal: null,
         },
       },
     });
@@ -33,18 +34,18 @@ describe('<ExpiredSubscriptionModal />', () => {
       data: {
         customerAgreement: {
           hasCustomLicenseExpirationMessaging: true,
-          expiredSubscriptionModalMessaging: 'Your subscription has expired.',
-          urlForExpiredModal: '/renew',
-          hyperLinkTextForExpiredModal: 'Click here to renew',
+          modalHeaderText: 'Expired Subscription',
+          buttonLabelInModal: 'Continue Learning',
+          expiredSubscriptionModalMessaging: '<p>Your subscription has expired.</p>',
+          urlForButtonInModal: '/renew',
         },
       },
     });
 
     renderWithRouter(<ExpiredSubscriptionModal />);
 
-    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('<ExpiredSubscriptionModal />', () => {
     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: '<p>Your subscription has expired.</p>',
+          urlForButtonInModal: '/renew',
         },
       },
     });
 
     renderWithRouter(<ExpiredSubscriptionModal />);
-    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: '<p>Your subscription has expired.</p>',
+          urlForButtonInModal: 'example.com',
+        },
+      },
+    });
+
+    // Mock window.open
+    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {});
+
+    // Render the component
+    renderWithRouter(<ExpiredSubscriptionModal />);
+
+    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();
   });
 });