ordering-ui-admin-external 1.17.0 → 1.18.0

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

@@ -548,6 +548,25 @@ export const MessagesUI = (props) => {
                   <React.Fragment key={message.id}>
                     {history && tabActive === 'order_history' && (
                       <>
+                        {message.type === 0 && (
+                          <MessageConsole key={message.id}>
+                            <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'}` }}>
                             {message.change?.attribute !== 'driver_id' ? (
@@ -612,6 +631,25 @@ export const MessagesUI = (props) => {
                     )}
                     {isChat && (
                       <>
+                        {message.type === 0 && (
+                          <MessageConsole key={message.id}>
+                            <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 && message.change?.attribute !== 'comment' && (
                           <MessageConsole key={message.id}>
                             {message.change?.attribute !== 'driver_id' ? (

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>

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/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({

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

@@ -18,6 +18,8 @@ import { BusinessNotifications } from '../BusinessNotifications'
 import { BusinessOrderingChannels } from '../BusinessOrderingChannels'
 import { BusinessFrontLayout } from '../BusinessFrontLayout'
 // import { BusinessPublishing } from '../BusinessPublishing'
+import { BusinessPlaceGroupList } from '../BusinessPlaceGroupList'
+import { SpoonityApiKey } from '../SpoonityApiKey'
 
 import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
 
@@ -46,7 +48,9 @@ export const BusinessDetailsUI = (props) => {
     handleDuplicateBusiness,
     handleDeleteBusiness,
     actionStatus,
-    handleUpdatePreorderConfigs
+    handleUpdatePreorderConfigs,
+    handleUpdateSpoonityKey,
+    spoonityKeyState
   } = props
 
   const history = useHistory()
@@ -58,6 +62,7 @@ export const BusinessDetailsUI = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const spoonityConfig = businessState?.business?.configs?.find(config => config.key === 'spoonity_integration_api_key')
 
   const isAdmin = user?.level === 0
 
@@ -178,6 +183,7 @@ export const BusinessDetailsUI = (props) => {
           handleDuplicateBusiness={handleDuplicateBusiness}
           handleDeleteBusiness={handleDeleteBusiness}
           extraOpen={extraOpen}
+          spoonityConfig={spoonityConfig}
         />
       )}
       {extraOpen && (
@@ -320,6 +326,23 @@ export const BusinessDetailsUI = (props) => {
               handleSuccessUpdate={handleUpdateBusinessState}
             />
           )}
+          {selectedItem === 'places' && (
+            <BusinessPlaceGroupList
+              business={businessState?.business}
+              handleSuccessUpdate={handleUpdateBusinessState}
+              setIsExtendExtraOpen={setIsExtendExtraOpen}
+            />
+          )}
+          {selectedItem === 'spoonity_key' && (
+            <SpoonityApiKey
+              business={businessState?.business}
+              handleSuccessUpdate={handleUpdateBusinessState}
+              handleUpdateBusinessClick={handleUpdateBusinessClick}
+              spoonityConfig={spoonityConfig}
+              handleUpdateSpoonityKey={handleUpdateSpoonityKey}
+              spoonityKeyState={spoonityKeyState}
+            />
+          )}
         </MoreSidebarLayout>
       )}
 

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

@@ -0,0 +1,137 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage, BusinessPlace as BusinessPlaceController } from 'ordering-components-admin-external'
+import { DropdownButton, Dropdown } from 'react-bootstrap'
+import { XLg, ThreeDots } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { Button, IconButton, Input } from '../../../styles'
+import { useForm } from 'react-hook-form'
+import { Alert } from '../../Shared'
+
+import {
+  Container,
+  Header,
+  ActionBlock,
+  ActionSelectorWrapper,
+  Content,
+  ButtonWrapper,
+  HideSubmitBtn
+} from './styles'
+
+export const BusinessPlaceUI = (props) => {
+  const {
+    onClose,
+    place,
+    formState,
+    handleChangeInput,
+    handleAddPlace,
+    handleUpdatePlace,
+    handleDeletePlace
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const formMethods = useForm()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const buttonRef = useRef(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onSubmit = () => {
+    if (place) handleUpdatePlace()
+    else handleAddPlace()
+  }
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  return (
+    <>
+      <Container>
+        <Header>
+          <h1>{place ? place?.name : t('NEW_OPTION', 'New option')}</h1>
+          <ActionBlock>
+            {place && (
+              <ActionSelectorWrapper>
+                <DropdownButton
+                  className='product_actions'
+                  menuAlign={theme?.rtl ? 'left' : 'right'}
+                  title={<ThreeDots />}
+                  id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                >
+                  <Dropdown.Item
+                    onClick={() => handleDeletePlace()}
+                  >
+                    {t('DELETE', 'Delete')}
+                  </Dropdown.Item>
+                </DropdownButton>
+              </ActionSelectorWrapper>
+            )}
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </ActionBlock>
+        </Header>
+        <Content onSubmit={formMethods.handleSubmit(onSubmit)}>
+          <label>{t('NAME', 'Name')}</label>
+          <Input
+            placeholder={t('NAME', 'Name')}
+            name='name'
+            autoComplete='off'
+            onChange={handleChangeInput}
+            value={formState?.changes?.name ?? place?.name ?? ''}
+            ref={formMethods.register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'Name is required'
+              ).replace('_attribute_', t('NAME', 'Name'))
+            })}
+          />
+          <HideSubmitBtn type='submit' ref={buttonRef} />
+        </Content>
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={Object.keys(formState?.changes).length === 0}
+            onClick={() => buttonRef.current.click()}
+          >
+            {place ? t('SAVE', 'Save') : t('ADD', 'Add')}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('PLACES', 'Places')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const BusinessPlace = (props) => {
+  const businessPlaceProps = {
+    ...props,
+    UIComponent: BusinessPlaceUI
+  }
+  return <BusinessPlaceController {...businessPlaceProps} />
+}

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

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  transition: 0.3s;
+  height: 100%;
+  
+  > button {
+    height: 42px;
+    width: 100%;
+    margin-top: 20px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 5px 0;
+    color: ${props => props.theme.colors.headingColor};
+    ${props => props.theme?.rtl ? css`
+      margin-left: 80px;
+    ` : css`
+      margin-right: 80px;
+    `}
+  }
+`
+
+export const ActionBlock = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  > button {
+    display: none;
+  }
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+  @media (min-width: 1000px) {
+    > button {
+      display: block;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 10px;
+      ` : css`
+        margin-left: 10px;
+      `}
+    }
+  }
+`
+
+export const ActionSelectorWrapper = styled.div`
+  button {
+    display: flex;
+    background: transparent !important;
+    border: none;
+    padding: 5px;
+    border-radius: 8px;
+    &: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.secundaryDarkContrast)} !important;
+    }
+  }
+  .show {
+    >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};
+        padding: 7px 20px;
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: ${props => props.theme.colors.danger};
+      }
+    }
+  }
+`
+
+export const Content = styled.form`
+  margin-top: 30px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  input {
+    height: 44px;
+    width: 100%;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+  button {
+    height: 44px;
+  }
+`
+
+export const HideSubmitBtn = styled.button`
+  display: none;
+`