+
+
+
+ {loading ? (
+
+ ) : (
+
+ {translate('text_634ea0ecc6147de10ddb6629')}
+
+ )}
+
+
+
+ {loading ? (
+ <>
+
+
+
+
+
+ >
+ ) : (
+ <>
+
+
+
+
+
+
+ {translate('text_634ea0ecc6147de10ddb6648')}
+
+ {isConnectionEstablished && (
+
+ )}
+
+ {translate('text_634ea0ecc6147de10ddb6643')}
+
+ >
+ )}
+
+
+
+
+ {translate('text_634ea0ecc6147de10ddb663d')}
+
+
+ {isConnectionEstablished && (
+ {translate('text_634ea0ecc6147de10ddb6641')}
+ )}
+
+
+ {translate('text_635bd8acb686f18909a57c89')}
+
+ {translate('text_635bd8acb686f18909a57c8d')}
+
+
+ {loading ? (
+ <>
+
+
+ >
+ ) : (
+ isConnectionEstablished && (
+ <>
+
+
+
+ {webhookSecretKey}
+
+
+
+ >
+ )
+ )}
+
+ {!loading && {translate('text_635bd8acb686f18909a57c93')}}
+
+
+ )
+}
+
+const HeaderBlock = styled.div`
+ display: flex;
+ align-items: center;
+
+ > *:first-child {
+ margin-right: ${theme.spacing(3)};
+ }
+`
+
+const MainInfos = styled.div`
+ display: flex;
+ align-items: center;
+ padding: ${theme.spacing(8)} ${theme.spacing(12)};
+`
+
+const Settings = styled.div`
+ padding: 0 ${theme.spacing(12)};
+ margin-bottom: ${theme.spacing(12)};
+`
+
+const Title = styled(Typography)`
+ height: ${NAV_HEIGHT}px;
+ width: 100%;
+ box-shadow: ${theme.shadows[7]};
+ display: flex;
+ align-items: center;
+`
+
+const Head = styled.div`
+ height: ${NAV_HEIGHT}px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-shadow: ${theme.shadows[7]};
+ margin-bottom: ${theme.spacing(4)};
+`
+
+const Subtitle = styled(Typography)`
+ height: ${HEADER_TABLE_HEIGHT}px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+`
+
+const SubtitleSecretKey = styled(Typography)`
+ height: ${HEADER_TABLE_HEIGHT}px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ box-shadow: ${theme.shadows[7]};
+`
+
+const SecretKeyItem = styled.div`
+ height: ${NAV_HEIGHT}px;
+ width: 100%;
+ box-shadow: ${theme.shadows[7]};
+ display: flex;
+ align-items: center;
+
+ > *:first-child {
+ margin-right: ${theme.spacing(3)};
+ }
+`
+
+const SecretKey = styled(Typography)`
+ margin-right: auto;
+`
+
+const Info = styled(Typography)`
+ height: ${HEADER_TABLE_HEIGHT}px;
+ box-shadow: ${theme.shadows[7]};
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+`
+
+const StyledAvatar = styled(Avatar)`
+ margin-right: ${theme.spacing(4)};
+`
+
+const Line = styled.div`
+ display: flex;
+ align-items: center;
+
+ > *:first-child {
+ margin-right: ${theme.spacing(2)};
+ }
+`
+
+export default GocardlessIntegration
diff --git a/src/pages/settings/Integrations.tsx b/src/pages/settings/Integrations.tsx
index cb59e9b05..f0222389d 100644
--- a/src/pages/settings/Integrations.tsx
+++ b/src/pages/settings/Integrations.tsx
@@ -7,8 +7,10 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
import { theme } from '~/styles'
import { Typography, Selector, Avatar, SelectorSkeleton, Chip } from '~/components/designSystem'
import Stripe from '~/public/images/stripe.svg'
+import GoCardless from '~/public/images/gocardless.svg'
import { useIntegrationsSettingQuery } from '~/generated/graphql'
-import { STRIPE_INTEGRATION_ROUTE } from '~/core/router'
+import { STRIPE_INTEGRATION_ROUTE, GOCARDLESS_INTEGRATION_ROUTE } from '~/core/router'
+import { envGlobalVar } from '~/core/apolloClient'
import {
AddStripeDialog,
AddStripeDialogRef,
@@ -23,6 +25,9 @@ gql`
stripePaymentProvider {
id
}
+ gocardlessPaymentProvider {
+ id
+ }
}
}
}
@@ -35,6 +40,9 @@ const Integrations = () => {
const { data, loading } = useIntegrationsSettingQuery()
const hasStripeIntegration = !!(data?.currentUser?.organizations || [])[0]?.stripePaymentProvider
?.id
+ const hasGocardlessIntegration = !!(data?.currentUser?.organizations || [])[0]
+ ?.gocardlessPaymentProvider?.id
+ const { lagoOauthProxyUrl } = envGlobalVar()
return (