IO-2733 Add loading state and further delay reload.

IO-2733 Resolve notification showing incorrect time.
IO-2733 Add Timer Started check to prevent auto refresh early.
2024-09-13 11:22:38 -07:00 · 2024-09-13 10:51:04 -07:00 · 2024-09-13 09:58:46 -07:00 · 2024-09-10 15:54:15 -07:00 · 2024-09-10 17:29:31 +00:00 · 2024-09-10 13:16:08 -04:00
12 changed files with 12892 additions and 10814 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -226,7 +226,9 @@ jobs:
          command: |
            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
            hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            sleep 5
            hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            sleep 10
            hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
      - jira/notify:
          environment: Test (Rome) - Hasura
@@ -313,7 +315,9 @@ jobs:
          command: |
            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
            hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+            sleep 15
            hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+            sleep 30
            hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
      - jira/notify:
          environment: Test (ImEX) - Hasura
@@ -423,7 +427,7 @@ workflows:
          secret: ${HASURA_PROD_SECRET}
          filters:
            branches:
-              only: master
+              only: master-AIO
      - rome-api-deploy:
          filters:
            branches:
@@ -433,7 +437,7 @@ workflows:
            branches:
              only: master-AIO
      - rome-hasura-migrate:
-          secret: ${HASURA_PROD_SECRET}
+          secret: ${HASURA_ROME_PROD_SECRET}
          filters:
            branches:
              only: master-AIO
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/index.html
+++ b/client/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
  <meta charset="utf-8"/>
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
  <link rel="icon" href="/favicon.png"/>
  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -18,7 +18,6 @@ import { checkUserSession } from "../redux/user/user.actions";
 import { selectBodyshop, selectCurrentEula, selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
-import handleBeta from "../utils/handleBeta";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
@@ -108,8 +107,6 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
    return <LoadingSpinner message={t("general.labels.loggingin")} />;
  }

-  handleBeta();
-
  if (!online) {
    return (
      <Result
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -13,7 +13,6 @@ import Icon, {
  FileFilled,
  HomeFilled,
  ImportOutlined,
-  InfoCircleOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
@@ -27,8 +26,8 @@ import Icon, {
  UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Switch, Tooltip } from "antd";
-import React, { useEffect, useState } from "react";
+import { Layout, Menu } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -43,7 +42,6 @@ import { selectRecentItems, selectSelectedHeader } from "../../redux/application
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { checkBeta, handleBeta, setBeta } from "../../utils/handleBeta";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";

@@ -115,20 +113,22 @@ function Header({
    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 deleteBetaCookie = () => {
+    const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
+    if (cookieExists) {
+      const domain = window.location.hostname.split(".").slice(-2).join(".");
+      document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
+      console.log(`betaSwitchImex cookie deleted`);
+    } else {
+      console.log(`betaSwitchImex cookie does not exist`);
+    }
  };

+  deleteBetaCookie();
+
  const accountingChildren = [];

  if (
@@ -695,31 +695,6 @@ function Header({
    }
  ];

-  InstanceRenderManager({
-    executeFunction: true,
-    args: [],
-    imex: () => {
-      menuItems.push({
-        key: "beta-switch",
-        id: "header-beta-switch",
-        style: { marginLeft: "auto" },
-        label: (
-          <Tooltip
-            title={`A more modern ${InstanceRenderManager({
-              imex: t("titles.imexonline"),
-              rome: t("titles.romeonline"),
-              promanager: t("titles.promanager")
-            })} is ready for you to try! You can switch back at any time.`}
-          >
-            <InfoCircleOutlined />
-            <span style={{ marginRight: 8 }}>Try the new app</span>
-            <Switch checked={betaSwitch} onChange={betaSwitchChange} />
-          </Tooltip>
-        )
-      });
-    }
-  });
-
  return (
    <Layout.Header>
      <Menu
--- a/client/src/components/update-alert/update-alert.component.jsx
+++ b/client/src/components/update-alert/update-alert.component.jsx
@@ -1,13 +1,14 @@
 import { AlertOutlined } from "@ant-design/icons";
-import { Alert, Button, Col, Row, Space } from "antd";
+import { Alert, Button, Col, notification, Row, Space } from "antd";
 import i18n from "i18next";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectUpdateAvailable } from "../../redux/application/application.selectors";
 import { useRegisterSW } from "virtual:pwa-register/react";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import useCountDown from "../../utils/countdownHook";

 const mapStateToProps = createStructuredSelector({
  updateAvailable: selectUpdateAvailable
@@ -19,6 +20,15 @@ const mapDispatchToProps = (dispatch) => ({

 export function UpdateAlert({ updateAvailable }) {
  const { t } = useTranslation();
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [
+    timeLeft,
+    {
+      start //pause, resume, reset
+    }
+  ] = useCountDown(180000, 1000);
+
  const {
    offlineReady: [offlineReady],
    needRefresh: [needRefresh],
@@ -40,11 +50,43 @@ export function UpdateAlert({ updateAvailable }) {
    }
  });

+  const ReloadNewVersion = useCallback(() => {
+    setLoading(true);
+    updateServiceWorker(true);
+    setTimeout(() => {
+      window.location.reload(true);
+    }, 5000);
+  }, [updateServiceWorker]);
+
  useEffect(() => {
-    if (import.meta.env.DEV) {
-      console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
+    if (needRefresh) {
+      start();
+      setTimerStarted(true);
    }
-  }, [needRefresh, offlineReady]);
+  }, [start, needRefresh, offlineReady]);
+
+  useEffect(() => {
+    if (needRefresh && timerStarted && timeLeft < 60000) {
+      notification.open({
+        type: "warning",
+        closable: false,
+        duration: 65000,
+        key: "autoupdate",
+        message: t("general.actions.autoupdate", {
+          time: (timeLeft / 1000).toFixed(0),
+          app: InstanceRenderManager({
+            imex: "$t(titles.imexonline)",
+            rome: "$t(titles.romeonline)",
+            promanager: "$t(titles.promanager)"
+          })
+        }),
+        placement: "bottomRight"
+      });
+    }
+    if (needRefresh && timerStarted && timeLeft <= 0) {
+      ReloadNewVersion();
+    }
+  }, [timeLeft, t, needRefresh, ReloadNewVersion, timerStarted]);

  if (!needRefresh) return null;

@@ -75,9 +117,10 @@ export function UpdateAlert({ updateAvailable }) {
              <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
                {i18n.t("general.actions.viewreleasenotes")}
              </Button>
-              <Button type="primary" onClick={() => updateServiceWorker(true)}>
-                {i18n.t("general.actions.refresh")}
+              <Button loading={loading} type="primary" onClick={() => ReloadNewVersion()}>
+                {i18n.t("general.actions.refresh")} {`(${(timeLeft / 1000).toFixed(0)} s)`}
              </Button>
+              <Button onClick={() => start(300000)}>{i18n.t("general.actions.delay")}</Button>
            </Space>
          </Col>
        </Row>
--- a/client/src/firebase/firebase.utils.js
+++ b/client/src/firebase/firebase.utils.js
@@ -5,7 +5,6 @@ import { getFirestore } from "firebase/firestore";
 import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import { store } from "../redux/store";
 import axios from "axios";
-import { checkBeta } from "../utils/handleBeta";

 const config = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG);
 initializeApp(config);
@@ -88,7 +87,7 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
    operationName: eventName,
    variables: additionalParams,
    dbevent: false,
-    env: checkBeta() ? "beta" : "master"
+    env: "master"
  });
  // console.log(
  //   "%c[Analytics]",
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
--- a/client/src/utils/countdownHook.js
+++ b/client/src/utils/countdownHook.js
@@ -0,0 +1,84 @@
+import React from "react";
+
+const useCountDown = (timeToCount = 60 * 1000, interval = 1000) => {
+  const [timeLeft, setTimeLeft] = React.useState(0);
+  const timer = React.useRef({});
+
+  const run = (ts) => {
+    if (!timer.current.started) {
+      timer.current.started = ts;
+      timer.current.lastInterval = ts;
+    }
+
+    const localInterval = Math.min(interval, timer.current.timeLeft || Infinity);
+    if (ts - timer.current.lastInterval >= localInterval) {
+      timer.current.lastInterval += localInterval;
+      setTimeLeft((timeLeft) => {
+        timer.current.timeLeft = timeLeft - localInterval;
+        return timer.current.timeLeft;
+      });
+    }
+
+    if (ts - timer.current.started < timer.current.timeToCount) {
+      timer.current.requestId = window.requestAnimationFrame(run);
+    } else {
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  };
+
+  const start = React.useCallback(
+    (ttc) => {
+      window.cancelAnimationFrame(timer.current.requestId);
+
+      const newTimeToCount = ttc !== undefined ? ttc : timeToCount;
+      timer.current.started = null;
+      timer.current.lastInterval = null;
+      timer.current.timeToCount = newTimeToCount;
+      timer.current.requestId = window.requestAnimationFrame(run);
+
+      setTimeLeft(newTimeToCount);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const pause = React.useCallback(() => {
+    window.cancelAnimationFrame(timer.current.requestId);
+    timer.current.started = null;
+    timer.current.lastInterval = null;
+    timer.current.timeToCount = timer.current.timeLeft;
+  }, []);
+
+  const resume = React.useCallback(
+    () => {
+      if (!timer.current.started && timer.current.timeLeft > 0) {
+        window.cancelAnimationFrame(timer.current.requestId);
+        timer.current.requestId = window.requestAnimationFrame(run);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const reset = React.useCallback(() => {
+    if (timer.current.timeLeft) {
+      window.cancelAnimationFrame(timer.current.requestId);
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  }, []);
+
+  const actions = React.useMemo(
+    () => ({ start, pause, resume, reset }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  React.useEffect(() => {
+    return () => window.cancelAnimationFrame(timer.current.requestId);
+  }, []);
+
+  return [timeLeft, actions];
+};
+
+export default useCountDown;
--- a/client/src/utils/handleBeta.js
+++ b/client/src/utils/handleBeta.js
@@ -1,47 +0,0 @@
-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 (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;
-
-  // Determine if the host name starts with "beta" or "www.beta"
-  const isBetaHost = currentHostName.startsWith("beta.");
-  const isBetaHostWithWWW = currentHostName.startsWith("www.beta.");
-
-  if (isBeta) {
-    // If beta is on and we are not on a beta domain, redirect to the beta version
-    if (!isBetaHost && !isBetaHostWithWWW) {
-      const newHostName = currentHostName.startsWith("www.")
-        ? `www.beta.${currentHostName.replace(/^www\./, "")}`
-        : `beta.${currentHostName}`;
-      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-      window.location.replace(href);
-    }
-    // Otherwise, if beta is on and we're already on a beta domain, stay there
-  } else {
-    // If beta is off and we are on a beta domain, redirect to the non-beta version
-    if (isBetaHost || isBetaHostWithWWW) {
-      const newHostName = currentHostName.replace(/^www\.beta\./, "www.").replace(/^beta\./, "");
-      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-      window.location.replace(href);
-    }
-    // Otherwise, if beta is off and we're not on a beta domain, stay there
-  }
-};
-
-export default handleBeta;
Author	SHA1	Message	Date
Patrick Fic	b3303e3c38	IO-2733 Add loading state and further delay reload.	2024-09-13 11:22:38 -07:00
Patrick Fic	73ec8b8a70	IO-2733 Resolve notification showing incorrect time.	2024-09-13 10:51:04 -07:00
Patrick Fic	954504de8d	IO-2733 Add Timer Started check to prevent auto refresh early.	2024-09-13 09:58:46 -07:00
Patrick Fic	3bfa556b02	IO-2733 Added countdown timer to PWA Refresh & cache busting meta.	2024-09-10 15:54:15 -07:00
Dave Richer	d0a7b87e04	Merged in feature/IO-2916-Remove-Beta-Switch-AIO (pull request #1693 ) feature/IO-2916-Remove-Beta-Switch-AIO - Remove Beta Switch	2024-09-10 17:29:31 +00:00
Dave Richer	799b24c90e	feature/IO-2916-Remove-Beta-Switch-LEGACY - Remove cookie Signed-off-by: Dave Richer <dave@imexsystems.ca>	2024-09-10 13:16:08 -04:00
Dave Richer	3e1a8c87d1	feature/IO-2916-Remove-Beta-Switch-AIO - Remove cookie Signed-off-by: Dave Richer <dave@imexsystems.ca>	2024-09-10 13:10:49 -04:00
Dave Richer	c886d874de	feature/IO-2916-Remove-Beta-Switch-AIO - Remove Beta Switch Signed-off-by: Dave Richer <dave@imexsystems.ca>	2024-09-09 23:34:54 -04:00
Allan Carr	4dfb020089	Merged in release/2024-09-06 (pull request #1691 ) Release/2024 09 06	2024-09-07 01:08:25 +00:00