ordering-ui-admin-external 1.0.0 → 1.1.1

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

@@ -1,24 +1,27 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useLanguage, UserDetails as UserDetailsController } from 'ordering-components-admin-external'
 import { OrdersManager } from '../../Orders'
 import { AddressList } from '../AddressList'
-import { Personalization, Modal } from '../../Shared'
+import { Personalization, Modal, Schedule } from '../../Shared'
 import { UserDetailsMenu } from '../UserDetailsMenu'
 import { UserProfileForm } from '../UserProfileForm'
 import { UserMetaFields } from '../../Users'
 import { DriverGroupSetting } from '../DriverGroupSetting'
 import { ThreeDots } from 'react-bootstrap-icons'
-import { Switch } from '../../../styles'
-import { Dropdown, DropdownButton } from 'react-bootstrap'
-
+import { Switch, Button } from '../../../styles'
+import { ActionsForm } from '../UserFormDetails/styles'
 import {
   UserName,
   SavedPlaces,
+  ScheduleSection,
   PersonalizationWrapper,
   DetailsHeader,
-  ActionSelectorWrapper
+  ActionSelectorWrapper,
+  DriverScheduleWraper,
+  DriverSchedule
 } from './styles'
 
 export const UserDetailsUI = (props) => {
@@ -29,15 +32,18 @@ export const UserDetailsUI = (props) => {
     setExtraOpen,
     handleSuccessUserUpdate,
     handleDeleteUser,
-    handleChangeActiveUser
+    handleChangeActiveUser,
+    scheduleState,
+    handleScheduleState,
+    handleScheduleUpdateUser
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
-
   const [currentMenuSelected, setCurrentMenuSelected] = useState('profile')
   const [isCustomField, setIsCustomField] = useState(false)
   const [isPersonalization, setIsPersonalization] = useState(false)
+  const [isDriverSchedule, setIsDriverSchedule] = useState(true)
 
   useEffect(() => {
     setExtraOpen(false)
@@ -122,6 +128,33 @@ export const UserDetailsUI = (props) => {
               )}
             </>
           )}
+          {currentMenuSelected === 'schedule' && (
+            <ScheduleSection>
+              <DriverScheduleWraper>
+                <DriverSchedule>{t('DRIVER_SCHEDULES', 'Driver schedules')}</DriverSchedule>
+                <Switch
+                  defaultChecked={isDriverSchedule}
+                  onChange={enabled => setIsDriverSchedule(enabled)}
+                />
+              </DriverScheduleWraper>
+              <Schedule
+                scheduleList={userState?.user?.schedule}
+                handleChangeScheduleState={handleScheduleState}
+              />
+              <ActionsForm>
+                <Button
+                  id='form-btn'
+                  color='primary'
+                  borderRadius='5px'
+                  disabled={scheduleState.loading || scheduleState?.change?.length === 0}
+                  style={{ marginTop: 20 }}
+                  onClick={() => handleScheduleUpdateUser()}
+                >
+                  {scheduleState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
+                </Button>
+              </ActionsForm>
+            </ScheduleSection>
+          )}
           {currentMenuSelected === 'orders' && (
             <OrdersManager
               isSelectedOrders

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

@@ -138,3 +138,14 @@ export const ActionSelectorWrapper = styled.div`
     }
   }
 `
+export const ScheduleSection = styled.div`
+  margin-top: 30px;
+  overflow: auto;
+`
+export const DriverScheduleWraper = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const DriverSchedule = styled.span`
+  padding-right: 10px;
+`

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

@@ -18,7 +18,8 @@ export const UserDetailsMenu = (props) => {
   const menuItems = isDriverMenu ? [
     { key: 'profile', content: t('PROFILE', 'Profile') },
     { key: 'driver_group', content: t('DRIVER_GROUP', 'Driver group') },
-    { key: 'saved_places', content: t('SAVED_PLACES', 'Saved places') }
+    { key: 'saved_places', content: t('SAVED_PLACES', 'Saved places') },
+    { key: 'schedule', content: t('SCHEDULE', 'Schedule') }
     // { key: 'metafields', content: t('METAFIELDS', 'Metafields') },
     // { key: 'personalization', content: t('PERSONALIZATION', 'Personalization') }
   ] : [

package/src/components/Downloads/FreeProductsList/index.js

@@ -32,8 +32,8 @@ export const FreeProductsList = (props) => {
       key: 'store_app',
       type: 1,
       title: t('ORDERING_STORE_APP', 'Store App _version_').replace('_version_', '2.0'),
-      short_description: t('STORE_APP_SHORT_DESCRIPTION', 'Allow your restaurants or business owners to receive their orders on your own white-labeled Orders Manager app.'),
-      long_description: t('STORE_APP_LONG_DESCRIPTION', 'Allow your restaurants or business owners to receive their orders on your own white-labeled Orders Manager app.<br /><br />Use it Branded on your business at no cost.<br />All you need to do is use the Business Owners Credentials that you currently have on your Dashboard.'),
+      short_description: t('STORE_APP_FREE_SHORT_DESCRIPTION', 'Give your business owners or managers a tool to manage their whole businesses incoming orders on the go by installing a branded app on any mobile device they have.'),
+      long_description: t('STORE_APP_FREE_LONG_DESCRIPTION', 'Give your business owners or managers a tool to manage their whole businesses incoming orders on the go by installing a branded app on any mobile device they have.<br /><sub>This is a branded Ordering.co product; use it with your project, email, and password for free; features might be limited.</sub>'),
       icon: <CartPlusFill />,
       image: theme.images.apps.storeApp,
       app_store: 'https://apps.apple.com/us/app/store-app-2-0/id1608192050',
@@ -43,8 +43,8 @@ export const FreeProductsList = (props) => {
       key: 'driver_app',
       type: 1,
       title: t('ORDERING_DRIVER_APP', 'Driver App _version_').replace('_version_', '2.0'),
-      short_description: t('DRIVER_APP_SHORT_DESCRIPTION', 'Use it Branded on your business at no cost.'),
-      long_description: t('DRIVER_APP_LONG_DESCRIPTION', 'Use it Branded on your business at no cost.<br />All you need to do is use the Driver Credentials that you currently have on your Dashboard.'),
+      short_description: t('DRIVER_APP_FREE_SHORT_DESCRIPTION', 'Your fleet´s best companion gives drivers a tool to receive orders, follow optimal routes, add delivery evidence, set orders timing, and control their busy times.'),
+      long_description: t('DRIVER_APP_FREE_LONG_DESCRIPTION', 'Your fleet´s best companion gives drivers a tool to receive orders, follow optimal routes, add delivery evidence, set orders timing, and control their busy times.<br /><sub>This is a branded Ordering.co product; use it with your project, email, and password for free; features might be limited.</sub>'),
       icon: <img src={theme.images.icons.delivery} alt='delivery app icon' />,
       image: theme.images.apps.driverApp,
       app_store: 'https://apps.apple.com/us/app/driver-app-2-0/id1606257815',
@@ -54,8 +54,8 @@ export const FreeProductsList = (props) => {
       key: 'pos_app',
       type: 1,
       title: t('ORDERING_POS', 'POS _version_').replace('_version_', '2.0'),
-      short_description: t('POS_APP_SHORT_DESCRIPTION', 'Create orders in your system without the hassle and auto-complete information.'),
-      long_description: t('POS_APP_LONG_DESCRIPTION', 'POS Ordering System: Take orders on the phone easily<br />Create orders in your system without the hassle and auto-complete information.<br />Save customer info with their number'),
+      short_description: t('POS_APP_FREE_SHORT_DESCRIPTION', 'Create a loyal and returning community by offering the best customer experience; customer service is always the definite factor for users to keep returning; this fast software will help you understand customers, save their numbers, and order quickly.'),
+      long_description: t('POS_APP_FREE_LONG_DESCRIPTION', 'Create a loyal and returning community by offering the best customer experience; customer service is always the definite factor for users to keep returning; this fast software will help you understand customers, save their numbers, and order quickly.<br /><sub>This is a branded Ordering.co product; use it with your project, email, and password for free; features might be limited.</sub>'),
       icon: <img src={theme.images.icons.posTerminal} alt='pos app icon' />,
       image: theme.images.apps.posApp,
       app_store: 'https://apps.apple.com/us/app/ordering-pos-2-0/id1609520468',
@@ -65,8 +65,8 @@ export const FreeProductsList = (props) => {
       key: 'kiosk_app',
       type: 1,
       title: t('ORDERING_KIOSK', 'Ordering Kiosk _version_').replace('_version_', '2.0'),
-      short_description: t('KIOSK_APP_SHORT_DESCRIPTION', 'Ordering Kiosk completes that final step for each sale'),
-      long_description: t('KIOSK_APP_LONG_DESCRIPTION', 'Did you know that 7 out of 10 customers prefer to make their orders themselves?<br />Ordering Kiosk completes that final step for each sale.'),
+      short_description: t('KIOSK_APP_FREE_SHORT_DESCRIPTION', 'Simplify the ordering process inside your store. Allow your customers to select what they want to purchase products and pay directly in this kiosk—made with the highest tech, intuitive, and modern.'),
+      long_description: t('KIOSK_APP_FREE_LONG_DESCRIPTION', 'Simplify the ordering process inside your store. Allow your customers to select what they want to purchase products and pay directly in this kiosk—made with the highest tech, intuitive, and modern.<br /><sub>This is a branded Ordering.co product; use it with your project, email, and password for free; features might be limited.</sub>'),
       icon: <img src={theme.images.icons.poster} alt='kiosk app icon' />,
       image: theme.images.apps.kioskApp,
       app_store: 'https://apps.apple.com/us/app/ordering-kiosk-2-0/id1609314960',
@@ -76,8 +76,8 @@ export const FreeProductsList = (props) => {
       key: 'call_center',
       type: 2,
       title: t('ORDERING_CALL_CENTER', 'Call Center _version_').replace('_version_', '2.0'),
-      short_description: t('CALL_CENTER_SHORT_DESCRIPTION', 'Improving your <b>Customer Experience</b> and your <b>Orders Management</b> team processes.<br />Seamlessly integrated with your Ordering Solution.'),
-      long_description: t('CALL_CENTER_LONG_DESCRIPTION', 'Improving your <b>Customer Experience</b> and your <b>Orders Management</b> team processes.<br />Seamlessly integrated with your Ordering Solution.'),
+      short_description: t('CALL_CENTER_FREE_SHORT_DESCRIPTION', 'Take orders over the phone, too; agents will take orders over the phone and create the order for your customers in just a few minutes, using this friendly and intuitive software.'),
+      long_description: t('CALL_CENTER_FREE_LONG_DESCRIPTION', 'Take orders over the phone, too; agents will take orders over the phone and create the order for your customers in just a few minutes, using this friendly and intuitive software.<br /><sub>This is a branded Ordering.co product; use it with your project, email, and password for free; features might be limited.</sub>'),
       icon: <Headset />,
       image: theme.images.apps.callCenterApp,
       web_url: 'https://callcenter.tryordering.com/search'

package/src/components/Downloads/PurchasedProductsList/index.js

@@ -33,8 +33,8 @@ export const PurchasedProductsList = (props) => {
       key: 'store_app',
       type: 1,
       title: t('ORDERING_STORE_APP', 'Store App _version_').replace('_version_', '2.0'),
-      short_description: t('STORE_APP_SHORT_DESCRIPTION', 'Allow your restaurants or business owners to receive their orders on your own white-labeled Orders Manager app.'),
-      long_description: t('STORE_APP_LONG_DESCRIPTION', 'Allow your restaurants or business owners to receive their orders on your own white-labeled Orders Manager app.<br /><br />Use it Branded on your business at no cost.<br />All you need to do is use the Business Owners Credentials that you currently have on your Dashboard.'),
+      short_description: t('STORE_APP_PURCHASE_SHORT_DESCRIPTION', 'Give your business owners or managers a tool to manage their whole business´s incoming orders on the go by installing a branded app on any mobile device they have.'),
+      long_description: t('STORE_APP_PURCHASE_LONG_DESCRIPTION', 'Give your business owners or managers a tool to manage their whole business´s incoming orders on the go by installing a branded app on any mobile device they have.<br /><sub>This App is delivered in less than 5 working days, fully branded with your guidelines.</sub>'),
       icon: <CartPlusFill />,
       image: theme.images.apps.storeApp,
       app_store: 'https://apps.tryordering.com/store/marketplace?category=306&product=1717',
@@ -44,8 +44,8 @@ export const PurchasedProductsList = (props) => {
       key: 'driver_app',
       type: 1,
       title: t('ORDERING_DRIVER_APP', 'Driver App _version_').replace('_version_', '2.0'),
-      short_description: t('DRIVER_APP_SHORT_DESCRIPTION', 'Use it Branded on your business at no cost.'),
-      long_description: t('DRIVER_APP_LONG_DESCRIPTION', 'Use it Branded on your business at no cost.<br />All you need to do is use the Driver Credentials that you currently have on your Dashboard.'),
+      short_description: t('DRIVER_APP_PURCHASE_SHORT_DESCRIPTION', 'Your fleets best companion gives drivers a tool to receive orders, follow optimal routes, add delivery evidence, set orders timing, and control their busy times.'),
+      long_description: t('DRIVER_APP_PURCHASE_LONG_DESCRIPTION', 'Your fleets best companion gives drivers a tool to receive orders, follow optimal routes, add delivery evidence, set orders timing, and control their busy times.<br /><sub>This App is delivered in less than 5 working days, fully branded with your guidelines.</sub>'),
       icon: <img src={theme.images.icons.delivery} alt='delivery app icon' />,
       image: theme.images.apps.driverApp,
       app_store: 'https://apps.tryordering.com/store/marketplace?category=306&product=1718',
@@ -55,8 +55,8 @@ export const PurchasedProductsList = (props) => {
       key: 'pos_app',
       type: 1,
       title: t('ORDERING_POS', 'POS _version_').replace('_version_', '2.0'),
-      short_description: t('POS_APP_SHORT_DESCRIPTION', 'Create orders in your system without the hassle and auto-complete information.'),
-      long_description: t('POS_APP_LONG_DESCRIPTION', 'POS Ordering System: Take orders on the phone easily<br />Create orders in your system without the hassle and auto-complete information.<br />Save customer info with their number'),
+      short_description: t('POS_APP_PURCHASE_SHORT_DESCRIPTION', 'Create a loyal and returning community by offering the best customer experience; customer service is always the definite factor for users to keep returning; this fast software will help you understand customers, save their numbers, and order quickly.'),
+      long_description: t('POS_APP_PURCHASE_LONG_DESCRIPTION', 'Create a loyal and returning community by offering the best customer experience; customer service is always the definite factor for users to keep returning; this fast software will help you understand customers, save their numbers, and order quickly.<br /><sub>This App is delivered in less than 5 working days, fully branded with your guidelines.</sub>'),
       icon: <img src={theme.images.icons.posTerminal} alt='pos app icon' />,
       image: theme.images.apps.posApp,
       app_store: 'https://apps.tryordering.com/store/marketplace?category=306&product=1793',
@@ -66,8 +66,8 @@ export const PurchasedProductsList = (props) => {
       key: 'kiosk_app',
       type: 1,
       title: t('ORDERING_KIOSK', 'Ordering Kiosk _version_').replace('_version_', '2.0'),
-      short_description: t('KIOSK_APP_SHORT_DESCRIPTION', 'Ordering Kiosk completes that final step for each sale'),
-      long_description: t('KIOSK_APP_LONG_DESCRIPTION', 'Did you know that 7 out of 10 customers prefer to make their orders themselves?<br />Ordering Kiosk completes that final step for each sale.'),
+      short_description: t('KIOSK_APP_PURCHASE_SHORT_DESCRIPTION', 'Simplify the ordering process inside your store. Allow your customers to select what they want to purchase products and pay directly in this kiosk—made with the highest tech, intuitive, and modern.'),
+      long_description: t('KIOSK_APP_PURCHASE_LONG_DESCRIPTION', 'Simplify the ordering process inside your store. Allow your customers to select what they want to purchase products and pay directly in this kiosk—made with the highest tech, intuitive, and modern.<br /><sub>This App is delivered in less than 5 working days, fully branded with your guidelines.</sub>'),
       icon: <img src={theme.images.icons.poster} alt='kiosk app icon' />,
       image: theme.images.apps.kioskApp,
       app_store: 'https://apps.tryordering.com/store/marketplace?category=306&product=1794',
@@ -77,8 +77,8 @@ export const PurchasedProductsList = (props) => {
       key: 'call_center',
       type: 2,
       title: t('ORDERING_CALL_CENTER', 'Call Center _version_').replace('_version_', '2.0'),
-      short_description: t('CALL_CENTER_SHORT_DESCRIPTION', 'Improving your <b>Customer Experience</b> and your <b>Orders Management</b> team processes.<br />Seamlessly integrated with your Ordering Solution.'),
-      long_description: t('CALL_CENTER_LONG_DESCRIPTION', 'Improving your <b>Customer Experience</b> and your <b>Orders Management</b> team processes.<br />Seamlessly integrated with your Ordering Solution.'),
+      short_description: t('CALL_CENTER_PURCHASE_SHORT_DESCRIPTION', 'Take orders over the phone, too; agents will take orders over the phone and create the order for your customers in just a few minutes, using this friendly and intuitive software.'),
+      long_description: t('CALL_CENTER_PURCHASE_LONG_DESCRIPTION', 'Take orders over the phone, too; agents will take orders over the phone and create the order for your customers in just a few minutes, using this friendly and intuitive software.<br /><sub>This App is delivered in less than 5 working days, fully branded with your guidelines.</sub>'),
       icon: <Headset />,
       image: theme.images.apps.callCenterApp,
       web_url: 'https://apps.tryordering.com/store/marketplace?category=306&product=1792'

package/src/components/LanguageSelector/index.js

@@ -33,7 +33,7 @@ const LanguageSelectorUI = (props) => {
           optionInnerMaxHeight='60vh'
           options={languagesState?.loading ? defaultLanguages : _languages}
           defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}
-          onChange={(languageId) => handleChangeLanguage(languageId)}
+          onChange={(languageId) => handleChangeLanguage(languageId, true)}
           notReload={notReload}
           minWidth='200px'
         />

package/src/components/Orders/DriversList/styles.js

@@ -110,6 +110,7 @@ export const DriverInfo = styled.div`
       color: ${props => props.theme.colors?.headingColor};
       font-weight: 600;
       margin: 0px;
+      flex: 1;
     }
   }
 `

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

@@ -72,8 +72,8 @@ export const OrdersTable = (props) => {
     customer: true,
     driver: true,
     advanced: true,
-    timer: true,
-    slaBar: true,
+    timer: configState?.configs?.order_deadlines_enabled?.value === '1',
+    slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
     total: true
   })
 
@@ -340,7 +340,7 @@ export const OrdersTable = (props) => {
                 {allowColumns?.advanced && (
                   <th colSpan='3' className='advanced'>{t('ADVANCED_LOGISTICS', 'Advanced logistics')}</th>
                 )}
-                {allowColumns?.timer && (
+                {(allowColumns?.timer && (groupStatus === 'pending' || groupStatus === 'inProgress')) && (
                   <th colSpan='2' className='timer'>{t('SLA_TIMER', 'SLA’s timer')}</th>
                 )}
                 <th className='orderPrice'>
@@ -615,18 +615,13 @@ export const OrdersTable = (props) => {
                       </div>
                     </td>
                   )}
-                  {allowColumns?.timer && (
+                  {(allowColumns?.timer && (groupStatus === 'pending' || groupStatus === 'inProgress')) && (
                     <td className='timer'>
                       <Timer>
-                        {!(order?.status === 1 || order?.status === 11 || order?.status === 2 || order?.status === 5 || order?.status === 6 || order?.status === 10 || order.status === 12) && (
-                          <>
-                            <p className='bold'>{t('TIMER', 'Timer')}</p>
-                            <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
-                          </>
-                        )}
+                        <p className='bold'>{t('TIMER', 'Timer')}</p>
+                        <p className={getStatusClassName(getDelayMinutes(order))}>{displayDelayedTime(order)}</p>
                       </Timer>
-                    </td>
-                  )}
+                    </td>)}
                   <td className='orderPrice'>
                     <div className='info'>
                       {allowColumns?.total && (

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

@@ -47,10 +47,10 @@ const LanguageSettingUI = (props) => {
               <FieldContainer key={field.id}>
                 <div className='name'>{field.name}</div>
                 <div
-                  className={languageState?.language?.id === field.id ? 'checked default' : 'default'}
+                  className={field.default ? 'checked default' : 'default'}
                   onClick={() => setLanguage(field)}
                 >
-                  {(languageState?.language?.id === field.id) ? <RecordCircle /> : <Circle />}
+                  {(field.default) ? <RecordCircle /> : <Circle />}
                 </div>
                 <div className='status'>
                   <Switch

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

@@ -253,6 +253,7 @@ const PlaceListingUI = (props) => {
             {t('DROPDOWN_OPTIONS', 'Zones dropdown options')}
           </Tab>
         </Tabs>
+
         {showOption === 'countries' && (
           <CountriesList
             actionState={actionState}

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

@@ -10,6 +10,7 @@ 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 {
@@ -28,13 +29,14 @@ const SettingsUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const { search } = useLocation()
 
   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)
-  const { search } = useLocation()
 
   let category
 
@@ -62,17 +64,19 @@ const SettingsUI = (props) => {
 
   const handleOpenDescription = (category) => {
     setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(false)
+    setOpenMultiCountrySettings(false)
     setIsOpenDescription(true)
     setSelectedCategory(category)
-    setOpenMultiCountrySettings(false)
     onBasicSettingsRedirect({ category: category?.id })
     handChangeConfig && handChangeConfig(false)
   }
 
   const handleOpenSettingDetails = (item) => {
     setIsOpenDescription(false)
-    setSelectedCategory(null)
+    setOpenSitesAuthSettings(false)
     setOpenMultiCountrySettings(false)
+    setSelectedCategory(null)
     setIsOpenSettingDetails(item)
   }
 
@@ -161,6 +165,21 @@ 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={() => {
@@ -216,6 +235,19 @@ 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}

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

@@ -64,9 +64,6 @@ export const SettingsListUI = (props) => {
           if (isNaN(Number(item?.value))) {
             invalidMessageList.push(t('VALIDATION_ERROR_NUMERIC', `The ${item?.name} must be a number.`).replace('_attribute_', item?.name))
           }
-          if (isNaN(Number(item?.value)) || Number(item?.value) <= 0) {
-            invalidMessageList.push(t('VALIDATION_MUST_BIGGER_ZERO', `${item?.name} must be bigger than zero`).replace('_attribute_', item?.name))
-          }
           if (item?.key === 'platform_fee_percentage' && Number(item?.value) > 100) {
             invalidMessageList.push(t('VALIDATION_MUST_SMALLER_HUNDRED', `${item?.name} must be not bigger than 100`).replace('_attribute_', item?.name))
           }

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { NotFoundSource } from '../../Shared'
+import { SettingsSelectUI } from '../SettingsSelectUI'
+
+import {
+  SettingsListContainer,
+  GeneralContainer,
+  GeneralTitle,
+  FormContainer,
+  FormGroupText,
+  SkeletonWrapper
+} from './styles'
+
+export const SiteSettingDetails = (props) => {
+  const {
+    selectedSiteId,
+    siteConfigsState,
+    handleChangeConfig
+  } = props
+
+  const [, t] = useLanguage()
+  return (
+    <>
+      <SettingsListContainer>
+        <GeneralTitle>
+          <p>{t('SETTINGS', 'All Settings')}</p>
+        </GeneralTitle>
+        {
+          siteConfigsState.loading ? (
+            <SkeletonWrapper>
+              {[...Array(6).keys()].map(i => (
+                <div key={i}>
+                  <Skeleton height={14} width={200} />
+                  <Skeleton height={30} />
+                </div>
+              ))}
+            </SkeletonWrapper>
+          ) : (
+            <GeneralContainer>
+              <FormContainer>
+                {
+                  siteConfigsState.configs.length > 0 && siteConfigsState.configs.map((config, i) => (
+                    <div key={i}>
+                      {
+                        config.type === 1 && (
+                          <FormGroupText className='form-group'>
+                            <label>{config?.name}</label>
+                            <input
+                              type='text'
+                              defaultValue={config?.value}
+                              onChange={(e) => handleChangeConfig(e.target.value, selectedSiteId, config?.id)}
+                              className='form-control'
+                              placeholder={config?.name}
+                            />
+                          </FormGroupText>
+                        )
+                      }
+                      {
+                        config.type === 2 && (
+                          <SettingsSelectUI
+                            config={config}
+                            defaultValue={config?.value}
+                            handleSelectChange={(value) => handleChangeConfig(value, selectedSiteId, config?.id)}
+                          />
+                        )
+                      }
+                    </div>
+                  ))
+                }
+              </FormContainer>
+            </GeneralContainer>
+          )
+        }
+        {
+          !siteConfigsState.loading && siteConfigsState.error && (
+            <NotFoundSource
+              content={t('NOT_FOUND_CONFIG', 'Sorry, we couldn\'t find the config.')}
+            />
+          )
+        }
+      </SettingsListContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+
+export const SettingsListContainer = styled.div`
+  width: 100%;
+  padding: 26px 20px;
+  overflow-x: hidden;
+`
+
+export const GeneralContainer = styled.div``
+
+export const GeneralTitle = styled.div`
+  display: flex;
+  align-items: center;
+
+  p {
+    font-weight: bold;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin-bottom: 6px;
+  }
+`
+
+export const FormContainer = styled.div`
+  margin-top: 20px;
+`
+
+export const FormGroupText = styled.div`
+  margin-bottom: 20px;
+
+  label {
+    font-weight: 600;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+  }
+
+  input[type='text'] {
+    font-size: 14px;
+    height: 44px;
+    border: 1px solid #DEE2E6;
+    box-sizing: border-box;
+    border-radius: 7.6px;
+  }
+`
+
+export const Required = styled.span`
+  font-weight: 600;
+  font-size: 10px;
+  color: #E63757;
+`
+
+export const SkeletonWrapper = styled.div`
+  margin-top: 20px;
+
+  div {
+    margin-bottom: 15px;
+  }
+`