From 3da1fbf6caf9ca651e1b4030ba9221adc01ec0a7 Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Mon, 16 Aug 2021 17:34:19 +0530
Subject: [PATCH] added dialog component

---
 src/app/molecules/dialog/Dialog.jsx  | 57 ++++++++++++++++++++++++++++
 src/app/molecules/dialog/Dialog.scss | 28 ++++++++++++++
 src/app/organisms/pw/Dialogs.jsx     | 13 +++++++
 3 files changed, 98 insertions(+)
 create mode 100644 src/app/molecules/dialog/Dialog.jsx
 create mode 100644 src/app/molecules/dialog/Dialog.scss
 create mode 100644 src/app/organisms/pw/Dialogs.jsx

diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
new file mode 100644
index 0000000..a039f35
--- /dev/null
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Dialog.scss';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import RawModal from '../../atoms/modal/RawModal';
+
+function Dialog({
+  className, isOpen, title,
+  contentOptions, onRequestClose, children,
+}) {
+  return (
+    <RawModal
+      className={`${className === null ? '' : `${className} `}dialog-model`}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="small"
+    >
+      <div className="dialog">
+        <div className="dialog__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="h2">{title}</Text>
+            </TitleWrapper>
+            {contentOptions}
+          </Header>
+          <div className="dialog__content__wrapper">
+            <ScrollView autoHide>
+              <div className="dialog__content-container">
+                {children}
+              </div>
+            </ScrollView>
+          </div>
+        </div>
+      </div>
+    </RawModal>
+  );
+}
+
+Dialog.defaultProps = {
+  className: null,
+  contentOptions: null,
+  onRequestClose: null,
+};
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  contentOptions: PropTypes.node,
+  onRequestClose: PropTypes.func,
+  children: PropTypes.node.isRequired,
+};
+
+export default Dialog;
diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
new file mode 100644
index 0000000..30f877d
--- /dev/null
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -0,0 +1,28 @@
+.dialog-model {
+  --modal-height: 656px;
+  max-height: var(--modal-height) !important;
+}
+
+.dialog {
+  width: 100%;
+  max-height: inherit;
+  background-color: var(--bg-surface);
+  display: flex;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.dialog__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}
+.dialog__content__wrapper {
+  flex: 1;
+  min-height: 0;
+}
\ No newline at end of file
diff --git a/src/app/organisms/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
new file mode 100644
index 0000000..d878ed9
--- /dev/null
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ReadReceipts from '../read-receipts/ReadReceipts';
+
+function Dialogs() {
+  return (
+    <>
+      <ReadReceipts />
+    </>
+  );
+}
+
+export default Dialogs;