Skip to content

Commit

Permalink
Email
Browse files Browse the repository at this point in the history
  • Loading branch information
@pontusab
pontusab committed Nov 15, 2023
1 parent dc4e7c5 commit d7e2ebd
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 74 deletions.
5 changes: 0 additions & 5 deletions apps/dashboard/src/components/main-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,6 @@ export function MainMenu() {
name: "Transactions",
icon: () => <Icons.Transactions size={22} />,
},
// {
// path: "/invoices",
// name: "Invoices",
// icon: () => <Icons.Invoice size={22} />,
// },
{
path: "/vault",
name: "Vault",
Expand Down
53 changes: 33 additions & 20 deletions apps/dashboard/src/jobs/transactions.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { client } from "@/trigger";
import { TransactionsEmail } from "@midday/email/emails/transactions";
import { getI18n } from "@midday/email/locales";
import { getTransactions } from "@midday/gocardless";
import { TriggerEvents, triggerBulk } from "@midday/notification";
import { Database } from "@midday/supabase/src/types";
Expand Down Expand Up @@ -151,28 +152,40 @@ client.defineJob({
revalidateTag(`spending_${data?.team_id}`);
revalidateTag(`metrics_${data?.team_id}`);

// Send notification for each transaction
// triggerBulk(
// transactionsData.map((transaction) => ({
// name: TriggerEvents.TransactionNewInApp,
// payload: {
// description: "You have a new transaction of -1000 from Github",
// currency: "SEK",
// },
// users: [
// {
// subscriberId: "",
// teamId: "123",
// email: "",
// fullName: "Pontus Abrahamsson",
// avatarUrl: "https://",
// },
// ],
// }))
// );
const notificationEvents = await Promise.all(
usersData?.flatMap(async ({ user, team_id }) => {
const t = getI18n({ locale: user.locale });

return transactionsData.map((transaction) => ({
name: TriggerEvents.TransactionNewInApp,
payload: {
description: t(
{ id: "transactions.notification" },
{ amount: transaction.amount, from: transaction.name } // TODO: Format
),
currency: "SEK",
},
user: {
subscriberId: user.id,
teamId: team_id,
email: user.email,
fullName: user.full_name,
avatarUrl: user.avatar_url,
},
}));
})
);

console.log(JSON.stringify(await notificationEvents, null, 2));

if (notificationEvents?.length) {
triggerBulk(notificationEvents);
}

const emailEvents = await Promise.all(
usersData?.map(async ({ user, team_id }) => {
const t = getI18n({ locale: user.locale });

const html = await renderAsync(
TransactionsEmail({
fullName: user.full_name,
Expand All @@ -190,7 +203,7 @@ client.defineJob({
return {
name: TriggerEvents.TransactionNewEmail,
payload: {
subject: "New transactions",
subject: t({ id: "transactions.subject" }),
html,
},
user: {
Expand Down
55 changes: 33 additions & 22 deletions packages/email/emails/transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from "@react-email/components";
import { format } from "date-fns";
import * as React from "react";
import { getI18n } from "../i18n";
import { getI18n } from "../locales";

type Transaction = {
id: string;
Expand Down Expand Up @@ -111,6 +111,7 @@ export const TransactionsEmail = ({
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="bg-[#F0EFEC] my-auto mx-auto font-sans">
<br />
<Container className="border border-solid border-[#DCDAD2] rounded my-[40px] mx-auto p-[20px] w-[560px]">
<Section className="mt-[32px]">
<Img
Expand All @@ -122,23 +123,37 @@ export const TransactionsEmail = ({
/>
</Section>
<Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
You have <span className="font-semibold">5 transactions</span>{" "}
thats missing <br />
receipts.
{t({ id: "transactions.title1" })}
<span className="font-semibold">
{t(
{ id: "transactions.title2" },
{ numberOfTransactions: transactions.length }
)}{" "}
</span>
{t({ id: "transactions.title3" })} <br />
{t({ id: "transactions.title4" })}.
</Heading>
<Text className="text-[#121212] text-[14px] leading-[24px]">
Hi {firstName},<br /> <br />
We found <span className="font-semibold">
5 transactions
</span>{" "}
thats missing receipts. Feel free to attach them to ease your own
or your accountants work for upcoming declerations.
{t({ id: "transactions.description1" }, { firstName })},
<br />
<br />
{t({ id: "transactions.description2" })}{" "}
<span className="font-semibold">
{t(
{ id: "transactions.description3" },
{ numberOfTransactions: transactions.length }
)}{" "}
</span>
{t({ id: "transactions.description4" })}.
</Text>

<br />

<table style={{ width: "100%" }} className="border-collapse w-full">
<thead>
<table
style={{ width: "100% !important", minWidth: "100%" }}
className="border-collapse w-full"
>
<thead style={{ width: "100%" }}>
<tr className="border-0 border-t-[1px] border-b-[1px] border-solid border-[#DCDAD2] h-[45px]">
<th align="left">
<Text className="text-[14px] font-semibold m-0 p-0">
Expand All @@ -158,7 +173,7 @@ export const TransactionsEmail = ({
</tr>
</thead>

<tbody>
<tbody style={{ width: "100%", minWidth: "100% !important" }}>
{transactions?.map((transaction) => (
<tr
key={transaction.id}
Expand Down Expand Up @@ -207,25 +222,21 @@ export const TransactionsEmail = ({
transactions.at(0)?.id
}`}
>
View transactions
{t({ id: "transactions.button" })}
</Button>
</Section>
<Hr className="border border-solid border-[#DCDAD2] my-[45px] mx-0 w-full" />
<Hr className="border-0 border-b-[1px] border-solid border-[#DCDAD2] my-[45px] mx-0 w-full" />
<Text className="text-[#878787] text-[12px] leading-[24px]">
Nam imperdiet congue volutpat. Nulla quis facilisis lacus. Vivamus
convallis sit amet lectus eget tincidunt. Vestibulum vehicula
rutrum nisl, sed faucibus neque. Donec lacus mi, rhoncus at dictum
eget, pulvinar at metus. Donec cursus tellus erat, a hendrerit
elit rutrum ut. Fusce quis tristique ligula. Etiam sit amet enim
vitae mauris auctor blandit id et nibh.
{t({ id: "transactions.footer" })}
</Text>

<Link href={`${baseAppUrl}/settings/notifications`}>
<Text className="text-[#878787] text-[12px] underline">
Notification preferences
{t({ id: "transactions.settings" })}
</Text>
</Link>
</Container>
<br />
</Body>
</Tailwind>
</Html>
Expand Down
27 changes: 0 additions & 27 deletions packages/email/i18n/index.ts
View file

This file was deleted.

63 changes: 63 additions & 0 deletions packages/email/locales/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { createIntl } from "@formatjs/intl";

const messages = {
en: {
"notifications.transaction":
"You have a new transaction of {amount} from {from}",
"transactions.subject": "New transactions",
"transactions.preview":
"Hi {firstName}, We found {numberOfTransactions, plural, =1 {1 transaction} other {# transactions}} thats missing receipts. Feel free to attach them to ease your own or your accountants work for upcoming declerations.",
"transactions.title1": "You have ",
"transactions.title2":
"{numberOfTransactions, plural, =1 {1 transaction} other {# transactions}}",
"transactions.title3": "thats missing",
"transactions.title4": "receipts",
"transactions.description1": "Hi {firstName}",
"transactions.description2": "We found",
"transactions.description3":
"{numberOfTransactions, plural, =1 {1 transaction} other {# transactions}}",
"transactions.description4":
"thats missing receipts. Feel free to attach them to ease your own or your accountants work for upcoming declerations",
"transactions.button": "View transactions",
"transactions.footer":
" Nam imperdiet congue volutpat. Nulla quis facilisis lacus. Vivamus convallis sit amet lectus eget tincidunt. Vestibulum vehicula rutrum nisl, sed faucibus neque. Donec lacus mi, rhoncus at dictum eget, pulvinar at metus. Donec cursus tellus erat, a hendrerit elit rutrum ut. Fusce quis tristique ligula. Etiam sit amet enim vitae mauris auctor blandit id et nibh.",
"transactions.settings": "Notification preferences",
},
sv: {
"notifications.transaction":
"Du har en ny transaktion på {amount} från {from}",
"transactions.subject": "Nya transaktioner",
"transactions.preview":
"Hej {firstName}, Vi hittade {numberOfTransactions, plural, =1 {1 transaktion} other {# transaktioner}} som saknar kvitton. Bifoga dem gärna för att underlätta ditt eget eller dina revisorers arbete inför kommande deklarationer.",
"transactions.title1": "Du har ",
"transactions.title2":
"{numberOfTransactions, plural, =1 {1 transaktion} other {# transaktioner}}",
"transactions.title3": "där det saknas",
"transactions.title4": "kvitton",
"transactions.description1": "Hej {firstName}",
"transactions.description2": "Vi hittade",
"transactions.description3":
"{numberOfTransactions, plural, =1 {1 transaktion} other {# transaktioner}}",
"transactions.description4":
"där det saknas kvitton. Bifoga dem gärna för att underlätta ditt eget eller dina revisorers arbete inför kommande deklarationer",
"transactions.button": "Visa transaktioner",
"transactions.footer":
" Nam imperdiet congue volutpat. Nulla quis facilisis lacus. Vivamus convallis sit amet lectus eget tincidunt. Vestibulum vehicula rutrum nisl, sed faucibus neque. Donec lacus mi, rhoncus at dictum eget, pulvinar at metus. Donec cursus tellus erat, a hendrerit elit rutrum ut. Fusce quis tristique ligula. Etiam sit amet enim vitae mauris auctor blandit id et nibh.",
"transactions.settings": "Notifikationsinställningar",
},
};

type Options = {
locale: string;
};

export function getI18n({ locale }: Options) {
const intl = createIntl({
locale,
messages: messages[locale],
});

return {
t: intl.formatMessage,
};
}

0 comments on commit d7e2ebd

Please sign in to comment.