向客户发送关于将数据保存到 Firestore 的确认电子邮件

Question

I am trying to make a website for taking online bookings. The site has been hosted in firebase and I am using firestore to collect the details of booking. I am using the code given below to collect the details in firestore.

var firestore =  firebase.firestore();

var messagesRef = firestore.collection("BookingData");


//listen for submit
document.getElementById('bookingForm').addEventListener('submit',submitForm);

function submitForm(e){
 e.preventDefault();

 //get values
var email = getInputVal('email');
var packageFields = getInputVal('packageFields');
var name = getInputVal('name');
var phone = getInputVal('phone');
var date = getInputVal('date');

saveMessage(email, packageFields, name, phone, date);

//show alert
}

// function to get form values

 function getInputVal(id) {
return document.getElementById(id).value;
 }

//save messages

function saveMessage(email, packageFields, name, phone, date) {

  messagesRef.add({
   email:email,
   packageFields:packageFields,
   name:name,
   phone:phone,
   date:date
   }).then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
 .catch(function(error) {
  console.error("Error adding document: ", error);
});

}

Now the problem is, I would like to send email to my client and get a email at my personal email id whenever there is a booking [ie the data get saved in firestore (Document Written with id)] using JS and SMTP.

The email will be send automatically to the provided email id.

How can I do so.

Thanks for any kind of help in advance.

Answer 1

One of the possible solutions is to use the Firebase extension dedicated to email sending.

Since you want to send an email when a new document is created in the BookingData collection, it will be a piece of cake to configure it.

Just follow the configuration instructions and enter "BookingData" for the field "Email documents collection" ("Email documents collection" is "the path to the collection that contains the documents used to build and send the emails")

Then, as explained in the doc here , in the document created in the BookingData collection, include a to field with the same value than the email and a cc , (or bcc ) field with your own email. Then, use the document's message field to specify the other email elements, like subject line and email body (either plaintext or HTML).

---

Note that doing so will add all this extra info (together with some fields containing the status of the extension execution) to the BookingData document . If you prefer to avoid having these extra info added to this document, just use another dedicated collection to trigger (and configure) the emails.

To generate and send an email via this specific, dedicated collection, you could use a batched write, as follows:

var messagesRef = firestore.collection("BookingData");
var emailsRef = firestore.collection("emails");  // Additional collection

var batch = firestore.batch();

batch.set(messagesRef, 
 {
   email:email,
   packageFields:packageFields,
   name:name,
   phone:phone,
   date:date
   }
);

batch.set(emailsRef, 
 {
   to:email,
   bcc:'youremail@mail.com',
   message: {
    subject: 'New order',
    html: 'This is an <code>HTML</code> email body.',
   }
  }
);
// Commit the batch
batch.commit().then(function () {
    // ...
});

Don't forget to:

• Deny read and write access rights to the emails collection via security rules.
• Enter "emails" for the field "Email documents collection", when configuring the extension.

And note that to install and use Firebase extensions, your project must be on the Blaze plan.

Answer 2

I would probably use a service that provides a HTTP API for mailing.

SendGrid is a great option, here is a quick example ( src ):

const functions = require("firebase-functions");
const sgMail = require("@sendgrid/mail");
const cors = require("cors")({
  origin: true
});

exports.emailMessage = functions.https.onRequest((req, res) => {
  const { name, email, phone, message } = req.body;
  return cors(req, res, () => {
    var text = `<div>
      <h4>Information</h4>
      <ul>
        <li>
          Name - ${name || ""}
        </li>
        <li>
          Email - ${email || ""}
        </li>
        <li>
          Phone - ${phone || ""}
        </li>
      </ul>
      <h4>Message</h4>
      <p>${message || ""}</p>
    </div>`;
    const msg = {
      to: "myemail@myemail.com",
      from: "no-reply@myemail.com",
      subject: `${name} sent you a new message`,
      text: text,
      html: text
    };
    sgMail.setApiKey(
      "SENDGRID API KEY"
    );
    sgMail.send(msg);
    res.status(200).send("success");
  }).catch(() => {
    res.status(500).send("error");
  });
});

Answer 3

This can be done using smtp.js using the code given below

var firestore = firebase.firestore();

var messagesRef = firestore.collection("bookingData");

//listen for submit
document.getElementById("bookingForm").addEventListener("submit", submitForm);

function submitForm(e) {
  e.preventDefault();

  //get values
  var email = getInputVal("email");
  var packageFields = getInputVal("packageFields");
  var name = getInputVal("name");
  var phone = getInputVal("phone");
  var date = getInputVal("date");
  var [persons] = getInputVal("persons");

  saveMessage(email, packageFields, name, phone, date, persons);
  sendEmail(packageFields, name, date, persons);
  //show alert
}

// function to get form values

function getInputVal(id) {
  return document.getElementById(id).value;
}

//save messages

function saveMessage(email, packageFields, name, phone, date, persons) {
  messagesRef
    .add({
      email: email,
      packageFields: packageFields,
      name: name,
      phone: phone,
      date: date,
      persons: persons,
    })
    .then(function (docRef) {
      console.log("Document written with ID: ", docRef.id);
      console.log(email);
    })
    .catch(function (error) {
      console.error("Error adding document: ", error);
    });
}

function sendEmail(packageFields, name, date, persons) {
  Email.send({
    Host: "smtp.gmail.com",
    Username: "trippyadive.web.app@gmail.com",
    Password: "xxxxxxxxxx",
    To: "subhodiproy161101@gmail.com",
    From: "trippyadive.web.app@gmail.com",
    Subject: "Sending Email using javascript",
    Body: `Your package of ${packageFields} for ${name} with total ${persons} persons (incl. ${name}) dated ${date} has been provisonalised. Your seat will be confirmed once you complete the payment of the Security Deposit`,
  }).then(function (message) {
    alert("mail sent successfully");
  });
}