ordering-ui-admin-external 1.17.0 → 1.19.0

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

@@ -8,8 +8,11 @@ import {
   Image as DumyPhoto,
   CheckSquareFill as CheckedIcon,
   Square as UnCheckedIcon,
-  InfoCircle
+  InfoCircle,
+  RecordCircleFill,
+  Circle
 } from 'react-bootstrap-icons'
+
 import { useTheme } from 'styled-components'
 import { Alert, Modal, ImageCrop, ColorPicker } from '../../Shared'
 import { ContentForm } from '../ContentForm'
@@ -39,7 +42,9 @@ import {
   Tabs,
   Tab,
   HeaderInfoWrapper,
-  InfoContent
+  InfoContent,
+  RadioItem,
+  SlugWrapper
 } from './styles'
 import Skeleton from 'react-loading-skeleton'
 import { AdvancedSettings } from '../AdvancedSettings'
@@ -302,6 +307,65 @@ const OrderingWebsiteUI = (props) => {
                 </FormGroup>
               </InnerBlock>
             </InputFormWrapper>
+            <InputFormWrapper>
+              <InnerBlock>
+                <h4>{t('WEBSITE_THEME', 'Website Theme')}</h4>
+                {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>
+
+                    <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' && (
+                      <SlugWrapper>
+                        <label>{t('FRANCHISE_SLUG', 'Franchise slug')}</label>
+                        <Input
+                          name='name'
+                          placeholder={t('SLUG', 'Slug')}
+                          value={themeValues?.website_theme?.components?.franchise_slug || ''}
+                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'franchise_slug')}
+                          onKeyPress={e => {
+                            if (e.which === 32) { e.preventDefault() }
+                          }}
+                        />
+                      </SlugWrapper>
+                    )}
+
+                    <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' && (
+                      <SlugWrapper>
+                        <label>{t('BUSINESS_SLUG', 'Business slug')}</label>
+                        <Input
+                          name='name'
+                          placeholder={t('SLUG', 'Slug')}
+                          value={themeValues?.website_theme?.components?.business_slug || ''}
+                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'business_slug')}
+                          onKeyPress={e => {
+                            if (e.which === 32) { e.preventDefault() }
+                          }}
+                        />
+                      </SlugWrapper>
+                    )}
+                  </>
+                )}
+              </InnerBlock>
+            </InputFormWrapper>
             <InputFormWrapper>
               <h4>{t('IMAGES', 'Images')}</h4>
               <InnerBlock>

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

@@ -448,3 +448,40 @@ export const InfoContent = styled.div`
     min-width: 535px;
   }
 `
+export const RadioItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  cursor: pointer;
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    margin-right: 20px;
+    ${props => props.theme.rtl && css`
+      margin-left: 20px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+`
+export const SlugWrapper = styled.div`
+  margin-bottom: 20px;
+  label {
+    display: block;
+    margin-bottom: 12px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  > input, textarea {
+    width: 100%;
+  }
+`

package/src/components/OrderingProducts/SiteTheme/index.js

@@ -84,12 +84,16 @@ const SiteThemeUI = (props) => {
   }, [themesList])
 
   const recursiveAssign = (a, b) => {
-    if (Object(b) !== b) return b
-    if (Object(a) !== a) a = {}
+    if (b) {
+      if (Object(b) !== b) return b
+      if (Object(a) !== a) a = {}
     for (const key in b) {
       a[key] = recursiveAssign(a[key], b[key])
     }
     return a
+    } else {
+      return a
+    }
   }
 
   useEffect(() => {
@@ -164,7 +168,7 @@ const SiteThemeUI = (props) => {
                             const optionObject = components[block][option]
                             return (
                               <React.Fragment key={option}>
-                                {typeof themeValues[selectedPage].components?.[block]?.[option] !== 'undefined' && (
+                                {typeof themeValues[selectedPage]?.components?.[block]?.[option] !== 'undefined' && (
                                   <ThemeOption
                                     name={option}
                                     optionObject={optionObject}

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

@@ -115,7 +115,7 @@ const DeliveriesManagerUI = (props) => {
           open={isOpenOrderDetail}
           order={detailsOrder}
           orderId={orderDetailId}
-          driversList={driversList}
+          drivers={driversList.drivers}
           onClose={() => handleBackRedirect()}
         />
       )}

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

@@ -60,8 +60,6 @@ import BisBusiness from '@meronex/icons/bi/BisBusiness'
 import { Logistics } from '../Logistics'
 import { OrderLogisticInformation } from '../OrderLogisticInformation'
 
-const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
-
 export const MessagesUI = (props) => {
   const {
     isChat,
@@ -81,7 +79,8 @@ export const MessagesUI = (props) => {
     handleReadMessages,
     isTourOpen,
     setCurrentTourStep,
-    orderDetailClose
+    orderDetailClose,
+    getHistoryComment
   } = props
 
   const routerHistory = useHistory()
@@ -122,16 +121,14 @@ export const MessagesUI = (props) => {
     const quickMsg = message ? `${message} ${msg}` : msg
     setValue('message', quickMsg)
     setMessage(quickMsg)
-  }
-
-  useEffect(() => {
     const msgElement = messageInputRef?.current
     if (msgElement) {
+      msgElement.value = quickMsg
       msgElement.focus()
       msgElement.selectionStart = msgElement.selectionEnd = msgElement.value.length
       msgElement.scrollLeft = msgElement.scrollWidth
     }
-  }, [message])
+  }
 
   useEffect(() => {
     if (user.level === 0) setMessageList(adminMessageList)
@@ -213,78 +210,6 @@ export const MessagesUI = (props) => {
     }
   }
 
-  const getStatus = (status) => {
-    switch (status) {
-      case 0:
-        return t('PENDING', 'Pending')
-      case 1:
-        return t('COMPLETED_BY_ADMIN', 'Completed by admin')
-      case 2:
-        return t('REJECTED_BY_ADMIN', 'Rejected by admin')
-      case 3:
-        return t('ORDER_STATUS_IN_BUSINESS', 'Driver arrived to business')
-      case 4:
-        return t('PREPARATION_COMPLETED', 'Preparation Completed')
-      case 5:
-        return t('REJECTED_BY_BUSINESS', 'Rejected by business')
-      case 6:
-        return t('REJECTED_BY_DRIVER', 'Rejected by driver')
-      case 7:
-        return t('ACCEPTED_BY_BUSINESS', 'Accepted by Business')
-      case 8:
-        return t('ACCEPTED_BY_DRIVER', 'Accepted by Driver')
-      case 9:
-        return t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver')
-      case 10:
-        return t('PICK_UP_FAILED_BY_DRIVER', 'Pick up failed by driver')
-      case 11:
-        return t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver')
-      case 12:
-        return t('DELIVERY_FAILED_BY_DRIVER', 'Delivery failed by driver')
-      case 13:
-        return t('PREORDER', 'Preorder')
-      case 14:
-        return t('ORDER_NOT_READY', 'Order not ready')
-      case 15:
-        return t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')
-      case 16:
-        return t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', 'Cancelled by customer')
-      case 17:
-        return t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Not picked by customer')
-      case 18:
-        return t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', 'Driver almost arrived to business')
-      case 19:
-        return t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', 'Driver almost arrived to customer')
-      case 20:
-        return t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business')
-      case 21:
-        return t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business')
-      case 22:
-        return t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver')
-      case 23:
-        return t('ORDER_DRIVER_ON_WAY', 'Driver on way')
-      default:
-        return status
-    }
-  }
-
-  const getLogisticTagStatus = (status) => {
-    switch (status) {
-      case 0:
-        return t('PENDING', 'Pending')
-      case 1:
-        return t('IN_PROGRESS', 'In Progress')
-      case 2:
-        return t('IN_QUEUE', 'In Queue')
-      case 3:
-        return t('EXPIRED', 'Logistic expired')
-      case 4:
-        return t('RESOLVED', 'Resolved')
-      default:
-        return status
-    }
-  }
-
   const getLevel = (level) => {
     switch (level) {
       case 0:
@@ -302,10 +227,6 @@ export const MessagesUI = (props) => {
     }
   }
 
-  const getVehicleSmmary = (vehicle) => {
-    return vehicle?.type + ' ' + vehicle?.model + ' ' + vehicle?.car_registration + ' ' + vehicle?.color
-  }
-
   const clearInputs = () => {
     const input = messageInputRef?.current
     if (input) {
@@ -548,59 +469,36 @@ export const MessagesUI = (props) => {
                   <React.Fragment key={message.id}>
                     {history && tabActive === 'order_history' && (
                       <>
+                        {message.type === 0 && (
+                          <MessageConsole key={message.id}>
+                            <BubbleConsole>
+                              <p
+                                dangerouslySetInnerHTML={{
+                                  __html: t('ORDER_PLACED_FOR_VIA', 'Order placed for _for_ via _via_.')
+                                    .replace('_for_', '<b>' + parseDate(order.delivery_datetime) + '</b>')
+                                    .replace('_via_', '<b>' + t(order.app_id ? order.app_id.toUpperCase() : 'OTHER') + '</b>')
+                                }}
+                              />
+                              <div><strong>{t('APP_ID', 'App ID')}: </strong>{message?.app_id}</div>
+                              <div><strong>{t('AUTHOR', 'Author')}: </strong>{message?.author?.name} {message?.author?.lastname}</div>
+                              <div><strong>{t('USER_AGENT', 'User agent')}: </strong>{message?.user_agent}</div>
+                              <div><strong>{t('IP', 'IP')}: </strong>{message?.ip}</div>
+                              <TimeofSent>{getTimeAgo(message?.created_at)}</TimeofSent>
+                            </BubbleConsole>
+                          </MessageConsole>
+                        )}
                         {message.type === 1 && (
                           <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
-                            {message.change?.attribute !== 'driver_id' ? (
+                            {getHistoryComment(message) && (
                               <BubbleConsole>
-                                {t('ORDER', 'Order')} {' '}
-                                <strong>{t(message.change.attribute)}</strong> {' '}
-                                {t('CHANGED_FROM', 'Changed from')} {' '}
-                                {message.change.old !== null && (
-                                  <>
-                                    <strong>{message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.old, 10)) : getStatus(parseInt(message.change.old, 10))}</strong> {' '}
-                                  </>
-                                )}
-                                <>
-                                  {t('TO', 'to')} {' '}
-                                  <strong>{message.change.old === null && message.change.attribute === 'delivery_in' ? 'null' : message.change?.attribute === 'logistic_status' ? getLogisticTagStatus(parseInt(message.change.new, 10)) : getStatus(parseInt(message.change.new, 10))}</strong>
-                                  {message?.change?.comment ? `\n'${message?.change?.comment}'` : ''}
-                                  {(message?.author?.name || message?.author?.lastname) && (
-                                    <p><strong>Author: </strong>{(message?.author?.name ?? '') + ' ' + (message?.author?.lastname ?? '')}</p>
-                                  )}
-                                </>
+                                <div
+                                  dangerouslySetInnerHTML={{
+                                    __html: getHistoryComment(message)
+                                  }}
+                                />
                                 <OverlayTrigger
                                   placement='top'
-                                  overlay={
-                                    <Tooltip>
-                                      {parseDate(message.created_at)}
-                                    </Tooltip>
-                                  }
-                                >
-                                  <TimeofSent>{getTimeAgo(message.created_at)}</TimeofSent>
-                                </OverlayTrigger>
-                              </BubbleConsole>
-                            ) : (
-                              <BubbleConsole>
-                                <>
-                                  {message.change.new !== null ? (
-                                    <>
-                                      <strong>{message.driver?.name} {' '} {message.driver?.lastname && message.driver.lastname}</strong>
-                                      {t('WAS_ASSIGNED_AS_DRIVER', 'was assigned as driver')}
-                                      {message.comment && (<><br /> {message.comment.length}</>)}
-                                    </>
-                                  ) : (
-                                    <>
-                                      {t('DRIVER_UNASSIGNED', 'The driver was unnasigned')}
-                                    </>
-                                  )}
-                                </>
-                                <OverlayTrigger
-                                  placement='top'
-                                  overlay={
-                                    <Tooltip>
-                                      {parseDate(message.created_at)}
-                                    </Tooltip>
-                                  }
+                                  overlay={<Tooltip>{parseDate(message.created_at)}</Tooltip>}
                                 >
                                   <TimeofSent>{getTimeAgo(message.created_at)}</TimeofSent>
                                 </OverlayTrigger>
@@ -612,95 +510,37 @@ export const MessagesUI = (props) => {
                     )}
                     {isChat && (
                       <>
-                        {message.type === 1 && message.change?.attribute !== 'comment' && (
+                        {message.type === 0 && (
                           <MessageConsole key={message.id}>
-                            {message.change?.attribute !== 'driver_id' ? (
-                              <BubbleConsole>
-                                {t('ORDER', 'Order')} {' '}
-                                <strong>{t(message.change.attribute)}</strong> {' '}
-                                {t('CHANGED_FROM', 'Changed from')} {' '}
-                                {filterSpecialStatus.includes(message.change.attribute) ? (
-                                  <>
-                                    {message.change.old === null ? <strong>0</strong> : (
-                                      <>
-                                        <strong>{message.change.old}</strong> {' '}
-                                      </>
-                                    )}
-                                    <div style={{ whiteSpace: 'pre' }}>
-                                      {t('TO', 'to')} {' '}
-                                      <strong>{message.change.new}</strong> {' '}
-                                      {t('MINUTES', 'Minutes')}
-                                    </div>
-                                  </>
-                                ) : (
-                                  <>
-                                    {message.change.old !== null && (
-                                      <>
-                                        <strong>
-                                          {
-                                            message.change?.attribute === 'logistic_status'
-                                              ? getLogisticTagStatus(parseInt(message.change.old, 10))
-                                              : message.change?.attribute === 'vehicle'
-                                                ? getVehicleSmmary(message.change.old)
-                                                : getStatus(parseInt(message.change.old, 10))
-                                          }
-                                        </strong>{' '}
-                                      </>
-                                    )}
-                                    <div style={{ whiteSpace: 'pre' }}>
-                                      {t('TO', 'to')} {' '}
-                                      <strong>
-                                        {
-                                          message.change.old === null && message.change.attribute === 'delivery_in'
-                                            ? 'null'
-                                            : message.change?.attribute === 'logistic_status'
-                                              ? getLogisticTagStatus(parseInt(message.change.new, 10))
-                                              : message.change?.attribute === 'vehicle'
-                                                ? getVehicleSmmary(message.change.new)
-                                                : getStatus(parseInt(message.change.new, 10))
-                                        }
-                                      </strong>
-                                      <strong>{message?.change?.comment ? (`\n${t('COMMENT', 'Comment:')}`) : ''}</strong>
-                                      {message?.change?.comment ? ` ${message?.change?.comment}` : ''}
-                                      {(message?.author?.name || message?.author?.lastname) && (
-                                        <p><strong>Author: </strong>{(message?.author?.name ?? '') + ' ' + (message?.author?.lastname ?? '')}</p>
-                                      )}
-                                    </div>
-                                  </>
-                                )}
-                                <OverlayTrigger
-                                  placement='top'
-                                  overlay={
-                                    <Tooltip>
-                                      {parseDate(message.created_at)}
-                                    </Tooltip>
-                                  }
-                                >
-                                  <TimeofSent>{getTimeAgo(message.created_at)}</TimeofSent>
-                                </OverlayTrigger>
-                              </BubbleConsole>
-                            ) : (
+                            <BubbleConsole>
+                              <p>
+                                {t('ORDER_PLACED_FOR', 'Order placed for')} {' '}
+                                <strong>{parseDate(order.created_at)}</strong> {' '}
+                                {t('VIA', 'Via')}{' '}
+                                <strong>
+                                  {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
+                                </strong>{' '}
+                              </p>
+                              <div><strong>{t('APP_ID', 'App ID')}: </strong>{message?.app_id}</div>
+                              <div><strong>{t('AUTHOR', 'Author')}: </strong>{message?.author?.name} {message?.author?.lastname}</div>
+                              <div><strong>{t('USER_AGENT', 'User agent')}: </strong>{message?.user_agent}</div>
+                              <div><strong>{t('IP', 'IP')}: </strong>{message?.ip}</div>
+                              <TimeofSent>{getTimeAgo(message?.created_at)}</TimeofSent>
+                            </BubbleConsole>
+                          </MessageConsole>
+                        )}
+                        {message.type === 1 && (
+                          <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
+                            {getHistoryComment(message) && (
                               <BubbleConsole>
-                                <>
-                                  {message.change.new !== null ? (
-                                    <>
-                                      <strong>{message.driver?.name} {' '} {message.driver?.lastname && message.driver.lastname}</strong>
-                                      {t('WAS_ASSIGNED_AS_DRIVER', 'was assigned as driver')}
-                                      {message.comment && (<><br /> {message.comment.length}</>)}
-                                    </>
-                                  ) : (
-                                    <>
-                                      {t('DRIVER_UNASSIGNED', 'The driver was unnasigned')}
-                                    </>
-                                  )}
-                                </>
+                                <div
+                                  dangerouslySetInnerHTML={{
+                                    __html: getHistoryComment(message)
+                                  }}
+                                />
                                 <OverlayTrigger
                                   placement='top'
-                                  overlay={
-                                    <Tooltip>
-                                      {parseDate(message.created_at)}
-                                    </Tooltip>
-                                  }
+                                  overlay={<Tooltip>{parseDate(message.created_at)}</Tooltip>}
                                 >
                                   <TimeofSent>{getTimeAgo(message.created_at)}</TimeofSent>
                                 </OverlayTrigger>

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

@@ -186,7 +186,7 @@ export const OrderBill = (props) => {
               </tr>
             ))
           }
-          {order?.summary?.delivery_price > 0 && (
+          {typeof order?.summary?.delivery_price === 'number' && (
             <tr>
               <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
               <td>{parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}</td>
@@ -244,7 +244,11 @@ export const OrderBill = (props) => {
                 <td>
                   {event?.wallet_event
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
-                    : t(event?.paymethod?.name?.toUpperCase()?.replaceAll(' ', '_'), event?.paymethod?.name)}
+                    : event?.paymethod
+                      ? t(event?.paymethod?.name?.toUpperCase()?.replaceAll(' ', '_'), event?.paymethod?.name)
+                      : event?.data?.gateway
+                        ? t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))
+                        : walletName[event?.data?.wallet_currency]?.name}
                 </td>
                 <td>
                   {event?.paymethod?.gateway === 'cash' && order?.cash

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

@@ -18,7 +18,10 @@ import {
 toast.configure()
 
 const OrderNotificationUI = (props) => {
-  const { isOnlyDelivery } = props
+  const {
+    isOnlyDelivery,
+    customerId
+  } = props
 
   const [configState] = useConfig()
   const [, t] = useLanguage()
@@ -29,6 +32,7 @@ const OrderNotificationUI = (props) => {
   const [registerOrderIds, setRegisterOrderIds] = useState([])
 
   const handleNotification = (order) => {
+    if (customerId && order?.customer_id !== customerId) return
     if (isOnlyDelivery && order?.delivery_type !== 1) return
     const _registerOrderIds = [...registerOrderIds]
     if (!_registerOrderIds.includes(order.id)) {
@@ -101,7 +105,7 @@ const OrderNotificationUI = (props) => {
     return () => {
       events.off('order_added', handleNotification)
     }
-  }, [configState, registerOrderIds])
+  }, [configState, registerOrderIds, customerId])
 
   return (
     <>

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

@@ -259,7 +259,7 @@ const OrdersManagerUI = (props) => {
         />
       )}
 
-      <OrderNotification />
+      <OrderNotification customerId={props.customerId} />
 
       {totalSelectedOrder > 0 && (
         <WrapperIndicator>

package/src/components/SidebarMenu/index.js

@@ -371,13 +371,13 @@ const SidebarMenuUI = (props) => {
     events.emit('go_to_page', data)
   }
 
-  // const handleGoToLink = (link) => {
-  //   window.open(link, '_blank')
-  // }
+  const handleGoToLink = (link) => {
+    window.open(link, '_blank')
+  }
 
-  // const handleOpenSite = () => {
-  //   handleGoToLink(`https://${ordering.project}.tryordering.com`)
-  // }
+  const handleOpenSite = () => {
+    handleGoToLink(`https://${ordering.project}.tryordering.com`)
+  }
 
   useEffect(() => {
     if (windowSize.width < 1024) {
@@ -441,7 +441,7 @@ const SidebarMenuUI = (props) => {
           <SidebarMainContent>
             <SidebarContent className='d-flex flex-column justify-content-between p-1 pt-0'>
               <div className='d-flex flex-column'>
-                {/* {sessionState?.user?.level === 0 && (
+                {sessionState?.user?.level === 0 && (
                   <Button
                     className='d-flex align-items-center'
                     variant={false}
@@ -450,7 +450,7 @@ const SidebarMenuUI = (props) => {
                     <BoxArrowUpRight />
                     <span>{t('MY_WEBSITE', 'My Website')}</span>
                   </Button>
-                )} */}
+                )}
                 <Accordion>
                   {/* {sessionState?.user?.level === 0 && (
                     <Button

package/src/components/Stores/BusinessAdd/DeliveryZone/index.js

@@ -182,7 +182,7 @@ export const DeliveryZone = (props) => {
                     maxLength={2}
                     value={zoneState?.data?.distance ?? ''}
                     onInput={(e) => {
-                      e.target.value = e.target.value.match('^[1-9]{1,2}$')
+                      e.target.value = e.target.value.match(`^[${e.target.value === '0' ? '1' : '0'}-9]{1,2}$`)
                     }}
                     onChange={e => handleChangeZoneState(e, false, configState?.configs?.distance_unit?.value)}
                   />

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

@@ -217,7 +217,7 @@ export const BusinessDeliveryZoneInformation = (props) => {
                 maxLength={2}
                 value={formState.changes?.data?.distance ?? zone?.data?.distance ?? ''}
                 onInput={(e) => {
-                  e.target.value = e.target.value.match('^[1-9]{1,2}$')
+                  e.target.value = e.target.value.match(`^[${e.target.value === '0' ? '1' : '0'}-9]{1,2}$`)
                 }}
                 onChange={e => handleChangeInput(e, configState?.configs?.distance_unit?.value)}
                 ref={register({