ordering-ui-admin-external 1.32.3 → 1.33.1

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

@@ -93,10 +93,14 @@ export const WrapperStar = styled.div`
 `
 
 export const DriverInfo = styled.div`
-  ${props => props.theme?.rtl ? css`
-    margin-right: 15px;
-  ` : css`
-    margin-left: 15px;
+  width: 100%;
+  flex: 1;
+  ${({ hidePhoto }) => !hidePhoto && css`
+    ${props => props.theme?.rtl ? css`
+      margin-right: 15px;
+    ` : css`
+      margin-left: 15px;
+    `}
   `}
   > div:first-child {
     display: flex;
@@ -106,7 +110,7 @@ export const DriverInfo = styled.div`
       margin: 0 5px;
     }
 
-    p {
+    p.name {
       font-size: 14px;
       color: ${props => props.theme.colors?.headingColor};
       font-weight: 600;
@@ -114,8 +118,13 @@ export const DriverInfo = styled.div`
       flex: 1;
     }
     .text-red {
-      margin-left: 2px;
+      font-size: 14px;
       color: red;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 2px;
+      ` : css`
+        margin-left: 2px;
+      `}
     }
   }
 `

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useConfig } from 'ordering-components-admin-external'
-import { useForm } from 'react-hook-form'
+import { useForm, Controller } from 'react-hook-form'
 import { Button, Input, TextArea } from '../../../styles'
 import { Alert, Modal } from '../../Shared'
 import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
@@ -21,7 +21,8 @@ export const RefundToWallet = (props) => {
   const {
     order,
     actionStatus,
-    handleOrderRefund
+    handleOrderRefund,
+    stripePaymethods
   } = props
 
   const [, t] = useLanguage()
@@ -31,7 +32,7 @@ export const RefundToWallet = (props) => {
   const isAllowStripeRefund = configs?.refund_stripe_allow_when_order_cancelled?.value === '1'
   const isAllowOtherRefund = configs?.refund_other_allow_when_order_cancelled?.value === '1'
 
-  const { handleSubmit, register, errors } = useForm()
+  const { handleSubmit, register, errors, control } = useForm()
   const [openModal, setOpenModal] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isRefundAll, setIsRefundAll] = useState(true)
@@ -73,6 +74,9 @@ export const RefundToWallet = (props) => {
     setRefundAllDisabled(false)
     setIsRefundAll(true)
 
+    if (order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway)) {
+      setRefundDisabled(true)
+    }
     if (!order?.payment_events) return
     const totalRefundAmount = order?.payment_events?.filter(item => item.event === 'refund').reduce((total, event) => total + (event?.amount || 0), 0) || 0
     if (totalRefundAmount === (order?.summary?.total || order?.total)) {
@@ -88,7 +92,7 @@ export const RefundToWallet = (props) => {
       if (event?.wallet_event?.wallet?.type === 'cash') {
         if (isAllowCashWalletRefund) {
           _refundOptions.push({
-            value: event.id,
+            value: 'cash_wallet',
             content: <Option>{t('CASH_WALLET', 'Cash Wallet')}</Option>
           })
         }
@@ -108,10 +112,12 @@ export const RefundToWallet = (props) => {
         }
       } else {
         if (isAllowOtherRefund) {
-          _refundOptions.push({
-            value: event.id,
-            content: <Option>{event?.paymethod ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name) : t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))}</Option>
-          })
+          if (!_refundOptions.find(item => item.value === 'cash_wallet')) {
+            _refundOptions.push({
+              value: 'cash_wallet',
+              content: <Option>{t('CASH_WALLET', 'Cash Wallet')}</Option>
+            })
+          }
         }
       }
     })
@@ -189,9 +195,18 @@ export const RefundToWallet = (props) => {
               )}
               <RefundReasonContainer>
                 <label>{t('COMMENTS', 'Comments')}</label>
-                <TextArea
-                  rows={3}
+                <Controller
                   name='description'
+                  control={control}
+                  render={({ onChange, value }) => (
+                    <TextArea
+                      rows={3}
+                      value={value}
+                      onChange={e => {
+                        onChange(e.target.value)
+                      }}
+                    />
+                  )}
                 />
               </RefundReasonContainer>
               <Button

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

@@ -268,6 +268,7 @@ export const OrderBill = (props) => {
           order={order}
           actionStatus={actionStatus}
           handleOrderRefund={handleOrderRefund}
+          stripePaymethods={stripePaymethods}
         />
       )}
       {order?.payment_events?.filter(item => item.event === 'refund').length > 0 && (
@@ -360,7 +361,7 @@ export const OrderBill = (props) => {
           <Button
             color='primary'
             borderRadius='8px'
-            disabled={actionStatus?.loading}
+            disabled={actionStatus?.loading || order?.payment_events?.find(item => item.event === 'refund' && stripePaymethods.includes(item?.paymethod?.gateway))}
             onClick={onClickRefund}
           >
             {t('REFUND', 'Refund')}

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

@@ -1,11 +1,11 @@
 import React, { useContext, useState } from 'react'
-import { useLanguage, useSession, useUtils } from 'ordering-components-admin-external'
+import { useLanguage, useSession, useUtils, useConfig, GoogleAutocompleteInput } from 'ordering-components-admin-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import BisBusiness from '@meronex/icons/bi/BisBusiness'
 import { DriverSelector } from '../DriverSelector'
 import { CompanySelector } from '../CompanySelector'
-import { IconButton } from '../../../styles'
-import { Telephone, ChevronDown } from 'react-bootstrap-icons'
+import { Button, IconButton, Input, TextArea } from '../../../styles'
+import { Telephone, ChevronDown, Pencil } from 'react-bootstrap-icons'
 import { Accordion, AccordionContext, useAccordionToggle } from 'react-bootstrap'
 import { ReviewCustomer } from '../ReviewCustomer'
 import { Modal } from '../../Shared'
@@ -23,24 +23,38 @@ import {
   CutsomerDetail,
   CustomerInfoTable,
   ToggleItemWrapper,
-  ReviewButton
+  ReviewButton,
+  CustomerEditWrapper,
+  ActionIconWrapper,
+  ReviewWrapper
 } from './styles'
 
 export const OrderContactInformation = (props) => {
   const {
     order,
+    customerInfoState,
+    handleChangeCustomerInfoState,
     isTourOpen,
     setCurrentTourStep,
     handleOpenMessages,
-    isServiceOrder
+    isServiceOrder,
+    handleUpdateCustomerInfo,
+    setIsCommentPopup,
+    setAddressState
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const googleMapsApiKey = configs?.google_maps_api_key?.value
 
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentCustomer, setCurrentCustomer] = useState(null)
+  const [isEdit, setIsEdit] = useState(false)
+
+  console.log(customerInfoState, 'customerInfoState')
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
@@ -53,6 +67,28 @@ export const OrderContactInformation = (props) => {
     setIsModalOpen(false)
   }
 
+  const handleEdit = (event) => {
+    if (event.target.closest('#accordion1').getAttribute('data-id') === '1') {
+      event.stopPropagation()
+      setIsEdit(prev => !prev)
+    } else {
+      setIsEdit(true)
+    }
+  }
+
+  const handleChangeAddress = (e) => {
+    setAddressState({
+      address: e?.address,
+      location: e?.location,
+      zipcode: e?.zipcode
+    })
+  }
+
+  const handleUpdateCustomer = async () => {
+    await handleUpdateCustomerInfo()
+    setIsEdit(false)
+  }
+
   return (
     <>
       <Accordion>
@@ -153,73 +189,121 @@ export const OrderContactInformation = (props) => {
                 </ReviewButton>
               )}
             </InfoContent>
-            <ChevronDown className='down-arrow' />
+            <ActionIconWrapper>
+              <Pencil className='edit-icon' onClick={handleEdit} />
+              <ChevronDown className='down-arrow' />
+            </ActionIconWrapper>
           </CustomerInfo>
         </ContextAwareToggle>
         <Accordion.Collapse eventKey='1'>
           <CutsomerDetail>
-            <CustomerInfoTable>
-              <tbody>
-                {order?.customer?.cellphone && (
-                  <tr>
-                    <td>{t('CELLPHONE', 'Phone / Mobile')}</td>
-                    <td>
-                      <a href={`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}>
-                        {(order?.customer?.country_phone_code && `+${order?.customer?.country_phone_code}`)} {order?.customer?.cellphone}
-                      </a>
-                    </td>
-                  </tr>
-                )}
-                {order?.customer?.email && (
-                  <tr>
-                    <td>{t('EMAIL', 'Email')}</td>
-                    <td>
-                      <a href={`mailto: ${order?.customer?.email}`}>{order?.customer?.email}</a>
-                    </td>
-                  </tr>
-                )}
-                {!!order?.customer?.address && (
-                  <tr>
-                    <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
-                    <td>
-                      <a href={`http://maps.google.com/?q=${order?.customer?.address}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.address}</a>
-                    </td>
-                  </tr>
-                )}
-                {!!order?.customer?.location && (
-                  <tr>
-                    <td>{t('LOCATION', 'Location')}</td>
-                    <td>
-                      <a href={`http://maps.google.com/?q=${order?.customer?.location?.lat},${order?.customer?.location?.lng}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.location?.lat}, {order?.customer?.location?.lng}</a>
-                    </td>
-                  </tr>
-                )}
-                {!!order?.customer?.internal_number && (
-                  <tr>
-                    <td>{t('INTERNAL_NUMBER', 'Internal number')}</td>
-                    <td>{order?.customer?.internal_number}</td>
-                  </tr>
-                )}
-                {!!order?.customer?.address_notes && (
-                  <tr>
-                    <td>{t('NOTES', 'Notes')}</td>
-                    <td>{order?.customer?.address_notes}</td>
-                  </tr>
-                )}
-                {!!order?.customer?.zipcode && (
-                  <tr>
-                    <td>{t('ZIPCODE', 'Zipcode')}</td>
-                    <td>{order?.customer?.zipcode}</td>
-                  </tr>
-                )}
-                {!!order?.on_behalf_of && (
-                  <tr>
-                    <td>{t('ON_BEHALF_OF', 'On behalf of')}</td>
-                    <td>{order?.on_behalf_of}</td>
-                  </tr>
-                )}
-              </tbody>
-            </CustomerInfoTable>
+            {isEdit ? (
+              <CustomerEditWrapper>
+                <Input
+                  placeholder='(603) 555-0123'
+                  value={customerInfoState?.customer?.cellphone ?? order?.customer?.cellphone ?? ''}
+                  onChange={(e) => {
+                    handleChangeCustomerInfoState({ cellphone: e.target.value })
+                  }}
+                  onKeyPress={(e) => {
+                    if (!/^[0-9]$/.test(e.key)) {
+                      e.preventDefault()
+                    }
+                  }}
+                />
+                <Input
+                  placeholder='jane.cooper@example.com'
+                  value={customerInfoState?.customer?.email ?? order?.customer?.email ?? ''}
+                  onChange={(e) => {
+                    handleChangeCustomerInfoState({ email: e.target.value })
+                  }}
+                />
+                <GoogleAutocompleteInput
+                  name='address'
+                  className='input-autocomplete'
+                  apiKey={googleMapsApiKey}
+                  placeholder={t('ADDRESS', 'Address')}
+                  onChangeAddress={(e) => {
+                    handleChangeAddress(e)
+                  }}
+                  defaultValue={order?.customer?.address ?? ''}
+                  autoComplete='new-password'
+                  countryCode={configs?.country_autocomplete?.value || '*'}
+                />
+                {/* <ReviewWrapper>
+                  <label>{t('REVIEW_FROM_DRIVER_OR_ADMIN', 'Review from driver or admin')}</label>
+                  <TextArea
+                    placeholder={t('REVIEW', 'Review')}
+                  />
+                </ReviewWrapper> */}
+                <Button color='primary' onClick={handleUpdateCustomer}>
+                  {customerInfoState?.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
+                </Button>
+              </CustomerEditWrapper>
+            ) : (
+              <CustomerInfoTable>
+                <tbody>
+                  {order?.customer?.cellphone && (
+                    <tr>
+                      <td>{t('CELLPHONE', 'Phone / Mobile')}</td>
+                      <td>
+                        <a href={`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}>
+                          {(order?.customer?.country_phone_code && `+${order?.customer?.country_phone_code}`)} {order?.customer?.cellphone}
+                        </a>
+                      </td>
+                    </tr>
+                  )}
+                  {order?.customer?.email && (
+                    <tr>
+                      <td>{t('EMAIL', 'Email')}</td>
+                      <td>
+                        <a href={`mailto: ${order?.customer?.email}`}>{order?.customer?.email}</a>
+                      </td>
+                    </tr>
+                  )}
+                  {!!order?.customer?.address && (
+                    <tr>
+                      <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
+                      <td>
+                        <a href={`http://maps.google.com/?q=${order?.customer?.address}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.address}</a>
+                      </td>
+                    </tr>
+                  )}
+                  {!!order?.customer?.location && (
+                    <tr>
+                      <td>{t('LOCATION', 'Location')}</td>
+                      <td>
+                        <a href={`http://maps.google.com/?q=${order?.customer?.location?.lat},${order?.customer?.location?.lng}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.location?.lat}, {order?.customer?.location?.lng}</a>
+                      </td>
+                    </tr>
+                  )}
+                  {!!order?.customer?.internal_number && (
+                    <tr>
+                      <td>{t('INTERNAL_NUMBER', 'Internal number')}</td>
+                      <td>{order?.customer?.internal_number}</td>
+                    </tr>
+                  )}
+                  {!!order?.customer?.address_notes && (
+                    <tr>
+                      <td>{t('NOTES', 'Notes')}</td>
+                      <td>{order?.customer?.address_notes}</td>
+                    </tr>
+                  )}
+                  {!!order?.customer?.zipcode && (
+                    <tr>
+                      <td>{t('ZIPCODE', 'Zipcode')}</td>
+                      <td>{order?.customer?.zipcode}</td>
+                    </tr>
+                  )}
+                  {!!order?.on_behalf_of && (
+                    <tr>
+                      <td>{t('ON_BEHALF_OF', 'On behalf of')}</td>
+                      <td>{order?.on_behalf_of}</td>
+                    </tr>
+                  )}
+                </tbody>
+              </CustomerInfoTable>
+            )}
           </CutsomerDetail>
         </Accordion.Collapse>
       </Accordion>
@@ -254,6 +338,7 @@ export const OrderContactInformation = (props) => {
                 handleOpenMessages={handleOpenMessages}
                 isOrderDrivers
                 orderId={order?.id}
+                setIsCommentPopup={setIsCommentPopup}
               />
             </DriverSelectorContainer>
           )}
@@ -322,6 +407,8 @@ const ContextAwareToggle = ({ children, eventKey, callback }) => {
     <ToggleItemWrapper
       active={isCurrentEventKey}
       onClick={handleButtonClick}
+      id={`accordion${eventKey}`}
+      data-id={isCurrentEventKey ? '1' : '0'}
     >
       {children}
     </ToggleItemWrapper>

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
+import { darken } from 'polished'
 
 export const BusinessInfo = styled.div`
   display: flex;
@@ -101,6 +102,35 @@ export const InfoContent = styled.div`
 
 export const CustomerInfo = styled(BusinessInfo)``
 
+export const ActionIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  > .down-arrow {
+    transition: all 0.3s;
+    margin: 0 10px;
+  }
+  .edit-icon {
+    color: ${props => props.theme.colors.secundaryLight};
+    cursor: pointer;
+  }
+`
+
+export const ReviewWrapper = styled.div`
+  margin-top: 23px;
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+  textarea {
+    width: 100%;
+  }
+`
+
 export const DriverInfoContainer = styled.div`
   display: flex;
   align-items: center;
@@ -209,3 +239,40 @@ export const ReviewButton = styled.span`
   font-size: 14px;
   text-decoration: underline;
 `
+
+export const CustomerEditWrapper = styled.div`
+  input {
+    width: 100%;
+    margin-bottom: 12px;
+  }
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 10px 15px;
+    outline: none;
+    ::placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &:-ms-input-placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+  button {
+    margin-top: 10px;
+    display: block;
+    height: 44px;
+    border-radius: 8px;
+    margin-left: auto;
+  }
+`

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

@@ -12,10 +12,11 @@ import { OrderBill } from '../OrderBill'
 import { OrderContactInformation } from '../OrderContactInformation'
 import { XLg } from 'react-bootstrap-icons'
 import { NotFoundSource, Modal, Alert } from '../../Shared'
-import { IconButton } from '../../../styles'
+import { Button, IconButton, TextArea } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
 import { OrderToPrintTicket } from '../OrderToPrintTicket'
 import { getOrderStatuPickUp, getOrderStatus, getCurrenySymbol } from '../../../utils'
+import { useForm } from 'react-hook-form'
 
 import {
   Container,
@@ -34,15 +35,22 @@ import {
   RejectReasonsContainer,
   RejectReasonWrapper,
   RejectReasonsList,
-  DetailBottom
+  DetailBottom,
+  FormControl,
+  AssigmentCommentContainer,
+  ErrorMessage
 } from './styles'
 
 const OrderDetailsUI = (props) => {
   const {
     isSelectedOrders,
+    handleChangeCustomerInfoState,
+    customerInfoState,
+    handleUpdateCustomerInfo,
     open,
     handleBackRedirect,
     handleUpdateOrderStatus,
+    setAddressState,
     isTourOpen,
     handleUpdateOrderForUnreadCount,
     messages,
@@ -54,9 +62,15 @@ const OrderDetailsUI = (props) => {
     actionStatus,
     handleRefundPaymentsStripe,
     handleOrderRefund,
-    isServiceOrder
+    isServiceOrder,
+    handleUpdateComment
   } = props
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm()
   const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
@@ -73,6 +87,7 @@ const OrderDetailsUI = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExpand, setIsExpand] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isCommentPopup, setIsCommentPopup] = useState(false)
 
   const placeSpotEnabled = [3, 4]
   const {
@@ -256,6 +271,11 @@ const OrderDetailsUI = (props) => {
     history.replace(`${location.pathname}?id=${orderId}`)
   }
 
+  const onSubmit = (data) => {
+    handleUpdateComment(data?.manual_driver_assignment_comment)
+    setIsCommentPopup(false)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -322,13 +342,12 @@ const OrderDetailsUI = (props) => {
           <OrderStatus isDisabled={isTourOpen && currentTourStep === 1}>
             <div>
               <h2>{t('ORDER_STATUS_TEXT', 'Order status')}</h2>
-              <p>
-                {
-                  order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })
-                }
-              </p>
+              {order?.delivery_datetime_utc &&
+              <p>{parseDate(order?.delivery_datetime_utc)}</p>
+              }
+              {order?.delivery_datetime && (
+                <p>{parseDate(order?.delivery_datetime, { utc: false })}  {`(${t('BUSINESS_TIME', 'Business time')})`}</p>
+              )}
               <p>{order?.eta_time} {t('MIN', 'min')}</p>
             </div>
             <OrderStatusSelectorWrapper>
@@ -379,12 +398,17 @@ const OrderDetailsUI = (props) => {
           <div data-tour='tour_driver'>
             <OrderContactInformation
               isServiceOrder={isServiceOrder}
+              customerInfoState={customerInfoState}
+              handleChangeCustomerInfoState={handleChangeCustomerInfoState}
+              handleUpdateCustomerInfo={handleUpdateCustomerInfo}
               order={order}
               extraOpen={extraOpen}
               unreadAlert={unreadAlert}
               isTourOpen={isTourOpen}
               setCurrentTourStep={setCurrentTourStep}
+              setAddressState={setAddressState}
               handleShowOption={handleShowOption}
+              setIsCommentPopup={setIsCommentPopup}
             />
             <OrderProducts>
               <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>
@@ -544,6 +568,27 @@ const OrderDetailsUI = (props) => {
         onAccept={() => setAlertState({ open: false, content: [] })}
         closeOnBackdrop={false}
       />
+      <Modal
+        width='500px'
+        open={isCommentPopup}
+        title={t('ORDERING', 'Ordering')}
+        onClose={() => setIsCommentPopup(false)}
+      >
+        <AssigmentCommentContainer onSubmit={handleSubmit(onSubmit)}>
+          <FormControl isError={errors.manual_driver_assignment_comment}>
+            <label>{t('MANUAL_DRIVER_ASSIGMENT_COMMENT', 'Manual driver assigment comment')}</label>
+            <TextArea
+              name='manual_driver_assignment_comment'
+              placeholder={t('MANUAL_DRIVER_ASSIGMENT_COMMENT', 'Manual driver assigment comment')}
+              ref={register({
+                required: true
+              })}
+            />
+            {errors.manual_driver_assignment_comment && <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>}
+          </FormControl>
+          <Button color='primary' type='submit'>{t('ACCEPT', 'Accept')}</Button>
+        </AssigmentCommentContainer>
+      </Modal>
     </Container>
   )
 }