ordering-ui-external 1.8.7 → 1.8.9

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/UserPopover/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme, useOrder } from 'ordering-components-external'
 import { usePopper } from 'react-popper'
 import {
   HeaderItem,
@@ -29,13 +29,16 @@ export const UserPopover = (props) => {
     isHome,
     optionsList,
     withLogout,
-    isCustomerMode
+    isCustomerMode,
+    handleOpenAddressModal
   } = props
   const [sessionState] = useSession()
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
+  const [orderStatus] = useOrder()
+
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -56,6 +59,8 @@ export const UserPopover = (props) => {
     { name: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
   ]
 
+  const addressRequiredPageNames = ['business_search', 'promotions']
+
   const options = isCustomerMode
     ? optionsDefault.filter(option => option.name === 'profile')
     : optionsList || optionsDefault
@@ -94,7 +99,11 @@ export const UserPopover = (props) => {
   }
 
   const handleGoToPage = (page) => {
-    events.emit('go_to_page', { page })
+    if (!orderStatus.options?.address?.location && addressRequiredPageNames.includes(page)) {
+      handleOpenAddressModal()
+    } else {
+      events.emit('go_to_page', { page })
+    }
     props.onClick && props.onClick()
   }
 

package/src/themes/pwa/src/components/MomentContent/index.js

@@ -23,7 +23,6 @@ export const MomentContent = (props) => {
   const momentProps = {
     maxDate: currentDate
   }
-
   const { width } = useWindowSize()
   const momentControl = document?.getElementById('moment_control')?.getBoundingClientRect()
 

package/src/themes/pwa/src/components/MomentControl/index.js

@@ -133,9 +133,6 @@ const MomentControlUI = (props) => {
     }
   }, [hoursList])
 
-  useEffect(() => {
-    if (isASP) handleCheckBoxChange(true)
-  }, [isAsap])
 
   return (
     <div id='moment_control'>

package/src/themes/six/src/components/BusinessController/styles.js

@@ -4,6 +4,10 @@ import styled, { css } from 'styled-components'
 export const ContainerCard = styled.div` 
   width: 100%;
   position: relative;
+  @media (min-width: 768px) {
+    padding: 7px 10px 7px 20px;
+    margin-bottom: 5px;
+  }
 `
 
 export const WrapperBusinessCard = styled.div`

package/src/themes/six/src/components/SearchBar/index.js

@@ -2,10 +2,12 @@ import React, { useRef, useEffect } from 'react'
 import { Input } from '../../styles/Inputs'
 import { useLanguage } from 'ordering-components-external'
 import AiOutlineSearch from '@meronex/icons/ai/AiOutlineSearch'
+import { Funnel } from 'react-bootstrap-icons'
 import {
   BusinessSearch,
   DeleteContent,
-  SearchWrapper
+  SearchWrapper,
+  FunnelWrapper
 } from './styles'
 export const SearchBar = (props) => {
   const {
@@ -13,7 +15,8 @@ export const SearchBar = (props) => {
     search,
     placeholder,
     lazyLoad,
-    isCustomLayout
+    isCustomLayout,
+    isStarbucks
   } = props
 
   const [, t] = useLanguage()
@@ -90,6 +93,11 @@ export const SearchBar = (props) => {
         >
           <AiOutlineSearch />
         </SearchWrapper>
+        {isStarbucks &&
+          <FunnelWrapper>
+            <Funnel />
+          </FunnelWrapper>
+        }
       </BusinessSearch>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

package/src/themes/six/src/components/SearchBar/styles.js

@@ -68,7 +68,7 @@ export const DeleteContent = styled.span`
   `}
   ${({ isClear, isHome }) => isClear && css`
     left: initial;
-    right: 20px;
+    right: 40px;
   `}
   ${props => props.theme?.rtl && css`
     transform: translate(30%, 0%);
@@ -94,6 +94,17 @@ export const DeleteContent = styled.span`
 
 export const SearchWrapper = styled(DeleteContent)``
 
+export const FunnelWrapper = styled.div`
+  svg {
+    position: absolute;
+    right: 10px !important;
+    color: #ADB5BD;
+    width: 20px;
+    height: 20px;
+    bottom: 22px;
+  }
+`
+
 export const SearchIcon = styled.div`
   background-image: url(${props => props.theme?.images?.general?.searchIcon});
   background-position: right 10px center;

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%'
+  }
+}