ordering-ui-external 10.10.23 → 11.0.1

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage, useOrder, BusinessList as BusinessListController } from 'ordering-components-external'
 import { BusinessController } from '../BusinessController'
 import { Button } from '../../styles/Buttons'
@@ -12,6 +12,9 @@ import {
   BusinessListWrapper
 } from './styles'
 import { AutoScroll } from '../AutoScroll'
+import Modal from '../Modal'
+import { BusinessPreorder } from '../BusinessPreorder'
+import { getCateringValues } from '../../../../../utils'
 
 const HighestRatedUI = (props) => {
   const {
@@ -27,8 +30,25 @@ const HighestRatedUI = (props) => {
 
   const [, t] = useLanguage()
   const [orderState] = useOrder()
+  const [isPreorder, setIsPreorder] = useState(false)
+  const [preorderBusiness, setPreorderBusiness] = useState(null)
 
   const isBusinessWithReviews = businessesList?.businesses?.every((business) => business?.reviews?.total === 0)
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+  const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
+
+  const handleClosePreorder = () => {
+    setIsPreorder(false)
+    setPreorderBusiness(null)
+  }
+
+  useEffect(() => {
+    if (preorderBusiness) setIsPreorder(true)
+  }, [preorderBusiness])
 
   useEffect(() => {
     if (!businessesList.loading) {
@@ -90,6 +110,7 @@ const HighestRatedUI = (props) => {
                       isCustomerMode={isCustomerMode}
                       favoriteIds={favoriteIds}
                       setFavoriteIds={setFavoriteIds}
+                      onPreorderBusiness={setPreorderBusiness}
                     />
                   )
                 ))
@@ -114,6 +135,19 @@ const HighestRatedUI = (props) => {
           </BusinessList>
         </BusinessListWrapper>
       </HighestRatedContainer>
+      <Modal
+        open={isPreorder}
+        width='760px'
+        onClose={() => handleClosePreorder()}
+      >
+        <BusinessPreorder
+          business={preorderBusiness}
+          handleClick={handleBusinessClick}
+          showButton
+          cateringPreorder={!!cateringTypeString}
+          {...cateringValues}
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

package/src/themes/five/src/components/OrderDetails/OrderBillSection.js

@@ -124,7 +124,7 @@ export const OrderBillSection = (props) => {
             )
           }
           {
-            order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
+            order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map(tax => (
               <tr key={tax?.id}>
                 <td>
                   {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
@@ -181,6 +181,12 @@ export const OrderBillSection = (props) => {
               <td>{parsePrice(order?.summary?.delivery_price + getIncludedTaxes(true))}</td>
             </tr>
           )}
+          {order?.extra_value_checkprice && order?.extra_value_checkprice > 0 && (
+            <tr>
+              <td>{t('EXTRA_VALUE_CHECKPRICE', 'Extra value checkprice')}</td>
+              <td>{parsePrice(order?.extra_value_checkprice)}</td>
+            </tr>
+          )}
           {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map(tax => (
               <tr key={tax?.id}>

package/src/themes/five/src/components/OrderDetails/OrderEta.js

@@ -57,7 +57,7 @@ export const OrderEta = (props) => {
     }
     estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
     const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
-    setEstimatedDeliveryTime(_estimatedTime)
+    setEstimatedDeliveryTime(order?.status === 13 ? parseDate(_delivery, { utc: !!order?.delivery_datetime_utc, outputFormat: outputFormat }) : _estimatedTime)
   }
 
   useEffect(() => {

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

@@ -130,6 +130,7 @@ const OrderDetailsUI = (props) => {
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
+  const preorderStatus = [0, 13]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
@@ -546,7 +547,7 @@ const OrderDetailsUI = (props) => {
                         </DirectionButtonWrapper>
                       )}
                     </BusinessInfo>
-                    {!hideOrderActions && (
+                    {!hideOrderActions && !preorderStatus.includes(order?.status) && (
                       <BtsOrderStatus>
                         <div>
                           <Button

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

@@ -98,7 +98,7 @@ const ProductOptionsUI = (props) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productAddedToCartLength,
-    pizzaType,
+    pizzaState,
     handleFavoriteProduct,
     handleCreateGuestUser,
     actionStatus,
@@ -654,7 +654,7 @@ const ProductOptionsUI = (props) => {
                                       isSoldOut={isSoldOut}
                                       scrollDown={scrollDown}
                                       setIsScrollAvailable={setIsScrollAvailable}
-                                      pizzaType={pizzaType}
+                                      pizzaState={pizzaState}
                                       productCart={productCart}
                                     />
                                   )

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

@@ -27,7 +27,7 @@ import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
 
 const ProductOptionSubOptionPropsAreEqual = (prevProps, nextProps) => {
   return JSON.stringify(prevProps.state) === JSON.stringify(nextProps.state) &&
-    prevProps.pizzaType === nextProps.pizzaType &&
+    JSON.stringify(prevProps.pizzaState) === JSON.stringify(nextProps.pizzaState) &&
     prevProps.balance === nextProps.balance &&
     JSON.stringify(prevProps.productCart) === JSON.stringify(nextProps.productCart)
 }
@@ -44,9 +44,8 @@ const ProductOptionSubOptionUI = React.memo((props) => {
     changePosition,
     isSoldOut,
     setIsScrollAvailable,
-    onChange,
-    pizzaType,
-    productCart
+    usePizzaValidation,
+    pizzaState
   } = props
 
   const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -74,16 +73,18 @@ const ProductOptionSubOptionUI = React.memo((props) => {
   const handleSuboptionClick = () => {
     dirtyRef.current = true
     toggleSelect()
-    if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1) && !state.selected) {
+    const minMaxValidation = option?.with_half_option ? usePizzaValidation : (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))
+    if (!state.selected && minMaxValidation) {
       setShowMessage(true)
     }
   }
 
   useEffect(() => {
-    if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1) && !state.selected)) {
+    const minMaxValidation = option?.with_half_option ? usePizzaValidation : (!state.selected && balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))
+    if (!minMaxValidation) {
       setShowMessage(false)
     }
-  }, [balance])
+  }, [balance, pizzaState?.[`option:${option?.id}`]?.value])
 
   useEffect(() => {
     if (balance === option?.max && state?.selected && dirtyRef) {
@@ -95,10 +96,10 @@ const ProductOptionSubOptionUI = React.memo((props) => {
   }, [state?.selected])
 
   useEffect(() => {
-    if (pizzaType === 'mitad y mitad' && option?.with_half_option) {
+    if (option?.with_half_option) {
       handlePosition({}, 'left')
     }
-  }, [pizzaType, state?.selected, suboption?.id])
+  }, [state?.selected, suboption?.id])
 
   return (
     <>
@@ -155,20 +156,18 @@ const ProductOptionSubOptionUI = React.memo((props) => {
                 <>
                   <BsCircleHalf
                     className={[
-                      pizzaType === 'center' ? 'disabled disable-clicks' : '',
                       'reverse',
                       state.selected && state.position === 'left' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'left')}
                   />
                   <BsCircleFill
                     className={[
-                      pizzaType === 'mitad y mitad' ? 'disabled' : '',
+                      pizzaState?.[`option:${option?.id}`]?.value === option?.max ? 'disabled' : '',
                       state.selected && state.position === 'whole' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'whole')}
                   />
                   <BsCircleHalf
                     className={[
-                      pizzaType === 'center' ? 'disabled disable-clicks' : '',
                       state.selected && state.position === 'right' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'right')}
                   />

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

@@ -56,7 +56,7 @@ export const Text = styled.div`
     text-overflow: ellipsis;
     ${props => props.theme?.rtl && css`
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: 10px;    
     `}
   }
 

package/src/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/index.js

@@ -54,7 +54,8 @@ const SignUpDriverUI = (props) => {
     saveCustomerUser,
     fieldsNotValid,
     signupData,
-    enableReCaptcha
+    enableReCaptcha,
+    isDriverSignup
   } = props
 
   const theme = useTheme()
@@ -385,7 +386,7 @@ const SignUpDriverUI = (props) => {
         </FormInput>
       </FormSide>
       <Alert
-        title={t('SIGN_UP_FOR_BUSINESS', 'Sign up for business')}
+        title={isDriverSignup ? t('SIGN_UP_FOR_DRIVER', 'Sign up for driver') : t('SIGN_UP_FOR_BUSINESS', 'Sign up for business')}
         content={alertState.content}
         acceptText={t('ACCEPT', 'Accept')}
         open={alertState.open}

package/src/themes/five/src/components/SignUpDriver/layouts/OldSignUpDriver/index.js

@@ -52,7 +52,8 @@ const SignUpDriverUI = (props) => {
     saveCustomerUser,
     fieldsNotValid,
     signupData,
-    enableReCaptcha
+    enableReCaptcha,
+    isDriverSignup
   } = props
 
   const theme = useTheme()
@@ -381,7 +382,7 @@ const SignUpDriverUI = (props) => {
         </FormInput>
       </FormSide>
       <Alert
-        title={t('SIGN_UP_FOR_BUSINESS', 'Sign up for business')}
+        title={isDriverSignup ? t('SIGN_UP_FOR_DRIVER', 'Sign up for driver') : t('SIGN_UP_FOR_BUSINESS', 'Sign up for business')}
         content={alertState.content}
         acceptText={t('ACCEPT', 'Accept')}
         open={alertState.open}

package/template/pages/SignUpDriver/index.js

@@ -3,10 +3,14 @@ import { SignUpDriver as SignUpDriverController } from '../../../src/themes/five
 import { HelmetTags } from '../../components/HelmetTags'
 
 export const SignUpDriver = (props) => {
+  const SignUpDriverProps = {
+    ...props,
+    isDriverSignup: true
+  }
   return (
     <>
       <HelmetTags page='signup_driver' />
-      <SignUpDriverController {...props} />
+      <SignUpDriverController {...SignUpDriverProps} />
     </>
   )
 }