feat: add payments and notifications flow

franco14lorenzo · Nov 11, 2024 · 677eae0 · 677eae0
1 parent 4f87cde
commit 677eae0
Show file tree

Hide file tree

Showing 30 changed files with 1,439 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/react-email-starter/.gitignore b/react-email-starter/.gitignore
@@ -0,0 +1,3 @@
+# dependencies
+/node_modules
+pnpm-lock.yaml
diff --git a/react-email-starter/emails/notion-magic-link.tsx b/react-email-starter/emails/notion-magic-link.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react'
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Text
+} from '@react-email/components'
+
+interface NotionMagicLinkEmailProps {
+  loginCode?: string
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : ''
+
+export const NotionMagicLinkEmail = ({
+  loginCode
+}: NotionMagicLinkEmailProps) => (
+  <Html>
+    <Head />
+    <Preview>Log in with this magic link</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>Login</Heading>
+        <Link
+          href="https://notion.so"
+          target="_blank"
+          style={{
+            ...link,
+            display: 'block',
+            marginBottom: '16px'
+          }}
+        >
+          Click here to log in with this magic link
+        </Link>
+        <Text style={{ ...text, marginBottom: '14px' }}>
+          Or, copy and paste this temporary login code:
+        </Text>
+        <code style={code}>{loginCode}</code>
+        <Text
+          style={{
+            ...text,
+            color: '#ababab',
+            marginTop: '14px',
+            marginBottom: '16px'
+          }}
+        >
+          If you didn&apos;t try to login, you can safely ignore this email.
+        </Text>
+        <Text
+          style={{
+            ...text,
+            color: '#ababab',
+            marginTop: '12px',
+            marginBottom: '38px'
+          }}
+        >
+          Hint: You can set a permanent password in Settings & members → My
+          account.
+        </Text>
+        <Img
+          src={`${baseUrl}/static/notion-logo.png`}
+          width="32"
+          height="32"
+          alt="Notion's Logo"
+        />
+        <Text style={footer}>
+          <Link
+            href="https://notion.so"
+            target="_blank"
+            style={{ ...link, color: '#898989' }}
+          >
+            Notion.so
+          </Link>
+          , the all-in-one-workspace
+          <br />
+          for your notes, tasks, wikis, and databases.
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+)
+
+NotionMagicLinkEmail.PreviewProps = {
+  loginCode: 'sparo-ndigo-amurt-secan'
+} as NotionMagicLinkEmailProps
+
+export default NotionMagicLinkEmail
+
+const main = {
+  backgroundColor: '#ffffff'
+}
+
+const container = {
+  paddingLeft: '12px',
+  paddingRight: '12px',
+  margin: '0 auto'
+}
+
+const h1 = {
+  color: '#333',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '24px',
+  fontWeight: 'bold',
+  margin: '40px 0',
+  padding: '0'
+}
+
+const link = {
+  color: '#2754C5',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '14px',
+  textDecoration: 'underline'
+}
+
+const text = {
+  color: '#333',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '14px',
+  margin: '24px 0'
+}
+
+const footer = {
+  color: '#898989',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '12px',
+  lineHeight: '22px',
+  marginTop: '12px',
+  marginBottom: '24px'
+}
+
+const code = {
+  display: 'inline-block',
+  padding: '16px 4.5%',
+  width: '90.5%',
+  backgroundColor: '#f4f4f4',
+  borderRadius: '5px',
+  border: '1px solid #eee',
+  color: '#333'
+}
diff --git a/react-email-starter/emails/plaid-verify-identity.tsx b/react-email-starter/emails/plaid-verify-identity.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react'
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Link,
+  Section,
+  Text
+} from '@react-email/components'
+
+interface PlaidVerifyIdentityEmailProps {
+  validationCode?: string
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : ''
+
+export const PlaidVerifyIdentityEmail = ({
+  validationCode
+}: PlaidVerifyIdentityEmailProps) => (
+  <Html>
+    <Head />
+    <Body style={main}>
+      <Container style={container}>
+        <Img
+          src={`${baseUrl}/static/plaid-logo.png`}
+          width="212"
+          height="88"
+          alt="Plaid"
+          style={logo}
+        />
+        <Text style={tertiary}>Verify Your Identity</Text>
+        <Heading style={secondary}>
+          Enter the following code to finish linking Venmo.
+        </Heading>
+        <Section style={codeContainer}>
+          <Text style={code}>{validationCode}</Text>
+        </Section>
+        <Text style={paragraph}>Not expecting this email?</Text>
+        <Text style={paragraph}>
+          Contact{' '}
+          <Link href="mailto:login@plaid.com" style={link}>
+            login@plaid.com
+          </Link>{' '}
+          if you did not request this code.
+        </Text>
+      </Container>
+      <Text style={footer}>Securely powered by Plaid.</Text>
+    </Body>
+  </Html>
+)
+
+PlaidVerifyIdentityEmail.PreviewProps = {
+  validationCode: '144833'
+} as PlaidVerifyIdentityEmailProps
+
+export default PlaidVerifyIdentityEmail
+
+const main = {
+  backgroundColor: '#ffffff',
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif'
+}
+
+const container = {
+  backgroundColor: '#ffffff',
+  border: '1px solid #eee',
+  borderRadius: '5px',
+  boxShadow: '0 5px 10px rgba(20,50,70,.2)',
+  marginTop: '20px',
+  maxWidth: '360px',
+  margin: '0 auto',
+  padding: '68px 0 130px'
+}
+
+const logo = {
+  margin: '0 auto'
+}
+
+const tertiary = {
+  color: '#0a85ea',
+  fontSize: '11px',
+  fontWeight: 700,
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  height: '16px',
+  letterSpacing: '0',
+  lineHeight: '16px',
+  margin: '16px 8px 8px 8px',
+  textTransform: 'uppercase' as const,
+  textAlign: 'center' as const
+}
+
+const secondary = {
+  color: '#000',
+  display: 'inline-block',
+  fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',
+  fontSize: '20px',
+  fontWeight: 500,
+  lineHeight: '24px',
+  marginBottom: '0',
+  marginTop: '0',
+  textAlign: 'center' as const
+}
+
+const codeContainer = {
+  background: 'rgba(0,0,0,.05)',
+  borderRadius: '4px',
+  margin: '16px auto 14px',
+  verticalAlign: 'middle',
+  width: '280px'
+}
+
+const code = {
+  color: '#000',
+  display: 'inline-block',
+  fontFamily: 'HelveticaNeue-Bold',
+  fontSize: '32px',
+  fontWeight: 700,
+  letterSpacing: '6px',
+  lineHeight: '40px',
+  paddingBottom: '8px',
+  paddingTop: '8px',
+  margin: '0 auto',
+  width: '100%',
+  textAlign: 'center' as const
+}
+
+const paragraph = {
+  color: '#444',
+  fontSize: '15px',
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  letterSpacing: '0',
+  lineHeight: '23px',
+  padding: '0 40px',
+  margin: '0',
+  textAlign: 'center' as const
+}
+
+const link = {
+  color: '#444',
+  textDecoration: 'underline'
+}
+
+const footer = {
+  color: '#000',
+  fontSize: '12px',
+  fontWeight: 800,
+  letterSpacing: '0',
+  lineHeight: '23px',
+  margin: '0',
+  marginTop: '20px',
+  fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
+  textAlign: 'center' as const,
+  textTransform: 'uppercase' as const
+}
diff --git a/react-email-starter/emails/static/notion-logo.png b/react-email-starter/emails/static/notion-logo.png
diff --git a/react-email-starter/emails/static/plaid-logo.png b/react-email-starter/emails/static/plaid-logo.png
diff --git a/react-email-starter/emails/static/plaid.png b/react-email-starter/emails/static/plaid.png
diff --git a/react-email-starter/emails/static/stripe-logo.png b/react-email-starter/emails/static/stripe-logo.png
diff --git a/react-email-starter/emails/static/vercel-arrow.png b/react-email-starter/emails/static/vercel-arrow.png
diff --git a/react-email-starter/emails/static/vercel-logo.png b/react-email-starter/emails/static/vercel-logo.png
diff --git a/react-email-starter/emails/static/vercel-team.png b/react-email-starter/emails/static/vercel-team.png
diff --git a/react-email-starter/emails/static/vercel-user.png b/react-email-starter/emails/static/vercel-user.png
diff --git a/react-email-starter/emails/static/vinito-logo.png b/react-email-starter/emails/static/vinito-logo.png