csubira
5 years ago
parent
c198a40dd8
commit
855a3d74ab
|
After Width: | Height: | Size: 227 B |
|
After Width: | Height: | Size: 363 B |
@ -0,0 +1,66 @@
|
||||
var $ = require('jquery');
|
||||
|
||||
/* Util to request connector via hubspot */
|
||||
|
||||
module.exports = {
|
||||
requestConnectorHubspot: function (data, callback, error) {
|
||||
/* Using V3 hubspot API
|
||||
https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid */
|
||||
var hubspot_id = '474999';
|
||||
var form_id = '1644a76c-4876-45ae-aa85-2420cd3fb3ff';
|
||||
var url = `https://api.hsforms.com/submissions/v3/integration/submit/${hubspot_id}/${form_id}`;
|
||||
|
||||
return $.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
data: JSON.stringify(data),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
success: callback,
|
||||
error: error
|
||||
});
|
||||
},
|
||||
|
||||
getFormData: function (userModel, connectorName, requestType) {
|
||||
return {
|
||||
'fields': [
|
||||
{
|
||||
'name': 'email',
|
||||
'value': userModel.get('email')
|
||||
},
|
||||
{
|
||||
'name': 'firstname',
|
||||
'value': userModel.get('name') || 'no_firstname'
|
||||
},
|
||||
{
|
||||
'name': 'lastname',
|
||||
'value': userModel.get('last_name') || 'no_last_name'
|
||||
},
|
||||
{
|
||||
'name': 'jobtitle',
|
||||
'value': userModel.get('job_role') || 'no_jobtitle'
|
||||
},
|
||||
{
|
||||
'name': 'company',
|
||||
'value': userModel.get('company') || 'no_company'
|
||||
},
|
||||
{
|
||||
'name': 'phone',
|
||||
'value': userModel.get('phone') || 'no_phone'
|
||||
},
|
||||
{
|
||||
'name': 'connector_request_type',
|
||||
'value': requestType || 'request'
|
||||
},
|
||||
{
|
||||
'name': 'connector_request_name',
|
||||
'value': connectorName
|
||||
}
|
||||
],
|
||||
'context': {
|
||||
'pageUri': window.location.href,
|
||||
'pageName': window.location.href.includes('builder') ? 'Layer | CARTO' : document.title
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,71 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
var template = require('./import-other-button.tpl');
|
||||
var HubspotRequest = require('../hubspot-request');
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'userModel'
|
||||
];
|
||||
|
||||
/**
|
||||
* Import button to request connector
|
||||
*/
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
className: 'ImportOther',
|
||||
tagName: 'button',
|
||||
|
||||
events: {
|
||||
'click .js-request': '_onRequest',
|
||||
'keyup .js-input': '_onKeyup',
|
||||
'click .js-submit': '_onSubmit',
|
||||
'click .js-ok': '_onOk'
|
||||
},
|
||||
|
||||
initialize: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
this._hasError = false;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(template({
|
||||
hasError: this._hasError
|
||||
}));
|
||||
return this;
|
||||
},
|
||||
|
||||
_onRequest: function () {
|
||||
this._goToStep(2);
|
||||
},
|
||||
|
||||
_onKeyup: function () {
|
||||
var hasValue = this.$('.js-input').val();
|
||||
this.$('.js-submit').toggleClass('is-disabled', !hasValue);
|
||||
},
|
||||
|
||||
_onOk: function () {
|
||||
this._goToStep(1);
|
||||
},
|
||||
|
||||
_goToStep (step) {
|
||||
this.$('.js-step').removeClass('is-active');
|
||||
this.$(`.js-step${step}`).addClass('is-active');
|
||||
},
|
||||
|
||||
_onSubmit: function () {
|
||||
this._goToStep(3);
|
||||
|
||||
var inputValue = this.$('.js-input').val();
|
||||
var self = this;
|
||||
|
||||
var data = HubspotRequest.getFormData(this._userModel, inputValue);
|
||||
HubspotRequest.requestConnectorHubspot(data,
|
||||
function () {
|
||||
self._hasError = false;
|
||||
self._goToStep(4);
|
||||
},
|
||||
function () {
|
||||
self._hasError = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,36 @@
|
||||
<ul>
|
||||
<li class="ImportOther__step1 js-step js-step1 js-request is-active">
|
||||
<i class='icon'></i>
|
||||
<span><%- _t('components.modals.add-layer.imports.other.request') %></span>
|
||||
</li>
|
||||
<li class="ImportOther__step2 js-step js-step2">
|
||||
<span><%- _t('components.modals.add-layer.imports.other.type') %></span>
|
||||
<input type="text" class="ImportOther__input js-input" required value=""/>
|
||||
<button type="submit" class="ImportOther__inputSubmit js-submit is-disabled CDB-Text CDB-Size-small u-actionTextColor u-upperCase">
|
||||
<span><%- _t('components.modals.add-layer.imports.other.submit') %></span>
|
||||
</button>
|
||||
<div class="ImportOther__inputError"></div>
|
||||
</li>
|
||||
<li class="ImportOther__step3 js-step js-step3">
|
||||
<span><%- _t('components.modals.add-layer.imports.other.sending') %></span>
|
||||
<div class="ImportOther__spinner Spinner"></div>
|
||||
</div>
|
||||
<li class="ImportOther__step4 js-step js-step4 <%- hasError ? 'hasError' : '' %>">
|
||||
<span class="ImportOther_requestText">
|
||||
<% if (hasError) { %>
|
||||
<%- _t('components.modals.add-layer.imports.other.success') %>
|
||||
<% } else { %>
|
||||
<%- _t('components.modals.add-layer.imports.other.error') %>
|
||||
<% } %>
|
||||
</span>
|
||||
<button class="CDB-Button CDB-Button--primary ImportOther__requestButton js-ok">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase ImportOther__requestButtonText">
|
||||
<% if (hasError) { %>
|
||||
<%- _t('components.modals.add-layer.imports.other.try-again') %>
|
||||
<% } else { %>
|
||||
<%- _t('components.modals.add-layer.imports.other.ok') %>
|
||||
<% } %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
Loading…
Reference in new issue