feat: add webhook payload example

dashboard/src/components/InputField.tsx

@@ -12,7 +12,6 @@ import {
 	Select,
 	Textarea,
 	Switch,
-	Code,
 	Text,
 } from '@chakra-ui/react';
 import {

dashboard/src/components/UpdateWebhookModal.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import {
 	Button,
 	Center,
+	Code,
+	Collapse,
 	Flex,
 	Input,
 	InputGroup,
@@ -20,7 +22,13 @@ import {
 	useDisclosure,
 	useToast,
 } from '@chakra-ui/react';
-import { FaMinusCircle, FaPlus } from 'react-icons/fa';
+import {
+	FaAngleDown,
+	FaAngleUp,
+	FaMinusCircle,
+	FaPlus,
+	FaRegClone,
+} from 'react-icons/fa';
 import { useClient } from 'urql';
 import {
 	webhookEventNames,
@@ -29,8 +37,13 @@ import {
 	WebhookInputHeaderFields,
 	UpdateModalViews,
 	webhookVerifiedStatus,
+	webhookPayloadExample,
 } from '../constants';
-import { capitalizeFirstLetter, validateURI } from '../utils';
+import {
+	capitalizeFirstLetter,
+	copyTextToClipboard,
+	validateURI,
+} from '../utils';
 import { AddWebhook, EditWebhook, TestEndpoint } from '../graphql/mutation';
 import { BiCheckCircle, BiError, BiErrorCircle } from 'react-icons/bi';
 
@@ -102,6 +115,7 @@ const UpdateWebhookModal = ({
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const [loading, setLoading] = useState<boolean>(false);
 	const [verifyingEndpoint, setVerifyingEndpoint] = useState<boolean>(false);
+	const [isShowingPayload, setIsShowingPayload] = useState<boolean>(false);
 	const [webhook, setWebhook] = useState<webhookDataType>({
 		...initWebhookData,
 	});
@@ -454,6 +468,63 @@ const UpdateWebhookModal = ({
 									</Text>
 								</Flex>
 							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="center"
+								alignItems="center"
+								marginBottom="5%"
+								flexDirection="column"
+							>
+								<Flex
+									width="100%"
+									justifyContent="space-between"
+									alignItems="center"
+								>
+									<Flex>
+										Payload
+										<Text color="gray.500" ml={1}>
+											(example)
+										</Text>
+									</Flex>
+									<Button
+										onClick={() => setIsShowingPayload(!isShowingPayload)}
+										variant="ghost"
+									>
+										{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
+									</Button>
+								</Flex>
+								<Collapse
+									style={{
+										marginTop: 10,
+										width: '100%',
+									}}
+									in={isShowingPayload}
+								>
+									<Code
+										width="inherit"
+										borderRadius={5}
+										padding={2}
+										position="relative"
+									>
+										<pre style={{ overflow: 'auto' }}>
+											{webhookPayloadExample}
+										</pre>
+										{isShowingPayload && (
+											<Flex
+												position="absolute"
+												top={4}
+												right={4}
+												cursor="pointer"
+												onClick={() =>
+													copyTextToClipboard(webhookPayloadExample)
+												}
+											>
+												<FaRegClone color="#bfbfbf" />
+											</Flex>
+										)}
+									</Code>
+								</Collapse>
+							</Flex>
 							<Flex
 								width="100%"
 								justifyContent="space-between"

dashboard/src/constants.ts

@@ -228,3 +228,30 @@ export const emailTemplateVariables = {
 	verification_url: '{verification_url}}',
 	otp: '{otp}}',
 };
+
+export const webhookPayloadExample: string = `{
+	"event_name":"user.login",
+	"user":{
+	   "birthdate":null,
+	   "created_at":1657524721,
+	   "email":"lakhan.m.samani@gmail.com",
+	   "email_verified":true,
+	   "family_name":"Samani",
+	   "gender":null,
+	   "given_name":"Lakhan",
+	   "id":"466d0b31-1b87-420e-bea5-09d05d79c586",
+	   "middle_name":null,
+	   "nickname":null,
+	   "phone_number":null,
+	   "phone_number_verified":false,
+	   "picture":"https://lh3.googleusercontent.com/a-/AFdZucppvU6a2zIDkX0wvhhapVjT0ZMKDlYCkQDi3NxcUg=s96-c",
+	   "preferred_username":"lakhan.m.samani@gmail.com",
+	   "revoked_timestamp":null,
+	   "roles":[
+		  "user"
+	   ],
+	   "signup_methods":"google",
+	   "updated_at":1657526492
+	},
+	"auth_recipe":"google"
+ }`;