Feat: #15 There shall be an option to view the full data agreement

decentralised-dataexchange · Sep 30, 2024 · 4de5995 · 4de5995
1 parent ad94de3
commit 4de5995
Show file tree

Hide file tree

Showing 9 changed files with 504 additions and 123 deletions.
diff --git a/src/Components/CollapseUsage/PanelHeader.jsx b/src/Components/CollapseUsage/PanelHeader.jsx
@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { Switch } from "antd";
 import { withNamespaces } from "react-i18next";
 import { Popover } from "antd";
+import { ModalComponentWithNamespace } from "../modals/modal";
+import { DataAgreementDetailsWithNamespace } from "../modals/detailsContainer/dataAgreementDetails";
 
 const content = (description) => (
   <div>
@@ -21,32 +23,85 @@ export const PanelHeader = ({
   disabled,
   checked,
   elemRef,
-}) => (
-  <Popover
-    content={content(description)}
-    placement="bottomRight"
-    trigger="hover|focus"
-    overlayClassName="purpose-tooltip"
-  >
-    <div ref={elemRef}>
-      <div>
-        <div className="panel-header">
+  showDescription,
+  lawfulBasisOfProcessing,
+  policyURL,
+  jurisdiction,
+  thirdPartyDisclosure,
+  industryScope,
+  geographicRestriction,
+  retentionPeriod,
+  storageLocation,
+}) => {
+  const [openViewDataAgreementModal, setOpenViewDataAgreementModal] = useState(
+    false
+  );
+
+  return (
+    <>
+      <Popover
+        content={content(description)}
+        placement="bottomRight"
+        trigger="hover|focus"
+        overlayClassName="purpose-tooltip"
+      >
+        <div ref={elemRef}>
           <div>
-            <p className="title">{text}</p>
+            <div className="panel-header">
+              <div>
+                <p className="title">{text}</p>
+              </div>
+              <Switch
+                disabled={disabled}
+                checked={checked}
+                onChange={onChange}
+              />
+            </div>
+            {showDescription && (
+              <p style={{ width: "97%", fontSize: "12px" }}>
+                {description}
+                <span style={{ float: "right" }}>
+                  {t("dataAgreements.read")}{" "}
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setOpenViewDataAgreementModal(true);
+                    }}
+                    style={{ textDecoration: "underline", color: "#1890FF" }}
+                  >
+                    {t("dataAgreements.daDetails")}
+                  </span>
+                </span>
+              </p>
+            )}
             <div className="panel-header-count">
               {t("userRequests.panelAllow")}
               {` ${consented} of ${total}`}
             </div>
           </div>
-          <Switch
-            disabled={disabled}
-            checked={checked}
-            onChange={onChange}
-          />
         </div>
-      </div>
-    </div>
-  </Popover>
-);
+      </Popover>
+
+      <ModalComponentWithNamespace
+        open={openViewDataAgreementModal}
+        setOpen={setOpenViewDataAgreementModal}
+        header={t("dataAgreements.daataAgreement")}
+      >
+        <DataAgreementDetailsWithNamespace
+          purpose={text}
+          purposeDescription={description}
+          lawfulBasisOfProcessing={lawfulBasisOfProcessing}
+          policyURL={policyURL}
+          jurisdiction={jurisdiction}
+          thirdPartyDisclosure={thirdPartyDisclosure}
+          industryScope={industryScope}
+          geographicRestriction={geographicRestriction}
+          retentionPeriod={retentionPeriod}
+          storageLocation={storageLocation}
+        />
+      </ModalComponentWithNamespace>
+    </>
+  );
+};
 
-export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
+export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
diff --git a/src/Components/CollapseUsage/collapse.css b/src/Components/CollapseUsage/collapse.css
@@ -54,14 +54,14 @@
 
 .panel-header {
   display: flex;
-  align-items: center;
+  align-items: top;
   justify-content: space-between;
 }
 
 .panel-header .title {
   margin: 0;
   line-height: 22px;
-  font-size: "14px";
+  font-size: 14px;
 }
 
 .panel-header-count {
@@ -192,6 +192,23 @@
   padding: 5px 5px;
 }
 
-/*.ant-collapse > .panel-usage > .ant-collapse-header .ant-collapse-arrow {*/
-/*    margin-top: 22px;*/
-/*}*/
+.description-container {
+  width: 100%;
+  background-color: yellow;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 12px;
+}
+
+.description-text {
+  flex-grow: 1;
+  margin-right: 8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.read-text {
+  white-space: nowrap;
+}