ordering-ui-admin-external 1.7.4 → 1.8.0

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) {

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

@@ -219,15 +219,15 @@ const HomeUI = (props) => {
         <h1>{t('HOME', 'Home')}</h1>
       </Breadcrumb>
 
-      {projectStatus.loading && (
+      {projectStatus?.loading && (
         <HeaderContainer>
           <Skeleton height={150} />
         </HeaderContainer>
       )}
 
-      {!projectStatus.loading && (
+      {!projectStatus?.loading && (
         <>
-          {!projectStatus.project?.current_status ? (
+          {!projectStatus?.project?.current_status ? (
             <HeaderContainer>
               <WelcomeMsg>{t('WELCOME_TO_ORDERING', 'Welcome to Ordering')}!</WelcomeMsg>
               <GuideMsg>{t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.')}</GuideMsg>

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

@@ -485,7 +485,7 @@ export const MessagesUI = (props) => {
                     <BubbleConsole>
                       {t('ORDER_PLACED_FOR', 'Order placed for')} {' '}
                       <strong>{parseDate(order.created_at)}</strong> {' '}
-                      {t('VIA', 'via')} <strong>{order.app_id}</strong>{' '}
+                      {t('VIA', 'via')} <strong>{order.app_id ? t(order.app_id.toUpperCase(), `${order.app_id}`) : ''}</strong>{' '}
                       <OverlayTrigger
                         placement='top'
                         overlay={

package/src/components/SidebarMenu/index.js

@@ -39,7 +39,9 @@ import {
   MenuContainer,
   MenuContent,
   SubMenu,
-  LanguageSelectorContainer
+  LanguageSelectorContainer,
+  LogoWrapper,
+  PoweredWrapper
 } from './styles'
 
 const SidebarMenuUI = (props) => {
@@ -54,6 +56,7 @@ const SidebarMenuUI = (props) => {
   const [ordering] = useApi()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const windowSize = useWindowSize()
+  const isPoweredByOrderingModule = configs?.powered_by_ordering_module?.value
 
   const ordersSubMenus = [
     {
@@ -366,20 +369,27 @@ const SidebarMenuUI = (props) => {
           className='d-flex flex-column'
         >
           <SidebarHeader>
-            <Image
-              src={configs?.dashboard_logo?.value || theme?.images?.logos?.logotype}
-              onClick={() => handleGoToPage({ page: 'home' })}
-            />
-            <BurgerButton
-              onClick={() => handleMenuCollapse(true)}
-            >
-              <svg viewBox='0 0 50 32'>
-                <path d='M49,4H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,4,49,4z' />
-                <path d='M49,16H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,16,49,16z' />
-                <path d='M49,28H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,28,49,28z' />
-                <path d='M8.1,22.8c-0.3,0-0.5-0.1-0.7-0.3L0.7,15l6.7-7.8c0.4-0.4,1-0.5,1.4-0.1c0.4,0.4,0.5,1,0.1,1.4L3.3,15l5.5,6.2 c0.4,0.4,0.3,1-0.1,1.4C8.6,22.7,8.4,22.8,8.1,22.8z' />
-              </svg>
-            </BurgerButton>
+            <LogoWrapper>
+              <Image
+                src={configs?.dashboard_logo?.value || theme?.images?.logos?.logotype}
+                onClick={() => handleGoToPage({ page: 'home' })}
+              />
+              <BurgerButton
+                onClick={() => handleMenuCollapse(true)}
+              >
+                <svg viewBox='0 0 50 32'>
+                  <path d='M49,4H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,4,49,4z' />
+                  <path d='M49,16H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,16,49,16z' />
+                  <path d='M49,28H19c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S49.6,28,49,28z' />
+                  <path d='M8.1,22.8c-0.3,0-0.5-0.1-0.7-0.3L0.7,15l6.7-7.8c0.4-0.4,1-0.5,1.4-0.1c0.4,0.4,0.5,1,0.1,1.4L3.3,15l5.5,6.2 c0.4,0.4,0.3,1-0.1,1.4C8.6,22.7,8.4,22.8,8.1,22.8z' />
+                </svg>
+              </BurgerButton>
+            </LogoWrapper>
+            {isPoweredByOrderingModule && (
+              <PoweredWrapper>
+                {t('POWERED_BY_ORDERING', 'Powered by Ordering.co')}
+              </PoweredWrapper>
+            )}
           </SidebarHeader>
           <SidebarMainContent>
             <SidebarContent className='d-flex flex-column justify-content-between p-1 pt-0'>

package/src/components/SidebarMenu/styles.js

@@ -72,10 +72,14 @@ export const SidebarInnerContainer = styled.div`
 `
 
 export const SidebarHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+`
+export const LogoWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px;
 
   > img {
     max-width: 150px;
@@ -83,7 +87,6 @@ export const SidebarHeader = styled.div`
     object-fit: contain;
   }
 `
-
 export const BurgerButton = styled.button`
   background-color: transparent;
   border: none;
@@ -232,3 +235,8 @@ export const LanguageSelectorContainer = styled.div`
     }
   }
 `
+export const PoweredWrapper = styled.div`
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+`

package/src/components/Stores/BusinessDelete/index.js

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, CheckPassword as CheckPasswordController } from 'ordering-components-admin-external'
+import FaTrash from '@meronex/icons/fa/FaTrash'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { Button } from '../../../styles/Buttons'
+import { Modal } from '../../Shared'
+
+import {
+  WrapperCheckPassword,
+  ErrorText
+} from './styles'
+
+const BusinessDeleteUI = (props) => {
+  const {
+    checkPasswordStatus,
+    handleChangePassword,
+    getCheckPassword,
+    handleDeleteMultiBusinesses
+  } = props
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+
+  const [checkPasswordModalOpen, setCheckPasswordModalOpen] = useState(false)
+  const [password, setPassword] = useState('')
+  const handlePassword = (e) => {
+    setPassword(e.target.value)
+  }
+
+  const handleModalOpen = () => {
+    setPassword('')
+    setCheckPasswordModalOpen(true)
+  }
+
+  useEffect(() => {
+    handleChangePassword(password)
+  }, [password])
+
+  useEffect(() => {
+    if (checkPasswordStatus.loading || checkPasswordStatus.error !== null) return
+    if (checkPasswordStatus.result === 'OK') {
+      setCheckPasswordModalOpen(false)
+      setPassword('')
+      handleDeleteMultiBusinesses()
+    }
+  }, [checkPasswordStatus])
+
+  return (
+    <>
+      <Button
+        borderRadius='8px'
+        color='secundary'
+        onClick={() => handleModalOpen()}
+      >
+        {width > 600 && t('DELETE', 'Delete')}
+        <FaTrash />
+      </Button>
+
+      <Modal
+        open={checkPasswordModalOpen}
+        width='600px'
+        onClose={() => setCheckPasswordModalOpen(false)}
+      >
+        <WrapperCheckPassword>
+          <h3>{t('CONFIRM_PASSWORD', 'Confirm password')}</h3>
+          <p>{t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}</p>
+          <input
+            autoComplete='new-password'
+            type='password'
+            value={password}
+            placeholder={t('PASSWORD', 'password')}
+            onChange={(e) => handlePassword(e)}
+          />
+          {checkPasswordStatus?.error && (
+            <ErrorText
+              className='text-danger'
+            >
+              {checkPasswordStatus.error}
+            </ErrorText>
+          )}
+          <Button
+            color='primary'
+            borderRadius='7.6px'
+            onClick={() => getCheckPassword()}
+          >
+            {t('CONFIRM', 'Confirm')}
+          </Button>
+        </WrapperCheckPassword>
+      </Modal>
+    </>
+  )
+}
+
+export const BusinessDelete = (props) => {
+  const checkPasswordControlProps = {
+    ...props,
+    UIComponent: BusinessDeleteUI
+  }
+  return <CheckPasswordController {...checkPasswordControlProps} />
+}

package/src/components/Stores/BusinessDelete/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const WrapperCheckPassword = styled.div`
+  padding: 10px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  h3 {
+    font-size: 24px;
+    margin: 0px;
+    font-weight: 600;
+  }
+
+  p {
+    margin-top: 25px;
+    margin-bottom: 10px;
+  }
+
+  input {
+    outline: none;
+    border-radius: 8px;
+    font-size: 16px;
+    border: 1px solid rgba(20, 20, 20, 0.2);
+    width: 100%;
+    padding: 10px 15px;
+    &:focus {
+      border: 1px solid ${props => props.theme.colors.primary};
+    }
+  }
+
+  button {
+    margin-top: 40px;
+    width: 150px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+`
+export const ErrorText = styled.div`
+  text-align: center;
+  margin: 10px 0;
+`

package/src/components/Stores/BusinessDeliveryGroupsDetails/index.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+import { useLanguage, DriversGroupsList as DriversGroupsListController } from 'ordering-components-admin-external'
+import { getStorageItem, removeStorageItem } from '../../../utils'
+import { Alert, Confirm, SearchBar } from '../../Shared'
+import { WizardDelivery } from '../../Delivery/WizardDelivery'
+import { DriversGroupsList } from '../../Delivery/DriversGroupsList'
+
+import {
+  DriversGroupsListingContainer,
+  SearchContainer
+} from './styles'
+
+const DriversGroupsListingDetailsUI = (props) => {
+  const {
+    driversGroupsState,
+    selectedGroupList,
+    handleSelectGroup,
+    handleAllSelectGroup,
+    actionState,
+    handleUpdateDriversGroup,
+  } = props
+
+  const history = useHistory()
+  const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const [isTourOpen, setIsTourOpen] = useState(false)
+  const [currentTourStep, setCurrentTourStep] = useState(4)
+
+  useEffect(() => {
+    if (!actionState?.error) return
+    setAlertState({
+      open: true,
+      content: actionState?.error
+    })
+  }, [actionState?.error])
+
+  const handleOpenTour = () => {
+    setOpenDetails(false)
+    setCurrentTourStep(4)
+    setIsTourOpen(true)
+  }
+
+  useEffect(() => {
+    if (history.location?.state?.isFromTourDriversGroup) {
+      handleOpenTour()
+    }
+  }, [history.location?.state?.isFromTourDriversGroup])
+
+  const getDataFromStorage = async () => {
+    const value = await getStorageItem('isFromDeliveryDriversGroup', true)
+    if (value) {
+      removeStorageItem('isFromDeliveryDriversGroup')
+      handleOpenTour()
+    }
+  }
+  useEffect(() => {
+    getDataFromStorage()
+  }, [])
+
+  return (
+    <>
+      <SearchContainer>
+        <SearchBar
+          lazyLoad
+          isCustomLayout
+          onSearch={val => setSearchValue(val)}
+          search={searchValue}
+          placeholder={t('SEARCH', 'Search')}
+          customClass='searchBar'
+        />
+      </SearchContainer>
+      <DriversGroupsListingContainer>
+        <DriversGroupsList
+          isFromStore
+          driversGroupsState={driversGroupsState}
+          searchValue={searchValue}
+          handleUpdateDriversGroup={handleUpdateDriversGroup}
+          selectedGroupList={selectedGroupList}
+          handleSelectGroup={handleSelectGroup}
+          handleAllSelectGroup={handleAllSelectGroup}
+        />
+      </DriversGroupsListingContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+
+      {isTourOpen && (
+        <WizardDelivery
+          isTourOpen={isTourOpen}
+          setIsTourOpen={setIsTourOpen}
+          currentStep={currentTourStep}
+        />
+      )}
+    </>
+  )
+}
+
+export const DriversGroupsListingDetails = (props) => {
+  const driversGroupsListProps = {
+    ...props,
+    isDriversMangersRequired: true,
+    UIComponent: DriversGroupsListingDetailsUI
+  }
+  return (
+    <DriversGroupsListController {...driversGroupsListProps} />
+  )
+}