package upgrades

package.json

@@ -3,10 +3,10 @@
   "version": "4.7.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.7.9",
+    "@apollo/client": "^3.7.13",
     "@apollo/link-context": "^2.0.0-beta.3",
     "@apollo/link-error": "^2.0.0-beta.3",
-    "@appsignal/javascript": "^1.3.25",
+    "@appsignal/javascript": "^1.3.26",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.21",
     "@appsignal/plugin-path-decorator": "^1.0.15",
     "@appsignal/plugin-window-events": "^1.0.19",
@@ -16,55 +16,55 @@
     "@draft-js-plugins/mention": "^5.2.1",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@glific/flow-editor": "^1.19.1-5",
     "@jumpn/utils-graphql": "^0.6.0",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/material": "^5.11.10",
-    "@mui/x-date-pickers": "^5.0.20",
-    "@stripe/react-stripe-js": "^1.16.5",
-    "@stripe/stripe-js": "^1.47.0",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.3",
+    "@mui/x-date-pickers": "^6.3.0",
+    "@stripe/react-stripe-js": "^2.1.0",
+    "@stripe/stripe-js": "^1.52.1",
+    "@vitejs/plugin-react": "^4.0.0",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.4.0",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
     "buffer": "^6.0.3",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "draft-js": "^0.11.7",
     "emoji-mart": "^5.5.2",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
-    "graphql-ws": "^5.11.3",
-    "i18next": "^22.4.10",
+    "graphql-ws": "^5.12.1",
+    "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
-    "interweave": "^13.0.0",
+    "interweave": "^13.1.0",
     "interweave-autolink": "^5.1.0",
     "moment": "^2.29.4",
-    "pino": "^8.11.0",
+    "pino": "^8.12.1",
     "pino-logflare": "^0.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-google-recaptcha-v3": "^1.10.1",
-    "react-i18next": "^12.2.0",
-    "react-image": "^4.0.3",
+    "react-i18next": "^12.2.2",
+    "react-image": "^4.1.0",
     "react-media-recorder": "^1.6.6",
     "react-phone-input-2": "^2.15.1",
-    "react-player": "^2.11.2",
-    "react-resize-detector": "^8.0.4",
-    "react-router-dom": "^6.8.1",
+    "react-player": "^2.12.0",
+    "react-resize-detector": "^9.1.0",
+    "react-router-dom": "^6.11.0",
     "react-tiny-link": "^3.6.1",
     "react-viewer": "^3.2.2",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "stream-browserify": "^3.0.0",
     "util": "^0.12.5",
     "uuid": "^9.0.0",
-    "vite": "^4.0.4",
-    "vite-plugin-checker": "^0.5.6",
-    "vite-plugin-svgr": "^2.4.0",
-    "vite-tsconfig-paths": "^4.0.3",
-    "yup": "^1.0.1"
+    "vite": "^4.3.4",
+    "vite-plugin-checker": "^0.6.0",
+    "vite-plugin-svgr": "2.4.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "yup": "^1.1.1"
   },
   "scripts": {
     "setup": "yarn install --force && yarn run floweditor",
@@ -96,34 +96,34 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/draft-js": "^0.11.10",
     "@types/emoji-mart": "^3.0.9",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@types/node": "^18.16.3",
+    "@types/react": "^18.2.1",
+    "@types/react-dom": "^18.2.2",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/uuid": "^9.0.0",
-    "@vitest/coverage-istanbul": "^0.28.5",
-    "@vitest/ui": "^0.28.5",
+    "@types/uuid": "^9.0.1",
+    "@vitest/coverage-istanbul": "^0.30.1",
+    "@vitest/ui": "^0.30.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "i18next-parser": "^7.7.0",
-    "jsdom": "^21.1.0",
-    "prettier": "^2.8.4",
+    "jsdom": "^22.0.0",
+    "prettier": "^2.8.8",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^0.28.5",
+    "vitest": "^0.31.0",
     "yarn-upgrade-all": "^0.7.2"
   }
 }

src/components/UI/Form/Calendar/Calendar.test.tsx

@@ -29,7 +29,7 @@ describe('<Calendar />', () => {
   it('test empty date event', async () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue('MM/DD/YYYY');
   });
 
   it('test date change event', async () => {

src/components/UI/Form/Calendar/Calendar.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import { TextField } from '@mui/material';
 import 'date-fns';
 import { getIn } from 'formik';
-
 import styles from './Calendar.module.css';
 
 export interface CalendarProps {
@@ -44,29 +42,24 @@ export const Calendar = ({
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <div className={styles.Calendar}>
+      <div className={styles.Calendar} data-testid="date-picker-inline">
         <DatePicker
           label={placeholder}
           open={open}
           value={dateValue}
-          inputFormat={format}
+          format={format}
           onChange={handleDateChange}
           className={styles.CalendarInput}
           disabled={disabled}
           minDate={minDate}
-          InputProps={{
-            error: hasError,
-            onClick: () => !disabled && setOpen(true),
+          slotProps={{
+            textField: {
+              helperText: hasError ? errorText : '',
+              error: hasError,
+              onClick: () => !disabled && setOpen(true),
+            },
           }}
           onClose={() => setOpen(false)}
-          renderInput={(params) => (
-            <TextField
-              helperText={hasError ? errorText : ''}
-              data-testid="date-picker-inline"
-              {...params}
-              error={hasError}
-            />
-          )}
         />
       </div>
     </LocalizationProvider>

src/components/UI/Form/DateTimePicker/DateTimePicker.test.tsx

@@ -26,7 +26,7 @@ describe('<DateTimePicker />', () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
     fireEvent.change(input, { target: { value: '14/05/2021 10:50 AM' } });
-    expect(input).toHaveValue('14/05/2021 10:50 AM');
+    expect(input).toHaveValue('14/05/2021⁩ ⁦10:50⁩ ⁦AM');
 
     expect(setFieldMock).toBeCalled();
     expect(onChangeMock).toBeCalled();

src/components/UI/Form/DateTimePicker/DateTimePicker.tsx

@@ -1,5 +1,4 @@
 import { LocalizationProvider, DateTimePicker as Picker } from '@mui/x-date-pickers';
-import { TextField } from '@mui/material';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import 'date-fns';
 import { getIn } from 'formik';
@@ -38,21 +37,17 @@ export const DateTimePicker = ({
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <div className={styles.DateTimePicker}>
+      <div className={styles.DateTimePicker} data-testid="date-picker-inline">
         <Picker
           className={styles.Text}
-          renderInput={(props) => (
-            <TextField
-              data-testid="date-picker-inline"
-              helperText={hasError ? errorText : ''}
-              {...props}
-            />
-          )}
           label={placeholder}
-          inputFormat={format}
+          format={format}
           value={dateValue}
-          InputProps={{
-            error: hasError,
+          slotProps={{
+            textField: {
+              helperText: hasError ? errorText : '',
+              error: hasError,
+            },
           }}
           onChange={handleDateChange}
           minDate={minDate}

src/components/UI/Form/TimePicker/TimePicker.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import UserEvent from '@testing-library/user-event';
 
 import { TimePicker } from './TimePicker';
@@ -14,6 +14,8 @@ const timePickerProps: any = (disabled: boolean) => {
   };
 };
 
+const cleanText = (timeValue: any) => timeValue.replace(/\u200e|\u2066|\u2067|\u2068|\u2069/g, '');
+
 describe('<TimePicker />', () => {
   const props = timePickerProps(false);
 
@@ -41,41 +43,16 @@ describe('<TimePicker />', () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
     fireEvent.change(input, { target: { value: '09:00 am' } });
-    expect(input).toHaveValue('09:00 am');
-  });
-
-  it('test display time picker on icon click', async () => {
-    render(wrapper);
-    const input = screen.getByRole('button');
-    fireEvent.click(input);
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(cleanText(input.getAttribute('value'))).to.equal('09:00 AM');
   });
 
   it('should set the field value to null if no date is passed', async () => {
     render(wrapper);
     const input = screen.getByRole('textbox');
-    fireEvent.change(input, { target: { value: '1' } });
+    fireEvent.change(input, { target: { value: '09:00 am' } });
     backspace(input);
 
-    expect(setFieldValueMock).toBeCalledWith('example', null);
-  });
-
-  it('should close the timepicker if we click escape', async () => {
-    render(wrapper);
-    const input = screen.getByRole('textbox');
-    fireEvent.click(input);
-
-    expect(screen.getByTestId('sentinelStart')).toBeInTheDocument();
-
-    fireEvent.keyDown(input, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
-    });
-    await waitFor(() => {
-      expect(screen.queryByTestId('sentinelStart')).not.toBeInTheDocument();
-    });
+    expect(input).toHaveValue('');
   });
 
   it('should show error if error is passed', async () => {
@@ -102,11 +79,4 @@ describe('Disable <TimePicker />', () => {
     UserEvent.type(input, '09:00 AM');
     expect(input).toHaveValue('');
   });
-
-  it('test do not display time picker on icon click', async () => {
-    render(wrapper);
-    const input = screen.getByRole('button');
-    fireEvent.click(input);
-    expect(screen.queryByRole('dialog')).toEqual(null);
-  });
 });

src/components/UI/Form/TimePicker/TimePicker.tsx

@@ -3,7 +3,6 @@ import 'date-fns';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider, TimePicker as Picker } from '@mui/x-date-pickers';
 import moment from 'moment';
-import { TextField } from '@mui/material';
 import { getIn } from 'formik';
 
 import styles from './TimePicker.module.css';
@@ -40,27 +39,22 @@ export const TimePicker = ({
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <div className={styles.TimePicker}>
+      <div className={styles.TimePicker} data-testid="time-picker">
         <Picker
           className={styles.Picker}
           label={placeholder}
           open={open}
-          InputProps={{
-            error: hasError,
-            onClick: () => !disabled && setOpen(true),
-          }}
           onClose={() => setOpen(false)}
           disabled={disabled}
           value={timeValue}
           onChange={handleDateChange}
-          renderInput={(params) => (
-            <TextField
-              data-testid="time-picker"
-              helperText={hasError ? errorText : ''}
-              {...params}
-              error={hasError}
-            />
-          )}
+          slotProps={{
+            textField: {
+              helperText: hasError ? errorText : '',
+              error: hasError,
+              onClick: () => !disabled && setOpen(true),
+            },
+          }}
         />
         {helperText && (
           <div id="helper-text" className={styles.HelperText}>

src/components/UI/Layout/Layout.test.tsx

@@ -4,8 +4,9 @@ import { MockedProvider } from '@apollo/client/testing';
 
 import { walletBalanceQuery, walletBalanceSubscription } from 'mocks/Organization';
 import { Layout } from './Layout';
+import { getNotificationCountQuery } from 'mocks/Notifications';
 
-const mocks = [...walletBalanceQuery, ...walletBalanceSubscription];
+const mocks = [...walletBalanceQuery, ...walletBalanceSubscription, getNotificationCountQuery];
 
 describe('layout testing', () => {
   it('renders the appropriate components', async () => {

src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.test.tsx

@@ -8,8 +8,14 @@ import { getCurrentUserQuery } from 'mocks/User';
 import { setUserSession } from 'services/AuthService';
 import { walletBalanceQuery, walletBalanceSubscription } from 'mocks/Organization';
 import { SideDrawerContext } from 'context/session';
+import { getNotificationCountQuery } from 'mocks/Notifications';
 
-const mocks = [getCurrentUserQuery, ...walletBalanceQuery, ...walletBalanceSubscription];
+const mocks = [
+  getCurrentUserQuery,
+  ...walletBalanceQuery,
+  ...walletBalanceSubscription,
+  getNotificationCountQuery,
+];
 
 describe('side drawer testing', () => {
   const component = (