How to Send Invoice and Add Payment Reminder in Next.js with Courier API

1
const authToken = process.env.COURIER_AUTH_TOKEN;
2

3
// email to receive all sent notifications in DEVELOPMENT mode
4
const testEmail = process.env.COURIER_TEST_EMAIL;
5

6
const INVOICE_TEMPLATE_ID = <TEMPLATE_ID>;
7

8
const courierClient = CourierClient({
9
    authorizationToken: authToken,
10
});

1
// src/lib/courier.ts
2

3
export const sendInvoice = async ({
4
    customerName,
5
    invoiceNumber,
6
    invoiceViewUrl,
7
    emailTo,
8
    productName,
9
    dueDate,
10
}: SendInvoice) => {
11

12
    const recipientEmail = process.env.NODE_ENV === "production" ? emailTo : testEmail;
13

14
    const { requestId } = await courierClient.send({
15
        message: {
16
            to: {
17
                email: recipientEmail,
18
            },
19
            template: INVOICE_TEMPLATE_ID,
20
            // Data for courier template designer
21
            data: {
22
                customerName,
23
                invoiceNumber,
24
                invoiceViewUrl,
25
                productName,
26
                dueDate,
27
            },
28
        },
29
    });
30
    return requestId
31
};

1
// src/lib/courier.ts
2

3
interface SendInvoice {
4
    productName: string;
5
    dueDate: string;
6
    customerName: string;
7
    invoiceNumber: string;
8
    invoiceViewUrl: string;
9
    emailTo: string;
10
}

1
// src/server/trpc/router/invoice.ts
2
import { sendInvoice } from '@lib/courier';
3
import { dayjs } from '@lib/dayjs';
4

5
// .....SOMEWHERE BELOW
6
sendEmail: protectedProcedure
7
    .input(
8
        z.object({
9
            customerName: z.string(),
10
            invoiceNumber: z.string(),
11
            invoiceViewUrl: z.string(),
12
            emailTo: z.string(),
13
            invoiceId: z.string(),
14
            productName: z.string(),
15
            dueDate: z.date(),
16
        })
17
    )
18
    .mutation(async ({ input }) => {
19
        const invoiceData = {
20
            ...input,
21
            dueDate: dayjs(input.dueDate).format('D MMMM YYYY'),
22
        };
23

24
        await sendInvoice(invoiceData);
25
    }),

1
.input(
2
    z.object({
3
        customerName: z.string(),
4
        invoiceNumber: z.string(),
5
        invoiceViewUrl: z.string(),
6
        emailTo: z.string(),
7
        invoiceId: z.string(),
8
        productName: z.string(),
9
        dueDate: z.date(),
10
    })
11
)

1
// input from before
2
.mutation(async ({ input }) => {
3
    const invoiceData = {
4
        ...input,
5
        // format a date to string with a defined format. 
6
        dueDate: dayjs(input.dueDate).format('D MMMM YYYY'), // ex.'2 January 2023'
7
    };
8

9
    // send the email
10
    await sendInvoice(invoiceData);
11
}),

1
//src/pages/invoices/[invoiceId]/index.tsx
2
import toast from 'react-hot-toast';
3

4
const InvoiceDetail: NextPage = () => {
5
    // calling the `sendEmail` trpc endpoint with tanstack-query.
6
    const sendEmailMutation = trpc.invoice.sendEmail.useMutation({
7
        onSuccess() {
8
            toast.success('Email sent!');
9
        }
10
    });
11
}

1
//src/pages/invoices/[invoiceId]/index.tsx
2

3
// still inside the InvoiceDetail component
4
const sendInvoiceEmail = () => {
5
    const hostUrl = window.location.origin;
6

7
    // prevent a user from spamming when the API call is not done.
8
    if (sendEmailMutation.isLoading) return;
9

10
    // send input data to `sendEmail` trpc endpoint
11
    sendEmailMutation.mutate({
12
        customerName: invoiceDetail.customer.name,
13
        invoiceNumber: `#${invoiceDetail.invoiceNumber}`,
14
        invoiceViewUrl: `${hostUrl}/invoices/${invoiceDetail.id}/preview`,
15
        emailTo: invoiceDetail.customer.email,
16
        invoiceId: invoiceDetail.id,
17
        dueDate: invoiceDetail.dueDate,
18
        productName: invoiceDetail.name,
19
    });
20
};

1
//src/pages/invoices/[invoiceId]/index.tsx
2

3
<Button
4
   variant="primary"
5
   onClick={sendInvoiceEmail}
6
   isLoading={sendEmailMutation.isLoading}>
7
   Send to Email
8
</Button>

1
// src/lib/courier
2

3
interface CourierBaseData {
4
    customerName: string;
5
    invoiceNumber: string;
6
    invoiceViewUrl: string;
7
    emailTo: string;
8
}
9

10
interface SendInvoice extends CourierBaseData {
11
    productName: string;
12
    dueDate: string;
13
}
14

15
interface ScheduleReminder extends CourierBaseData {
16
    scheduledDate: Date;
17
    invoiceId: string;
18
}

1
//src/pages/invoices/[invoiceId]/index.tsx
2

3
// check if the development environment is production
4
const __IS_PROD__ = process.env.NODE_ENV === 'production';
5

6
const PAYMENT_REMINDER_TEMPLATE_ID = '<TEMPLATE_ID>';
7

8
export const scheduleReminder = async ({
9
  scheduledDate,
10
  emailTo,
11
  invoiceViewUrl,
12
  invoiceId,
13
  customerName,
14
  invoiceNumber,
15
}: ScheduleReminder) => {
16

17
  // delay until a day before due date in production, else 20 seconds after sent for development
18
  const delayUntilDate = __IS_PROD__
19
    ? scheduledDate
20
    : new Date(Date.now() + SECOND_TO_MS * 20);
21

22
  const recipientEmail = __IS_PROD__ ? emailTo : testEmail;
23

24
   // define the  automation steps programmatically
25
   const { runId } = await courierClient.automations.invokeAdHocAutomation({
26
     automation: {
27
       steps: [
28
         // 1. Set delay for the next steps until given date in ISO string
29
          { action: 'delay', until: delayUntilDate.toISOString() },
30

31
          // 2. Send the email notification. Equivalent to `courierClient.send()`
32
          {
33
            action: 'send',
34
            message: {
35
              to: { email: recipientEmail },
36
              template: PAYMENT_REMINDER_TEMPLATE_ID,
37
              data: {
38
                invoiceViewUrl,
39
                customerName,
40
                invoiceNumber,
41
              },
42
            },
43
          },
44
        ],
45
      },
46
    });
47

48
   return runId;
49
};

1
// src/server/trpc/router/invoice.ts
2

3
sendEmail: protectedProcedure
4
    .input(..) // omitted for brevity
5
    .mutation(async ({ input }) => {
6
        // multiplier for converting day to milliseconds.
7
        const DAY_TO_MS = 1000 * 60 * 60 * 24;
8

9
        // get a day before the due date
10
        const scheduledDate = new Date(input.dueDate.getTime() - DAY_TO_MS * 1);
11

12
        const invoiceData = {..}; //omitted for brevity
13

14
        await sendInvoice(invoiceData);
15

16
        //after the invoice is sent, schedule the reminder
17
        await scheduleReminder({
18
            ...invoiceData,
19
            scheduledDate,
20
        });
21
    }

1
export const cancelAutomationWorkflow = async ({
2
    cancelation_token,
3
}: {
4
    cancelation_token: string;
5
}) => {
6
    const { runId } = await courierClient.automations.invokeAdHocAutomation({
7
        automation: {
8
            // define a cancel action, that sends a cancelation_token
9
            steps: [{ action: 'cancel', cancelation_token }],
10
        },
11
    });
12

13
    return runId;
14
};

1
// src/lib/courier.ts
2

3
export const scheduleReminder = async(..) => {
4
    // ...omitted for brevity
5

6
    const { runId } = await courierClient.automations.invokeAdHocAutomation({
7
        automation: {
8
            // add cancelation token here
9
            cancelation_token: `${invoiceId}-reminder`,
10
            steps: [
11
                { action: 'delay', until: delayUntilDate.toISOString() },
12

13
    // ... omitted for brevity

1
// src/server/trpc/router/invoice.ts
2

3
updateStatus: protectedProcedure
4
    .input(..) // omitted for brevity
5
    .mutation(async ({ ctx, input }) => {
6
        const { invoiceId, status } = input;
7

8
        // update an invoice's status in database
9
        const updatedInvoice = await ctx.prisma.invoice.update({
10
            where: { id: invoiceId },
11
            data: { status },
12
        });
13

14
        // cancel payment reminder automation workflow if the status is paid.
15
        if (updatedInvoice.status === 'PAID') {
16

17
            //call the cancel workflow to cancel the payment reminder for matching cancelation_token.
18
            await cancelAutomationWorkflow({
19
                cancelation_token: `${invoiceId}-reminder`,
20
            });
21
        }
22

23
        return updatedStatus;
24
    }),

1
// On Success
2
type SuccessResponse = { data: any, error: null }
3

4
// On Error
5
type ErrorResponse = { data: any, error: string }

1
try {
2
    // ..function code
3

4
    // modified return example
5
    return { data: runId, error: null };
6

7
} catch (error) {
8
    // make sure it's an error from Courier
9
    if (error instanceof CourierHttpClientError) {
10
        return { data: error.data, error: error.message };
11
    } else {
12
        return { data: null, error: "Something went wrong!" };
13
    }
14
}

1
// src/server/trpc/router/invoice.ts
2

3
  const { error: sendError } = await sendInvoice(..);
4
  if (sendError) throw new TRPCClientError(sendError);
5

6
  const { error: scheduleError } = await scheduleReminder(..);
7
  if (scheduleError) throw new TRPCClientError(scheduleError);