From 9cda32b64d0905aa650cb9e8115c372b0445f36d Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 25 Oct 2022 17:54:33 -0500
Subject: [PATCH] Updating Readwise Page and template + Webhooks Page and
 Template

---
 .../templates/integrations/Readwise.tsx       | 14 +---
 .../templates/integrations/Webhooks.tsx       | 68 +++++++++++++++++++
 packages/web/pages/settings/integrations.tsx  |  2 +-
 .../pages/settings/integrations/webhooks.tsx  | 15 ++++
 4 files changed, 87 insertions(+), 12 deletions(-)
 create mode 100644 packages/web/components/templates/integrations/Webhooks.tsx
 create mode 100644 packages/web/pages/settings/integrations/webhooks.tsx

diff --git a/packages/web/components/templates/integrations/Readwise.tsx b/packages/web/components/templates/integrations/Readwise.tsx
index 215cceb96..695cd7568 100644
--- a/packages/web/components/templates/integrations/Readwise.tsx
+++ b/packages/web/components/templates/integrations/Readwise.tsx
@@ -1,10 +1,7 @@
 import { useCallback, useState } from 'react'
 import { styled } from '@stitches/react'
-import { Toaster } from 'react-hot-toast'
 import Link from 'next/link'
 
-import { PrimaryLayout } from '../PrimaryLayout'
-
 import { Box, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
@@ -34,12 +31,7 @@ export function Readwise(): JSX.Element {
   }, [token])
 
   return (
-    <PrimaryLayout pageTestId={'integrations'}>
-      <Toaster
-        containerStyle={{
-          top: '5rem',
-        }}
-      />
+    <>
       <Header css={{ textAlign: 'center' }}>Readwise</Header>
       <VStack
         distribution={'start'}
@@ -73,7 +65,7 @@ export function Readwise(): JSX.Element {
           css={{
             border: '1px solid $textNonessential',
             borderRadius: '8px',
-            width: '60%',
+            width: '80%',
             bg: 'transparent',
             fontSize: '16px',
             textIndent: '8px',
@@ -96,6 +88,6 @@ export function Readwise(): JSX.Element {
           Set Token
         </Button>
       </VStack>
-    </PrimaryLayout>
+    </>
   )
 }
diff --git a/packages/web/components/templates/integrations/Webhooks.tsx b/packages/web/components/templates/integrations/Webhooks.tsx
new file mode 100644
index 000000000..1698f1fde
--- /dev/null
+++ b/packages/web/components/templates/integrations/Webhooks.tsx
@@ -0,0 +1,68 @@
+import { styled } from '@stitches/react'
+import Image from 'next/image'
+
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+
+import { Plus } from 'phosphor-react'
+
+// Styles
+const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px',
+})
+
+export function Webhooks(): JSX.Element {
+  return (
+    <VStack
+      distribution={'start'}
+      css={{
+        width: '90%',
+        margin: '0 auto',
+        height: '500px',
+      }}
+    >
+      <HStack
+        alignment={'start'}
+        distribution={'start'}
+        css={{
+          width: '100%',
+          pb: '$2',
+          borderBottom: '1px solid $utilityTextDefault',
+          pr: '$1',
+        }}
+      >
+        <Image
+          src="/static/icons/webhooks.svg"
+          alt="integration Image"
+          width={75}
+          height={75}
+        />
+        <Header>WebHooks</Header>
+        <HStack
+          alignment={'center'}
+          distribution={'end'}
+          css={{
+            width: '80%',
+            height: '100%',
+          }}
+        >
+          <Button
+            style="ctaDarkYellow"
+            css={{
+              py: '10px',
+              px: '14px',
+              mr: '16px',
+            }}
+          >
+            <Plus size={16} weight="bold" />
+            <SpanBox css={{ pl: '10px', fontWeight: '600', fontSize: '16px' }}>
+              Add New Webhook
+            </SpanBox>
+          </Button>
+        </HStack>
+      </HStack>
+    </VStack>
+  )
+}
diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 47279928a..12e8c8052 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -95,7 +95,7 @@ export default function Integrations(): JSX.Element {
           text: 'View Webhooks',
           icon: <Eye size={16} weight={'bold'} />,
           style: 'ctaWhite',
-          action: () =>router.push("/settings/webhooks"),
+          action: () =>router.push("/settings/integrations/webhooks"),
         },
       },
     ])
diff --git a/packages/web/pages/settings/integrations/webhooks.tsx b/packages/web/pages/settings/integrations/webhooks.tsx
new file mode 100644
index 000000000..212ff18cf
--- /dev/null
+++ b/packages/web/pages/settings/integrations/webhooks.tsx
@@ -0,0 +1,15 @@
+import { PageMetaData } from '../../../components/patterns/PageMetaData'
+import { Webhooks } from '../../../components/templates/integrations/Webhooks'
+import { SettingsLayout } from '../../../components/templates/SettingsLayout'
+
+export default function ReadwisePage(): JSX.Element {
+  return (
+    <>
+      <PageMetaData title="Readwise - Omnivore" path="/integrations/webhooks" />
+      <SettingsLayout>
+        <Webhooks />
+      </SettingsLayout>
+      <div data-testid="integrations-readwise-page-tag" />
+    </>
+  )
+}