CODEWITHSUNDEEP
meteor
Fred J.
Fred J.

Reputation: 6049

Form link send and later submit to sender in Meteor

A Meteor web app being used by a logged in user "merchant" who needs to create a link and sms/email it to his customer. The link opens a form. The customer fills up the form and submits it so that the data gets inserted with a property merchantId, since many merchants can send to many customers.
This single page app is not using a Router but able to sms/email. How can linking a form between a merchant and a customer be accomplished elegantly so that the data from the correct customer gets "linked" to the correct merchant? Thanks

Upvotes: 1

Views: 44

Answers (1)

Jankapunkt
Jankapunkt

Reputation: 8423

Merchant Part

You can trigger after a successful send of the email/sms a meteor method, that stores a record of the sent email/sms in a collection (in this example named Record). This could be the schema for it:

Record Collection Schema (Server/Client)

{
    merchantId:String, // the id of the sender
    customer:String, //id or name or address or phone num of receiver
    opened:Boolean, //when the link is opened can be set to true
    link:String, // the link to be send,
    type:Number, //0=sms, 1=email,
    expires:Date, //in case the link is not opened
}

You can for example create a Meteor method to insert the record after send:

Insert Record (Server)

Meteor.methods({
    insertRecord:function(recordData) {
        //... check recordData by schmema and permissions here   
        return Records.insert(recordData);
    }
})

Sending the Email/SMS

So the merchant part of the app sends the link via sms/email and calls the insertRecord method to store the record of the saved .

Save Record (Client or Server)

const callback=function(err, res) {
    if (res) { // assume your sent was successful here
        Meteor.call("insertRecord",  {
            //... your record credentials
        });
    }
}
// a little bit of pseudocode
if (sms)
    sms.send(form, callback);
else
    email.send(form, callback);

Customer Part

When the customer opens the link it triggers a templatethat will render your form. You can initially run a meteor method to check the Record collection for a document that matches the link url.

Get Record by Url Method (Server)

Meteor.methods({
    getRecordByUrl:function(url) {
        //... do your input checks here
        return Records.findOne({link:url});
    },
});

Template for Form (Client)

Template.customerForm.onCreated(function(){

    const instance = this;
    instance.state = new ReactiveDict();
    instance.state.set("record", null);

    instance.autorun(function(){

        // if no record loaded yet
        if (!instance.state.get("record")) {

            Meteor.call("getRecordByUrl", window.location.href, function(err, res) {
                if (err || !res) {
                    //...handle err
                }
                this.state.set("record", res);
            }.bind(instance));  
        }
    });

});

Template.customerForm.helpers({
    getRecord() {
        return Template.instance().state.get("record");
    },

    getMerchantId() {
        const record = Template.instance().state.get("record");
        return record.merchantId;
    }
});

You can then use this document to add the merchantId to the form either as a hidden input or via html data attribute.

{{#if getRecord}}
    <form id="...">
        <input type="hidden" name="merchantId" value="{{getMerchantId}}" />
        <!-- other inputs here -->
    </form>
{{/if}}

The examples can of course be optimized but I think this way it clearer to understand.

Upvotes: 1

Related Questions