IO-3223 Add Canny for feature request and change log.

client/src/pages/feature-request/feature-request.page.jsx

@@ -0,0 +1,42 @@
+import axios from "axios";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
+});
+
+export function FeedbackPage({ setBreadcrumbs, setSelectedHeader }) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.feature-request", {
+      app: InstanceRenderManager({
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)"
+      })
+    });
+    setBreadcrumbs([{ link: "/manage/feature-request", label: t("titles.bc.feature-request") }]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  useEffect(() => {
+    async function RenderCanny() {
+      const ssoToken = await axios.post("/sso/canny");
+      window.Canny("render", {
+        boardToken: "bba97b06-70db-0334-dee7-8108d73ef614",
+        basePath: `/manage/feature-request`, // See step 2
+        ssoToken: ssoToken.data, // See step 3,
+        theme: "light" // options: light [default], dark, auto
+      });
+    }
+    RenderCanny();
+  }, []);
+
+  return <div data-canny />;
+}
+
+export default connect(null, mapDispatchToProps)(FeedbackPage);

client/src/pages/manage/manage.page.component.jsx

@@ -1,4 +1,5 @@
-import { FloatButton, Layout, Spin } from "antd";
+import { Button, FloatButton, Layout, Space, Spin } from "antd";
+import { AlertOutlined, BulbOutlined } from "@ant-design/icons";
 
 // import preval from "preval.macro";
 import React, { lazy, Suspense, useEffect, useState } from "react";
@@ -19,7 +20,6 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import { requestForToken } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
@@ -56,6 +56,7 @@ const ContractCreatePage = lazy(() => import("../contract-create/contract-create
 const ContractDetailPage = lazy(() => import("../contract-detail/contract-detail.page.container"));
 const ContractsList = lazy(() => import("../contracts/contracts.page.container"));
 const BillsListPage = lazy(() => import("../bills/bills.page.container"));
+const FeatureRequestPage = lazy(() => import("../feature-request/feature-request.page.jsx"));
 
 const JobCostingModal = lazy(() => import("../../components/job-costing-modal/job-costing-modal.container"));
 const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container"));
@@ -180,15 +181,12 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
       });
     }
   }, [alerts, displayedAlertIds, notification]);
-
   useEffect(() => {
-    const widgetId = InstanceRenderManager({
-      imex: "IABVNO4scRKY11XBQkNr",
-      rome: "mQdqARMzkZRUVugJ6TdS"
-    });
-    window.noticeable.render("widget", widgetId);
-    requestForToken().catch((error) => {
-      console.error(`Unable to request for token.`, error);
+    window.Canny("initChangelog", {
+      appID: "680bd2c7ee501290377f6686",
+      position: "top",
+      align: "left",
+      theme: "light" // options: light [default], dark, auto
     });
   }, []);
 
@@ -480,6 +478,8 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
           // element={<ShopTemplates />}
           //   />
         }
+        <Route path="/feature-request/*" index element={<FeatureRequestPage />} />
+
         <Route
           path="/shop/vendors"
           element={
@@ -669,7 +669,12 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
               margin: "1rem 0rem"
             }}
           >
-            <div style={{ display: "flex" }}>
+            <Link to="/manage/feature-request">
+              <Button icon={<BulbOutlined />} type="text">
+                {t("general.labels.feature-request")}
+              </Button>
+            </Link>
+            <Space>
               <WssStatusDisplayComponent />
               <div onClick={broadcastMessage}>
                 {`${InstanceRenderManager({
@@ -677,8 +682,10 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
                   rome: t("titles.romeonline")
                 })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
               </div>
-              <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
-            </div>
+              <Button icon={<AlertOutlined />} data-canny-changelog type="text">
+                {t("general.labels.changelog")}
+              </Button>
+            </Space>
             <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
               Disclaimer & Notices
             </Link>