Merge branch 'master' into feature/payroll

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,13 +1,18 @@
 import { Badge, List, Tag } from "antd";
-import React, { useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List as VirtualizedList,
+} from "react-virtualized";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { List as VirtualizedList, AutoSizer } from "react-virtualized";
 
 import "./chat-conversation-list.styles.scss";
 
@@ -24,57 +29,66 @@ function ChatConversationListComponent({
   conversationList,
   selectedConversation,
   setSelectedConversation,
-  subscribeToMoreConversations,
   loadMoreConversations,
 }) {
-  useEffect(
-    () => subscribeToMoreConversations(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60,
+  });
 
-  const rowRenderer = ({ index, key, style }) => {
+  const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
 
     return (
-      <List.Item
+      <CellMeasurer
         key={key}
-        onClick={() => setSelectedConversation(item.id)}
-        className={`chat-list-item ${
-          item.id === selectedConversation
-            ? "chat-list-selected-conversation"
-            : null
-        }`}
-        style={style}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
       >
-        <div sryle={{ display: "inline-block" }}>
-          {item.label && <div className="chat-name">{item.label}</div>}
-          {item.job_conversations.length > 0 ? (
-            <div className="chat-name">
-              {item.job_conversations.map((j, idx) => (
-                <div key={idx}>
-                  <OwnerNameDisplay ownerObject={j.job} />
-                </div>
-              ))}
-            </div>
-          ) : (
-            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-          )}
-        </div>
-        <div sryle={{ display: "inline-block" }}>
-          <div>
-            {item.job_conversations.length > 0
-              ? item.job_conversations.map((j, idx) => (
-                  <Tag key={idx} className="ro-number-tag">
-                    {j.job.ro_number}
-                  </Tag>
-                ))
-              : null}
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          className={`chat-list-item ${
+            item.id === selectedConversation
+              ? "chat-list-selected-conversation"
+              : null
+          }`}
+          style={style}
+        >
+          <div
+            style={{
+              display: "inline-block",
+            }}
+          >
+            {item.label && <div className="chat-name">{item.label}</div>}
+            {item.job_conversations.length > 0 ? (
+              <div className="chat-name">
+                {item.job_conversations.map((j, idx) => (
+                  <div key={idx}>
+                    <OwnerNameDisplay ownerObject={j.job} />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+            )}
           </div>
-          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-        </div>
-        <Badge count={item.messages_aggregate.aggregate.count || 0} />
-      </List.Item>
+          <div style={{ display: "inline-block" }}>
+            <div>
+              {item.job_conversations.length > 0
+                ? item.job_conversations.map((j, idx) => (
+                    <Tag key={idx} className="ro-number-tag">
+                      {j.job.ro_number}
+                    </Tag>
+                  ))
+                : null}
+            </div>
+            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          </div>
+          <Badge count={item.messages_aggregate.aggregate.count || 0} />
+        </List.Item>
+      </CellMeasurer>
     );
   };
 
@@ -86,7 +100,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={60}
+            rowHeight={cache.rowHeight}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {

client/src/components/chat-popup/chat-popup.component.jsx

@@ -4,7 +4,7 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useLazyQuery, useSubscription } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,8 +12,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   CONVERSATION_LIST_QUERY,
-  CONVERSATION_LIST_SUBSCRIPTION,
-  UNREAD_CONVERSATION_COUNT_SUBSCRIPTION,
+  UNREAD_CONVERSATION_COUNT,
 } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
@@ -42,19 +41,20 @@ export function ChatPopupComponent({
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
 
-  const { data: unreadData } = useSubscription(
-    UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
-  );
-
-  const [
-    getConversations,
-    { loading, data, called, refetch, fetchMore, subscribeToMore },
-  ] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !chatVisible,
+    ...(pollInterval > 0 ? { pollInterval } : {}),
   });
 
+  const [getConversations, { loading, data, refetch, fetchMore }] =
+    useLazyQuery(CONVERSATION_LIST_QUERY, {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      skip: !chatVisible,
+      ...(pollInterval > 0 ? { pollInterval } : {}),
+    });
+
   const fcmToken = sessionStorage.getItem("fcmtoken");
 
   useEffect(() => {
@@ -66,13 +66,13 @@ export function ChatPopupComponent({
   }, [fcmToken]);
 
   useEffect(() => {
-    if (called && chatVisible)
+    if (chatVisible)
       getConversations({
         variables: {
           offset: 0,
         },
       });
-  }, [chatVisible, called, getConversations]);
+  }, [chatVisible, getConversations]);
 
   const loadMoreConversations = useCallback(() => {
     if (data)
@@ -119,43 +119,6 @@ export function ChatPopupComponent({
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
                     loadMoreConversations={loadMoreConversations}
-                    subscribeToMoreConversations={() =>
-                      subscribeToMore({
-                        document: CONVERSATION_LIST_SUBSCRIPTION,
-                        variables: { offset: 0 },
-                        updateQuery: (prev, { subscriptionData }) => {
-                          if (
-                            !subscriptionData.data ||
-                            subscriptionData.data.conversations.length === 0
-                          )
-                            return prev;
-
-                          let conversations = [...prev.conversations];
-                          const newConversations =
-                            subscriptionData.data.conversations;
-
-                          for (const conversation of newConversations) {
-                            const index = conversations.findIndex(
-                              (prevConversation) =>
-                                prevConversation.id === conversation.id
-                            );
-
-                            if (index !== -1) {
-                              conversations.splice(index, 1);
-                              conversations.unshift(conversation);
-
-                              continue;
-                            }
-
-                            conversations.unshift(conversation);
-                          }
-
-                          return Object.assign({}, prev, {
-                            conversations: conversations,
-                          });
-                        },
-                      })
-                    }
                   />
                 )}
               </Col>

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -66,7 +66,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       key: "status",
     },
     {
-      title: t("jobs.fields.ro_number"),
+      title: t("bills.fields.invoice_number"),
       dataIndex: ["Posting", "Reference"],
       key: "reference",
     },

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -11,6 +11,7 @@ import {
   Select,
   Space,
   Statistic,
+  Switch,
   Typography,
 } from "antd";
 import Dinero from "dinero.js";
@@ -183,6 +184,13 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
             <Space>
               <DmsCdkMakes form={form} socket={socket} job={job} />
               <DmsCdkMakesRefetch />
+              <Form.Item
+                name="dms_unsold"
+                label={t("jobs.fields.dms.dms_unsold")}
+                initialValue={false}
+              >
+                <Switch />
+              </Form.Item>
             </Space>
           </div>
         )}

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

@@ -334,7 +334,9 @@ function Header({
           icon={<SettingOutlined />}
         >
           <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
-            <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
+            <Link to="/manage/shop?tab=info">
+              {t("menus.header.shop_config")}
+            </Link>
           </Menu.Item>
           <Menu.Item key="dashboard" icon={<DashboardFilled />}>
             <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>

client/src/components/shop-info/shop-info.component.jsx

@@ -53,7 +53,9 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       <Tabs
         defaultActiveKey={search.subtab}
         onChange={(key) =>
-          history.push({ search: `?tab=${search.tab}&subtab=${key}` })
+          history.push({
+            search: `?tab=${search.tab}&subtab=${key}`,
+          })
         }
       >
         <Tabs.TabPane key="general" tab={t("bodyshop.labels.shopinfo")}>

client/src/components/update-alert/update-alert.component.jsx

@@ -0,0 +1,78 @@
+import { Alert, Button, Col, Row, Space } from "antd";
+import i18n from "i18next";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectUpdateAvailable } from "../../redux/application/application.selectors";
+import { AlertOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { setUpdateAvailable } from "../../redux/application/application.actions";
+import { store } from "../../redux/store";
+import * as serviceWorkerRegistration from "../../serviceWorkerRegistration";
+
+let globalRegistration;
+
+const mapStateToProps = createStructuredSelector({
+  updateAvailable: selectUpdateAvailable,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(UpdateAlert);
+
+export function UpdateAlert({ updateAvailable }) {
+  const { t } = useTranslation();
+  if (!updateAvailable) return null;
+  return (
+    <Alert
+      message={t("general.messages.newversiontitle")}
+      showIcon
+      icon={<AlertOutlined />}
+      description={
+        <Row gutter={[16, 16]}>
+          <Col sm={24} md={16} lg={18}>
+            {t("general.messages.newversionmessage")}
+          </Col>
+          <Col sm={24} md={8} lg={6}>
+            <Space wrap>
+              <Button
+                onClick={async () => {
+                  window.open("https://imex-online.noticeable.news/", "_blank");
+                }}
+              >
+                {i18n.t("general.actions.viewreleasenotes")}
+              </Button>
+              <Button
+                type="primary"
+                onClick={async () => {
+                  if (globalRegistration && globalRegistration.waiting) {
+                    await globalRegistration.unregister();
+                    // Makes Workbox call skipWaiting()
+                    globalRegistration.waiting.postMessage({
+                      type: "SKIP_WAITING",
+                    });
+                    // Once the service worker is unregistered, we can reload the page to let
+                    // the browser download a fresh copy of our app (invalidating the cache)
+                    window.location.reload();
+                  }
+                }}
+              >
+                {i18n.t("general.actions.refresh")}
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+      }
+      closable={false}
+      type="warning"
+    />
+  );
+}
+
+const onServiceWorkerUpdate = (registration) => {
+  console.log("onServiceWorkerUpdate", registration);
+  globalRegistration = registration;
+  store.dispatch(setUpdateAvailable(true));
+};
+
+serviceWorkerRegistration.register({ onUpdate: onServiceWorkerUpdate });