ordering-ui-admin-external 1.30.2 → 1.30.3

package/src/components/Orders/CreateCustomOrder/OrderTypeSelector/index.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import { useLanguage, useConfig, OrderTypeControl } from 'ordering-components-admin-external'
+import { DefaultSelect as Select } from '../../../../styles'
+
+import {
+  SelectWrapper,
+  Option
+} from './styles'
+
+const OrderTypeSelectorUI = (props) => {
+  const {
+    typeSelected,
+    defaultValue,
+    orderTypes,
+    handleChangeOrderType
+  } = props
+
+  const [, t] = useLanguage()
+  const [configState] = useConfig()
+
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+  const defaultType = configTypes?.includes(typeSelected) ? null : configTypes?.[0]
+
+  const [searchValue, setSearchValue] = useState('')
+
+  return (
+    <SelectWrapper>
+      <p>{t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will you delivery type?')}</p>
+      <Select
+        placeholder={<Option>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</Option>}
+        options={configTypes
+          ? orderTypes.filter(type => configTypes?.includes(type.value)).filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+          : orderTypes.filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))}
+        defaultValue={defaultType || typeSelected || defaultValue}
+        onChange={(orderType) => handleChangeOrderType(orderType)}
+        isShowSearchBar
+        searchValue={searchValue}
+        handleChangeSearch={setSearchValue}
+      />
+    </SelectWrapper>
+  )
+}
+
+export const OrderTypeSelector = (props) => {
+  const [, t] = useLanguage()
+
+  const orderTypeProps = {
+    ...props,
+    UIComponent: OrderTypeSelectorUI,
+    orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        name: t('DELIVERY', 'Delivery'),
+        content: <Option>{t('DELIVERY', 'Delivery')}</Option>
+      },
+      {
+        value: 2,
+        name: t('PICKUP', 'Pickup'),
+        content: <Option>{t('PICKUP', 'Pickup')}</Option>
+      },
+      {
+        value: 3,
+        name: t('EAT_IN', 'Eat in'),
+        content: <Option>{t('EAT_IN', 'Eat in')}</Option>
+      },
+      {
+        value: 4,
+        name: t('CURBSIDE', 'Curbside'),
+        content: <Option>{t('CURBSIDE', 'Curbside')}</Option>
+      },
+      {
+        value: 5,
+        name: t('DRIVE_THRU', 'Drive thru'),
+        content: <Option>{t('DRIVE_THRU', 'Drive thru')}</Option>
+      }
+    ]
+  }
+  return <OrderTypeControl {...orderTypeProps} />
+}

package/src/components/Orders/CreateCustomOrder/SelectCustomer/index.js

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useUtils, useConfig, useCustomer } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useCustomer } from 'ordering-components-admin-external'
 import { UserAddForm } from '../../../Users'
 import { AddressList } from '../../../Delivery'
-import { findExitingCountryPhoneCode } from '../../../../utils'
 import { Dot, HouseDoor } from 'react-bootstrap-icons'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
 import { SideBar } from '../../../Shared'
 import { Button, Input, LinkButton } from '../../../../styles'
+import { findExitingCountryPhoneCode } from '../../../../utils'
 import {
   SectionContainer,
   SearchBarContainer,
@@ -29,12 +29,12 @@ export const SelectCustomer = (props) => {
     setSelectedUser,
     onChangeNumber,
     handleParentSidebarMove,
-    customerAddress
+    customerAddress,
+    defaultCountryCodeState
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
-  const [{ configs }] = useConfig()
   const [, { setUserCustomer }] = useCustomer()
 
   const [searchInputFocus, setSearchInputFocus] = useState(false)
@@ -169,7 +169,7 @@ export const SelectCustomer = (props) => {
           <Button
             borderRadius='8px'
             color='primary'
-            disabled={openSidebar === 'user_add_form'}
+            disabled={openSidebar === 'user_add_form' || defaultCountryCodeState.loading}
             onClick={() => handleOpenAddForm()}
           >
             {t('USERS_REGISTER', 'New user')}
@@ -205,11 +205,8 @@ export const SelectCustomer = (props) => {
           <UserAddForm
             isFromCustomOrder
             hideUserTypeSelector
-            // defaultPhoneNumber={
-            //   findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())
-            //     ? `+${findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())} ${selectedUser?.cellphone || selectedUser?.phone || phone}`
-            //     : `+1 ${selectedUser?.cellphone || selectedUser?.phone || phone}`
-            // }
+            defaultCountry={defaultCountryCodeState.code}
+            defaultPhoneNumber={(selectedUser?.cellphone || phone) && `+${findExitingCountryPhoneCode(defaultCountryCodeState?.code)} ${selectedUser?.cellphone || phone}`}
             handleSuccessAdd={onSelectUser}
             onClose={() => handleCloseSidebar()}
           />

package/src/components/Orders/CreateCustomOrder/SelectCustomer/styles.js

@@ -13,10 +13,12 @@ export const SectionContainer = styled.div`
 export const SearchBarContainer = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 
   > button {
     height: 44px;
     white-space: nowrap;
+    margin: 10px 0;
   }
 `
 export const SearchBarWrapper = styled.div`

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

@@ -10,7 +10,7 @@ export const Option = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
+  padding: 10px;
   column-gap: 20px;
 
   svg {

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 export const Option = styled.div`
   display: flex;
   align-items: center;
-  padding: 5px 15px;
+  padding: 5px 10px;
 
   svg {
     margin-right: 5px;

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

@@ -18,7 +18,6 @@ const DriverMultiSelectorUI = (props) => {
   const {
     driversList,
     defaultValue,
-    isPhoneView,
     small,
     padding,
     handleChangeDriver,
@@ -51,7 +50,7 @@ const DriverMultiSelectorUI = (props) => {
           value: driver.id,
           showDisable: true,
           content: (
-            <Option small={small} isPhoneView={isPhoneView} padding={padding}>
+            <Option small={small} padding={padding}>
               <WrapperDriverImage small={small} className='driver-photo'>
                 <DriverImage bgimage={driver.photo || theme.images.icons?.noDriver} small={small} />
               </WrapperDriverImage>

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

@@ -5,16 +5,8 @@ export const Option = styled.div`
   display: flex;
   align-items: center;
   color: ${props => props.theme.colors?.headingColor};
-  padding: ${({ padding }) => padding || '5px 10px'};
+  padding: ${({ padding }) => padding || '5px'};
   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;

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

@@ -10,7 +10,7 @@ export const Option = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
+  padding: 10px;
   column-gap: 20px;
 
   svg {

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

@@ -91,6 +91,7 @@ export const DriversList = (props) => {
                   >
                     {driver?.assigned_orders_count} {t('ORDERS', 'Orders')}
                   </LinkButton>
+                  <p className='text-red'>{(driver?.busy && `(${t('BUSY', 'Busy')})`)}</p>
                 </div>
                 {driver?.qualification && (
                   <WrapperStar width={getStarWidth(driver?.qualification)} />

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

@@ -105,7 +105,7 @@ export const DriverInfo = styled.div`
     svg {
       margin: 0 5px;
     }
-    
+
     p {
       font-size: 14px;
       color: ${props => props.theme.colors?.headingColor};
@@ -113,6 +113,10 @@ export const DriverInfo = styled.div`
       margin: 0px;
       flex: 1;
     }
+    .text-red {
+      margin-left: 2px;
+      color: red;
+    }
   }
 `
 

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

@@ -11,7 +11,7 @@ import { OrderDetailsHeader } from '../OrderDetailsHeader'
 import { OrderBill } from '../OrderBill'
 import { OrderContactInformation } from '../OrderContactInformation'
 import { XLg } from 'react-bootstrap-icons'
-import { NotFoundSource, Modal } from '../../Shared'
+import { NotFoundSource, Modal, Alert } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
@@ -72,6 +72,8 @@ const OrderDetailsUI = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExpand, setIsExpand] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
   const placeSpotEnabled = [3, 4]
   const {
     order,
@@ -268,6 +270,14 @@ const OrderDetailsUI = (props) => {
     }
   }, [loading])
 
+  useEffect(() => {
+    if (!actionStatus?.error) return
+    setAlertState({
+      open: true,
+      content: actionStatus?.error
+    })
+  }, [actionStatus?.error])
+
   const progressBarObjt = order?.delivery_type && order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
 
   return (
@@ -524,6 +534,16 @@ const OrderDetailsUI = (props) => {
           getOrderStatus={progressBarObjt}
         />
       )}
+
+      <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}
+      />
     </Container>
   )
 }

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

@@ -41,6 +41,9 @@ export const WrapperRow = styled.div`
     border: none;
     font-size: 14px;
     border-radius: 8px;
+    > div:first-child {
+      height: 100%;
+    }
   }
 
   .order-status-multi-select {
@@ -189,4 +192,5 @@ export const Option = styled.div`
   color: ${props => props.theme.colors.secundaryContrast};
   display: flex;
   align-items: center;
+  padding: 5px;
 `

package/src/components/Shared/CitySelector/styles.js

@@ -25,11 +25,7 @@ export const Option = styled.div`
   }
 
   ${({ isDefault }) => !isDefault && css`
-    ${props => props.theme?.rtl ? css`
-      margin-right: 10px;
-    ` : css`
-      margin-left: 10px;
-    `}
+    padding: 10px;
   `}
 `
 

package/src/components/Shared/InputPhoneNumber/index.js

@@ -11,7 +11,9 @@ export const InputPhoneNumber = (props) => {
     value,
     setValue,
     handleIsValid,
-    disabled
+    disabled,
+    isUser,
+    defaultCountry
   } = props
 
   const [, t] = useLanguage()
@@ -42,7 +44,7 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
+          defaultCountry={defaultCountry ?? findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}

package/src/components/Users/UserAddForm/index.js

@@ -40,6 +40,7 @@ const UserAddFormUI = (props) => {
     handleChangeUserType,
     handlechangeImage,
     handleChangeSwtich,
+    defaultCountry,
     defaultPhoneNumber,
     isFromCustomOrder,
     hideUserTypeSelector
@@ -203,7 +204,6 @@ const UserAddFormUI = (props) => {
 
   useEffect(() => {
     if (defaultPhoneNumber) {
-      setUserPhoneNumber(defaultPhoneNumber)
       handleChangePhoneNumber(defaultPhoneNumber, true)
     }
   }, [defaultPhoneNumber])
@@ -287,12 +287,13 @@ const UserAddFormUI = (props) => {
               )}
               {!!showInputPhoneNumber && (
                 <InputPhoneNumber
+                  defaultCountry={defaultCountry}
                   value={userPhoneNumber}
                   setValue={handleChangePhoneNumber}
                   handleIsValid={setIsValidPhoneNumber}
                 />
               )}
-              {!isCheckout && (
+              {!isCheckout && !isFromCustomOrder && (
                 <Input
                   type='password'
                   name='password'

package/src/utils/index.js

@@ -266,7 +266,7 @@ export const convertHMS = (value) => {
   if (hours < 10) { hours = '0' + hours }
   if (minutes < 10) { minutes = '0' + minutes }
   if (seconds < 10) { seconds = '0' + seconds }
-  return sec < 0 ? '-' : '' + hours + ':' + minutes + ':' + seconds // Return is HH : MM : SS
+  return sec < 0 ? '-' : '' + (hours === '00' ? '' : hours + ':') + minutes + ':' + seconds // Return is HH : MM : SS
 }
 
 /**