IO-3020 IO-3036 Add basic upsell component and blur out reports.

client/src/components/upsell/upsell.component.jsx

@@ -0,0 +1,39 @@
+import { AppstoreAddOutlined } from "@ant-design/icons";
+import { Result } from "antd";
+import React, { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import upsellEnum from "./upsell.enum";
+
+export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask = false }) {
+  const { t } = useTranslation();
+  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
+  const componentRef = useRef(null);
+
+  useEffect(() => {
+    if (disableMask) return;
+    const parentElement = componentRef.current?.parentElement;
+    if (parentElement) {
+      const mask = document.createElement("div");
+      mask.style.position = "absolute";
+      mask.style.top = 0;
+      mask.style.left = 0;
+      mask.style.width = "100%";
+      mask.style.height = "100%";
+      mask.style.backgroundColor = "rgba(0, 0, 0, 0.25)";
+      mask.style.zIndex = 9999;
+      parentElement.style.position = "relative";
+      parentElement.appendChild(mask);
+
+      return () => {
+        parentElement.removeChild(mask);
+      };
+    }
+  }, []);
+
+  if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
+  return (
+    <div ref={componentRef}>
+      <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
+    </div>
+  );
+}

client/src/components/upsell/upsell.enum.js

@@ -0,0 +1,34 @@
+import i18n from "i18next";
+
+const upsellEnum = {
+  bills: {
+    postbills: {
+      icon: null,
+      title: i18n.t("upsell.messages.bills.postbills.title"),
+      subTitle: i18n.t("upsell.messages.bills.postbills.subtitle"),
+      status: null //Nullable
+    },
+    reconcile: {
+      icon: null,
+      title: i18n.t("upsell.messages.bills.reconcile.title"),
+      subTitle: i18n.t("upsell.messages.bills.reconcile.subtitle"),
+      status: null //Nullable
+    },
+    table: {
+      //icon: null,
+      title: i18n.t("upsell.messages.bills.table.title"),
+      subTitle: i18n.t("upsell.messages.bills.table.subtitle"),
+     //status: null //Nullable
+    }
+  },
+  timetickets: {
+    table: {
+      icon: null,
+      title: i18n.t("upsell.messages.timetickets.table.title"),
+      subTitle: i18n.t("upsell.messages.timetickets.table.subtitle"),
+      status: null //Nullable
+    }
+  }
+};
+
+export default upsellEnum;