ordering-ui-admin-external 1.14.3 → 1.15.1

package/src/components/Stores/BusinessPlaceGroupList/index.js

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { useLanguage, BusinessPlaceGroupList as BusinessPlaceGroupListController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { Button } from '../../../styles'
+import { ChevronRight, CheckSquareFill, Square } from 'react-bootstrap-icons'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { BusinessPlaceGroup } from '../BusinessPlaceGroup'
+import { Modal } from '../../Shared'
+
+import {
+  Container,
+  Header,
+  Content,
+  AddBtn,
+  TableHead,
+  CheckWrapper,
+  PlaceItemContainer,
+  PlaceContainer
+} from './styles'
+
+export const BusinessPlaceGroupListUI = (props) => {
+  const {
+    placeGroupList,
+    setIsExtendExtraOpen,
+    business,
+    handleSuccessAddPlaceGroup,
+    handleSuccessUpdatePlaceGroup,
+    handleSuccessDeletePlaceGroup,
+    handleChangeEnabled,
+    handleMultiChangeEnabled,
+    getMultiCheckStatus
+  } = props
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const [openDetail, setOpenDetail] = useState(false)
+  const [selectedPlace, setSelectedPlace] = useState(null)
+
+  const handleOpenDetail = (placeGroup) => {
+    setOpenDetail(true)
+    setSelectedPlace(placeGroup)
+    setIsExtendExtraOpen(true)
+  }
+
+  const handleCloseDetail = () => {
+    setOpenDetail(false)
+    setSelectedPlace(null)
+    setIsExtendExtraOpen(false)
+    const businessId = query.get('id')
+    const section = query.get('section')
+    history.replace(`${location.pathname}?id=${businessId}&section=${section}`)
+  }
+
+  const handleUpdateSelectedPlaceGroup = (placeGroup) => {
+    setSelectedPlace(placeGroup)
+  }
+
+  const handlePlaceClick = (e, placeGroup, isInitialRender) => {
+    if (e?.target?.closest('.check-box')) return
+    handleOpenDetail(placeGroup)
+    if (!isInitialRender) {
+      const businessId = query.get('id')
+      const section = query.get('section')
+      history.replace(`${location.pathname}?id=${businessId}&section=${section}&place_group=${placeGroup.id}`)
+    }
+  }
+
+  const handleCheckBoxChange = (placeGroup) => {
+    handleChangeEnabled(placeGroup?.id, { enabled: !placeGroup?.enabled })
+  }
+
+  useEffect(() => {
+    if (placeGroupList?.loading) return
+    const placeGroupId = query.get('place_group')
+    if (placeGroupId) {
+      const initPlaceGroup = placeGroupList?.placeGroups?.find(placeGroup => placeGroup.id === Number(placeGroupId))
+      if (initPlaceGroup) {
+        handlePlaceClick(null, initPlaceGroup, true)
+      }
+    }
+  }, [placeGroupList?.loading])
+
+  return (
+    <Container>
+      <PlaceContainer>
+        <Header>
+          <h1>{t('PLACES', 'Places')}</h1>
+          <Button
+            color='lightPrimary'
+            borderRadius='8px'
+            onClick={() => handleOpenDetail(null)}
+          >
+            {t('ADD_PLACES', 'Add places')}
+          </Button>
+        </Header>
+        {placeGroupList?.loading ? (
+          <Content>
+            {
+              [...Array(5).keys()].map(i => (
+                <PlaceItemContainer key={i}>
+                  <CheckWrapper>
+                    <Skeleton width={16} height={16} />
+                    <label>
+                      <Skeleton width={100} />
+                    </label>
+                  </CheckWrapper>
+                  <Skeleton width={16} height={16} />
+                </PlaceItemContainer>
+              ))
+            }
+          </Content>
+        ) : (
+          <Content>
+            {placeGroupList?.placeGroups?.length > 0 && (
+              <TableHead>
+                <CheckWrapper>
+                  <span className='check-box' onClick={() => handleMultiChangeEnabled()}>
+                    {getMultiCheckStatus() ? <CheckSquareFill className='active' /> : <Square />}
+                  </span>
+                  <label>{t('PLACES', 'Places')}</label>
+                </CheckWrapper>
+              </TableHead>
+            )}
+            {placeGroupList?.placeGroups?.map((placeGroup, i) => (
+              <PlaceItemContainer
+                key={i}
+                active={selectedPlace?.id === placeGroup?.id}
+                onClick={(e) => handlePlaceClick(e, placeGroup)}
+              >
+                <CheckWrapper>
+                  <span className='check-box' onClick={() => handleCheckBoxChange(placeGroup)}>
+                    {placeGroup?.enabled ? <CheckSquareFill className='active' /> : <Square />}
+                  </span>
+                  <label>{placeGroup?.name}</label>
+                </CheckWrapper>
+                <ChevronRight />
+              </PlaceItemContainer>
+            ))}
+            <AddBtn onClick={() => handleOpenDetail(null)}>{t('ADD_PLACES', 'Add places')}</AddBtn>
+          </Content>
+        )}
+      </PlaceContainer>
+      {width >= 1000 ? (
+        <>
+          {openDetail && (
+            <BusinessPlaceGroup
+              businessId={business?.id}
+              open={openDetail}
+              onClose={handleCloseDetail}
+              placeGroup={selectedPlace}
+              handleSuccessAddPlaceGroup={handleSuccessAddPlaceGroup}
+              handleSuccessUpdatePlaceGroup={handleSuccessUpdatePlaceGroup}
+              handleSuccessDeletePlaceGroup={handleSuccessDeletePlaceGroup}
+              handleUpdateSelectedPlaceGroup={handleUpdateSelectedPlaceGroup}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {openDetail && (
+            <Modal
+              width='760px'
+              open={openDetail}
+              onClose={() => handleCloseDetail()}
+            >
+              <BusinessPlaceGroup
+                businessId={business?.id}
+                open={openDetail}
+                onClose={handleCloseDetail}
+                placeGroup={selectedPlace}
+                handleSuccessAddPlaceGroup={handleSuccessAddPlaceGroup}
+                handleSuccessUpdatePlaceGroup={handleSuccessUpdatePlaceGroup}
+                handleSuccessDeletePlaceGroup={handleSuccessDeletePlaceGroup}
+                handleUpdateSelectedPlaceGroup={handleUpdateSelectedPlaceGroup}
+              />
+            </Modal>
+          )}
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const BusinessPlaceGroupList = (props) => {
+  const businessPlaceListProps = {
+    ...props,
+    UIComponent: BusinessPlaceGroupListUI
+  }
+  return <BusinessPlaceGroupListController {...businessPlaceListProps} />
+}

package/src/components/Stores/BusinessPlaceGroupList/styles.js

@@ -0,0 +1,143 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`
+
+export const PlaceContainer = styled.div`
+  ${({ isHide }) => isHide ? css`
+    width: 0px;
+    overflow: hidden;
+    flex: initial;
+  ` : css`
+    flex: 1;
+  `}
+  transition: 0.3s;
+  @media (min-width: 576px) {
+    ${({ isHide }) => isHide ? css`
+      padding: 0;
+    ` : css`
+      padding: 20px;
+    `}
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 0px;
+    margin-bottom: 18px;
+  }
+
+  button {
+    margin-bottom: 18px;
+    height: 44px;
+    margin-right: 40px;
+
+    ${props => props.theme.rtl && css`
+      margin-left: 40px;
+      margin-right: 0px;
+    `}
+  }
+`
+
+export const Content = styled.div``
+
+export const AddBtn = styled.span`
+  font-weight: 400;
+  font-size: 14px;
+  display: block;
+  margin: 10px 0px;
+  cursor: pointer;
+  user-select: none;
+  color: ${props => props.theme.colors.lightGray};
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const TableHead = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+
+  label {
+    font-weight: 700;
+  }
+`
+
+export const CheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .check-box {
+    cursor: pointer !important;
+  }
+
+  span {
+    svg {
+      cursor: pointer !important;
+      font-size: 16px;
+      color: ${props => props.theme.colors.secundaryLight};
+
+      &.active {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+  }
+
+  > label {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-left: 20px;
+    ${props => props.theme.rtl && css`
+      margin-right: 20px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const PlaceItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  border-top: 1px solid transparent;
+  justify-content: space-between;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.colors.secundary};
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.backgroundInfo};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  ${({ notAllow }) => notAllow && css`
+    cursor: not-allowed;
+    * {
+      cursor: not-allowed;
+    }
+  `}
+
+  > svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+`

package/src/components/Stores/BusinessProductsCategoyDetails/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, BusinessProductsCategoyDetails as BusinessProductsCategoyDetailsController } from 'ordering-components-admin-external'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
@@ -43,6 +44,8 @@ const BusinessProductsCategoyDetailsUI = (props) => {
     handleTutorialSkip
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -88,6 +91,23 @@ const BusinessProductsCategoyDetailsUI = (props) => {
     }
   }, [formState?.result])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setSelctedInfoItem(tab)
+    if (!isInitialRender) {
+      const category = query.get('category')
+      history.replace(`${location.pathname}?category=${category}&tab=${tab}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(selectedInfoItem)
+    }
+  }, [])
+
   return (
     <>
       <Container>
@@ -163,7 +183,7 @@ const BusinessProductsCategoyDetailsUI = (props) => {
                 {!isAddMode && (
                   <BusinessCategoryInfoSettingList
                     selectedInfoItem={selectedInfoItem}
-                    handleSelectInfoItem={setSelctedInfoItem}
+                    handleSelectInfoItem={tab => handleTabClick(tab)}
                   />
                 )}
                 {selectedInfoItem === 'information' && (

package/src/components/Stores/BusinessProductsListing/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -26,6 +27,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { ImportersButton } from '../ImportersButton'
 import { AddBusinessForm } from '../AddBusinessForm'
 import { ProductStep } from '../ProductStep'
+import { BusinessAddStore } from '../BusinessAddStore'
 
 import {
   CategoryProductsContainer,
@@ -75,6 +77,8 @@ const BusinessProductsListingUI = (props) => {
     setBusinessTypes
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [ordering] = useApi()
@@ -89,6 +93,7 @@ const BusinessProductsListingUI = (props) => {
   const [batchImageFormOpen, setBatchImageFormOpen] = useState(false)
   const [openSidebar, setOpenSidebar] = useState(null)
   const [showPopup, setShowPopup] = useState(false)
+  const [isAdd, setIsAdd] = useState(false)
 
   const [allowSpreadColumns, setAllowSpreadColumns] = useState({
     id: true,
@@ -112,13 +117,16 @@ const BusinessProductsListingUI = (props) => {
     })
   }
 
-  const handleOpenCategoryDetails = (category = null) => {
+  const handleOpenCategoryDetails = (category = null, isInitialRender) => {
     setOpenSidebar(null)
     setSelectedProduct(null)
     setCurrentCategory(category)
     if (category && category?.id !== null) {
       setCategorySelected(category)
       setOpenSidebar('category_details')
+      if (!isInitialRender) {
+        history.replace(`${location.pathname}?category=${category.id}`)
+      }
     } else {
       setCurrentCategory(null)
       setOpenSidebar('category_details')
@@ -133,16 +141,19 @@ const BusinessProductsListingUI = (props) => {
     })
     setCurrentCategory(null)
     setOpenSidebar(null)
+    history.replace(`${location.pathname}`)
   }
 
-  const handleOpenProductDetails = (product) => {
+  const handleOpenProductDetails = (product, isInitialRender) => {
     setSelectedProduct(product)
     setOpenSidebar('product_details')
-    onProductRedirect({
-      slug: businessState?.business?.slug,
-      product: product.id,
-      category: product.category_id
-    })
+    if (!isInitialRender) {
+      onProductRedirect({
+        slug: businessState?.business?.slug,
+        product: product.id,
+        category: product.category_id
+      })
+    }
   }
 
   const handleCloseProductDetails = () => {
@@ -203,7 +214,7 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleOpenAddBusiness = () => {
-    setOpenSidebar('add_business')
+    setIsAdd(true)
     handleClose()
   }
 
@@ -231,6 +242,28 @@ const BusinessProductsListingUI = (props) => {
     }
   }, [businessState?.business])
 
+  useEffect(() => {
+    if (businessState.loading) return
+    const categoryId = query.get('category')
+    const productId = query.get('product')
+    if (categoryId && productId) {
+      const initCategory = businessState.business?.categories?.find(category => category.id === Number(categoryId))
+      const initProduct = initCategory?.products?.find(product => product.id === Number(productId))
+      if (initCategory) handleChangeCategory(null, initCategory)
+      if (initProduct) {
+        handleOpenProductDetails(initProduct, true)
+      }
+    } else if (categoryId && !productId) {
+      const initCategory = businessState.business?.categories?.find(category => category.id === Number(categoryId))
+      if (initCategory) {
+        handleChangeCategory(null, initCategory)
+        handleOpenCategoryDetails(initCategory, true)
+      }
+    } else {
+      businessState?.business?.categories && setCategorySelected(businessState?.business?.categories[0])
+    }
+  }, [businessState.loading])
+
   return (
     <>
       <CategoryProductsContainer>
@@ -503,6 +536,14 @@ const BusinessProductsListingUI = (props) => {
           getBusiness={getBusiness}
         />
       </Modal>
+      <Modal
+        width='769px'
+        padding='30px'
+        open={isAdd}
+        onClose={() => setIsAdd(false)}
+      >
+        <BusinessAddStore />
+      </Modal>
     </>
   )
 }

package/src/components/Stores/BusinessPromotionGeneralForm/index.js

@@ -132,8 +132,8 @@ const BusinessPromotionGeneralFormUI = (props) => {
 
   const handleChangeDates = (item) => {
     handleChangeItem({
-      start: moment(item.selection.startDate).format('YYYY-MM-DD'),
-      end: item.selection.endDate ? moment(item.selection.endDate).format('YYYY-MM-DD') : null
+      start: moment(item.selection.startDate).format('YYYY-MM-DD 00:00:00'),
+      end: item.selection.endDate ? moment(item.selection.endDate).format('YYYY-MM-DD 23:59:59') : null
     })
     setDateRange([item.selection])
   }

package/src/components/Stores/BusinessSharedMenuProducts/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   BusinessSharedMenuProducts as BusinessSharedMenuProductsController
@@ -25,26 +26,51 @@ const BusinessSharedMenuProductsUI = (props) => {
     handleChangeInput
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [searchValue, setSearchValue] = useState('')
   const [currentProduct, setCurrentProduct] = useState(null)
   const [isOpenDetails, setIsOpenDetails] = useState(false)
 
-  const handleOpenProduct = (e, product) => {
-    const isInvalid = e.target.closest('.product_checkbox')
+  const handleOpenProduct = (e, product, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.product_checkbox')
     if (isInvalid) return
     setIsOpenSharedProduct(true)
     setCurrentProduct(product)
     setIsOpenDetails(true)
+
+    if (!isInitialRender) {
+      const businessId = query.get('id')
+      const section = query.get('section')
+      const tab = query.get('tab')
+      const menu = query.get('menu')
+      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu}&product=${product.id}`)
+    }
   }
 
   const handleCloseSidebar = () => {
     setIsOpenDetails(false)
     setCurrentProduct(null)
     setIsOpenSharedProduct(false)
+    const businessId = query.get('id')
+    const section = query.get('section')
+    const tab = query.get('tab')
+    const menu = query.get('menu')
+    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu}`)
   }
 
+  useEffect(() => {
+    const productId = query.get('product')
+    if (productId) {
+      const initProduct = menuState.menu.products.find(product => product.id === Number(productId))
+      if (initProduct) {
+        handleOpenProduct(null, initProduct, true)
+      }
+    }
+  }, [])
+
   return (
     <>
       <MenuProductsContainer>

package/src/components/Stores/BusinessSync/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { BusinessSyncBasic } from '../BusinessSyncBasic'
 import { BusinessSyncItsaCheckmate } from '../BusinessSyncItsaCheckmate'
@@ -14,6 +15,8 @@ import {
 export const BusinessSync = (props) => {
   const { handleParentSidebarMove } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedOption, setSelectedOption] = useState('deliverect')
 
@@ -22,11 +25,24 @@ export const BusinessSync = (props) => {
     { key: 'itsacheckmate', name: t('ITSACHECKMATE', 'ItsaCheckmate') }
   ]
 
-  const handleChangeOption = (key) => {
+  const handleChangeOption = (key, isInitialRender) => {
     handleParentSidebarMove(0)
     setSelectedOption(key)
+    if (!isInitialRender) {
+      const header = query.get('header')
+      history.replace(`${location.pathname}?header=${header}&tab=${key}`)
+    }
   }
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleChangeOption(tab, true)
+    } else {
+      handleChangeOption(selectedOption)
+    }
+  }, [])
+
   return (
     <Container>
       <Header>