ordering-ui-admin-external 1.6.1 → 1.6.3

package/src/components/Orders/OrdersManager/index.js

@@ -166,7 +166,7 @@ const OrdersManagerUI = (props) => {
         <OrdersContentHeader
           isDisableTitle={isSelectedOrders}
           isDisableControl={isSelectedOrders}
-          title={t('ORDERS_MANAGER', 'Orders manager')}
+          title={t('ORDERS_LIST', 'Orders list')}
           searchValue={searchValue}
           driverGroupList={driverGroupList}
           driversList={driversList}
@@ -252,6 +252,7 @@ const OrdersManagerUI = (props) => {
           isTourFlag={isTourFlag}
           setIsTourFlag={setIsTourFlag}
           setIsTourOpen={setIsTourOpen}
+          drivers={driversList.drivers}
         />
       )}
 

package/src/components/Profile/ProfilePage/index.js

@@ -8,6 +8,7 @@ import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { IconButton, Button } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { Sessions } from '../Sessions'
 
 import {
   Container,
@@ -66,6 +67,7 @@ const ProfilePageUI = (props) => {
           </ButtonsGroup>
         </UserInfoWrapper>
       </UserInfoContainer>
+      <Sessions />
     </Container>
   )
 }

package/src/components/Profile/ProfilePage/styles.js

@@ -20,6 +20,7 @@ export const HeaderContainer = styled.div`
 export const UserInfoContainer = styled.div`
   padding-top: 30px;
   display: flex;
+  margin-bottom: 40px;
 `
 export const UserImage = styled.div`
   border-radius: 8px;
@@ -29,7 +30,7 @@ export const UserImage = styled.div`
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
     border-radius: 8px;
   }
 `

package/src/components/Profile/Sessions/index.js

@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import moment from 'moment'
+import { Button } from '../../../styles'
+import { Confirm, Alert, Modal } from '../../Shared'
+import { X as Close, ArrowRight } from 'react-bootstrap-icons'
+import {
+  Container,
+  NoSessionsContainer,
+  NoMessage,
+  SessionItem,
+  SessionsWrapper,
+  DurationWrapper,
+  SeessionDelete,
+  MoreInfoWrapper,
+  ButtonsGroup,
+  ButtonGroupWrapper
+} from './styles'
+
+export const SessionsUI = (props) => {
+  const {
+    sessionsList,
+    actionState,
+    handleDeleteSession,
+    handleDeleteAllSessions
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ parseDate }] = useUtils()
+
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isMoreInfo, setIsMoreInfo] = useState(false)
+
+  const onDeleteSession = (session) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_SESSION', 'Are you sure to delete this session?'),
+      handleOnAccept: () => {
+        handleDeleteSession(session)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const onDeleteAllSessions = (isOldUser, deleteCurrent) => {
+    setConfirm({
+      open: true,
+      content:
+        isOldUser
+          ? t('QUESTION_ENABLE_ALL_SESSIONS', 'Are you sure to enable all sessions?')
+          : deleteCurrent
+            ? t('QUESTION_DELETE_ALL_SESSIONS', 'Are you sure that you want to delete all sessions?')
+            : t('QUESTION_DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Are you sure that you want to delete all sessions except current?'),
+      handleOnAccept: () => {
+        handleDeleteAllSessions(deleteCurrent)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (actionState.error) {
+      setAlertState({
+        open: true,
+        content: actionState.error
+      })
+    }
+  }, [actionState.error])
+
+  return (
+    <>
+      <Container>
+        <h2>{t('SESSIONS', 'Sessions')}</h2>
+        {user?.session_strategy === 'jwt_session' ? (
+          <>
+            {sessionsList.loading ? (
+              [...Array(5).keys()].map(i => (
+                <SessionItem key={i}>
+                  <Skeleton width={200} height={16} />
+                  <Skeleton width={16} height={16} />
+                </SessionItem>
+              ))
+            ) : (
+              sessionsList.sessions.length > 0 ? (
+                <SessionsWrapper>
+                  {sessionsList.sessions.sort((a, b) => moment(b?.created_at).valueOf() - moment(a?.created_at).valueOf()).slice(0, 2).map(session => (
+                    <SessionItem key={session.id}>
+                      <DurationWrapper>
+                        <p>{parseDate(session.created_at, { outputFormat: 'MM/DD/YY · hh:mm A' })}</p>
+                        <span>-</span>
+                        <p>{parseDate(session.valid_thru, { outputFormat: 'MM/DD/YY · hh:mm A' })}</p>
+                      </DurationWrapper>
+                      {session.current && (
+                        <p className='current'>({t('CURRENT', 'Current')})</p>
+                      )}
+                      <SeessionDelete
+                        onClick={() => onDeleteSession(session)}
+                      >
+                        <Close />
+                      </SeessionDelete>
+                    </SessionItem>
+                  ))}
+                  <MoreInfoWrapper>
+                    <span onClick={() => setIsMoreInfo(true)}>
+                      {t('MORE_INFO', 'More info')}
+                      <ArrowRight />
+                    </span>
+                  </MoreInfoWrapper>
+                  <ButtonGroupWrapper>
+                    <ButtonsGroup>
+                      <Button
+                        color='primary'
+                        disabled={actionState.loading}
+                        onClick={() => onDeleteAllSessions(false, true)}
+                      >
+                        {t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
+                      </Button>
+                      <Button
+                        color='primary'
+                        disabled={actionState.loading}
+                        onClick={() => onDeleteAllSessions(false, false)}
+                      >
+                        {t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
+                      </Button>
+                    </ButtonsGroup>
+                  </ButtonGroupWrapper>
+                </SessionsWrapper>
+              ) : (
+                <NoMessage>
+                  {t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}
+                </NoMessage>
+              )
+            )}
+          </>
+        ) : (
+          <NoSessionsContainer>
+            <NoMessage>
+              {t('YOU_DONT_HAVE_ENABLED_THE_SESSIONS', 'You don\'t have enabled the sessions, please active them to have a better control of your sessions.')}
+            </NoMessage>
+            <Button
+              color='primary'
+              onClick={() => onDeleteAllSessions(true, false)}
+            >
+              {t('ACTIVE_SESSIONS', 'Active sessions')}
+            </Button>
+          </NoSessionsContainer>
+        )}
+      </Container>
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        width='760px'
+        height='80vh'
+        padding='30px 24px'
+        title={t('SESSIONS', 'Sessions')}
+        open={isMoreInfo}
+        onClose={() => setIsMoreInfo(false)}
+      >
+        <>
+          {sessionsList.sessions.sort((a, b) => moment(b?.created_at).valueOf() - moment(a?.created_at).valueOf()).map(session => (
+            <SessionItem key={session.id}>
+              <DurationWrapper>
+                <p>{parseDate(session.created_at)}</p>
+                <span>-</span>
+                <p>{parseDate(session.valid_thru)}</p>
+              </DurationWrapper>
+              {session.current && (
+                <p className='current'>({t('CURRENT', 'Current')})</p>
+              )}
+              <SeessionDelete
+                onClick={() => onDeleteSession(session)}
+              >
+                <Close />
+              </SeessionDelete>
+            </SessionItem>
+          ))}
+        </>
+      </Modal>
+    </>
+  )
+}
+
+export const Sessions = (props) => {
+  const sessionsProps = {
+    ...props,
+    UIComponent: SessionsUI
+  }
+  return <SessionsController {...sessionsProps} />
+}

package/src/components/Profile/Sessions/styles.js

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  border: 1px solid ${props => props.theme.colors.secundaryDarkContrast};
+  border-radius: 8px;
+  padding: 18px 24px;
+
+  > h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  }
+`
+
+export const NoSessionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > button {
+    height: 44px;
+    border-radius: 8px;
+  }
+`
+
+export const NoMessage = styled.p`
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+`
+
+export const SessionItem = styled.div`
+  display: flex;
+  padding: 18px 0px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  
+  > p.current {
+    flex: 1;
+    font-weight: 700;
+    font-size: 14px;
+    margin: 0 15px;
+  }
+`
+
+export const MoreInfoWrapper = styled.div`
+  span {
+    display: flex;
+    align-items: center;
+    color: ${props => props.theme.colors.primary};
+    height: 24px;
+    padding: 0px;
+    border-radius: 0px;
+    margin-top: 18px;
+    cursor: pointer;
+    text-transform: capitalize;
+    font-size: 14px;
+    svg {
+      margin-left: 10px;
+      ${props => props.theme.rtl && css`
+        margin-right: 10px;
+        margin-left: 0px;
+      `}
+    }
+  }
+`
+
+export const SessionsWrapper = styled.div``
+
+export const DurationWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+  > span {
+    display: none;
+    margin: 0 10px;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    > span {
+      display: block;
+    }
+  }
+`
+
+export const SeessionDelete = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 3px;
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+  }
+  &:hover {
+    background-color: ${props => props.theme.colors.secundary};
+  }
+`
+
+export const ButtonGroupWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const ButtonsGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+
+  > button {
+    height: 44px;
+    margin: 10px 0;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+`

package/src/components/Profile/index.js

@@ -1,5 +1,7 @@
 import { ProfilePage } from './ProfilePage'
+import { Sessions } from './Sessions'
 
 export {
-  ProfilePage
+  ProfilePage,
+  Sessions
 }

package/src/components/Settings/EmailSetting/index.js

@@ -45,7 +45,6 @@ const EmailSettingUI = (props) => {
   const [superAdmin, setSuperAdmin] = useState(null)
   const [business, setBusiness] = useState(null)
   const [customer, setCustomer] = useState(null)
-  const [cityManager, setCityManager] = useState(null)
 
   const closeAlert = () => {
     setAlertState({
@@ -60,12 +59,10 @@ const EmailSettingUI = (props) => {
     const _superAdmin = configs.find(config => config.key === 'email_superadmin_states')
     const _business = configs.find(config => config.key === 'email_business_states')
     const _customer = configs.find(config => config.key === 'email_customer_states')
-    const _cityManager = configs.find(config => config.key === 'email_city_manager_states')
     setGeneral([..._general])
     setSuperAdmin({ ..._superAdmin })
     setBusiness({ ..._business })
     setCustomer({ ..._customer })
-    setCityManager({ ..._cityManager })
   }, [configs])
 
   useEffect(() => {
@@ -208,35 +205,6 @@ const EmailSettingUI = (props) => {
               }
             </CheckBoxWrapper>
           </Accordion.Collapse>
-          <ContextAwareToggle eventKey='4' as='div'>
-            <AccordionTitle>{t('CITY_MANAGER', 'City manager')}</AccordionTitle>
-          </ContextAwareToggle>
-          <Accordion.Collapse eventKey='4'>
-            <CheckBoxWrapper>
-              {cityManager?.description && <p>{cityManager?.description}</p>}
-              {
-                cityManager?.options?.length > 0 && cityManager?.options?.map((item, j) => (
-                  <FormGroupWrapper key={j}>
-                    <FormGroupCheck className='checkbox'>
-                      <label>
-                        <input
-                          type='checkbox'
-                          name={item?.value}
-                          data-id={cityManager?.id}
-                          defaultChecked={cityManager?.value.split('|').includes(item?.value)}
-                          onChange={(e) => handleCheckBoxChange(e, true, cityManager?.value)}
-                        />
-                        {item.text}
-                      </label>
-                    </FormGroupCheck>
-                  </FormGroupWrapper>
-                ))
-              }
-              {
-                !cityManager?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
-              }
-            </CheckBoxWrapper>
-          </Accordion.Collapse>
         </Accordion>
         {
           settingsState?.changes?.length > 0 && (

package/src/components/Settings/PageForm/index.js

@@ -162,6 +162,9 @@ const PageFormUI = (props) => {
               defaultValue={formState.changes?.slug ?? pageState.page?.slug ?? ''}
               onChange={e => handleChangeFormState('slug', e.target.value.replace(/\s/g, ''))}
               placeholder={t('Slug', 'Slug')}
+              onKeyPress={e => {
+                if (e.which === 32) { e.preventDefault() }
+              }}
             />
           </InputWrapper>
         </InputGroup>

package/src/components/Settings/Settings/index.js

@@ -11,8 +11,6 @@ import { SideBar } from '../../Shared'
 import { CheckoutFieldsSetting } from '../CheckoutFieldsSetting'
 import { AddressFieldsSetting } from '../AddressFieldsSetting'
 import { LanguageSetting } from '../LanguageSetting'
-import { SitesAuthSettings } from '../SitesAuthSettings'
-import { MultiCountrySettings } from '../MultiCountrySettings'
 
 import {
   BasicSettingsContainer,
@@ -40,9 +38,6 @@ const SettingsUI = (props) => {
   const [isOpenDescription, setIsOpenDescription] = useState(false)
   const [selectedCategory, setSelectedCategory] = useState(null)
   const [isOpenSettingDetails, setIsOpenSettingDetails] = useState(null)
-  const [openSitesAuthSettings, setOpenSitesAuthSettings] = useState(false)
-  const [openMultiCountrySettings, setOpenMultiCountrySettings] = useState(false)
-  const [moveDistance, setMoveDistance] = useState(0)
 
   let category
 
@@ -75,8 +70,6 @@ const SettingsUI = (props) => {
 
   const handleOpenDescription = (category) => {
     setIsOpenSettingDetails(null)
-    setOpenSitesAuthSettings(false)
-    setOpenMultiCountrySettings(false)
     setIsOpenDescription(true)
     setSelectedCategory(category)
     onBasicSettingsRedirect({ category: category?.id })
@@ -85,8 +78,6 @@ const SettingsUI = (props) => {
 
   const handleOpenSettingDetails = (item) => {
     setIsOpenDescription(false)
-    setOpenSitesAuthSettings(false)
-    setOpenMultiCountrySettings(false)
     setSelectedCategory(null)
     setIsOpenSettingDetails(item)
   }
@@ -181,36 +172,6 @@ const SettingsUI = (props) => {
                   active={isOpenSettingDetails === 'address'}
                 />
               </SettingItemWrapper>
-              <SettingItemWrapper
-                className='col-md-4 col-sm-6'
-                onClick={() => {
-                  setIsOpenDescription(false)
-                  setIsOpenSettingDetails(null)
-                  setOpenSitesAuthSettings(true)
-                }}
-              >
-                <SettingItemUI
-                  title={t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')}
-                  description={t('SITES_LOGIN_SIGNUP_SETTINGS_DESC', 'Advanced sites login/sign up settings')}
-                  icon={<GearFill />}
-                  active={openSitesAuthSettings}
-                />
-              </SettingItemWrapper>
-              <SettingItemWrapper
-                className='col-md-4 col-sm-6'
-                onClick={() => {
-                  setIsOpenDescription(false)
-                  setIsOpenSettingDetails(null)
-                  setOpenMultiCountrySettings(true)
-                }}
-              >
-                <SettingItemUI
-                  title={t('MULTI_COUNTRY_SETTINGS', 'Multi country settings')}
-                  description={t('MULTI_COUNTRY_SETTINGS_DESC', 'Settings according country')}
-                  icon={<GearFill />}
-                  active={openMultiCountrySettings}
-                />
-              </SettingItemWrapper>
             </>
           )}
           {
@@ -259,32 +220,6 @@ const SettingsUI = (props) => {
           />
         )
       }
-      {openSitesAuthSettings && (
-        <SideBar
-          defaultSideBarWidth={500 + moveDistance}
-          moveDistance={moveDistance}
-          open={openSitesAuthSettings}
-          onClose={() => {
-            setMoveDistance(0)
-            setOpenSitesAuthSettings(false)
-          }}
-        >
-          <SitesAuthSettings setMoveDistance={setMoveDistance} />
-        </SideBar>
-      )}
-      {openMultiCountrySettings && (
-        <SideBar
-          defaultSideBarWidth={500 + moveDistance}
-          moveDistance={moveDistance}
-          open={openMultiCountrySettings}
-          onClose={() => {
-            setMoveDistance(0)
-            setOpenMultiCountrySettings(false)
-          }}
-        >
-          <MultiCountrySettings setMoveDistance={setMoveDistance} />
-        </SideBar>
-      )}
       {
         isOpenSettingDetails && (
           <SideBar

package/src/components/Shared/CitySelector/index.js

@@ -10,6 +10,7 @@ import {
 
 const CitySelectorUI = (props) => {
   const {
+    isAddMode,
     citiesList,
     isDefault,
     filterValues,
@@ -35,6 +36,13 @@ const CitySelectorUI = (props) => {
     setCityOptions(_cityOptions)
   }, [citiesList, isDefault])
 
+  useEffect(() => {
+    if (!isAddMode) return
+    if (cityOptions.length === 1) {
+      handleChangeCity(citiesList?.cities[0]?.id)
+    }
+  }, [cityOptions, isAddMode])
+
   return (
     <>
       {citiesList?.loading ? (

package/src/components/Shared/Modal/index.js

@@ -7,7 +7,8 @@ import {
   ModalActions,
   ModalTitle,
   ModalIcon,
-  ModalHeader
+  ModalHeader,
+  ModalDialogInnerContainer
 } from './styles'
 
 const ModalUI = (props) => {
@@ -41,33 +42,38 @@ const ModalUI = (props) => {
       className={`popup-dialog ${className || ''}`}
       height={props.height}
       width={props.width}
-      padding={props.padding}
-      overflow={props.overflow}
-      isTransparent={isTransparent}
     >
-      {!hideCloseDefault && (
-        <ModalIcon className='modal-close-icon'>
-          <IconButton
-            color='black'
-            onClick={() => onClose()}
-          >
-            <XLg />
-          </IconButton>
-        </ModalIcon>
-      )}
-      <ModalHeader>
-        {title && (
-          <ModalTitle>
-            {title}
-          </ModalTitle>
+      <ModalDialogInnerContainer
+        padding={props.padding}
+        isTransparent={isTransparent}
+        overflow={props.overflow}
+        className='dialog-inner'
+      >
+        {!hideCloseDefault && (
+          <ModalIcon className='modal-close-icon'>
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </ModalIcon>
         )}
-      </ModalHeader>
-      {children}
-      {(onCancel || onAccept) && (
-        <ModalActions>
-          {onAccept && <Button color='darkBlue' onClick={() => onAccept()}>{acceptText || t('ACCEPT')}</Button>}
-          {onCancel && <Button color='primary' onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
-        </ModalActions>)}
+        <ModalHeader>
+          {title && (
+            <ModalTitle>
+              {title}
+            </ModalTitle>
+          )}
+        </ModalHeader>
+        {children}
+        {(onCancel || onAccept) && (
+          <ModalActions>
+            {onAccept && <Button color='darkBlue' onClick={() => onAccept()}>{acceptText || t('ACCEPT')}</Button>}
+            {onCancel && <Button color='primary' onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
+          </ModalActions>)}
+      </ModalDialogInnerContainer>
+      
     </ModalDialog>
   )
 }