Release April 17 (#608)

* Remove amplify backend (#524)

* Async actions for Queue Status and My Queues API calls (#522)

* Add gitter chat badge (#530)

* Pick api base url from config. (#525)

* Remove unused backend env amplify (#532)

* Add LoadingStatus Component (#531)

* Add LoadingStatus Component

Upgrade storybook to 6.1.17

Fix LoadingIndicator stories

* Pause resume queue (#586)

* Merge fixes after pause queue (#598)

* Add plus prefix to phone number, rename onClick to onSubmit (#600)

* Fix Sonarqube code smells and lint errors (#599)

* Fix Sonarqube code smells and lint errors

* Address review comments - revert direct return and eslintrc

* Some minor changes to add A2HS (#602)

* Added size property to the icons & shortened name

* file name changed

* a square 144x144px icon of the logo

* register the service worker to enable pwa

* Modified phone icon on footer and ErrorHandler (#604)

* Removed phone icon with outdated link

* Added optional chaining in PageNotFound

* Fix return home button when reaching from errorHandler

* Intentional bug to check sentry logging

* Customized sentry logs

* Still experimenting with sentry

* Trying another approach

* Reverted intentional bugs and removed popup notifcation  (#605)

* Reverted intentional bugs and removed popup notifcation

* Fix code style issues with ESLint

* Make Contact Us on Navbar bit more bold to stand out (#609)

.gitignore

@@ -58,3 +58,4 @@ node_modules/
 
 # Configuration will be generated
 simplq/src/config.js
+simplq/.vscode/launch.json

simplq/public/manifest.json

@@ -1,9 +1,10 @@
 {
   "short_name": "SimplQ",
-  "name": "SimplQ provides a means to create and manage virtual queues instantly to help you and your customers have a great business experience",
+  "name": "SimplQ - A long overdue alternative to physical queues",
   "icons": [
     {
-      "src": "/images/Simple-Q.png",
+      "src": "/images/Simple-Q-144x144.png",
+      "sizes": "144x144",
       "type": "image/png"
     }
   ],

simplq/src/api/auth.js

@@ -54,7 +54,13 @@ const useMakeAuthedRequest = () => {
       },
     }).catch((error) => {
       // log error to sentry for alerting
-      Sentry.captureException(error);
+      let eventId;
+      Sentry.withScope((scope) => {
+        scope.setTag('Caught-at', 'API request');
+        eventId = Sentry.captureException(error);
+      });
+      // eslint-disable-next-line no-console
+      console.log(`Sentry exception captured, event id is ${eventId}`);
       // In case of request failure, extract error from response body
       if (error.response) {
         // Response has been received from the server

simplq/src/api/requestFactory/index.js

@@ -23,5 +23,6 @@ export {
   getQueueInfo,
   getQueueInfoByName,
   createQueue,
+  setQueueStatus,
 } from './queue';
 export { createToken, getToken, deleteToken, notifyToken } from './token';

simplq/src/api/requestFactory/queue.js

@@ -50,3 +50,16 @@ export const getQueueInfoByName = (queueName) => ({
  * @returns {Object} request - partial axios request without baseURL
  */
 export const deleteQueue = (queueId) => ({ method: 'delete', url: `/queue/${queueId}` });
+
+/**
+ * Request creator to set the queue status
+ *
+ * @param {string} queueId
+ * @param {string} status new status of the queue. Possible values are PAUSED and ACTIVE
+ * @returns {Object} request - partial axios request without baseURL
+ */
+export const setQueueStatus = (queueId, status) => ({
+  method: 'post',
+  url: `/queue/${queueId}`,
+  data: { status },
+});

simplq/src/components/ErrorHandler.jsx

@@ -1,27 +1,35 @@
-/* eslint-disable */ // todo enable it back
-
 import React from 'react';
+import * as Sentry from '@sentry/react';
 import PageNotFound from './pages/PageNotFound';
-import { setErrorPopupMessage } from 'store/appSlice';
-import { store } from 'store';
 
+// eslint-disable-next-line import/prefer-default-export
 export class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     // Update state so the next render will show the fallback UI.
-    console.log('In getDerivedStateFromError');
+    // eslint-disable-next-line no-console
+    console.log(
+      'Something caused a crash during rendering, falling back to 404 url, please try again...'
+    );
     return { hasError: true };
   }
 
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
     // logErrorToMyService(error, errorInfo);
-    console.log('In componentDidCatch');
-    store.dispatch(setErrorPopupMessage('An error occured. Please try again'));
+    // log error to sentry for alerting
+    let eventId;
+    Sentry.withScope((scope) => {
+      scope.setTag('Caught-at', 'Error Boundary');
+      scope.setExtras(errorInfo);
+      eventId = Sentry.captureException(error);
+    });
+    // eslint-disable-next-line no-console
+    console.log(`Sentry exception captured, event id is ${eventId}`);
   }
 
   render() {

simplq/src/components/common/Footer/Footer.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import FacebookIcon from '@material-ui/icons/Facebook';
-import PhoneIcon from '@material-ui/icons/Phone';
 import YouTubeIcon from '@material-ui/icons/YouTube';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import MailIcon from '@material-ui/icons/Mail';
@@ -26,7 +25,7 @@ export default () => (
             <a href="/privacy#terms-of-service">Terms of Service</a>
             <br />
             <br />
-            <i>Enjoy the rest of your {dayOfWeek()}!</i>
+            <i>{`Enjoy the rest of your ${dayOfWeek()}!`}</i>
           </b>
         </div>
       </div>
@@ -73,11 +72,6 @@ export default () => (
       <h1>Keep in touch</h1>
       <div className={styles['card-body']}>
         <div className={styles['list-container']}>
-          <div className={styles['list-container-item']}>
-            <a href="https://iimb.qualtrics.com/jfe/form/SV_aY8FY91ztRX9NvD">
-              <PhoneIcon fontSize="large" />
-            </a>
-          </div>
           <div className={styles['list-container-item']}>
             <a href="https://github.com/SimplQ/simplQ-frontend">
               <GitHubIcon fontSize="large" />

simplq/src/components/common/Nav/LeftNav.jsx

@@ -26,7 +26,7 @@ const LeftNav = ({ open, toggleClose }) => {
     }
   };
 
-  const opneContactUs = () => {
+  const openContactUs = () => {
     typeformEmbed.typeform.open();
   };
   return (
@@ -48,7 +48,13 @@ const LeftNav = ({ open, toggleClose }) => {
           </a>
         </li>
         <li>
-          <a role="link" tabIndex={0} onKeyDown={opneContactUs} onClick={opneContactUs}>
+          <a
+            className={styles['contact-us']}
+            role="link"
+            tabIndex={0}
+            onKeyDown={openContactUs}
+            onClick={openContactUs}
+          >
             Contact Us
           </a>
         </li>
@@ -65,6 +71,7 @@ const LeftNav = ({ open, toggleClose }) => {
         ref={(tf) => {
           typeformEmbed = tf;
         }}
+        buttonText="Contact Us"
       />
     </div>
   );

simplq/src/components/common/Nav/Nav.module.scss

@@ -131,3 +131,7 @@
   display: flex;
   flex-wrap: wrap;
 }
+
+.contact-us {
+  font-weight: bold;
+}

simplq/src/components/common/SidePanel/SidePanel.module.scss

@@ -75,6 +75,7 @@
   min-width: 15rem;
   text-align: left;
   color: $primary-color-dark;
+  border-bottom: 2px solid $primary-color-dark;
 
   .header {
     @include naked-button();
@@ -95,23 +96,46 @@
       margin-top: 0;
     }
   }
-
-  .expand-button {
+  .loading {
     @include center-vertically();
     @include center-horizontally();
-    width: 50px;
     height: 50px;
+  }
+}
+
+.side-panel-item-selected {
+  font-size: 0.8rem;
+  padding: 0;
+  min-width: 15rem;
+  text-align: left;
+  color: white;
+  background-color: $primary-color-dark;
+  border-bottom: 2px solid $primary-color-dark;
 
-    .expand-icon {
-      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      transform: rotate(0deg);
+  .header {
+    @include naked-button();
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+    width: 100%;
+
+    & > * {
+      margin: 0.2rem;
     }
 
-    .expand-icon-open {
-      transform: rotate(180deg);
+    &:hover {
+      background: #4e4c66 radial-gradient(circle, transparent 1%, #4e4c66 1%) center/15000%;
+      cursor: pointer;
     }
-  }
 
+    .icon {
+      margin-right: 1rem;
+    }
+
+    .description {
+      margin-top: 0;
+    }
+  }
   .loading {
     @include center-vertically();
     @include center-horizontally();

simplq/src/components/common/SidePanel/SidePanelItem.jsx

@@ -24,6 +24,7 @@ const SidePanelItem = ({
   onClick,
   children,
   tourTag = '',
+  style = 'side-panel-item',
 }) => {
   const [open, setOpen] = useState(false);
   const onClickHandler = () => {
@@ -36,7 +37,7 @@ const SidePanelItem = ({
   };
 
   return (
-    <div className={styles['side-panel-item']}>
+    <div className={styles[style]}>
       <div
         reactour-selector={tourTag}
         className={styles['header']}

simplq/src/components/pages/Admin/AdminSidePanel.jsx

@@ -9,7 +9,7 @@ import QueueHistory from './QueueHistory';
 export default ({ queueId }) => (
   <SidePanel>
     <AddMember queueId={queueId} />
-    <PauseQueue />
+    <PauseQueue queueId={queueId} />
     <DeleteQueue queueId={queueId} />
     <QueueHistory />
     <QueueDetails queueId={queueId} />

simplq/src/components/pages/Admin/PauseQueue.jsx

@@ -1,13 +1,31 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PauseIcon from '@material-ui/icons/Pause';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SidePanelItem from 'components/common/SidePanel/SidePanelItem';
+import { useSetQueueStatus } from 'store/asyncActions/setQueueStatus';
+import { selectQueueStatus } from 'store/selectedQueue';
+
+export default ({ queueId }) => {
+  const dispatch = useDispatch();
+  const setQueueStatus = useSetQueueStatus();
+  const queueStatus = useSelector(selectQueueStatus);
+  const activeDescription = 'Temporarily stop people from joining';
+  const pausedDescription = 'Start allowing people to join the queue';
+  const paused = queueStatus === 'PAUSED';
+
+  const toggleQueueStatus = () => {
+    const status = paused ? 'ACTIVE' : 'PAUSED';
+    dispatch(setQueueStatus({ queueId, status }));
+  };
 
-export default () => {
   return (
     <SidePanelItem
-      Icon={PauseIcon}
-      title="Pause Queue"
-      description="Temporarily stop people from joining"
+      Icon={paused ? PlayArrowIcon : PauseIcon}
+      title={paused ? 'Resume Queue' : 'Pause Queue'}
+      description={paused ? activeDescription : pausedDescription}
+      onClick={toggleQueueStatus}
+      style={paused ? 'side-panel-item-selected' : 'side-panel-item'}
     />
   );
 };

simplq/src/components/pages/Join/JoinForm.jsx

@@ -40,13 +40,12 @@ export function JoinQueueForm({ joinQueueHandler, buttonText }) {
   }
 
   function handleContactChange(value, country) {
-    setContact(value);
+    // to make sure that the number is parsed as an international number, prepend +.
+    const phoneNr = `+${value}`;
+    setContact(phoneNr);
     const phoneUtil = PhoneNumberUtil.getInstance();
 
     if (country != null) {
-      // to make sure that the number is parsed as an international number, prepend +.
-      const phoneNr = `+${value}`;
-
       try {
         const isValidNumber = phoneUtil.isValidNumberForRegion(
           phoneUtil.parse(phoneNr, country.countryCode),
@@ -61,7 +60,7 @@ export function JoinQueueForm({ joinQueueHandler, buttonText }) {
     }
   }
 
-  const handleClick = () => {
+  const onSubmit = () => {
     if (name === '') {
       setInvalidName(true);
       return;
@@ -82,7 +81,7 @@ export function JoinQueueForm({ joinQueueHandler, buttonText }) {
       <InputField
         placeholder="Name"
         value={name}
-        onKeyPress={(e) => handleEnterPress(e, handleClick)}
+        onKeyPress={(e) => handleEnterPress(e, onSubmit)}
         onChange={handleNameChange}
         error={invalidName}
         helperText={invalidName ? 'Enter a valid name' : ''}
@@ -101,10 +100,10 @@ export function JoinQueueForm({ joinQueueHandler, buttonText }) {
         }}
         isValid={() => (invalidContact ? 'Phone number is not valid' : true)}
         onChange={handleContactChange}
-        onKeyDown={(e) => handleEnterPress(e, handleClick)}
+        onKeyDown={(e) => handleEnterPress(e, onSubmit)}
       />
       <LoadingStatus dependsOn="joinQueue">
-        <Button onClick={handleClick}>{buttonText}</Button>
+        <Button onClick={onSubmit}>{buttonText}</Button>
       </LoadingStatus>
     </div>
   );