diff --git a/src/client/components/feed/FeedApiGuide.tsx b/src/client/components/feed/FeedApiGuide.tsx index a60b465..c4a0771 100644 --- a/src/client/components/feed/FeedApiGuide.tsx +++ b/src/client/components/feed/FeedApiGuide.tsx @@ -3,41 +3,56 @@ import React from 'react'; import { useTranslation } from '@i18next-toolkit/react'; import { CodeExample } from '../CodeExample'; -export const FeedApiGuide: React.FC<{ channelId: string }> = React.memo( - (props) => { - const { t } = useTranslation(); +interface FeedApiGuideProps { + channelId: string; + webhookSignature?: string; +} +export const FeedApiGuide: React.FC = React.memo((props) => { + const { t } = useTranslation(); - return ( - - -
{t('You can send a message to this channel with:')}
-
- - + return ( + + +
{t('You can send a message to this channel with:')}
+
+ + -
{t('OR')}
+
{t('OR')}
-
{t('Integrate with third party with webhook')}
-
-
- ); - } -); +
{t('Integrate with third party with webhook')}
+
+
+ ); +}); FeedApiGuide.displayName = 'FeedApiGuide'; -function generateCurlCode(channelId: string) { - const code = `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\ +function generateCurlCode(channelId: string, webhookSignature?: string) { + if (webhookSignature) { + return `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\ +-H "Content-Type: application/json" \\ +-H "X-Webhook-Signature: ${webhookSignature}" \\ +-d '{ + "eventName": "test name", + "eventContent": "test content", + "tags": ["test"], + "source": "custom", + "important": false +}'`; + } + + return `curl -X POST ${window.location.origin}/open/feed/${channelId}/send \\ -H "Content-Type: application/json" \\ -d '{ "eventName": "test name", @@ -46,12 +61,27 @@ function generateCurlCode(channelId: string) { "source": "custom", "important": false }'`; - - return code; } -function generateFetchCode(channelId: string) { - const code = `fetch('${window.location.origin}/open/feed/${channelId}/send', { +function generateFetchCode(channelId: string, webhookSignature?: string) { + if (webhookSignature) { + return `fetch('${window.location.origin}/open/feed/${channelId}/send', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-Webhook-Signature': '${webhookSignature}' + }, + body: JSON.stringify({ + eventName: 'test name', + eventContent: 'test content', + tags: ['test'], + source: 'custom', + important: false, + }) +})`; + } + + return `fetch('${window.location.origin}/open/feed/${channelId}/send', { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -64,6 +94,4 @@ function generateFetchCode(channelId: string) { important: false, }) })`; - - return code; } diff --git a/src/client/components/feed/FeedIntegration.tsx b/src/client/components/feed/FeedIntegration.tsx index 5b9199e..eb34038 100644 --- a/src/client/components/feed/FeedIntegration.tsx +++ b/src/client/components/feed/FeedIntegration.tsx @@ -8,6 +8,7 @@ import { FaStripe } from 'react-icons/fa6'; export const FeedIntegration: React.FC<{ feedId: string; + webhookSignature: string; }> = React.memo((props) => { const { t } = useTranslation(); @@ -92,7 +93,7 @@ export const FeedIntegration: React.FC<{ } + content={ + + } >