ordering-ui-admin-external 1.25.0 → 1.26.0

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { useLanguage, useConfig, CustomDomain as CustomDomainController } from 'ordering-components-admin-external'
 import { Select } from '../../../styles/Select/FirstSelect'
-import { CheckSquareFill as CheckedIcon, Square as UnCheckedIcon } from 'react-bootstrap-icons'
-import { Button, Input } from '../../../styles'
+import { CheckSquareFill as CheckedIcon, Square as UnCheckedIcon, InfoCircle } from 'react-bootstrap-icons'
+import { Button, Input, IconButton } from '../../../styles'
 import { Alert } from '../../Shared'
 import {
   Container,
@@ -10,7 +10,10 @@ import {
   SelectWrapper,
   Option,
   ButtonGroup,
-  CheckBoxWrapper
+  CheckBoxWrapper,
+  CustomDomainInfo,
+  CustomDomainInfoContent,
+  TitleWrapper
 } from './styles'
 
 const CustomDomainUI = (props) => {
@@ -66,7 +69,19 @@ const CustomDomainUI = (props) => {
       <Container>
         <h1>{t('CUSTOM_DOMAIN', 'Custom domain')}</h1>
         <FormControl>
-          <label>{t('DOMAIN', 'Domain')}</label>
+          <TitleWrapper>
+            <label>{t('DOMAIN', 'Domain')}</label>
+            <CustomDomainInfo>
+              <IconButton
+                color='primary'
+              >
+                <InfoCircle />
+              </IconButton>
+              <CustomDomainInfoContent>
+                <span>{t('CUSTOM_DOMAIN_NOTIFY', 'Please make sure that your DNS CNAME is pointing {project-name}.tryordering.com')}</span>
+              </CustomDomainInfoContent>
+            </CustomDomainInfo>
+          </TitleWrapper>
           <Input
             placeholder='www.yourdomain.com'
             value={formState?.changes?.domain || ''}
@@ -85,18 +100,22 @@ const CustomDomainUI = (props) => {
             />
           </SelectWrapper>
         </FormControl>
-        <CheckBoxWrapper onClick={() => setShowMapInput(prev => !prev)}>
-          {showMapInput ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
-          <span>{t('I_HAVE_GOOGLE_MAPS_KEY_WANT_SHARE_IT', 'I have my Google Maps API Key, I want to share it')}</span>
-        </CheckBoxWrapper>
-        {showMapInput && (
-          <FormControl>
-            <label>{t('GOOGLE_MAP_API_KEY', 'Google map api key')}</label>
-            <Input
-              value={googleMapKey}
-              onChange={(e) => setGoogleMapKey(e.target.value)}
-            />
-          </FormControl>
+        {!configs?.google_maps_api_key?.value && (
+          <>
+            <CheckBoxWrapper onClick={() => setShowMapInput(prev => !prev)}>
+              {showMapInput ? <CheckedIcon className='active' /> : <UnCheckedIcon />}
+              <span>{t('I_HAVE_GOOGLE_MAPS_KEY_WANT_SHARE_IT', 'I have my Google Maps API Key, I want to share it')}</span>
+            </CheckBoxWrapper>
+            {showMapInput && (
+              <FormControl>
+                <label>{t('GOOGLE_MAP_API_KEY', 'Google map api key')}</label>
+                <Input
+                  value={googleMapKey}
+                  onChange={(e) => setGoogleMapKey(e.target.value)}
+                />
+              </FormControl>
+            )}
+          </>
         )}
         <ButtonGroup>
           <Button

package/src/components/MyProducts/CustomDomain/styles.js

@@ -13,7 +13,7 @@ export const Container = styled.div`
 export const FormControl = styled.div`
   margin-bottom: 20px;
 
-  label {
+  > label {
     display: block;
     margin-bottom: 12px;
     font-weight: 400;
@@ -25,6 +25,19 @@ export const FormControl = styled.div`
   }
 `
 
+export const TitleWrapper = styled.div`
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  label {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 0;
+  }
+`
+
 export const SelectWrapper = styled.div`
   > div {
     width: 100%;
@@ -101,3 +114,62 @@ export const CheckBoxWrapper = styled.div`
     user-select: none;
   }
 `
+
+export const CustomDomainInfo = styled.div`
+  position: relative;
+
+  > button {
+    height: 21px;
+    svg {
+      width: 14px;
+      height: 14px;
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const CustomDomainInfoContent = 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: -100px;
+  ${props => props.theme.rtl && css`
+    left: 0px;s
+    right: initial;
+  `}
+
+  span {
+    display: block;
+  }
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    padding-left: 5px;
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 10px 16px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`

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

@@ -23,6 +23,7 @@ import { CustomDomain } from '../CustomDomain'
 import { bytesConverter } from '../../../utils'
 import { SelectBusiness } from './SelectBusiness'
 import { SelectFranchise } from './SelectFranchise'
+import { AdvancedLayouts } from '../AdvancedLayouts'
 import {
   Container,
   HeaderTitleContainer,
@@ -53,7 +54,9 @@ import {
   CustomeDomainDesc,
   TitleWrapper,
   CustomDomainInfo,
-  CustomDomainInfoContent
+  CustomDomainInfoContent,
+  WebsiteThemeBlock,
+  WebsitePriviewImageWrapper
 } from './styles'
 
 const OrderingWebsiteUI = (props) => {
@@ -87,10 +90,18 @@ const OrderingWebsiteUI = (props) => {
   const [footerContent, setFooterContent] = useState(false)
   const [selectedSetting, setSelectedSetting] = useState('basic')
   const [isCustomDomain, setIsCustomDomain] = useState(false)
+  const [selectedSubSetting, setSelectedSubSetting] = useState('')
+
+  const previewImages = {
+    marketplace: theme.images.preview.marketplace,
+    franchise: theme.images.preview.franchise,
+    single_store: theme.images.preview.singleStore
+  }
 
   const settingsList = [
-    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') }
-    // { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
+    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') },
+    { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
+    // { key: 'advanced_layouts', name: t('ADVANCED_LAYOUTS', 'Advanced Layouts') }
   ]
 
   const handleClickImage = (type) => {
@@ -169,6 +180,11 @@ const OrderingWebsiteUI = (props) => {
     handleChangeValue(content, 'theme_settings', `values.${type}`)
   }
 
+  const handleChangeSubSetting = (setting) => {
+    setSelectedSubSetting(setting)
+    orderingTheme.themes[0]?.values && setAdvancedValues(JSON.parse(JSON.stringify(orderingTheme.themes[0]?.values)))
+  }
+
   return (
     <>
       <Container>
@@ -373,42 +389,49 @@ const OrderingWebsiteUI = (props) => {
                 {orderingTheme?.loading ? (
                   <Skeleton height={20} width={150} />
                 ) : (
-                  <>
-                    <RadioItem
-                      onClick={() => handleChangeValue('marketplace', 'website_theme', 'type')}
-                    >
-                      {themeValues?.website_theme?.components?.type === 'marketplace' ? <RecordCircleFill className='active' /> : <Circle />}
-                      <span>{t('MARKETPLACE', 'Marketplace')}</span>
-                    </RadioItem>
+                  <WebsiteThemeBlock>
+                    <div>
+                      <RadioItem
+                        onClick={() => handleChangeValue('marketplace', 'website_theme', 'type')}
+                      >
+                        {themeValues?.website_theme?.components?.type === 'marketplace' ? <RecordCircleFill className='active' /> : <Circle />}
+                        <span>{t('MARKETPLACE', 'Marketplace')}</span>
+                      </RadioItem>
 
-                    <RadioItem
-                      onClick={() => handleChangeValue('franchise', 'website_theme', 'type')}
-                    >
-                      {themeValues?.website_theme?.components?.type === 'franchise' ? <RecordCircleFill className='active' /> : <Circle />}
-                      <span>{t('REPORT_HEADER_FRANCHISES', 'Franchise')}</span>
-                    </RadioItem>
-                    {themeValues?.website_theme?.components?.type === 'franchise' && (
-                      <SelectFranchise
-                        defaultValue={themeValues?.website_theme?.components?.franchise_slug}
-                        franchisesList={franchisesList}
-                        onChange={value => handleChangeValue(value, 'website_theme', 'franchise_slug')}
-                      />
-                    )}
+                      <RadioItem
+                        onClick={() => handleChangeValue('franchise', 'website_theme', 'type')}
+                      >
+                        {themeValues?.website_theme?.components?.type === 'franchise' ? <RecordCircleFill className='active' /> : <Circle />}
+                        <span>{t('REPORT_HEADER_FRANCHISES', 'Franchise')}</span>
+                      </RadioItem>
+                      {themeValues?.website_theme?.components?.type === 'franchise' && (
+                        <SelectFranchise
+                          defaultValue={themeValues?.website_theme?.components?.franchise_slug}
+                          franchisesList={franchisesList}
+                          onChange={value => handleChangeValue(value, 'website_theme', 'franchise_slug')}
+                        />
+                      )}
 
-                    <RadioItem
-                      onClick={() => handleChangeValue('single_store', 'website_theme', 'type')}
-                    >
-                      {themeValues?.website_theme?.components?.type === 'single_store' ? <RecordCircleFill className='active' /> : <Circle />}
-                      <span>{t('SINGLE_STORE', 'Single Store')}</span>
-                    </RadioItem>
-                    {themeValues?.website_theme?.components?.type === 'single_store' && (
-                      <SelectBusiness
-                        defaultValue={themeValues?.website_theme?.components?.business_slug}
-                        businessesList={businessesList}
-                        onChange={value => handleChangeValue(value, 'website_theme', 'business_slug')}
-                      />
+                      <RadioItem
+                        onClick={() => handleChangeValue('single_store', 'website_theme', 'type')}
+                      >
+                        {themeValues?.website_theme?.components?.type === 'single_store' ? <RecordCircleFill className='active' /> : <Circle />}
+                        <span>{t('SINGLE_STORE', 'Single Store')}</span>
+                      </RadioItem>
+                      {themeValues?.website_theme?.components?.type === 'single_store' && (
+                        <SelectBusiness
+                          defaultValue={themeValues?.website_theme?.components?.business_slug}
+                          businessesList={businessesList}
+                          onChange={value => handleChangeValue(value, 'website_theme', 'business_slug')}
+                        />
+                      )}
+                    </div>
+                    {themeValues?.website_theme?.components?.type && (
+                      <WebsitePriviewImageWrapper>
+                        <img src={previewImages?.[themeValues?.website_theme?.components?.type]} />
+                      </WebsitePriviewImageWrapper>
                     )}
-                  </>
+                  </WebsiteThemeBlock>
                 )}
               </InnerBlock>
             </InputFormWrapper>
@@ -593,7 +616,36 @@ const OrderingWebsiteUI = (props) => {
             </Button>
           </FormWrapper>
         )}
-        {selectedSetting === 'advanced' && !orderingTheme?.loading && (
+        {selectedSetting === 'advanced' && (
+          <InputFormWrapper>
+            <TitleWrapper isMargin>
+              <h4>{t('SETTINGS', 'Settings')}</h4>
+              <CustomDomainInfo>
+                <IconButton
+                  color='primary'
+                >
+                  <InfoCircleFill />
+                </IconButton>
+                <CustomDomainInfoContent>
+                  <span>{t('ADVANCED_SETTING_HELP', 'For now you can\'t use layouts and advanced setting together, if you change between layouts and advance settings the settings will be reset to default')}</span>
+                </CustomDomainInfoContent>
+              </CustomDomainInfo>
+            </TitleWrapper>
+            <RadioItem
+              onClick={() => handleChangeSubSetting('advanced')}
+            >
+              {selectedSubSetting === 'advanced' ? <RecordCircleFill className='active' /> : <Circle />}
+              <span>{t('ADVANCED_SETTINGS', 'Advanced Settings')}</span>
+            </RadioItem>
+            <RadioItem
+              onClick={() => handleChangeSubSetting('advanced_layouts')}
+            >
+              {selectedSubSetting === 'advanced_layouts' ? <RecordCircleFill className='active' /> : <Circle />}
+              <span>{t('ADVANCED_LAYOUTS', 'Advanced Layouts')}</span>
+            </RadioItem>
+          </InputFormWrapper>
+        )}
+        {selectedSubSetting === 'advanced' && !orderingTheme?.loading && (
           <AdvancedSettings
             themesList={themesList}
             advancedValues={advancedValues}
@@ -601,6 +653,14 @@ const OrderingWebsiteUI = (props) => {
             handleUpdateSiteTheme={handleUpdateSiteTheme}
           />
         )}
+        {selectedSubSetting === 'advanced_layouts' && !orderingTheme?.loading && (
+          <AdvancedLayouts
+            themesList={themesList}
+            advancedValues={advancedValues}
+            setAdvancedValues={setAdvancedValues}
+            handleUpdateSiteTheme={handleUpdateSiteTheme}
+          />
+        )}
       </Container>
       <Alert
         title={t('ORDERING', 'Ordering')}

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

@@ -495,6 +495,9 @@ export const CustomeDomainDesc = styled.p`
 export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
+  ${({ isMargin }) => isMargin && css`
+    margin-bottom: 20px;
+  `}
 `
 
 export const CustomDomainInfo = styled.div`
@@ -519,6 +522,7 @@ export const CustomDomainInfoContent = styled.div`
   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;
@@ -604,3 +608,37 @@ export const SelectWrapper = styled.div`
     }
   }
 `
+
+export const WebsiteThemeBlock = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 20px;
+
+  .select {
+    .list {
+      left: 0;
+      right: initial;
+    }
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+`
+
+export const WebsitePriviewImageWrapper = styled.div`
+  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
+  img {
+    height: auto;
+    width: 100%;
+    margin-bottom: 15px;
+  }
+  @media (min-width: 768px) {
+    img {
+      height: 200px;
+      margin-bottom: 0;
+    }
+  }
+`

package/src/components/Orders/AllInOne/DriversManager/index.js

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react'
+import { useConfig, DriversList as DriversController } from 'ordering-components-admin-external'
+import { OrdersLateralBar } from '../../OrdersLateralBar'
+import { GoogleMapsApiKeySettingButton } from '../../GoogleMapsApiKeySettingButton'
+import { DriversOnlineOfflineFilter } from '../../DriversOnlineOfflineFilter'
+import { DriversBusyStatusFilter } from '../../DriversBusyStatusFilter'
+import { DriversList } from '../../DriversList'
+
+import {
+  DriversHeader,
+  DriversContainer,
+  DriversContent,
+
+  DriverListContainer,
+  FilterContainer,
+  WrapperDriversList
+} from './styles'
+
+const DriversManagerUI = (props) => {
+  const {
+    driversIsOnline,
+    driversList,
+    handleChangeDriverIsOnline,
+    driversSubfilter,
+    handleChangeDriversSubFilter,
+    onlineDrivers,
+    offlineDrivers,
+    setMapsData
+  } = props
+
+  const [configState] = useConfig()
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+
+  const numberOfonlineDrivers = onlineDrivers.length
+  const numberOfofflineDrivers = offlineDrivers.length
+  const numberOfbusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => ele.busy).length : offlineDrivers.filter(ele => ele.busy).length
+  const numberOfnotBusyDrivers = driversIsOnline ? onlineDrivers.filter(ele => !ele.busy).length : offlineDrivers.filter(ele => !ele.busy).length
+
+  const [isOpenDriverOrders, setIsOpenDriverOrders] = useState(false)
+  const [selectedDriver, setSelectedDriver] = useState(null)
+  const [openDriver, setOpenDriver] = useState(null)
+
+  const handleBackRedirect = () => {
+    setIsOpenDriverOrders(false)
+  }
+
+  const handleChangeDriver = (driver) => {
+    if (selectedDriver?.id === driver.id) {
+      setSelectedDriver(null)
+    } else {
+      setSelectedDriver(driver)
+    }
+  }
+
+  const handleOpenDriverOrders = (driver) => {
+    setOpenDriver(driver)
+    setIsOpenDriverOrders(true)
+  }
+
+  useEffect(() => {
+    setSelectedDriver(null)
+  }, [driversIsOnline])
+
+  useEffect(() => {
+    setMapsData({
+      driversIsOnline: driversIsOnline,
+      onlineDrivers: onlineDrivers,
+      offlineDrivers: offlineDrivers,
+      selectedDriver: selectedDriver
+    })
+  }, [driversIsOnline, selectedDriver, onlineDrivers, offlineDrivers])
+
+  return (
+    <>
+      <DriversContainer>
+        <DriversHeader>
+          {!googleMapsApiKey && (
+            <GoogleMapsApiKeySettingButton />
+          )}
+        </DriversHeader>
+        <DriversContent>
+          <DriverListContainer>
+            <FilterContainer>
+              <DriversOnlineOfflineFilter
+                driversIsOnline={driversIsOnline}
+                handleChangeDriverIsOnline={handleChangeDriverIsOnline}
+                numberOfonlineDrivers={numberOfonlineDrivers}
+                numberOfofflineDrivers={numberOfofflineDrivers}
+              />
+              <DriversBusyStatusFilter
+                driversSubfilter={driversSubfilter}
+                handleChangeDriversSubFilter={handleChangeDriversSubFilter}
+                numberOfbusyDrivers={numberOfbusyDrivers}
+                numberOfnotBusyDrivers={numberOfnotBusyDrivers}
+              />
+            </FilterContainer>
+            <WrapperDriversList>
+              <DriversList
+                hidePhoto
+                loading={driversList.loading}
+                driversIsOnline={driversIsOnline}
+                onlineDrivers={onlineDrivers}
+                offlineDrivers={offlineDrivers}
+                selectedDriver={selectedDriver}
+                handleChangeDriver={handleChangeDriver}
+                handleOpenDriverOrders={handleOpenDriverOrders}
+              />
+            </WrapperDriversList>
+          </DriverListContainer>
+        </DriversContent>
+
+        {isOpenDriverOrders && openDriver && (
+          <OrdersLateralBar
+            isDriver
+            open={isOpenDriverOrders}
+            user={openDriver}
+            onClose={() => handleBackRedirect()}
+          />
+        )}
+      </DriversContainer>
+    </>
+  )
+}
+
+export const DriversManager = (props) => {
+  const DriversControlProps = {
+    ...props,
+    asDashboard: true,
+    propsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification'],
+    UIComponent: DriversManagerUI
+  }
+  return (
+    <>
+      <DriversController {...DriversControlProps} />
+    </>
+  )
+}

package/src/components/Orders/AllInOne/DriversManager/styles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const DriversContainer = styled.div`
+  box-sizing: border-box;
+`
+
+export const DriversHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  > div:last-child {
+    margin-top: 20px;
+  }
+  input {
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+  }
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    > div:last-child {
+      margin-top: 0px;
+    }
+  }
+`
+
+export const DriversContent = styled.div`
+`
+
+export const DriverListContainer = styled.div`
+  height: 100%;
+  overflow: hidden;
+  margin-top: 20px;
+  @media (min-width: 992px) {
+    width: 350px;
+    max-width: 350px;
+    margin-top: 0px;
+  }
+`
+export const FilterContainer = styled.div`
+  position: sticky;
+  top: 0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  z-index: 100;
+`
+export const WrapperDriversList = styled.div`
+  overflow-x: hidden;
+  @media (min-width: 992px) {
+    max-height: calc(var(--vh, 1vh) * 100 - 410px);
+  }
+`