From b4473baed0e8da2d931bf636b4e32c465d3b96ec Mon Sep 17 00:00:00 2001
From: ahtesham-quraish <ahtesham.quraish@gmail.com>
Date: Tue, 26 Mar 2024 15:19:33 +0500
Subject: [PATCH] refactor: refactor the structure of base container
 Description: Refactor the structure of base component VAN-1840

---
 example/index.jsx                          |  6 +--
 src/authn-component/index.jsx              | 43 ++++++++++++++++++++++
 src/authn-component/index.scss             | 12 ++++++
 src/base-container/PrivacyPolicyFooter.jsx | 15 --------
 src/base-container/index.jsx               | 42 +++++----------------
 src/base-container/index.scss              | 18 +--------
 src/base-container/layout/LargeLayout.jsx  | 15 --------
 src/base-container/messages.js             | 13 -------
 8 files changed, 68 insertions(+), 96 deletions(-)
 create mode 100644 src/authn-component/index.jsx
 create mode 100644 src/authn-component/index.scss
 delete mode 100644 src/base-container/PrivacyPolicyFooter.jsx
 delete mode 100644 src/base-container/layout/LargeLayout.jsx
 delete mode 100644 src/base-container/messages.js

diff --git a/example/index.jsx b/example/index.jsx
index 9914eb60..cfb5abcd 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -7,14 +7,12 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initialize, subscribe, APP_READY } from '@edx/frontend-platform';
 
 import './index.scss';
-import BaseContainer from '../src/base-container'
+import AuthnComponent from '../src/authn-component'
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
-        <div>Login Form</div>
-      </BaseContainer> 
+      <AuthnComponent open setOpen={() => {}}/> 
     </AppProvider>,
     document.getElementById('root'),
   );
diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx
new file mode 100644
index 00000000..8ffe6cec
--- /dev/null
+++ b/src/authn-component/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+import BaseContainer from '../base-container';
+import './index.scss';
+
+const AuthnComponent = ({
+  open, setOpen, footerContext,
+}) => (
+  <ModalDialog
+    isOpen={open}
+    onClose={setOpen}
+    size="fullscreen"
+    variant="default"
+    className="bg-light-400"
+    hasCloseButton
+  >
+    <ModalDialog.Body className="modal-body-container overflow-hidden">
+      <BaseContainer>
+        <div>Login Form</div>
+      </BaseContainer>
+    </ModalDialog.Body>
+    {footerContext && (
+      <ModalDialog.Footer className="bg-dark-500 p-0">
+        <p className="p-4.5 mb-0 text-white">{footerContext}</p>
+      </ModalDialog.Footer>
+    )}
+  </ModalDialog>
+);
+
+AuthnComponent.defaultProps = {
+  footerContext: null,
+};
+
+AuthnComponent.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  footerContext: PropTypes.string,
+};
+
+export default AuthnComponent;
diff --git a/src/authn-component/index.scss b/src/authn-component/index.scss
new file mode 100644
index 00000000..1c745c9e
--- /dev/null
+++ b/src/authn-component/index.scss
@@ -0,0 +1,12 @@
+@import "@edx/brand/paragon/variables";
+
+.modal-body-container .pgn__modal-body-content {
+    height: 100%;
+}
+
+.pgn__modal-close-container {
+    background: $light-400;
+    border-radius: 50%;
+    border: 2px solid $light-500;
+}
+
diff --git a/src/base-container/PrivacyPolicyFooter.jsx b/src/base-container/PrivacyPolicyFooter.jsx
deleted file mode 100644
index b9e5e023..00000000
--- a/src/base-container/PrivacyPolicyFooter.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import messages from './messages';
-
-const PrivacyPolicy = () => {
-  const { formatMessage } = useIntl();
-  return (
-    <p className="bg-dark-500 p-4 text-light-100 privacy-policy-content">
-      {formatMessage(messages.privacyPolicyLabel)}
-    </p>
-  );
-};
-export default PrivacyPolicy;
diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx
index 8025e418..5e9be954 100644
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -1,47 +1,25 @@
 import React from 'react';
 
-import { ModalDialog } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import LargeLayout from './layout/LargeLayout';
-import PrivacyPolicy from './PrivacyPolicyFooter';
 import './index.scss';
 
 const BaseContainer = ({
-  children, open, onClose, isPrivacyPolicy,
+  children,
 }) => (
-  <ModalDialog
-    isOpen={open}
-    onClose={onClose}
-    size="fullscreen"
-    variant="default"
-    hasCloseButton
-  >
-    <ModalDialog.Body className="modal-body-container overflow-hidden">
-      <div className="modal-body-content-layout">
-        <div className="w-50 d-flex">
-          {children}
-        </div>
-        <LargeLayout>
-          <div className="w-100 h-100 bg-dark-500" />
-        </LargeLayout>
-      </div>
-    </ModalDialog.Body>
-    <ModalDialog.Footer className="modal-footer-content">
-      {isPrivacyPolicy && (<PrivacyPolicy />)}
-    </ModalDialog.Footer>
-  </ModalDialog>
-);
 
-BaseContainer.defaultProps = {
-  isPrivacyPolicy: false,
-};
+  <div className="modal-body-content-layout">
+    <div className="w-50 d-flex">
+      {children}
+    </div>
+    <div className="w-50 d-flex">
+      <div className="w-100 h-100 bg-dark-500" />
+    </div>
+  </div>
+);
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  isPrivacyPolicy: PropTypes.bool,
 };
 
 export default BaseContainer;
diff --git a/src/base-container/index.scss b/src/base-container/index.scss
index f80ec157..2d99f328 100644
--- a/src/base-container/index.scss
+++ b/src/base-container/index.scss
@@ -1,22 +1,6 @@
-.modal-body-container .pgn__modal-body-content {
-    height: 100%;
-}
-
-.modal-body-container .modal-body-content-layout {
+.modal-body-content-layout {
     display: flex;
     width: 100%;
     height: 100%;
 }
 
-.pgn__modal-close-container {
-    background: white;
-    border-radius: 50%;
-}
-
-.modal-footer-content {
-    padding: 0 !important;
-}
-
-.privacy-policy-content {
-    margin-bottom: 0px;
-}
\ No newline at end of file
diff --git a/src/base-container/layout/LargeLayout.jsx b/src/base-container/layout/LargeLayout.jsx
deleted file mode 100644
index 3dbe4692..00000000
--- a/src/base-container/layout/LargeLayout.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-const LargeLayout = ({ children }) => (
-  <div className="w-50 d-flex">
-    {children}
-  </div>
-);
-
-LargeLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default LargeLayout;
diff --git a/src/base-container/messages.js b/src/base-container/messages.js
deleted file mode 100644
index dfb6927e..00000000
--- a/src/base-container/messages.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  privacyPolicyLabel: {
-    id: 'privacy.policy.label',
-    defaultMessage: 'By creating an account, you agree to the Terms of '
-        + 'Service and Honor Code and you acknowledge that edX and '
-        + 'each Member process your personal data in accordance with the Privacy Policy.',
-    description: 'Label for Privacy Policy',
-  },
-});
-
-export default messages;