diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx index 618366db4..7d396eef8 100644 --- a/client/src/App/App.jsx +++ b/client/src/App/App.jsx @@ -22,6 +22,7 @@ import { } from "../redux/user/user.selectors"; import PrivateRoute from "../utils/private-route"; import "./App.styles.scss"; +import handleBeta from "../utils/handleBeta"; const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component") @@ -53,6 +54,12 @@ export function App({ }) { const client = useClient(); + // Handle The Beta Switch. + useEffect(() => { + handleBeta(); + }, []) + + useEffect(() => { if (!navigator.onLine) { setOnline(false); diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 8d180bdd1..404792639 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -13,7 +13,7 @@ import Icon, { FileFilled, //GlobalOutlined, HomeFilled, - ImportOutlined, + ImportOutlined, InfoCircleOutlined, LineChartOutlined, PaperClipOutlined, PhoneOutlined, @@ -26,8 +26,8 @@ import Icon, { UserOutlined, } from "@ant-design/icons"; import { useTreatments } 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 { @@ -52,6 +52,7 @@ import { selectBodyshop, selectCurrentUser, } from "../../redux/user/user.selectors"; +import {handleBeta, setBeta, checkBeta} from "../../utils/handleBeta"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, @@ -102,9 +103,21 @@ function Header({ {}, 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(); + } + return ( ))} + + + + Try the new ImEX Online + + + + ); diff --git a/client/src/utils/handleBeta.js b/client/src/utils/handleBeta.js new file mode 100644 index 000000000..155c09f9e --- /dev/null +++ b/client/src/utils/handleBeta.js @@ -0,0 +1,37 @@ +import React, {useState} from "react"; + +export const BETA_KEY = 'betaSwitchImex'; + +export const checkBeta = () => { + const cookie = document.cookie.split('; ').find(row => row.startsWith(BETA_KEY)); + return cookie ? cookie.split('=')[1] === 'true' : false; +} + + +export const setBeta = (value) => { + const domain = window.location.hostname.split('.').slice(-2).join('.'); + document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`; +} + +export const handleBeta = () => { + // If the current host name does not start with beta or test, then we don't need to do anything. + if (window.location.hostname.startsWith('localhost')) { + console.log('Not on beta or test, so no need to handle beta.'); + return; + } + + const isBeta = checkBeta(); + + const currentHostName = window.location.hostname; + + // Beta is enabled, but the current host name does start with beta. + if (isBeta && !currentHostName.startsWith('beta')) { + window.location.href = `${window.location.protocol}//beta.${currentHostName}${window.location.pathname}${window.location.search}${window.location.hash}`; + } + + // Beta is not enabled, but the current host name does start with beta. + else if (!isBeta && currentHostName.startsWith('beta')) { + window.location.href = `${window.location.protocol}//${currentHostName.replace('beta.', '')}${window.location.pathname}${window.location.search}${window.location.hash}`; + } +} +export default handleBeta;