Israel Abebe
1 year ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 2159 additions and 24 deletions
-
1api/package.json
-
35api/pnpm-lock.yaml
-
4api/src/app.module.ts
-
2api/src/gateway/gateway.module.ts
-
12api/src/gateway/gateway.service.ts
-
41api/src/webhook/schemas/webhook-notification.schema.ts
-
43api/src/webhook/schemas/webhook-subscription.schema.ts
-
3api/src/webhook/webhook-event.enum.ts
-
68api/src/webhook/webhook.controller.ts
-
14api/src/webhook/webhook.dto.ts
-
35api/src/webhook/webhook.module.ts
-
270api/src/webhook/webhook.service.ts
-
25web/app/(app)/dashboard/(components)/main-dashboard.tsx
-
198web/app/(app)/dashboard/(components)/webhooks/create-webhook-dialog.tsx
-
50web/app/(app)/dashboard/(components)/webhooks/delete-webhook-button.tsx
-
201web/app/(app)/dashboard/(components)/webhooks/edit-webhook-dialog.tsx
-
139web/app/(app)/dashboard/(components)/webhooks/webhook-card.tsx
-
169web/app/(app)/dashboard/(components)/webhooks/webhook-docs.tsx
-
178web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
-
49web/components/shared/copy-button.tsx
-
141web/components/ui/alert-dialog.tsx
-
17web/components/ui/code.tsx
-
15web/components/ui/skeleton.tsx
-
32web/components/ui/tooltip.tsx
-
3web/config/api.ts
-
3web/lib/constants.ts
-
17web/lib/types.ts
-
3web/package.json
-
413web/pnpm-lock.yaml
@ -0,0 +1,41 @@ |
|||
import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose' |
|||
import { Document, Types } from 'mongoose' |
|||
import { WebhookSubscription } from './webhook-subscription.schema' |
|||
import { SMS } from 'src/gateway/schemas/sms.schema' |
|||
|
|||
export type WebhookNotificationDocument = WebhookNotification & Document |
|||
|
|||
@Schema({ timestamps: true }) |
|||
export class WebhookNotification { |
|||
_id?: Types.ObjectId |
|||
|
|||
@Prop({ type: Types.ObjectId, ref: WebhookSubscription.name, required: true }) |
|||
webhookSubscription: WebhookSubscription |
|||
|
|||
@Prop({ type: String, required: true }) |
|||
event: string |
|||
|
|||
@Prop({ type: Object, required: true }) |
|||
payload: object |
|||
|
|||
@Prop({ type: Types.ObjectId, ref: SMS.name }) |
|||
sms: SMS |
|||
|
|||
@Prop({ type: Date }) |
|||
deliveredAt: Date |
|||
|
|||
@Prop({ type: Date }) |
|||
lastDeliveryAttemptAt: Date |
|||
|
|||
@Prop({ type: Date }) |
|||
nextDeliveryAttemptAt: Date |
|||
|
|||
@Prop({ type: Number, default: 0 }) |
|||
deliveryAttemptCount: number |
|||
|
|||
@Prop({ type: Date }) |
|||
deliveryAttemptAbortedAt: Date |
|||
} |
|||
|
|||
export const WebhookNotificationSchema = |
|||
SchemaFactory.createForClass(WebhookNotification) |
|||
@ -0,0 +1,43 @@ |
|||
import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose' |
|||
import { Document, Types } from 'mongoose' |
|||
import { User } from 'src/users/schemas/user.schema' |
|||
import { WebhookEvent } from '../webhook-event.enum' |
|||
|
|||
export type WebhookSubscriptionDocument = WebhookSubscription & Document |
|||
|
|||
@Schema({ timestamps: true }) |
|||
export class WebhookSubscription { |
|||
_id?: Types.ObjectId |
|||
|
|||
@Prop({ type: Types.ObjectId, ref: User.name, required: true }) |
|||
user: User |
|||
|
|||
@Prop({ type: Boolean, default: true }) |
|||
isActive: boolean |
|||
|
|||
@Prop({ type: [String], default: [WebhookEvent.MESSAGE_RECEIVED] }) |
|||
events: string[] |
|||
|
|||
@Prop({ type: String, required: true }) |
|||
deliveryUrl: string |
|||
|
|||
@Prop({ type: String, required: true }) |
|||
signingSecret: string |
|||
|
|||
@Prop({ type: Number, default: 0 }) |
|||
successfulDeliveryCount: number |
|||
|
|||
@Prop({ type: Number, default: 0 }) |
|||
deliveryAttemptCount: number |
|||
|
|||
@Prop({ type: Date }) |
|||
lastDeliveryAttemptAt: Date |
|||
|
|||
@Prop({ type: Date }) |
|||
lastDeliverySuccessAt: Date |
|||
} |
|||
|
|||
export const WebhookSubscriptionSchema = |
|||
SchemaFactory.createForClass(WebhookSubscription) |
|||
|
|||
WebhookSubscriptionSchema.index({ user: 1, events: 1 }, { unique: true }) |
|||
@ -0,0 +1,3 @@ |
|||
export enum WebhookEvent { |
|||
MESSAGE_RECEIVED = 'MESSAGE_RECEIVED', |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
import { |
|||
Body, |
|||
Request, |
|||
Param, |
|||
Post, |
|||
Patch, |
|||
Controller, |
|||
Get, |
|||
UseGuards, |
|||
} from '@nestjs/common' |
|||
import { WebhookService } from './webhook.service' |
|||
import { ApiBearerAuth, ApiTags } from '@nestjs/swagger' |
|||
import { CreateWebhookDto, UpdateWebhookDto } from './webhook.dto' |
|||
import { AuthGuard } from 'src/auth/guards/auth.guard' |
|||
|
|||
@ApiTags('webhooks') |
|||
@ApiBearerAuth() |
|||
@Controller('webhooks') |
|||
export class WebhookController { |
|||
constructor(private readonly webhookService: WebhookService) {} |
|||
|
|||
@Get() |
|||
@UseGuards(AuthGuard) |
|||
async getWebhooks(@Request() req) { |
|||
const data = await this.webhookService.findWebhooksForUser({ |
|||
user: req.user, |
|||
}) |
|||
return { data } |
|||
} |
|||
|
|||
@Get(':webhookId') |
|||
@UseGuards(AuthGuard) |
|||
async getWebhook(@Request() req, @Param('webhookId') webhookId: string) { |
|||
const data = await this.webhookService.findOne({ |
|||
user: req.user, |
|||
webhookId, |
|||
}) |
|||
return { data } |
|||
} |
|||
|
|||
@Post() |
|||
@UseGuards(AuthGuard) |
|||
async createWebhook( |
|||
@Request() req, |
|||
@Body() createWebhookDto: CreateWebhookDto, |
|||
) { |
|||
const data = await this.webhookService.create({ |
|||
user: req.user, |
|||
createWebhookDto, |
|||
}) |
|||
return { data } |
|||
} |
|||
|
|||
@Patch(':webhookId') |
|||
@UseGuards(AuthGuard) |
|||
async updateWebhook( |
|||
@Request() req, |
|||
@Param('webhookId') webhookId: string, |
|||
@Body() updateWebhookDto: UpdateWebhookDto, |
|||
) { |
|||
const data = await this.webhookService.update({ |
|||
user: req.user, |
|||
webhookId, |
|||
updateWebhookDto, |
|||
}) |
|||
return { data } |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
import { WebhookEvent } from './webhook-event.enum' |
|||
|
|||
export class CreateWebhookDto { |
|||
deliveryUrl: string |
|||
signingSecret?: string |
|||
events: WebhookEvent[] |
|||
} |
|||
|
|||
export class UpdateWebhookDto { |
|||
isActive: boolean |
|||
deliveryUrl: string |
|||
signingSecret: string |
|||
events: WebhookEvent[] |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
import { Module } from '@nestjs/common' |
|||
import { MongooseModule } from '@nestjs/mongoose' |
|||
import { WebhookController } from './webhook.controller' |
|||
import { WebhookService } from './webhook.service' |
|||
import { |
|||
WebhookSubscription, |
|||
WebhookSubscriptionSchema, |
|||
} from './schemas/webhook-subscription.schema' |
|||
import { |
|||
WebhookNotification, |
|||
WebhookNotificationSchema, |
|||
} from './schemas/webhook-notification.schema' |
|||
import { AuthModule } from 'src/auth/auth.module' |
|||
import { UsersModule } from 'src/users/users.module' |
|||
|
|||
@Module({ |
|||
imports: [ |
|||
MongooseModule.forFeature([ |
|||
{ |
|||
name: WebhookSubscription.name, |
|||
schema: WebhookSubscriptionSchema, |
|||
}, |
|||
{ |
|||
name: WebhookNotification.name, |
|||
schema: WebhookNotificationSchema, |
|||
}, |
|||
]), |
|||
AuthModule, |
|||
UsersModule, |
|||
], |
|||
controllers: [WebhookController], |
|||
providers: [WebhookService], |
|||
exports: [MongooseModule, WebhookService], |
|||
}) |
|||
export class WebhookModule {} |
|||
@ -0,0 +1,270 @@ |
|||
import { HttpException, HttpStatus, Injectable } from '@nestjs/common' |
|||
import { Model } from 'mongoose' |
|||
import { |
|||
WebhookSubscription, |
|||
WebhookSubscriptionDocument, |
|||
} from './schemas/webhook-subscription.schema' |
|||
import { InjectModel } from '@nestjs/mongoose' |
|||
import { WebhookEvent } from './webhook-event.enum' |
|||
import { |
|||
WebhookNotification, |
|||
WebhookNotificationDocument, |
|||
} from './schemas/webhook-notification.schema' |
|||
import axios from 'axios' |
|||
import { v4 as uuidv4 } from 'uuid' |
|||
import { Cron } from '@nestjs/schedule' |
|||
import { CronExpression } from '@nestjs/schedule' |
|||
import * as crypto from 'crypto' |
|||
|
|||
@Injectable() |
|||
export class WebhookService { |
|||
constructor( |
|||
@InjectModel(WebhookSubscription.name) |
|||
private webhookSubscriptionModel: Model<WebhookSubscriptionDocument>, |
|||
@InjectModel(WebhookNotification.name) |
|||
private webhookNotificationModel: Model<WebhookNotificationDocument>, |
|||
) {} |
|||
|
|||
async findOne({ user, webhookId }) { |
|||
const webhook = await this.webhookSubscriptionModel.findOne({ |
|||
_id: webhookId, |
|||
user: user._id, |
|||
}) |
|||
|
|||
if (!webhook) { |
|||
throw new HttpException('Subscription not found', HttpStatus.NOT_FOUND) |
|||
} |
|||
return webhook |
|||
} |
|||
|
|||
async findWebhooksForUser({ user }) { |
|||
return await this.webhookSubscriptionModel.find({ user: user._id }) |
|||
} |
|||
|
|||
async create({ user, createWebhookDto }) { |
|||
const { events, deliveryUrl, signingSecret } = createWebhookDto |
|||
|
|||
// Add URL validation
|
|||
try { |
|||
new URL(deliveryUrl) |
|||
} catch (e) { |
|||
throw new HttpException('Invalid delivery URL', HttpStatus.BAD_REQUEST) |
|||
} |
|||
|
|||
// validate signing secret
|
|||
if (signingSecret.length < 20) { |
|||
throw new HttpException('Invalid signing secret', HttpStatus.BAD_REQUEST) |
|||
} |
|||
|
|||
const existingSubscription = await this.webhookSubscriptionModel.findOne({ |
|||
user: user._id, |
|||
events, |
|||
}) |
|||
|
|||
if (existingSubscription) { |
|||
throw new HttpException( |
|||
'You have already subscribed to this event', |
|||
HttpStatus.BAD_REQUEST, |
|||
) |
|||
} |
|||
|
|||
if (!events.every((event) => Object.values(WebhookEvent).includes(event))) { |
|||
throw new HttpException('Invalid event type', HttpStatus.BAD_REQUEST) |
|||
} |
|||
|
|||
// TODO: Encrypt signing secret
|
|||
// const webhookSignatureKey = process.env.WEBHOOK_SIGNATURE_KEY
|
|||
// const encryptedSigningSecret = encrypt(signingSecret, webhookSignatureKey)
|
|||
|
|||
const webhookSubscription = await this.webhookSubscriptionModel.create({ |
|||
user: user._id, |
|||
events, |
|||
deliveryUrl, |
|||
signingSecret, |
|||
}) |
|||
|
|||
return webhookSubscription |
|||
} |
|||
|
|||
async update({ user, webhookId, updateWebhookDto }) { |
|||
const webhookSubscription = await this.webhookSubscriptionModel.findOne({ |
|||
_id: webhookId, |
|||
user: user._id, |
|||
}) |
|||
|
|||
if (!webhookSubscription) { |
|||
throw new HttpException('Subscription not found', HttpStatus.NOT_FOUND) |
|||
} |
|||
|
|||
if (updateWebhookDto.hasOwnProperty('isActive')) { |
|||
webhookSubscription.isActive = updateWebhookDto.isActive |
|||
} |
|||
|
|||
if (updateWebhookDto.hasOwnProperty('deliveryUrl')) { |
|||
webhookSubscription.deliveryUrl = updateWebhookDto.deliveryUrl |
|||
} |
|||
|
|||
// if there is a valid uuid signing secret, update it
|
|||
if ( |
|||
updateWebhookDto.hasOwnProperty('signingSecret') && |
|||
updateWebhookDto.signingSecret.length < 20 |
|||
) { |
|||
throw new HttpException('Invalid signing secret', HttpStatus.BAD_REQUEST) |
|||
} else if (updateWebhookDto.hasOwnProperty('signingSecret')) { |
|||
webhookSubscription.signingSecret = updateWebhookDto.signingSecret |
|||
} |
|||
|
|||
await webhookSubscription.save() |
|||
|
|||
return webhookSubscription |
|||
} |
|||
|
|||
async deliverNotification({ sms, user, event }) { |
|||
const webhookSubscription = await this.webhookSubscriptionModel.findOne({ |
|||
user: user._id, |
|||
events: { $in: [event] }, |
|||
isActive: true, |
|||
}) |
|||
|
|||
if (!webhookSubscription) { |
|||
return |
|||
} |
|||
|
|||
if (event === WebhookEvent.MESSAGE_RECEIVED) { |
|||
const payload = { |
|||
smsId: sms._id, |
|||
sender: sms.sender, |
|||
message: sms.message, |
|||
receivedAt: sms.receivedAt, |
|||
deviceId: sms.device, |
|||
webhookSubscriptionId: webhookSubscription._id, |
|||
webhookEvent: event, |
|||
} |
|||
const webhookNotification = await this.webhookNotificationModel.create({ |
|||
webhookSubscription: webhookSubscription._id, |
|||
event, |
|||
payload, |
|||
sms, |
|||
}) |
|||
|
|||
await this.attemptWebhookDelivery(webhookNotification) |
|||
} else { |
|||
throw new HttpException('Invalid event type', HttpStatus.BAD_REQUEST) |
|||
} |
|||
} |
|||
|
|||
private async attemptWebhookDelivery( |
|||
webhookNotification: WebhookNotificationDocument, |
|||
) { |
|||
const now = new Date() |
|||
|
|||
const webhookSubscription = await this.webhookSubscriptionModel.findById( |
|||
webhookNotification.webhookSubscription, |
|||
) |
|||
|
|||
if (!webhookSubscription) { |
|||
console.error( |
|||
`Webhook subscription not found for ${webhookNotification._id}`, |
|||
) |
|||
return |
|||
} |
|||
|
|||
if (!webhookSubscription.isActive) { |
|||
webhookNotification.deliveryAttemptAbortedAt = now |
|||
await webhookNotification.save() |
|||
console.error( |
|||
`Webhook subscription is not active for ${webhookNotification._id}, aborting delivery`, |
|||
) |
|||
return |
|||
} |
|||
|
|||
const deliveryUrl = webhookSubscription?.deliveryUrl |
|||
const signingSecret = webhookSubscription?.signingSecret |
|||
|
|||
const signature = crypto |
|||
.createHmac('sha256', signingSecret) |
|||
.update(JSON.stringify(webhookNotification.payload)) |
|||
.digest('hex') |
|||
|
|||
try { |
|||
await axios.post(deliveryUrl, webhookNotification.payload, { |
|||
headers: { |
|||
'X-Signature': signature, |
|||
}, |
|||
timeout: 10000, |
|||
}) |
|||
webhookNotification.deliveryAttemptCount += 1 |
|||
webhookNotification.lastDeliveryAttemptAt = now |
|||
webhookNotification.nextDeliveryAttemptAt = this.getNextDeliveryAttemptAt( |
|||
webhookNotification.deliveryAttemptCount, |
|||
) |
|||
webhookNotification.deliveredAt = now |
|||
await webhookNotification.save() |
|||
|
|||
webhookSubscription.successfulDeliveryCount += 1 |
|||
webhookSubscription.lastDeliverySuccessAt = now |
|||
} catch (e) { |
|||
console.error( |
|||
`Failed to deliver webhook notification ${webhookNotification._id}: received response status code ${e.response.status}`, |
|||
) |
|||
webhookNotification.deliveryAttemptCount += 1 |
|||
webhookNotification.lastDeliveryAttemptAt = now |
|||
webhookNotification.nextDeliveryAttemptAt = this.getNextDeliveryAttemptAt( |
|||
webhookNotification.deliveryAttemptCount, |
|||
) |
|||
await webhookNotification.save() |
|||
} finally { |
|||
webhookSubscription.deliveryAttemptCount += 1 |
|||
await webhookSubscription.save() |
|||
} |
|||
} |
|||
|
|||
private getNextDeliveryAttemptAt(deliveryAttemptCount: number): Date { |
|||
// Delays in minutes after a failed delivery attempt
|
|||
const delaySequence = [ |
|||
3, // 3 minutes
|
|||
5, // 5 minutes
|
|||
30, // 30 minutes
|
|||
60, // 1 hour
|
|||
360, // 6 hours
|
|||
1440, // 1 day
|
|||
4320, // 3 days
|
|||
10080, // 7 days
|
|||
43200, // 30 days
|
|||
] |
|||
|
|||
// Get the delay in minutes (use last value if attempt count exceeds sequence length)
|
|||
const delayInMinutes = |
|||
delaySequence[ |
|||
Math.min(deliveryAttemptCount - 1, delaySequence.length - 1) |
|||
] || delaySequence[delaySequence.length - 1] |
|||
|
|||
// Convert minutes to milliseconds and add to current time
|
|||
return new Date(Date.now() + delayInMinutes * 60 * 1000) |
|||
} |
|||
|
|||
// Check for notifications that need to be delivered every 3 minutes
|
|||
@Cron('0 */3 * * * *') |
|||
async checkForNotificationsToDeliver() { |
|||
const now = new Date() |
|||
const notifications = await this.webhookNotificationModel |
|||
.find({ |
|||
nextDeliveryAttemptAt: { $lte: now }, |
|||
deliveredAt: null, |
|||
deliveryAttemptCount: { $lt: 10 }, |
|||
deliveryAttemptAbortedAt: null, |
|||
}) |
|||
.sort({ nextDeliveryAttemptAt: 1 }) |
|||
.limit(30) |
|||
|
|||
if (notifications.length === 0) { |
|||
return |
|||
} |
|||
|
|||
console.log(`delivering ${notifications.length} webhook notifications`) |
|||
|
|||
for (const notification of notifications) { |
|||
await this.attemptWebhookDelivery(notification) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,198 @@ |
|||
'use client' |
|||
|
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogDescription, |
|||
DialogHeader, |
|||
DialogTitle, |
|||
} from '@/components/ui/dialog' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Input } from '@/components/ui/input' |
|||
import { |
|||
Form, |
|||
FormControl, |
|||
FormDescription, |
|||
FormField, |
|||
FormItem, |
|||
FormLabel, |
|||
FormMessage, |
|||
} from '@/components/ui/form' |
|||
import { |
|||
Select, |
|||
SelectContent, |
|||
SelectItem, |
|||
SelectTrigger, |
|||
SelectValue, |
|||
} from '@/components/ui/select' |
|||
import { zodResolver } from '@hookform/resolvers/zod' |
|||
import { useForm } from 'react-hook-form' |
|||
import * as z from 'zod' |
|||
import { v4 as uuidv4 } from 'uuid' |
|||
import { WebhookData } from '@/lib/types' |
|||
import { WEBHOOK_EVENTS } from '@/lib/constants' |
|||
import httpBrowserClient from '@/lib/httpBrowserClient' |
|||
import { ApiEndpoints } from '@/config/api' |
|||
import { useToast } from '@/hooks/use-toast' |
|||
import { useMutation, useQueryClient } from '@tanstack/react-query' |
|||
|
|||
const formSchema = z.object({ |
|||
deliveryUrl: z.string().url({ message: 'Please enter a valid URL' }), |
|||
events: z.array(z.string()).min(1, { message: 'Select at least one event' }), |
|||
isActive: z.boolean().default(true), |
|||
signingSecret: z.string().min(1, { message: 'Signing secret is required' }), |
|||
}) |
|||
|
|||
interface CreateWebhookDialogProps { |
|||
open: boolean |
|||
onOpenChange: (open: boolean) => void |
|||
} |
|||
|
|||
export function CreateWebhookDialog({ |
|||
open, |
|||
onOpenChange, |
|||
}: CreateWebhookDialogProps) { |
|||
const { toast } = useToast() |
|||
const queryClient = useQueryClient() |
|||
|
|||
const form = useForm<z.infer<typeof formSchema>>({ |
|||
resolver: zodResolver(formSchema), |
|||
defaultValues: { |
|||
deliveryUrl: '', |
|||
events: [WEBHOOK_EVENTS.MESSAGE_RECEIVED], |
|||
isActive: true, |
|||
signingSecret: uuidv4(), |
|||
}, |
|||
}) |
|||
|
|||
const createWebhookMutation = useMutation({ |
|||
mutationFn: (values: z.infer<typeof formSchema>) => |
|||
httpBrowserClient.post(ApiEndpoints.gateway.createWebhook(), values), |
|||
onSuccess: () => { |
|||
toast({ |
|||
title: 'Success', |
|||
description: 'Webhook created successfully', |
|||
}) |
|||
queryClient.invalidateQueries({ queryKey: ['webhooks'] }) |
|||
onOpenChange(false) |
|||
form.reset() |
|||
}, |
|||
onError: () => { |
|||
toast({ |
|||
title: 'Error', |
|||
description: 'Failed to create webhook', |
|||
variant: 'destructive', |
|||
}) |
|||
}, |
|||
}) |
|||
|
|||
const onSubmit = (values: z.infer<typeof formSchema>) => { |
|||
createWebhookMutation.mutate(values) |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent className='sm:max-w-[500px]'> |
|||
<DialogHeader> |
|||
<DialogTitle>Create Webhook</DialogTitle> |
|||
<DialogDescription> |
|||
Configure your webhook endpoint to receive real-time SMS |
|||
notifications. |
|||
</DialogDescription> |
|||
</DialogHeader> |
|||
<Form {...form}> |
|||
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'> |
|||
<FormField |
|||
control={form.control} |
|||
name='deliveryUrl' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Delivery URL</FormLabel> |
|||
<FormControl> |
|||
<Input |
|||
placeholder='https://api.example.com/webhooks' |
|||
{...field} |
|||
/> |
|||
</FormControl> |
|||
<FormDescription> |
|||
The URL where webhook notifications will be sent via POST |
|||
requests |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<FormField |
|||
control={form.control} |
|||
name='signingSecret' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Signing Secret</FormLabel> |
|||
<FormControl> |
|||
<div className='flex space-x-2'> |
|||
<Input {...field} type='text' /> |
|||
<Button |
|||
type='button' |
|||
variant='outline' |
|||
onClick={() => field.onChange(uuidv4())} |
|||
> |
|||
Generate |
|||
</Button> |
|||
</div> |
|||
</FormControl> |
|||
<FormDescription> |
|||
Used to verify webhook payload authenticity |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<FormField |
|||
control={form.control} |
|||
name='events' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Events</FormLabel> |
|||
<Select |
|||
value={field.value[0]} |
|||
onValueChange={(value) => field.onChange([value])} |
|||
> |
|||
<FormControl> |
|||
<SelectTrigger> |
|||
<SelectValue placeholder='Select events to subscribe to' /> |
|||
</SelectTrigger> |
|||
</FormControl> |
|||
<SelectContent> |
|||
<SelectItem value={WEBHOOK_EVENTS.MESSAGE_RECEIVED}> |
|||
SMS Received |
|||
</SelectItem> |
|||
</SelectContent> |
|||
</Select> |
|||
<FormDescription> |
|||
Choose the events you want to receive notifications for |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<div className='flex justify-end space-x-2'> |
|||
<Button |
|||
type='button' |
|||
variant='outline' |
|||
onClick={() => onOpenChange(false)} |
|||
> |
|||
Cancel |
|||
</Button> |
|||
<Button |
|||
type='submit' |
|||
disabled={createWebhookMutation.isPending} |
|||
> |
|||
{createWebhookMutation.isPending ? 'Creating...' : 'Create'} |
|||
</Button> |
|||
</div> |
|||
</form> |
|||
</Form> |
|||
</DialogContent> |
|||
</Dialog> |
|||
) |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
'use client' |
|||
|
|||
import { |
|||
AlertDialog, |
|||
AlertDialogAction, |
|||
AlertDialogCancel, |
|||
AlertDialogContent, |
|||
AlertDialogDescription, |
|||
AlertDialogFooter, |
|||
AlertDialogHeader, |
|||
AlertDialogTitle, |
|||
AlertDialogTrigger, |
|||
} from '@/components/ui/alert-dialog' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Trash2 } from 'lucide-react' |
|||
|
|||
interface DeleteWebhookButtonProps { |
|||
onDelete: () => void |
|||
} |
|||
|
|||
export function DeleteWebhookButton({ onDelete }: DeleteWebhookButtonProps) { |
|||
return ( |
|||
<AlertDialog> |
|||
<AlertDialogTrigger asChild> |
|||
<Button variant='outline' size='sm' disabled> |
|||
<Trash2 className='h-4 w-4 text-destructive' /> |
|||
</Button> |
|||
</AlertDialogTrigger> |
|||
<AlertDialogContent> |
|||
<AlertDialogHeader> |
|||
<AlertDialogTitle>Delete Webhook</AlertDialogTitle> |
|||
<AlertDialogDescription> |
|||
Are you sure you want to delete this webhook? This action cannot be |
|||
undone. |
|||
</AlertDialogDescription> |
|||
</AlertDialogHeader> |
|||
<AlertDialogFooter> |
|||
<AlertDialogCancel>Cancel</AlertDialogCancel> |
|||
<AlertDialogAction |
|||
onClick={onDelete} |
|||
disabled |
|||
className='bg-destructive text-destructive-foreground hover:bg-destructive/90' |
|||
> |
|||
Delete |
|||
</AlertDialogAction> |
|||
</AlertDialogFooter> |
|||
</AlertDialogContent> |
|||
</AlertDialog> |
|||
) |
|||
} |
|||
@ -0,0 +1,201 @@ |
|||
'use client' |
|||
|
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogDescription, |
|||
DialogHeader, |
|||
DialogTitle, |
|||
} from '@/components/ui/dialog' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Input } from '@/components/ui/input' |
|||
import { |
|||
Form, |
|||
FormControl, |
|||
FormDescription, |
|||
FormField, |
|||
FormItem, |
|||
FormLabel, |
|||
FormMessage, |
|||
} from '@/components/ui/form' |
|||
import { |
|||
Select, |
|||
SelectContent, |
|||
SelectItem, |
|||
SelectTrigger, |
|||
SelectValue, |
|||
} from '@/components/ui/select' |
|||
import { zodResolver } from '@hookform/resolvers/zod' |
|||
import { useForm } from 'react-hook-form' |
|||
import * as z from 'zod' |
|||
import { useEffect, useState } from 'react' |
|||
import { v4 as uuidv4 } from 'uuid' |
|||
import { WebhookData } from '@/lib/types' |
|||
import { WEBHOOK_EVENTS } from '@/lib/constants' |
|||
import httpBrowserClient from '@/lib/httpBrowserClient' |
|||
import { ApiEndpoints } from '@/config/api' |
|||
import { useToast } from '@/hooks/use-toast' |
|||
import { useMutation, useQueryClient } from '@tanstack/react-query' |
|||
|
|||
const formSchema = z.object({ |
|||
deliveryUrl: z.string().url({ message: 'Please enter a valid URL' }), |
|||
events: z.array(z.string()).min(1, { message: 'Select at least one event' }), |
|||
isActive: z.boolean().default(true), |
|||
signingSecret: z.string().min(1, { message: 'Signing secret is required' }), |
|||
}) |
|||
|
|||
interface EditWebhookDialogProps { |
|||
open: boolean |
|||
onOpenChange: (open: boolean) => void |
|||
webhook: WebhookData |
|||
} |
|||
|
|||
export function EditWebhookDialog({ |
|||
open, |
|||
onOpenChange, |
|||
webhook, |
|||
}: EditWebhookDialogProps) { |
|||
const queryClient = useQueryClient() |
|||
const { toast } = useToast() |
|||
|
|||
const form = useForm<z.infer<typeof formSchema>>({ |
|||
resolver: zodResolver(formSchema), |
|||
values: { |
|||
deliveryUrl: webhook.deliveryUrl, |
|||
events: webhook.events, |
|||
isActive: webhook.isActive, |
|||
signingSecret: webhook.signingSecret, |
|||
}, |
|||
}) |
|||
|
|||
const { mutate: updateWebhook, isPending } = useMutation({ |
|||
mutationFn: async (values: z.infer<typeof formSchema>) => { |
|||
return httpBrowserClient.patch( |
|||
ApiEndpoints.gateway.updateWebhook(webhook._id), |
|||
values |
|||
) |
|||
}, |
|||
onSuccess: () => { |
|||
toast({ |
|||
title: 'Success', |
|||
description: 'Webhook updated successfully', |
|||
}) |
|||
// Invalidate and refetch webhooks list
|
|||
queryClient.invalidateQueries({ queryKey: ['webhooks'] }) |
|||
onOpenChange(false) |
|||
}, |
|||
onError: () => { |
|||
toast({ |
|||
title: 'Error', |
|||
description: 'Failed to update webhook', |
|||
variant: 'destructive', |
|||
}) |
|||
}, |
|||
}) |
|||
|
|||
const onSubmit = (values: z.infer<typeof formSchema>) => { |
|||
updateWebhook(values) |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent className='sm:max-w-[500px]'> |
|||
<DialogHeader> |
|||
<DialogTitle>Edit Webhook</DialogTitle> |
|||
<DialogDescription> |
|||
Update your webhook configuration. |
|||
</DialogDescription> |
|||
</DialogHeader> |
|||
<Form {...form}> |
|||
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'> |
|||
<FormField |
|||
control={form.control} |
|||
name='deliveryUrl' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Delivery URL</FormLabel> |
|||
<FormControl> |
|||
<Input |
|||
placeholder='https://api.example.com/webhooks' |
|||
{...field} |
|||
/> |
|||
</FormControl> |
|||
<FormDescription> |
|||
The URL where webhook notifications will be sent via POST |
|||
requests |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<FormField |
|||
control={form.control} |
|||
name='signingSecret' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Signing Secret</FormLabel> |
|||
<FormControl> |
|||
<div className='flex space-x-2'> |
|||
<Input {...field} type='text' /> |
|||
<Button |
|||
type='button' |
|||
variant='outline' |
|||
onClick={() => field.onChange(uuidv4())} |
|||
> |
|||
Generate |
|||
</Button> |
|||
</div> |
|||
</FormControl> |
|||
<FormDescription> |
|||
Used to verify webhook payload authenticity |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<FormField |
|||
control={form.control} |
|||
name='events' |
|||
render={({ field }) => ( |
|||
<FormItem> |
|||
<FormLabel>Events</FormLabel> |
|||
<Select |
|||
value={field.value[0]} |
|||
onValueChange={(value) => field.onChange([value])} |
|||
> |
|||
<FormControl> |
|||
<SelectTrigger> |
|||
<SelectValue placeholder='Select events to subscribe to' /> |
|||
</SelectTrigger> |
|||
</FormControl> |
|||
<SelectContent> |
|||
<SelectItem value={WEBHOOK_EVENTS.MESSAGE_RECEIVED}> |
|||
SMS Received |
|||
</SelectItem> |
|||
</SelectContent> |
|||
</Select> |
|||
<FormDescription> |
|||
Choose the events you want to receive notifications for |
|||
</FormDescription> |
|||
<FormMessage /> |
|||
</FormItem> |
|||
)} |
|||
/> |
|||
<div className='flex justify-end space-x-2'> |
|||
<Button |
|||
type='button' |
|||
variant='outline' |
|||
onClick={() => onOpenChange(false)} |
|||
> |
|||
Cancel |
|||
</Button> |
|||
<Button type='submit' disabled={isPending}> |
|||
{isPending ? 'Updating...' : 'Update'} |
|||
</Button> |
|||
</div> |
|||
</form> |
|||
</Form> |
|||
</DialogContent> |
|||
</Dialog> |
|||
) |
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
'use client' |
|||
|
|||
import { Card, CardContent, CardHeader } from '@/components/ui/card' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Badge } from '@/components/ui/badge' |
|||
import { DeleteWebhookButton } from './delete-webhook-button' |
|||
import { Edit2, Eye, EyeOff } from 'lucide-react' |
|||
import { Switch } from '@/components/ui/switch' |
|||
import { useState } from 'react' |
|||
import { useToast } from '@/hooks/use-toast' |
|||
import { CopyButton } from '@/components/shared/copy-button' |
|||
import { WebhookData } from '@/lib/types' |
|||
import httpBrowserClient from '@/lib/httpBrowserClient' |
|||
import { ApiEndpoints } from '@/config/api' |
|||
import { useQueryClient } from '@tanstack/react-query' |
|||
|
|||
interface WebhookCardProps { |
|||
webhook: WebhookData |
|||
onEdit: () => void |
|||
onDelete?: () => void |
|||
} |
|||
|
|||
export function WebhookCard({ webhook, onEdit, onDelete }: WebhookCardProps) { |
|||
const { toast } = useToast() |
|||
const [isLoading, setIsLoading] = useState(false) |
|||
const queryClient = useQueryClient() |
|||
const [showSecret, setShowSecret] = useState(false) |
|||
|
|||
const handleToggle = async (checked: boolean) => { |
|||
setIsLoading(true) |
|||
try { |
|||
await httpBrowserClient.patch( |
|||
ApiEndpoints.gateway.updateWebhook(webhook._id), |
|||
{ isActive: checked } |
|||
) |
|||
|
|||
await queryClient.invalidateQueries({ |
|||
queryKey: ['webhooks'] |
|||
}) |
|||
|
|||
toast({ |
|||
title: `Webhook ${checked ? 'enabled' : 'disabled'}`, |
|||
description: `Webhook notifications are now ${ |
|||
checked ? 'enabled' : 'disabled' |
|||
}.`,
|
|||
}) |
|||
} catch (error) { |
|||
toast({ |
|||
title: 'Error', |
|||
description: `Failed to ${checked ? 'enable' : 'disable'} webhook`, |
|||
variant: 'destructive', |
|||
}) |
|||
} finally { |
|||
setIsLoading(false) |
|||
} |
|||
} |
|||
|
|||
const maskSecret = (secret: string) => { |
|||
// if the secret is less than 18 characters, show all
|
|||
if (secret.length <= 18) { |
|||
return secret.slice(0, 18) |
|||
} |
|||
return secret.slice(0, 18) + '*'.repeat(secret.length - 24) |
|||
} |
|||
|
|||
return ( |
|||
<Card> |
|||
<CardHeader className='flex flex-row items-center justify-between'> |
|||
<div className='space-y-1'> |
|||
<div className='flex items-center space-x-2'> |
|||
<h3 className='text-lg font-semibold'>Webhook Endpoint</h3> |
|||
<Badge variant={webhook.isActive ? 'default' : 'secondary'}> |
|||
{webhook.isActive ? 'Active' : 'Inactive'} |
|||
</Badge> |
|||
</div> |
|||
<p className='text-sm text-muted-foreground'> |
|||
Notifications for SMS events |
|||
</p> |
|||
</div> |
|||
<div className='flex items-center space-x-2'> |
|||
<Switch |
|||
checked={webhook.isActive} |
|||
onCheckedChange={handleToggle} |
|||
disabled={isLoading} |
|||
/> |
|||
<Button variant='outline' size='sm' onClick={onEdit}> |
|||
<Edit2 className='h-4 w-4 mr-2' /> |
|||
Edit |
|||
</Button> |
|||
<DeleteWebhookButton onDelete={onDelete} /> |
|||
</div> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className='space-y-4'> |
|||
<div> |
|||
<label className='text-sm font-medium'>Delivery URL</label> |
|||
<div className='flex items-center mt-1'> |
|||
<code className='flex-1 bg-muted px-3 py-2 rounded-md text-sm'> |
|||
{webhook.deliveryUrl} |
|||
</code> |
|||
<CopyButton value={webhook.deliveryUrl} label='Copy URL' /> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<label className='text-sm font-medium'>Signing Secret</label> |
|||
<div className='flex items-center mt-1'> |
|||
<code className='flex-1 bg-muted px-3 py-2 rounded-md text-sm font-mono'> |
|||
{showSecret ? webhook.signingSecret : maskSecret(webhook.signingSecret)} |
|||
</code> |
|||
<Button |
|||
variant="ghost" |
|||
size="icon" |
|||
onClick={() => setShowSecret(!showSecret)} |
|||
className="mx-2" |
|||
> |
|||
{showSecret ? ( |
|||
<EyeOff className="h-4 w-4" /> |
|||
) : ( |
|||
<Eye className="h-4 w-4" /> |
|||
)} |
|||
</Button> |
|||
<CopyButton value={webhook.signingSecret} label='Copy Secret' /> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<label className='text-sm font-medium'>Events</label> |
|||
<div className='flex flex-wrap gap-2 mt-1'> |
|||
{webhook.events.map((event) => ( |
|||
<Badge key={event} variant='secondary'> |
|||
{event} |
|||
</Badge> |
|||
))} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
) |
|||
} |
|||
@ -0,0 +1,169 @@ |
|||
'use client' |
|||
|
|||
import { |
|||
Accordion, |
|||
AccordionContent, |
|||
AccordionItem, |
|||
AccordionTrigger, |
|||
} from '@/components/ui/accordion' |
|||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' |
|||
import { Code } from '@/components/ui/code' |
|||
import { AlertCircle } from 'lucide-react' |
|||
|
|||
const SAMPLE_PAYLOAD = { |
|||
smsId: 'smsId', |
|||
sender: '+123456789', |
|||
message: 'message', |
|||
receivedAt: 'datetime', |
|||
deviceId: 'deviceId', |
|||
webhookSubscriptionId: 'webhookSubscriptionId', |
|||
webhookEvent: 'sms.received', |
|||
} |
|||
|
|||
const VERIFICATION_CODE = `
|
|||
// Node.js example using crypto
|
|||
const crypto = require('crypto'); |
|||
|
|||
function verifyWebhookSignature(payload, signature, secret) { |
|||
const hmac = crypto.createHmac('sha256', secret); |
|||
const digest = hmac.update(JSON.stringify(payload)).digest('hex'); |
|||
const signatureHash = signature.split('=')[1]; |
|||
|
|||
return crypto.timingSafeEqual( |
|||
Buffer.from(signatureHash), |
|||
Buffer.from(digest) |
|||
); |
|||
} |
|||
|
|||
// Express middleware example
|
|||
app.post('/webhook', (req, res) => { |
|||
const signature = req.headers['x-signature']; |
|||
const payload = req.body; |
|||
|
|||
if (!verifyWebhookSignature(payload, signature, WEBHOOK_SECRET)) { |
|||
return res.status(401).json({ error: 'Invalid signature' }); |
|||
} |
|||
|
|||
// Process the webhook
|
|||
console.log('Webhook verified:', payload); |
|||
res.status(200).send('OK'); |
|||
}); |
|||
`
|
|||
|
|||
const PYTHON_CODE = `
|
|||
# Python example using hmac |
|||
import hmac |
|||
import hashlib |
|||
import json |
|||
from flask import Flask, request |
|||
|
|||
app = Flask(__name__) |
|||
|
|||
def verify_signature(payload, signature, secret): |
|||
expected = hmac.new( |
|||
secret.encode('utf-8'), |
|||
json.dumps(payload).encode('utf-8'), |
|||
hashlib.sha256 |
|||
).hexdigest() |
|||
return hmac.compare_digest(signature.split('=')[1], expected) |
|||
|
|||
@app.route('/webhook', methods=['POST']) |
|||
def webhook(): |
|||
signature = request.headers.get('X-Signature') |
|||
if not verify_signature(request.json, signature, WEBHOOK_SECRET): |
|||
return 'Invalid signature', 401 |
|||
|
|||
# Process the webhook |
|||
print('Webhook verified:', request.json) |
|||
return 'OK', 200 |
|||
`
|
|||
|
|||
export function WebhookDocs() { |
|||
return ( |
|||
<Accordion type='multiple' className='w-full space-y-4'> |
|||
<AccordionItem value='delivery' className='border rounded-lg'> |
|||
<AccordionTrigger className='px-4 hover:no-underline [&[data-state=open]>div]:bg-muted'> |
|||
<div className='flex items-center gap-2 py-2 -my-2 px-2 rounded-md'> |
|||
<AlertCircle className='h-4 w-4' /> |
|||
<span>Webhook Delivery Information</span> |
|||
</div> |
|||
</AccordionTrigger> |
|||
<AccordionContent className='px-4 pb-4'> |
|||
<div className='space-y-2 mt-2 text-sm text-muted-foreground'> |
|||
<p> |
|||
When a new SMS is received, we'll send a POST request to your |
|||
webhook URL with the event data. Your endpoint should: |
|||
</p> |
|||
<ul className='list-disc pl-6 space-y-1'> |
|||
<li>Accept POST requests</li> |
|||
<li>Return a 2XX status code to acknowledge receipt</li> |
|||
<li>Process the request within 10 seconds</li> |
|||
</ul> |
|||
<p className='mt-2'> |
|||
If we don't receive a successful response, we'll retry the |
|||
delivery at increasing intervals: 3 minutes, 5 minutes, 30 minutes, |
|||
1 hour, 6 hours, 1 day, 3 days, 7 days, 30 days. |
|||
</p> |
|||
</div> |
|||
</AccordionContent> |
|||
</AccordionItem> |
|||
|
|||
<AccordionItem value='implementation' className='border rounded-lg'> |
|||
<AccordionTrigger className='px-4 hover:no-underline [&[data-state=open]>div]:bg-muted'> |
|||
<div className='flex items-center gap-2 py-2 -my-2 px-2 rounded-md'> |
|||
<AlertCircle className='h-4 w-4' /> |
|||
<span>Security & Implementation Guide</span> |
|||
</div> |
|||
</AccordionTrigger> |
|||
<AccordionContent className='px-4 pb-4'> |
|||
<Tabs defaultValue='overview' className='w-full mt-4'> |
|||
<TabsList> |
|||
<TabsTrigger value='overview'>Overview</TabsTrigger> |
|||
<TabsTrigger value='payload'>Payload</TabsTrigger> |
|||
<TabsTrigger value='verification'>Verification</TabsTrigger> |
|||
</TabsList> |
|||
|
|||
<TabsContent value='overview'> |
|||
<div className='space-y-2 mt-4 text-sm text-muted-foreground'> |
|||
<p>Each webhook request includes:</p> |
|||
<ul className='list-disc pl-6 space-y-1'> |
|||
<li>Payload in JSON format</li> |
|||
<li>X-Signature header for verification</li> |
|||
<li> |
|||
Signature format: sha256=HMAC_SHA256(payload, secret) |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</TabsContent> |
|||
|
|||
<TabsContent value='payload'> |
|||
<div className='space-y-4 mt-4'> |
|||
<h4 className='text-sm font-medium'>Sample Payload</h4> |
|||
<Code>{JSON.stringify(SAMPLE_PAYLOAD, null, 2)}</Code> |
|||
</div> |
|||
</TabsContent> |
|||
|
|||
<TabsContent value='verification'> |
|||
<div className='space-y-4 mt-4'> |
|||
<Tabs defaultValue='node'> |
|||
<TabsList> |
|||
<TabsTrigger value='node'>Node.js</TabsTrigger> |
|||
<TabsTrigger value='python'>Python</TabsTrigger> |
|||
</TabsList> |
|||
|
|||
<TabsContent value='node'> |
|||
<Code>{VERIFICATION_CODE}</Code> |
|||
</TabsContent> |
|||
|
|||
<TabsContent value='python'> |
|||
<Code>{PYTHON_CODE}</Code> |
|||
</TabsContent> |
|||
</Tabs> |
|||
</div> |
|||
</TabsContent> |
|||
</Tabs> |
|||
</AccordionContent> |
|||
</AccordionItem> |
|||
</Accordion> |
|||
) |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
'use client' |
|||
|
|||
import { Button } from '@/components/ui/button' |
|||
import { PlusCircle, Webhook } from 'lucide-react' |
|||
import { useState } from 'react' |
|||
import { WebhookData } from '@/lib/types' |
|||
import { WebhookCard } from './webhook-card' |
|||
import { WebhookDocs } from './webhook-docs' |
|||
import { CreateWebhookDialog } from './create-webhook-dialog' |
|||
import { EditWebhookDialog } from './edit-webhook-dialog' |
|||
import { useQuery, useQueryClient } from '@tanstack/react-query' |
|||
import httpBrowserClient from '@/lib/httpBrowserClient' |
|||
import { ApiEndpoints } from '@/config/api' |
|||
import { Skeleton } from '@/components/ui/skeleton' |
|||
import { |
|||
Tooltip, |
|||
TooltipContent, |
|||
TooltipProvider, |
|||
TooltipTrigger, |
|||
} from "@/components/ui/tooltip" |
|||
|
|||
function WebhookCardSkeleton() { |
|||
return ( |
|||
<div className='rounded-lg border p-6 space-y-4'> |
|||
<div className='flex items-center justify-between'> |
|||
<div className='space-y-2'> |
|||
<Skeleton className='h-5 w-[200px]' /> |
|||
<Skeleton className='h-4 w-[150px]' /> |
|||
</div> |
|||
<div className='flex space-x-2'> |
|||
<Skeleton className='h-9 w-9' /> |
|||
<Skeleton className='h-9 w-16' /> |
|||
<Skeleton className='h-9 w-9' /> |
|||
</div> |
|||
</div> |
|||
<div className='space-y-4'> |
|||
<div> |
|||
<Skeleton className='h-4 w-[100px] mb-2' /> |
|||
<Skeleton className='h-10 w-full' /> |
|||
</div> |
|||
<div> |
|||
<Skeleton className='h-4 w-[100px] mb-2' /> |
|||
<Skeleton className='h-10 w-full' /> |
|||
</div> |
|||
<div> |
|||
<Skeleton className='h-4 w-[100px] mb-2' /> |
|||
<div className='flex gap-2'> |
|||
<Skeleton className='h-6 w-20' /> |
|||
<Skeleton className='h-6 w-20' /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default function WebhooksSection() { |
|||
const [createDialogOpen, setCreateDialogOpen] = useState(false) |
|||
const [editDialogOpen, setEditDialogOpen] = useState(false) |
|||
const [selectedWebhook, setSelectedWebhook] = useState<WebhookData | null>( |
|||
null |
|||
) |
|||
const queryClient = useQueryClient() |
|||
|
|||
const { |
|||
data: webhooks, |
|||
isLoading, |
|||
error, |
|||
} = useQuery({ |
|||
queryKey: ['webhooks'], |
|||
queryFn: () => |
|||
httpBrowserClient |
|||
.get(ApiEndpoints.gateway.getWebhooks()) |
|||
.then((res) => res.data), |
|||
}) |
|||
|
|||
const handleCreateClick = () => { |
|||
setCreateDialogOpen(true) |
|||
} |
|||
|
|||
const handleEditClick = (webhook: WebhookData) => { |
|||
setSelectedWebhook(webhook) |
|||
setEditDialogOpen(true) |
|||
} |
|||
|
|||
return ( |
|||
<div className='container mx-auto py-8'> |
|||
<div className='flex justify-between items-center mb-8'> |
|||
<div> |
|||
<h1 className='text-3xl font-bold flex items-center gap-2'> |
|||
<Webhook className='h-8 w-8' /> |
|||
Webhooks |
|||
<TooltipProvider> |
|||
<Tooltip> |
|||
<TooltipTrigger> |
|||
<span className='text-xs font-medium px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'> |
|||
BETA |
|||
</span> |
|||
</TooltipTrigger> |
|||
<TooltipContent> |
|||
<p>This feature is in beta and may undergo changes. Use with caution in production environments.</p> |
|||
</TooltipContent> |
|||
</Tooltip> |
|||
</TooltipProvider> |
|||
</h1> |
|||
<p className='text-muted-foreground mt-2'> |
|||
Manage webhook notifications for your SMS events |
|||
</p> |
|||
</div> |
|||
<Button |
|||
onClick={handleCreateClick} |
|||
disabled={webhooks?.data?.length > 0 || isLoading} |
|||
variant='default' |
|||
> |
|||
<PlusCircle className='mr-2 h-4 w-4' /> |
|||
Create Webhook |
|||
</Button> |
|||
</div> |
|||
|
|||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-8'> |
|||
<div> |
|||
{isLoading ? ( |
|||
<div className='grid gap-4'> |
|||
<WebhookCardSkeleton /> |
|||
<WebhookCardSkeleton /> |
|||
</div> |
|||
) : error ? ( |
|||
<div className='rounded-lg border border-destructive/50 p-4 text-destructive'> |
|||
Error: {error.message} |
|||
</div> |
|||
) : webhooks?.data?.length > 0 ? ( |
|||
<div className='grid gap-4'> |
|||
{webhooks.data.map((webhook) => ( |
|||
<WebhookCard |
|||
key={webhook._id} |
|||
webhook={webhook} |
|||
onEdit={() => handleEditClick(webhook)} |
|||
/> |
|||
))} |
|||
</div> |
|||
) : ( |
|||
<div className='bg-muted/50 rounded-lg p-8 text-center'> |
|||
<h3 className='text-lg font-medium mb-2'>No webhook configured</h3> |
|||
<p className='text-muted-foreground mb-4'> |
|||
Create a webhook to receive real-time notifications for SMS events |
|||
</p> |
|||
<Button onClick={handleCreateClick} variant='default'> |
|||
<PlusCircle className='mr-2 h-4 w-4' /> |
|||
Create Webhook |
|||
</Button> |
|||
</div> |
|||
)} |
|||
</div> |
|||
|
|||
<div className='hidden lg:block sticky top-8 self-start'> |
|||
<WebhookDocs /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className='block lg:hidden mt-8'> |
|||
<WebhookDocs /> |
|||
</div> |
|||
|
|||
<CreateWebhookDialog |
|||
open={createDialogOpen} |
|||
onOpenChange={setCreateDialogOpen} |
|||
/> |
|||
|
|||
{selectedWebhook && ( |
|||
<EditWebhookDialog |
|||
open={editDialogOpen} |
|||
onOpenChange={setEditDialogOpen} |
|||
webhook={selectedWebhook} |
|||
/> |
|||
)} |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
"use client"; |
|||
|
|||
import { Button } from "@/components/ui/button"; |
|||
import { Check, Copy } from "lucide-react"; |
|||
import { useState } from "react"; |
|||
import { useToast } from "@/hooks/use-toast"; |
|||
|
|||
interface CopyButtonProps { |
|||
value: string; |
|||
label: string; |
|||
} |
|||
|
|||
export function CopyButton({ value, label }: CopyButtonProps) { |
|||
const [copied, setCopied] = useState(false); |
|||
const { toast } = useToast(); |
|||
|
|||
const copyToClipboard = async () => { |
|||
try { |
|||
await navigator.clipboard.writeText(value); |
|||
setCopied(true); |
|||
toast({ |
|||
title: "Copied!", |
|||
description: `${label} copied to clipboard`, |
|||
}); |
|||
setTimeout(() => setCopied(false), 2000); |
|||
} catch (err) { |
|||
toast({ |
|||
title: "Failed to copy", |
|||
description: "Please try again", |
|||
variant: "destructive", |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={copyToClipboard} |
|||
className="ml-2" |
|||
> |
|||
{copied ? ( |
|||
<Check className="h-4 w-4 text-green-500" /> |
|||
) : ( |
|||
<Copy className="h-4 w-4" /> |
|||
)} |
|||
</Button> |
|||
); |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
"use client" |
|||
|
|||
import * as React from "react" |
|||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" |
|||
|
|||
import { cn } from "@/lib/utils" |
|||
import { buttonVariants } from "@/components/ui/button" |
|||
|
|||
const AlertDialog = AlertDialogPrimitive.Root |
|||
|
|||
const AlertDialogTrigger = AlertDialogPrimitive.Trigger |
|||
|
|||
const AlertDialogPortal = AlertDialogPrimitive.Portal |
|||
|
|||
const AlertDialogOverlay = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Overlay>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPrimitive.Overlay |
|||
className={cn( |
|||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", |
|||
className |
|||
)} |
|||
{...props} |
|||
ref={ref} |
|||
/> |
|||
)) |
|||
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName |
|||
|
|||
const AlertDialogContent = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPortal> |
|||
<AlertDialogOverlay /> |
|||
<AlertDialogPrimitive.Content |
|||
ref={ref} |
|||
className={cn( |
|||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
</AlertDialogPortal> |
|||
)) |
|||
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName |
|||
|
|||
const AlertDialogHeader = ({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLDivElement>) => ( |
|||
<div |
|||
className={cn( |
|||
"flex flex-col space-y-2 text-center sm:text-left", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
) |
|||
AlertDialogHeader.displayName = "AlertDialogHeader" |
|||
|
|||
const AlertDialogFooter = ({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLDivElement>) => ( |
|||
<div |
|||
className={cn( |
|||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
) |
|||
AlertDialogFooter.displayName = "AlertDialogFooter" |
|||
|
|||
const AlertDialogTitle = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Title>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPrimitive.Title |
|||
ref={ref} |
|||
className={cn("text-lg font-semibold", className)} |
|||
{...props} |
|||
/> |
|||
)) |
|||
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName |
|||
|
|||
const AlertDialogDescription = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Description>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPrimitive.Description |
|||
ref={ref} |
|||
className={cn("text-sm text-muted-foreground", className)} |
|||
{...props} |
|||
/> |
|||
)) |
|||
AlertDialogDescription.displayName = |
|||
AlertDialogPrimitive.Description.displayName |
|||
|
|||
const AlertDialogAction = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Action>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPrimitive.Action |
|||
ref={ref} |
|||
className={cn(buttonVariants(), className)} |
|||
{...props} |
|||
/> |
|||
)) |
|||
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName |
|||
|
|||
const AlertDialogCancel = React.forwardRef< |
|||
React.ElementRef<typeof AlertDialogPrimitive.Cancel>, |
|||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> |
|||
>(({ className, ...props }, ref) => ( |
|||
<AlertDialogPrimitive.Cancel |
|||
ref={ref} |
|||
className={cn( |
|||
buttonVariants({ variant: "outline" }), |
|||
"mt-2 sm:mt-0", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)) |
|||
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName |
|||
|
|||
export { |
|||
AlertDialog, |
|||
AlertDialogPortal, |
|||
AlertDialogOverlay, |
|||
AlertDialogTrigger, |
|||
AlertDialogContent, |
|||
AlertDialogHeader, |
|||
AlertDialogFooter, |
|||
AlertDialogTitle, |
|||
AlertDialogDescription, |
|||
AlertDialogAction, |
|||
AlertDialogCancel, |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
import { cn } from "@/lib/utils"; |
|||
|
|||
interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {} |
|||
|
|||
export function Code({ className, children, ...props }: CodeProps) { |
|||
return ( |
|||
<pre |
|||
className={cn( |
|||
"rounded-lg bg-muted p-4 overflow-x-auto text-sm", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
<code>{children}</code> |
|||
</pre> |
|||
); |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import { cn } from "@/lib/utils" |
|||
|
|||
function Skeleton({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLDivElement>) { |
|||
return ( |
|||
<div |
|||
className={cn("animate-pulse rounded-md bg-primary/10", className)} |
|||
{...props} |
|||
/> |
|||
) |
|||
} |
|||
|
|||
export { Skeleton } |
|||
@ -0,0 +1,32 @@ |
|||
"use client" |
|||
|
|||
import * as React from "react" |
|||
import * as TooltipPrimitive from "@radix-ui/react-tooltip" |
|||
|
|||
import { cn } from "@/lib/utils" |
|||
|
|||
const TooltipProvider = TooltipPrimitive.Provider |
|||
|
|||
const Tooltip = TooltipPrimitive.Root |
|||
|
|||
const TooltipTrigger = TooltipPrimitive.Trigger |
|||
|
|||
const TooltipContent = React.forwardRef< |
|||
React.ElementRef<typeof TooltipPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> |
|||
>(({ className, sideOffset = 4, ...props }, ref) => ( |
|||
<TooltipPrimitive.Portal> |
|||
<TooltipPrimitive.Content |
|||
ref={ref} |
|||
sideOffset={sideOffset} |
|||
className={cn( |
|||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
</TooltipPrimitive.Portal> |
|||
)) |
|||
TooltipContent.displayName = TooltipPrimitive.Content.displayName |
|||
|
|||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } |
|||
@ -0,0 +1,3 @@ |
|||
export const WEBHOOK_EVENTS = { |
|||
MESSAGE_RECEIVED: 'MESSAGE_RECEIVED', |
|||
} as const |
|||
@ -0,0 +1,17 @@ |
|||
export interface WebhookData { |
|||
_id?: string |
|||
deliveryUrl: string |
|||
events: string[] |
|||
isActive: boolean |
|||
signingSecret: string |
|||
} |
|||
|
|||
export interface WebhookPayload { |
|||
smsId: string |
|||
sender: string |
|||
message: string |
|||
receivedAt: string |
|||
deviceId: string |
|||
webhookSubscriptionId: string |
|||
webhookEvent: string |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue