Transfer-webhook page Implementaion

.vscode/settings.json

@@ -14,7 +14,7 @@
         "editor.defaultFormatter": "vscode.json-language-features"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"

components/CodeBlock/index.tsx

@@ -4,49 +4,66 @@ import Prism from 'prismjs'
 import 'prismjs/components/prism-jsx.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
-import Styles from './index.module.scss';
+import 'prismjs/themes/prism-tomorrow.css'
+import Styles from './index.module.scss'
 import { snippets } from 'data/snippets'
 import classNames from 'classnames'
 
 interface IProps {
-    id?: string;
-    req?: string;
-    lang?: string;
+    id?: string
+    req?: string
+    lang?: string
+    className?: string
     children?: React.ReactNode
 }
 
-const Label = ({ label }) => {
+export const Label = ({ label }) => {
     const options = {
-        'POST': 'bg-suc-100'
+        POST: 'bg-suc-100',
     }
 
     return (
-        <div className={classNames(
-            options[label],
-            'uppercase text-neu-700 caption-s rounded-8 px-2.5 py-1')}>
+        <div
+            className={classNames(
+                options[label],
+                'uppercase text-neu-700 caption-s rounded-8 px-2.5 py-1',
+            )}
+        >
             {label}
         </div>
     )
-};
+}
 
-export default function CodeBlock({ id, lang = 'jsx', req = 'POST' }: IProps) {
-    const codeSnippet = snippets[id] || 'snippet not found';
+export default function CodeBlock({
+    id,
+    lang,
+    req = 'POST',
+    className,
+}: IProps) {
+    const codeSnippet = snippets[id] || 'snippet not found'
     // const title = Object.keys(snippets).find(s => s === id);
 
     useEffect(() => {
         Prism.highlightAll()
     }, [])
 
     return (
-        <div className={classNames(Styles.CodeBlock, 'flex font-code pb-2 bg-white flex-col')}>
+        <div
+            className={classNames(
+                Styles.CodeBlock,
+                'flex font-code pb-2 bg-white flex-col',
+            )}
+        >
             <div className='flex items-center px-10 py-4 space-x-5 bg-neu-50 head rounded-t-8'>
                 <Label label={req} />
             </div>
             <code>
-                <pre className="!my-0 line-numbers">
-                    <code className={classNames(`language-${lang}`)}>{codeSnippet}</code>
+                <pre className={className + '!my-0 line-numbers'}>
+                    <code className={classNames(`language-${lang || 'jsx'}`)}>
+                        {codeSnippet}
+                    </code>
                 </pre>
             </code>
         </div>
     )
-};
+}

components/GetstartedCard/index.tsx

@@ -1,13 +1,11 @@
 import classNames from 'classnames'
 import Styles from './index.module.scss'
-import { PlainCard } from './Cards'
 import LinkedCard from './Cards'
 import {
   completeYourIntegrationData,
   startIntegratingData,
   testAndGoData,
 } from './data'
-import HandsWithPenny from 'public/icons/handsWithPenny'
 
 // 1 Start integrating
 export default function GetStarted(): JSX.Element {
@@ -19,7 +17,15 @@ export default function GetStarted(): JSX.Element {
       )}
     >
       {startIntegratingData.map(({ title, desc, route }) => {
-        return <LinkedCard icon={true} key={route} title={title} desc={desc} route={route} />
+        return (
+          <LinkedCard
+            icon={true}
+            key={route}
+            title={title}
+            desc={desc}
+            route={route}
+          />
+        )
       })}
     </section>
   )
@@ -35,7 +41,9 @@ export function CompleteIntegration(): JSX.Element {
       )}
     >
       {completeYourIntegrationData.map(({ title, desc, route }) => {
-        return <LinkedCard key={route} title={title} desc={desc} route={route} />
+        return (
+          <LinkedCard key={route} title={title} desc={desc} route={route} />
+        )
       })}
     </section>
   )
@@ -51,7 +59,9 @@ export function TestAndGoLive(): JSX.Element {
       )}
     >
       {testAndGoData.map(({ title, desc, route }) => {
-        return <PlainCard  key={route} title={title} desc={desc} route={route} />
+        return (
+          <LinkedCard key={route} title={title} desc={desc} route={route} />
+        )
       })}
     </section>
   )

components/TransWebhook/index.tsx

@@ -0,0 +1,47 @@
+import CodeBlock from 'components/CodeBlock'
+import Divider from 'components/Divider'
+import LzAlert from 'components/UI/alert'
+import LzTable from 'components/UI/table'
+import DashboardScreenshot from 'public/icons/dashboardScreenshot'
+import React from 'react'
+
+const TransferWebHook = () => {
+  return (
+    <>
+      <div>
+        <section className='my-8'>
+          <div className='paragraph-2 my-7'>
+            You can specify your webhook URL on <code>your dashboard</code> and
+            where we will send <code>POST</code> request whenever an event
+            occurs
+            <p className='my-4'>
+              Here is how to setup a webhooks on your Lazerpay account
+            </p>
+            <ul className='flex flex-col mt-6 space-y-4'>
+              <li>
+                <code>1</code> Login to your <code>dashboard</code> and on{' '}
+                <b>settings</b>
+              </li>
+              <li>
+                <code>2</code> Navigate to the <b>API Keys and WeebHooks tab</b>
+              </li>
+              <li>
+                <code>3</code> Specify your webhook url and click on{' '}
+                <b>Update</b>
+              </li>
+            </ul>
+          </div>
+          <DashboardScreenshot />
+          <LzAlert
+            className='my-7'
+            status='info'
+            content={`When testing, you can get an instant webhook URL by visiting <code>webhook.site.</code> This will allow you
+             to inspect the received payload without having to write any code or set up a server.`}
+          />
+        </section>
+      </div>
+    </>
+  )
+}
+
+export default TransferWebHook

components/index.ts

@@ -6,6 +6,9 @@ import LzLink from './UI/link'
 import LzAlert from './UI/alert'
 import LinkedCard from './GetstartedCard/Cards'
 import { PlainCard } from './GetstartedCard/Cards';
+import { ShopifyIcon } from './../public/icons/shopify-icon';
+import { WordPressIcon } from './../public/icons/wordPress-Icon';
+import { WooCommerceIcon } from './../public/icons/wooCommerce-icon';
 
 // Page Components
 import FooterWrapper from './Footer'
@@ -21,8 +24,10 @@ import WhatsNew from './WhatsNew'
 import GetStartedCard from './GetstartedCard'
 import BankPayouts from './BankPayouts'
 import LzInput from './UI/input'
-import TestPayments from './TestPayments'
+import BinanceIcon from './TestPayments'
 import Ecommerce from './UseCases'
+import TransferWebHook from './TransWebhook'
+import TestPayments from './TestPayments'
 import LzTable from './UI/table'
 import Webhooks from './Webhooks'
 
@@ -46,8 +51,10 @@ export {
   LzContainer,
   GetStartedCard,
   BankPayouts,
+  BinanceIcon,
   TestPayments,
   LinkedCard,
+  TransferWebHook,
   PlainCard,
   Ecommerce,
   Webhooks

components/mdx-components.tsx

@@ -17,6 +17,7 @@ import LzAlert from './UI/alert'
 import LinkedCard, { PlainCard } from './GetstartedCard/Cards'
 import TransferCard from './TransferCard'
 import BankPayouts from './BankPayouts'
+import TransferWebHook from './TransWebhook'
 import TestPayments from './TestPayments'
 import Ecommerce from './UseCases'
 import LzTable from './UI/table'
@@ -25,7 +26,7 @@ import Webhooks from './Webhooks'
 /** Create a map of the HTML elements */
 export const components: Record<string, FC<Record<string, any>>> = {
   QuickLinks({ children, ...props }) {
-    return (<QuickLinks {...props} />)
+    return <QuickLinks {...props} />
   },
   AcceptPayments({ children, ...props }) {
     return <AcceptPayments {...props} />
@@ -40,10 +41,10 @@ export const components: Record<string, FC<Record<string, any>>> = {
     return <ConnectCommunity />
   },
   Divider({ children, ...props }) {
-    return (<Divider {...props} />)
+    return <Divider {...props} />
   },
   CodeBlock(props) {
-    return (<CodeBlock {...props} />)
+    return <CodeBlock {...props} />
   },
   Admonition(props) {
     return <div {...props} />
@@ -64,15 +65,15 @@ export const components: Record<string, FC<Record<string, any>>> = {
     return <TestAndGoLive />
   },
   Pagination(IProps) {
-    return (<Pagination {...IProps} />)
+    return <Pagination {...IProps} />
   },
   BankPayouts() {
     return <BankPayouts />
   },
-
   TestPayments() {
     return <TestPayments />
   },
+
   LinkedCard(MyProps) {
     return <LinkedCard {...MyProps} />
   },
@@ -91,6 +92,9 @@ export const components: Record<string, FC<Record<string, any>>> = {
   LzTable({ head, body }) {
     return <LzTable body={body} head={head} />
   },
+  TransferWebHook() {
+    return <TransferWebHook />
+  },
   p(props) {
     return <p className='paragraph-2 text-neu-800' {...props} />
   },
@@ -105,7 +109,7 @@ export const components: Record<string, FC<Record<string, any>>> = {
     )
   },
   h2(props) {
-    return <h2 className="heading-5-s group break-keep-all" {...props} />
+    return <h2 className='heading-5-s group break-keep-all' {...props} />
   },
   h3(props) {
     return <h3 {...props} />
@@ -138,14 +142,12 @@ export const components: Record<string, FC<Record<string, any>>> = {
     )
   },
   Alert(props) {
-    return (
-      <LzAlert {...props} />
-    )
-  }
+    return <LzAlert {...props} />
+  },
 }
 
 export function useMDX(code: string) {
-  if (!code) return;
+  if (!code) return
   const MDXComponent = useMDXComponent(code)
   return <MDXComponent components={components} />
 }

content/docs/transfers/get-started.mdx

@@ -18,6 +18,5 @@ Easily send money out of your account
 
 <TransferCard />
 
-<Divider className='max-w-50 mb-4' />
+<Divider className='w-20 mb-4' />
 
-<Pagination/>