ordering-ui-external 13.0.5 → 14.0.0

package/src/themes/five/src/components/Messages/MapMessages.js

@@ -1,14 +1,13 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { BubbleBusines, BubbleConsole, BubbleCustomer, ChatImage, MessageBusiness, MessageConsole, MessageContentWrapper, MessageCreatedDate, MessageCustomer, MyName, TimeofSent, TimeofSentByAdmin } from './styles'
 import { useLanguage, useSession, useUtils } from 'ordering-components-external'
 
 export const MapMessages = (props) => {
   const {
-    messages,
-    messagesToShow,
     order,
     filterSpecialStatus,
     handleModalImage,
+    hideLogBookMessages,
     getLevel,
     business,
     driver,
@@ -18,6 +17,25 @@ export const MapMessages = (props) => {
   const [, t] = useLanguage()
   const [{ parseDate, parseTime }] = useUtils()
   const [{ user }] = useSession()
+
+  const [messages, setMessages] = useState(props.messages)
+  const [messagesToShow, setMessagesToShow] = useState(props.messagesToShow)
+
+  useEffect(() => {
+    if ((!props.messages?.messages?.length && !props.messagesToShow?.messages?.length) || !hideLogBookMessages) return
+    const messages_ = {
+      ...props.messages,
+      messages: props.messages?.messages?.filter(msg => msg.type !== 1 && msg.type !== 0)
+    }
+    const messagesToShow_ = {
+      ...props.messagesToShow,
+      messages: props.messagesToShow?.messages?.filter(msg => msg.type !== 1 && msg.type !== 0)
+    }
+
+    setMessages(messages_)
+    setMessagesToShow(messagesToShow_)
+  }, [JSON.stringify(props.messages), JSON.stringify(props.messagesToShow)])
+
   return (
     <>
       {messages?.messages.map((message) => (

package/src/themes/five/src/components/Messages/index.js

@@ -4,7 +4,8 @@ import {
   Messages as MessagesController,
   useUtils,
   useLanguage,
-  useEvent
+  useEvent,
+  useConfig
 } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import IosSend from '@meronex/icons/ios/IosSend'
@@ -82,6 +83,7 @@ const MessagesUI = (props) => {
   } = props
 
   const theme = useTheme()
+  const [{ configs }] = useConfig()
   const [, t] = useLanguage()
   const { handleSubmit, register, errors, setValue } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -93,6 +95,8 @@ const MessagesUI = (props) => {
   const previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
 
+  const hideLogBookMessages = configs?.order_logbook_enabled?.value === '0'
+
   const quickMessageList = [
     { key: 'message_1', text: t('CUSTOMER_MESSAGE_1', 'Lorem ipsum 1') },
     { key: 'message_2', text: t('CUSTOMER_MESSAGE_2', 'Lorem ipsum 2') },
@@ -476,23 +480,28 @@ const MessagesUI = (props) => {
             {
               !messages?.loading && order && (
                 <MessageContentWrapper>
-                  <MessageCreatedDate>
-                    <span>{parseDate(order.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
-                  </MessageCreatedDate>
-                  <MessageConsole>
-                    <BubbleConsole>
-                      {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>{' '}
-                      <TimeofSent>{parseTime(order.created_at)}</TimeofSent>
-                    </BubbleConsole>
-                  </MessageConsole>
+                  {!hideLogBookMessages && (
+                    <>
+                      <MessageCreatedDate>
+                        <span>{parseDate(order.created_at, { outputFormat: 'MMM DD, YYYY' })}</span>
+                      </MessageCreatedDate>
+                      <MessageConsole>
+                        <BubbleConsole>
+                          {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>{' '}
+                          <TimeofSent>{parseTime(order.created_at)}</TimeofSent>
+                        </BubbleConsole>
+                      </MessageConsole>
+                    </>
+                  )}
                   <MapMessages
                     messages={messagesToShow?.messages?.length ? messagesToShow : messages}
                     messagesToShow={messagesToShow}
+                    hideLogBookMessages={hideLogBookMessages}
                     order={order}
                     filterSpecialStatus={filterSpecialStatus}
                     handleModalImage={handleModalImage}

package/src/themes/five/src/components/MultiCheckout/index.js

@@ -153,7 +153,7 @@ const MultiCheckoutUI = (props) => {
       return
     }
 
-    if (!userErrors.length && !requiredFields?.length) {
+    if ((!userErrors.length && !requiredFields?.length) || (requiredFields?.length === 1 && isCustomerMode && requiredFields?.includes('email'))) {
       handleGroupPlaceOrder && handleGroupPlaceOrder()
       return
     }

package/src/themes/five/src/components/MultiOrdersDetails/SingleOrderCard.js

@@ -48,7 +48,7 @@ const SingleOrderCardUI = (props) => {
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const hideIndividualButton = configs.multi_business_checkout_remove_individual_buttons?.value === '1'
 
-  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23, 24, 25, 26]
 
   const handleGoToOrderDetails = (uuid) => {
     events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: !props.isMultiOrders })

package/src/themes/five/src/components/OrdersOption/index.js

@@ -66,7 +66,8 @@ const OrdersOptionUI = (props) => {
     businesses,
     handleUpdateBusinesses,
     getPage,
-    loadOrders
+    loadOrders,
+    disableSkeletons
   } = props
 
   const [, t] = useLanguage()
@@ -230,7 +231,7 @@ const OrdersOptionUI = (props) => {
         />
       )}
 
-      {(isCustomLayout ? (loading || businesses?.loading) : showSkeletons) && (
+      {!disableSkeletons && (isCustomLayout ? (loading || businesses?.loading) : showSkeletons) && (
         <>
           {(businesses?.loading && isBusiness) ? (
             <BusinessControllerSkeleton>

package/src/themes/five/src/components/SingleOrderCard/index.js

@@ -44,7 +44,8 @@ const SingleOrderCardUI = (props) => {
     isSkeleton,
     isFavorite,
     handleRemoveCart,
-    cartState
+    cartState,
+    reorderLoading
   } = props
 
   const [, t] = useLanguage()
@@ -115,7 +116,7 @@ const SingleOrderCardUI = (props) => {
       setConfirm({
         open: true,
         content: t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?'),
-        handleOnAccept: async () => {
+        handleOnAccept: () => {
           handleRemoveCart()
           setConfirm({ ...confirm, open: false })
         }
@@ -270,8 +271,14 @@ const SingleOrderCardUI = (props) => {
                 </Button>
               )}
               {order.cart && typeof order?.id === 'number' && !hideReorderButton && (
-                <Button color='primary' className='reorder' outline onClick={() => handleClickReorder(order)}>
-                  {cartState?.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
+                <Button
+                  color='primary'
+                  className='reorder'
+                  outline
+                  onClick={() => handleClickReorder(order)}
+                  disabled={reorderLoading || cartState?.loading}
+                >
+                  {reorderLoading || cartState?.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
                 </Button>
               )}
             </ButtonWrapper>

package/src/themes/five/src/components/UserDetails/index.js

@@ -11,7 +11,8 @@ import {
   ModalIcon,
   TitleContainer,
   CountryFlag,
-  PhoneContainer
+  PhoneContainer,
+  SkeletonsContainer
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
 import PhoneInput from 'react-phone-number-input'
@@ -50,8 +51,9 @@ const UserDetailsUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
-  const [{ user }] = useSession()
+  const [{ user, loading }] = useSession()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [skeletonsLength] = useState(requiredFields)
   const userData = userState.result?.result || props.userData || formState.result?.result || user
 
   const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
@@ -127,7 +129,10 @@ const UserDetailsUI = (props) => {
   }, [willVerifyOtpState])
 
   useEffect(() => {
-    if (isCheckoutPlace && requiredFields?.length === 0 && !formState?.loading) {
+    if (isCheckoutPlace &&
+      (requiredFields?.length === 0 || (requiredFields?.length === 1 && requiredFields?.includes('email') && isCustomerMode)) &&
+      !formState?.loading
+    ) {
       setIsSuccess && setIsSuccess(true)
       onClose && onClose()
     }
@@ -141,15 +146,21 @@ const UserDetailsUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {(validationFields.loading || formState.loading || userState.loading) && (
-        <UserData>
-          <Skeleton width={250} height={25} />
-          <Skeleton width={180} height={25} />
-          <Skeleton width={210} height={25} />
-        </UserData>
+      {((validationFields.loading || formState.loading || userState.loading || loading)) && (
+        <SkeletonsContainer>
+          <UserData>
+            {skeletonsLength?.map(field => (
+              <div key={field?.id}>
+                <Skeleton width={250} height={35} />
+                <Skeleton width='100%' height={40} />
+              </div>
+            ))}
+            <Skeleton width='100%' height={44} style={{ marginTop: 20 }} />
+          </UserData>
+        </SkeletonsContainer>
       )}
 
-      {!(validationFields.loading || formState.loading || userState.loading) && (
+      {!(validationFields.loading || formState.loading || userState.loading || loading) && (
         <Container>
           {isModal && (
             <TitleContainer isAddressFormOpen={isAddressFormOpen && !isEdit}>

package/src/themes/five/src/components/UserDetails/styles.js

@@ -115,3 +115,7 @@ export const PhoneContainer = styled.div`
   align-items: center;
   height: 30px;
 `
+
+export const SkeletonsContainer = styled.div`
+  margin-top: 25px;
+`

package/src/themes/five/src/components/UserFormDetails/index.js

@@ -338,12 +338,12 @@ export const UserFormDetailsUI = (props) => {
                           className='form'
                           borderBottom
                           disabled={!isEdit}
-                          placeholder={t(field.code.toUpperCase(), field?.name)}
+                          placeholder={isCustomerMode ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field?.name)}
                           defaultValue={formState?.changes[field.code] ?? (user && user[field.code]) ?? ''}
                           onChange={handleChangeInputEmail}
                           ref={
                             formMethods.register({
-                              required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+                              required: !isCustomerMode ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')) : null,
                               pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                             })
                           }