Working Example
Input #email
Input #password
Input #firstName
Input #lastName
Button #submitButton
Input #other
Heading 3
Page Code
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixUsers from 'wix-users';
import wixCrm from 'wix-crm';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
// Contact record is an object used to validate contact record information and generate objects needed for saving info to
// The local data collection as well as createContact function calls
class contactRecord {
constructor() {
this.changesMask = 0;
this.contactRecordObject = {};
this.masks = {
'firstName':1,
'lastName':2,
'email':4,
'password':8,
'other':16,
'_id':32
};
}
// ready is called to verify that all required properties have been entered.
ready() {
let testMask = 0;
for (var property in this.masks) {
if (property === 'password' ||
property === 'other' ||
property === '_id') {
// Skip this mask value
continue;
}
if (this.masks.hasOwnProperty(property)) {
testMask |= this.masks[property];
}
}
return this.changesMask === testMask;
}
// Maskset is used to test if a mask for a specific property is set
maskSet(property) {
let result = (this.masks[property] ? (this.changesMask & this.masks[property]) > 0 : false);
return result;
}
// dataCollectionObject generates an object for saving to the dataCollection
dataCollectionObject() {
let resObj = {};
let value = this.contactRecordObject['_id'];
if (value) {
resObj.contactId = value;
}
value = this.contactRecordObject['firstName'];
if (value) {
resObj.firstName = value;
}
value = this.contactRecordObject['lastName'];
if (value) {
resObj.lastName = value;
}
value = this.contactRecordObject['email'];
if (value) {
resObj.email = value;
}
value = this.contactRecordObject['other'];
if (value) {
resObj.other = value;
}
value = this.contactRecordObject['password'];
if (value) {
resObj.password = value;
}
console.log("*********************\n . dataSetObj\n"+JSON.stringify(resObj)+"\n*********************\n");
return resObj;
}
setFromDataCollection(collection) {
if (collection) {
let value = collection['contactId'];
if (value) {
this.addValueForProperty(value, '_id');
}
value = collection['firstName'];
if (value) {
this.addValueForProperty(value, 'firstName');
}
value = collection['lastName'];
if (value) {
this.addValueForProperty(value, 'lastName');
}
value = collection['email'];
if (value) {
this.addValueForProperty(value, 'email');
}
value = collection['other'];
if (value) {
this.addValueForProperty(value, 'other');
}
}
}
// crmObject generates an object for saving to the wix-crm
crmObject() {
let crmObj = {};
let value = this.contactRecordObject['_id'];
if (value !== null) {
crmObj._id = value;
}
value = this.contactRecordObject['firstName'];
if (value !== null) {
crmObj.firstName = value;
}
value = this.contactRecordObject['lastName'];
if (value !== null) {
crmObj.lastName = value;
}
value = this.contactRecordObject['other'];
if (value !== null) {
crmObj.other = value;
}
value = this.contactRecordObject['email'];
if (value !== null) {
crmObj.emails = [value];
crmObj.loginEmail = value;
}
console.log("*********************\n . crmObj\n"+JSON.stringify(crmObj)+"\n*********************\n");
return crmObj;
}
// changeMask is used to set or clear a proprty mask setting
changeMask(property, setMask) {
let setMaskBit = (setMask ? true : false);
console.log('changeMask('+property+')');
if (property &&
property !== 'password' &&
property !== 'other' &&
property !== '_id') {
let mask = this.masks[property];
if (mask) {
if (setMaskBit) {
// Set the mask bit
this.changesMask |= mask;
} else {
// Clear the mask bit
this.changesMask &= ~mask;
}
}
}
console.log('changesMask = '+ this.changesMask);
}
// addValueForElement takes an element object as input and extracts its value property
// adding it to the contactRecord object
addValueForElement(elementId) {
console.log(typeof elementId);
let element = this.normalizeElement(elementId);
if (element && element.id) {
this.addValueForProperty(element.value, element.id);
}
}
// addValueForProperty adds the value passed as a parameter to the property for the contactRecord object
addValueForProperty(value, property) {
if (value !== null && property !== null && this.contactRecordObject[property] !== value) {
this.contactRecordObject[property] = value;
this.changeMask(property, true);
}
}
// deleteValueForProperty frmoves a property and its value from the contactRecord object
deleteValueForProperty(property) {
if (property) {
delete this.contactRecordObject[property];
if (this.masks[property]) {
// Clear the mask
this.changeMask(property, false);
}
}
}
// normalizeElement takes either an element or an element name and returns an element
normalizeElement(elementId) {
let element = elementId;
if (elementId && typeof elementId === 'string') {
element = $w('#'+elementId);
}
return element;
}
}
let contactObject = null;
let thisUser = null;
// Inituialize page view and related variables
$w.onReady(function () {
clearContact(); // Forces the creation of a new contact object
clearError(); // Hides any error info
// Checks for a logged in user. If one is logged in then the logged in info is used
// to load the page
loadUser();
});
// Convenience function to show info text box
function showInfo(message) {
$w('#info').text = message;
$w('#info').show();
}
// Convenience function to hide info text box
function hideInfo() {
$w('#info').text = '';
$w('#info').hide();
}
// ContactRecord Object getter. Will load a new object if clearContact has been called
function contact() {
if (!contactObject) {
// Create a new record if we don't have one
contactObject = new contactRecord();
}
return contactObject;
}
// discard contactRecordObject
function clearContact() {
contactObject = null;
}
// Loads element properties for a logged in user
function loadUser() {
thisUser = wixUsers.currentUser;
// If user is logged in we need to load UI with conact info if we have it
if (thisUser.loggedIn) {
// Get the user email info
thisUser.getEmail()
.then((email) => {
if (!email) {
throw Error('INFO: No email for logged in user');
}
contact().addValueForElement($w('#email'));
return loadLocalContactRecord(email);
})
.then((contactResult) => {
// We found a matching record so update the page
loadPageProperties(contactResult);
})
.catch((error) => {
// No matching record
showError(error.message);
});
}
}
// loadPageProperties - walks through the data from our data collection and populates the page elements
function loadPageProperties(contactData) {
if (contactData) {
let value = contactData['contactId'];
if (value) {
$w('#id').value = value;
}
value = contactData['firstName'];
if (value) {
$w('#firstName').value = value;
}
value = contactData['lastName'];
if (value) {
$w('#lastName').value = value;
}
value = contactData['email'];
if (value) {
$w('#email').value = value;
}
value = contactData['other'];
if (value) {
$w('#other').value = value;
}
}
}
function resetPageProperties() {
$w('#id').value = "";
$w('#firstName').value = "";
$w('#lastName').value = "";
$w('#other').value = "";
}
// loadLocalContactRecord is used to query the local data collection for a matching contactRecord
function loadLocalContactRecord(email) {
if (!email) {
throw Error("INTERNAL ERROR: Email address missing");
}
return wixData.query('CreateContactUpdate')
.eq('email', email)
.find()
.then((results) => {
// We only want one result anything else means we haven't saved a record yet or we have a logic problem
if (results.totalCount !== 1) {
let errorObj = new Error('INFO: Missing or too many records for '+email);
errorObj.dataQueryCount = results.totalCount;
throw errorObj;
}
// We have a result
return Promise.resolve(results.items[0]);
})
.then((contactResult) => {
// Populate a new contact object from the record obtained using the email address
contact().setFromDataCollection(contactResult);
return Promise.resolve(contactResult);
});
}
// updateLocalContactRecord is used to write the data in our contactRecord object to the local database
function updateLocalContactRecord() {
if (!contact().ready()) {
throw Error('INFO: Missing Mandatory Field');
}
return wixData.save('CreateContactUpdate', contact().dataCollectionObject());
}
// registerUser - makes sure that we only deal with a single CRM record.
export function registerUser() {
if (!contact().ready()) {
throw Error('INFO: Missing Mandatory Field');
}
// Check to see if we already have this record in the wix-crm
return loadLocalContactRecord(contact().dataCollectionObject().email)
.then((contactResult) => {
console.log("Updating ["+contact().dataCollectionObject().email+"]");
let contactInfo = contact().crmObject();
let email = contactInfo.loginEmail;
return updateLocalContactRecord();
})
.catch((subError) => {
// We will get an error if the contact is not in our local database or we have too many
// Too many is an error. Zero means we need to save this record
if (!subError.message.indexOf("INFO:") === 0 && subError['dataQueryCount'] !== 0) {
// Error is not ignorable!
throw subError;
}
// This is the first time we have saved this record
console.log("First Ever Save For ["+contact().dataCollectionObject().email+"]");
// Get the crom formated object from our contactRecord object and call createContact
let contactInfo = contact().crmObject();
let email = contactInfo.loginEmail;
return wixUsers.register(email, "Dumm13", {'contactInfo':contactInfo})
.then((registeredUser) => {
// Successful creation
if (registeredUser.user && registeredUser.user.id) {
if (!contact().crmObject()._id) {
// Update the contactRecord object id
contact().addValueForProperty(registeredUser.user.id, "_id");
} else if (contact().crmObject()._id !== registeredUser.user.id) {
// CRM and data collection are out of synch
throw Error("Error: CRM Record update returned additional contactId");
}
}
// Update the local data collection
return updateLocalContactRecord();
})
.catch ((error) => {
let errorMessage = 'WixError '+(error instanceof Error ? error.message + (error.stack ? '\nStack Trace:\n'+error.stack : ""): error);
throw new Error(errorMessage);
});
});
}
// Error display convenience function
function showError(message) {
if (message) {
$w('#error').text = message;
$w('#error').show();
}
}
// Error hide convenience function
function clearError(){
$w('#error').text = "";
$w('#error').hide();
}
// email_change - Detect a change in the email address. If the email is in the local data collection then retrieve the info
// and fillout the page elements
export function email_change(event) {
//Add your code for this event here:
clearError();
contact().addValueForElement($w('#email'));
// Fetch loacl record
loadLocalContactRecord($w('#email').value)
.then(contactResult => {
// Update page elements
loadPageProperties(contactResult);
})
.catch(error => {
// Email not yet in our collection and likely not in our crm
showError(error.message);
});
}
// Convenience functions to Update the contact record object properties
export function password_change(event) {
//Add your code for this event here:
clearError();
contact().addValueForElement($w('#password'));
}
export function firstName_change(event) {
//Add your code for this event here:
clearError();
contact().addValueForElement($w('#firstName'));
}
export function lastName_change(event) {
//Add your code for this event here:
clearError();
contact().addValueForElement($w('#lastName'));
}
export function other_change(event) {
//Add your code for this event here:
clearError();
contact().addValueForElement($w('#other'));
}
// submitButton_click(event) registers the user with the form data if it is valid
export function submitButton_click(event) {
//Add your code for this event here:
if (contact().ready()) {
registerUser()
.then((contactId) => {
console.log('contactId:'+contactId);
showEmailButton();
})
.catch((err) => {
showError(err.message);
});
} else {
showError("INFO: Missing mandatory records");
}
​
}
// Enables the button that will send an email to the registered user
function showEmailButton() {
$w('#sendEmail').show();
}
// sendEmail_click(event) - performs the triggered email send functionality.
// Uses wix-crm emailContact function.
export function sendEmail_click(event) {
//Add your code for this event here:
let emailVariables = null;
let contactRecordObject = contact().crmObject();
if (contactRecordObject.other) {
emailVariables = {'otherMessage':contactRecordObject.other};
}
wixCrm.emailContact('CCUETestEmail', contactRecordObject._id, emailVariables)
.then(() => {
showInfo("Test Email Sent!");
})
.catch((error) => {
showError(error);
});
}