+
+
+
+ {loading ? (
+
+ ) : (
+
+ {cashfreePaymentProvider?.name}
+
+ )}
+
+ {(canEditIntegration || canDeleteIntegration) && (
+ {translate('text_626162c62f790600f850b6fe')}
+ }
+ >
+ {({ closePopper }) => (
+
+ {canEditIntegration && (
+ <>
+
+ >
+ )}
+
+ {canDeleteIntegration && (
+
+ )}
+
+ )}
+
+ )}
+
+
+ {loading ? (
+ <>
+
+
+
+
+
+ >
+ ) : (
+ <>
+
+
+
+
+
+ {cashfreePaymentProvider?.name}
+
+
+
+ {translate('text_1727619878796wmgcntkfycn')} •
+ {translate('text_62b1edddbf5f461ab971271f')}
+
+
+ >
+ )}
+
+
+
+
+
+ {translate('text_664c732c264d7eed1c74fdc5')}
+
+ {canEditIntegration && (
+
+ )}
+
+ {loading ? (
+ <>
+ {[0, 1, 2].map((i) => (
+ -
+
+
+
+ ))}
+
+
+ >
+ ) : (
+ <>
+ -
+
+
+
+
+
+ {translate('text_626162c62f790600f850b76a')}
+
+
+ {cashfreePaymentProvider.name}
+
+
+
+
+ -
+
+
+
+
+
+ {translate('text_62876e85e32e0300e1803127')}{' '}
+
+
+ {cashfreePaymentProvider.code}
+
+
+
+
+ -
+
+
+
+
+
+
+ {translate('text_1727620558031ftsky1vpr55')}
+
+
+ {cashfreePaymentProvider.clientId}
+
+
+
+
+
+ -
+
+
+
+
+
+
+ {translate('text_1727620574228qfyoqtsdih7')}
+
+
+ {cashfreePaymentProvider.clientSecret}
+
+
+
+
+
+ -
+
+
+
+
+
+
+ {translate('text_6271200984178801ba8bdf22')}
+
+
+ {webhookUrl}
+
+
+
+
+
+
+
+ >
+ )}
+ {!loading && }
+
+
+
+
+ {translate('text_65367cb78324b77fcb6af21c')}
+
+ {canEditIntegration && (
+
+ )}
+
+
+ {loading ? (
+
+
+
+
+ ) : (
+ <>
+ {!cashfreePaymentProvider?.successRedirectUrl ? (
+
+ {translate('text_65367cb78324b77fcb6af226', {
+ connectionName: translate('text_1727619878796wmgcntkfycn'),
+ })}
+
+ ) : (
+
+
+
+
+
+
+
+ {translate('text_65367cb78324b77fcb6af1c6')}
+
+
+ {cashfreePaymentProvider?.successRedirectUrl}
+
+
+
+ {(canEditIntegration || canDeleteIntegration) && (
+ (
+
+
+
+
+
+ )}
+ >
+ {({ closePopper }) => (
+
+ {canEditIntegration && (
+
+ )}
+
+ {canDeleteIntegration && (
+
+ )}
+
+ )}
+
+ )}
+
+ )}
+ >
+ )}
+
+
+
+
+
+
+
+ )
+}
+
+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)};
+
+ ${theme.breakpoints.down('md')} {
+ padding: ${theme.spacing(8)} ${theme.spacing(4)};
+ }
+`
+
+const ContentWrapper = styled.div`
+ max-width: ${theme.spacing(168)};
+ padding: 0 ${theme.spacing(12)};
+ display: flex;
+ flex-direction: column;
+ gap: ${theme.spacing(8)};
+
+ ${theme.breakpoints.down('md')} {
+ padding: 0 ${theme.spacing(4)};
+ }
+`
+
+const Title = styled(Typography)`
+ height: ${NAV_HEIGHT}px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+`
+
+const Item = styled(Stack)`
+ height: ${NAV_HEIGHT}px;
+ max-width: ${theme.spacing(168)};
+ box-shadow: ${theme.shadows[7]};
+`
+
+const Info = styled(Typography)`
+ margin-top: ${theme.spacing(3)};
+`
+
+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)};
+ }
+`
+
+const InlineTitle = styled.div`
+ position: relative;
+ height: ${NAV_HEIGHT}px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`
+
+const LocalPopper = styled(Popper)`
+ position: relative;
+ height: 100%;
+ > *:first-child {
+ right: 0;
+ top: 16px;
+ }
+`
+
+const SuccessPaumentRedirectUrlItem = styled.div`
+ height: ${NAV_HEIGHT}px;
+ box-shadow: ${theme.shadows[7]};
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`
+
+const SuccessPaumentRedirectUrlItemLeft = styled.div`
+ display: flex;
+ align-items: center;
+ gap: ${theme.spacing(3)};
+`
+
+export default CashfreeIntegrationDetails
diff --git a/src/pages/settings/CashfreeIntegrations.tsx b/src/pages/settings/CashfreeIntegrations.tsx
new file mode 100644
index 000000000..1f91e7a34
--- /dev/null
+++ b/src/pages/settings/CashfreeIntegrations.tsx
@@ -0,0 +1,345 @@
+import { gql } from '@apollo/client'
+import { Stack } from '@mui/material'
+import { useRef } from 'react'
+import { generatePath, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+
+import {
+ Avatar,
+ Button,
+ ButtonLink,
+ Chip,
+ Icon,
+ Popper,
+ Skeleton,
+ Tooltip,
+ Typography,
+} from '~/components/designSystem'
+import {
+ AddCashfreeDialog,
+ AddCashfreeDialogRef,
+} from '~/components/settings/integrations/AddCashfreeDialog'
+import {
+ AddEditDeleteSuccessRedirectUrlDialog,
+ AddEditDeleteSuccessRedirectUrlDialogRef,
+} from '~/components/settings/integrations/AddEditDeleteSuccessRedirectUrlDialog'
+import {
+ DeleteCashfreeIntegrationDialog,
+ DeleteCashfreeIntegrationDialogRef,
+} from '~/components/settings/integrations/DeleteCashfreeIntegrationDialog'
+import { CASHFREE_INTEGRATION_DETAILS_ROUTE, INTEGRATIONS_ROUTE } from '~/core/router'
+import {
+ AddCashfreeProviderDialogFragmentDoc,
+ CashfreeForCreateAndEditSuccessRedirectUrlFragmentDoc,
+ CashfreeProvider,
+ DeleteCashfreeIntegrationDialogFragmentDoc,
+ ProviderTypeEnum,
+ useGetCashfreeIntegrationsListQuery,
+} from '~/generated/graphql'
+import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { usePermissions } from '~/hooks/usePermissions'
+import Cashfree from '~/public/images/cashfree.svg'
+import {
+ ItemContainer,
+ ListItemLink,
+ MenuPopper,
+ NAV_HEIGHT,
+ PageHeader,
+ PopperOpener,
+ theme,
+} from '~/styles'
+
+gql`
+ fragment CashfreeIntegrations on CashfreeProvider {
+ id
+ name
+ code
+ }
+
+ query getCashfreeIntegrationsList($limit: Int, $type: ProviderTypeEnum) {
+ paymentProviders(limit: $limit, type: $type) {
+ collection {
+ ... on CashfreeProvider {
+ id
+ ...CashfreeIntegrations
+ ...AddCashfreeProviderDialog
+ ...DeleteCashfreeIntegrationDialog
+ }
+ }
+ }
+ }
+ ${CashfreeForCreateAndEditSuccessRedirectUrlFragmentDoc}
+ ${DeleteCashfreeIntegrationDialogFragmentDoc}
+ ${AddCashfreeProviderDialogFragmentDoc}
+`
+
+const CashfreeIntegrations = () => {
+ const navigate = useNavigate()
+ const { hasPermissions } = usePermissions()
+ const addCashfreeDialogRef = useRef