New Sendgrid node module, send email to more than one address with variable template[SOLVED]

Ask the community
,
1

Hi I was hoping someone might be able to help me with my code, i’m trying to get some variable templates through sendgrid to deliver with an onClick through a repeater. The template works as I have tested through onAfterUpdate. I’m just trying to get this to happen with a button click.

Backend

import {fetch} from 'wix-fetch';
import sgMail  from '@sendgrid/mail';
import wixData from 'wix-data';

export function sendOutstandinglnvoiceEmail(){
    sgMail.setApiKey('API KEY here');
    wixData.query("CourseAvailability")
    .find()
    .then((results) => {
 let item = results.items[0];
 let fullname = item.fullName;
 let courseTitle = item.title;
 let totalPrice = item.totalPrice;
 let outstandingBalance = item.outstandingBalance;
 const msg = {
            to: item.customerEmail,
 from: "info@scottishrockandwater.com",
            templateId: 'd-c68106a391a24fe0b08c22285fc2427e', //Outstanding Invoice
            dynamic_template_data: {
                name: fullname,
                courseTitle: courseTitle,
                totalPrice: totalPrice,
                outstandingBalance: outstandingBalance,
            },
        };
        sgMail.send(msg);
        console.log(fullname)
        console.log(courseTitle)
        console.log(totalPrice)
        console.log(outstandingBalance)
    })
}

Frontend

import {sendOutstandinglnvoiceEmail} from 'backend/email';

//various repeater data above this hence the itemData
$w("#sendReminderButton").onClick((event) => {
                        sendOutstandinglnvoiceEmail(
                                itemData.customerEmail,
                                itemData.fullname,
                                itemData.title,
                                itemData.oustandingBalance,
                                itemData.totalPrice)
                            .then(function () {
                                console.log("email was sent");
                            })
                            .catch((err) => {
                                console.log("Error!");
                            });
                    })

Errors

1920×1080 217 KB

I’m sure a few links will be sent over but I’ve been trying to achieve this for the 36 hours and I’m pretty confident I have read them I just can’t figure this out.

I feel close with this one just need to get the data transferred to send the email I think…

Thank you in advance and I hope this is clear enough to be able to help.

2

https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission
https://www.youtube.com/watch?v=0SVvNKNEmWk
https://www.youtube.com/watch?v=bPd7o7hUfGk
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-send-email-with-the-sendgrid-rest-interface
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-send-email-with-the-sendgrid-npm-interface

3

Hey, i really appreciate your help, as I mentioned I have watched studied these for the past 3 days between 12-14 hours per day… so I thought I’d ask for some help to adjust the code.

4

It works!

1915×866 178 KB

Frontend

import {invoiceOutstandingEmail} from 'backend/email';

//various repeater data above here providing the data (itemData.yourFieldKeys)
let customerEmail = itemData.customerEmail;
                    $w("#sendReminderButton").onClick((event) => {
                        console.log(customerEmail)
                        invoiceOutstandingEmail(
                                customerEmail, //'Recipient' from backend
                                itemData.fullName, //'Name' from backend
                                itemData.title, //'CourseTitle' from backend
                                itemData.totalPrice, //'TotalPrice' from backend
                                itemData.outstandingBalance) // 'OutsandingBalance' from back end
 
                            .then(() => {
                            let dataObj = {
                                    status: "success",
                                };
                            })
                            .catch((error) => {
                            let dataObj = {
                                    status: "fail",
                                };
                            })
                    })
//rest of repeater data

Backend in my example called: email.jsw

import sgMail  from '@sendgrid/mail';
 
export function invoiceOutstandingEmail(Recipient, Name, CourseTitle, TotalPrice, OutsandingBalance) {
 const apiKey = "------ Your APIKey ----------";
    sgMail.setApiKey(apiKey);
 let Sender = "info@scottishrockandwater.com"
 const msg = {
        to: Recipient, //send to the email address in your own database
        cc: Sender, //send to your own address
 "from": {
 "email": Sender,
 "name": "Scottish Rock & Water" //shows this upon email receipt
            },
        templateId: '------- Your template Id -------', //Outstanding Invoice
        dynamic_template_data: {
            name: Name, courseTitle: CourseTitle ,totalPrice:TotalPrice, outstandingBalance:OutsandingBalance
 //  name, courseTitle, totalPrice, outstandingBalance (lowercase first letter) is template variable
 //  Name, CourseTitle, TotalPrice, OutstandingBalance (Upper case first letter is used to pass to the front end)
        },
    };
    sgMail.send(msg);
}

1909×984 122 KB

720×888 66.1 KB

5

Well done Stephen :+1:

The only thing I would look at changing on it is this line.

cc: Sender, //send to your own address

I would do it as bcc so that the email sent to yourself is hidden from the clients own email.

bcc: Sender, //send to your own address privately

There are many of websites out there about it too.
https://www.microsoft.com/en-us/microsoft-365/blog/2012/03/23/5-tips-on-using-bcc-in-outlook-email/
Blind carbon copy - Wikipedia
https://www.technology.pitt.edu/help-desk/how-to-documents/using-blind-carbon-copy-bcc-feature-protect-privacy-email-addresses

6

Hey @stephenmccall ,
Thanks a lot for your solved comment. It helped me a lot, you’re amazing.