ordering-ui-external 1.8.6 → 1.8.8

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

@@ -78,6 +78,10 @@ const BusinessLogoStyled = styled.div`
   @media (min-width: 481px){
     width: 100%;
     height: 100%;
+    ${({ isMulti }) => isMulti && css`
+      width: 124px;
+      height: 124px;
+    `}
     min-height: 124px;
   }
 `
@@ -101,6 +105,10 @@ export const WrapperBusinessLogo = styled.div`
   height: 124px;
   min-height: 124px;
   max-width: 124px;
+  ${({ isMulti }) => isMulti && css`
+    max-width: initial;
+    width: 100%;
+  `}
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   border-radius: 7.6px;
 `
@@ -251,3 +259,8 @@ export const ContinueContainer = styled.div`
     flex: 1
   }
 `
+
+export const MultiLogosContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+`

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, ReviewProduct as ReviewProductController } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
-
 import {
   ReviewProductContainer,
   ActionBlock,
@@ -15,7 +14,7 @@ import {
   Comments,
   CommentsList,
   WrapperProductLogo,
-  ProductLogo,
+  ProductLogo
 } from './styles'
 import AiOutlineLike from '@meronex/icons/ai/AiOutlineLike'
 import AiOutlineDislike from '@meronex/icons/ai/AiOutlineDislike'
@@ -91,12 +90,12 @@ const SingleProductReview = (props) => {
 
   return (
     <SingleProductReviewContainer>
-        {(product?.images || theme.images?.dummies?.businessLogo) && (
-          <WrapperProductLogo>
-                  <ProductLogo bgimage={product?.images || theme.images?.dummies?.businessLogo} />
-          </WrapperProductLogo>
-        )}
-        <HandReviewWrapper>
+      {(product?.images || theme.images?.dummies?.businessLogo) && (
+        <WrapperProductLogo>
+          <ProductLogo bgimage={product?.images || theme.images?.dummies?.businessLogo} />
+        </WrapperProductLogo>
+      )}
+      <HandReviewWrapper>
         <p>{product?.name}</p>
         <HandReviewContent>
           <HandIconWrapper onClick={() => setIsLike(true)} active={isLike}>

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

@@ -22,7 +22,8 @@ import {
   TitleContainer,
   Map,
   FavoriteWrapper,
-  ReviewWrapper
+  ReviewWrapper,
+  MultiLogosContainer
 } from './styles'
 
 import {
@@ -59,13 +60,15 @@ const SingleOrderCardUI = (props) => {
   const [isProductReviewed, setIsProductReviewed] = useState(false)
   const [isDriverReviewed, setIsDriverReviewed] = useState(false)
 
-  const handleClickCard = (e, uuid) => {
+  const handleClickCard = (e, order) => {
     if (e.target.closest('.favorite') || e.target.closest('.review') || e.target.closest('.reorder')) return
 
     if (customArray) {
-      onRedirectPage({ page: 'checkout', params: { cartUuid: uuid } })
+      onRedirectPage({ page: 'checkout', params: { cartUuid: order.uuid } })
     } else {
-      onRedirectPage({ page: 'order_detail', params: { orderId: uuid } })
+      order?.cart_group_id
+        ? onRedirectPage({ page: 'multi_orders', params: { orderId: order.cart_group_id } })
+        : onRedirectPage({ page: 'order_detail', params: { orderId: order.uuid } })
     }
   }
 
@@ -141,7 +144,7 @@ const SingleOrderCardUI = (props) => {
         id='order-card'
         isBusinessesPage={isBusinessesPage}
         isCustomerMode={isCustomerMode}
-        onClick={(e) => handleClickCard(e, order?.uuid)}
+        onClick={(e) => handleClickCard(e, order)}
       >
         <Content isCustomerMode={isCustomerMode}>
           {isSkeleton ? (
@@ -149,7 +152,28 @@ const SingleOrderCardUI = (props) => {
           ) : (
             <>
               {!isCustomerMode && showBusinessLogo && (
-                <BusinessLogoWrapper bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')} />
+                <>
+                  {order?.business?.length > 1 ? (
+                    <MultiLogosContainer>
+                      {order?.business?.map((business, i) => (
+                        <React.Fragment key={business?.id}>
+                          {i > 1 ? (
+                            <p>
+                              + {order?.business?.length - 2}
+                            </p>
+                          ) : (
+                            <BusinessLogoWrapper
+                              bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}
+                              isMulti
+                            />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </MultiLogosContainer>
+                  ) : (
+                    <BusinessLogoWrapper bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')} />
+                  )}
+                </>
               )}
               {isCustomerMode && showBusinessLogo && (
                 <>
@@ -163,7 +187,7 @@ const SingleOrderCardUI = (props) => {
             </>
           )}
 
-          <BusinessInformation activeOrders>
+          <BusinessInformation activeOrders isMultiCart={order?.business?.length > 1}>
             {isCustomerMode ? (
               <TitleContainer>
                 <h2>{isSkeleton ? <Skeleton width={120} /> : order.business?.name}</h2>
@@ -174,7 +198,7 @@ const SingleOrderCardUI = (props) => {
                 </Price>
               </TitleContainer>
             ) : (
-              <h2>{isSkeleton ? <Skeleton width={120} /> : order.business?.name}</h2>
+              <h2>{isSkeleton ? <Skeleton width={120} /> : order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}</h2>
             )}
             {
               isSkeleton ? (
@@ -186,7 +210,7 @@ const SingleOrderCardUI = (props) => {
                   {order?.id && (
                     <>
                       <BsDot />
-                      <p name='order_number'>{t('ORDER_NUM', 'Order No.')} {order.id}</p>
+                      <p name='order_number'>{order?.business?.length > 1 ? `${order?.business?.length} ${t('ORDERS', 'orders')}` : `${t('ORDER_NUM', 'Order No.')} ${order.id}`}</p>
                     </>
                   )}
                   {showDate && (
@@ -209,7 +233,7 @@ const SingleOrderCardUI = (props) => {
               {
                 !pastOrders && (
                   <h2>
-                    {isSkeleton ? <Skeleton width={50} /> : parsePrice(order?.summary?.total || order?.total)}
+                    {isSkeleton ? <Skeleton width={50} /> : parsePrice(order?.business?.length > 1 ? order?.total : order?.summary?.total || order?.total)}
                   </h2>
                 )
               }
@@ -234,13 +258,15 @@ const SingleOrderCardUI = (props) => {
               )}
             </ButtonWrapper>
           )}
-          <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
-            {isSkeleton ? <Skeleton width={20} height={20} /> : (
-              <>
-                {order?.favorite ? <Like /> : <DisLike />}
-              </>
-            )}
-          </FavoriteWrapper>
+          {!order?.business?.length && (
+            <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
+              {isSkeleton ? <Skeleton width={20} height={20} /> : (
+                <>
+                  {order?.favorite ? <Like /> : <DisLike />}
+                </>
+              )}
+            </FavoriteWrapper>
+          )}
         </Content>
       </Container>
       {isReviewOpen && (

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

@@ -147,6 +147,12 @@ const BusinessLogoWrapperStyled = styled.div`
     min-width: 86px;
     height: 86px;
     min-height: 86px;
+    ${({ isMulti }) => isMulti && css`
+      width: 55px;
+      min-width: 55px;
+      height: 55px;
+      min-height: 55px;
+    `}
   }
 `
 
@@ -253,3 +259,11 @@ export const ReviewWrapper = styled.div`
     border-radius: 7.6px;
   }
 `
+
+export const MultiLogosContainer = styled.div`
+  display: flex;
+  align-items: center;
+  p {
+    white-space: nowrap;
+  }
+`

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

@@ -260,7 +260,7 @@ export const UserFormDetailsUI = (props) => {
 
   useEffect(() => {
     if (isChanged && userPhoneNumber && isValidPhoneNumber && formState?.changes?.country_phone_code && formState?.changes?.cellphone && configs?.verification_phone_required?.value === '1') {
-      setWillVerifyOtpState(true)
+      setWillVerifyOtpState && setWillVerifyOtpState(true)
     }
   }, [isValidPhoneNumber, userPhoneNumber, configs?.verification_phone_required?.value, isChanged])
 

package/src/utils/index.js

@@ -604,3 +604,15 @@ export const reviewCommentList = (type) => {
 
   return reviews[type]
 }
+
+/**
+ * Function to convert star rate in width to display
+ * @param {int} qualification star rate or qualification
+ */
+export const getStarWidth = (qualification) => {
+  if (qualification) {
+    return qualification / 5 * 100 + '%'
+  } else {
+    return '0%'
+  }
+}