From 1cc727e107335eb25f0a5e240ccdf59c0a46f62c Mon Sep 17 00:00:00 2001
From: Alexandre Monjol <alexandre.monjol@gmail.com>
Date: Wed, 22 May 2024 19:08:20 +0200
Subject: [PATCH] feat: add rbac guards for integrations page

---
 .../settings/AdyenIntegrationDetails.tsx      | 256 +++++++++-------
 src/pages/settings/AdyenIntegrations.tsx      | 136 +++++----
 .../settings/GocardlessIntegrationDetails.tsx | 287 ++++++++++--------
 src/pages/settings/GocardlessIntegrations.tsx | 136 +++++----
 .../settings/LagoTaxManagementIntegration.tsx |  41 +--
 .../settings/StripeIntegrationDetails.tsx     | 260 +++++++++-------
 src/pages/settings/StripeIntegrations.tsx     | 137 +++++----
 7 files changed, 692 insertions(+), 561 deletions(-)

diff --git a/src/pages/settings/AdyenIntegrationDetails.tsx b/src/pages/settings/AdyenIntegrationDetails.tsx
index d14c15962..405e185e5 100644
--- a/src/pages/settings/AdyenIntegrationDetails.tsx
+++ b/src/pages/settings/AdyenIntegrationDetails.tsx
@@ -36,6 +36,7 @@ import {
   useGetAdyenIntegrationsDetailsQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import Adyen from '~/public/images/adyen.svg'
 import { MenuPopper, NAV_HEIGHT, PageHeader, PopperOpener, theme } from '~/styles'
 
@@ -85,6 +86,7 @@ const AdyenIntegrationDetails = () => {
   const deleteDialogRef = useRef<DeleteAdyenIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
   const { translate } = useInternationalization()
+  const { hasPermissions } = usePermissions()
   const { data, loading } = useGetAdyenIntegrationsDetailsQuery({
     variables: {
       id: integrationId as string,
@@ -101,6 +103,8 @@ const AdyenIntegrationDetails = () => {
       navigate(INTEGRATIONS_ROUTE)
     }
   }
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
 
   return (
     <>
@@ -119,46 +123,52 @@ const AdyenIntegrationDetails = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Popper
-          PopperProps={{ placement: 'bottom-end' }}
-          opener={
-            <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
-          }
-        >
-          {({ closePopper }) => (
-            <MenuPopper>
-              <Button
-                variant="quaternary"
-                fullWidth
-                align="left"
-                onClick={() => {
-                  addAdyenDialogRef.current?.openDialog({
-                    provider: adyenPaymentProvider,
-                    deleteModalRef: deleteDialogRef,
-                    deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dac')}
-              </Button>
-              <Button
-                variant="quaternary"
-                align="left"
-                fullWidth
-                onClick={() => {
-                  deleteDialogRef.current?.openDialog({
-                    provider: adyenPaymentProvider,
-                    callback: deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dad')}
-              </Button>
-            </MenuPopper>
-          )}
-        </Popper>
+        {(canEditIntegration || canDeleteIntegration) && (
+          <Popper
+            PopperProps={{ placement: 'bottom-end' }}
+            opener={
+              <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
+            }
+          >
+            {({ closePopper }) => (
+              <MenuPopper>
+                {canEditIntegration && (
+                  <Button
+                    fullWidth
+                    variant="quaternary"
+                    align="left"
+                    onClick={() => {
+                      addAdyenDialogRef.current?.openDialog({
+                        provider: adyenPaymentProvider,
+                        deleteModalRef: deleteDialogRef,
+                        deleteDialogCallback,
+                      })
+                      closePopper()
+                    }}
+                  >
+                    {translate('text_65845f35d7d69c3ab4793dac')}
+                  </Button>
+                )}
+                {canDeleteIntegration && (
+                  <Button
+                    variant="quaternary"
+                    align="left"
+                    fullWidth
+                    onClick={() => {
+                      deleteDialogRef.current?.openDialog({
+                        provider: adyenPaymentProvider,
+                        callback: deleteDialogCallback,
+                      })
+                      closePopper()
+                    }}
+                  >
+                    {translate('text_65845f35d7d69c3ab4793dad')}
+                  </Button>
+                )}
+              </MenuPopper>
+            )}
+          </Popper>
+        )}
       </PageHeader>
 
       <MainInfos>
@@ -193,19 +203,22 @@ const AdyenIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Typography variant="subhead">{translate('text_645d071272418a14c1c76a9a')}</Typography>
-            <Button
-              variant="quaternary"
-              disabled={loading}
-              onClick={() => {
-                addAdyenDialogRef.current?.openDialog({
-                  provider: adyenPaymentProvider,
-                  deleteModalRef: deleteDialogRef,
-                  deleteDialogCallback,
-                })
-              }}
-            >
-              {translate('text_62b1edddbf5f461ab9712787')}
-            </Button>
+
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                disabled={loading}
+                onClick={() => {
+                  addAdyenDialogRef.current?.openDialog({
+                    provider: adyenPaymentProvider,
+                    deleteModalRef: deleteDialogRef,
+                    deleteDialogCallback,
+                  })
+                }}
+              >
+                {translate('text_62b1edddbf5f461ab9712787')}
+              </Button>
+            )}
           </InlineTitle>
 
           <>
@@ -310,19 +323,21 @@ const AdyenIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Typography variant="subhead">{translate('text_65367cb78324b77fcb6af21c')}</Typography>
-            <Button
-              variant="quaternary"
-              disabled={!!adyenPaymentProvider?.successRedirectUrl}
-              onClick={() => {
-                successRedirectUrlDialogRef.current?.openDialog({
-                  mode: 'Add',
-                  type: 'Adyen',
-                  provider: adyenPaymentProvider,
-                })
-              }}
-            >
-              {translate('text_65367cb78324b77fcb6af20e')}
-            </Button>
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                disabled={!!adyenPaymentProvider?.successRedirectUrl}
+                onClick={() => {
+                  successRedirectUrlDialogRef.current?.openDialog({
+                    mode: 'Add',
+                    type: 'Adyen',
+                    provider: adyenPaymentProvider,
+                  })
+                }}
+              >
+                {translate('text_65367cb78324b77fcb6af20e')}
+              </Button>
+            )}
           </InlineTitle>
 
           {loading ? (
@@ -353,57 +368,64 @@ const AdyenIntegrationDetails = () => {
                       </Typography>
                     </div>
                   </SuccessPaumentRedirectUrlItemLeft>
-                  <LocalPopper
-                    PopperProps={{ placement: 'bottom-end' }}
-                    opener={({ isOpen }) => (
-                      <PopperOpener>
-                        <Tooltip
-                          placement="top-end"
-                          disableHoverListener={isOpen}
-                          title={translate('text_629728388c4d2300e2d3810d')}
-                        >
-                          <Button icon="dots-horizontal" variant="quaternary" />
-                        </Tooltip>
-                      </PopperOpener>
-                    )}
-                  >
-                    {({ closePopper }) => (
-                      <MenuPopper>
-                        <Button
-                          startIcon="pen"
-                          variant="quaternary"
-                          fullWidth
-                          align="left"
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Edit',
-                              type: 'Adyen',
-                              provider: adyenPaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af24d')}
-                        </Button>
-                        <Button
-                          startIcon="trash"
-                          variant="quaternary"
-                          align="left"
-                          fullWidth
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Delete',
-                              type: 'Adyen',
-                              provider: adyenPaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af243')}
-                        </Button>
-                      </MenuPopper>
-                    )}
-                  </LocalPopper>
+                  {(canEditIntegration || canDeleteIntegration) && (
+                    <LocalPopper
+                      PopperProps={{ placement: 'bottom-end' }}
+                      opener={({ isOpen }) => (
+                        <PopperOpener>
+                          <Tooltip
+                            placement="top-end"
+                            disableHoverListener={isOpen}
+                            title={translate('text_629728388c4d2300e2d3810d')}
+                          >
+                            <Button icon="dots-horizontal" variant="quaternary" />
+                          </Tooltip>
+                        </PopperOpener>
+                      )}
+                    >
+                      {({ closePopper }) => (
+                        <MenuPopper>
+                          {canEditIntegration && (
+                            <Button
+                              startIcon="pen"
+                              variant="quaternary"
+                              fullWidth
+                              align="left"
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Edit',
+                                  type: 'Adyen',
+                                  provider: adyenPaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af24d')}
+                            </Button>
+                          )}
+
+                          {canDeleteIntegration && (
+                            <Button
+                              startIcon="trash"
+                              variant="quaternary"
+                              align="left"
+                              fullWidth
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Delete',
+                                  type: 'Adyen',
+                                  provider: adyenPaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af243')}
+                            </Button>
+                          )}
+                        </MenuPopper>
+                      )}
+                    </LocalPopper>
+                  )}
                 </SuccessPaumentRedirectUrlItem>
               )}
             </>
diff --git a/src/pages/settings/AdyenIntegrations.tsx b/src/pages/settings/AdyenIntegrations.tsx
index 5faa2d544..d3bd0d035 100644
--- a/src/pages/settings/AdyenIntegrations.tsx
+++ b/src/pages/settings/AdyenIntegrations.tsx
@@ -37,6 +37,7 @@ import {
   useGetAdyenIntegrationsListQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import Adyen from '~/public/images/adyen.svg'
 import {
   ItemContainer,
@@ -75,6 +76,7 @@ gql`
 
 const AdyenIntegrations = () => {
   const navigate = useNavigate()
+  const { hasPermissions } = usePermissions()
   const addAdyenDialogRef = useRef<AddAdyenDialogRef>(null)
   const deleteDialogRef = useRef<DeleteAdyenIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
@@ -86,6 +88,10 @@ const AdyenIntegrations = () => {
   const deleteDialogCallback =
     connections && connections.length === 1 ? () => navigate(INTEGRATIONS_ROUTE) : undefined
 
+  const canCreateIntegration = hasPermissions(['organizationIntegrationsCreate'])
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
+
   return (
     <>
       <PageHeader $withSide>
@@ -103,14 +109,17 @@ const AdyenIntegrations = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Button
-          variant="primary"
-          onClick={() => {
-            addAdyenDialogRef.current?.openDialog()
-          }}
-        >
-          {translate('text_65846763e6140b469140e235')}
-        </Button>
+
+        {canCreateIntegration && (
+          <Button
+            variant="primary"
+            onClick={() => {
+              addAdyenDialogRef.current?.openDialog()
+            }}
+          >
+            {translate('text_65846763e6140b469140e235')}
+          </Button>
+        )}
       </PageHeader>
       <MainInfos>
         {loading ? (
@@ -181,58 +190,65 @@ const AdyenIntegrations = () => {
                           <ButtonMock />
                         </Stack>
                       </LocalListItemLink>
-                      <Popper
-                        PopperProps={{ placement: 'bottom-end' }}
-                        opener={({ isOpen }) => (
-                          <LocalPopperOpener>
-                            <Tooltip
-                              placement="top-end"
-                              disableHoverListener={isOpen}
-                              title={translate('text_626162c62f790600f850b7b6')}
-                            >
-                              <Button
-                                icon="dots-horizontal"
-                                variant="quaternary"
-                                data-test="plan-item-options"
-                              />
-                            </Tooltip>
-                          </LocalPopperOpener>
-                        )}
-                      >
-                        {({ closePopper }) => (
-                          <MenuPopper>
-                            <Button
-                              startIcon="pen"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                addAdyenDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  deleteModalRef: deleteDialogRef,
-                                  deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_65845f35d7d69c3ab4793dac')}
-                            </Button>
-                            <Button
-                              startIcon="trash"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                deleteDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  callback: deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_645d071272418a14c1c76a81')}
-                            </Button>
-                          </MenuPopper>
-                        )}
-                      </Popper>
+                      {(canEditIntegration || canDeleteIntegration) && (
+                        <Popper
+                          PopperProps={{ placement: 'bottom-end' }}
+                          opener={({ isOpen }) => (
+                            <LocalPopperOpener>
+                              <Tooltip
+                                placement="top-end"
+                                disableHoverListener={isOpen}
+                                title={translate('text_626162c62f790600f850b7b6')}
+                              >
+                                <Button
+                                  icon="dots-horizontal"
+                                  variant="quaternary"
+                                  data-test="plan-item-options"
+                                />
+                              </Tooltip>
+                            </LocalPopperOpener>
+                          )}
+                        >
+                          {({ closePopper }) => (
+                            <MenuPopper>
+                              {canEditIntegration && (
+                                <Button
+                                  startIcon="pen"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    addAdyenDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      deleteModalRef: deleteDialogRef,
+                                      deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_65845f35d7d69c3ab4793dac')}
+                                </Button>
+                              )}
+
+                              {canDeleteIntegration && (
+                                <Button
+                                  startIcon="trash"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    deleteDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      callback: deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_645d071272418a14c1c76a81')}
+                                </Button>
+                              )}
+                            </MenuPopper>
+                          )}
+                        </Popper>
+                      )}
                     </ItemContainer>
                   )
                 })}
diff --git a/src/pages/settings/GocardlessIntegrationDetails.tsx b/src/pages/settings/GocardlessIntegrationDetails.tsx
index ba5ab4a1e..f53b20bba 100644
--- a/src/pages/settings/GocardlessIntegrationDetails.tsx
+++ b/src/pages/settings/GocardlessIntegrationDetails.tsx
@@ -39,6 +39,7 @@ import {
   useGetGocardlessIntegrationsDetailsQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import GoCardless from '~/public/images/gocardless-large.svg'
 import { MenuPopper, NAV_HEIGHT, PageHeader, PopperOpener, theme } from '~/styles'
 
@@ -80,6 +81,7 @@ const GocardlessIntegrationDetails = () => {
   const navigate = useNavigate()
   const { integrationId } = useParams()
   const { lagoOauthProxyUrl } = envGlobalVar()
+  const { hasPermissions } = usePermissions()
   const addDialogRef = useRef<AddGocardlessDialogRef>(null)
   const deleteDialogRef = useRef<DeleteGocardlessIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
@@ -102,6 +104,9 @@ const GocardlessIntegrationDetails = () => {
     }
   }
 
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
+
   return (
     <div>
       <PageHeader $withSide>
@@ -119,59 +124,68 @@ const GocardlessIntegrationDetails = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Popper
-          PopperProps={{ placement: 'bottom-end' }}
-          opener={
-            <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
-          }
-        >
-          {({ closePopper }) => (
-            <MenuPopper>
-              <Button
-                variant="quaternary"
-                fullWidth
-                align="left"
-                onClick={() => {
-                  addDialogRef.current?.openDialog({
-                    provider: gocardlessPaymentProvider,
-                    deleteModalRef: deleteDialogRef,
-                    deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dac')}
-              </Button>
-              <Button
-                variant="quaternary"
-                fullWidth
-                align="left"
-                onClick={() => {
-                  window.open(
-                    `${lagoOauthProxyUrl}/gocardless/auth?lago_name=${gocardlessPaymentProvider.name}&lago_code=${gocardlessPaymentProvider.code}`,
-                  )
-                  closePopper()
-                }}
-              >
-                {translate('text_658567dffff71e31ea5f0d33')}
-              </Button>
-              <Button
-                variant="quaternary"
-                align="left"
-                fullWidth
-                onClick={() => {
-                  deleteDialogRef.current?.openDialog({
-                    provider: gocardlessPaymentProvider,
-                    callback: deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dad')}
-              </Button>
-            </MenuPopper>
-          )}
-        </Popper>
+        {(canEditIntegration || canDeleteIntegration) && (
+          <Popper
+            PopperProps={{ placement: 'bottom-end' }}
+            opener={
+              <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
+            }
+          >
+            {({ closePopper }) => (
+              <MenuPopper>
+                {canEditIntegration && (
+                  <>
+                    <Button
+                      variant="quaternary"
+                      fullWidth
+                      align="left"
+                      onClick={() => {
+                        addDialogRef.current?.openDialog({
+                          provider: gocardlessPaymentProvider,
+                          deleteModalRef: deleteDialogRef,
+                          deleteDialogCallback,
+                        })
+                        closePopper()
+                      }}
+                    >
+                      {translate('text_65845f35d7d69c3ab4793dac')}
+                    </Button>
+                    <Button
+                      variant="quaternary"
+                      fullWidth
+                      align="left"
+                      onClick={() => {
+                        window.open(
+                          `${lagoOauthProxyUrl}/gocardless/auth?lago_name=${gocardlessPaymentProvider.name}&lago_code=${gocardlessPaymentProvider.code}`,
+                        )
+                        closePopper()
+                      }}
+                    >
+                      {translate('text_658567dffff71e31ea5f0d33')}
+                    </Button>
+                  </>
+                )}
+
+                {canDeleteIntegration && (
+                  <Button
+                    variant="quaternary"
+                    align="left"
+                    fullWidth
+                    onClick={() => {
+                      deleteDialogRef.current?.openDialog({
+                        provider: gocardlessPaymentProvider,
+                        callback: deleteDialogCallback,
+                      })
+                      closePopper()
+                    }}
+                  >
+                    {translate('text_65845f35d7d69c3ab4793dad')}
+                  </Button>
+                )}
+              </MenuPopper>
+            )}
+          </Popper>
+        )}
       </PageHeader>
       <MainInfos>
         {loading ? (
@@ -207,19 +221,22 @@ const GocardlessIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Title variant="subhead">{translate('text_637f813d31381b1ed90ab315')}</Title>
-            <Button
-              variant="quaternary"
-              align="left"
-              onClick={() => {
-                addDialogRef.current?.openDialog({
-                  provider: gocardlessPaymentProvider,
-                  deleteModalRef: deleteDialogRef,
-                  deleteDialogCallback,
-                })
-              }}
-            >
-              {translate('text_62b1edddbf5f461ab9712787')}
-            </Button>
+
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                align="left"
+                onClick={() => {
+                  addDialogRef.current?.openDialog({
+                    provider: gocardlessPaymentProvider,
+                    deleteModalRef: deleteDialogRef,
+                    deleteDialogCallback,
+                  })
+                }}
+              >
+                {translate('text_62b1edddbf5f461ab9712787')}
+              </Button>
+            )}
           </InlineTitle>
           {loading ? (
             <>
@@ -303,19 +320,22 @@ const GocardlessIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Typography variant="subhead">{translate('text_65367cb78324b77fcb6af21c')}</Typography>
-            <Button
-              variant="quaternary"
-              disabled={!!gocardlessPaymentProvider?.successRedirectUrl}
-              onClick={() => {
-                successRedirectUrlDialogRef.current?.openDialog({
-                  mode: 'Add',
-                  type: 'GoCardless',
-                  provider: gocardlessPaymentProvider,
-                })
-              }}
-            >
-              {translate('text_65367cb78324b77fcb6af20e')}
-            </Button>
+
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                disabled={!!gocardlessPaymentProvider?.successRedirectUrl}
+                onClick={() => {
+                  successRedirectUrlDialogRef.current?.openDialog({
+                    mode: 'Add',
+                    type: 'GoCardless',
+                    provider: gocardlessPaymentProvider,
+                  })
+                }}
+              >
+                {translate('text_65367cb78324b77fcb6af20e')}
+              </Button>
+            )}
           </InlineTitle>
 
           {loading ? (
@@ -346,57 +366,64 @@ const GocardlessIntegrationDetails = () => {
                       </Typography>
                     </div>
                   </SuccessPaumentRedirectUrlItemLeft>
-                  <LocalPopper
-                    PopperProps={{ placement: 'bottom-end' }}
-                    opener={({ isOpen }) => (
-                      <PopperOpener>
-                        <Tooltip
-                          placement="top-end"
-                          disableHoverListener={isOpen}
-                          title={translate('text_629728388c4d2300e2d3810d')}
-                        >
-                          <Button icon="dots-horizontal" variant="quaternary" />
-                        </Tooltip>
-                      </PopperOpener>
-                    )}
-                  >
-                    {({ closePopper }) => (
-                      <MenuPopper>
-                        <Button
-                          startIcon="pen"
-                          variant="quaternary"
-                          fullWidth
-                          align="left"
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Edit',
-                              type: 'GoCardless',
-                              provider: gocardlessPaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af24d')}
-                        </Button>
-                        <Button
-                          startIcon="trash"
-                          variant="quaternary"
-                          align="left"
-                          fullWidth
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Delete',
-                              type: 'GoCardless',
-                              provider: gocardlessPaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af243')}
-                        </Button>
-                      </MenuPopper>
-                    )}
-                  </LocalPopper>
+                  {(canEditIntegration || canDeleteIntegration) && (
+                    <LocalPopper
+                      PopperProps={{ placement: 'bottom-end' }}
+                      opener={({ isOpen }) => (
+                        <PopperOpener>
+                          <Tooltip
+                            placement="top-end"
+                            disableHoverListener={isOpen}
+                            title={translate('text_629728388c4d2300e2d3810d')}
+                          >
+                            <Button icon="dots-horizontal" variant="quaternary" />
+                          </Tooltip>
+                        </PopperOpener>
+                      )}
+                    >
+                      {({ closePopper }) => (
+                        <MenuPopper>
+                          {canEditIntegration && (
+                            <Button
+                              startIcon="pen"
+                              variant="quaternary"
+                              fullWidth
+                              align="left"
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Edit',
+                                  type: 'GoCardless',
+                                  provider: gocardlessPaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af24d')}
+                            </Button>
+                          )}
+
+                          {canDeleteIntegration && (
+                            <Button
+                              startIcon="trash"
+                              variant="quaternary"
+                              align="left"
+                              fullWidth
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Delete',
+                                  type: 'GoCardless',
+                                  provider: gocardlessPaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af243')}
+                            </Button>
+                          )}
+                        </MenuPopper>
+                      )}
+                    </LocalPopper>
+                  )}
                 </SuccessPaumentRedirectUrlItem>
               )}
             </>
diff --git a/src/pages/settings/GocardlessIntegrations.tsx b/src/pages/settings/GocardlessIntegrations.tsx
index 446afe87a..0602e8575 100644
--- a/src/pages/settings/GocardlessIntegrations.tsx
+++ b/src/pages/settings/GocardlessIntegrations.tsx
@@ -37,6 +37,7 @@ import {
   useGetGocardlessIntegrationsListQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import Gocardless from '~/public/images/gocardless.svg'
 import {
   ItemContainer,
@@ -75,6 +76,7 @@ gql`
 
 const GocardlessIntegrations = () => {
   const navigate = useNavigate()
+  const { hasPermissions } = usePermissions()
   const addGocardlessDialogRef = useRef<AddGocardlessDialogRef>(null)
   const deleteDialogRef = useRef<DeleteGocardlessIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
@@ -86,6 +88,10 @@ const GocardlessIntegrations = () => {
   const deleteDialogCallback =
     connections && connections.length === 1 ? () => navigate(INTEGRATIONS_ROUTE) : undefined
 
+  const canCreateIntegration = hasPermissions(['organizationIntegrationsCreate'])
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
+
   return (
     <>
       <PageHeader $withSide>
@@ -103,14 +109,17 @@ const GocardlessIntegrations = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Button
-          variant="primary"
-          onClick={() => {
-            addGocardlessDialogRef.current?.openDialog()
-          }}
-        >
-          {translate('text_65846763e6140b469140e235')}
-        </Button>
+
+        {canCreateIntegration && (
+          <Button
+            variant="primary"
+            onClick={() => {
+              addGocardlessDialogRef.current?.openDialog()
+            }}
+          >
+            {translate('text_65846763e6140b469140e235')}
+          </Button>
+        )}
       </PageHeader>
       <MainInfos>
         {loading ? (
@@ -181,58 +190,65 @@ const GocardlessIntegrations = () => {
                           <ButtonMock />
                         </Stack>
                       </LocalListItemLink>
-                      <Popper
-                        PopperProps={{ placement: 'bottom-end' }}
-                        opener={({ isOpen }) => (
-                          <LocalPopperOpener>
-                            <Tooltip
-                              placement="top-end"
-                              disableHoverListener={isOpen}
-                              title={translate('text_626162c62f790600f850b7b6')}
-                            >
-                              <Button
-                                icon="dots-horizontal"
-                                variant="quaternary"
-                                data-test="plan-item-options"
-                              />
-                            </Tooltip>
-                          </LocalPopperOpener>
-                        )}
-                      >
-                        {({ closePopper }) => (
-                          <MenuPopper>
-                            <Button
-                              startIcon="pen"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                addGocardlessDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  deleteModalRef: deleteDialogRef,
-                                  deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_65845f35d7d69c3ab4793dac')}
-                            </Button>
-                            <Button
-                              startIcon="trash"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                deleteDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  callback: deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_645d071272418a14c1c76a81')}
-                            </Button>
-                          </MenuPopper>
-                        )}
-                      </Popper>
+                      {(canEditIntegration || canDeleteIntegration) && (
+                        <Popper
+                          PopperProps={{ placement: 'bottom-end' }}
+                          opener={({ isOpen }) => (
+                            <LocalPopperOpener>
+                              <Tooltip
+                                placement="top-end"
+                                disableHoverListener={isOpen}
+                                title={translate('text_626162c62f790600f850b7b6')}
+                              >
+                                <Button
+                                  icon="dots-horizontal"
+                                  variant="quaternary"
+                                  data-test="plan-item-options"
+                                />
+                              </Tooltip>
+                            </LocalPopperOpener>
+                          )}
+                        >
+                          {({ closePopper }) => (
+                            <MenuPopper>
+                              {canEditIntegration && (
+                                <Button
+                                  startIcon="pen"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    addGocardlessDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      deleteModalRef: deleteDialogRef,
+                                      deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_65845f35d7d69c3ab4793dac')}
+                                </Button>
+                              )}
+
+                              {canDeleteIntegration && (
+                                <Button
+                                  startIcon="trash"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    deleteDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      callback: deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_645d071272418a14c1c76a81')}
+                                </Button>
+                              )}
+                            </MenuPopper>
+                          )}
+                        </Popper>
+                      )}
                     </ItemContainer>
                   )
                 })}
diff --git a/src/pages/settings/LagoTaxManagementIntegration.tsx b/src/pages/settings/LagoTaxManagementIntegration.tsx
index 6f95fbac1..72cb4ffd2 100644
--- a/src/pages/settings/LagoTaxManagementIntegration.tsx
+++ b/src/pages/settings/LagoTaxManagementIntegration.tsx
@@ -30,6 +30,7 @@ import {
   useRemoveTaxManagementIntegrationMutation,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import LagoTaxManagement from '~/public/images/lago-tax-management.svg'
 import { HEADER_TABLE_HEIGHT, NAV_HEIGHT, PageHeader, theme } from '~/styles'
 
@@ -66,6 +67,7 @@ gql`
 const LagoTaxManagementIntegration = () => {
   const navigate = useNavigate()
   const { translate } = useInternationalization()
+  const { hasPermissions } = usePermissions()
   const deleteConnectionRef = useRef<DialogRef>(null)
 
   const { data: organizationData, loading: organizationLoading } =
@@ -105,13 +107,15 @@ const LagoTaxManagementIntegration = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Button
-          variant="secondary"
-          disabled={loading}
-          onClick={deleteConnectionRef.current?.openDialog}
-        >
-          {translate('text_657078c28394d6b1ae1b971b')}
-        </Button>
+        {hasPermissions(['organizationIntegrationsDelete']) && (
+          <Button
+            variant="secondary"
+            disabled={loading}
+            onClick={deleteConnectionRef.current?.openDialog}
+          >
+            {translate('text_657078c28394d6b1ae1b971b')}
+          </Button>
+        )}
       </PageHeader>
       <MainInfos>
         {loading ? (
@@ -167,7 +171,7 @@ const LagoTaxManagementIntegration = () => {
               </>
             )}
           </ConnectionDetailsItem>
-          {!loading && (
+          {!loading && hasPermissions(['organizationView']) && (
             <Info
               variant="caption"
               html={translate('text_657078c28394d6b1ae1b9737', {
@@ -180,15 +184,18 @@ const LagoTaxManagementIntegration = () => {
         <section>
           <InlineTitle>
             <Typography variant="subhead">{translate('text_657078c28394d6b1ae1b9743')}</Typography>
-            <Button
-              variant="quaternary"
-              disabled={loading}
-              onClick={() => {
-                navigate(TAXES_SETTINGS_ROUTE)
-              }}
-            >
-              {translate('text_657078c28394d6b1ae1b973d')}
-            </Button>
+
+            {hasPermissions(['organizationTaxesView']) && (
+              <Button
+                variant="quaternary"
+                disabled={loading}
+                onClick={() => {
+                  navigate(TAXES_SETTINGS_ROUTE)
+                }}
+              >
+                {translate('text_657078c28394d6b1ae1b973d')}
+              </Button>
+            )}
           </InlineTitle>
 
           {loading ? (
diff --git a/src/pages/settings/StripeIntegrationDetails.tsx b/src/pages/settings/StripeIntegrationDetails.tsx
index 8f5068b97..148677020 100644
--- a/src/pages/settings/StripeIntegrationDetails.tsx
+++ b/src/pages/settings/StripeIntegrationDetails.tsx
@@ -37,6 +37,7 @@ import {
   useGetStripeIntegrationsDetailsQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import Stripe from '~/public/images/stripe.svg'
 import { MenuPopper, NAV_HEIGHT, PageHeader, PopperOpener, theme } from '~/styles'
 
@@ -79,6 +80,7 @@ gql`
 const StripeIntegrationDetails = () => {
   const navigate = useNavigate()
   const { integrationId } = useParams()
+  const { hasPermissions } = usePermissions()
   const addDialogRef = useRef<AddStripeDialogRef>(null)
   const deleteDialogRef = useRef<DeleteStripeIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
@@ -100,6 +102,9 @@ const StripeIntegrationDetails = () => {
     }
   }
 
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
+
   return (
     <>
       <PageHeader $withSide>
@@ -117,46 +122,53 @@ const StripeIntegrationDetails = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Popper
-          PopperProps={{ placement: 'bottom-end' }}
-          opener={
-            <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
-          }
-        >
-          {({ closePopper }) => (
-            <MenuPopper>
-              <Button
-                variant="quaternary"
-                fullWidth
-                align="left"
-                onClick={() => {
-                  addDialogRef.current?.openDialog({
-                    provider: stripePaymentProvider,
-                    deleteModalRef: deleteDialogRef,
-                    deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dac')}
-              </Button>
-              <Button
-                variant="quaternary"
-                align="left"
-                fullWidth
-                onClick={() => {
-                  deleteDialogRef.current?.openDialog({
-                    provider: stripePaymentProvider,
-                    callback: deleteDialogCallback,
-                  })
-                  closePopper()
-                }}
-              >
-                {translate('text_65845f35d7d69c3ab4793dad')}
-              </Button>
-            </MenuPopper>
-          )}
-        </Popper>
+        {(canEditIntegration || canDeleteIntegration) && (
+          <Popper
+            PopperProps={{ placement: 'bottom-end' }}
+            opener={
+              <Button endIcon="chevron-down">{translate('text_626162c62f790600f850b6fe')}</Button>
+            }
+          >
+            {({ closePopper }) => (
+              <MenuPopper>
+                {canEditIntegration && (
+                  <Button
+                    variant="quaternary"
+                    fullWidth
+                    align="left"
+                    onClick={() => {
+                      addDialogRef.current?.openDialog({
+                        provider: stripePaymentProvider,
+                        deleteModalRef: deleteDialogRef,
+                        deleteDialogCallback,
+                      })
+                      closePopper()
+                    }}
+                  >
+                    {translate('text_65845f35d7d69c3ab4793dac')}
+                  </Button>
+                )}
+
+                {canDeleteIntegration && (
+                  <Button
+                    variant="quaternary"
+                    align="left"
+                    fullWidth
+                    onClick={() => {
+                      deleteDialogRef.current?.openDialog({
+                        provider: stripePaymentProvider,
+                        callback: deleteDialogCallback,
+                      })
+                      closePopper()
+                    }}
+                  >
+                    {translate('text_65845f35d7d69c3ab4793dad')}
+                  </Button>
+                )}
+              </MenuPopper>
+            )}
+          </Popper>
+        )}
       </PageHeader>
 
       <MainInfos>
@@ -191,19 +203,22 @@ const StripeIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Title variant="subhead">{translate('text_657078c28394d6b1ae1b9725')}</Title>
-            <Button
-              variant="quaternary"
-              disabled={loading}
-              onClick={() => {
-                addDialogRef.current?.openDialog({
-                  provider: stripePaymentProvider,
-                  deleteModalRef: deleteDialogRef,
-                  deleteDialogCallback,
-                })
-              }}
-            >
-              {translate('text_62b1edddbf5f461ab9712787')}
-            </Button>
+
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                disabled={loading}
+                onClick={() => {
+                  addDialogRef.current?.openDialog({
+                    provider: stripePaymentProvider,
+                    deleteModalRef: deleteDialogRef,
+                    deleteDialogCallback,
+                  })
+                }}
+              >
+                {translate('text_62b1edddbf5f461ab9712787')}
+              </Button>
+            )}
           </InlineTitle>
 
           <LineItem>
@@ -274,19 +289,22 @@ const StripeIntegrationDetails = () => {
         <section>
           <InlineTitle>
             <Typography variant="subhead">{translate('text_65367cb78324b77fcb6af21c')}</Typography>
-            <Button
-              variant="quaternary"
-              disabled={!!stripePaymentProvider?.successRedirectUrl || loading}
-              onClick={() => {
-                successRedirectUrlDialogRef.current?.openDialog({
-                  mode: 'Add',
-                  type: 'Stripe',
-                  provider: stripePaymentProvider,
-                })
-              }}
-            >
-              {translate('text_65367cb78324b77fcb6af20e')}
-            </Button>
+
+            {canEditIntegration && (
+              <Button
+                variant="quaternary"
+                disabled={!!stripePaymentProvider?.successRedirectUrl || loading}
+                onClick={() => {
+                  successRedirectUrlDialogRef.current?.openDialog({
+                    mode: 'Add',
+                    type: 'Stripe',
+                    provider: stripePaymentProvider,
+                  })
+                }}
+              >
+                {translate('text_65367cb78324b77fcb6af20e')}
+              </Button>
+            )}
           </InlineTitle>
 
           {loading ? (
@@ -317,57 +335,65 @@ const StripeIntegrationDetails = () => {
                       </Typography>
                     </div>
                   </SuccessPaumentRedirectUrlItemLeft>
-                  <LocalPopper
-                    PopperProps={{ placement: 'bottom-end' }}
-                    opener={({ isOpen }) => (
-                      <PopperOpener>
-                        <Tooltip
-                          placement="top-end"
-                          disableHoverListener={isOpen}
-                          title={translate('text_629728388c4d2300e2d3810d')}
-                        >
-                          <Button icon="dots-horizontal" variant="quaternary" />
-                        </Tooltip>
-                      </PopperOpener>
-                    )}
-                  >
-                    {({ closePopper }) => (
-                      <MenuPopper>
-                        <Button
-                          startIcon="pen"
-                          variant="quaternary"
-                          fullWidth
-                          align="left"
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Edit',
-                              type: 'Stripe',
-                              provider: stripePaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af24d')}
-                        </Button>
-                        <Button
-                          startIcon="trash"
-                          variant="quaternary"
-                          align="left"
-                          fullWidth
-                          onClick={() => {
-                            successRedirectUrlDialogRef.current?.openDialog({
-                              mode: 'Delete',
-                              type: 'Stripe',
-                              provider: stripePaymentProvider,
-                            })
-                            closePopper()
-                          }}
-                        >
-                          {translate('text_65367cb78324b77fcb6af243')}
-                        </Button>
-                      </MenuPopper>
-                    )}
-                  </LocalPopper>
+
+                  {(canEditIntegration || canDeleteIntegration) && (
+                    <LocalPopper
+                      PopperProps={{ placement: 'bottom-end' }}
+                      opener={({ isOpen }) => (
+                        <PopperOpener>
+                          <Tooltip
+                            placement="top-end"
+                            disableHoverListener={isOpen}
+                            title={translate('text_629728388c4d2300e2d3810d')}
+                          >
+                            <Button icon="dots-horizontal" variant="quaternary" />
+                          </Tooltip>
+                        </PopperOpener>
+                      )}
+                    >
+                      {({ closePopper }) => (
+                        <MenuPopper>
+                          {canEditIntegration && (
+                            <Button
+                              startIcon="pen"
+                              variant="quaternary"
+                              fullWidth
+                              align="left"
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Edit',
+                                  type: 'Stripe',
+                                  provider: stripePaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af24d')}
+                            </Button>
+                          )}
+
+                          {canDeleteIntegration && (
+                            <Button
+                              startIcon="trash"
+                              variant="quaternary"
+                              align="left"
+                              fullWidth
+                              onClick={() => {
+                                successRedirectUrlDialogRef.current?.openDialog({
+                                  mode: 'Delete',
+                                  type: 'Stripe',
+                                  provider: stripePaymentProvider,
+                                })
+                                closePopper()
+                              }}
+                            >
+                              {translate('text_65367cb78324b77fcb6af243')}
+                            </Button>
+                          )}
+                        </MenuPopper>
+                      )}
+                    </LocalPopper>
+                  )}
                 </SuccessPaumentRedirectUrlItem>
               )}
             </>
diff --git a/src/pages/settings/StripeIntegrations.tsx b/src/pages/settings/StripeIntegrations.tsx
index a045bd933..c8fdf84f3 100644
--- a/src/pages/settings/StripeIntegrations.tsx
+++ b/src/pages/settings/StripeIntegrations.tsx
@@ -37,6 +37,7 @@ import {
   useGetStripeIntegrationsListQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
 import Stripe from '~/public/images/stripe.svg'
 import {
   ItemContainer,
@@ -75,6 +76,7 @@ gql`
 
 const StripeIntegrations = () => {
   const navigate = useNavigate()
+  const { hasPermissions } = usePermissions()
   const addStripeDialogRef = useRef<AddStripeDialogRef>(null)
   const deleteDialogRef = useRef<DeleteStripeIntegrationDialogRef>(null)
   const successRedirectUrlDialogRef = useRef<AddEditDeleteSuccessRedirectUrlDialogRef>(null)
@@ -86,6 +88,10 @@ const StripeIntegrations = () => {
   const deleteDialogCallback =
     connections && connections.length === 1 ? () => navigate(INTEGRATIONS_ROUTE) : undefined
 
+  const canCreateIntegration = hasPermissions(['organizationIntegrationsCreate'])
+  const canEditIntegration = hasPermissions(['organizationIntegrationsUpdate'])
+  const canDeleteIntegration = hasPermissions(['organizationIntegrationsDelete'])
+
   return (
     <>
       <PageHeader $withSide>
@@ -103,14 +109,17 @@ const StripeIntegrations = () => {
             </Typography>
           )}
         </HeaderBlock>
-        <Button
-          variant="primary"
-          onClick={() => {
-            addStripeDialogRef.current?.openDialog()
-          }}
-        >
-          {translate('text_65846763e6140b469140e235')}
-        </Button>
+
+        {canCreateIntegration && (
+          <Button
+            variant="primary"
+            onClick={() => {
+              addStripeDialogRef.current?.openDialog()
+            }}
+          >
+            {translate('text_65846763e6140b469140e235')}
+          </Button>
+        )}
       </PageHeader>
       <MainInfos>
         {loading ? (
@@ -181,58 +190,66 @@ const StripeIntegrations = () => {
                           <ButtonMock />
                         </Stack>
                       </LocalListItemLink>
-                      <Popper
-                        PopperProps={{ placement: 'bottom-end' }}
-                        opener={({ isOpen }) => (
-                          <LocalPopperOpener>
-                            <Tooltip
-                              placement="top-end"
-                              disableHoverListener={isOpen}
-                              title={translate('text_626162c62f790600f850b7b6')}
-                            >
-                              <Button
-                                icon="dots-horizontal"
-                                variant="quaternary"
-                                data-test="plan-item-options"
-                              />
-                            </Tooltip>
-                          </LocalPopperOpener>
-                        )}
-                      >
-                        {({ closePopper }) => (
-                          <MenuPopper>
-                            <Button
-                              startIcon="pen"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                addStripeDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  deleteModalRef: deleteDialogRef,
-                                  deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_65845f35d7d69c3ab4793dac')}
-                            </Button>
-                            <Button
-                              startIcon="trash"
-                              variant="quaternary"
-                              align="left"
-                              onClick={() => {
-                                deleteDialogRef.current?.openDialog({
-                                  provider: connection,
-                                  callback: deleteDialogCallback,
-                                })
-                                closePopper()
-                              }}
-                            >
-                              {translate('text_645d071272418a14c1c76a81')}
-                            </Button>
-                          </MenuPopper>
-                        )}
-                      </Popper>
+
+                      {(canEditIntegration || canDeleteIntegration) && (
+                        <Popper
+                          PopperProps={{ placement: 'bottom-end' }}
+                          opener={({ isOpen }) => (
+                            <LocalPopperOpener>
+                              <Tooltip
+                                placement="top-end"
+                                disableHoverListener={isOpen}
+                                title={translate('text_626162c62f790600f850b7b6')}
+                              >
+                                <Button
+                                  icon="dots-horizontal"
+                                  variant="quaternary"
+                                  data-test="plan-item-options"
+                                />
+                              </Tooltip>
+                            </LocalPopperOpener>
+                          )}
+                        >
+                          {({ closePopper }) => (
+                            <MenuPopper>
+                              {canEditIntegration && (
+                                <Button
+                                  startIcon="pen"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    addStripeDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      deleteModalRef: deleteDialogRef,
+                                      deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_65845f35d7d69c3ab4793dac')}
+                                </Button>
+                              )}
+
+                              {canDeleteIntegration && (
+                                <Button
+                                  startIcon="trash"
+                                  variant="quaternary"
+                                  align="left"
+                                  onClick={() => {
+                                    deleteDialogRef.current?.openDialog({
+                                      provider: connection,
+                                      callback: deleteDialogCallback,
+                                    })
+                                    closePopper()
+                                  }}
+                                >
+                                  {translate('text_645d071272418a14c1c76a81')}
+                                </Button>
+                              )}
+                            </MenuPopper>
+                          )}
+                        </Popper>
+                      )}
                     </ItemContainer>
                   )
                 })}