ordering-ui-admin-external 1.13.4 → 1.14.1

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

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.lightGray};
+    margin-bottom: 15px;
+    margin-top: 0;
+  }
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  }
+`
+
+export const LinkText = styled.div`
+  margin-bottom: 23px;
+  a {
+    color: ${props => props.theme.colors.primary};
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+`
+
+export const LeftHeader = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    margin-right: 18px;
+    ${props => props.theme.rtl && css`
+      margin-left: 18px;
+      margin-right: 0;
+    `}
+  }
+
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin: 0;
+  }
+`
+
+export const Step = styled.div`
+  margin-bottom: 27px;
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+  img {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    img {
+      display: block;
+      width: 90%;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 24px;
+    }
+  }
+`

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

@@ -1,13 +1,14 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } 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'
 import { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
-import { XLg, LifePreserver, ThreeDots, Laptop, Phone } from 'react-bootstrap-icons'
+import { XLg, LifePreserver, ThreeDots, Laptop, Phone, ArrowsAngleExpand, ArrowsAngleContract } from 'react-bootstrap-icons'
 import { Button, IconButton, Switch } from '../../../styles'
 import { Confirm, Modal } from '../../Shared'
 import { BusinessPreview } from '../BusinessPreview'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   BusinessDetailsContainer,
@@ -35,15 +36,18 @@ export const BusinessSummary = (props) => {
     selectedItem,
     handleSelectedItem,
     handleDuplicateBusiness,
-    handleDeleteBusiness
+    handleDeleteBusiness,
+    extraOpen
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const [events] = useEvent()
   const theme = useTheme()
   const [ordering] = useApi()
+  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 = () => {
@@ -109,6 +113,10 @@ export const BusinessSummary = (props) => {
     //   key: 'publishing',
     //   value: t('PUBLISHING', 'Publishing')
     // },
+    {
+      key: 'sales_channels',
+      value: t('SALES_CHANNELS', 'Sales channels')
+    },
     {
       key: 'layout',
       value: t('LAYOUT', 'Layout')
@@ -130,6 +138,19 @@ export const BusinessSummary = (props) => {
     })
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('business_details_bar')
+    if (!element) return
+
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
+  useEffect(() => {
+    if (extraOpen) setIsExpand(false)
+  }, [extraOpen])
+
   return (
     <>
       <BusinessDetailsContainer>
@@ -160,6 +181,14 @@ export const BusinessSummary = (props) => {
             >
               <LifePreserver />
             </IconButton>
+            {width > 576 && !extraOpen && (
+              <IconButton
+                color='black'
+                onClick={() => expandSideBar()}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <ActionSelectorWrapper>
               <DropdownButton
                 menuAlign={theme?.rtl ? 'left' : 'right'}

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

@@ -229,7 +229,7 @@ const BusinessTypeDetailUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -70,7 +70,7 @@ export const BusinessCardContainer = styled.div`
 export const AddNewButtonLink = styled.div`
   width: fit-content;
   cursor: pointer;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   font-size: 14px;
 `
 

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

@@ -48,7 +48,11 @@ const BusinessesListingUI = (props) => {
     handleEnableAllBusiness,
     handleDeleteMultiBusinesses,
     setBusinessIds,
-    countriesState
+    countriesState,
+    handleChangeFilterValues,
+    filterValues,
+    businessTypeSelected,
+    inActiveBusinesses
   } = props
 
   const query = new URLSearchParams(useLocation().search)
@@ -70,8 +74,15 @@ const BusinessesListingUI = (props) => {
   const [isAdd, setIsAdd] = useState(false)
 
   const noBusinesses = useMemo(() => {
-    return !businessList?.loading && businessList?.businesses?.length === 0 && pagination?.currentPage === 1 && !searchValue
-  }, [businessList?.loading, businessList?.businesses, pagination, searchValue])
+    return !businessList?.loading &&
+      businessList?.businesses?.length === 0 &&
+      pagination?.currentPage === 1 &&
+      !searchValue &&
+      Object.keys(filterValues).length === 0 &&
+      selectedBusinessActiveState &&
+      !businessTypeSelected &&
+      inActiveBusinesses?.length === 0
+  }, [businessList?.loading, businessList?.businesses, pagination, searchValue, filterValues, selectedBusinessActiveState, businessTypeSelected, inActiveBusinesses])
 
   const handleGotToAdd = () => {
     if (countriesState?.enabled) setIsAdd(true)
@@ -176,13 +187,15 @@ const BusinessesListingUI = (props) => {
           loading={businessList.loading}
           noBusinesses={noBusinesses}
           openAddBusiness={openAddBusiness}
+          handleChangeFilterValues={handleChangeFilterValues}
+          filterValues={filterValues}
         />
-        <ViewContainer>
-          <BusinessActiveStateFilter
-            selectedBusinessActiveState={selectedBusinessActiveState}
-            handleChangeBusinessActiveState={handleChangeBusinessActiveState}
-          />
-          {!noBusinesses && (
+        {!noBusinesses && (
+          <ViewContainer>
+            <BusinessActiveStateFilter
+              selectedBusinessActiveState={selectedBusinessActiveState}
+              handleChangeBusinessActiveState={handleChangeBusinessActiveState}
+            />
             <WrapperView>
               <ViewMethodButton
                 active={viewMethod === 'card'}
@@ -197,8 +210,8 @@ const BusinessesListingUI = (props) => {
                 <BsViewList />
               </ViewMethodButton>
             </WrapperView>
-          )}
-        </ViewContainer>
+          </ViewContainer>
+        )}
         {!noBusinesses && (
           <ButtonGroup isSelect={businessIds?.length > 0}>
             <BusinessTypeFilter

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

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { List as MenuIcon, LifePreserver, ArrowRepeat } from 'react-bootstrap-icons'
+import { List as MenuIcon, LifePreserver, ArrowRepeat, Funnel } from 'react-bootstrap-icons'
+import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 import { Button, IconButton } from '../../../styles'
 import { SearchBar } from '../../Shared'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
@@ -12,6 +13,7 @@ import {
   HeaderTitleContainer,
   ActionsWrapper
 } from './styles'
+import { BusinessFilterGroup } from '../BusinessFilterGroup'
 
 export const BusinessesListingHeader = (props) => {
   const {
@@ -23,10 +25,18 @@ export const BusinessesListingHeader = (props) => {
     handleRefreshBusinesses,
     loading,
     noBusinesses,
-    handleGotToAdd
+    handleGotToAdd,
+    handleChangeFilterValues,
+    filterValues
   } = props
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const [filterApplied, setFilterApplied] = useState(false)
+  const [isFilterModal, setIsFilterModal] = useState(false)
+
+  useEffect(() => {
+    setFilterApplied(Object.keys(filterValues).length > 0)
+  }, [filterValues])
 
   return (
     <HeaderContainer>
@@ -93,9 +103,20 @@ export const BusinessesListingHeader = (props) => {
             placeholder={t('SEARCH', 'Search')}
             customClass='searchBar'
           />
+          <IconButton
+            color='black'
+            onClick={() => setIsFilterModal(true)}
+            name='filter-btn'
+          >
+            {filterApplied ? <Funnel /> : <MdcFilterOff />}
+          </IconButton>
         </ActionsWrapper>
       )}
-
+      <BusinessFilterGroup
+        handleChangeFilterValues={handleChangeFilterValues}
+        onClose={() => setIsFilterModal(false)}
+        isFilterModal={isFilterModal}
+      />
     </HeaderContainer>
   )
 }

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

@@ -64,7 +64,7 @@ export const ActionsWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  > button {
+  > button:not(:last-child) {
     height: 41px;
     width: 90px;
     white-space: nowrap;
@@ -78,9 +78,21 @@ export const ActionsWrapper = styled.div`
       width: unset;
     }
   }
+  > button:last-child {
+    margin-top: 5px;
+    height: 41px;
+  }
+  > div {
+    margin-top: 5px;
+  }
   > .searchBar {
     min-width: 100px;
     margin-top: 5px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 15px;
+    ` : css`
+      margin-right: 15px;
+    `}
   }
   > .importerGroup {
     margin-top: 5px;

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

@@ -29,6 +29,7 @@ export const ImportersButton = (props) => {
           moveDistance={extraOpen ? 500 : 0}
           open={openImporters}
           onClose={() => setOpenImporters(false)}
+          showExpandIcon
         >
           <ImportersListing
             setExtraOpen={setExtraOpen}

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

@@ -114,12 +114,10 @@ export const PaymentOption = (props) => {
   }, [businessPaymethod?.id, businessPaymethod?.sandbox, businessPaymethod?.allowed_order_types])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.allowed_order_types, changesState?.sites])
 
   return (

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

@@ -47,20 +47,30 @@ export const PaymentOptionMethods = (props) => {
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -111,12 +121,10 @@ export const PaymentOptionMethods = (props) => {
   }, [])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -227,19 +235,32 @@ export const PaymentOptionMethods = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (

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

@@ -45,6 +45,8 @@ export const PaymentOptionPaypal = (props) => {
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const actionSidebar = (value) => {
     if (!value) {
@@ -55,17 +57,25 @@ export const PaymentOptionPaypal = (props) => {
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -111,12 +121,10 @@ export const PaymentOptionPaypal = (props) => {
   }, [])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -227,19 +235,32 @@ export const PaymentOptionPaypal = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (

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

@@ -45,20 +45,30 @@ export const PaymentOptionStripeDirect = (props) => {
   const [paymentTabs, setPaymentTabs] = useState(0)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
     const data = {}
-    let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
-      ? businessPaymethod?.[values.key]
-      : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
+    if (values?.value === 'All') {
+      data[values.key] = []
+      setAll(!all)
+    } else {
+      let array = changesState?.[values.key] ?? (values.key === 'allowed_order_types'
+        ? businessPaymethod?.[values.key]
+        : businessPaymethod?.[values.key]?.map(i => i.id)) ?? []
 
-    array = [...new Set(
-      array.includes(values.value)
-        ? array.filter(item => item !== values.value)
-        : [...array, values.value]
-    )]
+      array = [...new Set(
+        array.includes(values.value)
+          ? array.filter(item => item !== values.value)
+          : [...array, values.value]
+      )]
 
-    data[values.key] = array.length > 0 ? array : []
+      data[values.key] = array.length > 0 ? array : []
+      if (values.key === 'sites') {
+        setAll(!data?.sites?.length)
+      }
+    }
 
     handleChangeBusinessPaymentState(data)
   }
@@ -109,12 +119,10 @@ export const PaymentOptionStripeDirect = (props) => {
   }, [])
 
   useEffect(() => {
-    if (changesState?.allowed_order_types) {
-      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
-    }
-    if (changesState?.sites) {
-      setLocalState({ sites: changesState?.sites })
-    }
+    const changes = {}
+    if (changesState?.allowed_order_types) changes.allowed_order_types = changesState?.allowed_order_types
+    if (changesState?.sites) changes.sites = changesState?.sites
+    if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
   return (
@@ -225,19 +233,32 @@ export const PaymentOptionStripeDirect = (props) => {
         )}
 
         {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-          sitesState?.sites.map(site => (
+          <>
             <TabOption
-              key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              key='all'
+              onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
-              {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+              {all ? (
                 <RiCheckboxFill className='fill' />
               ) : (
                 <RiCheckboxBlankLine />
               )}
-              <TabOptionName>{site.name}</TabOptionName>
+              <TabOptionName>{t('ALL', 'All')}</TabOptionName>
             </TabOption>
-          ))
+            {!all && sitesState?.sites.map(site => (
+              <TabOption
+                key={site.id}
+                onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              >
+                {(localState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                  <RiCheckboxFill className='fill' />
+                ) : (
+                  <RiCheckboxBlankLine />
+                )}
+                <TabOptionName>{site.name}</TabOptionName>
+              </TabOption>
+            ))}
+          </>
         )}
 
         {paymentTabs === 2 && (