The "Velo Tutorial: Sending an Email on Form Submission" tutorial contains an error?

Ask the community
,
1

The “Velo Tutorial: Sending an Email on Form Submission” seems to contain an error in the sense the provided raw code for section " //email.jsw " throws the error without altering anything " Error parsing web-module ‘backend/email.jsw’: Cannot use keyword ‘await’ outside an async function ".

Even if I manually fix it by adding async code (note it’s “//” for the purpose of this forum post) it will only return “undefined”.

I’m assuming either the backend processing has changed and this code isn’t updated properly or something in these straight-forward instructions aren’t clear. Bear in mind, I even used SendGrid, as-per the highlighted service so this isn’t 3rd-party API related. I’ve trimmed it down to the bear-bones for testing purposes and simply doesn’t work.

Can someone please help or assist?

Backend

//email.jsw (file)
import {sendWithService} from "backend/sendGrid";
import wixSecretsBackend from "wix-secrets-backend";

export function sendEmail(subject, body) {
    //(async () => {
        const sendGridSecret = JSON.parse(await wixSecretsBackend.getSecret("sendGridSecret"));
        const key = sendGridSecret.key;
        const sender = sendGridSecret.senderEmail; 
        const recipient = "myRealEmailGoesHere@gmail.com";
        return sendWithService(key, sender, recipient, subject, body);
    //})();
}
------------------------------------------------------------------------------------------------------------------------
//sendGrid.js (file)
import {fetch} from "wix-fetch";  

export function sendWithService(key, sender, recipient, subject, body) {
  const url = "https://api.sendgrid.com/api/mail.send.json";
 
  const headers = {
    "Authorization": "Bearer " + key,
    "Content-Type": "application/x-www-form-urlencoded"
  };

  const data = "from=${sender}&to=${recipient}&subject=${subject}&text=${body}";
 
  const request = {
    "method": "post", 
    "headers": headers, 
    "body": data
  };
 
  return fetch(url, request)
   .then(response => response.json());
}

OnPage code

import {sendEmail} from 'backend/email';

//BUTTON PRESS TO TEST EMAILER
export function button78_click(event) {
  sendFormData()
}

function sendFormData() {
  const subject = "New GameSave submittted from Someone";
  const body = "GameSave was Uploaded...";
 
  sendEmail(subject, body)
    .then(response => console.log(response)); 

  console.log("SendForm Was Called")
}

Thanks : )

2

Hi - Looks like you’re using sendGrid functions, did you create an API key and store it with the sender email into the Wix secret module? Sendgrid is a little baffling at first, but it works great for our plant sale form submission app, sending an email both to the sender and recipient. If you still need help I can post my (semi-redacted) code.

3

Hey,

I have added the API KEY and email in the Secrets Manager section. It was basically a straight forward copy/paste from their website😌

yes, if it’s okay with you then please post your codes :slight_smile: Will give more insight…

4

Here is some of my relevant code - I use sendEmailWithRecipient instead of sendEmail. BTW, I had a little trouble pasting the key into the wix-secret box. For some reason it added a space between the last two characters.

//email.jsw

import {sendWithService} from 'backend/sendGrid';
import wixSecretsBackend from 'wix-secrets-backend';

/*export async function sendEmail(subject, body) {
  const sendGridSecret = JSON.parse(await wixSecretsBackend.getSecret('COMGAKey'));
  const key = sendGridSecret.key;
  const sender = sendGridSecret.senderEmail;  
  const recipient = "some-email-address@some-domain.com";
  return sendWithService(key, sender, recipient, subject, body);
}
*/
export async function sendEmailWithRecipient(subject, body, recipient) {
  const sendGridSecret = JSON.parse(await wixSecretsBackend.getSecret('COMGAKey'));
  const key = sendGridSecret.key;
  const sender = sendGridSecret.senderEmail;
    console.log("Inside sendEmailWithRecipient, recipient = ", recipient);
    console.log("key, sender = ", key, sender);

  return sendWithService(key, sender, recipient, subject, body);
}

//sendGrid.js

import {fetch} from 'wix-fetch';  

export function sendWithService(key, sender, recipient, subject, body) {
  const url = "https://api.sendgrid.com/api/mail.send.json";
 console.log("Inside sendWithService - recipient = ", recipient);
  const headers = {
    "Authorization": "Bearer " + key,
    "Content-Type": "application/x-www-form-urlencoded"
  };

  const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`;
 
  const request = {
    "method": "post", 
    "headers": headers, 
    "body": data
  };
 console.log ("request*** = ", request);
  return fetch(url, request)
   .then(response => response.json());
}

//My page code
//msg is just a text object containing purchase details
//item is the purchaser's email from a query
function sendFormData(msg, item) {
  const subject = `2022 Plant Sale`;
  const sender = "xyz@gocomga.com";
  var recipient = "xyz@gocomga.com"; //First email sent to itself
  let timeData = setTimeDate(1);
  const body =
    `\rTime/date: ${timeData.title}
    \rFirst Name: ${item.firstName}
    \rLast Name: ${item.lastName}
    \rPhone: ${item.phone}
    \rEmail: ${item.email}
    \rHow Found Out: ${item.howDid}
    \r\tPurchases: \r ${msg}`
    console.log (body);
  
    console.log("In sendFormData1 - sender, recipient = ", sender, recipient);
    sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log("Response, Sender = ",response, sender));
  
    recipient = item.email; //Change recipient to me
    console.log("In sendFormData2 - sender, recipient = ", sender, recipient);
    sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log("Response, Recipient = ",response, recipient)); 
    
}

Hope this helps…

5

awesome, thanks a lot :slight_smile:

i will review it to see where it went wrong in my end : p

6

I have the same problem. And the error arises before any action on the page. Exequiel did you have any luck eventually?