✨ Send recovery url to users with expired checkout sessions (#1555)

packages/emails/src/components/email-context.tsx

@@ -7,7 +7,7 @@ i18nInstance.init({
 });
 
 export const previewEmailContext: EmailContext = {
-  logoUrl: "https://rallly-public.s3.amazonaws.com/images/rallly-logo-mark.png",
+  logoUrl: "https://d39ixtfgglw55o.cloudfront.net/images/rallly-logo-mark.png",
   baseUrl: "https://rallly.co",
   domain: "rallly.co",
   supportEmail: "support@rallly.co",

packages/emails/src/components/email-layout.tsx

@@ -15,6 +15,7 @@ import { darkTextColor, fontFamily, Link, Text } from "./styled-components";
 export interface EmailLayoutProps {
   preview: string;
   ctx: EmailContext;
+  poweredBy?: boolean;
 }
 
 const containerStyles = {
@@ -30,6 +31,7 @@ export const EmailLayout = ({
   preview,
   children,
   ctx,
+  poweredBy = true,
 }: React.PropsWithChildren<EmailLayoutProps>) => {
   const { logoUrl } = ctx;
   return (
@@ -48,23 +50,25 @@ export const EmailLayout = ({
             alt="Rallly Logo"
           />
           {children}
-          <Section style={{ marginTop: 32 }}>
-            <Text light={true}>
-              <Trans
-                i18n={ctx.i18n}
-                t={ctx.t}
-                i18nKey="common_poweredBy"
-                ns="emails"
-                defaults="Powered by <a>{{domain}}</a>"
-                values={{ domain: "rallly.co" }}
-                components={{
-                  a: (
-                    <Link href="https://rallly.co?utm_source=email&utm_medium=transactional" />
-                  ),
-                }}
-              />
-            </Text>
-          </Section>
+          {poweredBy ? (
+            <Section>
+              <Text light={true}>
+                <Trans
+                  i18n={ctx.i18n}
+                  t={ctx.t}
+                  i18nKey="common_poweredBy"
+                  ns="emails"
+                  defaults="Powered by <a>{{domain}}</a>"
+                  values={{ domain: "rallly.co" }}
+                  components={{
+                    a: (
+                      <Link href="https://rallly.co?utm_source=email&utm_medium=transactional" />
+                    ),
+                  }}
+                />
+              </Text>
+            </Section>
+          ) : null}
         </Container>
       </Body>
     </Html>

packages/emails/src/components/styled-components.tsx

@@ -16,6 +16,7 @@ import type { EmailContext } from "../types";
 export const lightTextColor = "#4B5563";
 export const darkTextColor = "#1F2937";
 export const borderColor = "#E2E8F0";
+
 export const Text = (
   props: TextProps & { light?: boolean; small?: boolean },
 ) => {
@@ -48,14 +49,15 @@ export const Button = (props: React.ComponentProps<typeof UnstyledButton>) => {
       style={{
         backgroundColor: "#4F46E5",
         borderRadius: "4px",
-        padding: "12px 14px",
+        padding: "14px",
         fontFamily,
         boxSizing: "border-box",
         display: "block",
         width: "100%",
         maxWidth: "100%",
         textAlign: "center",
-        fontSize: "16px",
+        fontSize: "14px",
+        fontWeight: "bold",
         color: "white",
       }}
     />
@@ -150,6 +152,36 @@ export const Card = (props: SectionProps) => {
   );
 };
 
+export const Signature = () => {
+  return (
+    <Section>
+      <UnstyledText
+        style={{
+          fontSize: 16,
+          margin: 0,
+          fontWeight: "bold",
+          color: darkTextColor,
+          fontFamily,
+        }}
+      >
+        Luke Vella
+      </UnstyledText>
+      <UnstyledText
+        style={{ fontSize: 16, margin: 0, color: lightTextColor, fontFamily }}
+      >
+        Founder
+      </UnstyledText>
+      <img
+        src="https://d39ixtfgglw55o.cloudfront.net/images/luke.jpg"
+        alt="Luke Vella"
+        style={{ borderRadius: "50%", marginTop: 16 }}
+        width={48}
+        height={48}
+      />
+    </Section>
+  );
+};
+
 export const trackingWide = {
   letterSpacing: 2,
 };