ordering-ui-admin-external 1.7.3 → 1.8.0

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

@@ -103,3 +103,55 @@ export const AddFirstStoreContainer = styled.div`
     }
   }
 `
+
+export const CheckBoxWrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+
+  ${({ isChecked }) => isChecked && css`
+    svg {
+      color: ${props => props.theme.colors?.primary};
+    }
+  `}
+`
+
+export const BusinessIdWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const ActionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  > label {
+    margin-left: 5px;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const FeaturedWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  label {
+    margin-right: 5px;
+    ${props => props.theme.rtl && css`
+      margin-right: 0px;
+      margin-left: 5px;
+    `}
+  }
+`

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

@@ -18,9 +18,11 @@ import {
   BusinessListingContainer,
   ViewContainer,
   WrapperView,
-  ViewMethodButton
+  ViewMethodButton,
+  ButtonGroup
 } from './styles'
 import { BusinessSync } from '../BusinessSync'
+import { BusinessDelete } from '../BusinessDelete'
 
 const BusinessesListingUI = (props) => {
   const {
@@ -37,7 +39,12 @@ const BusinessesListingUI = (props) => {
     loadBusinesses,
     onSearch,
     onBusinessRedirect,
-    getPageBusinesses
+    getPageBusinesses,
+    businessIds,
+    handleChangeBusinessIds,
+    handleEnableAllBusiness,
+    handleDeleteMultiBusinesses,
+    setBusinessIds
   } = props
 
   const query = new URLSearchParams(useLocation().search)
@@ -170,12 +177,19 @@ const BusinessesListingUI = (props) => {
             </ViewMethodButton>
           </WrapperView>
         </ViewContainer>
-        <BusinessTypeFilter
-          businessTypes={props.businessTypes}
-          defaultBusinessType={props.defaultBusinessType}
-          handleChangeBusinessType={handleChangeBusinessType}
-          setBusinessTypes={setBusinessTypes}
-        />
+        <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}
@@ -189,6 +203,11 @@ const BusinessesListingUI = (props) => {
           handleOpenBusinessDetails={handleOpenBusinessDetails}
           handleOpenAddBusiness={handleOpenAddBusiness}
           isTutorialMode={isTutorialMode}
+          businessIds={businessIds}
+          setBusinessIds={setBusinessIds}
+          handleChangeBusinessIds={handleChangeBusinessIds}
+          handleEnableAllBusiness={handleEnableAllBusiness}
+          selectedBusinessActiveState={selectedBusinessActiveState}
         />
       </BusinessListingContainer>
       {openBusinessDetails && (

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

@@ -50,3 +50,37 @@ export const ViewMethodButton = styled.span`
     }
   }
 `
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+  > div {
+    width: 100%;
+  }
+
+  @media (min-width: 769px) {
+    flex-direction: row;
+    align-items: center;
+    ${({ isSelect }) => isSelect && css`
+      > div {
+        width: calc(100% - 100px);
+      }
+    `}
+  }
+
+  > button {
+    height: 42px;
+    display: flex;
+    align-items: center;
+    svg {
+      min-width: 14px;
+      margin-left: 5px;
+      ${props => props.theme.rtl && css`
+        margin-left: 0px;
+        margin-right: 5px;
+      `}
+    }
+  }
+`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Button, Input, IconButton } from '../../../styles'
+import { Button, Input, IconButton, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
@@ -46,7 +46,7 @@ export const PaymentOptionMethods = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -112,10 +112,10 @@ export const PaymentOptionMethods = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.sites, changesState?.allowed_order_types])
 
@@ -172,14 +172,11 @@ export const PaymentOptionMethods = (props) => {
 
         {paymentTabs === 0 && (
           <>
-            <SandboxWrapper
-              onClick={() => handleChangeSandbox()}
-            >
-              {changesState?.sandbox ?? businessPaymethod?.sandbox ? (
-                <RiCheckboxFill className='fill' />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
               <span>{t('SANDBOX', 'Sandbox')}</span>
             </SandboxWrapper>
             <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')}</FieldName>

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

@@ -29,7 +29,6 @@ export const Container = styled.div`
 `
 
 export const SandboxWrapper = styled.div`
-  cursor: pointer;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -41,15 +40,6 @@ export const SandboxWrapper = styled.div`
       margin-left: 10px;
     `}
   }
-
-  svg {
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-
-    &.fill {
-      color: ${props => props.theme.colors.primary};
-    }
-  }
 `
 
 export const FieldName = styled.p`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Button, Input, IconButton } from '../../../styles'
+import { Button, Input, IconButton, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
@@ -44,7 +44,7 @@ export const PaymentOptionPaypal = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
 
   const actionSidebar = (value) => {
     if (!value) {
@@ -112,10 +112,10 @@ export const PaymentOptionPaypal = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.sites, changesState?.allowed_order_types])
 
@@ -172,14 +172,11 @@ export const PaymentOptionPaypal = (props) => {
 
         {paymentTabs === 0 && (
           <>
-            <SandboxWrapper
-              onClick={() => handleChangeSandbox()}
-            >
-              {changesState?.sandbox ? (
-                <RiCheckboxFill className='fill' />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
               <span>{t('SANDBOX', 'Sandbox')}</span>
             </SandboxWrapper>
             <FieldName>{t('CLIENT_ID', 'Client ID')}</FieldName>

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

@@ -29,7 +29,6 @@ export const Container = styled.div`
 `
 
 export const SandboxWrapper = styled.div`
-  cursor: pointer;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -41,15 +40,6 @@ export const SandboxWrapper = styled.div`
       margin-left: 10px;
     `}
   }
-
-  svg {
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-
-    &.fill {
-      color: ${props => props.theme.colors.primary};
-    }
-  }
 `
 
 export const FieldName = styled.p`

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

@@ -174,7 +174,7 @@ const PaymentOptionSquareUI = (props) => {
             <FormContainer>
               <SandboxWrapper>
                 <Checkbox
-                  defaultChecked={squareData?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                  checked={squareData?.sandbox ?? businessPaymethod?.sandbox ?? false}
                   onChange={e => handleChangeSandbox(e.target.checked)}
                 />
                 <span>{t('SANDBOX', 'Sandbox')}</span>

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Button, Input, IconButton } from '../../../styles'
+import { Button, Input, IconButton, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
@@ -44,7 +44,7 @@ export const PaymentOptionStripeDirect = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -110,10 +110,10 @@ export const PaymentOptionStripeDirect = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.sites, changesState?.allowed_order_types])
 
@@ -170,14 +170,11 @@ export const PaymentOptionStripeDirect = (props) => {
 
         {paymentTabs === 0 && (
           <>
-            <SandboxWrapper
-              onClick={() => handleChangeSandbox()}
-            >
-              {changesState?.sandbox ? (
-                <RiCheckboxFill className='fill' />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
               <span>{t('SANDBOX', 'Sandbox')}</span>
             </SandboxWrapper>
             <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')}</FieldName>

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

@@ -29,7 +29,6 @@ export const Container = styled.div`
 `
 
 export const SandboxWrapper = styled.div`
-  cursor: pointer;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -41,15 +40,6 @@ export const SandboxWrapper = styled.div`
       margin-left: 10px;
     `}
   }
-
-  svg {
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-
-    &.fill {
-      color: ${props => props.theme.colors.primary};
-    }
-  }
 `
 
 export const FieldName = styled.p`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Button, Input, IconButton } from '../../../styles'
+import { Button, Input, IconButton, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
@@ -44,7 +44,7 @@ export const PaymethodOptionPaypalExpress = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -114,10 +114,10 @@ export const PaymethodOptionPaypalExpress = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.sites, changesState?.allowed_order_types])
 
@@ -174,14 +174,11 @@ export const PaymethodOptionPaypalExpress = (props) => {
 
         {paymentTabs === 0 && (
           <>
-            <SandboxWrapper
-              onClick={() => handleChangeSandbox()}
-            >
-              {changesState?.sandbox ? (
-                <RiCheckboxFill className='fill' />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
               <span>{t('SANDBOX', 'Sandbox')}</span>
             </SandboxWrapper>
             <FieldName>{t('CLIENT_ID', 'Client ID')}</FieldName>

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

@@ -29,7 +29,6 @@ export const Container = styled.div`
 `
 
 export const SandboxWrapper = styled.div`
-  cursor: pointer;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -41,15 +40,6 @@ export const SandboxWrapper = styled.div`
       margin-left: 10px;
     `}
   }
-
-  svg {
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-
-    &.fill {
-      color: ${props => props.theme.colors.primary};
-    }
-  }
 `
 
 export const FieldName = styled.p`

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
-import { Button, Input, IconButton } from '../../../styles'
+import { Button, Input, IconButton, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
@@ -44,7 +44,7 @@ export const PaymethodOptionStripeRedirect = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   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 [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
 
   const setPaymethodInfo = (values) => {
     const data = {}
@@ -110,10 +110,10 @@ export const PaymethodOptionStripeRedirect = (props) => {
 
   useEffect(() => {
     if (changesState?.allowed_order_types) {
-      setLocalState({allowed_order_types: changesState?.allowed_order_types})
+      setLocalState({ allowed_order_types: changesState?.allowed_order_types })
     }
     if (changesState?.sites) {
-      setLocalState({sites: changesState?.sites})
+      setLocalState({ sites: changesState?.sites })
     }
   }, [changesState?.sites, changesState?.allowed_order_types])
 
@@ -170,14 +170,11 @@ export const PaymethodOptionStripeRedirect = (props) => {
 
         {paymentTabs === 0 && (
           <>
-            <SandboxWrapper
-              onClick={() => handleChangeSandbox()}
-            >
-              {changesState?.sandbox ? (
-                <RiCheckboxFill className='fill' />
-              ) : (
-                <RiCheckboxBlankLine />
-              )}
+            <SandboxWrapper>
+              <Checkbox
+                checked={changesState?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                onChange={e => handleChangeSandbox(e.target.checked)}
+              />
               <span>{t('SANDBOX', 'Sandbox')}</span>
             </SandboxWrapper>
             <FieldName>{t('PUBLISHABLE_KEY', 'Publishable key')}</FieldName>

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

@@ -29,7 +29,6 @@ export const Container = styled.div`
 `
 
 export const SandboxWrapper = styled.div`
-  cursor: pointer;
   margin-top: 30px;
   display: flex;
   align-items: center;
@@ -41,15 +40,6 @@ export const SandboxWrapper = styled.div`
       margin-left: 10px;
     `}
   }
-
-  svg {
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-
-    &.fill {
-      color: ${props => props.theme.colors.primary};
-    }
-  }
 `
 
 export const FieldName = styled.p`

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

@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton'
 import { useUtils, useLanguage, BusinessDetails as BusinessController } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { Switch } from '../../../styles'
-import { StarFill } from 'react-bootstrap-icons'
+import { StarFill, CheckSquareFill, Square } from 'react-bootstrap-icons'
 
 import {
   SingleBusinessContainer,
@@ -17,7 +17,10 @@ import {
   BusinessLogo,
   BusinessContent,
   BusinessActionContainer,
-  BusinessHeaderContent
+  BusinessHeaderContent,
+  BusinessIdWrapper,
+  CheckBoxWrapper,
+  FeaturedWrapper
 } from './styles'
 
 const SingleBusinessUI = (props) => {
@@ -28,7 +31,9 @@ const SingleBusinessUI = (props) => {
     businessState,
     handleChangeActiveBusiness,
     handleOpenBusinessDetails,
-    detailsBusinessId
+    detailsBusinessId,
+    businessIds,
+    handleChangeBusinessIds
   } = props
 
   const [, t] = useLanguage()
@@ -36,7 +41,10 @@ const SingleBusinessUI = (props) => {
   const theme = useTheme()
 
   const handleClickBusiness = (e) => {
-    const isInvalid = e.target.closest('.business_enable_control') || e.target.closest('.business_actions')
+    const isInvalid = e.target.closest('.business_enable_control') ||
+      e.target.closest('.business_actions') ||
+      e.target.closest('.business-id') ||
+      e.target.closest('.featured')
     if (isInvalid) return
     handleOpenBusinessDetails(businessState?.business)
   }
@@ -48,8 +56,11 @@ const SingleBusinessUI = (props) => {
           {(businessState?.loading || isSkeleton) ? (
             <SingleBusinessContainer>
               <tr>
-                <td className='business-id'>
-                  <Skeleton width={30} />
+                <td>
+                  <BusinessIdWrapper>
+                    <Skeleton width={18} height={18} />
+                    <Skeleton width={40} style={{ margin: '0px 5px' }} />
+                  </BusinessIdWrapper>
                 </td>
                 {allowColumns?.business && (
                   <td className='business'>
@@ -90,8 +101,21 @@ const SingleBusinessUI = (props) => {
               onClick={(e) => handleClickBusiness(e)}
             >
               <tr>
-                <td className='business-id'>
-                  {businessState?.business?.id}
+                <td>
+                  <BusinessIdWrapper>
+                    <CheckBoxWrapper
+                      className='business-id'
+                      isChecked={businessIds.includes(businessState?.business?.id)}
+                      onClick={() => handleChangeBusinessIds(businessState?.business?.id)}
+                    >
+                      {(!businessState?.loading && businessIds.includes(businessState?.business?.id)) ? (
+                        <CheckSquareFill />
+                      ) : (
+                        <Square />
+                      )}
+                    </CheckBoxWrapper>
+                    {businessState?.business?.id}
+                  </BusinessIdWrapper>
                 </td>
                 {allowColumns?.business && (
                   <td className='business'>
@@ -108,11 +132,12 @@ const SingleBusinessUI = (props) => {
                 )}
                 {allowColumns?.featured && (
                   <td>
-                    <InfoBlock>
-                      {businessState?.business?.featured && (
-                        <span>{t('FEATURE', 'Featured')}</span>
-                      )}
-                    </InfoBlock>
+                    <FeaturedWrapper className='featured'>
+                      <Switch
+                        defaultChecked={businessState?.business?.featured}
+                        onChange={(enabled) => handleChangeActiveBusiness(enabled, true)}
+                      />
+                    </FeaturedWrapper>
                   </td>
                 )}
                 {allowColumns?.ratings && (