ordering-ui-admin-external 1.16.3 → 1.18.0

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

@@ -7,7 +7,6 @@ import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Envelope, Phone } from 'react-bootstrap-icons'
 
 import { Switch } from '../../../styles'
-import { UserTypeSelector } from '../../Users'
 import { Pagination, ConfirmAdmin } from '../../Shared'
 
 import {
@@ -19,13 +18,13 @@ import {
   UserMainInfo,
   CheckBoxWrapper,
   InfoBlock,
-  UserTypeWrapper,
   UserEnableWrapper,
   WrapperPagination,
   AddNewUserButton,
   UsersBottomContainer,
   VerifiedItemsContainer,
-  VerifiedItem
+  VerifiedItem,
+  UserIdWrapper
 } from './styles'
 
 export const UsersList = (props) => {
@@ -34,7 +33,6 @@ export const UsersList = (props) => {
     usersList,
     paginationProps,
     getUsers,
-    handleChangeUserType,
     handleChangeActiveUser,
     selectedUsers,
     handleSelectedUsers,
@@ -42,25 +40,15 @@ export const UsersList = (props) => {
     handleOpenUserAddForm,
     isDriversPage,
     isDriversManagersPage,
-    actionDisabled
+    actionDisabled,
+    setSelectedUsers
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
 
   const [confirmAdmin, setConfirmAdmin] = useState({ open: false, handleOnConfirm: null })
-
-  const getUserType = (type) => {
-    const userTypes = [
-      { key: 0, value: t('ADMINISTRATOR', 'Administrator') },
-      { key: 1, value: t('CITY_MANAGER', 'City manager') },
-      { key: 2, value: t('BUSINESS_OWNER', 'Business owner') },
-      { key: 3, value: t('USER', 'User') }
-    ]
-
-    const objectStatus = userTypes.find(o => o.key === type)
-    return objectStatus && objectStatus
-  }
+  const [isAllChecked, setIsAllChecked] = useState(false)
 
   const onChangeUserDetails = (e, user) => {
     const isInvalid = e.target.closest('.user_checkbox') || e.target.closest('.user_type_selector') || e.target.closest('.user_enable_control') || e.target.closest('.user_action')
@@ -91,20 +79,26 @@ export const UsersList = (props) => {
     }
   }
 
-  const onChangeUserType = (user, type) => {
-    if (user.level !== 0) {
-      handleChangeUserType(type)
+  const handleSelecteAllUser = () => {
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    if (!isAllChecked) {
+      setSelectedUsers([...selectedUsers, ...userIds])
     } else {
-      setConfirmAdmin({
-        open: true,
-        handleOnConfirm: () => {
-          setConfirmAdmin({ ...confirmAdmin, open: false })
-          handleChangeUserType(type)
-        }
+      const userIdsToDeleteSet = new Set(userIds)
+      const updatedSelectedOrderIds = selectedUsers.filter((name) => {
+        return !userIdsToDeleteSet.has(name)
       })
+      setSelectedUsers(updatedSelectedOrderIds)
     }
   }
 
+  useEffect(() => {
+    if (usersList.loading) return
+    const userIds = usersList.users?.reduce((ids, user) => [...ids, user.id], [])
+    const _isAllChecked = userIds.every(elem => selectedUsers.includes(elem))
+    setIsAllChecked(_isAllChecked)
+  }, [usersList.users, selectedUsers])
+
   useEffect(() => {
     if (usersList.loading || usersList.users.length > 0 || paginationProps.totalPages <= 1) return
     if (paginationProps.currentPage !== paginationProps.totalPages) {
@@ -121,9 +115,26 @@ export const UsersList = (props) => {
           <UsersTable>
             <thead>
               <tr>
+                {isDriversPage && (
+                  <th>
+                    <UserIdWrapper>
+                      <CheckBoxWrapper
+                        className='all-checkbox'
+                        isChecked={!usersList?.loading && isAllChecked}
+                        onClick={() => handleSelecteAllUser()}
+                      >
+                        {(!usersList?.loading && isAllChecked) ? (
+                          <MdCheckBox />
+                        ) : (
+                          <MdCheckBoxOutlineBlank />
+                        )}
+                      </CheckBoxWrapper>
+                      {t('ID', 'ID')}
+                    </UserIdWrapper>
+                  </th>
+                )}
                 <th>{t('USER', 'User')}</th>
                 <th>{t('DETAILS', 'Details')}</th>
-                <th />
                 <th colSpan={2}>{t('ACTION', 'Action')}</th>
               </tr>
             </thead>
@@ -131,11 +142,18 @@ export const UsersList = (props) => {
               [...Array(10).keys()].map(i => (
                 <tbody key={i}>
                   <tr>
+                    {isDriversPage && (
+                      <td>
+                        <UserIdWrapper>
+                          <CheckBoxWrapper>
+                            <Skeleton width={20} height={20} />
+                          </CheckBoxWrapper>
+                          <Skeleton width={40} />
+                        </UserIdWrapper>
+                      </td>
+                    )}
                     <td>
                       <UserMainInfo>
-                        <CheckBoxWrapper>
-                          <Skeleton width={20} height={20} />
-                        </CheckBoxWrapper>
                         <WrapperImage isSkeleton>
                           <Skeleton width={45} height={45} />
                         </WrapperImage>
@@ -151,14 +169,6 @@ export const UsersList = (props) => {
                         <p><Skeleton width={100} /></p>
                       </InfoBlock>
                     </td>
-                    <td>
-                      {!(isDriversPage || isDriversManagersPage) && (
-                        <UserTypeWrapper>
-                          <Skeleton width={100} />
-                          <p><Skeleton width={100} /></p>
-                        </UserTypeWrapper>
-                      )}
-                    </td>
                     <td>
                       <UserEnableWrapper>
                         <span><Skeleton width={100} /></span>
@@ -174,19 +184,39 @@ export const UsersList = (props) => {
                   <tr
                     onClick={(e) => onChangeUserDetails(e, user)}
                   >
+                    {isDriversPage && (
+                      <td>
+                        <UserIdWrapper>
+                          <CheckBoxWrapper
+                            className='user_checkbox'
+                            isChecked={selectedUsers.includes(user.id)}
+                            onClick={() => handleSelectedUsers(user.id)}
+                          >
+                            {selectedUsers.includes(user.id) ? (
+                              <MdCheckBox />
+                            ) : (
+                              <MdCheckBoxOutlineBlank />
+                            )}
+                          </CheckBoxWrapper>
+                          {user?.id}
+                        </UserIdWrapper>
+                      </td>
+                    )}
                     <td>
                       <UserMainInfo>
-                        <CheckBoxWrapper
-                          className='user_checkbox'
-                          isChecked={selectedUsers.includes(user.id)}
-                          onClick={() => handleSelectedUsers(user.id)}
-                        >
-                          {selectedUsers.includes(user.id) ? (
-                            <MdCheckBox />
-                          ) : (
-                            <MdCheckBoxOutlineBlank />
-                          )}
-                        </CheckBoxWrapper>
+                        {isDriversManagersPage && (
+                          <CheckBoxWrapper
+                            className='user_checkbox'
+                            isChecked={selectedUsers.includes(user.id)}
+                            onClick={() => handleSelectedUsers(user.id)}
+                          >
+                            {selectedUsers.includes(user.id) ? (
+                              <MdCheckBox />
+                            ) : (
+                              <MdCheckBoxOutlineBlank />
+                            )}
+                          </CheckBoxWrapper>
+                        )}
                         <WrapperImage>
                           {user?.photo ? (
                             <Image bgimage={optimizeImage(user?.photo, 'h_50,c_limit')} />
@@ -223,18 +253,6 @@ export const UsersList = (props) => {
                         <p>{user?.cellphone}</p>
                       </InfoBlock>
                     </td>
-                    <td>
-                      {!(isDriversPage || isDriversManagersPage) && (
-                        <UserTypeWrapper className='user_type_selector'>
-                          <UserTypeSelector
-                            userId={user.id}
-                            defaultUserType={user?.level}
-                            handleChangeUserType={(type) => onChangeUserType(user, type)}
-                          />
-                          <p>{getUserType(user?.level)?.value}</p>
-                        </UserTypeWrapper>
-                      )}
-                    </td>
                     <td>
                       <UserEnableWrapper className='user_enable_control'>
                         <span>{t('ENABLE', 'Enable')}</span>

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

@@ -17,18 +17,6 @@ export const UsersTable = styled.table`
   td, th {
     padding: 10px 0;
     font-size: 14px;
-    &:first-child {
-      width: 40%;
-    }
-    &:nth-child(2) {
-      width: 20%;
-    }
-
-    &:nth-child(4),
-    
-    &:nth-child(5) {
-      width: 10%;
-    }
   }
 
   thead {
@@ -266,3 +254,7 @@ export const VerifiedItemsContainer = styled.div`
     }
   }
 `
+export const UserIdWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`

package/src/components/Home/HomePage/index.js

@@ -249,13 +249,13 @@ const HomeUI = (props) => {
                   >
                     {project[projectStatus.project?.current_status]?.status}
                   </ProjectCurrentStatus>
-                  <Button
+                  {/* <Button
                     color='primary'
                     borderRadius='8px'
                     onClick={() => window.open(`https://${ordering?.project}.tryordering.com`, '_blank')}
                   >
                     {t('VISIT_MY_WEBSITE', 'Visit my Website')}
-                  </Button>
+                  </Button> */}
                 </ProjectStatusWrapper>
               </ProjectInfoWrapper>
               <img src={project[projectStatus.project?.current_status]?.image} alt='' />

package/src/components/MyProducts/AdvancedSettings/ButtonShadow.js

@@ -0,0 +1,102 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+
+import {
+  DropShadowWrapper,
+  ShadowInfoWrapper,
+  DropShadow,
+  ShadowInputGroup,
+  ShadowInputControl
+} from './styles'
+
+export const ButtonShadow = (props) => {
+  const { initialValues, handleUpdateThemeValue, path } = props
+
+  const [, t] = useLanguage()
+  const [shadow, setShadow] = useState({})
+
+  const shadowValues = useMemo(() => {
+    if (!shadow?.x || !shadow?.y || !shadow?.blur || !shadow?.spread) return ''
+    return `${shadow?.x}px ${shadow?.y}px ${shadow?.blur}px ${shadow?.spread}px ${shadow?.color}`
+  }, [shadow])
+
+  const handleChangeInput = (value, name) => {
+    handleUpdateThemeValue(value, [path, name].join('.'))
+    setShadow({ ...shadow, [name]: value })
+  }
+
+  useEffect(() => {
+    if (!initialValues) return
+    setShadow(JSON.parse(JSON.stringify(initialValues)))
+  }, [initialValues])
+
+  return (
+    <DropShadowWrapper>
+      <ShadowInfoWrapper>
+        <DropShadow
+          style={{
+            boxShadow: shadowValues
+          }}
+        />
+        <span>{t('DROP_SHADOW', 'Drop shadow')}</span>
+      </ShadowInfoWrapper>
+      <ShadowInputGroup>
+        <ShadowInputControl>
+          <span>X</span>
+          <input
+            value={shadow?.x || ''}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+            onChange={(e) => handleChangeInput(e.target.value, 'x')}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>Y</span>
+          <input
+            value={shadow?.y || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'y')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>B</span>
+          <input
+            value={shadow?.blur || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'blur')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>S</span>
+          <input
+            value={shadow?.spread || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'spread')}
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </ShadowInputControl>
+        <ShadowInputControl>
+          <span>C</span>
+          <input
+            value={shadow?.color || ''}
+            onChange={(e) => handleChangeInput(e.target.value, 'color')}
+          />
+        </ShadowInputControl>
+      </ShadowInputGroup>
+    </DropShadowWrapper>
+  )
+}

package/src/components/MyProducts/AdvancedSettings/FontStyleGroup.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 import { Select } from '../../../styles/Select/FirstSelect'
@@ -14,6 +14,9 @@ export const FontStyleGroup = (props) => {
   const { isBody, fonts, path, handleUpdateThemeValue } = props
   const [, t] = useLanguage()
 
+  const [weights, setWeights] = useState([])
+  const [font, setFont] = useState('Poppins')
+
   const fontFamilyList = [
     { value: 'Poppins', content: <Option>{t('POPPINS', 'Poppins')}</Option> },
     { value: 'Lobster', content: <Option>{t('LOBSTER', 'Lobster')}</Option> },
@@ -32,6 +35,21 @@ export const FontStyleGroup = (props) => {
     { value: 900, name: '900 - Black (Heavy)' }
   ]
 
+  const handleChangeWeights = (value) => {
+    handleUpdateThemeValue([value], [path, 'weights'].join('.'))
+    setWeights([value])
+  }
+
+  const handleUpdateFont = (value) => {
+    handleUpdateThemeValue(value, [path, 'name'].join('.'))
+    setFont(value)
+  }
+
+  useEffect(() => {
+    setWeights(fonts?.weights)
+    setFont(fonts?.name)
+  }, [JSON.stringify(fonts)])
+
   return (
     <>
       <FormControl>
@@ -40,9 +58,9 @@ export const FontStyleGroup = (props) => {
           <Select
             options={fontFamilyList}
             className='select'
-            defaultValue={fonts?.name}
+            defaultValue={font}
             placeholder={t('SELECT_OPTION', 'Select an option')}
-            onChange={(value) => handleUpdateThemeValue(value, [path, 'name'].join('.'))}
+            onChange={(value) => handleUpdateFont(value)}
           />
         </SelectWrapper>
       </FormControl>
@@ -52,8 +70,8 @@ export const FontStyleGroup = (props) => {
         </label>
         <FontWeightListWrapper>
           {fontWeightList.map(weight => (
-            <FontWeightItem key={weight.value} onClick={() => handleUpdateThemeValue([weight?.value], [path, 'weights'].join('.'))}>
-              {fonts?.weights?.includes(weight.value) ? <RecordCircleFill className='active' /> : <Circle />}
+            <FontWeightItem key={weight.value} onClick={() => handleChangeWeights(weight?.value)}>
+              {weights?.includes(weight.value) ? <RecordCircleFill className='active' /> : <Circle />}
               <span>{weight.name}</span>
             </FontWeightItem>
           ))}

package/src/components/MyProducts/AdvancedSettings/HideCheckBox.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import {
+  CheckSquareFill as CheckedIcon,
+  Square as UnCheckedIcon
+} from 'react-bootstrap-icons'
+import { FormControl, HideCheckWrapper } from './styles'
+
+export const HideCheckBox = (props) => {
+  const { handleUpdateThemeValue, setting, initialCheck, noLabel } = props
+  const [isCheck, setIsCheck] = useState(false)
+
+  const [, t] = useLanguage()
+
+  const handleClick = () => {
+    handleUpdateThemeValue(!isCheck, setting?.path)
+    setIsCheck(!isCheck)
+  }
+
+  useEffect(() => {
+    setIsCheck(initialCheck)
+  }, [initialCheck])
+
+  return (
+    <FormControl>
+      {!noLabel && (<label>{setting.name}</label>)}
+      <HideCheckWrapper onClick={() => handleClick()}>
+        {isCheck ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
+        <span>{noLabel ? setting.name : t('HIDDEN', 'Hidden')} </span>
+      </HideCheckWrapper>
+    </FormControl>
+  )
+}

package/src/components/MyProducts/AdvancedSettings/ImageBox.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useLanguage, ExamineClick, DragAndDrop } from 'ordering-components-admin-external'
 import { bytesConverter } from '../../../utils'
 import { Image as DumyPhoto } from 'react-bootstrap-icons'
@@ -18,9 +18,11 @@ export const ImageBox = (props) => {
   const imageRef = useRef()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const [picture, setPicture] = useState('')
 
   const handleChangeImage = (croppedImg) => {
     handleChangePhoto(croppedImg, path)
+    setPicture(croppedImg)
     setCropState({ name: null, data: null, open: false })
   }
 
@@ -58,6 +60,11 @@ export const ImageBox = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!photo) return
+    setPicture(photo)
+  }, [photo])
+
   return (
     <div>
       <ImageBoxContainer isBig={isBig} onClick={() => imageRef.current.click()}>
@@ -70,8 +77,8 @@ export const ImageBox = (props) => {
             onDrop={dataTransfer => handleFiles(dataTransfer.files, 'logo')}
             accept='image/png, image/jpeg, image/jpg'
           >
-            {photo && <img src={photo} alt='logo image' loading='lazy' />}
-            <UploadImageIconContainer bgimage={photo}>
+            {picture && <img src={picture} alt='logo image' loading='lazy' />}
+            <UploadImageIconContainer bgimage={picture}>
               <UploadImageIcon>
                 <DumyPhoto />
                 <span>{t('DRAG_AND_DROP', 'Drag and drop')}</span>

package/src/components/MyProducts/AdvancedSettings/SettingComponent.js

@@ -1,22 +1,18 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Select } from '../../../styles/Select/FirstSelect'
+import { ColorPicker } from '../../Shared'
+import { Input } from '../../../styles'
+import { HideCheckBox } from './HideCheckBox'
 import { ImageBox } from './ImageBox'
-import {
-  CheckSquareFill as CheckedIcon,
-  Square as UnCheckedIcon
-} from 'react-bootstrap-icons'
 import {
   FormControl,
-  HideCheckWrapper,
   SelectWrapper,
   Option
 } from './styles'
-import { ColorPicker } from '../../Shared'
-import { Input } from '../../../styles'
 
 export const SettingComponent = (props) => {
-  const { settingList, handleUpdateThemeValue, advancedValues, themeStructure } = props
+  const { settingList, handleUpdateThemeValue, advancedValues, themeStructure, noLabel } = props
 
   const [, t] = useLanguage()
 
@@ -47,13 +43,12 @@ export const SettingComponent = (props) => {
       {settingList.map((setting, i) => (
         <React.Fragment key={i}>
           {setting.type === 'hidden' && (
-            <FormControl>
-              <label>{setting.name}</label>
-              <HideCheckWrapper onClick={() => handleUpdateThemeValue(!deepFind(advancedValues, setting?.path), setting?.path)}>
-                {deepFind(advancedValues, setting?.path) ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
-                <span>{t('HIDDEN', 'Hidden')}</span>
-              </HideCheckWrapper>
-            </FormControl>
+            <HideCheckBox
+              handleUpdateThemeValue={handleUpdateThemeValue}
+              setting={setting}
+              initialCheck={deepFind(advancedValues, setting?.path)}
+              noLabel={noLabel}
+            />
           )}
           {setting.type === 'position' && (
             <FormControl>