ordering-ui-admin-external 1.24.2 → 1.25.0

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

@@ -63,6 +63,7 @@ export const BusinessDetailsUI = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const spoonityConfig = businessState?.business?.configs?.find(config => config.key === 'spoonity_integration_api_key')
 
@@ -82,10 +83,14 @@ export const BusinessDetailsUI = (props) => {
       if (width <= 500) {
         document.getElementById('business_details_bar').style.width = '100vw'
       } else {
-        if (extraOpen && width >= 1000) {
-          document.getElementById('business_details_bar').style.width = '1000px'
+        if (isExpand) {
+          document.getElementById('business_details_bar').style.width = '100vw'
         } else {
-          document.getElementById('business_details_bar').style.width = '500px'
+          if (extraOpen && width >= 1000) {
+            document.getElementById('business_details_bar').style.width = '1000px'
+          } else {
+            document.getElementById('business_details_bar').style.width = '500px'
+          }
         }
       }
     }
@@ -109,26 +114,14 @@ export const BusinessDetailsUI = (props) => {
     history.replace(`${location.pathname}?id=${businessId}`)
   }
 
-  useEffect(() => {
-    if (width > 1000) {
-      setIsExtendExtraOpen(false)
-    }
-    toggleMainContent()
-  }, [width])
-
   useEffect(() => {
     if (!open) return
     actionSidebar(true)
   }, [open])
 
   useEffect(() => {
-    if (width < 1000) return
-    if (extraOpen) {
-      document.getElementById('business_details_bar').style.width = '1000px'
-    } else {
-      toggleMainContent()
-    }
-  }, [extraOpen])
+    toggleMainContent()
+  }, [extraOpen, isExpand, width])
 
   useEffect(() => {
     setExtraOpen(false)
@@ -187,6 +180,8 @@ export const BusinessDetailsUI = (props) => {
           extraOpen={extraOpen}
           spoonityConfig={spoonityConfig}
           siteState={siteState}
+          isExpand={isExpand}
+          setIsExpand={setIsExpand}
         />
       )}
       {extraOpen && (

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

@@ -8,7 +8,7 @@ import {
 import Skeleton from 'react-loading-skeleton'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { List as MenuIcon } from 'react-bootstrap-icons'
-import { Button, IconButton } from '../../../styles'
+import { Button, IconButton, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert, SearchBar, SideBar, ColumnAllowSettingPopover } from '../../Shared'
 import {
@@ -232,7 +232,7 @@ const BusinessDeviceListingUI = (props) => {
           </BrandListTable>
         </BrandListTableWrapper>
         <BrandListBottomContainer>
-          <span onClick={() => handleOpenSideBar()}>{t('ADD_NEW_DEVICE', 'Add new device')}</span>
+          <LinkButton onClick={() => handleOpenSideBar()}>{t('ADD_NEW_DEVICE', 'Add new device')}</LinkButton>
         </BrandListBottomContainer>
         {isOpen && (
           <SideBar

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

@@ -208,11 +208,4 @@ export const BrandListBottomContainer = styled.div`
   display: flex;
   align-items: center;
   margin-top: 16px;
-
-  span {
-    cursor: pointer;
-    user-select: none;
-    font-size: 14px;
-    color: ${props => props.theme.colors?.primary};
-  }
 `

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

@@ -4,7 +4,7 @@ import { useLanguage, BusinessMenu as BusinessMenuController } from 'ordering-co
 import { BusinessMenuOptions } from '../BusinessMenuOptions'
 import { Confirm, Modal, SearchBar } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { Button, Checkbox } from '../../../styles'
+import { Button, Checkbox, LinkButton } from '../../../styles'
 import { ChevronRight } from 'react-bootstrap-icons'
 
 import {
@@ -15,7 +15,7 @@ import {
   MeunItem,
   MenuName,
   CheckboxWrapper,
-  AddMenuButton,
+  AddMenuButtonWrapper,
   TabsContainer,
   Tab,
   SearchBarWrapper
@@ -189,11 +189,13 @@ const BusinessMenuUI = (props) => {
           </MeunItem>
         ))}
         {!isSelectedSharedMenus && (
-          <AddMenuButton
-            onClick={() => handleOpenOptions('option', {})}
-          >
-            {t('ADD_MENU', 'Add menu')}
-          </AddMenuButton>
+          <AddMenuButtonWrapper>
+            <LinkButton
+              onClick={() => handleOpenOptions('option', {})}
+            >
+              {t('ADD_MENU', 'Add menu')}
+            </LinkButton>
+          </AddMenuButtonWrapper>
         )}
       </MenuContainer>
       {width >= 1000 ? (

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

@@ -89,13 +89,8 @@ export const CheckboxWrapper = styled.div`
     margin-right: 20px;
   `}
 `
-export const AddMenuButton = styled.a`
-  cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+export const AddMenuButtonWrapper = styled.div`
   margin: 15px 0;
-  display: inline-block;
-  text-decoration: none;
-  font-size: 14px;
 `
 export const TabsContainer = styled.div`
   width: 100%;

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

@@ -3,7 +3,7 @@ import { useLanguage, BusinessPlaceGroup as BusinessPlaceGroupController } from
 import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { Button, IconButton, Input } from '../../../styles'
+import { Button, IconButton, Input, LinkButton } from '../../../styles'
 import { useForm } from 'react-hook-form'
 import { Alert, Modal } from '../../Shared'
 import Skeleton from 'react-loading-skeleton'
@@ -19,7 +19,7 @@ import {
   ButtonWrapper,
   HideSubmitBtn,
   OptionList,
-  AddBtn,
+  AddBtnWrapper,
   PlaceItemContainer,
   CheckWrapper,
   TableHead
@@ -219,7 +219,11 @@ export const BusinessPlaceGroupUI = (props) => {
             ))}
           </OptionList>
         )}
-        {placeGroup && <AddBtn onClick={() => handleOpenModal(null)}>{t('ADD_OPTION', 'Add option')}</AddBtn>}
+        {placeGroup && (
+          <AddBtnWrapper>
+            <LinkButton onClick={() => handleOpenModal(null)}>{t('ADD_OPTION', 'Add option')}</LinkButton>
+          </AddBtnWrapper>
+        )}
         <ButtonWrapper>
           <Button
             color='primary'

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

@@ -155,19 +155,8 @@ export const OptionList = styled.div`
   margin-top: 35px;
 `
 
-export const AddBtn = styled.span`
-  font-weight: 400;
-  font-size: 14px;
-  display: block;
+export const AddBtnWrapper = styled.div`
   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 CheckWrapper = styled.div`

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

@@ -2,7 +2,7 @@ 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 { Button, LinkButton } from '../../../styles'
 import { ChevronRight, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { BusinessPlaceGroup } from '../BusinessPlaceGroup'
@@ -12,7 +12,7 @@ import {
   Container,
   Header,
   Content,
-  AddBtn,
+  AddBtnWrapper,
   TableHead,
   CheckWrapper,
   PlaceItemContainer,
@@ -139,7 +139,9 @@ export const BusinessPlaceGroupListUI = (props) => {
                 <ChevronRight />
               </PlaceItemContainer>
             ))}
-            <AddBtn onClick={() => handleOpenDetail(null)}>{t('ADD_PLACES', 'Add places')}</AddBtn>
+            <AddBtnWrapper>
+              <LinkButton onClick={() => handleOpenDetail(null)}>{t('ADD_PLACES', 'Add places')}</LinkButton>
+            </AddBtnWrapper>
           </Content>
         )}
       </PlaceContainer>

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

@@ -50,19 +50,8 @@ export const Header = styled.div`
 
 export const Content = styled.div``
 
-export const AddBtn = styled.span`
-  font-weight: 400;
-  font-size: 14px;
-  display: block;
+export const AddBtnWrapper = styled.div`
   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`

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

@@ -4,13 +4,14 @@ import { ColumnAllowSettingPopover, NotFoundSource, Pagination, SideBar } from '
 import { SingleBusinessProduct } from '../SingleBusinessProduct'
 import { BusinessSpreadSheet } from '../BusinessSpreadSheet'
 import { BusinessProductAddForm } from '../BusinessProductAddForm'
+import { LinkButton } from '../../../styles'
 
 import {
   ListContent,
   ProductListContainer,
   BusinessProductListTable,
   WrapperNotFound,
-  AddProductBtn,
+  AddProductBtnWrapper,
   ProductListSpreadContainer,
   ProductListBottom
 } from './styles'
@@ -196,11 +197,13 @@ export const BusinessProductList = (props) => {
           <ProductListBottom>
             {
               !businessState.loading && businessState?.business?.categories?.length > 0 && categorySelected && (
-                <AddProductBtn
-                  onClick={() => handleParentProductAdd(true)}
-                >
-                  {t('ADD_NEW_PRODUCT', 'Add new product')}
-                </AddProductBtn>
+                <AddProductBtnWrapper>
+                  <LinkButton
+                    onClick={() => handleParentProductAdd(true)}
+                  >
+                    {t('ADD_NEW_PRODUCT', 'Add new product')}
+                  </LinkButton>
+                </AddProductBtnWrapper>
               )
             }
 

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

@@ -110,14 +110,9 @@ export const WrapperNotFound = styled.div`
   margin: 20px;
 `
 
-export const AddProductBtn = styled.div`
-  user-select: none;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
+export const AddProductBtnWrapper = styled.div`
   margin-top: 12px;
-  cursor: pointer;
   margin-bottom: 15px;
-  display: inline-block;
 `
 
 export const ProductListBottom = styled.div`

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

@@ -1,12 +1,13 @@
 import React, { useRef, useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { SingleBusinessSubCateogries } from '../SingleBusinessSubCateogries'
+import { LinkButton } from '../../../styles'
 
 import {
   CategoryListContainer,
   HeaderContainer,
   ListContent,
-  AddCategory
+  AddCategoryWrapper
 } from './styles'
 
 export const BusinessProductsCategories = (props) => {
@@ -70,12 +71,14 @@ export const BusinessProductsCategories = (props) => {
           )}
         </ListContent>
       </CategoryListContainer>
-      <AddCategory
-        ref={addButtonRef}
-        onClick={() => handleOpenCategoryDetails()}
-      >
-        {t('ADD_NEW_CATEGORY', 'Add new category')}
-      </AddCategory>
+      <AddCategoryWrapper>
+        <LinkButton
+          ref={addButtonRef}
+          onClick={() => handleOpenCategoryDetails()}
+        >
+          {t('ADD_NEW_CATEGORY', 'Add new category')}
+        </LinkButton>
+      </AddCategoryWrapper>
     </>
   )
 }

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

@@ -32,12 +32,7 @@ export const ListContent = styled.div`
   }
 `
 
-export const AddCategory = styled.div`
-  display: inline;
-  user-select: none;
-  font-size: 14px;
-  color: ${props => props.theme.colors?.primary};
-  cursor: pointer;
+export const AddCategoryWrapper = styled.div`
   margin: 15px 10px;
 `
 

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

@@ -304,7 +304,10 @@ const BusinessProductsListingUI = (props) => {
                     <Breadcrumb>
                       <span
                         className='business'
-                        onClick={() => setOpenSidebar('business_details')}
+                        onClick={() => {
+                          history.replace(`${location.pathname}?id=${businessState?.business?.id}`)
+                          setOpenSidebar('business_details')
+                        }}
                       >
                         {selectedBusiness?.name || businessState?.business?.name}
                       </span>
@@ -327,7 +330,7 @@ const BusinessProductsListingUI = (props) => {
                 {t('REFRESH', 'Refresh')}
                 <ArrowRepeat size={16} style={{ marginLeft: 5 }} />
               </Button>
-              <ImportersButton customClass='importerGroup' />
+              <ImportersButton customClass='importerGroup' setOpenSidebar={setOpenSidebar} />
               <Button
                 borderRadius='8px'
                 color='lightPrimary'

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

@@ -6,7 +6,7 @@ import {
 } from 'ordering-components-admin-external'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
-import { Button, Checkbox, IconButton } from '../../../styles'
+import { Button, Checkbox, IconButton, LinkButton } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { AutoScroll, Confirm, Modal } from '../../Shared'
 import { BusinessPromotionGeneralForm } from '../BusinessPromotionGeneralForm'
@@ -21,7 +21,7 @@ import {
   PromotionTbody,
   ActionSelectorWrapper,
   PromotionTypeItem,
-  AddNewPromotionText,
+  AddNewPromotionButtonWrapper,
   PromotionEditFormContainer,
   EditHeader,
   CloseButtonWrapper,
@@ -132,9 +132,11 @@ const BusinessPromotionListUI = (props) => {
             </PromotionTbody>
           ))}
         </PromotionsTable>
-        <AddNewPromotionText onClick={(e) => handleOpenForm(e, {})}>
-          {t('ADD_NEW_PROMOTION', 'Add new promotion')}
-        </AddNewPromotionText>
+        <AddNewPromotionButtonWrapper>
+          <LinkButton onClick={(e) => handleOpenForm(e, {})}>
+            {t('ADD_NEW_PROMOTION', 'Add new promotion')}
+          </LinkButton>
+        </AddNewPromotionButtonWrapper>
       </BusinessPromotionsContainer>
       {isShowForm && (
         <>

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

@@ -132,12 +132,8 @@ export const PromotionDateItem = styled.div`
   }
 `
 
-export const AddNewPromotionText = styled.div`
-  cursor: pointer;
-  width: fit-content;
+export const AddNewPromotionButtonWrapper = styled.div`
   margin: 15px 0;
-  color: ${props => props.theme.colors.primary};
-  font-size: 12px;
 `
 
 export const PromotionEditFormContainer = styled.div`

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage, useUtils, useEvent, useApi } from 'ordering-components-admin-external'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
@@ -39,7 +39,9 @@ export const BusinessSummary = (props) => {
     handleDeleteBusiness,
     extraOpen,
     spoonityConfig,
-    siteState
+    siteState,
+    isExpand,
+    setIsExpand
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -49,7 +51,6 @@ export const BusinessSummary = (props) => {
   const { width } = useWindowSize()
   const [isBusinessPreview, setIsBusinessPreview] = useState(false)
   const [selectedView, setSelectedView] = useState('desktop')
-  const [isExpand, setIsExpand] = useState(false)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
   const handleOpenCategory = () => {
@@ -160,10 +161,6 @@ export const BusinessSummary = (props) => {
     setIsExpand(prev => !prev)
   }
 
-  useEffect(() => {
-    if (extraOpen) setIsExpand(false)
-  }, [extraOpen])
-
   return (
     <>
       <BusinessDetailsContainer>

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { Button, Switch } from '../../../styles'
+import { Button, Switch, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { SingleBusiness } from '../SingleBusiness'
 import { CheckSquareFill, Square } from 'react-bootstrap-icons'
@@ -11,7 +11,6 @@ import {
   BusinessListTable,
   WrapperPagination,
   BusinessCardContainer,
-  AddNewButtonLink,
   BusinessListBottomContainer,
   AddFirstStoreContainer,
   CheckBoxWrapper,
@@ -39,7 +38,8 @@ export const BusinessesList = (props) => {
     handleEnableAllBusiness,
     selectedBusinessActiveState,
     setBusinessIds,
-    handleGotToAdd
+    handleGotToAdd,
+    citiesList
   } = props
 
   const theme = useTheme()
@@ -208,6 +208,7 @@ export const BusinessesList = (props) => {
                     handleOpenBusinessDetails={handleOpenBusinessDetails}
                     businessIds={businessIds}
                     handleChangeBusinessIds={handleChangeBusinessIds}
+                    citiesList={citiesList}
                   />
                 ))
               )}
@@ -215,11 +216,11 @@ export const BusinessesList = (props) => {
           </BusinessListContainer>
 
           <BusinessListBottomContainer>
-            <AddNewButtonLink
+            <LinkButton
               onClick={() => handleGotToAdd()}
             >
               {t('ADD_NEW_STORE', 'Add new store')}
-            </AddNewButtonLink>
+            </LinkButton>
             {pagination && (
               <WrapperPagination>
                 {pagination?.total > 0 && (
@@ -260,6 +261,7 @@ export const BusinessesList = (props) => {
                 handleSucessAddBusiness={handleSucessAddBusiness}
                 handleSucessUpdateBusiness={handleSucessUpdateBusiness}
                 handleOpenBusinessDetails={handleOpenBusinessDetails}
+                citiesList={citiesList}
               />
             ))
           )}

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

@@ -66,14 +66,6 @@ export const BusinessCardContainer = styled.div`
   max-height: calc(100vh - 210px);
   overflow: auto;
 `
-
-export const AddNewButtonLink = styled.div`
-  width: fit-content;
-  cursor: pointer;
-  color: ${props => props.theme.colors.primary};
-  font-size: 14px;
-`
-
 export const BusinessListBottomContainer = styled.div`
   display: flex;
   flex-wrap: wrap;

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

@@ -52,7 +52,8 @@ const BusinessesListingUI = (props) => {
     handleChangeFilterValues,
     filterValues,
     businessTypeSelected,
-    inActiveBusinesses
+    inActiveBusinesses,
+    citiesList
   } = props
 
   const history = useHistory()
@@ -267,6 +268,7 @@ const BusinessesListingUI = (props) => {
             handleEnableAllBusiness={handleEnableAllBusiness}
             selectedBusinessActiveState={selectedBusinessActiveState}
             handleGotToAdd={handleGotToAdd}
+            citiesList={citiesList}
           />
         )}
       </BusinessListingContainer>

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

@@ -8,6 +8,7 @@ import { SideBar } from '../../Shared'
 import { CsvImportButtonWrapper } from './styles'
 
 export const ImportersButton = (props) => {
+  const { setOpenSidebar } = props
   const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
@@ -15,6 +16,7 @@ export const ImportersButton = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
 
   const handleOpenImporters = () => {
+    setOpenSidebar('importer')
     setOpenImporters(true)
 
     history.replace(`${location.pathname}?header=importers`)

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

@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton'
 import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
 import { useLanguage } from 'ordering-components-admin-external'
 import { DropdownButton, Dropdown } from 'react-bootstrap'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { NotFoundSource } from '../../Shared'
 
@@ -11,7 +11,6 @@ import {
   ImportListContainer,
   ImportersTableWrapper,
   ImportersBottomContainer,
-  AddNewImporterButton,
   ImpotersTable,
   UserEnableWrapper,
   WrapperUserActionSelector,
@@ -132,9 +131,9 @@ export const ImportersList = (props) => {
         </ImpotersTable>
       </ImportersTableWrapper>
       <ImportersBottomContainer>
-        <AddNewImporterButton onClick={() => addNewImporter()}>
+        <LinkButton onClick={() => addNewImporter()}>
           {t('ADD_NEW_IMPORTER', 'Add new importer')}
-        </AddNewImporterButton>
+        </LinkButton>
       </ImportersBottomContainer>
     </ImportListContainer>
   )

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

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import { darken } from 'polished'
 
 export const ImportListContainer = styled.div``
 export const ImportersTableWrapper = styled.div`
@@ -111,18 +110,7 @@ export const WrapperUserActionSelector = styled.div`
 export const ImportersBottomContainer = styled.div`
   display: flex;
   justify-content: space-between;
-
-`
-export const AddNewImporterButton = styled.div`
-  display: inline-flex;
-  width: fit-content;
-  cursor: pointer;
-  color: rgb(144, 155, 169);
-  font-size: 14px;
-  margin-top: 20px;
-  &:hover {
-    color: ${props => darken(0.05, props.theme.colors.primary)};
-  }
+  margin: 15px 0;
 `
 export const NotFoundWrapper = styled.div`
   display: flex;