ordering-ui-external 10.3.4 → 10.4.1

package/src/themes/five/src/components/WebsocketStatus/index.js

@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components-external'
+import { InfoCircle } from 'react-bootstrap-icons'
+import { Alert } from '../../../src/components/Confirm'
+import { Modal } from '../Modal'
+import { IconButton, Button } from '../../styles/Buttons'
+import {
+  Contatiner,
+  StatusContainer,
+  WebsocketStatusDot,
+  InfoWrapper,
+  InfoContent,
+  DetailContainer,
+  StatusItemWrapper,
+  ButtonsContainer,
+  ButtonWrapper
+} from './styles'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
+
+const SocketStatusUI = (props) => {
+  const {
+    socketStatus,
+    reconnectAttemptCount,
+    connectedDate
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [openModal, setOpenModal] = useState(false)
+  const windowSize = useWindowSize()
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+    window.location.reload()
+  }
+
+  useEffect(() => {
+    if (reconnectAttemptCount > 3) {
+      setAlertState({
+        open: true,
+        content: t('WEBSOCKET_CONNECT_ERROR', 'There appears to be an error in establishing the WebSocket connection. Please try reloading the page to resolve the issue.')
+      })
+    }
+  }, [reconnectAttemptCount])
+
+  return (
+    <Contatiner>
+      <InfoWrapper>
+        <IconButton
+          color='primary'
+        >
+          <InfoCircle />
+        </IconButton>
+        <InfoContent>
+          {t('WEBSOCKET_STATUS_APP_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh your app and update the status as well. Need help? Contact our Customer support team here:')}
+          <a href='https://www.ordering.co/contact-ordering' target='_blank' rel='noopener noreferrer'>{t('CUSTOMER_SUPPORT', 'Customer support')}</a>
+        </InfoContent>
+      </InfoWrapper>
+      <ButtonWrapper>
+        <Button
+          borderRadius='8px'
+          color='secundary'
+          onClick={() => setOpenModal(true)}
+        >
+          <StatusContainer>
+            <span>{t('CONNECTION_STATUS', 'Connection status')}</span>
+            <WebsocketStatusDot
+              status={socketStatus}
+            />
+          </StatusContainer>
+        </Button>
+      </ButtonWrapper>
+      <Modal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        width='500px'
+        title={t('CONNECTION_STATUS', 'Connection status')}
+      >
+        <DetailContainer>
+          <p>{t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}</p>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={1} />
+              <span>{t('OK', 'Ok')}</span>
+            </div>
+            <p>{t('WEBSOCKET_OK', 'The websocket works normally.')}</p>
+          </StatusItemWrapper>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={0} />
+              <span>{t('CONNECTING', 'Connecting')}</span>
+            </div>
+            <p>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</p>
+          </StatusItemWrapper>
+          <StatusItemWrapper>
+            <div>
+              <WebsocketStatusDot status={2} />
+              <span>{t('DISCONNECTED', 'Disconnected')}</span>
+            </div>
+            <p>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</p>
+          </StatusItemWrapper>
+          <ButtonsContainer>
+            <Button
+              color='secundary'
+              onClick={() => setOpenModal(false)}
+            >
+              {t('CLOSE', 'Close')}
+            </Button>
+            <Button
+              color='primary'
+              onClick={() => window.location.reload()}
+            >
+              {t('UPDATE', 'Update')}
+            </Button>
+          </ButtonsContainer>
+        </DetailContainer>
+      </Modal>
+
+      <Alert
+        title={t('ERROR', 'Error')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </Contatiner>
+  )
+}
+
+export const WebsocketStatus = (props) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

package/src/themes/five/src/components/WebsocketStatus/styles.js

@@ -0,0 +1,184 @@
+import styled, { css } from 'styled-components'
+
+export const Contatiner = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  > button {
+    height: 41px;
+  }
+  justify-content: flex-end;
+  margin-right: 10px;
+  margin-bottom: 10px;
+`
+
+export const StatusContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  > span:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 6px;
+    ` : css`
+      margin-right: 6px;
+    `}
+  }
+`
+
+export const WebsocketStatusDot = styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+
+  ${({ status }) => status === 0 && css`
+    background-color: #FF9922;
+  `}
+  ${({ status }) => status === 1 && css`
+    background-color: #00D27A;
+  `}
+  ${({ status }) => status === 2 && css`
+    background-color: #E63757;
+  `}
+`
+export const DateWrapper = styled.div`
+  font-size: 12px;
+  text-align: center;
+`
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 4px;
+  ` : css`
+    margin-right: 4px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  bottom: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  /* display: none; */
+  color: ${props => props.theme?.colors?.darkTextColor};
+  left: -100px;
+    ${props => props.theme.rtl && css`
+      right: -100px;
+      left: initial;
+    `}
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    transition: all 0.3s linear;
+    cursor: pointer;
+    margin-left: 5px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 5px;
+    `}
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: -200px;
+    ${props => props.theme.rtl && css`
+      right: -200px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+    left: -330px;
+    ${props => props.theme.rtl && css`
+      right: -330px;
+      left: initial;
+    `}
+  }
+
+`
+export const DetailContainer = styled.div`
+  margin-top: 10px;
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  > p {
+    font-size: 14px;
+  }
+`
+export const StatusItemWrapper = styled.div`
+  > div {
+    display: flex;
+    align-items: center;
+
+    > span:first-child {
+      margin: 0 16px;
+    }
+  }
+  p {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.lightGray};
+
+    ${props => props.theme?.rtl ? css`
+      margin-right: 40px;
+    ` : css`
+      margin-left: 40px;
+    `}
+  }
+`
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 40px;
+
+  > button {
+    border-radius: 8px;
+    height: 40px;
+    &:last-child {
+      margin: 0 10px;
+    }
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  button{
+    height: 41px;
+      width: 175px;
+      width: 175px;
+    width: 175px;
+  }
+
+`

package/src/themes/five/src/styles/Buttons/index.js

@@ -1,6 +1,70 @@
 import styled, { css } from 'styled-components'
 import { darken } from 'polished'
 
+export const IconButton = styled.button`
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  height: 32px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .2s ease-in;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  > svg {
+    width: 20px;
+    height: 20px;
+    color: #B1BCCC;
+  }
+
+  &:hover {
+    background-color: #1507260a;
+
+    > svg {
+      color:  #151b26;
+    }
+  }
+
+  &:active {
+    background-color: #1507261a;
+  }
+
+  ${({ color }) => color === 'black' && css`
+    > svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+    &:hover {
+      background-color: ${props => props.theme.colors.secundary};
+    }
+    &:active {
+      background-color: ${props => props.theme.colors.secundaryDarkContrast};
+    }
+
+    ${({ active }) => active && css`
+      background-color: ${props => props.theme.colors.secundaryDarkContrast};
+    `}
+  `}
+
+  ${({ color }) => color === 'primary' && css`
+    > svg {
+      color: ${props => props.theme.colors.primary};
+    }
+    &:hover {
+      background-color: #1507260a;
+      > svg {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+  `}
+  ${({ isDisabled }) => isDisabled && css`
+    pointer-events: none;
+  `}
+`
+
 export const Button = styled.button`
   background: #CCC;
   color: #FFF;
@@ -21,6 +85,9 @@ export const Button = styled.button`
     opacity: 0.5;
     cursor: not-allowed;
   }
+  ${({ width }) => width && css`
+    width: ${width};
+  `}
   ${({ bgtransparent }) => bgtransparent && css`
       background: transparent !important;
       &:hover {

package/template/pages/BusinessProductsList/index.js

@@ -136,7 +136,8 @@ export const BusinessProductsList = (props) => {
       'whatsapp_number',
       'snapchat_profile',
       'previously_products',
-      'configs'
+      'configs',
+      'previously_products'
     ],
     handleSearchRedirect: () => {
       events.emit('go_to_page', { page: 'search' })

package/template/theme.json

@@ -42,7 +42,8 @@
     "success500": "#00D27A",
     "secondaryDark": "#414954",
     "black": "#000000",
-    "white": "#FFFFFF"
+    "white": "#FFFFFF",
+    "backgroundInfo": "#F5F9FF"
   },
   "defaultLanguages": {
     "QUESTION_CLEAR_CUSTOMER": "Are you sure that you want to clear the customer?",