ordering-ui-external 10.10.22 → 11.0.0

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/src/themes/five/src/components/SingleProductCard/layouts/original/index.js

@@ -22,13 +22,19 @@ import {
   QuantityContainer,
   RibbonBox,
   TitleWrapper,
-  LastOrder,
-  SkeletonCardInfo,
-  SkeletonCardLogo
+  LastOrder
 } from './styles'
 import { Button } from '../../../../styles/Buttons'
 
-const SingleProductCardUI = (props) => {
+const singleProductCardPropsAreEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) &&
+    prevProps.isSkeleton === nextProps.isSkeleton &&
+    prevProps.isSoldOut === nextProps.isSoldOut &&
+    prevProps.isCartOnProductsList === nextProps.isCartOnProductsList &&
+    prevProps.productAddedToCartLength === nextProps.productAddedToCartLength
+}
+
+const SingleProductCardUI = React.memo((props) => {
   const {
     product,
     isSoldOut,
@@ -155,7 +161,7 @@ const SingleProductCardUI = (props) => {
         className='product-card'
         isShowAddButt={!useCustomFunctionality && !hideAddButton && !isSkeleton}
       >
-        {isObservedValidation ? (
+        {isObservedValidation && (
           <div>
             {!useCustomFunctionality && (
               <>
@@ -230,17 +236,6 @@ const SingleProductCardUI = (props) => {
               <span style={{ fontSize: 16, fontWeight: 500 }}>{customText}</span>
             )}
           </div>
-        ) : (
-          <div>
-            <SkeletonCardInfo>
-              <Skeleton width={100} />
-              <Skeleton width={100} />
-              <Skeleton width={100} />
-            </SkeletonCardInfo>
-            <SkeletonCardLogo>
-              <Skeleton height={75} width={75} />
-            </SkeletonCardLogo>
-          </div>
         )}
         {!useCustomFunctionality && !hideAddButton && !isSkeleton && (
           <Button outline color='primary' disabled={productAddedToCartLength && product?.maximum_per_order && productAddedToCartLength >= product?.maximum_per_order}>
@@ -320,7 +315,7 @@ const SingleProductCardUI = (props) => {
       />
     </>
   )
-}
+}, singleProductCardPropsAreEqual)
 
 export const SingleProductCard = (props) => {
   const singleProductCardProps = {

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} />
     </>
   )
 }