ordering-ui-admin-external 1.25.0 → 1.26.0

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, 
+  DriversList as CompanysController
+ } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Select } from '../../../styles/Select'
+import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import {
+  Option,
+  OptionContent,
+  CompanyNameContainer,
+  WrapperCompanyImage,
+  CompanyImage,
+  CompanyName,
+  CompanyText,
+  PlaceholderTitle
+} from './styles'
+
+const CompanySelectorUI = (props) => {
+  const {
+    isFirstSelect,
+    order,
+    companysList,
+    defaultValue,
+    isPhoneView,
+    isFilterView,
+    small,
+    padding,
+    orderView,
+    handleAssignDriverCompany,
+    handleChangeCompany,
+    filterValues,
+    isTourOpen,
+    setCurrentTourStep,
+    handleOpenMessages
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [defaultOption, setDefaultOption] = useState(null)
+  const [companysOptionList, setCompanysOptionList] = useState([])
+  const [companyssMultiOptionList, setCompanysMultiOptionList] = useState([])
+  const [searchValue, setSearchValue] = useState(null)
+  const companysLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+
+  useEffect(() => {
+    const _companysOptionList = [
+      {
+        value: 'default',
+        content: (
+          <Option
+            padding={orderView ? padding : '0px'}
+          >
+            {orderView ? (
+              <>
+                <WrapperCompanyImage small={small} className='driver-photo'>
+                  <CompanyImage bgimage={company.logo || theme?.images?.icons?.noDriver} small={small} />
+                </WrapperCompanyImage>
+                <OptionContent>
+                  <CompanyNameContainer className='driver-info'>
+                    <CompanyName small={small}>{t('NO_COMPANY', 'No Company')}</CompanyName>
+                  </CompanyNameContainer>
+                </OptionContent>
+              </>
+            ) : (
+              t('SELECT_COMPANY', 'Select company')
+            )}
+          </Option>
+        ),
+        color: 'primary',
+        disabled: !isFilterView,
+        showDisable: true
+      }
+    ]
+    if (!isFilterView) {
+      _companysOptionList.push({
+        value: 'remove',
+        content: (
+          <Option isRemove>{t('REMOVE_COMPANY', 'Remove assigned company')}</Option>
+        ),
+        disabled: defaultValue === 'default'
+      })
+    }
+    if (!companysList.loading) {
+      let _companysList
+      if (searchValue) {
+        _companysList = companysList.companys.filter(company => (company.name).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      } else {
+        _companysList = companysList.companys
+      }
+      const _companysOptionListTemp = _companysList.map((company, i) => {
+        return {
+          value: company.id,
+          showDisable: isFilterView ? true : !(isFilterView || !company?.busy),
+          content: (
+            <Option small={small} isPhoneView={isPhoneView} padding={padding} isFilterView={isFilterView}>
+              <WrapperCompanyImage small={small} className='driver-photo'>
+                <CompanyImage bgimage={company.logo || theme.images.icons?.noDriver} small={small} />
+              </WrapperCompanyImage>
+              <OptionContent>
+                <CompanyNameContainer className='driver-info'>
+                  <CompanyName small={small}>{company.name}</CompanyName>
+                  <CompanyText small={small}>{t('COMPANY', 'Company')}</CompanyText>
+                </CompanyNameContainer>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      setCompanysMultiOptionList(_companysOptionListTemp)
+
+      for (const option of _companysOptionListTemp) {
+        _companysOptionList.push(option)
+      }
+    }
+    setCompanysOptionList(_companysOptionList)
+  }, [companysList, defaultValue, searchValue])
+
+  const changeCompany = (companyId) => {
+    if (isFilterView) {
+      if (companyId === 'default') {
+        handleChangeCompany(null)
+      } else {
+        handleChangeCompany(companyId)
+      }
+      return
+    }
+    if (companyId === 'default') return
+    if (companyId === 'remove') {
+      companyId = null
+    }
+    handleAssignDriverCompany({ orderId: order.id, companyId: companyId })
+    if (isTourOpen && setCurrentTourStep) {
+      handleOpenMessages('chat')
+      setTimeout(() => {
+        isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
+      }, 50)
+    }
+  }
+
+  useEffect(() => {
+    setDefaultOption(defaultValue)
+  }, [defaultValue])
+
+  const Placeholder = <PlaceholderTitle>{t('SELECT_COMPANY', 'Select company')}</PlaceholderTitle>
+
+  const handleSearch = (val) => {
+    setSearchValue(val)
+  }
+
+  if (isFilterView) {
+    return (
+      <>
+        {!companysList.loading ? (
+          <MultiSelect
+            defaultValue={filterValues.companyIds}
+            placeholder={Placeholder}
+            options={companyssMultiOptionList}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px'
+            onChange={(company) => handleChangeCompany(company)}
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
+          />
+        ) : (
+          <MultiSelect
+            defaultValue='default'
+            options={companysLoading}
+            optionInnerMargin='10px'
+            optionInnerMaxHeight='150px' 
+            className='driver-select'
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
+          />
+        )}
+      </>
+    )
+  } else {
+    return (
+      <>
+        {!companysList.loading ? (
+          <>
+            {isFirstSelect ? (
+              <FirstSelect
+                defaultValue={defaultOption || 'default'}
+                options={companysOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(companyId) => changeCompany(companyId)}
+                isShowSearchBar
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            ) : (
+              <Select
+                defaultValue={defaultOption || 'default'}
+                options={companysOptionList}
+                optionInnerMaxHeight='200px'
+                onChange={(companyId) => changeCompany(companyId)}
+                isShowSearchBar
+                searchBarIsNotLazyLoad
+                searchBarPlaceholder={t('SEARCH', 'Search')}
+                searchBarIsCustomLayout
+                searchValue={searchValue}
+                handleChangeSearch={handleSearch}
+                className='driver-select'
+              />
+            )}
+          </>
+        ) : (
+          <>
+            <Select
+              placeholder={t('SELECT_COMPANY', 'Select company')}
+              defaultValue='default'
+              options={companysLoading}
+              optionInnerMargin='10px'
+              optionInnerMaxHeight='200px'
+              className='driver-select'
+            />
+          </>
+        )}
+      </>
+    )
+  }
+}
+
+export const CompanySelector = (props) => {
+  const CompanysControlProps = {
+    ...props,
+    UIComponent: CompanySelectorUI,
+    propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
+  }
+  return (
+    <>
+      <CompanysController {...CompanysControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,142 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: ${({ padding }) => padding || '5px 10px'};
+  white-space: nowrap;
+  ${({ isPhoneView }) => isPhoneView && css`
+    width: 100%;
+  `}
+  ${({ isRemove }) => isRemove && css`
+    color: ${props => props.theme.colors.danger};
+    padding: 3px 10px;
+    font-size: 14px;
+  `}
+
+  img {
+    width: 45px;
+    border-radius: 8px;
+  }
+
+  ${({ small }) => small && css`
+    padding: ${({ padding }) => padding || '5px 0px'};
+    img {
+      width: 25px;
+    }
+  `}
+
+  @media (max-width: 576px) {
+    padding: ${({ padding }) => padding || '5px 0px'};
+    ${({ isFilterView }) => isFilterView && css`
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    `}
+  }
+`
+
+export const OptionContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const CompanyNameContainer = styled.div`
+  line-height: 1.3;
+  color: #263238;
+`
+
+export const CompanyName = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: ${props => props.theme.colors.headingColor};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  margin: 0px;
+
+  ${({ small }) => small && css`
+    font-weight: 400;
+  `}
+
+  @media (max-width: 576px) {
+    max-width: 90px;
+  }
+`
+export const CompanyText = styled.span`
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  ${({ small }) => small && css`
+    display: none;
+  `}
+`
+
+export const WrapperCompanyImage = styled.div`
+  width: 45px;
+  height: 45px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  ${({ small }) => small && css`
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    svg {
+      padding: 3px;
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 8px;
+  ` : css`
+    margin-right: 8px;
+  `}
+`
+const CompanyImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 8px;
+`
+export const CompanyImage = (props) => {
+  return (
+    <CompanyImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </CompanyImageStyled>
+  )
+}
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+
+  ${({ isSingle }) => isSingle && css`
+    padding: 0px;
+    font-size: 14px;
+  `}
+`

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

@@ -1,11 +1,17 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  dispaly: flex;
+  display: flex;
   button {
     margin: 10px;
     white-space: nowrap;
     font-size: 14px;
+    margin: 10px 0;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
 
     svg {
       font-size: 20px;

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

@@ -23,7 +23,8 @@ export const DriversList = (props) => {
     offlineDrivers,
     selectedDriver,
     handleChangeDriver,
-    handleOpenDriverOrders
+    handleOpenDriverOrders,
+    hidePhoto
   } = props
 
   const theme = useTheme()
@@ -74,9 +75,11 @@ export const DriversList = (props) => {
               onClick={(e) => handleClickDriver(e, driver)}
               active={selectedDriver?.id === driver.id}
             >
-              <WrapperImage>
-                <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
-              </WrapperImage>
+              {!hidePhoto && (
+                <WrapperImage>
+                  <Image bgimage={optimizeImage(driver?.photo || theme.images?.icons?.noDriver, 'h_50,c_limit')} />
+                </WrapperImage>
+              )}
               <DriverInfo>
                 <div>
                   <p>{driver.name} {driver.lastname}</p>

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

@@ -2,10 +2,11 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const DriversListContainer = styled.div`
-  padding: 15px 10px;
+  padding: 15px 0px;
 `
 
 export const DriverCard = styled.div`
+  min-height: 66px;
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -9,6 +9,7 @@ import { List as MenuIcon } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { GoogleMapsApiKeySettingButton } from '../GoogleMapsApiKeySettingButton'
+import { WebsocketStatus } from '../WebsocketStatus'
 
 import {
   DriversHeader,
@@ -86,6 +87,7 @@ const DriversManagerUI = (props) => {
             )}
             <h1>{t('DRIVERS_DASHBOARD', 'Drivers dashboard')}</h1>
           </HeaderTitleContainer>
+          <WebsocketStatus />
           {!googleMapsApiKey && (
             <GoogleMapsApiKeySettingButton />
           )}

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

@@ -7,10 +7,11 @@ export const Container = styled.div`
 `
 
 export const Tab = styled.div`
-  padding: 10px 15px;
+  padding: 10px 0px;
   cursor: pointer;
   color: ${props => props.theme.colors?.headingColor};
   white-space: nowrap;
+  font-size: 14px;
 
   ${({ active }) => active && css`
     border-bottom: 3px solid;
@@ -20,4 +21,10 @@ export const Tab = styled.div`
   ${({ active }) => !active && css`
     color: #909BA9;
   `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
 `

package/src/components/Orders/OrderBill/RefundToWallet.js

@@ -126,16 +126,18 @@ export const RefundToWallet = (props) => {
 
   return (
     <>
-      <RefundWalletButtonWrapper>
-        <Button
-          color='primary'
-          borderRadius='8px'
-          disabled={actionStatus?.loading || refundDisabled}
-          onClick={() => setOpenModal(true)}
-        >
-          {t('REFUND_TO_WALLET', 'Refund to Wallet')}
-        </Button>
-      </RefundWalletButtonWrapper>
+      {(isAllowCashWalletRefund || isAllowCreditPointRefund || isAllowStripeRefund || isAllowOtherRefund) && (
+        <RefundWalletButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={actionStatus?.loading || refundDisabled}
+            onClick={() => setOpenModal(true)}
+          >
+            {t('REFUND_TO_WALLET', 'Refund to Wallet')}
+          </Button>
+        </RefundWalletButtonWrapper>
+      )}
       <Modal
         width='700px'
         open={openModal}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils, useConfig } from 'ordering-components-admin-external'
 import { RefundToWallet } from './RefundToWallet'
-import { verifyDecimals } from '../../../utils'
+import { verifyDecimals, getCurrenySymbol } from '../../../utils'
 import { Alert, Confirm } from '../../Shared'
 import { Button } from '../../../styles'
 
@@ -89,7 +89,7 @@ export const OrderBill = (props) => {
           <tr>
             <td>{t('SUBTOTAL', 'Subtotal')}</td>
             <td>
-              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
+              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: getCurrenySymbol(order?.currency) })}
             </td>
           </tr>
           {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -102,7 +102,7 @@ export const OrderBill = (props) => {
               ) : (
                 <td>{t('DISCOUNT', 'Discount')}</td>
               )}
-              <td>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</td>
+              <td>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
           {
@@ -115,7 +115,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
@@ -124,9 +124,9 @@ export const OrderBill = (props) => {
             <tr>
               <td>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</td>
               {order?.tax_type === 1 ? (
-                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</td>
+                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: getCurrenySymbol(order?.currency) })}</td>
               ) : (
-                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               )}
             </tr>
           )}
@@ -137,7 +137,7 @@ export const OrderBill = (props) => {
                   {t('TAX', 'Tax')}
                   <span>{`(${verifyDecimals(order?.tax, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             )
           }
@@ -148,7 +148,7 @@ export const OrderBill = (props) => {
                   {t('SERVICE_FEE', 'Service fee')}
                   <span>{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.service_fee ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             )
           }
@@ -159,7 +159,7 @@ export const OrderBill = (props) => {
                   {t(tax?.name?.toUpperCase()?.replaceAll(' ', '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             ))
           }
@@ -170,7 +170,7 @@ export const OrderBill = (props) => {
                   {t(fee?.name?.toUpperCase()?.replaceAll(' ', '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                 </td>
-                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             ))
           }
@@ -184,7 +184,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
@@ -192,7 +192,7 @@ export const OrderBill = (props) => {
           {typeof order?.summary?.delivery_price === 'number' && (
             <tr>
               <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
-              <td>{parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}</td>
+              <td>{parsePrice(order?.summary?.delivery_price, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
           {
@@ -205,7 +205,7 @@ export const OrderBill = (props) => {
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
@@ -221,7 +221,7 @@ export const OrderBill = (props) => {
                     <span>{`(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}</span>
                   )}
               </td>
-              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</td>
+              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
         </tbody>
@@ -230,7 +230,7 @@ export const OrderBill = (props) => {
         <tbody>
           <tr>
             <td>{t('TOTAL', 'Total')}</td>
-            <td>{parsePrice(order?.summary?.total || order?.total, { currencyPosition: 'left', currency: order?.currency })}</td>
+            <td>{parsePrice(order?.summary?.total || order?.total, { currency: getCurrenySymbol(order?.currency) })}</td>
           </tr>
         </tbody>
       </table>
@@ -255,8 +255,8 @@ export const OrderBill = (props) => {
                 </td>
                 <td>
                   {event?.paymethod?.gateway === 'cash' && order?.cash
-                    ? parsePrice(order?.cash, { currency: order?.currency })
-                    : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
+                    ? parsePrice(order?.cash, { currency: getCurrenySymbol(order?.currency) })
+                    : `-${parsePrice(event?.amount, { currency: getCurrenySymbol(order?.currency) })}`}
                 </td>
               </tr>
             ))}
@@ -289,7 +289,7 @@ export const OrderBill = (props) => {
                         ? t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))
                         : walletName[event?.data?.wallet_currency]?.name}
                 </td>
-                <td>{parsePrice(event?.amount, { currency: order?.currency })}</td>
+                <td>{parsePrice(event?.amount, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             ))}
           </tbody>