Jira code:EN-864
Create a lead record in netsuite after registration from website.
Created a new page “International” using extension.
After submitting the form, the lead record will be created in Netsuite with entered data and category as Dealer.
Entry ponit file:
define(
'JJ.International.International'
, [
'JJ.International.International.View', 'Utils', 'JJ.International.International.Router'
]
, function (
InternationalView, Utils, InternationalRouter
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
if (layout) {
layout.addChildView('International', function() {
return new InternationalView({ container: container });
});
return new InternationalRouter(container);
}
}
};
});
view file:
// @module JJ.International.International
define('JJ.International.International.View'
, [
'jj_international_international.tpl'
, 'JJ.International.International.SS2Model'
, 'Backbone', 'JJ.International.International.Model', 'GlobalViews.Message.View', 'Utils', 'Backbone.CompositeView', 'Backbone.CollectionView', 'Backbone.FormView', 'SC.Configuration', 'jQuery', 'underscore'
]
, function (
jj_international_international_tpl
, TestInternationalSS2Model
, Backbone, InternationalModel, GlobalViewsMessageView, Utils, BackboneCompositeView, BackboneCollectionView, BackboneFormView, Configuration, jQuery, _
) {
'use strict';
return Backbone.View.extend({
template: jj_international_international_tpl
, initialize: function (options) {
this.message = '';
BackboneCompositeView.add(this);
this.application = options.application;
this.model = new InternationalModel();
BackboneFormView.add(this);
},
title: _('International').translate(),
page_header: _('International').translate(),
attributes: {
'id': 'international-page',
'class': 'international-page'
}
, events: {
"submit #international-form": "SubmitForm"
},
// childViews: {
// 'CountriesDropdown': function ()
// {console.log("this in states view contact detailsedit",this);
// return new CountriesDropdownView({
// countries: this.countries
// , selectedCountry: this.selected_country
// , manage: this.options.manage
// });
// }
// , 'StatesView': function ()
// {console.log("this in states view contact detailsedit",this);
// return new GlobalViewsStatesView({
// countries: this.countries
// , selectedCountry: this.model.attributes.country
// , selectedState: this.model.get('state')
// , manage: this.options.manage
// });
// }
// },
bindings: {
'[name="international_company"]': 'international_company',
'[name="international_firstname"]': 'international_firstname',
'[name="international_lastname"]': 'international_lastname',
'[name="international_country"]': 'international_country'
}
,
SubmitForm: function (e) {
jQuery('form .global-views-message').parent().remove();
var promise = BackboneFormView.saveForm.apply(this, arguments),
self = this;
e && e.preventDefault();
return promise && promise.then(
function (success) {
if (success.successMessage) {
console.log('inside if success')
// var global_view_message = new GlobalViewsMessageView({
// message: message,
// type: 'success',
// closable: false
// });
// var msgContainerParent = jQuery('.successmessage');
// msgContainerParent.html(global_view_message.render().$el.html());
$(".successmessage").show()
setTimeout(function () {
window.location.reload()
}, 5000);
}
// else {
// console.log('inside if error')
// }
if (success.emailerrorMessage) {
console.log('failed');
var message = "This email id is already registered. Please try again."
var global_view_message = new GlobalViewsMessageView({
message: message,
type: 'error',
closable: false
});
var msgContainerParent = jQuery('.warningmessage');
msgContainerParent.html(global_view_message.render().$el.html());
setTimeout(function () {
window.location.reload()
// window.location.href = "https://www.enlightenprofessional.tk/sca-dev-2021-2-0/checkout-local.ssp#international";
// location.replace("https://www.enlightenprofessional.tk/sca-dev-2021-2-0/checkout.ssp#international");
}, 5000);
}
// if (success.customererrorMessage) {
// console.log('failed');
// var message = "This customer id is already registered. Please try again."
// var global_view_message = new GlobalViewsMessageView({
// message: message,
// type: 'error',
// closable: false
// });
// var msgContainerParent = jQuery('.warningmessage');
// msgContainerParent.html(global_view_message.render().$el.html());
// setTimeout(function () {
// window.location.reload()
// }, 3000);
// }
},
function (fail) {
console.log('fail')
//fail.preventDefault = true;
var message = "An error occured, please try again"
var global_view_message = new GlobalViewsMessageView({
message: message,
type: 'error',
closable: false
});
var msgContainerParent = jQuery('.warningmessage');
msgContainerParent.html(global_view_message.render().$el.html());
window.location.reload()
}
);
}
, getContext: function getContext() {
this.message = this.message || 'Hello World!!'
return {
message: this.message
};
}
});
});
Router.js
define(
'JJ.International.International.Router', [
'JJ.International.International.View', 'Backbone', "Profile.Model", 'JJ.International.International.Model'
],
function (
InternationalView, Backbone, ProfileModel, Model
) {
'use strict';
return Backbone.Router.extend({
routes: {
'international': 'GoTotestInternational'
}
,
initialize: function (Application) {
this.application = Application;
},
GoTotestInternational: function () {
var view = new InternationalView({ application: this.application });
view.showContent();
}
});
});model.js
// Model.js
// -----------------------
// @module Case
define("JJ.International.International.Model", ["Backbone.CachedModel", "Utils", "underscore", "jQuery"], function (
BackboneCachedModel,
Utils, _, jQuery
) {
"use strict";
return BackboneCachedModel.extend({
urlRoot: Utils.getAbsoluteUrl(
getExtensionAssetsPath(
"services/International.Service.ss"
)
),
validation: {
international_company: {
required: true,
msg: _('Company Name is required').translate()
},
international_mrms:{
required: true,
msg: _('Mr/Ms is required').translate()
},
international_firstname: {
required: true,
msg: _('First Name is required').translate()
},
international_lastname: {
required: true,
msg: _('Last name is required').translate()
},
international_email: {
required: true,
msg: _('Email is required').translate(),
pattern: 'email',
msg: 'Please enter a valid email address'
},
international_phone:[{
required: true,
msg: _('Phone Number is required').translate(),
}, {
pattern: '^(?!0+$)[\+]?[(]?[0-9]{2,4}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,10}$',
msg: 'Please enter a valid Phone Number'
}],
international_country: {
required: true,
msg: _('Country is required').translate()
}
}
,
parse: function (response) {
return response;
}
});
});Suitescript:
Model file:
// JJ.International.International.js
// Load all your starter dependencies in backend for your extension here
// ----------------
define('JJ.International.International'
, [
'International.ServiceController', 'SC.Model', 'Application', 'Utils', 'underscore'
]
, function (
InternationalServiceController, SCModel, Application, Utils, _
) {
'use strict';
return SCModel.extend({
name: 'JJ.International.International',
CreateLead: function (data) {
console.log('In@Model: Forms', JSON.stringify(data))
var CONTENT = '';
var emailad = 'test@gmail.com';
try {
console.log('script su ccess');
nlapiLogExecution('debug', 'cmpnyname', data.international_company);
var email_Id = data.international_email;
nlapiLogExecution('debug', 'email_Id', email_Id);
var entityId = data.international_company;
nlapiLogExecution('debug', 'entityId', entityId);
var customerSearch = nlapiSearchRecord("customer", null,
[
["email", "is", email_Id]
],
[
new nlobjSearchColumn("internalid")
]
);
if (!!customerSearch) {
if (customerSearch.length > 0) {
try {
nlapiLogExecution('debug', 'customerSearchlength', customerSearch.length);
// nlapiLogExecution('debug', 'customerSearchfound', customerSearch);
return {
emailerrorMessage: 'this email id is already registered'
}
} catch (e) {
nlapiLogExecution('error', 'error@showmessage', e);
}
}
}
else {
try {
// nlapiLogExecution('debug', 'terms', data.terms);
// nlapiLogExecution('debug', 'customerSearchnotfound', customerSearch);
// nlapiLogExecution('debug', 'entitySearchnotfound', entitySearch);
var customerRecord = nlapiCreateRecord('lead', {
recordmode: 'dynamic'
});
nlapiLogExecution('debug', 'customerRecord', customerRecord);
customerRecord.setFieldValue('isperson', 'F');
// customerRecord.setFieldValue('entitystatus', 13);
// customerRecord.setFieldValue('subsidiary', 1);
// customerRecord.setFieldValue('pricelevel', 27);
if (data.international_company) {
customerRecord.setFieldValue('companyname', data.international_company);
}
if (data.international_firstname) {
fName = data.international_firstname;
} else {
fName = " ";
}
if (data.international_lastname) {
lName = data.international_lastname;
} else {
lName = " ";
}
if (data.international_email) {
emailId = data.international_email;
} else {
emailId = " ";
}
if (data.international_phone) {
phoneNo = data.international_phone;
} else {
phoneNo = " ";
}
if (data.international_country) {
countryVal = data.international_country;
} else {
countryVal = " ";
}
customerRecord.setFieldValue('firstname', fName);
customerRecord.setFieldValue('lastname', lName);
customerRecord.setFieldValue('phone', phoneNo);
customerRecord.setFieldValue('email', emailId);
customerRecord.setFieldValue('custentity_leadcountry', countryVal);
customerRecord.setFieldValue('category', 3);
// customerRecord.setFieldValue('terms', 9);
// customerRecord.setFieldValue('pricelevel', 1);
// customerRecord.setFieldValue('leadsource', 6);
// customerRecord.setFieldValue('salesrep', 451670);
var custid = nlapiSubmitRecord(customerRecord, false, true);
nlapiLogExecution('debug', 'custid', custid);
return {
successMessage: 'Your request has been submitted.'
}
} catch (e) {
// statements
console.error('err@formsubmission', e);
return {
status: 500,
code: 'ERR_FORM',
message: 'There was an error submitting the form, please try again later'
}
}
}
} catch (e) {
// statements
console.error('err@contactus', e);
return {
status: 500,
code: 'ERR_FORM',
message: 'There was an error submitting the form, please try again later'
}
}
}
});
});Service contoller
define("International.ServiceController", ["ServiceController", "JJ.International.International"], function (
ServiceController, InternationalModel
) {
"use strict";
return ServiceController.extend({
name: "International.ServiceController",
// The values in this object are the validation needed for the current service.
options: {
common: {}
},
get: function get() {
return JSON.stringify({
message: "Hello World I'm an Extension using a Service!"
});
},
post: function post() {
// console.error('contactus_testing')
// console.error('In@ContactUsServices: Forms', JSON.stringify(this.data))
this.sendContent(InternationalModel.CreateLead(this.data), { 'status': 201 });
},
put: function put() {
// not implemented
},
delete: function () {
// not implemented
}
});
});template
<section class="internationalregister-info-card">
<span class="internationalregister-info-card-content">
<!-- {{message}} -->
<div class="international-register-container-main">
<h2 class="international-head">International</h2>
<p class="international-desription-text">For International Distributor Opportunities Please Fill Out The Inquiry Form Below And We Will Be In Touch!
<p>
<form id="international-form" action="POST" novalidate="">
<fieldset class="international-register-login-form-fieldset">
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input type="text" name="international_company" id="international_company" placeholder="Company name" class="international-register-form-input"/>
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input {{#if hasAutoFocus}} autofocus {{/if}} type="text" name="international_mrms" id="international_mrms" placeholder="Mr/Ms" class="international-register-form-input">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input {{#if hasAutoFocus}} autofocus {{/if}} type="text" name="international_firstname" id="international_firstname" placeholder="First Name" class="international-register-form-input">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input type="text" name="international_lastname" id="international_lastname" placeholder="Last Name" class="international-register-form-input">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input type="email" name="international_email" id="international_email" placeholder="Email" class="international-register-form-input">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group dentist-field" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input type="text" name="international_phone" id="international_phone" placeholder="Phone Number" class="international-register-form-input">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
<!-- <div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group dentist-field international-enquiry-dropdown-div" data-validation="control-group">
<div class="address-edit-fields-group international-enquiry-dropdown" placeholder="Country" data-view="CountriesDropdown" data-input="country" data-validation="control-group">
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div> -->
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group dentist-field" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<select class="international-register-form-input country-drop-down" name="international_country" id="international_country">
<option value="United Kingdom">United Kingdom</option>
</select>
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>
{{! 1.3.7}}
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group exclusive-promo-checkbox" data-validation="control-group">
<div class="international-register-form-controls" data-validation="control">
<input type="checkbox" class="es-checkbox" name="emailsubscribe" id="emailsubscribe">
</div>
<label class="international-register-form-label" >
{{translate 'Sign me up for Enlighten Smiles exclusive offers and promotions' siteName}}
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="international-register-form-controls-group international-submit">
<div class="international-register-form-controls">
<button type="submit" class="international-login-submit" >
Submit
</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<div><small class="warningmessage"></small></div>
<div class="success-text" style="margin-top:25px;"><small class="successmessage">Thank you, your international dealer application is now being reviewed. We will get in touch shortly.</small></div>
</div>
</span>
</section>
<script>
$(function () {
$("#international_country").append("<option value='' selected hidden>Country</option>");
})
</script>
sass
/*
Sass Application Entry Point
Link all your sass dependencies in the right order
Example:
@import "other-sass-file.scss";
@import "../../<other module>/Sass/other-sass-file.scss";
*/
.international-info-card {
@extend .info-card;
}
.international-info-card-content {
@extend .info-card-content;
color: $sc-color-secondary;
font-weight: bold;
}
/*
Sass Application Entry Point
Link all your sass dependencies in the right order
Example:
@import "other-sass-file.scss";
@import "../../<other module>/Sass/other-sass-file.scss";
*/
.internationalregister-info-card {
// @extend .info-card;
padding: $sc-padding-lv3;
}
.internationalregister-info-card-content {
@extend .info-card-content;
color: $sc-color-secondary;
font-weight: bold;
}
.international-register-container{
height:500px;
}
.international-head{
font-family:$sc-font-family1;
font-weight: $sc-font-weight-light;
font-size:42px;
color:#000000;
}
.international-desription-text{
font-size:17px;
font-family:$sc-font-family1;
font-weight: $sc-font-weight-light;
color: #858585;
width: 450px;
padding-bottom: 35px;
@media(max-width:767px){
width:auto;
}
}
.international-register-container-main{
@media(min-width:992px){
padding-left:114px;
padding-top:60px;
width: 1207px;
}
.international-register-form-input{
border:1px solid #cccccc;
padding-left:22px;
color: #858585 !important;
font-weight:$sc-font-weight-normal;
font-size:16px;
font-family:$sc-font-family1;
height: 40px;
@media(min-width:992px){
width: 439px;
border-radius: 3px;
}
&:focus{
border:1px solid #cccccc;
outline:none;
}
&:active{
border:1px solid #cccccc;
outline:none;
}
}
}
.international-register-container-main{
::placeholder {
color: #858585 !important;
font-weight:$sc-font-weight-normal;
font-size:16px;
font-family:$sc-font-family1;
// overflow: visible;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #858585 !important;
font-weight:$sc-font-weight-normal;
font-size:16px;
font-family:$sc-font-family1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #858585 !important;
font-weight:$sc-font-weight-normal;
font-size:16px;
font-family:$sc-font-family1;
}
input[type="checkbox"]{
width: 21px;
height: 21px;
border: 1px solid #000000;
border-radius: 3px;
}
input[type="checkbox"]:checked {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #000;
box-shadow: none;
font-size: 0.8em;
text-align: center;
line-height: 1em;
background: #000;
}
input[type="checkbox"]:checked::after {
content: url("https://www.enlightenprofessional.tk/SSP Applications/NetSuite Inc. - SCA 2021.2.0/Development/img/En_tick_checkout.svg");
color: white;
line-height: 18px;
}
}
.international-register-form-label{
font-weight:$sc-font-weight-normal;
font-size:14px;
font-family:$sc-font-family1;
color:#000000;
//padding-top:5px;
padding-left:5px;
}
.exclusive-promo-checkbox{
display:flex;
padding-top:20px;
@media(min-width:768px)
{
padding-top:50px;
}
}
.international-register-form-controls-group{
padding-bottom:10px;
}
.international-login-submit{
background: #000000;
border-radius: 5px;
width: 210px;
font-weight:$sc-font-weight-normal;
font-size:18px;
font-family:$sc-font-family1;
height:50px;
color:#ffffff;
text-align: left;
padding-left: 20px;
@media(max-width:767px){
width:175px;
}
&:hover{
outline:none;
color:#ffffff;
}
&:focus{
outline:none;
color:#ffffff;
}
&:active{
outline:none;
color:#ffffff;
}
@media(min-width:768px)
{
margin-top:30px;
}
}
.international-submit{
float:right;
}
.internationalregister-info-card{
@media(max-width:768px){
padding-bottom:90px;
}
@media(min-width:769px){
//height:860px;
padding-bottom:150px;
}
}
.successmessage{
display: none;
font-weight: 700;
font-size: 16px;
font-family: "Roobert";
color: black;
margin-top: 40px;
}
.international-register-login-form-fieldset{
.global-views-countriesDropdown-group-label{
display:none;
}
}
.global-views-countriesDropdown-select {
border:1px solid #cccccc;
padding-left:25px;
color: #000000 !important;
font-weight:$sc-font-weight-normal;
font-size:16px;
font-family:$sc-font-family1;
line-height: 1;
@media(min-width:992px){
width: 439px !important;
border-radius: 3px;
height: 40px;
}
@media(max-width:991px){
width:100% !important;
}
&:focus{
border:1px solid #cccccc;
outline:none;
}
&:active{
border:1px solid #cccccc;
outline:none;
}
}
.international-register-form-controls select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(https://www.enlightenprofessional.tk/SSP%20Applications/NetSuite%20Inc.%20-%20SCA%202021.2.0/Development/img/select-down-arrow.png); /* Add custom arrow */
background-position-y: center;
background-origin: content-box;
background-size: 16px;
//overflow: visible;
padding:0px !important;
padding-left:22px !important;
padding-right: 10px !important;
}
.success-text{
@media(min-width:992px){
width:45%;
}
}
.international-register-form-controls{
.country-drop-down{
// line-height: 1;
color:#000000 !important;
@media(max-width:991px){
width:100%;
}
}
}