ordering-ui-admin-external 1.7.4 → 1.8.1

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

@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components'
+
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - 130px);
+
+  > button {
+    width: fit-content;
+    position: sticky;
+    top: 100%;
+    margin-top: 30px;
+    height: 42px;
+  }
+`
+export const TypeSelectWrapper = styled.div`
+  .select {
+    background: ${props => props.theme.colors.secundary};
+    width: 100%;
+    border: none;
+    font-size: 14px;
+    color: ${props => props.theme.colors.headingColor};
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
+`
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 29px 0 20px 0;
+  position: relative;
+  > div {
+    position: relative !important; 
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  > button {
+    position: absolute;
+    font-size: 14px;
+    padding: 0 5px;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    top: 10px;
+    z-index: 10;
+    border: none;
+    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px;
+    color: ${props => props.theme.colors.headingColor};
+    ${props => props.theme?.rtl ? css`
+      right: 10px;
+    ` : css`
+      left: 10px;
+    `}
+    &:hover {
+      background: #eee;
+    }
+  }
+`
+
+export const ErrorText = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  text-align: center;
+  margin: 20px 0;
+`
+export const FormControl = styled.div`
+  display: flex;
+  flex-direction: column;
+  label {
+    font-size: 14px;
+    margin-bottom: 9px;
+  }
+  input {
+    width: 100%;
+  }
+`
+export const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 29px;
+
+  > div {
+    width: 45%;
+  }
+`
+export const KmlButtonWrapper = styled.div`
+  margin-bottom: 20px;
+`

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

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { DriverGroupDeliveryZoneDetails } from '../DriversGroupsDeliveryZoneDetails'
+import { SideBar } from '../../Shared'
+import { ChevronRight } from 'react-bootstrap-icons'
+import { Checkbox } from '../../../styles'
+
+import {
+  ZoneContainer,
+  DeliveryZonesTable,
+  AddDeliveryZoneButton,
+  ZoneTbody,
+  CheckboxWrapper,
+  DeliveryZonesTableWrapper,
+  CheckSkeleteon,
+  InfoBlock
+} from './styles'
+import Skeleton from 'react-loading-skeleton'
+
+export const DriverGroupDeliveryZoneList = (props) => {
+  const {
+    drivergroup,
+    setIsExtendExtraOpen,
+    handleSuccessUpdate,
+    zoneListState,
+    handleChangeZoneState,
+    handleChangeAllZoneState,
+    handleParentSidebarMove,
+    zoneList,
+    setZoneList,
+    setIsOpenDetails,
+    isOpenDetails
+  } = props
+
+  const [, t] = useLanguage()
+  const [curZone, setCurZone] = useState(null)
+
+  const handleCloseOption = () => {
+    setIsOpenDetails(false)
+    setIsExtendExtraOpen(false)
+    setCurZone(null)
+    handleParentSidebarMove(0)
+  }
+
+  const handleOpenZone = (e, zone) => {
+    const isInvalid = e.target.closest('.zone-enabled')
+    if (isInvalid) return
+    setCurZone(zone)
+    handleParentSidebarMove(500)
+    setIsExtendExtraOpen(true)
+    setIsOpenDetails(true)
+  }
+
+  return (
+    <>
+      <ZoneContainer>
+        {zoneList.loading ? (
+          [...Array(5).keys()].map(i => (
+            <DeliveryZonesTableWrapper key={i}>
+              <CheckSkeleteon>
+                <Skeleton width={18} height={18} />
+              </CheckSkeleteon>
+              <InfoBlock>
+                <Skeleton width='100%' height={18} />
+              </InfoBlock>
+            </DeliveryZonesTableWrapper>
+          ))
+        ) :
+          <DeliveryZonesTable>
+            <thead>
+              <tr>
+                <th>
+                  <CheckboxWrapper>
+                    <Checkbox
+                      checked={zoneListState?.isCheckAll}
+                      onChange={e => handleChangeAllZoneState(e.target.checked)}
+                    />
+                  </CheckboxWrapper>
+                </th>
+                <th>{t('NAME', 'Name')}</th>
+                <th>{t('MINIMUM', 'Minimum')}</th>
+                <th>{t('PRICE', 'Price')}</th>
+                <th />
+              </tr>
+            </thead>
+            {zoneList?.zones?.filter(zone => zone?.type !== 3)?.map(zone => (
+              <ZoneTbody
+                key={zone?.id}
+                active={zone?.id === curZone?.id}
+                onClick={(e) => handleOpenZone(e, zone)}
+              >
+                <tr>
+                  <td>
+                    <CheckboxWrapper className='zone-enabled'>
+                      <Checkbox
+                        checked={!!zoneListState?.changes[zone.id]}
+                        onChange={e => handleChangeZoneState(zone?.id, e?.target?.checked)}
+                      />
+                    </CheckboxWrapper>
+                  </td>
+                  <td>{zone?.name}</td>
+                  <td>{zone?.minimum}</td>
+                  <td>{zone?.price}</td>
+                  <td className='arrow'><ChevronRight /></td>
+                </tr>
+              </ZoneTbody>
+            ))}
+          </DeliveryZonesTable>
+        }
+        <AddDeliveryZoneButton
+          onClick={(e) => handleOpenZone(e, null)}
+        >
+          {t('ADD_DELIVERY_ZONE', 'Add delivery zone')}
+        </AddDeliveryZoneButton>
+      </ZoneContainer>
+      {isOpenDetails && (
+        <SideBar
+          isBorderShow
+          open={isOpenDetails}
+          onClose={() => handleCloseOption()}
+        >
+          <DriverGroupDeliveryZoneDetails
+            zone={curZone}
+            setZoneList={setZoneList}
+            drivergroup={drivergroup}
+            onClose={() => handleCloseOption()}
+            handleSuccessUpdate={handleSuccessUpdate}
+            driverGroupsZones={zoneList}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,87 @@
+import styled, { css } from 'styled-components'
+
+export const ZoneContainer = styled.div`
+  margin: 30px 0 20px 0;
+  @media (min-width: 1000px) {
+    max-width: 500px;
+  }
+`
+
+export const DeliveryZonesTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    tr {
+      th {
+        font-size: 12px;
+        font-weight: 700;
+        padding: 10px 0;
+      }
+    }
+  }
+`
+
+export const DeliveryZonesTableWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  margin-bottom: 20px;
+`
+
+export const CheckSkeleteon = styled.div`
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+`
+
+export const InfoBlock = styled.div`
+  width: 100%;
+`
+
+export const ZoneTbody = styled.tbody`
+  cursor: pointer;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  tr {
+    td {
+      font-size: 14px;
+      padding: 13px 0;
+      &.arrow {
+        font-size: 13px;
+        color: ${props => props.theme.colors.secundaryLight};
+      }
+    }
+  }
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.lightPrimary};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.primary};
+      border-bottom: 1px solid ${props => props.theme.colors.primary};
+    }
+  `}
+`
+export const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const AddDeliveryZoneButton = styled.div`
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 14px;
+  padding: 10px 0;
+  cursor: pointer;
+  width: fit-content;
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`

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

@@ -14,6 +14,8 @@ import { DriversGroupBusinesses } from '../DriversGroupBusinesses'
 import { DriversGroupPaymethods } from '../DriversGroupPaymethods'
 import { DriversGroupLogistics } from '../DriversGroupLogistics'
 import { DriversGroupLogs } from '../DriversGroupLogs'
+import { DriverGroupDeliveryDetails } from '../DriversGroupDeliveryDetails'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   DetailsContainer,
@@ -30,11 +32,13 @@ const DriversGroupDetailsUI = (props) => {
     handleParentSidebarMove,
     handleDeleteDriversGroup,
     handleNextTour,
-    handleUpdateDriversGroup
+    handleUpdateDriversGroup,
+    setIsExtendExtraOpen
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
   const [configState] = useConfig()
 
   const autoAssignType = configState?.configs?.autoassign_type?.value
@@ -44,12 +48,14 @@ const DriversGroupDetailsUI = (props) => {
   const [driversGroupMenus, setDriversGroupMenus] = useState([])
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isOpenDetails, setIsOpenDetails] = useState(false)
 
   useEffect(() => {
     const _driversGroupMenus = !driversGroupState.driversGroup
       ? [
         { key: 'general', value: t('GENERAL', 'General') },
-        { key: 'businesses', value: t('BUSINESSES', 'Businesses') }
+        { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
+        { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
       ]
       : (useAdvanced && autoAssignType !== 'basic')
         ? [
@@ -57,18 +63,20 @@ const DriversGroupDetailsUI = (props) => {
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
           { key: 'advanced_logistics', value: t('ADVANCED_LOGISTICS', 'Advanced logistics') },
-          { key: 'logs', value: t('LOGS', 'Logs') }
+          { key: 'logs', value: t('LOGS', 'Logs') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
         ]
         : [
           { key: 'general', value: t('GENERAL', 'General') },
           { key: 'businesses', value: t('BUSINESSES', 'Businesses') },
           { key: 'paymethods', value: t('PAYMENT_METHODS', 'Payment methods') },
-          { key: 'logs', value: t('LOGS', 'Logs') }
+          { key: 'logs', value: t('LOGS', 'Logs') },
+          { key: 'delivery_zones', value: t('DELIVERY_ZONES', 'Delivery Zones') }
         ]
     setDriversGroupMenus(_driversGroupMenus)
   }, [useAdvanced])
 
-  const onDeleteGroup = (driversGroupId) => {
+  const onDeleteGroup = () => {
     setConfirm({
       open: true,
       content: t('QUESTION_DELETE_DRIVER_GROUP', 'Are you sure to remove this driver group?'),
@@ -79,6 +87,10 @@ const DriversGroupDetailsUI = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (width > 1000) setIsExtendExtraOpen(false)
+  }, [width])
+
   const handleNextClick = () => {
     setShowMenu('businesses')
     handleNextTour()
@@ -90,7 +102,9 @@ const DriversGroupDetailsUI = (props) => {
 
   useEffect(() => {
     handleParentSidebarMove(0)
-  }, [showMenu])
+    setIsOpenDetails(false)
+    setIsExtendExtraOpen(false)
+  }, [showMenu, driversGroupState.driversGroup?.id])
 
   useEffect(() => {
     if (!actionState?.error) return
@@ -166,6 +180,15 @@ const DriversGroupDetailsUI = (props) => {
         {showMenu === 'logs' && (
           <DriversGroupLogs driversGroupId={driversGroupState.driversGroup?.id} />
         )}
+        {showMenu === 'delivery_zones' && (
+          <DriverGroupDeliveryDetails {...props}
+            handleParentSidebarMove={handleParentSidebarMove}
+            drivergroup={driversGroupState.driversGroup}
+            setIsExtendExtraOpen={setIsExtendExtraOpen}
+            setIsOpenDetails={setIsOpenDetails}
+            isOpenDetails={isOpenDetails}
+          />
+        )}
       </DetailsContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -0,0 +1,123 @@
+import React, { useState } from 'react'
+import {
+  useLanguage,
+  DriverGroupDeliveryZone as DriverGroupDeliveryZoneController
+} from 'ordering-components-admin-external'
+import { DriverGroupDeliveryZoneInformation } from '../DriversGroupDeliveryZoneInformation'
+import { ThreeDots } from 'react-bootstrap-icons'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { useTheme } from 'styled-components'
+import { Confirm } from '../../Shared'
+
+import {
+  Container,
+  Header,
+  TabContainer,
+  Tab,
+  ActionSelectorWrapper
+} from './styles'
+
+const DriverGroupDeliveryZoneDetailsUI = (props) => {
+  const {
+    drivergroup,
+    driverGroupsZones,
+    zoneState,
+    formState,
+    handleChangeInput,
+    handleChangeFormState,
+    handleUpdateDriverGroupDeliveryZone,
+    handleAddDriverGroupDeliveryZone,
+    handleDeleteDriverGroupDeliveryZone,
+    handleUploadKmlFiles,
+    kmlData,
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [selectedMenuOption, setSelectedMenuOption] = useState('information')
+  const tabs = [
+    { key: 'information', content: t('INFORMATION', 'Information') }
+  ]
+
+  const onClickDelete = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_DELIVERYZONE', 'Are you sure that you want to delete this delivery zone?'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteDriverGroupDeliveryZone()
+      }
+    })
+  }
+
+  return (
+    <>
+      <Container>
+        <Header>
+          <h1>
+            {zoneState?.zone ? zoneState?.zone?.name : t('ZONE_DELIVERY_SETTINGS', 'Zone delivery settings')}
+          </h1>
+          <ActionSelectorWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+            >
+              <Dropdown.Item
+                onClick={() => onClickDelete()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </ActionSelectorWrapper>
+        </Header>
+        <TabContainer>
+          {tabs?.map(tab => (
+            <Tab
+              key={tab?.key}
+              active={selectedMenuOption === tab?.key}
+              onClick={() => setSelectedMenuOption(tab?.key)}
+            >
+              {tab?.content}
+            </Tab>
+          ))}
+        </TabContainer>
+
+        {selectedMenuOption === 'information' && (
+          <DriverGroupDeliveryZoneInformation
+            drivergroup={drivergroup}
+            zone={zoneState?.zone}
+            driverGroupsZones={driverGroupsZones?.zones}
+            formState={formState}
+            handleChangeInput={handleChangeInput}
+            handleChangeFormState={handleChangeFormState}
+            handleUpdateDriverGroupDeliveryZone={handleUpdateDriverGroupDeliveryZone}
+            handleAddDriverGroupDeliveryZone={handleAddDriverGroupDeliveryZone}
+            kmlData={kmlData}
+            handleUploadKmlFiles={handleUploadKmlFiles}
+          />
+        )}
+      </Container>
+      <Confirm
+        width='700px'
+        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}
+      />
+    </>
+  )
+}
+
+export const DriverGroupDeliveryZoneDetails = (props) => {
+  const driverGroupDeliveryZoneProps = {
+    ...props,
+    UIComponent: DriverGroupDeliveryZoneDetailsUI
+  }
+  return <DriverGroupDeliveryZoneController {...driverGroupDeliveryZoneProps} />
+}

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

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  
+  > button {
+    margin: 20px 0;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    color: ${props => props.theme.colors.headingColor};
+    margin-bottom: 0;
+  }
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+`
+
+export const TabContainer = styled.div`
+  width: 100%;
+  display: flex;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin-bottom: 24px;
+  margin-top: 15px;
+`
+
+export const Tab = styled.div`
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    font-weight: 500;
+
+    &::after {
+      content: "";
+      background: #344050;
+      height: 1px;
+      position: absolute;
+      width: 100%;
+      bottom: -1px;
+      ${props => props.theme?.rtl ? css`
+        right: 0;
+      ` : css`
+        left: 0;
+      `}
+    }
+  `}
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors?.lightGray};
+  `}
+`
+export const ActionSelectorWrapper = styled.div`
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px 5px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`

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

@@ -32,7 +32,7 @@ export const DriversGroupsList = (props) => {
     handleOpenDetails,
     handleUpdateDriversGroup,
     selectedGroupList,
-
+    isFromStore,
     handleSelectGroup,
     handleAllSelectGroup
   } = props
@@ -79,7 +79,7 @@ export const DriversGroupsList = (props) => {
   const handleClickDriverGroup = (e, group) => {
     const isInvalid = e.target.closest('.group-checkbox') || e.target.closest('.group-enabled')
     if (isInvalid) return
-    handleOpenDetails(group)
+    !isFromStore && handleOpenDetails(group)
   }
 
   const getTypeTag = (type) => {

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

@@ -45,6 +45,7 @@ const DriversGroupsListingUI = (props) => {
   const [moveDistance, setMoveDistance] = useState(0)
   const [openDetails, setOpenDetails] = useState(false)
   const [curDriversGroup, setCurDriversGroup] = useState(null)
+  const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
 
   const [isTourOpen, setIsTourOpen] = useState(false)
   const [currentTourStep, setCurrentTourStep] = useState(4)
@@ -186,7 +187,7 @@ const DriversGroupsListingUI = (props) => {
       {openDetails && (
         <SideBar
           sidebarId='driver_group_details'
-          defaultSideBarWidth={550 + moveDistance}
+          defaultSideBarWidth={!isExtendExtraOpen ? 540 + moveDistance : 1040}
           open={openDetails}
           moveDistance={moveDistance}
           noAnimation={isTourOpen}
@@ -207,6 +208,8 @@ const DriversGroupsListingUI = (props) => {
             companies={driversCompanyList?.companies}
             handleUpdateDriversGroup={handleUpdateDriversGroup}
             handleParentSidebarMove={val => setMoveDistance(val)}
+            setIsExtendExtraOpen={setIsExtendExtraOpen}
+            isExtendExtraOpen={isExtendExtraOpen}
             onClose={() => {
               setOpenDetails(false)
               if (isTourOpen) {