ordering-ui-admin-external 1.12.5 → 1.13.1

package/src/components/BusinessIntelligence/BusinessReviewDetails/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage, useUtils, useEvent, BusinessReviews as BusinessReviewsController } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, BusinessReviews as BusinessReviewsController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { PersonFill } from 'react-bootstrap-icons'
@@ -27,22 +27,18 @@ const BusinessReviewDetailsUI = (props) => {
   const {
     business,
     reviewsList,
+    handleOpenProducts,
     handleChangeReviewEnabled
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage, parseDate }] = useUtils()
-  const [events] = useEvent()
 
   const getReviewPercent = (quality) => {
     return quality / 5 * 100
   }
 
-  const handleGoToPage = (data) => {
-    events.emit('go_to_page', data)
-  }
-
   return (
     <>
       <ReviewDetailsContainer>
@@ -51,7 +47,7 @@ const BusinessReviewDetailsUI = (props) => {
           <Button
             color='lightPrimary'
             borderRadius='8px'
-            onClick={() => handleGoToPage({ page: 'reviewProducts', params: { store: business?.slug } })}
+            onClick={() => handleOpenProducts(business)}
           >
             {t('PRODUCT_REVIEW', 'Product review')}
           </Button>

package/src/components/BusinessIntelligence/BusinessReviewList/index.js

@@ -24,7 +24,8 @@ const BusinessReviewsListingUI = (props) => {
     parentSearchValue,
     getPageBusinesses,
     handleUpdateReview,
-    onSearch
+    onSearch,
+    handleOpenProducts
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -100,14 +101,16 @@ const BusinessReviewsListingUI = (props) => {
                   </ReviewObject>
                 </td>
                 <td>
-                  <ReviewMarkerWrapper>
-                    {business?.reviews?.total && (
-                      <>
-                        <StarFill />
-                        <p>{business?.reviews?.total}</p>
-                      </>
-                    )}
-                  </ReviewMarkerWrapper>
+                  <div>
+                    <ReviewMarkerWrapper>
+                      {business?.reviews?.total && (
+                        <>
+                          <StarFill />
+                          <p>{business?.reviews?.total}</p>
+                        </>
+                      )}
+                    </ReviewMarkerWrapper>
+                  </div>
                 </td>
               </tr>
             </ReviewTbody>
@@ -141,6 +144,7 @@ const BusinessReviewsListingUI = (props) => {
             businessId={curBusiness?.id}
             reviews={curBusiness?.reviews?.reviews}
             handleUpdateReview={handleUpdateReview}
+            handleOpenProducts={handleOpenProducts}
           />
         </SideBar>
       )}

package/src/components/BusinessIntelligence/BusinessReviewList/styles.js

@@ -119,9 +119,10 @@ export const ReviewMarkerWrapper = styled.div`
 
   ${({ isHeader }) => !isHeader && css`
     height: 40px;
+    width: 45px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     ${props => props.theme.colors.rtl ? css`
       border-right: 1px solid ${props => props.theme.colors.borderColor};

package/src/components/BusinessIntelligence/ReviewProductsListing/index.js

@@ -1,37 +1,33 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useUtils, BusinessProductsListing as BusinessProductsListingController } from 'ordering-components-admin-external'
-import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { List as MenuIcon, ImageFill } from 'react-bootstrap-icons'
+import { useLanguage, useUtils, ReviewProductList as ReviewProductListController } from 'ordering-components-admin-external'
+import { ImageFill, StarFill } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
-import { Pagination, SearchBar, SideBar } from '../../Shared'
-import { IconButton } from '../../../styles'
+import { Pagination, SideBar } from '../../Shared'
 import { ProductReviewDetails } from '../ProductReviewDetails'
 
 import {
   ReviewsListingContainer,
-  Header,
-  HeaderLeft,
-  HeaderRight,
   ReviewsTable,
   ReviewTbody,
   WrapperImage,
   Image,
   ReviewObject,
-  PagesBottomContainer
+  PagesBottomContainer,
+  ReviewMarkerWrapper
 } from './styles'
 
 export const ReviewProductsListingUI = (props) => {
   const {
-    businessState,
-    categoryState,
+    productState,
     handleChangeSearch,
-    searchValue
+    searchValue,
+    parentSearchValue,
+    businessId
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
 
-  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [openReview, setOpenReview] = useState(false)
   const [curProduct, setCurProduct] = useState(null)
 
@@ -51,17 +47,17 @@ export const ReviewProductsListingUI = (props) => {
   }
 
   useEffect(() => {
-    if (categoryState.loading) return
+    if (productState.loading) return
     let _totalPages
-    if (categoryState.products.length > 0) {
-      _totalPages = Math.ceil(categoryState.products.length / productsPerPage)
+    if (productState.products.length > 0) {
+      _totalPages = Math.ceil(productState.products.length / productsPerPage)
     }
     const indexOfLastPost = currentPage * productsPerPage
     const indexOfFirstPost = indexOfLastPost - productsPerPage
-    const _currentProducts = categoryState.products.slice(indexOfFirstPost, indexOfLastPost)
+    const _currentProducts = productState.products.slice(indexOfFirstPost, indexOfLastPost)
     setTotalPages(_totalPages)
     setCurrentProducts(_currentProducts)
-  }, [categoryState, currentPage, productsPerPage])
+  }, [productState, currentPage, productsPerPage])
 
   const handleOpenReview = (product) => {
     setCurProduct(product)
@@ -72,38 +68,21 @@ export const ReviewProductsListingUI = (props) => {
     setCurrentPage(1)
   }, [searchValue])
 
+  useEffect(() => {
+    handleChangeSearch(parentSearchValue)
+  }, [parentSearchValue])
+
   return (
     <>
       <ReviewsListingContainer>
-        <Header>
-          <HeaderLeft>
-            {isCollapse && (
-              <IconButton
-                color='black'
-                onClick={() => handleMenuCollapse(false)}
-              >
-                <MenuIcon />
-              </IconButton>
-            )}
-            <h1>{businessState?.loading ? <Skeleton width={150} /> : businessState?.business?.name}</h1>
-          </HeaderLeft>
-          <HeaderRight>
-            <SearchBar
-              lazyLoad
-              placeholder={t('SEARCH', 'Search')}
-              searchValue={searchValue}
-              onSearch={handleChangeSearch}
-            />
-          </HeaderRight>
-        </Header>
         <ReviewsTable>
           <thead>
             <tr>
               <th><ReviewObject isHeader>{t('PRODUCT', 'Product')}</ReviewObject></th>
-              {/* <th><ReviewMarkerWrapper isHeader>{t('REVIEWS', 'Reviews')}</ReviewMarkerWrapper></th> */}
+              <th><ReviewMarkerWrapper isHeader>{t('REVIEWS', 'Reviews')}</ReviewMarkerWrapper></th>
             </tr>
           </thead>
-          {(businessState?.loading || categoryState?.loading) ? (
+          {productState?.loading ? (
             [...Array(10).keys()].map(i => (
               <ReviewTbody key={i}>
                 <tr>
@@ -115,7 +94,7 @@ export const ReviewProductsListingUI = (props) => {
                       <p><Skeleton width={80} /></p>
                     </ReviewObject>
                   </td>
-                  {/* <td><ReviewMarkerWrapper><Skeleton width={20} /></ReviewMarkerWrapper></td> */}
+                  <td><ReviewMarkerWrapper><Skeleton width={20} /></ReviewMarkerWrapper></td>
                 </tr>
               </ReviewTbody>
             ))
@@ -139,12 +118,16 @@ export const ReviewProductsListingUI = (props) => {
                       <p>{product?.name}</p>
                     </ReviewObject>
                   </td>
-                  {/* <td>
+                  <td>
                     <ReviewMarkerWrapper>
-                      <StarFill />
-                      <p>{product?.reviews?.total}</p>
+                      {product?.reviews?.total && (
+                        <>
+                          <StarFill />
+                          <p>{product?.reviews?.total}</p>
+                        </>
+                      )}
                     </ReviewMarkerWrapper>
-                  </td> */}
+                  </td>
                 </tr>
               </ReviewTbody>
             ))
@@ -152,7 +135,7 @@ export const ReviewProductsListingUI = (props) => {
         </ReviewsTable>
 
         {
-          !businessState.loading && categoryState?.products?.length > 0 && (
+          !productState.loading && productState?.products?.length > 0 && (
             <PagesBottomContainer>
               <Pagination
                 currentPage={currentPage}
@@ -177,7 +160,7 @@ export const ReviewProductsListingUI = (props) => {
           }}
         >
           <ProductReviewDetails
-            businessId={businessState?.business?.id}
+            businessId={businessId}
             product={curProduct}
             productId={curProduct?.id}
           />
@@ -188,18 +171,13 @@ export const ReviewProductsListingUI = (props) => {
 }
 
 export const ReviewProductsListing = (props) => {
-  const [isInitialRender, setIsInitialRender] = useState(false)
-
   const businessProductslistingProps = {
     ...props,
-    isAllCategoryProducts: true,
     UIComponent: ReviewProductsListingUI,
-    isInitialRender,
     isSearchByName: true,
-    isSearchByDescription: true,
-    handleUpdateInitialRender: (val) => setIsInitialRender(val)
+    isSearchByDescription: true
   }
   return (
-    <BusinessProductsListingController {...businessProductslistingProps} />
+    <ReviewProductListController {...businessProductslistingProps} />
   )
 }

package/src/components/BusinessIntelligence/ReviewProductsListing/styles.js

@@ -1,58 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-export const ReviewsListingContainer = styled.div`
-  flex: 1;
-  padding: 20px;
-  box-sizing: border-box;
-  transition: all 0.5s;
-  max-height: 100vh;
-  overflow: auto;
-`
-
-export const Header = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  row-gap: 20px;
-`
-
-export const HeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  h1 {
-    font-size: 20px;
-    font-weight: 700;
-    color: ${props => props.theme.colors.headingColor};
-    margin: 0px;
-  }
-  > button {
-    ${props => props.theme?.rtl ? css`
-      margin-left: 8px;
-      margin-right: -8px;
-    ` : css`
-      margin-right: 8px;
-      margin-left: -8px;
-    `}
-
-    svg {
-      width: 25px;
-      height: 25px;
-    }
-  }
-`
-
-export const HeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-
-  input {
-    border: none;
-    background-color: ${props => props.theme.colors.secundary};
-  }
-`
+export const ReviewsListingContainer = styled.div``
 
 export const ReviewsTable = styled.table`
   margin: 10px 0;
@@ -162,9 +111,10 @@ export const ReviewMarkerWrapper = styled.div`
 
   ${({ isHeader }) => !isHeader && css`
     height: 40px;
+    width: 45px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     ${props => props.theme.colors.rtl ? css`
       border-right: 1px solid ${props => props.theme.colors.borderColor};

package/src/components/BusinessIntelligence/ReviewsListing/index.js

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, CaretDownFill } from 'react-bootstrap-icons'
 import { SearchBar } from '../../Shared'
 import { IconButton } from '../../../styles'
 import { BusinessReviewList } from '../BusinessReviewList'
 import { UsersReviewList } from '../UsersReviewList'
+import { BusinessSelectHeader } from '../../Stores/BusinessSelectHeader'
+import { ReviewProductsListing } from '../ReviewProductsListing'
 
 import {
   ReviewsListingContainer,
@@ -13,7 +15,9 @@ import {
   HeaderLeft,
   HeaderRight,
   Tabs,
-  Tab
+  Tab,
+  SelectWrapper,
+  TitleWrapper
 } from './styles'
 
 export const ReviewsListing = (props) => {
@@ -21,6 +25,24 @@ export const ReviewsListing = (props) => {
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [showOption, setShowOption] = useState('business')
   const [searchValue, setSearchValue] = useState(null)
+  const [showSelect, setShowSelect] = useState(false)
+  const [business, setBusiness] = useState('')
+
+  const changeBusinessState = (business) => {
+    setShowSelect(false)
+    setBusiness(business)
+  }
+
+  const handleChangeOption = (option) => {
+    setShowOption(option)
+    if (option === 'products' && !business) setShowSelect(true)
+  }
+
+  const handleOpenProducts = (business) => {
+    setBusiness(business)
+    setShowOption('products')
+    setShowSelect(false)
+  }
 
   return (
     <>
@@ -35,7 +57,24 @@ export const ReviewsListing = (props) => {
                 <MenuIcon />
               </IconButton>
             )}
-            <h1>{t('REVIEWS_MANAGER', 'Reviews manager')}</h1>
+            {showOption === 'products' ? (
+              <SelectWrapper>
+                <TitleWrapper onClick={() => setShowSelect(prev => !prev)}>
+                  <h1>{business?.name || t('REVIEWS_MANAGER', 'Reviews manager')}</h1>
+                  <CaretDownFill className={`${showSelect && 'rotate'}`} />
+                </TitleWrapper>
+                {showSelect && (
+                  <BusinessSelectHeader
+                    close={() => setShowSelect(false)}
+                    isOpen={showSelect}
+                    noActiveStatusCondition
+                    changeBusinessState={changeBusinessState}
+                  />
+                )}
+              </SelectWrapper>
+            ) : (
+              <h1>{t('REVIEWS_MANAGER', 'Reviews manager')}</h1>
+            )}
           </HeaderLeft>
           <HeaderRight>
             <SearchBar
@@ -49,31 +88,37 @@ export const ReviewsListing = (props) => {
         <Tabs>
           <Tab
             active={showOption === 'business'}
-            onClick={() => setShowOption('business')}
+            onClick={() => handleChangeOption('business')}
           >
             {t('BUSINESS', 'Business')}
           </Tab>
           <Tab
             active={showOption === 'drivers'}
-            onClick={() => setShowOption('drivers')}
+            onClick={() => handleChangeOption('drivers')}
           >
             {t('DRIVERS', 'Drivers')}
           </Tab>
           <Tab
             active={showOption === 'customers'}
-            onClick={() => setShowOption('customers')}
+            onClick={() => handleChangeOption('customers')}
           >
             {t('CUSTOMERS', 'Customers')}
           </Tab>
           <Tab
             active={showOption === 'professionals'}
-            onClick={() => setShowOption('professionals')}
+            onClick={() => handleChangeOption('professionals')}
           >
             {t('PROFESSIONALS', 'Professionals')}
           </Tab>
+          <Tab
+            active={showOption === 'products'}
+            onClick={() => handleChangeOption('products')}
+          >
+            {t('PRODUCTS', 'Products')}
+          </Tab>
         </Tabs>
         {showOption === 'business' && (
-          <BusinessReviewList parentSearchValue={searchValue} />
+          <BusinessReviewList parentSearchValue={searchValue} handleOpenProducts={handleOpenProducts} />
         )}
         {showOption === 'drivers' && (
           <UsersReviewList
@@ -93,6 +138,12 @@ export const ReviewsListing = (props) => {
             parentSearchValue={searchValue}
           />
         )}
+        {showOption === 'products' && business?.id && (
+          <ReviewProductsListing
+            parentSearchValue={searchValue}
+            businessId={business?.id}
+          />
+        )}
       </ReviewsListingContainer>
     </>
   )

package/src/components/BusinessIntelligence/ReviewsListing/styles.js

@@ -80,3 +80,22 @@ export const Tab = styled.div`
     color: ${props => props.theme.colors.lightGray};
   `}
 `
+
+export const SelectWrapper = styled.div`
+  position: relative;
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    margin: 0 5px;
+    font-size: 16px;
+    transition: 0.2s ease-in-out;
+    &.rotate {
+      transform: rotate(180deg);
+    }
+  }
+`

package/src/components/Delivery/DriversGroupGeneralForm/index.js

@@ -76,20 +76,20 @@ export const DriversGroupGeneralForm = (props) => {
       }
       handleUpdateDriversGroup(changesState)
     } else {
-      if (user?.level !== 5 && !changesState?.administrator_id) {
-        setAlertState({
-          open: true,
-          content: [t('VALIDATION_ERROR_REQUIRED', 'The manager is required.').replace('_attribute_', t('DRIVER_MANAGER', 'Driver manager'))]
-        })
-        return
-      }
-      if (typeof changesState?.priority === 'undefined') {
-        setAlertState({
-          open: true,
-          content: [t('VALIDATION_ERROR_REQUIRED', 'The priority is required.').replace('_attribute_', t('PRIORITY', 'Priority'))]
-        })
-        return
-      }
+      // if (user?.level !== 5 && !changesState?.administrator_id) {
+      //   setAlertState({
+      //     open: true,
+      //     content: [t('VALIDATION_ERROR_REQUIRED', 'The manager is required.').replace('_attribute_', t('DRIVER_MANAGER', 'Driver manager'))]
+      //   })
+      //   return
+      // }
+      // if (typeof changesState?.priority === 'undefined') {
+      //   setAlertState({
+      //     open: true,
+      //     content: [t('VALIDATION_ERROR_REQUIRED', 'The priority is required.').replace('_attribute_', t('PRIORITY', 'Priority'))]
+      //   })
+      //   return
+      // }
       if (changesState?.type === 0 && !changesState?.drivers) {
         setAlertState({
           open: true,