From 1a69dbce191d975ad089029a19bae81fcce6a62d Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 16 May 2021 17:45:44 +0300
Subject: [PATCH] ChangePointsCard

---
 public/locales/en/translations.json           |  6 ++
 public/locales/ro/translations.json           |  6 ++
 .../AdvancedSettingsComponent.js              |  7 ++
 .../advanced/changePoints/ChangePointsCard.js | 78 +++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 src/features/forwards/options/components/advanced/changePoints/ChangePointsCard.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index b5334bb..ba00b6b 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -73,6 +73,12 @@
         "Definition": "Exceptions are used to inform the system to not replace the key in some sequences.",
         "Keys": "Keys",
         "Match": "Match"
+      },
+      "ChangePoints": {
+        "Label": "Change points",
+        "Definition": "Change points are combinations of html tags and attributes that are used by system to identify elements from http content and replace the key in theirs content with respect for exceptions.",
+        "HtmlTag": "Html tag",
+        "Attribute": "Attribute"
       }
     }
   },
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 515c39b..91305b1 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -64,6 +64,12 @@
         "Definition": "Excepțiile sunt folosite pentru a informa sistemul să nu înlocuiască cheia în unele secvențe.",
         "Keys": "Chei",
         "Match": "Potrivire"
+      },
+      "ChangePoints": {
+        "Label": "Puncte de schimbare",
+        "Definition": "Punctele de schimbare sunt combinații de etichete și atribute html care sunt utilizate de sistem pentru a identifica elemente din conținutul http și pentru a înlocui cheia în conținutul lor, dar cu respectarea excepțiilor.",
+        "HtmlTag": "Etichetă html",
+        "Attribute": "Atribut"
       }
     }
   },
diff --git a/src/features/forwards/options/components/advanced/advancedSettings/AdvancedSettingsComponent.js b/src/features/forwards/options/components/advanced/advancedSettings/AdvancedSettingsComponent.js
index a5992ee..33748b3 100644
--- a/src/features/forwards/options/components/advanced/advancedSettings/AdvancedSettingsComponent.js
+++ b/src/features/forwards/options/components/advanced/advancedSettings/AdvancedSettingsComponent.js
@@ -1,13 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
 import ExceptionsCard from "../exceptions/ExceptionsCard";
+import ChangePointsCard from "../changePoints/ChangePointsCard";
 
 const AdvancedSettingsComponent = ({ data }) => {
+  const spaceBetweenCards = data && data.exceptions && data.changePoints;
   return (
     <>
       {data && data.exceptions && (
         <ExceptionsCard exceptions={data.exceptions} />
       )}
+      {spaceBetweenCards && <br />}
+
+      {data && data.changePoints && (
+        <ChangePointsCard changePoints={data.changePoints} />
+      )}
     </>
   );
 };
diff --git a/src/features/forwards/options/components/advanced/changePoints/ChangePointsCard.js b/src/features/forwards/options/components/advanced/changePoints/ChangePointsCard.js
new file mode 100644
index 0000000..d2a5d25
--- /dev/null
+++ b/src/features/forwards/options/components/advanced/changePoints/ChangePointsCard.js
@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ExpandableCard from "../../../../../../components/common/ExpandableCard";
+import { useTranslation } from "react-i18next";
+import { CompareArrowsOutlined } from "@material-ui/icons";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Typography
+} from "@material-ui/core";
+import styles from "../../../../../../components/common/styles/tableStyles";
+import {
+  StyledTableCell,
+  StyledTableRow
+} from "../../../../../../components/common/MaterialTable";
+const useStyles = makeStyles(styles);
+
+const ChangePointsCard = ({ changePoints }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <ExpandableCard
+      Icon={<CompareArrowsOutlined />}
+      iconVariant="rounded"
+      title={t("Forward.Options.ChangePoints.Label")}
+      smallHeader
+      Content={
+        <>
+          <Typography variant="caption" display="block" gutterBottom>
+            {t("Forward.Options.ChangePoints.Definition")}
+          </Typography>
+          <TableContainer component={Paper}>
+            <Table
+              className={classes.narrowTable}
+              size="small"
+              aria-label="customized table"
+            >
+              <TableHead>
+                <TableRow>
+                  <StyledTableCell>
+                    {t("Forward.Options.ChangePoints.HtmlTag")}
+                  </StyledTableCell>
+                  <StyledTableCell>
+                    {t("Forward.Options.ChangePoints.Attribute")}
+                  </StyledTableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <>
+                  {changePoints.map(point => {
+                    return (
+                      <StyledTableRow key={changePoints.indexOf(point)}>
+                        <StyledTableCell>{point.htmlTag}</StyledTableCell>
+                        <StyledTableCell>{point.attribute}</StyledTableCell>
+                      </StyledTableRow>
+                    );
+                  })}
+                </>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </>
+      }
+    />
+  );
+};
+
+ChangePointsCard.propTypes = {
+  changePoints: PropTypes.array.isRequired
+};
+
+export default ChangePointsCard;