From ad46f28b2fae426a9bb4df7d13fd5c03e6eca25e Mon Sep 17 00:00:00 2001
From: mashal-m <mashal.malik@arbisoft.com>
Date: Thu, 6 Oct 2022 10:43:41 +0500
Subject: [PATCH] refactor: migrate off modal paragon depreciation

---
 src/courseware/course/sequence/Unit.jsx | 69 +++++++++++++++----------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
index 31a9bf93..acc4795b 100644
--- a/src/courseware/course/sequence/Unit.jsx
+++ b/src/courseware/course/sequence/Unit.jsx
@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog, ActionRow } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React, {
   Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
@@ -94,9 +94,8 @@ function Unit({
   const [iframeHeight, setIframeHeight] = useState(0);
   const [hasLoaded, setHasLoaded] = useState(false);
   const [showError, setShowError] = useState(false);
-  const [modalOptions, setModalOptions] = useState({ open: false });
+  const [modalOptions, setModalOptions] = useState({ open: true });
   const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
-
   const unit = useModel('units', id);
   const course = useModel('coursewareMeta', courseId);
   const {
@@ -152,7 +151,7 @@ function Unit({
         isBookmarked={unit.bookmarked}
         isProcessing={unit.bookmarkedUpdateState === 'loading'}
       />
-      { !mmp2p.state.isEnabled && contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
+      {!mmp2p.state.isEnabled && contentTypeGatingEnabled && unit.containsContentTypeGatedContent && (
         <Suspense
           fallback={(
             <PageLoading
@@ -163,8 +162,8 @@ function Unit({
           <LockPaywall courseId={courseId} />
         </Suspense>
       )}
-      { /** [MM-P2P] Experiment */ }
-      { mmp2p.meta.showLock && (
+      { /** [MM-P2P] Experiment */}
+      {mmp2p.meta.showLock && (
         <MMP2PLockPaywall options={mmp2p} />
       )}
       {!mmp2p.meta.blockContent && shouldDisplayHonorCode && (
@@ -178,7 +177,7 @@ function Unit({
           <HonorCode courseId={courseId} />
         </Suspense>
       )}
-      { /** [MM-P2P] Experiment (conditional) */ }
+      { /** [MM-P2P] Experiment (conditional) */}
       {!mmp2p.meta.blockContent && !shouldDisplayHonorCode && !hasLoaded && !showError && (
         <PageLoading
           srMessage={intl.formatMessage(messages.loadingSequence)}
@@ -188,32 +187,48 @@ function Unit({
         <ErrorPage />
       )}
       {modalOptions.open && (
-        <Modal
-          body={(
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={() => { setModalOptions({ open: false }); }}
+          isFullscreenOnMobile
+          // size="xl"
+          className="modal-lti"
+          hasCloseButton
+        >
+          <ModalDialog.Body>
             <>
               {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
+                ? <div className="unit-modal">{modalOptions.body}</div>
                 : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{
-                      width: '100%',
-                      height: '100vh',
-                    }}
-                  />
+                  <>
+                    <iframe
+                      title={modalOptions.title}
+                      allow={IFRAME_FEATURE_POLICY}
+                      frameBorder="0"
+                      src={modalOptions.url}
+                      style={{
+                        width: '100%',
+                        height: '100vh',
+                      }}
+                    />
+                  </>
                 )}
             </>
-          )}
-          onClose={() => { setModalOptions({ open: false }); }}
-          open
-          dialogClassName="modal-lti"
-        />
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton>
+                Close
+              </ModalDialog.CloseButton>
+            </ActionRow>
+          </ModalDialog.Footer>
+        </ModalDialog>
+
       )}
-      { /** [MM-P2P] Experiment (conditional) */ }
-      { !mmp2p.meta.blockContent && !shouldDisplayHonorCode && (
+      { /** [MM-P2P] Experiment (conditional) */}
+      {!mmp2p.meta.blockContent && !shouldDisplayHonorCode && (
         <div className="unit-iframe-wrapper">
           <iframe
             id="unit-iframe"