Sending Email Error - Recipient is not defined

Discussion Ask a question
,
1

Hi all,

*Problem:
Please see code below. After submit the form, I got an error:
“Error occurred in one of afterSave callbacks ReferenceError: recipient is not defined”

*Found:
Done some testing and found that there’s a BUG in fetch (url, request) function, parsing string not correctly.
I hard code the email addresses, it worked, mail delivered OK:
//const data = ‘from=${sender}&to=${recipient}&subject=${subject}&text=${body}’;
const data = "from=test@hotmail.com &to=test@hotmail.com & subject=${subject}&text=${body}" ;

And this’s what sent to my email inbox: ${subject} ${body}. See the snapshot.

There’s a bug in fetch (url, request) function.
return fetch (url, request)
.then(response => response.json());

How to fix and REPORT this bug?
Thank you…

------------- EMAIL.JSW --------------

import { sendWithService } from 'backend/ sendGrid ';

export function sendEmail (subject, body) {
const key = “SG.Ma-ae81tSXef6rGsk_QsGw.v5yvoze4”; // my own SendGrid API Key
const sender = “test@hotmail.com”;
const recipient = “test@hotmail.com”; //<< recipient is defined here
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”;
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** 
  }; 

  //** **A BUG IN THIS FUNCTION,** *incorrect parsing String*  ***// 
  return  **fetch** (url, request)                  
     .then(response => response.json());

}

---------- PAGE CODE ----------

import { sendEmail } from ‘backend/email’;

$w. onReady (function () {
$w(“#dataset1”). onAfterSave (sendFormData);
});

function sendFormData () {
const subject = Testing ${$w("#input8").value};
const body = Name: ${$w("#input8").value} \rEmail: ${$w("#input10").value} \rPhone: ${$w("#input7").value};

      //  **recipient** is set in sendEmail() 
     **sendEmail** (subject, body) 
         .then(response => console.log(response));

}
------------End Code------------

Can someone please help me to fix this problem.
Thank you very much.

727×351 15.4 KB

2

Read the tutorial page fully and use the sendEmailWithRecipient

3

I did read full page. Why do I need to use sendEmailWithRecipient?
export function sendEmail (subject, body) {
const key = “SG.Ma-ae81tSXef6rGsk_QsGw.v5yvoze4”; // my own SendGrid API Key
const sender = "test@gmail.com ";
const recipient = "test@gmail.com "; //<< recipient is defined here
return sendWithService (key, sender, recipient, subject, body);
}

4

It tells you why on the tutorial which is perfectly clear to understand.

Modifying the Code

The code we wrote above sends an email to the same address each time the form is submitted. It can easily be used as a basis for other common situations. For example, we will now modify the code so that the user submitting the form receives a confirmation email.

So the first code simply sends out the one email to the SAME address each time the form is submitted, which will be yours.

If you want to add another email address so that the user submitting the form recieves an email too you need to modify your code as it states in that paragraph from the tutorial and it clearly shows you how to adapt your code to make it work too.

5

If you are simply wanting an email sent to yourself when a form is submitted, then you don’t need to use this as you can just use Wix Automations instead.

Otherwise you need to use the tutorial completely with the modified code as explained in the tutorial so that the user who submitted the form gets an email along with yourself getting an email about it too.

6

Also, the sendGrid.js backend file.

It should be just:
//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";

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());
}

Yet you have the extra code at the bottom of yours:

  
return fetch(url, request)
.then(response => {
const result = {
isOk: response.ok,
status: response.status,
statusText: response.statusText
};
return result; // result: isOk: true | status: 200 | statusText: "OK"
});
}
7

If you are still struggling then simply watch these videos about it.
https://www.youtube.com/watch?v=0SVvNKNEmWk
https://www.youtube.com/watch?v=bPd7o7hUfGk

8

Nothing wrong with it. It’s good for troubleshoot.

9

For testing/troubleshoot, I hard code email addresses and it worked, mail delivered OK.
//const data = ‘from=${sender}&to=${recipient}&subject=${subject}&text=${body}’;
const data = “from=test@hotmail.com&to=test@hotmail.com&subject=${subject}&text=${body}” ;

This’s what I got in my email: ${subject} ${body}. See the snapshot.
There’s a bug in fetch (url, request) function.

How do I fix and report this bug?
Thank you.

727×351 15.4 KB

10

Important:
Using SendGrid to send emails from certain email providers may not work as expected. For example, see this notification about sending from Gmail addresses.

Gmail DMARC Changes
Gmail has recently decided to embrace DMARC more explicitly, much like Yahoo and AOL. You may soon start seeing bounce messages with the following error…