ordering-ui-external 10.0.0 → 10.1.0

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

@@ -8,6 +8,7 @@ import { Telephone, ChevronDown } from 'react-bootstrap-icons'
 import { Accordion, AccordionContext, useAccordionToggle } from 'react-bootstrap'
 import { ReviewCustomer } from '../ReviewCustomer'
 import { Modal } from '../../Shared'
+import { CompanySelector } from '../CompanySelector'
 
 import {
   BusinessInfo,
@@ -130,7 +131,11 @@ export const OrderContactInformation = (props) => {
             </PhotoWrapper>
             <InfoContent>
               <div>
-                <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                {(order?.customer?.name || order?.customer?.middle_name || order?.customer?.lastname || order?.customer?.second_lastname) ? (
+                  <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                ) : (
+                  (!order?.customer?.email || !order?.customer?.phone) && <p className='name'>{t('GUEST_USER', 'Guest user')}</p>
+                )}
                 {order?.customer?.cellphone && (
                   <IconButton
                     onClick={() => window.open(`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`)}
@@ -139,13 +144,13 @@ export const OrderContactInformation = (props) => {
                   </IconButton>
                 )}
               </div>
-              {/* {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
+              {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
                 <ReviewButton
                   onClick={() => handleReviewCustomer(order?.customer)}
                 >
                   {t('REVIEW', 'Review')}
                 </ReviewButton>
-              )} */}
+              )}
             </InfoContent>
             <ChevronDown className='down-arrow' />
           </CustomerInfo>
@@ -211,20 +216,38 @@ export const OrderContactInformation = (props) => {
       </Accordion>
       {order?.delivery_type === 1 && !isServiceOrder && (
         <>
-          <DriverSelectorContainer>
-            <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
-            <DriverSelector
-              small
-              isPhoneView
-              defaultValue={order?.driver_id ? order.driver_id : 'default'}
-              order={order}
-              isTourOpen={isTourOpen}
-              setCurrentTourStep={setCurrentTourStep}
-              handleOpenMessages={handleOpenMessages}
-              isOrderDrivers
-              orderId={order?.id}
-            />
-          </DriverSelectorContainer>
+          {!order?.driver_id && (
+            <DriverSelectorContainer>
+              <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
+              <CompanySelector
+                small
+                isPhoneView
+                defaultValue={order?.driver_company_id ?? 'default'}
+                order={order}
+                isTourOpen={isTourOpen}
+                setCurrentTourStep={setCurrentTourStep}
+                handleOpenMessages={handleOpenMessages}
+                isOrderDrivers
+                orderId={order?.id}
+              />
+            </DriverSelectorContainer>
+          )}
+          {!order?.driver_company_id && (
+            <DriverSelectorContainer>
+              <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
+              <DriverSelector
+                small
+                isPhoneView
+                defaultValue={order?.driver_id ?? 'default'}
+                order={order}
+                isTourOpen={isTourOpen}
+                setCurrentTourStep={setCurrentTourStep}
+                handleOpenMessages={handleOpenMessages}
+                isOrderDrivers
+                orderId={order?.id}
+              />
+            </DriverSelectorContainer>
+          )}
           <DriverInfoContainer>
             <DriverInfo>
               <PhotoWrapper>

package/src/themes/callcenterOriginal/src/components/Orders/OrderDashboardSLASetting/index.js

@@ -74,6 +74,7 @@ export const OrderDashboardSLASettingUI = (props) => {
   const onSubmit = (data) => {
     if (data && Object.keys(data).length > 0) {
       handleClickUpdate()
+      setSettingOpen(false)
     }
   }
 
@@ -193,7 +194,6 @@ export const StatusBlock = (props) => {
             name='minute'
             type='text'
             placeholder='MM'
-            disabled
             defaultValue={configs?.order_deadlines_delayed_time?.value}
             ref={formMethods.register({
               required: t('VALIDATION_ERROR_MINUTE_REQUIRED', 'The field minute is required').replace('_attribute_', t('MINUTE', 'Minute'))

package/src/themes/callcenterOriginal/src/components/Orders/OrderDelete/index.js

@@ -1,49 +1,29 @@
-import React, { useEffect, useState } from 'react'
-import { useLanguage, CheckPassword as CheckPasswordController } from 'ordering-components-external'
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
 import FaTrash from '@meronex/icons/fa/FaTrash'
 import { useWindowSize } from '../../../../../../hooks/useWindowSize'
 import { Button } from '../../../styles/Buttons'
-import { Modal } from '../../Shared'
+import { ConfirmAdmin } from '../../Shared'
 
-import {
-  WrapperCheckPassword,
-  ErrorText
-} from './styles'
-
-const OrderDeleteUI = (props) => {
+export const OrderDelete = (props) => {
   const {
-    checkPasswordStatus,
-    handleChangePassword,
-    getCheckPassword,
     handleDeleteMultiOrders
   } = props
   const { width } = useWindowSize()
   const [, t] = useLanguage()
 
-  const [checkPasswordModalOpen, setCheckPasswordModalOpen] = useState(false)
-  const [password, setPassword] = useState('')
-  const handlePassword = (e) => {
-    setPassword(e.target.value)
-  }
+  const [confirmAdmin, setConfirmAdmin] = useState({ open: false, handleOnConfirm: null })
 
   const handleModalOpen = () => {
-    setPassword('')
-    setCheckPasswordModalOpen(true)
+    setConfirmAdmin({
+      open: true,
+      handleOnConfirm: () => {
+        setConfirmAdmin({ ...confirmAdmin, open: false })
+        handleDeleteMultiOrders()
+      }
+    })
   }
 
-  useEffect(() => {
-    handleChangePassword(password)
-  }, [password])
-
-  useEffect(() => {
-    if (checkPasswordStatus.loading || checkPasswordStatus.error !== null) return
-    if (checkPasswordStatus.result === 'OK') {
-      setCheckPasswordModalOpen(false)
-      setPassword('')
-      handleDeleteMultiOrders()
-    }
-  }, [checkPasswordStatus])
-
   return (
     <>
       <Button
@@ -55,45 +35,11 @@ const OrderDeleteUI = (props) => {
         <FaTrash />
       </Button>
 
-      <Modal
-        open={checkPasswordModalOpen}
-        width='600px'
-        onClose={() => setCheckPasswordModalOpen(false)}
-      >
-        <WrapperCheckPassword>
-          <h3>{t('CONFIRM_PASSWORD', 'Confirm password')}</h3>
-          <p>{t('TYPE_YOUR_PASSWORD_TO_CONFIRM_DELETE', 'Type your password to confirm delete.')}</p>
-          <input
-            autoComplete='new-password'
-            type='password'
-            value={password}
-            placeholder={t('PASSWORD', 'password')}
-            onChange={(e) => handlePassword(e)}
-          />
-          {checkPasswordStatus?.error && (
-            <ErrorText
-              className='text-danger'
-            >
-              {checkPasswordStatus.error}
-            </ErrorText>
-          )}
-          <Button
-            color='primary'
-            borderRadius='7.6px'
-            onClick={() => getCheckPassword()}
-          >
-            {t('CONFIRM', 'Confirm')}
-          </Button>
-        </WrapperCheckPassword>
-      </Modal>
+      <ConfirmAdmin
+        open={confirmAdmin.open}
+        onClose={() => setConfirmAdmin({ ...confirmAdmin, open: false })}
+        onConfirm={confirmAdmin.handleOnConfirm}
+      />
     </>
   )
 }
-
-export const OrderDelete = (props) => {
-  const checkPasswordControlProps = {
-    ...props,
-    UIComponent: OrderDeleteUI
-  }
-  return <CheckPasswordController {...checkPasswordControlProps} />
-}

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils, useSession, OrderDetailsDashboard as OrderDetailsController } from 'ordering-components-external'
 import { ProductItemAccordion } from '../ProductItemAccordion'
@@ -13,6 +14,9 @@ import { XLg } from 'react-bootstrap-icons'
 import { NotFoundSource, Modal } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { OrderToPrint } from '../OrderToPrint'
+import { OrderToPrintTicket } from '../OrderToPrintTicket'
+import { getOrderStatuPickUp, getOrderStatus, getCurrenySymbol } from '../../../../../../utils'
+
 import {
   Container,
   SkeletonWrapper,
@@ -29,7 +33,8 @@ import {
   PlaceSpotContainer,
   RejectReasonsContainer,
   RejectReasonWrapper,
-  RejectReasonsList
+  RejectReasonsList,
+  DetailBottom
 } from './styles'
 
 const OrderDetailsUI = (props) => {
@@ -47,10 +52,13 @@ const OrderDetailsUI = (props) => {
     setIsTourFlag,
     setIsTourOpen,
     actionStatus,
-    handleRefundOrder,
+    handleRefundPaymentsStripe,
+    handleOrderRefund,
     isServiceOrder
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [openMessages, setOpenMessages] = useState({ chat: false, history: false })
@@ -58,10 +66,12 @@ const OrderDetailsUI = (props) => {
   const [{ parseDate }] = useUtils()
   const [{ user }] = useSession()
   const printRef = useRef()
+  const printTicketRef = useRef()
 
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false, customer: false })
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const placeSpotEnabled = [3, 4]
   const {
     order,
@@ -69,37 +79,6 @@ const OrderDetailsUI = (props) => {
   } = props.order
 
   const rejectResonStatuses = [6, 9, 10, 11, 12, 14]
-  const getOrderStatus = (status) => {
-    const orderStatus = [
-      { key: 0, value: 'Pending Order', slug: 'PENDING_ORDER', percentage: 25 },
-      { key: 1, value: 'Completed by admin', slug: 'COMPLETED_BY_ADMIN', percentage: 100 },
-      { key: 2, value: 'Reject by admin', slug: 'REJECT_BY_ADMIN', percentage: 0 },
-      { key: 3, value: 'Driver arrived by business', slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 70 },
-      { key: 5, value: 'Reject by business', slug: 'REJECT_BY_BUSINESS', percentage: 0 },
-      { key: 6, value: 'Reject by driver', slug: 'REJECT_BY_DRIVER', percentage: 0 },
-      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 35 },
-      { key: 8, value: 'Accepted by driver', slug: 'ACCEPTED_BY_DRIVER', percentage: 45 },
-      { key: 9, value: 'Pick up completed by driver', slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 80 },
-      { key: 10, value: 'Pick up Failed by driver', slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 11, value: 'Delivery completed by driver', slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
-      { key: 12, value: 'Delivery Failed by driver', slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 25 },
-      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 65 },
-      { key: 15, value: 'Pickup completed by customer', slug: 'PICKUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
-      { key: 16, value: 'Canceled by customer', slug: 'CANCELED_BY_CUSTOMER', percentage: 0 },
-      { key: 17, value: 'Not picked by customer', slug: 'NOT_PICKED_BY_CUSTOMER', percentage: 0 },
-      { key: 18, value: 'Driver almost arrived to business', slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
-      { key: 19, value: 'Driver almost arrived to customer', slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 90 },
-      { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
-      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 60 },
-      { key: 22, value: 'Looking for driver', slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: 'Driver on way', slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-    return objectStatus && objectStatus
-  }
 
   const getLogisticTag = (status) => {
     switch (parseInt(status)) {
@@ -141,26 +120,28 @@ const OrderDetailsUI = (props) => {
     setUnreadAlert({ business, driver, customer })
   }
 
-  const handleOpenMessages = (openMessage) => {
-    if (openMessage === 'chat') {
+  const handleCloseMessages = () => {
+    setOpenMessages({ chat: false, history: false })
+  }
+
+  const handleShowOption = (option, isInitialRender) => {
+    if (option === 'chat') {
       setOpenMessages({ chat: true, history: false })
       setUnreadAlert({ ...unreadAlert, customer: false })
-    }
-    if (openMessage === 'history') {
+      setShowOption(null)
+    } else if (option === 'history') {
       setOpenMessages({ chat: false, history: true })
+      setShowOption(null)
+    } else {
+      setOpenMessages({ chat: false, history: false })
+      setShowOption(option)
     }
-    setShowOption(null)
     setExtraOpen(true)
-  }
 
-  const handleCloseMessages = () => {
-    setOpenMessages({ chat: false, history: false })
-  }
-
-  const handleShowOption = (option) => {
-    handleCloseMessages()
-    setExtraOpen(true)
-    setShowOption(option)
+    if (!isInitialRender) {
+      const orderId = query.get('id')
+      history.replace(`${location.pathname}?id=${orderId}&section=${option}`)
+    }
   }
 
   useEffect(() => {
@@ -180,10 +161,14 @@ const OrderDetailsUI = (props) => {
       if (width <= 500) {
         document.getElementById('orderDetails').style.width = '100vw'
       } else {
-        if (extraOpen && width >= 1000) {
-          document.getElementById('orderDetails').style.width = '1000px'
+        if (isExpand) {
+          document.getElementById('orderDetails').style.width = '100vw'
         } else {
-          document.getElementById('orderDetails').style.width = '500px'
+          if (extraOpen && width >= 1000) {
+            document.getElementById('orderDetails').style.width = '1000px'
+          } else {
+            document.getElementById('orderDetails').style.width = '500px'
+          }
         }
       }
     }
@@ -191,22 +176,13 @@ const OrderDetailsUI = (props) => {
 
   useEffect(() => {
     toggleMainContent()
-  }, [width])
+  }, [extraOpen, isExpand, width])
 
   useEffect(() => {
     if (!open) return
     actionSidebar(true)
   }, [open])
 
-  useEffect(() => {
-    if (width < 1000) return
-    if (extraOpen) {
-      document.getElementById('orderDetails').style.width = '1000px'
-    } else {
-      toggleMainContent()
-    }
-  }, [extraOpen])
-
   const handleChangeTour = (evt) => {
     if (!isTourOpen) return
 
@@ -216,7 +192,7 @@ const OrderDetailsUI = (props) => {
     }
     if (evt.target.closest('.driver-select')) return
     if (isTourOpen && setCurrentTourStep) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setTimeout(() => {
         isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
       }, 1)
@@ -227,7 +203,7 @@ const OrderDetailsUI = (props) => {
     if (evt.keyCode === 37 && currentTourStep === 2) setCurrentTourStep(1)
     if (evt.keyCode === 39 && currentTourStep === 1 && order?.delivery_type === 1) setCurrentTourStep(2)
     if (evt.keyCode === 39 && currentTourStep === 1 && order?.delivery_type !== 1) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setTimeout(() => {
         isTourOpen && setCurrentTourStep && setCurrentTourStep(3)
       }, 1)
@@ -239,7 +215,7 @@ const OrderDetailsUI = (props) => {
       setIsTourFlag(false)
     }
     if ((evt.keyCode === 39 && currentTourStep === 2)) {
-      handleOpenMessages('chat')
+      handleShowOption('chat')
       setCurrentTourStep(3)
     }
     if (evt.keyCode === 39 && currentTourStep === 3) {
@@ -257,7 +233,7 @@ const OrderDetailsUI = (props) => {
 
   useEffect(() => {
     if (!isTourFlag) return
-    handleOpenMessages('chat')
+    handleShowOption('chat')
     setTimeout(() => {
       setCurrentTourStep(3)
     }, 1)
@@ -274,6 +250,8 @@ const OrderDetailsUI = (props) => {
     setExtraOpen(false)
     setOpenMessages({ chat: false, history: false })
     setShowOption(null)
+    const orderId = query.get('id')
+    history.replace(`${location.pathname}?id=${orderId}`)
   }
 
   useEffect(() => {
@@ -282,6 +260,16 @@ const OrderDetailsUI = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    if (loading) return
+    const section = query.get('section')
+    if (section) {
+      handleShowOption(section, true)
+    }
+  }, [loading])
+
+  const progressBarObjt = order?.delivery_type && order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
   return (
     <Container
       isSelectedOrders={isSelectedOrders}
@@ -313,18 +301,25 @@ const OrderDetailsUI = (props) => {
             showOption={showOption}
             openMessage={openMessages}
             handleShowOption={handleShowOption}
-            handleOpenMessages={handleOpenMessages}
             isTourOpen={isTourOpen}
             currentTourStep={currentTourStep}
             setIsTourOpen={setIsTourOpen}
             printRef={printRef}
+            printTicketRef={printTicketRef}
+            isExpand={isExpand}
+            setIsExpand={setIsExpand}
           />
           <OrderStatus isDisabled={isTourOpen && currentTourStep === 1}>
             <div>
               <h2>{t('ORDER_STATUS_TEXT', 'Order status')}</h2>
               <p>
-                {parseDate(order?.delivery_datetime, { utc: false })}
+                {
+                  order?.delivery_datetime_utc
+                    ? parseDate(order?.delivery_datetime_utc)
+                    : parseDate(order?.delivery_datetime, { utc: false })
+                }
               </p>
+              <p>{order?.eta_time} {t('MIN', 'min')}</p>
             </div>
             <OrderStatusSelectorWrapper>
               <OrderStatusTypeSelector
@@ -345,7 +340,7 @@ const OrderDetailsUI = (props) => {
             </PlaceSpotContainer>
           )}
           <StatusBarContainer>
-            <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+            <StatusBar percentage={progressBarObjt(order?.status)?.percentage} />
           </StatusBarContainer>
           <AdvancedLogistic>
             <div>
@@ -379,7 +374,7 @@ const OrderDetailsUI = (props) => {
               unreadAlert={unreadAlert}
               isTourOpen={isTourOpen}
               setCurrentTourStep={setCurrentTourStep}
-              handleOpenMessages={handleOpenMessages}
+              handleShowOption={handleShowOption}
             />
             <OrderProducts>
               <h2>{t('EXPORT_SUMMARY', 'Summary')}</h2>
@@ -387,16 +382,18 @@ const OrderDetailsUI = (props) => {
                 <ProductItemAccordion
                   key={product.id}
                   product={product}
-                  currency={order?.currency}
+                  currency={getCurrenySymbol(order?.currency)}
                 />
               ))}
             </OrderProducts>
             <OrderBill
               order={order}
               actionStatus={actionStatus}
-              handleRefundOrder={handleRefundOrder}
+              handleRefundPaymentsStripe={handleRefundPaymentsStripe}
+              handleOrderRefund={handleOrderRefund}
             />
           </div>
+          <DetailBottom />
         </OrderDetailsContent>
       )}
 
@@ -515,15 +512,21 @@ const OrderDetailsUI = (props) => {
           ref={printRef}
           order={order}
           placeSpotEnabled={placeSpotEnabled}
-          getOrderStatus={getOrderStatus}
+          getOrderStatus={progressBarObjt}
           getLogisticTag={getLogisticTag}
           getPriorityTag={getPriorityTag}
         />
       )}
+      {order && Object.keys(order).length > 0 && !loading && (
+        <OrderToPrintTicket
+          ref={printTicketRef}
+          order={order}
+          getOrderStatus={progressBarObjt}
+        />
+      )}
     </Container>
   )
 }
-
 export const OrderDetails = (props) => {
   const orderDetailsProps = {
     ...props,

package/src/themes/callcenterOriginal/src/components/Orders/OrderDetails/styles.js

@@ -248,3 +248,7 @@ export const RejectReasonWrapper = styled.div`
   background-color: ${props => lighten(0.4, props.theme.colors.danger)};
   color: ${props => props.theme.colors.danger};
 `
+
+export const DetailBottom = styled.div`
+  height: 20px;
+`