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

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>