Progress Update.

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/chat-affix/chat-affix.container.jsx

@@ -4,20 +4,11 @@ import { Button, notification, Space } from "antd";
 import axios from "axios";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  chatVisible: selectChatVisible,
-});
-
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -36,35 +27,34 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
         console.log("FCM Topic Subscription", r.data);
       } catch (error) {
         console.log(
-          "Error attempting to subscribe to messaging topic: ",
-          error
+            "Error attempting to subscribe to messaging topic: ",
+            error
         );
         notification.open({
           type: "warning",
           message: t("general.errors.fcm"),
           btn: (
-            <Space>
-              <Button
-                onClick={async () => {
-                  await requestForToken();
-
-                  SubscribeToTopic();
-                }}
-              >
-                {t("general.actions.tryagain")}
-              </Button>
-              <Button
-                onClick={() => {
-                  const win = window.open(
-                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
-                    "_blank"
-                  );
-                  win.focus();
-                }}
-              >
-                {t("general.labels.help")}
-              </Button>
-            </Space>
+              <Space>
+                <Button
+                    onClick={async () => {
+                      await requestForToken();
+                      SubscribeToTopic();
+                    }}
+                >
+                  {t("general.actions.tryagain")}
+                </Button>
+                <Button
+                    onClick={() => {
+                      const win = window.open(
+                          "https://help.imex.online/en/article/enabling-notifications-o978xi/",
+                          "_blank"
+                      );
+                      win.focus();
+                    }}
+                >
+                  {t("general.labels.help")}
+                </Button>
+              </Space>
           ),
         });
       }
@@ -81,16 +71,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
         payload: (payload && payload.data && payload.data.data) || payload.data,
       });
     }
-    let stopMessageListenr, channel;
+    let stopMessageListener, channel;
     try {
-      stopMessageListenr = onMessage(messaging, handleMessage);
+      stopMessageListener = onMessage(messaging, handleMessage);
       channel = new BroadcastChannel("imex-sw-messages");
       channel.addEventListener("message", handleMessage);
     } catch (error) {
       console.log("Unable to set event listeners.");
     }
     return () => {
-      stopMessageListenr && stopMessageListenr();
+      stopMessageListener && stopMessageListener();
       channel && channel.removeEventListener("message", handleMessage);
     };
   }, [client]);
@@ -98,9 +88,10 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
-    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
-    </div>
+      <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+        {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
+      </div>
   );
 }
-export default connect(mapStateToProps, null)(ChatAffixContainer);
+
+export default ChatAffixContainer;

client/src/components/header/header.component.jsx

@@ -12,7 +12,7 @@ import Icon, {
     FileAddOutlined,
     FileFilled,
     HomeFilled,
-    ImportOutlined,
+    ImportOutlined, InfoCircleOutlined,
     LineChartOutlined,
     PaperClipOutlined,
     PhoneOutlined,
@@ -25,8 +25,8 @@ import Icon, {
     UserOutlined,
 } from "@ant-design/icons";
 import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import {Layout, Menu} from "antd";
-import React from "react";
+import {Layout, Menu, Switch, Tooltip} from "antd";
+import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {BsKanban} from "react-icons/bs";
 import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
@@ -41,6 +41,7 @@ import {setModalContext} from "../../redux/modals/modals.actions";
 import {signOutStart} from "../../redux/user/user.actions";
 import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
 import {FiLogOut} from "react-icons/fi";
+import handleBeta, {checkBeta, setBeta} from "../../utils/betaHandler";
 
 const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
@@ -70,9 +71,21 @@ function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOut
         names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
         splitKey: bodyshop && bodyshop.imexshopid,
     });
-
+    const [betaSwitch, setBetaSwitch] = useState(false);
     const {t} = useTranslation();
 
+    useEffect(() => {
+        const isBeta = checkBeta();
+        setBetaSwitch(isBeta );
+    }, []);
+
+
+    const betaSwitchChange = (checked) => {
+        setBeta(checked);
+        setBetaSwitch(checked);
+        handleBeta();
+    }
+
     const accountingChildren = [
         {
             key: 'bills',
@@ -451,13 +464,28 @@ function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOut
 
             })),
         }
-    ]
+    ];
+
+
+        menuItems.push({
+            key: 'beta-switch',
+            style: { marginLeft: 'auto' },
+            label: (
+                    <Tooltip title="A faster more modern ImEX Online is ready for you to try! You can switch back at any time.">
+                        <InfoCircleOutlined />
+                        <span style={{marginRight: 8}}>Try the new ImEX Online</span>
+                        <Switch
+                            checked={betaSwitch}
+                            onChange={betaSwitchChange}
+                        />
+                    </Tooltip>
+            )
+        });
 
     return (
         <Layout.Header>
             <Menu
                 mode="horizontal"
-                //theme="light"
                 theme={"dark"}
                 selectedKeys={[selectedHeader]}
                 onClick={handleMenuClick}