ordering-ui-admin-external 1.8.5 → 1.10.0

package/src/components/Delivery/DriversGroupDetails/index.js

@@ -54,24 +54,23 @@ const DriversGroupDetailsUI = (props) => {
     const _driversGroupMenus = !driversGroupState.driversGroup
       ? [
         { key: 'general', value: t('GENERAL', 'General') },
-        { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
-        { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
+        { key: 'businesses', value: t('BUSINESSES', 'Businesses') }
       ]
       : (useAdvanced && autoAssignType !== 'basic')
         ? [
           { key: 'general', value: t('GENERAL', 'General') },
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
           { key: 'advanced_logistics', value: t('ADVANCED_LOGISTICS', 'Advanced logistics') },
-          { key: 'logs', value: t('LOGS', 'Logs') },
-          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
+          { key: 'logs', value: t('LOGS', 'Logs') }
         ]
         : [
           { key: 'general', value: t('GENERAL', 'General') },
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
-          { key: 'logs', value: t('LOGS', 'Logs') },
-          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
+          { key: 'logs', value: t('LOGS', 'Logs') }
         ]
     setDriversGroupMenus(_driversGroupMenus)
   }, [useAdvanced])
@@ -181,7 +180,8 @@ const DriversGroupDetailsUI = (props) => {
           <DriversGroupLogs driversGroupId={driversGroupState.driversGroup?.id} />
         )}
         {showMenu === 'delivery_zones' && (
-          <DriverGroupDeliveryDetails {...props}
+          <DriverGroupDeliveryDetails
+            {...props}
             handleParentSidebarMove={handleParentSidebarMove}
             drivergroup={driversGroupState.driversGroup}
             setIsExtendExtraOpen={setIsExtendExtraOpen}

package/src/components/Delivery/DriversGroupsDeliveryZoneDetails/index.js

@@ -29,7 +29,7 @@ const DriverGroupDeliveryZoneDetailsUI = (props) => {
     handleAddDriverGroupDeliveryZone,
     handleDeleteDriverGroupDeliveryZone,
     handleUploadKmlFiles,
-    kmlData,
+    kmlData
   } = props
 
   const theme = useTheme()

package/src/components/Delivery/UsersList/index.js

@@ -267,6 +267,7 @@ export const UsersList = (props) => {
                 totalPages={paginationProps.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             </WrapperPagination>
           )}

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -50,7 +50,8 @@ const OrderingWebsiteUI = (props) => {
   const [ordering] = useApi()
 
   const logoRef = useRef(null)
-  const backgrooundRef = useRef(null)
+  const backgroundRef = useRef(null)
+  const mobileBackgroundRef = useRef(null)
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
@@ -63,7 +64,11 @@ const OrderingWebsiteUI = (props) => {
     }
 
     if (type === 'homepage_background') {
-      backgrooundRef.current.click()
+      backgroundRef.current.click()
+    }
+
+    if (type === 'homepage_mobile_background') {
+      mobileBackgroundRef.current.click()
     }
   }
 
@@ -304,7 +309,7 @@ const OrderingWebsiteUI = (props) => {
                   >
                     <ExamineClick
                       onFiles={files => handleFiles(files, 'homepage_background')}
-                      childRef={(e) => { backgrooundRef.current = e }}
+                      childRef={(e) => { backgroundRef.current = e }}
                       accept='image/png, image/jpeg, image/jpg'
                     >
                       <DragAndDrop
@@ -329,6 +334,43 @@ const OrderingWebsiteUI = (props) => {
                   </ImgInfoWrapper>
                 </ImageFormGroup>
               )}
+              {orderingTheme?.loading ? (
+                <>
+                  <Skeleton height={100} style={{ marginBottom: '15px', width: '100%' }} />
+                  <Skeleton height={15} count={3} width={150} style={{ display: 'block', marginBottom: '7px' }} />
+                </>
+              ) : (
+                <ImageFormGroup>
+                  <BackgroundImage
+                    onClick={() => handleClickImage('homepage_mobile_background')}
+                  >
+                    <ExamineClick
+                      onFiles={files => handleFiles(files, 'homepage_mobile_background')}
+                      childRef={(e) => { mobileBackgroundRef.current = e }}
+                      accept='image/png, image/jpeg, image/jpg'
+                    >
+                      <DragAndDrop
+                        onDrop={dataTransfer => handleFiles(dataTransfer.files, 'homepage_mobile_background')}
+                        accept='image/png, image/jpeg, image/jpg'
+                        disabled={orderingTheme.loading}
+                      >
+                        {themeValues?.images?.components?.homepage_mobile_background?.components?.image && <img src={themeValues?.images?.components?.homepage_mobile_background?.components?.image} alt='backgrond image' loading='lazy' />}
+                        <UploadImageIconContainer bgimage={!!themeValues?.images?.components?.homepage_mobile_background?.components?.image}>
+                          <UploadImageIcon>
+                            <DumyPhoto />
+                            <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>
+                          </UploadImageIcon>
+                        </UploadImageIconContainer>
+                      </DragAndDrop>
+                    </ExamineClick>
+                  </BackgroundImage>
+                  <ImgInfoWrapper>
+                    <h4>{t('HOMEPAGE_MOBILE_BACKGROUND', 'Homepage mobile background')}</h4>
+                    <p>1440 x 770 px</p>
+                    <p>{t('FORMAT', 'Format')}: PNG</p>
+                  </ImgInfoWrapper>
+                </ImageFormGroup>
+              )}
               {orderingTheme?.loading ? (
                 <Skeleton width={200} height={20} />
               ) : (

package/src/components/OrderingProducts/OrderingProductsListing/index.js

@@ -168,6 +168,7 @@ const OrderingProductsUI = (props) => {
                 totalPages={paginationProps?.totalPages}
                 handleChangePage={handleChangePage}
                 handleChangePageSize={handleChangePageSize}
+                defaultPageSize={paginationProps?.pageSize}
               />
             )}
           </PagesBottomContainer>

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

@@ -23,7 +23,7 @@ export const OrderBill = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const SPOT_DICTIONARY = {
     3: t('SPOT_NUMBER_EAT_IN', 'Table number'),
-    4: t('SPOT_NUMBER_CURBSIDE', 'Spor number'),
+    4: t('SPOT_NUMBER_CURBSIDE', 'Spot number'),
     5: t('SPOT_NUMBER_DRIVE_THRU', 'Drive thru lane')
   }
 
@@ -106,7 +106,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 1)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -153,7 +153,7 @@ export const OrderBill = (props) => {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
               <tr key={tax?.id}>
                 <td>
-                  {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replaceAll(' ', '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                 </td>
                 <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</td>
@@ -164,7 +164,7 @@ export const OrderBill = (props) => {
             order?.fees?.length > 0 && order?.fees?.filter(fee => !(fee?.fixed === 0 && fee?.percentage === 0))?.map(fee => (
               <tr key={fee.id}>
                 <td>
-                  {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase()?.replaceAll(' ', '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                 </td>
                 <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</td>
@@ -175,7 +175,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 3)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -196,7 +196,7 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -244,7 +244,7 @@ export const OrderBill = (props) => {
                 <td>
                   {event?.wallet_event
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
-                    : event?.paymethod?.name}
+                    : t(event?.paymethod?.name?.toUpperCase()?.replaceAll(' ', '_'), event?.paymethod?.name)}
                 </td>
                 <td>-{parsePrice(event?.amount, { currency: order?.currency })}</td>
               </tr>
@@ -252,20 +252,18 @@ export const OrderBill = (props) => {
           </tbody>
         </table>
       )}
-      {order?.delivery_option && (
-        <table className='delivery_option'>
-          <thead>
-            <tr>
-              <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>{order?.delivery_option?.name}</td>
-            </tr>
-          </tbody>
-        </table>
-      )}
+      <table className='delivery_option'>
+        <thead>
+          <tr>
+            <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{order?.delivery_option ? order?.delivery_option?.name : t('EITHER_WAY', 'Either way')}</td>
+          </tr>
+        </tbody>
+      </table>
       {order?.comment && (
         <table className='comments'>
           <tbody>
@@ -296,7 +294,7 @@ export const OrderBill = (props) => {
           <tbody>
             <tr>
               <td>{t('ORDER_VEHICLE_TYPE', 'Type')}</td>
-              <td>{order?.vehicle?.type}</td>
+              <td>{t(order?.vehicle?.type?.toUpperCase(), order?.vehicle?.type)}</td>
             </tr>
             <tr>
               <td>{t('ORDER_VEHICLE_MODEL', 'Model')}</td>

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

@@ -5,7 +5,7 @@ import {
   useSession
 } from 'ordering-components-admin-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import { IconButton, Button } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Sessions } from '../Sessions'
@@ -16,7 +16,9 @@ import {
   UserInfoContainer,
   UserImage,
   UserInfoWrapper,
-  ButtonsGroup
+  ButtonsGroup,
+  InfoWrapper,
+  InfoContent
 } from './styles'
 
 const ProfilePageUI = (props) => {
@@ -40,6 +42,18 @@ const ProfilePageUI = (props) => {
           </IconButton>
         )}
         <h1>{t('PROFILE', '')}</h1>
+        {user?.level === 8 && (
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('CONNTECT_PROFESSIONAL_ACCOUNT_INFO', 'Connect your Professional account with your Google account to synchronize the appointments with the Google calendar Application. Use the Google account button to start with the login process, do not forget to notify the admin to Complete the synchronization.')}
+            </InfoContent>
+          </InfoWrapper>
+        )}
       </HeaderContainer>
       <UserInfoContainer>
         <UserImage>

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
   flex: 1;
@@ -27,12 +27,19 @@ export const UserImage = styled.div`
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   width: 216px;
   height: 216px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
   }
+  svg {
+    width: 80%;
+    height: 80%;
+  }
 `
 export const UserInfoWrapper = styled.div`
   margin: 0 26px;
@@ -63,3 +70,62 @@ export const ButtonsGroup = styled.div`
     height: 44px;
   }
 `
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 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;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`

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

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, IconButton } from '../../../styles'
+import { DragScroll, Modal } from '../../Shared'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { XLg } from 'react-bootstrap-icons'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
+import {
+  Header,
+  AllSetting,
+  Description,
+  CategoryExtraContent,
+  Container,
+  DescriptionHeader,
+  HeaderIcons,
+  DeliverectContainer,
+  SettingListConatiner,
+  Tab,
+  GetStarted,
+  YoutubeVideoWrapper,
+  YoutubeVideoInner
+} from './styles'
+
+export const Deliverect = (props) => {
+  const {
+    onClose
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  const toggleMainContent = () => {
+    if (width <= 500) {
+      document.getElementById('catDescription').style.width = '100vw'
+    } else {
+      if ((settingsOpen) && width >= 1000) {
+        document.getElementById('catDescription').style.width = '1000px'
+      } else {
+        document.getElementById('catDescription').style.width = '500px'
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (width < 1000) return
+    if (settingsOpen) {
+      document.getElementById('catDescription').style.width = '1000px'
+    } else {
+      toggleMainContent()
+    }
+  }, [settingsOpen])
+
+  useEffect(() => {
+    toggleMainContent()
+  }, [width])
+
+  const LalaMoveConnectDescription = () => {
+    return (
+      <CategoryExtraContent>
+        <IconButton
+          color='black'
+          onClick={() => setSettingsOpen(false)}
+        >
+          <XLg />
+        </IconButton>
+        <div>
+          <Header>
+            <h1>{t('MORE_INFO', 'More Info')}</h1>
+          </Header>
+          <SettingListConatiner>
+            <DragScroll>
+              <Tab
+                active
+              >
+                {t('GENERAL', 'General')}
+              </Tab>
+            </DragScroll>
+          </SettingListConatiner>
+          <GetStarted>
+            <h2>{t('GET_STARTED_RIGHT_HERE', 'Get started right here')}</h2>
+            <p>{t('FILL_UP_THIS_FORM_TO_REQUEST_INFORMATION', 'Fill up this form to request more information')}</p>
+            <a href='https://share.hsforms.com/1uGzNQ71IS2KXCAFC0mTBCg3neff' target='_blank' rel='noopener noreferrer'>
+              <Button color='primary'>{t('SEND_FORM', 'Send Form')}</Button>
+            </a>
+          </GetStarted>
+          <YoutubeVideoWrapper>
+            <YoutubeVideoInner>
+              <iframe
+                title='youtube'
+                src='https://www.youtube.com/embed/_v8nPmW_E-0?playlist=_v8nPmW_E-0&loop=1'
+              />
+            </YoutubeVideoInner>
+          </YoutubeVideoWrapper>
+        </div>
+      </CategoryExtraContent>
+    )
+  }
+
+  return (
+    <Container
+      id='catDescription'
+    >
+      <DeliverectContainer>
+        <DescriptionHeader>
+          <HeaderIcons>
+            <IconButton
+              color='black'
+              onClick={onClose}
+            >
+              <XLg />
+            </IconButton>
+          </HeaderIcons>
+        </DescriptionHeader>
+        <Header>
+          <h1>{t('DELIVERECT', 'Deliverect')}</h1>
+          <Button color='lightPrimary'>{t('NEW', 'New')}</Button>
+        </Header>
+        <Description dangerouslySetInnerHTML={{ __html: t('SYNC_DEC_SECOND', 'Deliverect integrates all your <span>online orders</span> to your <span>existing POS</span> or our <span>Delivery Manger app.</span> Restaurants large and small rely on Deliverect to reduce failures and order mistakes while speeding up order preparation.') }} />
+        <AllSetting onClick={() => setSettingsOpen(true)}>
+          <span>{t('SETTINGS', 'All settings')}</span>
+          <BsArrowRight />
+        </AllSetting>
+      </DeliverectContainer>
+      {settingsOpen && (
+        <>
+          {width >= 1000 ? (
+            <LalaMoveConnectDescription />
+          ) : (
+            <>
+              <Modal
+                width='70%'
+                height='90vh'
+                open
+                padding='0px'
+                onClose={() => setSettingsOpen(false)}
+                hideCloseDefault
+              >
+                <LalaMoveConnectDescription />
+              </Modal>
+            </>
+          )}
+        </>
+      )}
+    </Container>
+  )
+}