📝 Add v2.26 newsletter

2024-06-03 16:35:38 +02:00
parent 9ec3f35382
commit 45aa4c6da5
6 changed files with 171 additions and 0 deletions
--- a/packages/transactional/templates/marketing/V2dot26Update.tsx
+++ b/packages/transactional/templates/marketing/V2dot26Update.tsx
@ -0,0 +1,98 @@
+import { Text, Hr } from '@react-email/components'
+import * as React from 'react'
+import { env } from '@typebot.io/env'
+import { text, hr } from './styles'
+import { NewsletterLayout } from './components/NewsletterLayout'
+import { NewsletterSection } from './components/NewsletterSection'
+
+const imagesBaseUrl = `${env.NEXTAUTH_URL}/images/emails/V2dot26Update`
+
+export const V2dot26Update = () => (
+  <NewsletterLayout preview="Unveiling Typebot's Latest Innovations - v2.26 Update! 🌟">
+    <Text style={text}>
+      Heya, <br />
+      <br />
+      Typebot v2.26 was just released. It comes with cool new stuff.
+      <br />
+      <br />
+      Let's dive into what's new! 🔥
+    </Text>
+
+    <NewsletterSection
+      title="NocoDB block"
+      image={{
+        src: `${imagesBaseUrl}/nocodb.jpg`,
+        alt: 'New NocoDB block',
+      }}
+    >
+      The NocoDB block is a new block that allows you to store and retrieve data
+      from a NocoDB database. It's a powerful tool for building applications
+      that require data storage and retrieval.
+      <br />
+      <br />
+      Finally, a great open-source alternative to existing Google Sheets block.
+    </NewsletterSection>
+
+    <NewsletterSection
+      title="Variables panel"
+      image={{
+        alt: 'Variables panel',
+        src: `${imagesBaseUrl}/variablesPanel.gif`,
+      }}
+    >
+      Allows you to see all your variables at a glance and edit them with much
+      more comfort 💆
+    </NewsletterSection>
+
+    <NewsletterSection title="Transcript variable">
+      The "Set variable" block now has a "Transcript" value option. This injects
+      the entire conversation transcript in a variable. This is useful if you
+      need to provide context for an AI block. <br />
+      <br />
+      For example you could add in a system prompt:
+      <br />
+      <br />
+      "Your answer should be based on the context inside the &lt;context&gt; XML
+      element:
+      <br />
+      &lt;context&gt;{'{{'}Transcript{'}}'}&lt;/context&gt;"
+    </NewsletterSection>
+
+    <NewsletterSection
+      title="New container theme options"
+      image={{
+        alt: 'Chat window theme options demo',
+        src: `${imagesBaseUrl}/chatContainerThemeOptions.gif`,
+      }}
+    >
+      You can now customize the chat window theme with the new container theme
+      options. This allows you to change the background color, border color, and
+      text color of the chat window.
+    </NewsletterSection>
+
+    <NewsletterSection title="New templates">
+      🏃 Quick Carb Calculator - Designed specifically for athlete fueling
+      brands looking to attract and engage active audiences, this chatbot serves
+      as an effective lead magnet by providing instant, customized carbohydrate
+      intake recommendations based on user input.
+      <br />
+      <br />
+      💆‍♀️ Skin Typology - A skin typology expert bot designed as a lead magnet
+      for Typology, this bot asks a series of personalized questions to
+      determine the user's unique skin type. He then receives a detailed
+      diagnosis and tailored skincare AI-based recommendations.
+    </NewsletterSection>
+
+    <Hr style={hr} />
+
+    <Text style={{ ...text, marginBottom: '60px' }}>
+      As always, your feedback is invaluable, so please don't hesitate to share
+      your thoughts.
+      <br />
+      <br />
+      Baptiste.
+    </Text>
+  </NewsletterLayout>
+)
+
+export default V2dot26Update
--- a/packages/transactional/templates/marketing/components/NewsletterLayout.tsx
+++ b/packages/transactional/templates/marketing/components/NewsletterLayout.tsx
@ -0,0 +1,55 @@
+import {
+  Html,
+  Head,
+  Preview,
+  Body,
+  Container,
+  Img,
+  Link,
+  Text,
+} from '@react-email/components'
+import { main, container, footer, link } from '../styles'
+import { env } from '@typebot.io/env'
+
+type Props = {
+  children: React.ReactNode
+  preview: string
+}
+export const NewsletterLayout = ({ preview, children }: Props) => (
+  <Html>
+    <Head />
+    <Preview>{preview}</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Img
+          src={`${env.NEXTAUTH_URL}/images/logo.png`}
+          width="32"
+          height="32"
+          alt="Typebot's Logo"
+          style={{
+            margin: '24px 0',
+          }}
+        />
+        {children}
+        <Img
+          src={`${env.NEXTAUTH_URL}/images/logo.png`}
+          width="32"
+          height="32"
+          alt="Typebot's Logo"
+          style={{
+            marginTop: '24px',
+          }}
+        />
+
+        <Text style={footer}>Typebot.io - Powering Conversations at Scale</Text>
+        <Link
+          href="{{unsubscribe}}"
+          target="_blank"
+          style={{ ...link, color: '#898989', fontSize: '12px' }}
+        >
+          Unsubscribe
+        </Link>
+      </Container>
+    </Body>
+  </Html>
+)
--- a/packages/transactional/templates/marketing/components/NewsletterSection.tsx
+++ b/packages/transactional/templates/marketing/components/NewsletterSection.tsx
@ -0,0 +1,18 @@
+import { Img, Text, Heading, Section } from '@react-email/components'
+import { featureSection, heading, text, image as imageStyle } from '../styles'
+
+type Props = {
+  title: string
+  children: React.ReactNode
+  image?: {
+    src: string
+    alt: string
+  }
+}
+export const NewsletterSection = ({ title, image, children }: Props) => (
+  <Section style={featureSection}>
+    <Heading style={heading}>{title}</Heading>
+    <Text style={text}>{children}</Text>
+    {image && <Img src={image.src} alt={image.alt} style={imageStyle} />}
+  </Section>
+)