ChangePointsCard

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"
       }
     }
   },

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"
       }
     }
   },

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} />
+      )}
     </>
   );
 };

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;