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
11 changed files with 12912 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:
--- 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/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/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
@@ -5,7 +5,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";

 const { Option } = Select;

-// To be used as a form element only.
+//To be used as a form element only.

 const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => {
  const [option, setOption] = useState(value);
@@ -33,25 +33,9 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
        if (!value || !options) return label;
        const discount = options?.find((o) => o.id === value)?.discount;
        return (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              flexWrap: "nowrap",
-              width: "100%"
-            }}
-          >
-            <div
-              style={{
-                flex: 1,
-                minWidth: 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }}
-            >
-              {label}
-            </div>
+          <div className="imex-flex-row" style={{ width: "100%" }}>
+            <div style={{ flex: 1 }}>{label}</div>
+
            {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
          </div>
        );
@@ -61,67 +45,36 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
      optionFilterProp="name"
      onSelect={onSelect}
      disabled={disabled || false}
-      optionLabelProp="name"
+      optionLabelProp={"name"}
    >
-      {favorites &&
-        favorites.map((o) => (
-          <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
+      {favorites
+        ? favorites.map((o) => (
+            <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
+              <div className="imex-flex-row">
+                <div style={{ flex: 1 }}>{o.name}</div>
+                <Space style={{ marginLeft: "1rem" }}>
+                  <HeartOutlined style={{ color: "red" }} />
+                  {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+                  {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+                </Space>
              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                <HeartOutlined style={{ color: "red" }} />
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
-      {options &&
-        options.map((o) => (
-          <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
+            </Option>
+          ))
+        : null}
+      {options
+        ? options.map((o) => (
+            <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
+              <div className="imex-flex-row" style={{ width: "100%" }}>
+                <div style={{ flex: 1 }}>{o.name}</div>
+
+                <Space style={{ marginLeft: "1rem" }}>
+                  {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+                  {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+                </Space>
              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
+            </Option>
+          ))
+        : null}
    </Select>
  );
 };
--- 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/server/accounting/qbo/qbo-payables.js
+++ b/server/accounting/qbo/qbo-payables.js
@@ -94,10 +94,7 @@ exports.default = async (req, res) => {
        ret.push({
          billid: bill.id,
          success: false,
-          errorMessage:
-            (error && error.authResponse && error.authResponse.body) ||
-            error.response?.data?.Fault?.Error.map((e) => e.Detail).join(", ") ||
-            (error && error.message)
+          errorMessage: (error && error.authResponse && error.authResponse.body) || (error && error.message)
        });

        //Add the export log error.
@@ -212,7 +209,7 @@ async function InsertBill(oauthClient, qbo_realmId, req, bill, vendor, bodyshop)
      AccountBasedExpenseLineDetail: {
        ...(bill.job.class ? { ClassRef: { value: classes[bill.job.class] } } : {}),
        AccountRef: {
-          value: accounts[bodyshop.md_responsibility_centers.taxes.federal_itc.accountdesc]
+          value: accounts[bodyshop.md_responsibility_centers.taxes.federal.accountdesc]
        }
      },

@@ -277,8 +274,6 @@ async function InsertBill(oauthClient, qbo_realmId, req, bill, vendor, bodyshop)
  } catch (error) {
    logger.log("qbo-payables-error", "DEBUG", req.user.email, bill.id, {
      error: error, //(error && error.authResponse && error.authResponse.body) || (error && error.message),
-      validationError: JSON.stringify(error?.response?.data),
-      accountmeta: JSON.stringify({ accounts, taxCodes, classes }),
      method: "InsertBill"
    });
    throw error;
--- a/server/accounting/qbo/qbo-receivables.js
+++ b/server/accounting/qbo/qbo-receivables.js
@@ -179,10 +179,7 @@ exports.default = async (req, res) => {
        ret.push({
          jobid: job.id,
          success: false,
-          errorMessage:
-            (error && error.authResponse && error.authResponse.body) ||
-            error.response?.data?.Fault?.Error.map((e) => e.Detail).join(", ") ||
-            (error && error.message)
+          errorMessage: (error && error.authResponse && error.authResponse.body) || (error && error.message)
        });
        console.log(error);
        logger.log("qbo-receivable-create-error", "ERROR", req.user.email, {
@@ -257,6 +254,7 @@ async function InsertInsuranceCo(oauthClient, qbo_realmId, req, job, bodyshop) {
    throw new Error(
      `Insurance Company '${job.ins_co_nm}' not found in shop configuration. Please make sure it exists or change the insurance company name on the job to one that exists.`
    );
+    return;
  }
  const Customer = {
    DisplayName: job.ins_co_nm.trim(),
@@ -577,9 +575,7 @@ async function InsertInvoice(oauthClient, qbo_realmId, req, job, bodyshop, paren
  } catch (error) {
    logger.log("qbo-receivables-error", "DEBUG", req.user.email, job.id, {
      error,
-      method: "InsertInvoice",
-      validationError: JSON.stringify(error?.response?.data),
-      accountmeta: JSON.stringify({ items, taxCodes, classes })
+      method: "InsertOwner"
    });
    throw error;
  }
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