chore: Migrate deprecated Paragon components (#1158)

src/components/dashboard/SubscriptionExpirationModal.jsx

@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
-import { MailtoLink, Modal } from '@openedx/paragon';
+import {
+  ActionRow, AlertModal, Button, MailtoLink, useToggle,
+} from '@openedx/paragon';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -23,6 +25,7 @@ const SubscriptionExpirationModal = () => {
   } = useContext(AppContext);
 
   const intl = useIntl();
+  const [isOpen, , close] = useToggle(true);
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
   const { data: subscriptions } = useSubscriptions();
   const { subscriptionPlan, subscriptionLicense } = subscriptions;
@@ -33,17 +36,6 @@ const SubscriptionExpirationModal = () => {
     isCurrent,
   } = subscriptionPlan;
 
-  const renderTitle = () => {
-    if (isCurrent) {
-      return (
-        <small className="font-weight-bold">{SUBSCRIPTION_EXPIRING_MODAL_TITLE}</small>
-      );
-    }
-    return (
-      <small className="font-weight-bold">{SUBSCRIPTION_EXPIRED_MODAL_TITLE}</small>
-    );
-  };
-
   const renderContactText = () => {
     const contactText = 'contact your learning manager';
     const email = getContactEmail(enterpriseCustomer);
@@ -92,43 +84,10 @@ const SubscriptionExpirationModal = () => {
     );
   };
 
-  const renderBody = () => (
-    <>
-      <p>
-        Your organization&#39;s access to your current subscription is expiring in
-        {timeUntilExpiration()} After it expires you will only have audit access to your courses.
-      </p>
-      <p>
-        If you are currently taking courses, plan your learning accordingly. You should also take
-        this time to {renderCertificateText()}.
-      </p>
-      <p>
-        If you think this is an error or need help, {renderContactText()}.
-      </p>
-      <i>
-        Access expires on {i18nFormatTimestamp({ intl, timestamp: expirationDate })}.
-      </i>
-    </>
-  );
-
-  const renderExpiredBody = () => (
-    <>
-      <p>
-        Your organization&#39;s access to your subscription has expired. You will only have audit
-        access to the courses you were enrolled in with your subscription (courses from vouchers
-        will still be fully accessible).
-      </p>
-      <p>
-        You can also {renderCertificateText()}.
-      </p>
-      <p>
-        If you think this is an error or need help, {renderContactText()}.
-      </p>
-      <i>
-        Access expired on {dayjs(expirationDate).format('MMM D, YYYY')}.
-      </i>
-    </>
-  );
+  const handleSubscriptionExpiredModalDismissal = () => {
+    close();
+    global.localStorage.setItem(EXPIRED_SUBSCRIPTION_MODAL_LOCALSTORAGE_KEY(subscriptionLicense), 'true');
+  };
 
   const seenExpiredSubscriptionModal = !!global.localStorage.getItem(
     EXPIRED_SUBSCRIPTION_MODAL_LOCALSTORAGE_KEY(subscriptionLicense),
@@ -139,18 +98,33 @@ const SubscriptionExpirationModal = () => {
       return null;
     }
     return (
-      <Modal
-        dialogClassName={`${MODAL_DIALOG_CLASS_NAME} expired`}
-        renderHeaderCloseButton={false}
-        title={renderTitle()}
-        body={renderExpiredBody()}
-        closeText="OK"
-        onClose={() => {
-          global.localStorage.setItem(EXPIRED_SUBSCRIPTION_MODAL_LOCALSTORAGE_KEY(subscriptionLicense), 'true');
-        }}
-        open
+      <AlertModal
+        title={SUBSCRIPTION_EXPIRED_MODAL_TITLE}
+        className={`${MODAL_DIALOG_CLASS_NAME} expired`}
+        isOpen={isOpen}
         data-testid="expired-modal"
-      />
+        footerNode={(
+          <ActionRow>
+            <Button variant="primary" onClick={handleSubscriptionExpiredModalDismissal} data-testid="subscription-expiration-button">OK</Button>
+          </ActionRow>
+        )}
+        hasCloseButton
+      >
+        <p>
+          Your organization&#39;s access to your subscription has expired. You will only have audit
+          access to the courses you were enrolled in with your subscription (courses from vouchers
+          will still be fully accessible).
+        </p>
+        <p>
+          You can also {renderCertificateText()}.
+        </p>
+        <p>
+          If you think this is an error or need help, {renderContactText()}.
+        </p>
+        <i>
+          Access expired on {dayjs(expirationDate).format('MMM D, YYYY')}.
+        </i>
+      </AlertModal>
     );
   }
 
@@ -178,20 +152,40 @@ const SubscriptionExpirationModal = () => {
     return null;
   }
 
+  const handleSubscriptionExpiringModalDismissal = () => {
+    close();
+    global.localStorage.setItem(expirationModalLocalStorageName, 'true');
+  };
+
   return (
-    <Modal
-      dialogClassName={MODAL_DIALOG_CLASS_NAME}
-      renderHeaderCloseButton={false}
-      title={renderTitle()}
-      body={renderBody()}
-      closeText="OK"
+    <AlertModal
+      title={SUBSCRIPTION_EXPIRING_MODAL_TITLE}
+      className={MODAL_DIALOG_CLASS_NAME}
       // Mark that the user has seen this range's expiration modal when they close it
-      onClose={() => {
-        global.localStorage.setItem(expirationModalLocalStorageName, 'true');
-      }}
-      open
+      isOpen={isOpen}
       data-testid="expiration-modal"
-    />
+      footerNode={(
+        <ActionRow>
+          <Button variant="primary" onClick={handleSubscriptionExpiringModalDismissal} data-testid="subscription-expiration-button">OK</Button>
+        </ActionRow>
+      )}
+      hasCloseButton
+    >
+      <p>
+        Your organization&#39;s access to your current subscription is expiring in
+        {timeUntilExpiration()} After it expires you will only have audit access to your courses.
+      </p>
+      <p>
+        If you are currently taking courses, plan your learning accordingly. You should also take
+        this time to {renderCertificateText()}.
+      </p>
+      <p>
+        If you think this is an error or need help, {renderContactText()}.
+      </p>
+      <i>
+        Access expires on {i18nFormatTimestamp({ intl, timestamp: expirationDate })}.
+      </i>
+    </AlertModal>
   );
 };
 

src/components/dashboard/main-content/course-enrollments/course-cards/email-settings/EmailSettingsModal.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Input, Modal, Alert, StatefulButton,
+  Form, Alert, StatefulButton, ActionRow, Button, StandardModal,
 } from '@openedx/paragon';
 import { Error } from '@openedx/paragon/icons';
 
@@ -108,51 +108,47 @@ class EmailSettingsModal extends Component {
     const {
       error, hasEmailsEnabled, isSubmitting,
     } = this.state;
-    const { open, courseRunId } = this.props;
+    const { open } = this.props;
 
     return (
-      <Modal
+      <StandardModal
         title="Email settings"
-        body={(
-          <>
-            {error && (
-              <Alert variant="danger" icon={Error}>
-                An error occurred while saving your email settings. Please try again.
-              </Alert>
-            )}
-            <div className="form-check">
-              <Input
-                type="checkbox"
-                id={`email-settings-${courseRunId}`}
-                checked={hasEmailsEnabled}
-                disabled={isSubmitting}
-                onChange={this.handleEmailSettingsChange}
-              />
-              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-              <label className="form-check-label ml-2 font-weight-normal" htmlFor={`email-settings-${courseRunId}`}>
-                Receive course emails such as reminders, schedule updates, and
-                other critical announcements.
-              </label>
-            </div>
-          </>
-        )}
+        isOpen={open}
         onClose={this.handleOnClose}
-        buttons={[
-          <StatefulButton
-            labels={{
-              default: 'Save',
-              pending: 'Saving',
-              complete: 'Saved',
-            }}
-            disabledStates={this.getDisabledStates()}
-            className="save-email-settings-btn btn-primary btn-brand-primary"
-            state={this.getButtonState()}
-            onClick={this.handleSaveButtonClick}
-            key="save-email-settings-btn"
-          />,
-        ]}
-        open={open}
-      />
+        hasCloseButton
+        isFullscreenOnMobile
+        footerNode={(
+          <ActionRow>
+            <Button variant="tertiary" onClick={this.handleOnClose} data-testid="email-setting-modal-close-btn">Close</Button>
+            <StatefulButton
+              labels={{
+                default: 'Save',
+                pending: 'Saving',
+                complete: 'Saved',
+              }}
+              disabledStates={this.getDisabledStates()}
+              state={this.getButtonState()}
+              onClick={this.handleSaveButtonClick}
+            />
+          </ActionRow>
+        )}
+      >
+        {error && (
+          <Alert variant="danger" icon={Error}>
+            An error occurred while saving your email settings. Please try again.
+          </Alert>
+        )}
+        <Form.Group>
+          <Form.Checkbox
+            checked={hasEmailsEnabled}
+            disabled={isSubmitting}
+            onChange={this.handleEmailSettingsChange}
+            className="email-checkbox"
+          >
+            Receive course emails such as reminders, schedule updates, and other critical announcements.
+          </Form.Checkbox>
+        </Form.Group>
+      </StandardModal>
     );
   }
 }

src/components/dashboard/main-content/course-enrollments/course-cards/email-settings/tests/EmailSettingsModal.test.jsx

@@ -15,6 +15,7 @@ describe('<EmailSettingsModal />', () => {
       <EmailSettingsModal
         onClose={() => {}}
         courseRunId="my+course+key"
+        open
       />
     ));
 

src/components/dashboard/main-content/course-enrollments/course-cards/mark-complete-modal/MarkCompleteModal.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, StatefulButton } from '@openedx/paragon';
+import {
+  ActionRow, Button, StandardModal, StatefulButton,
+} from '@openedx/paragon';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import MarkCompleteModalContext from './MarkCompleteModalContext';
@@ -73,26 +75,30 @@ const MarkCompleteModal = ({
 
   return (
     <MarkCompleteModalContext.Provider value={contextValue}>
-      <Modal
+      <StandardModal
         title="Save course for later"
-        body={<ModalBody />}
-        buttons={[
-          <StatefulButton
-            labels={{
-              default: MARK_SAVED_FOR_LATER_DEFAULT_LABEL,
-              pending: MARK_SAVED_FOR_LATER_PENDING_LABEL,
-            }}
-            disabledStates={['pending']}
-            className="confirm-mark-complete-btn btn-brand-primary"
-            state={confirmButtonState}
-            onClick={handleConfirmButtonClick}
-            key="confirm-mark-complete-btn"
-          />,
-        ]}
-        open={isOpen && !confirmSuccessful}
+        isOpen={isOpen && !confirmSuccessful}
         onClose={handleModalOnClose}
-        closeText="Cancel"
-      />
+        hasCloseButton
+        isFullscreenOnMobile
+        footerNode={(
+          <ActionRow>
+            <Button variant="tertiary" onClick={handleModalOnClose} data-testid="mark-complete-modal-cancel-btn">Cancel</Button>
+            <StatefulButton
+              labels={{
+                default: MARK_SAVED_FOR_LATER_DEFAULT_LABEL,
+                pending: MARK_SAVED_FOR_LATER_PENDING_LABEL,
+              }}
+              disabledStates={['pending']}
+              className="confirm-mark-complete-btn btn-brand-primary"
+              state={confirmButtonState}
+              onClick={handleConfirmButtonClick}
+            />
+          </ActionRow>
+        )}
+      >
+        <ModalBody />
+      </StandardModal>
     </MarkCompleteModalContext.Provider>
   );
 };

src/components/dashboard/main-content/course-enrollments/course-cards/mark-complete-modal/tests/MarkCompleteModal.test.jsx

@@ -85,7 +85,7 @@ describe('<MarkCompleteModal />', () => {
       />
     ));
     act(() => {
-      wrapper.find('.modal-footer button.btn-link').hostNodes().simulate('click');
+      wrapper.find('[data-testid="mark-complete-modal-cancel-btn"]').hostNodes().simulate('click');
     });
     expect(mockOnClose).toBeCalledTimes(1);
   });