👷 Add email alert hourly sender

Closes #549
2023-06-06 13:25:13 +02:00
parent 40ef934740
commit a4cb6face8
16 changed files with 797 additions and 125 deletions
--- a/packages/emails/src/components/HeroImage.tsx
+++ b/packages/emails/src/components/HeroImage.tsx
@ -1,3 +1,4 @@
+import React from 'react'
 import { IMjmlImageProps, MjmlImage } from '@faire/mjml-react'
 import { borderBase } from '../theme'

--- a/packages/emails/src/components/Text.tsx
+++ b/packages/emails/src/components/Text.tsx
@ -1,3 +1,4 @@
+import React from 'react'
 import { MjmlText, IMjmlTextProps } from '@faire/mjml-react'
 import { leadingRelaxed, textBase } from '../theme'

--- a/packages/emails/src/emails/ReachedChatsLimitEmail.tsx
+++ b/packages/emails/src/emails/ReachedChatsLimitEmail.tsx
@ -0,0 +1,64 @@
+import React, { ComponentProps } from 'react'
+import {
+  Mjml,
+  MjmlBody,
+  MjmlSection,
+  MjmlColumn,
+  MjmlSpacer,
+} from '@faire/mjml-react'
+import { render } from '@faire/mjml-react/utils/render'
+import { Button, Head, HeroImage, Text } from '../components'
+import { parseNumberWithCommas } from '@typebot.io/lib'
+import { SendMailOptions } from 'nodemailer'
+import { sendEmail } from '../sendEmail'
+
+type ReachedChatsLimitEmailProps = {
+  chatsLimit: number
+  url: string
+}
+
+export const ReachedChatsLimitEmail = ({
+  chatsLimit,
+  url,
+}: ReachedChatsLimitEmailProps) => {
+  const readableChatsLimit = parseNumberWithCommas(chatsLimit)
+
+  return (
+    <Mjml>
+      <Head />
+      <MjmlBody width={600}>
+        <MjmlSection padding="0">
+          <MjmlColumn>
+            <HeroImage src="https://typebot.s3.fr-par.scw.cloud/public/assets/actionRequiredEmailBanner.png" />
+          </MjmlColumn>
+        </MjmlSection>
+        <MjmlSection padding="0 24px" cssClass="smooth">
+          <MjmlColumn>
+            <Text>
+              It just happened, you&apos;ve reached your monthly{' '}
+              {readableChatsLimit} chats limit 😮
+            </Text>
+            <Text>
+              If you&apos;d like your bots to continue chatting with your users
+              this month, then you need to upgrade your plan. 🚀
+            </Text>
+
+            <MjmlSpacer height="24px" />
+            <Button link={url}>Upgrade workspace</Button>
+          </MjmlColumn>
+        </MjmlSection>
+      </MjmlBody>
+    </Mjml>
+  )
+}
+
+export const sendReachedChatsLimitEmail = ({
+  to,
+  ...props
+}: Pick<SendMailOptions, 'to'> &
+  ComponentProps<typeof ReachedChatsLimitEmail>) =>
+  sendEmail({
+    to,
+    subject: "You've reached your chats limit",
+    html: render(<ReachedChatsLimitEmail {...props} />).html,
+  })