ordering-ui-admin-external 1.24.2 → 1.25.0

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

@@ -157,11 +157,11 @@ export const OrdersTable = (props) => {
     return finalTaget
   }
 
-  const getStatusClassName = (minutes) => {
-    if (isNaN(Number(minutes))) return 'in_time'
-    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
-    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
-  }
+  // const getStatusClassName = (minutes) => {
+  //   if (isNaN(Number(minutes))) return 'in_time'
+  //   const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+  //   return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  // }
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -611,7 +611,7 @@ export const OrdersTable = (props) => {
                 className={parseInt(orderDetailId) === order.id ? 'active' : ''}
                 onClick={(e) => handleClickOrder(order, e)}
                 data-tour={i === 0 ? 'tour_start' : ''}
-                data-status={isEnabledRowInColor && getStatusClassName(getDelayMinutes(order))}
+                data-status={isEnabledRowInColor && order?.time_status}
               >
                 <tr>
                   {Object.keys(allowColumns).filter(col => allowColumns[col]?.visable)
@@ -621,7 +621,7 @@ export const OrdersTable = (props) => {
                         return (
                           <td key={`slaBar${i}-${index}`}>
                             <Timestatus
-                              timeState={getStatusClassName(getDelayMinutes(order))}
+                              timeState={order?.time_status}
                             />
                           </td>
                         )
@@ -807,7 +807,7 @@ export const OrdersTable = (props) => {
                           <td className='timer' key={`timer${i}-${index}`}>
                             <Timer>
                               <p className='bold'>{t('TIMER', 'Timer')}</p>
-                              <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
+                              <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                             </Timer>
                           </td>
                         )

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, PagesList as PagesListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
-import { Button, IconButton, Switch } from '../../../styles'
+import { Button, IconButton, Switch, LinkButton } from '../../../styles'
 import { Modal, Pagination, SearchBar } from '../../Shared'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
@@ -20,8 +20,7 @@ import {
   ActionsContainer,
   EnableWrapper,
   ActionSelectorWrapper,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 const CmsUI = (props) => {
@@ -187,9 +186,9 @@ const CmsUI = (props) => {
         </PageListTable>
         {!pagesListState.loading && (
           <PagesBottomContainer>
-            <AddNewPageButton onClick={() => handleEditPage(null)}>
+            <LinkButton onClick={() => handleEditPage(null)}>
               {t('ADD_NEW_STATIC_PAGE', 'Add new static page')}
-            </AddNewPageButton>
+            </LinkButton>
             {currentPages?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

package/src/components/Settings/Cms/styles.js

@@ -208,9 +208,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0 38px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.primary};
-`

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

@@ -6,7 +6,7 @@ import { Pagination, SideBar, Confirm } from '../../Shared'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { CountryDetails } from '../CountryDetails'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
@@ -19,8 +19,7 @@ import {
   CountryWrapper,
   CheckboxWrapper,
   CountryName,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 export const CountriesList = (props) => {
@@ -223,14 +222,14 @@ export const CountriesList = (props) => {
 
       {!countriesState.loading && (
         <PagesBottomContainer>
-          <AddNewPageButton
+          <LinkButton
             onClick={() => {
               setSelectedCountry(null)
               setOpenDetails(true)
             }}
           >
             {t('ADD_NEW_COUNTRY ', 'Add new country')}
-          </AddNewPageButton>
+          </LinkButton>
           {currentCountries?.length > 0 && (
             <Pagination
               currentPage={currentPage}

package/src/components/Settings/CountriesList/styles.js

@@ -159,9 +159,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0 38px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`

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

@@ -7,7 +7,7 @@ import { useTheme } from 'styled-components'
 import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { CitySelector, Confirm, Pagination, SideBar } from '../../Shared'
 import { CountrySelector } from '../CountrySelector'
 import { ZoneDropdownDetails } from '../ZoneDropdownDetails'
@@ -22,8 +22,7 @@ import {
   CityName,
   CountryName,
   CheckboxWrapper,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 export const DropdownOptionList = (props) => {
@@ -237,11 +236,11 @@ export const DropdownOptionList = (props) => {
 
         {!dropdownOptionsState.loading && (
           <PagesBottomContainer>
-            <AddNewPageButton
+            <LinkButton
               onClick={() => handleOpenZoneDropdownDetails(null)}
             >
               {t('ADD_NEW_ZONE_DROPDOWN ', 'Add new zone dropdown')}
-            </AddNewPageButton>
+            </LinkButton>
             {currentDropdownOptions?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

package/src/components/Settings/DropdownOptionList/styles.js

@@ -222,9 +222,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`

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

@@ -2,14 +2,14 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useLanguage, LanguageTransTable as LanguageTransTableController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, Pagination } from '../../Shared'
+import { LinkButton } from '../../../styles'
 
 import {
   TranslationTableContainer,
   TranslationTable,
   TableHeader,
   TableBody,
-  TransBottomContainer,
-  AddNewTransButton
+  TransBottomContainer
 } from './styles'
 
 const LanguageTransTableUI = (props) => {
@@ -183,9 +183,9 @@ const LanguageTransTableUI = (props) => {
         </TranslationTable>
         {!translationList.loading && (
           <TransBottomContainer>
-            <AddNewTransButton onClick={() => setIsShowCreation(true)}>
+            <LinkButton onClick={() => setIsShowCreation(true)}>
               {t('ADD_NEW_KEY', 'Add new key')}
-            </AddNewTransButton>
+            </LinkButton>
             {currentPages?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

package/src/components/Settings/LanguageTransTable/styles.js

@@ -77,9 +77,3 @@ export const TransBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0 38px 0;
 `
-
-export const AddNewTransButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.primary};
-`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, PlaceList as PlaceListController } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { Button, IconButton, Switch } from '../../../styles'
+import { Button, IconButton, Switch, LinkButton } from '../../../styles'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -32,8 +32,7 @@ import {
   CityAdministrator,
   CountryName,
   CheckboxWrapper,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 const PlaceListingUI = (props) => {
@@ -401,11 +400,11 @@ const PlaceListingUI = (props) => {
 
             {!countriesState.loading && (
               <PagesBottomContainer>
-                <AddNewPageButton
+                <LinkButton
                   onClick={() => handleOpenCityDetails(null)}
                 >
                   {t('ADD_NEW_CITY', 'Add new city')}
-                </AddNewPageButton>
+                </LinkButton>
                 {currentCities?.length > 0 && (
                   <Pagination
                     currentPage={currentPage}

package/src/components/Settings/PlaceListing/styles.js

@@ -327,9 +327,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`

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

@@ -33,7 +33,7 @@ export const SettingsListUI = (props) => {
     saveConfig
   } = props
 
-  const settingsNotAllowed = ['guest_checkout_enabled', 'allowed_order_types_guest_checkout']
+  const settingsNotAllowed = ['']
 
   const [, t] = useLanguage()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -145,51 +145,51 @@ export const SettingsListUI = (props) => {
                 {
                   configs.length > 0 && configs.map((config, i) => (
                     !settingsNotAllowed.includes(config.key) && (
-                      <div key={i}>
-                        {
-                          config.type === 1 && (
-                            <FormGroupText className='form-group'>
-                              <label>{config?.name}</label>
-                              {config?.description && <Description>{config?.description}</Description>}
-                              <input
-                                type='text'
-                                value={config?.value}
-                                onChange={(e) => handleInputChange(e.target.value, config?.id)}
-                                onKeyPress={(e) => handleKeyPress(e, config?.key)}
-                                className='form-control'
-                                placeholder={config?.name}
-                              />
-                            </FormGroupText>
-                          )
-                        }
-                        {
-                          config.type === 2 && (
-                            config.key === 'country_autocomplete' ? (
-                              <SettingsCountryFilter
-                                defaultValue={config?.value}
-                                handleSelectChange={(value) => handleInputChange(value, config?.id)}
-                                label={config?.name}
-                                description={config?.description}
-                              />
-                            ) : (
-                              <SettingsSelectUI
-                                config={config}
-                                defaultValue={config?.value}
-                                handleSelectChange={(value) => handleInputChange(value, config?.id)}
-                              />
-                            )
+                    <div key={i}>
+                      {
+                        config.type === 1 && (
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            {config?.description && <Description>{config?.description}</Description>}
+                            <input
+                              type='text'
+                              value={config?.value}
+                              onChange={(e) => handleInputChange(e.target.value, config?.id)}
+                              onKeyPress={(e) => handleKeyPress(e, config?.key)}
+                              className='form-control'
+                              placeholder={config?.name}
+                            />
+                          </FormGroupText>
+                        )
+                      }
+                      {
+                        config.type === 2 && (
+                          config.key === 'country_autocomplete' ? (
+                            <SettingsCountryFilter
+                              defaultValue={config?.value}
+                              handleSelectChange={(value) => handleInputChange(value, config?.id)}
+                              label={config?.name}
+                              description={config?.description}
+                            />
+                          ) : (
+                            <SettingsSelectUI
+                              config={config}
+                              defaultValue={config?.value}
+                              handleSelectChange={(value) => handleInputChange(value, config?.id)}
+                            />
                           )
-                        }
-                        {
-                          config.type === 3 && (
-                            <CheckBoxWrapper>
-                              {config?.name && (
-                                <label>{config?.name}</label>
-                              )}
-                              {config?.description && (
-                                <p>{config?.description}</p>
-                              )}
-                              {
+                        )
+                      }
+                      {
+                        config.type === 3 && (
+                          <CheckBoxWrapper>
+                            {config?.name && (
+                              <label>{config?.name}</label>
+                            )}
+                            {config?.description && (
+                              <p>{config?.description}</p>
+                            )}
+                            {
                               config?.options?.length > 0 && config?.options?.map((item, j) => (
                                 <FormGroupWrapper key={j}>
                                   <FormGroupCheck className='checkbox'>
@@ -206,36 +206,36 @@ export const SettingsListUI = (props) => {
                                   </FormGroupCheck>
                                 </FormGroupWrapper>
                               ))
-                              }
-                              {
-                                !config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
-                              }
-                            </CheckBoxWrapper>
-                          )
-                        }
-                        {
-                          config.type === 4 && (
-                            config.key === 'driver_tip_options' ? (
-                              <FormGroupText className='form-group'>
+                            }
+                            {
+                              !config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>
+                            }
+                          </CheckBoxWrapper>
+                        )
+                      }
+                      {
+                        config.type === 4 && (
+                          config.key === 'driver_tip_options' ? (
+                            <FormGroupText className='form-group'>
+                              <label>{config?.name}</label>
+                              {config?.description && <Description>{config?.description}</Description>}
+                              <input
+                                type='text'
+                                defaultValue={formatArray(config?.value)}
+                                onChange={(e) => handleInputChange(e.target.value, config?.id)}
+                                className='form-control'
+                                placeholder='placeholder'
+                              />
+                            </FormGroupText>
+                          ) : (
+                            <CheckBoxWrapper>
+                              {config?.name && (
                                 <label>{config?.name}</label>
-                                {config?.description && <Description>{config?.description}</Description>}
-                                <input
-                                  type='text'
-                                  defaultValue={formatArray(config?.value)}
-                                  onChange={(e) => handleInputChange(e.target.value, config?.id)}
-                                  className='form-control'
-                                  placeholder='placeholder'
-                                />
-                              </FormGroupText>
-                            ) : (
-                              <CheckBoxWrapper>
-                                {config?.name && (
-                                  <label>{config?.name}</label>
-                                )}
-                                {config?.description && (
-                                  <p>{config?.description}</p>
-                                )}
-                                {
+                              )}
+                              {config?.description && (
+                                <p>{config?.description}</p>
+                              )}
+                              {
                                 config?.options?.length > 0 && config?.options?.map((item, j) => (
                                   <FormGroupWrapper key={j}>
                                     <FormGroupCheck className='checkbox'>
@@ -252,20 +252,20 @@ export const SettingsListUI = (props) => {
                                     </FormGroupCheck>
                                   </FormGroupWrapper>
                                 ))
-                                }
-                                {!config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>}
-                              </CheckBoxWrapper>
-                            )
-                          )
-                        }
-                        {
-                          config.type === 5 && (
-                            <SettingsImage
-                              config={config}
-                              saveConfig={saveConfig}
-                            />
+                              }
+                              {!config?.options && <OptionsError>{t('NO_OPTIONS_VALUE', 'There is no options value')}</OptionsError>}
+                            </CheckBoxWrapper>
                           )
-                        }
+                        )
+                      }
+                      {
+                        config.type === 5 && (
+                          <SettingsImage
+                            config={config}
+                            saveConfig={saveConfig}
+                          />
+                        )
+                      }
                         {/* {config.type === 6 && (
                         <>
                           <FormGroupText className='form-group'>
@@ -289,7 +289,7 @@ export const SettingsListUI = (props) => {
                           </FormGroupText>
                         </>
                         )} */}
-                      </div>
+                    </div>
                     )
                   ))
                 }

package/src/components/Shared/HtmlEditor/InsertImage/index.js

@@ -0,0 +1,172 @@
+import React, { useState, useRef, useEffect } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import {
+  useLanguage,
+  DragAndDrop,
+  ExamineClick
+} from 'ordering-components-admin-external'
+import { Button, Input } from '../../../../styles'
+import { XLg } from 'react-bootstrap-icons'
+import BiImage from '@meronex/icons/bi/BiImage'
+import { bytesConverter } from '../../../../utils'
+import { Alert, Confirm } from '../../../Shared'
+
+import {
+  InsertImageContainer,
+  ImageListContainer,
+  WrapperImage,
+  WrapperInput,
+  NewImage,
+  Image,
+  SkeletonWrapper,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  CloseButton
+} from './styles'
+
+export const InsertImage = (props) => {
+  const {
+    imageListState,
+    editorContext,
+    onClose,
+    handleRestoreEditor,
+    insertImageState,
+    handleInsertImage,
+    handleDeleteImage,
+    selectedImageUrl,
+    setSelectedImageUrl
+  } = props
+  const [, t] = useLanguage()
+  const [imageUrl, setImageUrl] = useState(null)
+  const imageInputRef = useRef(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const handleInsertClick = () => {
+    handleRestoreEditor()
+    editorContext.invoke('editor.insertImage', imageUrl)
+    onClose()
+  }
+
+  const handleClickImage = (type) => {
+    imageInputRef.current.click()
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+
+      setConfirm({
+        open: true,
+        content: t('QUESTION_ADD_GALLERY_IMAGE', 'Are you sure that you want to add this gallery image?'),
+        handleOnAccept: () => {
+          setConfirm({ ...confirm, open: false })
+          handleInsertImage(files[0])
+        }
+      })
+    }
+  }
+
+  const onDeleteClick = (imageId) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_GALLERY_ITEM', 'Are you sure that you want to delete this image?'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteImage(imageId)
+      }
+    })
+  }
+
+  useEffect(() => {
+    setImageUrl(selectedImageUrl)
+  }, [selectedImageUrl])
+
+  return (
+    <InsertImageContainer>
+      <h1>{t('INSERT_IMAGE', 'Insert image')}</h1>
+      <WrapperInput>
+        <label>{t('IMAGE_URL', 'Image URL')}</label>
+        <Input
+          value={imageUrl || ''}
+          onChange={e => setImageUrl(e.target.value)}
+        />
+      </WrapperInput>
+      <Button
+        borderRadius='8px'
+        color='primary'
+        onClick={() => handleInsertClick()}
+      >
+        {t('INSERT', 'Insert')}
+      </Button>
+      <NewImage>
+        <Image onClick={() => handleClickImage()} isImage={insertImageState?.change?.soucre}>
+          <ExamineClick onFiles={handleFiles} childRef={(e) => { imageInputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={insertImageState.loading}>
+            <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={insertImageState.loading}>
+              {
+                insertImageState.loading
+                  ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
+                  : insertImageState?.change?.soucre && <img src={insertImageState?.change?.soucre} alt='image' loading='lazy' />
+              }
+              <UploadImageIconContainer>
+                <UploadImageIcon>
+                  <BiImage />
+                  <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
+                </UploadImageIcon>
+              </UploadImageIconContainer>
+            </DragAndDrop>
+          </ExamineClick>
+        </Image>
+      </NewImage>
+      <ImageListContainer>
+        {imageListState.images.map(image => (
+          <WrapperImage
+            key={image.id}
+            onClick={() => setSelectedImageUrl(image?.source)}
+          >
+            <CloseButton
+              onClick={() => onDeleteClick(image.id)}
+            >
+              <XLg />
+            </CloseButton>
+            <img src={image?.source} alt='' />
+          </WrapperImage>
+        ))}
+      </ImageListContainer>
+      <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}
+      />
+      <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}
+      />
+    </InsertImageContainer>
+  )
+}