ordering-ui-admin-external 1.2.0 → 1.3.1

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

@@ -9,6 +9,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -31,7 +32,8 @@ export const PaymentOption = (props) => {
     actionState,
     handleSaveClick,
     businessPaymethod,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -151,7 +153,8 @@ export const PaymentOption = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -167,7 +170,8 @@ export const PaymentOption = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -182,13 +186,13 @@ export const PaymentOption = (props) => {
         <Button
           borderRadius='5px'
           color='primary'
-          disabled={actionState.loading || Object.keys(changesState).length === 0}
+          disabled={isDisabledFeature || actionState.loading || Object.keys(changesState).length === 0}
           onClick={() => handleSaveClick(businessPaymethod.id)}
         >
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
-
+      {isDisabledFeature && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -114,6 +114,14 @@ export const TabOption = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
+
+  ${({ isDisabledFeature }) => isDisabledFeature && css`
+      cursor: not-allowed;
+      opacity: 0.4;
+      &:hover {
+        background-color: ${props => props.theme.colors.white};
+      }
+  `}
 `
 
 export const TabOptionName = styled.span`

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

@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -37,7 +38,8 @@ export const PaymentOptionMethods = (props) => {
     businessPaymethod,
     handleDeletePaymethod,
     id,
-    title
+    title,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -223,7 +225,8 @@ export const PaymentOptionMethods = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -239,7 +242,8 @@ export const PaymentOptionMethods = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -260,6 +264,7 @@ export const PaymentOptionMethods = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -89,6 +89,14 @@ export const TabOption = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
+  
+  ${({ isDisabledFeature }) => isDisabledFeature && css`
+      cursor: not-allowed;
+      opacity: 0.4;
+      &:hover {
+        background-color: ${props => props.theme.colors.white};
+      }
+  `}
 `
 
 export const TabOptionName = styled.span`

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

@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -35,7 +36,8 @@ export const PaymentOptionPaypal = (props) => {
     handleSaveClick,
     businessPaymethod,
     handleChangeBusinessPaymentState,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -223,7 +225,8 @@ export const PaymentOptionPaypal = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -239,7 +242,8 @@ export const PaymentOptionPaypal = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -260,6 +264,7 @@ export const PaymentOptionPaypal = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -11,6 +11,7 @@ import { TabOption, TabOptionName } from '../PaymentOptionStripeDirect/styles'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
 import SiSquare from '@meronex/icons/si/SiSquare'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -40,7 +41,8 @@ const PaymentOptionSquareUI = (props) => {
     handleSavePaymethod,
     handleChangeDataInput,
     handleChangeSanboxDataInput,
-    handleChangeSandbox
+    handleChangeSandbox,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -110,190 +112,195 @@ const PaymentOptionSquareUI = (props) => {
   }, [actionState?.error])
 
   return (
-    <Container id='payment_method_square'>
-      <Header>
-        <h1>{businessPaymethod?.paymethod?.name}</h1>
-        <ActionSelectorWrapper>
-          <DropdownButton
-            menuAlign={theme?.rtl ? 'left' : 'right'}
-            title={<ThreeDots />}
-            id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
-          >
-            <Dropdown.Item
-              onClick={() => onClickDeletePaymethod()}
+    <>
+      <Container id='payment_method_square'>
+        <Header>
+          <h1>{businessPaymethod?.paymethod?.name}</h1>
+          <ActionSelectorWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
             >
-              {t('DELETE', 'Delete')}
-            </Dropdown.Item>
-          </DropdownButton>
-        </ActionSelectorWrapper>
-        <CloseButton>
-          <IconButton
-            color='black'
-            onClick={() => onClose()}
-          >
-            <XLg />
-          </IconButton>
-        </CloseButton>
-      </Header>
+              <Dropdown.Item
+                onClick={() => onClickDeletePaymethod()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </ActionSelectorWrapper>
+          <CloseButton>
+            <IconButton
+              color='black'
+              onClick={() => onClose()}
+            >
+              <XLg />
+            </IconButton>
+          </CloseButton>
+        </Header>
 
-      <TabsContainer>
-        <Tab
-          active={paymentTabs === 0}
-          onClick={() => setPaymentTabs(0)}
-        >
-          {t('GENERAL', 'General')}
-        </Tab>
-        {sitesState?.sites?.length > 0 && (
+        <TabsContainer>
           <Tab
-            active={paymentTabs === 1}
-            onClick={() => setPaymentTabs(1)}
+            active={paymentTabs === 0}
+            onClick={() => setPaymentTabs(0)}
           >
-            {t('CHANNELS', 'Channels')}
+            {t('GENERAL', 'General')}
           </Tab>
+          {sitesState?.sites?.length > 0 && (
+            <Tab
+              active={paymentTabs === 1}
+              onClick={() => setPaymentTabs(1)}
+            >
+              {t('CHANNELS', 'Channels')}
+            </Tab>
+          )}
+          <Tab
+            active={paymentTabs === 2}
+            onClick={() => setPaymentTabs(2)}
+          >
+            {t('ORDER_TYPE', 'Order type')}
+          </Tab>
+        </TabsContainer>
+        {paymentTabs === 0 && (
+          <SquareInfoContainer>
+            <SquareButtonWrapper>
+              <Button
+                borderRadius='8px'
+                color='primary'
+                onClick={handleConnectSquare}
+              >
+                <SiSquare />
+                {t('CONNECT_WITH_SQUARE', 'Connect with Square')}
+              </Button>
+            </SquareButtonWrapper>
+            <FormContainer>
+              <SandboxWrapper>
+                <Checkbox
+                  defaultChecked={squareData?.sandbox ?? businessPaymethod?.sandbox ?? false}
+                  onChange={e => handleChangeSandbox(e.target.checked)}
+                />
+                <span>{t('SANDBOX', 'Sandbox')}</span>
+              </SandboxWrapper>
+              <FormController>
+                <label>{t('APPLICATION_ID', 'Application Id')}</label>
+                <Input
+                  name='application_id'
+                  disabled={actionState?.loading}
+                  value={squareData?.data?.application_id ?? businessPaymethod?.data?.application_id ?? ''}
+                  onChange={handleChangeDataInput}
+                />
+              </FormController>
+              <FormController>
+                <label>{t('LOCATION_ID', 'Location Id')}</label>
+                <Input
+                  name='location_id'
+                  disabled={actionState?.loading}
+                  value={squareData?.data?.location_id ?? businessPaymethod?.data?.location_id ?? ''}
+                  onChange={handleChangeDataInput}
+                />
+              </FormController>
+              <FormController>
+                <label>{t('CLIENT_SECRET', 'Client secret')}</label>
+                <Input
+                  name='client_secret'
+                  disabled={actionState?.loading}
+                  value={squareData?.data?.client_secret ?? businessPaymethod?.data?.client_secret ?? ''}
+                  onChange={handleChangeDataInput}
+                />
+              </FormController>
+              <FormController>
+                <label>{t('APPLICATION_ID', 'Application Id')} ({t('SANDBOX', 'Sandbox')})</label>
+                <Input
+                  name='application_id'
+                  disabled={actionState?.loading}
+                  value={squareData?.data_sandbox?.application_id ?? businessPaymethod?.data_sandbox?.application_id ?? ''}
+                  onChange={handleChangeSanboxDataInput}
+                />
+              </FormController>
+              <FormController>
+                <label>{t('LOCATION_ID', 'Location Id')} ({t('SANDBOX', 'Sandbox')})</label>
+                <Input
+                  name='location_id'
+                  disabled={actionState?.loading}
+                  value={squareData?.data_sandbox?.location_id ?? businessPaymethod?.data_sandbox?.location_id ?? ''}
+                  onChange={handleChangeSanboxDataInput}
+                />
+              </FormController>
+              <FormController>
+                <label>{t('CLIENT_SECRET', 'Client secret')} ({t('SANDBOX', 'Sandbox')})</label>
+                <Input
+                  name='client_secret'
+                  disabled={actionState?.loading}
+                  value={squareData?.data_sandbox?.client_secret ?? businessPaymethod?.data_sandbox?.client_secret ?? ''}
+                  onChange={handleChangeSanboxDataInput}
+                />
+              </FormController>
+              <Button
+                borderRadius='8px'
+                color='primary'
+                onClick={() => handleSavePaymethod(businessPaymethod?.id)}
+              >
+                {t('SAVE', 'Save')}
+              </Button>
+            </FormContainer>
+          </SquareInfoContainer>
         )}
-        <Tab
-          active={paymentTabs === 2}
-          onClick={() => setPaymentTabs(2)}
-        >
-          {t('ORDER_TYPE', 'Order type')}
-        </Tab>
-      </TabsContainer>
-      {paymentTabs === 0 && (
-        <SquareInfoContainer>
-          <SquareButtonWrapper>
-            <Button
-              borderRadius='8px'
-              color='primary'
-              onClick={handleConnectSquare}
+        {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
+          sitesState?.sites.map(site => (
+            <TabOption
+              key={site.id}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
             >
-              <SiSquare />
-              {t('CONNECT_WITH_SQUARE', 'Connect with Square')}
-            </Button>
-          </SquareButtonWrapper>
-          <FormContainer>
-            <SandboxWrapper>
-              <Checkbox
-                defaultChecked={squareData?.sandbox ?? businessPaymethod?.sandbox ?? false}
-                onChange={e => handleChangeSandbox(e.target.checked)}
-              />
-              <span>{t('SANDBOX', 'Sandbox')}</span>
-            </SandboxWrapper>
-            <FormController>
-              <label>{t('APPLICATION_ID', 'Application Id')}</label>
-              <Input
-                name='application_id'
-                disabled={actionState?.loading}
-                value={squareData?.data?.application_id ?? businessPaymethod?.data?.application_id ?? ''}
-                onChange={handleChangeDataInput}
-              />
-            </FormController>
-            <FormController>
-              <label>{t('LOCATION_ID', 'Location Id')}</label>
-              <Input
-                name='location_id'
-                disabled={actionState?.loading}
-                value={squareData?.data?.location_id ?? businessPaymethod?.data?.location_id ?? ''}
-                onChange={handleChangeDataInput}
-              />
-            </FormController>
-            <FormController>
-              <label>{t('CLIENT_SECRET', 'Client secret')}</label>
-              <Input
-                name='client_secret'
-                disabled={actionState?.loading}
-                value={squareData?.data?.client_secret ?? businessPaymethod?.data?.client_secret ?? ''}
-                onChange={handleChangeDataInput}
-              />
-            </FormController>
-            <FormController>
-              <label>{t('APPLICATION_ID', 'Application Id')} ({t('SANDBOX', 'Sandbox')})</label>
-              <Input
-                name='application_id'
-                disabled={actionState?.loading}
-                value={squareData?.data_sandbox?.application_id ?? businessPaymethod?.data_sandbox?.application_id ?? ''}
-                onChange={handleChangeSanboxDataInput}
-              />
-            </FormController>
-            <FormController>
-              <label>{t('LOCATION_ID', 'Location Id')} ({t('SANDBOX', 'Sandbox')})</label>
-              <Input
-                name='location_id'
-                disabled={actionState?.loading}
-                value={squareData?.data_sandbox?.location_id ?? businessPaymethod?.data_sandbox?.location_id ?? ''}
-                onChange={handleChangeSanboxDataInput}
-              />
-            </FormController>
-            <FormController>
-              <label>{t('CLIENT_SECRET', 'Client secret')} ({t('SANDBOX', 'Sandbox')})</label>
-              <Input
-                name='client_secret'
-                disabled={actionState?.loading}
-                value={squareData?.data_sandbox?.client_secret ?? businessPaymethod?.data_sandbox?.client_secret ?? ''}
-                onChange={handleChangeSanboxDataInput}
-              />
-            </FormController>
-            <Button
-              borderRadius='8px'
-              color='primary'
-              onClick={() => handleSavePaymethod(businessPaymethod?.id)}
+              {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{site.name}</TabOptionName>
+            </TabOption>
+          ))
+        )}
+        {paymentTabs === 2 && (
+          orderTypes.map(type => (
+            <TabOption
+              key={type.value}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
-              {t('SAVE', 'Save')}
-            </Button>
-          </FormContainer>
-        </SquareInfoContainer>
-      )}
-      {paymentTabs === 1 && sitesState?.sites?.length > 0 && (
-        sitesState?.sites.map(site => (
-          <TabOption
-            key={site.id}
-            onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
-          >
-            {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
-              <RiCheckboxFill className='fill' />
-            ) : (
-              <RiCheckboxBlankLine />
-            )}
-            <TabOptionName>{site.name}</TabOptionName>
-          </TabOption>
-        ))
-      )}
-      {paymentTabs === 2 && (
-        orderTypes.map(type => (
-          <TabOption
-            key={type.value}
-            onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
-          >
-            {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
-              <RiCheckboxFill className='fill' />
-            ) : (
-              <RiCheckboxBlankLine />
-            )}
-            <TabOptionName>{type.text}</TabOptionName>
-          </TabOption>
-        ))
-      )}
+              {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
+                <RiCheckboxFill className='fill' />
+              ) : (
+                <RiCheckboxBlankLine />
+              )}
+              <TabOptionName>{type.text}</TabOptionName>
+            </TabOption>
+          ))
+        )}
 
-      <Confirm
-        width='700px'
-        title={t('WEB_APPNAME', 'Ordering')}
-        content={confirm.content}
-        acceptText={t('ACCEPT', 'Accept')}
-        open={confirm.open}
-        onClose={() => setConfirm({ ...confirm, open: false })}
-        onCancel={() => setConfirm({ ...confirm, open: false })}
-        onAccept={confirm.handleOnAccept}
-        closeOnBackdrop={false}
-      />
-      <Alert
-        title={t('WEB_APPNAME', 'Ordering')}
-        content={alertState.content}
-        acceptText={t('ACCEPT', 'Accept')}
-        open={alertState.open}
-        onClose={() => setAlertState({ open: false, content: [] })}
-        onAccept={() => setAlertState({ open: false, content: [] })}
-        closeOnBackdrop={false}
-      />
-    </Container>
+        <Confirm
+          width='700px'
+          title={t('WEB_APPNAME', 'Ordering')}
+          content={confirm.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={confirm.open}
+          onClose={() => setConfirm({ ...confirm, open: false })}
+          onCancel={() => setConfirm({ ...confirm, open: false })}
+          onAccept={confirm.handleOnAccept}
+          closeOnBackdrop={false}
+        />
+        <Alert
+          title={t('WEB_APPNAME', 'Ordering')}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => setAlertState({ open: false, content: [] })}
+          onAccept={() => setAlertState({ open: false, content: [] })}
+          closeOnBackdrop={false}
+        />
+      </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
+    </>
   )
 }
 

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

@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   Container,
@@ -35,7 +36,8 @@ export const PaymentOptionStripeDirect = (props) => {
     handleChangeInput,
     handleSaveClick,
     businessPaymethod,
-    handleDeletePaymethod
+    handleDeletePaymethod,
+    isDisabledFeature
   } = props
 
   const theme = useTheme()
@@ -221,7 +223,8 @@ export const PaymentOptionStripeDirect = (props) => {
           sitesState?.sites.map(site => (
             <TabOption
               key={site.id}
-              onClick={() => setPaymethodInfo({ key: 'sites', value: site.id })}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'sites', value: site.id })}
+              isDisabledFeature={isDisabledFeature}
             >
               {(changesState?.sites ?? businessPaymethod?.sites?.map(s => s.id))?.includes(site.id) ? (
                 <RiCheckboxFill className='fill' />
@@ -237,7 +240,8 @@ export const PaymentOptionStripeDirect = (props) => {
           orderTypes.map(type => (
             <TabOption
               key={type.value}
-              onClick={() => setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
+              isDisabledFeature={isDisabledFeature}
+              onClick={() => !isDisabledFeature && setPaymethodInfo({ key: 'allowed_order_types', value: type.value })}
             >
               {(changesState?.allowed_order_types ?? businessPaymethod?.allowed_order_types)?.includes(type.value) ? (
                 <RiCheckboxFill className='fill' />
@@ -258,6 +262,7 @@ export const PaymentOptionStripeDirect = (props) => {
           {actionState.loading ? t('LOADING', 'Loading') : t('SAVE', 'Save')}
         </Button>
       </Container>
+      {(isDisabledFeature && (paymentTabs === 1 || paymentTabs === 2)) && (<DisabledFeatureAlert />)}
       <Confirm
         width='700px'
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -89,6 +89,14 @@ export const TabOption = styled.div`
       color: ${props => props.theme.colors.primary};
     }
   }
+
+  ${({ isDisabledFeature }) => isDisabledFeature && css`
+      cursor: not-allowed;
+      opacity: 0.4;
+      &:hover {
+        background-color: ${props => props.theme.colors.white};
+      }
+  `}
 `
 
 export const TabOptionName = styled.span`