From 3953c76a5582bf2eb2ea86d592dab2967bb52fe0 Mon Sep 17 00:00:00 2001
From: ahtesham-quraish <ahtesham.quraish@gmail.com>
Date: Tue, 26 Mar 2024 12:39:18 +0500
Subject: [PATCH 1/2] feat: create popup base layout for forms Description:
 Create popup basic layout for forms VAN-1840

---
 example/index.jsx                          |  5 ++-
 src/base-container/PrivacyPolicyFooter.jsx | 15 +++++++
 src/base-container/index.jsx               | 47 ++++++++++++++++++++++
 src/base-container/index.scss              | 22 ++++++++++
 src/base-container/layout/LargeLayout.jsx  | 15 +++++++
 src/base-container/messages.js             | 13 ++++++
 6 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/base-container/PrivacyPolicyFooter.jsx
 create mode 100644 src/base-container/index.jsx
 create mode 100644 src/base-container/index.scss
 create mode 100644 src/base-container/layout/LargeLayout.jsx
 create mode 100644 src/base-container/messages.js

diff --git a/example/index.jsx b/example/index.jsx
index 167a8eee..9914eb60 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -7,11 +7,14 @@ 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'
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <div>Load the forms here</div>
+      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
+        <div>Login Form</div>
+      </BaseContainer> 
     </AppProvider>,
     document.getElementById('root'),
   );
diff --git a/src/base-container/PrivacyPolicyFooter.jsx b/src/base-container/PrivacyPolicyFooter.jsx
new file mode 100644
index 00000000..b9e5e023
--- /dev/null
+++ b/src/base-container/PrivacyPolicyFooter.jsx
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 00000000..8025e418
--- /dev/null
+++ b/src/base-container/index.jsx
@@ -0,0 +1,47 @@
+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,
+}) => (
+  <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,
+};
+
+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
new file mode 100644
index 00000000..f80ec157
--- /dev/null
+++ b/src/base-container/index.scss
@@ -0,0 +1,22 @@
+.modal-body-container .pgn__modal-body-content {
+    height: 100%;
+}
+
+.modal-body-container .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
new file mode 100644
index 00000000..3dbe4692
--- /dev/null
+++ b/src/base-container/layout/LargeLayout.jsx
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 00000000..dfb6927e
--- /dev/null
+++ b/src/base-container/messages.js
@@ -0,0 +1,13 @@
+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;

From 832194d445550991e54051fb8b060543ea438d15 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 2/2] refactor: refactor the structure of base container
 Description: Refactor the structure of base component VAN-1840

---
 example/index.jsx                          |  5 +--
 src/authn-component/index.jsx              | 29 ++++++++++++++
 src/base-container/PrivacyPolicyFooter.jsx | 15 --------
 src/base-container/index.jsx               | 45 ++++++++++++++--------
 src/base-container/index.scss              | 20 ++++------
 src/base-container/layout/LargeLayout.jsx  | 15 --------
 src/base-container/messages.js             | 13 -------
 7 files changed, 67 insertions(+), 75 deletions(-)
 create mode 100644 src/authn-component/index.jsx
 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..167a8eee 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -7,14 +7,11 @@ 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'
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <BaseContainer open isPrivacyPolicy onClose={() => {}}>
-        <div>Login Form</div>
-      </BaseContainer> 
+      <div>Load the forms here</div>
     </AppProvider>,
     document.getElementById('root'),
   );
diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx
new file mode 100644
index 00000000..4f3bea6a
--- /dev/null
+++ b/src/authn-component/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import BaseContainer from '../base-container';
+
+/**
+ * Main component that holds the logic for conditionally rendering login or registration form.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window containing login or registration form.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ *
+ * @returns {JSX.Element} The rendered BaseContainer component containing either login or registration form.
+ */
+
+const AuthnComponent = ({
+  open, setOpen,
+}) => (
+  <BaseContainer open={open} setOpen={setOpen}>
+    <div>Login form</div>
+  </BaseContainer>
+);
+
+AuthnComponent.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+export default AuthnComponent;
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..5bd3d425 100644
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -3,45 +3,58 @@ 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';
 
+/**
+ * Base component for registration or login form modals.
+ *
+ * @param {boolean} open - Required. Whether to open the modal window.
+ * @param {function} setOpen - Required. Is used to toggle the modal window's open flag.
+ * @param {string} footerText - Optional. The text for the modal footer.
+ * @param {React.node} children - Required. The login or registration form.
+ *
+ * @returns {JSX.Element} The rendered login or registration form modal.
+ */
+
 const BaseContainer = ({
-  children, open, onClose, isPrivacyPolicy,
+  children, footerText, open, setOpen,
 }) => (
   <ModalDialog
     isOpen={open}
-    onClose={onClose}
+    onClose={setOpen}
     size="fullscreen"
     variant="default"
+    className="bg-light-400"
     hasCloseButton
   >
     <ModalDialog.Body className="modal-body-container overflow-hidden">
-      <div className="modal-body-content-layout">
+      <div className="d-flex w-100 h-100">
         <div className="w-50 d-flex">
           {children}
         </div>
-        <LargeLayout>
+        <div className="w-50 d-flex">
           <div className="w-100 h-100 bg-dark-500" />
-        </LargeLayout>
+        </div>
       </div>
     </ModalDialog.Body>
-    <ModalDialog.Footer className="modal-footer-content">
-      {isPrivacyPolicy && (<PrivacyPolicy />)}
-    </ModalDialog.Footer>
+    {footerText && (
+      <ModalDialog.Footer className="bg-dark-500 p-4.5">
+        <p className="mb-0 text-white">{footerText}</p>
+      </ModalDialog.Footer>
+    )}
   </ModalDialog>
-);
 
-BaseContainer.defaultProps = {
-  isPrivacyPolicy: false,
-};
+);
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
+  footerText: PropTypes.string,
   open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  isPrivacyPolicy: PropTypes.bool,
+  setOpen: PropTypes.func.isRequired,
+};
+
+BaseContainer.defaultProps = {
+  footerText: '',
 };
 
 export default BaseContainer;
diff --git a/src/base-container/index.scss b/src/base-container/index.scss
index f80ec157..f18cf178 100644
--- a/src/base-container/index.scss
+++ b/src/base-container/index.scss
@@ -1,22 +1,18 @@
-.modal-body-container .pgn__modal-body-content {
-    height: 100%;
-}
+@import "@edx/brand/paragon/variables";
 
-.modal-body-container .modal-body-content-layout {
-    display: flex;
-    width: 100%;
+.modal-body-container .pgn__modal-body-content {
     height: 100%;
 }
 
+// This class is related to close button of modal
 .pgn__modal-close-container {
-    background: white;
+    background: $white;
     border-radius: 50%;
+    border: 2px solid $light-500;
 }
 
-.modal-footer-content {
-    padding: 0 !important;
+.pgn__modal-close-container .btn-icon__icon-container {
+    color: $light-700;
 }
 
-.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;