ordering-ui-admin-external 1.8.5 → 1.9.0

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

@@ -1,17 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { DashboardBusinessList as BusinessListController } from 'ordering-components-admin-external'
+import { useLanguage, useEvent, DashboardBusinessList as BusinessListController } from 'ordering-components-admin-external'
 import BsGrid from '@meronex/icons/bs/BsGrid'
 import BsViewList from '@meronex/icons/bs/BsViewList'
 import { getStorageItem, setStorageItem } from '../../../utils'
 import { SideBar } from '../../Shared'
+import { useTheme } from 'styled-components'
 
 import { BusinessesList } from '../BusinessesList'
 import { BusinessesListingHeader } from '../BusinessesListingHeader'
 import { BusinessActiveStateFilter } from '../BusinessActiveStateFilter'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessDetails } from '../BusinessDetails'
-import { AddBusinessForm } from '../AddBusinessForm'
+// import { AddBusinessForm } from '../AddBusinessForm'
 import { WizardBusiness } from '../WizardBusiness'
 
 import {
@@ -19,10 +20,12 @@ import {
   ViewContainer,
   WrapperView,
   ViewMethodButton,
-  ButtonGroup
+  ButtonGroup,
+  EmptyBusinessWrapper
 } from './styles'
 import { BusinessSync } from '../BusinessSync'
 import { BusinessDelete } from '../BusinessDelete'
+import { Button } from '../../../styles'
 
 const BusinessesListingUI = (props) => {
   const {
@@ -48,6 +51,9 @@ const BusinessesListingUI = (props) => {
   } = props
 
   const query = new URLSearchParams(useLocation().search)
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
 
   const [isTutorialMode, setIsTutorialMode] = useState(false)
   const [openTutorialSidebarState, setOpenTutorialSidebarState] = useState(null)
@@ -61,6 +67,14 @@ const BusinessesListingUI = (props) => {
   const [openSync, setOpenSync] = useState(false)
   const [moveDistance, setMoveDistance] = useState(0)
 
+  const noBusinesses = useMemo(() => {
+    return !businessList?.loading && businessList?.businesses?.length === 0 && pagination?.currentPage === 1 && !searchValue
+  }, [businessList?.loading, businessList?.businesses, pagination, searchValue])
+
+  const handleGotToAdd = () => {
+    events.emit('go_to_page', { page: 'business_add' })
+  }
+
   const handleBackRedirect = () => {
     setOpenBusinessDetails(false)
     setDetailsBusiness(null)
@@ -84,16 +98,16 @@ const BusinessesListingUI = (props) => {
     setOpenAddBusiness(true)
   }
 
-  const onhandleSuccessAddBusiness = (business) => {
-    handleSucessAddBusiness(business)
-    setOpenAddBusiness(false)
-    setDetailsBusiness(business)
-    if (isTutorialMode) {
-      setOpenTutorialSidebarState('schedule')
-    } else {
-      handleOpenBusinessDetails(business)
-    }
-  }
+  // const onhandleSuccessAddBusiness = (business) => {
+  //   handleSucessAddBusiness(business)
+  //   setOpenAddBusiness(false)
+  //   setDetailsBusiness(business)
+  //   if (isTutorialMode) {
+  //     setOpenTutorialSidebarState('schedule')
+  //   } else {
+  //     handleOpenBusinessDetails(business)
+  //   }
+  // }
 
   useEffect(() => {
     const id = query.get('id')
@@ -147,68 +161,88 @@ const BusinessesListingUI = (props) => {
 
   return (
     <>
-      <BusinessListingContainer>
+      <BusinessListingContainer isAdd={openAddBusiness}>
         <BusinessesListingHeader
           searchValue={searchValue}
           onSearch={onSearch}
           handleOpenAddBusiness={handleOpenAddBusiness}
+          handleGotToAdd={handleGotToAdd}
           handleStartTutorial={handleStartTutorial}
           handleOpenSync={handleOpenSync}
           handleRefreshBusinesses={loadBusinesses}
           loading={businessList.loading}
+          noBusinesses={noBusinesses}
+          openAddBusiness={openAddBusiness}
         />
-        <ViewContainer>
-          <BusinessActiveStateFilter
-            selectedBusinessActiveState={selectedBusinessActiveState}
-            handleChangeBusinessActiveState={handleChangeBusinessActiveState}
-          />
-          <WrapperView>
-            <ViewMethodButton
-              active={viewMethod === 'card'}
-              onClick={() => handleViewMethod('card')}
+        {noBusinesses ? (
+          <EmptyBusinessWrapper>
+            <img src={theme.images.dummies.noBusinesses} alt='' />
+            <h2>{t('NO_BUSINESSES_DESCRIPTION', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus adipiscing risus odio. Turpis nibh phasellus interdum vulputate urna, cursus pellentesque. Nec quis donec lobortis enim magna non turpis faucibus. ')}</h2>
+            <Button
+              color='primary'
+              borderRadius='7.6px'
+              onClick={() => handleGotToAdd()}
             >
-              <BsGrid />
-            </ViewMethodButton>
-            <ViewMethodButton
-              active={viewMethod === 'list'}
-              onClick={() => handleViewMethod('list')}
-            >
-              <BsViewList />
-            </ViewMethodButton>
-          </WrapperView>
-        </ViewContainer>
-        <ButtonGroup isSelect={businessIds?.length > 0}>
-          <BusinessTypeFilter
-            businessTypes={props.businessTypes}
-            defaultBusinessType={props.defaultBusinessType}
-            handleChangeBusinessType={handleChangeBusinessType}
-            setBusinessTypes={setBusinessTypes}
-          />
-          {businessIds?.length > 0 && (
-            <BusinessDelete
-              handleDeleteMultiBusinesses={handleDeleteMultiBusinesses}
+              {t('ADD_NEW_STORE', 'Add new store')}
+            </Button>
+          </EmptyBusinessWrapper>
+        ) : (
+          <>
+            <ViewContainer>
+              <BusinessActiveStateFilter
+                selectedBusinessActiveState={selectedBusinessActiveState}
+                handleChangeBusinessActiveState={handleChangeBusinessActiveState}
+              />
+              <WrapperView>
+                <ViewMethodButton
+                  active={viewMethod === 'card'}
+                  onClick={() => handleViewMethod('card')}
+                >
+                  <BsGrid />
+                </ViewMethodButton>
+                <ViewMethodButton
+                  active={viewMethod === 'list'}
+                  onClick={() => handleViewMethod('list')}
+                >
+                  <BsViewList />
+                </ViewMethodButton>
+              </WrapperView>
+            </ViewContainer>
+            <ButtonGroup isSelect={businessIds?.length > 0}>
+              <BusinessTypeFilter
+                businessTypes={props.businessTypes}
+                defaultBusinessType={props.defaultBusinessType}
+                handleChangeBusinessType={handleChangeBusinessType}
+                setBusinessTypes={setBusinessTypes}
+              />
+              {businessIds?.length > 0 && (
+                <BusinessDelete
+                  handleDeleteMultiBusinesses={handleDeleteMultiBusinesses}
+                />
+              )}
+            </ButtonGroup>
+            <BusinessesList
+              viewMethod={viewMethod}
+              businessList={businessList}
+              pagination={pagination}
+              detailsBusinessId={detailsBusinessId}
+              loadMoreBusinesses={loadMoreBusinesses}
+              getPageBusinesses={getPageBusinesses}
+              handleSucessRemoveBusiness={handleSucessRemoveBusiness}
+              handleSucessAddBusiness={handleSucessAddBusiness}
+              handleSucessUpdateBusiness={handleSucessUpdateBusiness}
+              handleOpenBusinessDetails={handleOpenBusinessDetails}
+              handleOpenAddBusiness={handleOpenAddBusiness}
+              isTutorialMode={isTutorialMode}
+              businessIds={businessIds}
+              setBusinessIds={setBusinessIds}
+              handleChangeBusinessIds={handleChangeBusinessIds}
+              handleEnableAllBusiness={handleEnableAllBusiness}
+              selectedBusinessActiveState={selectedBusinessActiveState}
+              handleGotToAdd={handleGotToAdd}
             />
-          )}
-        </ButtonGroup>
-        <BusinessesList
-          viewMethod={viewMethod}
-          businessList={businessList}
-          pagination={pagination}
-          detailsBusinessId={detailsBusinessId}
-          loadMoreBusinesses={loadMoreBusinesses}
-          getPageBusinesses={getPageBusinesses}
-          handleSucessRemoveBusiness={handleSucessRemoveBusiness}
-          handleSucessAddBusiness={handleSucessAddBusiness}
-          handleSucessUpdateBusiness={handleSucessUpdateBusiness}
-          handleOpenBusinessDetails={handleOpenBusinessDetails}
-          handleOpenAddBusiness={handleOpenAddBusiness}
-          isTutorialMode={isTutorialMode}
-          businessIds={businessIds}
-          setBusinessIds={setBusinessIds}
-          handleChangeBusinessIds={handleChangeBusinessIds}
-          handleEnableAllBusiness={handleEnableAllBusiness}
-          selectedBusinessActiveState={selectedBusinessActiveState}
-        />
+          </>
+        )}
       </BusinessListingContainer>
       {openBusinessDetails && (
         <BusinessDetails
@@ -223,7 +257,7 @@ const BusinessesListingUI = (props) => {
           onClose={() => handleBackRedirect()}
         />
       )}
-      {openAddBusiness && (
+      {/* {openAddBusiness && (
         <SideBar
           id='add_business_form'
           open={openAddBusiness}
@@ -234,7 +268,7 @@ const BusinessesListingUI = (props) => {
             handleSucessAddBusiness={onhandleSuccessAddBusiness}
           />
         </SideBar>
-      )}
+      )} */}
 
       {openSync && (
         <SideBar

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

@@ -7,6 +7,11 @@ export const BusinessListingContainer = styled.div`
   transition: all 0.5s;
   overflow: hidden;
 
+  ${({ isAdd }) => isAdd && css`
+    max-height: 100vh;
+    overflow: auto;
+  `}
+
   @media print {
     display: none;
   }
@@ -84,3 +89,34 @@ export const ButtonGroup = styled.div`
     }
   }
 `
+
+export const EmptyBusinessWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: calc(100vh - 70px);
+
+  > img {
+    width: 90%;
+    max-width: 500px;
+  }
+  h2 {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 30px;
+    margin-top: 0px;
+    text-align: center;
+    max-width: 600px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+  button {
+    height: 44px;
+  }
+  @media (min-width: 576px) {
+    > img {
+      width: 60%;
+    }
+  }
+`

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

@@ -17,11 +17,13 @@ export const BusinessesListingHeader = (props) => {
   const {
     searchValue,
     onSearch,
-    handleOpenAddBusiness,
+    // handleOpenAddBusiness,
     handleStartTutorial,
     handleOpenSync,
     handleRefreshBusinesses,
-    loading
+    loading,
+    noBusinesses,
+    handleGotToAdd
   } = props
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -38,57 +40,62 @@ export const BusinessesListingHeader = (props) => {
           </IconButton>
         )}
         <h1>{t('STORES_LIST', 'Stores list')}</h1>
-        <OverlayTrigger
-          placement='bottom'
-          overlay={
-            <Tooltip>
-              {t('START_TUTORIAL', 'Start tutorial')}
-            </Tooltip>
-          }
-        >
-          <IconButton
-            color='dark'
-            className='tour_btn'
-            onClick={() => handleStartTutorial()}
+        {!noBusinesses && (
+          <OverlayTrigger
+            placement='bottom'
+            overlay={
+              <Tooltip>
+                {t('START_TUTORIAL', 'Start tutorial')}
+              </Tooltip>
+            }
           >
-            <LifePreserver />
-          </IconButton>
-        </OverlayTrigger>
+            <IconButton
+              color='dark'
+              className='tour_btn'
+              onClick={() => handleStartTutorial()}
+            >
+              <LifePreserver />
+            </IconButton>
+          </OverlayTrigger>
+        )}
       </HeaderTitleContainer>
-      <ActionsWrapper>
-        <Button
-          color='lightPrimary'
-          borderRadius='8px'
-          onClick={() => handleRefreshBusinesses()}
-          className={loading ? 'loading' : ''}
-        >
-          {t('REFRESH', 'Refresh')}
-          <ArrowRepeat size={16} style={{ marginLeft: 5 }} />
-        </Button>
-        <ImportersButton customClass='importerGroup' />
-        <Button
-          color='lightPrimary'
-          borderRadius='8px'
-          onClick={() => handleOpenAddBusiness()}
-        >
-          {t('ADD_NEW_STORE', 'Add new store')}
-        </Button>
-        <Button
-          color='lightPrimary'
-          borderRadius='8px'
-          onClick={() => handleOpenSync()}
-        >
-          {t('SYNC', 'Sync')}
-        </Button>
-        <SearchBar
-          isCustomLayout
-          lazyLoad
-          onSearch={onSearch}
-          search={searchValue}
-          placeholder={t('SEARCH', 'Search')}
-          customClass='searchBar'
-        />
-      </ActionsWrapper>
+      {!noBusinesses && (
+        <ActionsWrapper>
+          <Button
+            color='lightPrimary'
+            borderRadius='8px'
+            onClick={() => handleRefreshBusinesses()}
+            className={loading ? 'loading' : ''}
+          >
+            {t('REFRESH', 'Refresh')}
+            <ArrowRepeat size={16} style={{ marginLeft: 5 }} />
+          </Button>
+          <ImportersButton customClass='importerGroup' />
+          <Button
+            color='lightPrimary'
+            borderRadius='8px'
+            onClick={() => handleGotToAdd()}
+          >
+            {t('ADD_NEW_STORE', 'Add new store')}
+          </Button>
+          <Button
+            color='lightPrimary'
+            borderRadius='8px'
+            onClick={() => handleOpenSync()}
+          >
+            {t('SYNC', 'Sync')}
+          </Button>
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            onSearch={onSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+            customClass='searchBar'
+          />
+        </ActionsWrapper>
+      )}
+
     </HeaderContainer>
   )
 }

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { FileMedical, ColumnsGap } from 'react-bootstrap-icons'
+import Skeleton from 'react-loading-skeleton'
+import {
+  Container,
+  GuideItemContainer,
+  InfoWrapper,
+  IconWrapper
+} from './styles'
+
+export const ProductStartGuide = (props) => {
+  const { onClose, setStep, countriesState } = props
+  const [, t] = useLanguage()
+
+  const guideList = [
+    { id: 1, title: t('START_WITH_AN_EMPTY_MENU', 'Start with an empty Menu'), description: t('START_WITH_AN_EMPTY_MENU_DESC', 'Start with an empty Menu and enter your menu items'), icon: <FileMedical />, enabled: true },
+    { id: 2, title: t('IMPORT_MENU_ONLY_USA_CANADA', 'Import Menu (Only if USA and Canada)'), description: t('IMPORT_MENU_ONLY_USA_CANADA_DESC', 'Import your menu from the Ordering Network that includes over 1M restaurants and stores from the US and Canada.'), icon: <ColumnsGap />, enabled: countriesState?.enabled }
+  ]
+
+  const handleChangeStep = (id) => {
+    if (id === 1) onClose()
+    else if (id === 2) setStep(2)
+  }
+
+  return (
+    <Container>
+      <h2>{t('HOW_DO_YOU_WANT_TO_START', 'How do you want to start?')}</h2>
+      {countriesState?.loading && [...Array(4).keys()].map(idx => (
+        <GuideItemContainer key={idx}>
+          <IconWrapper>
+            <Skeleton width={24} height={24} />
+          </IconWrapper>
+          <InfoWrapper>
+            <h3>
+              <Skeleton height={18} width={200} />
+            </h3>
+            <p>
+              <Skeleton height={10} />
+            </p>
+            <p>
+              <Skeleton height={10} />
+            </p>
+          </InfoWrapper>
+        </GuideItemContainer>
+      ))}
+      {!countriesState?.loading && guideList.map(guide => guide.enabled && (
+        <GuideItemContainer key={guide.id} onClick={() => handleChangeStep(guide.id)}>
+          <IconWrapper>
+            {guide.icon}
+          </IconWrapper>
+          <InfoWrapper>
+            <h3>{guide.title}</h3>
+            <p>{guide.description}</p>
+          </InfoWrapper>
+        </GuideItemContainer>
+      ))}
+    </Container>
+  )
+}

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

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin: 0;
+  }
+`
+
+export const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 20px;
+  `}
+  svg {
+    font-size: 24px;
+  }
+`
+
+export const GuideItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  min-height: 78px;
+  margin-top: 30px;
+  border-radius: 7.6px;
+  cursor: pointer;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  transition: all 0.3s linear;
+
+  &:hover {
+    border: 1px solid ${props => props.theme.colors.primary};
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+`
+
+export const InfoWrapper = styled.div`
+  flex: 1;
+  h3 {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    margin: 0%;
+  }
+  p {
+    margin: 0;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    > span {
+      display: flex;
+      margin-top: 5px;
+    }
+  }
+`

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

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import { useLanguage, useEvent, ProductStep as ProductStepController } from 'ordering-components-admin-external'
+import { ProductStartGuide } from '../ProductStartGuide'
+import { RestaurantSelectGuide } from '../RestaurantSelectGuide'
+import { useTheme } from 'styled-components'
+import { Button } from '../../../styles'
+import {
+  Container,
+  ImportMenuContainer,
+  ImageContent,
+  ButtonWrapper
+} from './styles'
+
+const ProductStepUI = (props) => {
+  const {
+    onClose,
+    businessList,
+    setBusiness,
+    actionState,
+    handleImport,
+    handleChangeAddress,
+    business,
+    isLoading,
+    orderingBusiness,
+    countriesState
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+
+  const [step, setStep] = useState(1)
+
+  const handleCheckMenu = () => {
+    events.emit('go_to_page', { page: 'store', params: { store: business?._id } })
+    onClose()
+  }
+
+  return (
+    <Container>
+      {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} countriesState={countriesState} />}
+      {step === 2 && (
+        <RestaurantSelectGuide
+          setBusiness={setBusiness}
+          setStep={setStep}
+          onClose={onClose}
+          businessList={businessList}
+          handleImport={handleImport}
+          handleChangeAddress={handleChangeAddress}
+          orderingBusiness={orderingBusiness}
+          business={business}
+          isLoading={isLoading}
+        />
+      )}
+      {step === 3 && actionState?.loading && (
+        <ImportMenuContainer>
+          <h2>{t('WE_ARE_IMPORTING_YOUR_MENU', 'We are importing your menu.')}</h2>
+          <ImageContent>
+            <img src={theme.images.general.importMenu} alt='' />
+          </ImageContent>
+        </ImportMenuContainer>
+      )}
+      {step === 3 && !actionState?.loading && (
+        <ImportMenuContainer>
+          <h2>{t('YOUR_MENU_HAS_BEEN_IMPORTED', 'Your menu has been imported')}</h2>
+          <ImageContent>
+            <img src={theme.images.general.importedMenu} alt='' />
+          </ImageContent>
+          <ButtonWrapper>
+            <Button color='primary' onClick={() => handleCheckMenu()}>{t('CHECK_MENU', 'Check menu')}</Button>
+          </ButtonWrapper>
+        </ImportMenuContainer>
+      )}
+    </Container>
+  )
+}
+
+export const ProductStep = (props) => {
+  const productStepProps = {
+    ...props,
+    UIComponent: ProductStepUI
+  }
+  return <ProductStepController {...productStepProps} />
+}

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const Container = styled.div``
+
+export const ImportMenuContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin: 0;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  button {
+    height: 44px;
+    width: 300px;
+    margin-top: 30px;
+    border-radius: 8px;
+  }
+`
+
+export const ImageContent = styled.div`
+  display: flex;
+  justify-content: center;
+`