Fulfil.IO Freshdesk Plugin

freshplug.html

<div id="fulfil_widget" class="widget" title="Fulfil.IO">
  <div>
    <h4>Fulfil.IO</h4>
  	<img src="https://www.fulfil.io/static/images/[email protected]" height="40px" class="img img-responsive pull-right"/>
  </div>
  <div class="content" id="fulfil-content">Loading..</div>
  <div class="error" id="fulfil-error"></div>
</div>
<script type="text/template" id="contact-template">
  <h6>Found <%= _.keys(contacts).length  %> contact(s)</h6>
  <br/>
  <% _.each(contacts, function(contact) { %>
    
  <h5><b>Customer Information</b></h5>
  <ul>
    <li>Customer Name: <a href="<% print(url_for('party.party', contact.id)) %>" target="new"><%= contact.rec_name %> (<%= contact.code %>)</a></li>
    <li>Total Spend: <%= accounting.formatMoney(contact.total_sale_order_value.decimal) %></li>
  </ul>
  <br/>
    
  <h5>
    <b>Recent Orders</b> 
    <small><a href='<% print(url_for('sale.sale', null, '[["party","=",' + contact.id + ']]')) %>' target="new">View All</a></small>
  </h5>
  <table class="table table-bordered">
    <% _.each(contact.orders, function(order) { %>
    <tr>
      <td>
        <a href="<% print(url_for('sale.sale', order.id)) %>" target="new"><%= order.number %></a><br/>        
        <%= moment(order.sale_date.iso_string).format("MMM Do YY") %> 
        (<%= moment(order.sale_date.iso_string).fromNow() %>)
      </td>
      <td>
        <%= accounting.formatMoney(order.total_amount.decimal, order['currency.symbol']) %><br/>
        <%= order.state %>
      </td>        
    </tr>
    <% }); %>
  </table>
  <br/>
    
  <h5>
    <b>Recent Shipments</b>
    <small><a href='<% print(url_for('stock.shipment.out', null, '[["customer","=",' + contact.id + ']]')) %>' target="new">View All</a></small>
  </h5>   
  <table class="table table-bordered">
    <% _.each(contact.shipments, function(shipment) { %>
    <tr>
      <td>
        <%= shipment.planned_date.iso_string %><br/>
        <%= shipment['delivery_address.rec_name'] %>
      </td>
      <td>
        <a href="<% shipment['tracking_number.tracking_url'] %>" target="_blank">
          <%= shipment['tracking_number.carrier.rec_name'] %>
          <%= shipment['tracking_number.rec_name'] %>
        </a>
      </td>
      <td>
        <a href="<% print(url_for('stock.shipment.out', shipment.id)) %>" target="_blank">
          <%= shipment.number %>        
        </a>
        <%= shipment.state %>
      </td>
    </tr>
    <% }); %>    
  </table>
  <br/>      
  <% }); %>    
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://openexchangerates.github.io/accounting.js/accounting.min.js"></script>
<script type="text/javascript">
  /*
   * Configure this with your subdomain and apiKey
   */
  var config = {
    'subdomain': '<your subdomain>',
    'apiKey': '<your api key>'
  };
  
  /*
   * Return an URL to open on Fulfil for a given model and ID.
   */
  var url_for = function(model, id, domain) {
    if (id) {
      // individual record view
      return [
        "https://", config.subdomain, ".fulfil.io/client/#/model/",
        model, "/", id
      ].join("");
    } else {
      return [
        "https://", config.subdomain, ".fulfil.io/client/#/model/",
        model, "?domain=", domain
      ].join("");      
    }
  }

  /*
   * Make an Ajax request to a fulfil model and on success
   * call the callback function with the data.
   */
  var request = function(model, method, data) {
    var url = [
      "https://", config.subdomain, ".fulfil.io/api/v1/model/", model, "/", method
    ].join("");
    return jQuery.ajax({
      'url': url,
      'method': 'PUT',
      'headers': {
        'Content-Type': 'application/json',
        'x-api-key': config.apiKey
      },
      'data': data,
      'beforeSend': function(xhr) {
        xhr.setRequestHeader('x-csrf-token');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('X-Requested-With');      
      },
      'error': function(data) {
        jQuery('#fulfil-content').text('');
        jQuery('#fulfil-error').text(data.responseJSON.message);    
  	  }
    });
  }

  var renderContacts = function(contacts) {
      if (_.keys(contacts).length > 0) {
        var template = _.template(jQuery('#contact-template').text());
        jQuery('#fulfil-content').html(
          template({
            'contacts': contacts,
            'url_for': url_for,
            'moment': moment
          })
        );
      } else {
        jQuery('#fulfil-error').text("No Matching Contacts found!")
      }    
  }    

  var fetchShipments = function(contacts) {
    _.each(contacts, function(contact){contact.shipments = []});
    request(
        'stock.shipment.out',
        'search_read',
        '[[["customer","in",[' + _.keys(contacts).join(",") + ']]], null, 10, [["planned_date", "desc"]], ["customer","planned_date","number","delivery_address.rec_name","tracking_number.rec_name","tracking_number.carrier.rec_name","tracking_number.tracking_url","state"]]'
    ).done(function(shipments){
      _.each(shipments, function(shipment){
        contacts[order.customer].shipments.push(shipment);
      });
      renderContacts(contacts);
    });
  };
  
  var fetchOrders = function(contacts) {
    _.each(contacts, function(contact){contact.orders = []});
    request(
        'sale.sale',
        'search_read',
        '[[["party","in",[' + _.keys(contacts).join(",") + ']]], null, 5, [["sale_date", "desc"]], ["party","sale_date","number","total_amount","state", "currency.symbol"]]'
    ).done(function(orders){
      _.each(orders, function(order){
        contacts[order.party].orders.push(order);
      });
      fetchShipments(contacts);
    });
  };
  console.log("Test logging");
  
  if (domHelper.contact) {
    var user = domHelper.contact.getContactInfo().user
  } else if (domHelper.ticket) {
    var user = domHelper.ticket.getContactInfo().user;
  };
  
  request(
    'party.party',
    'search_read',
    '[[["contact_mechanisms.value", "ilike", "' + user.email + '"]], null, 10, null,["id", "rec_name", "code", "total_sale_order_value"]]'
  ).done(function(contacts){
    if (contacts.length < 1) {
      // No contacts found
      return renderContacts({});
    }
    fetchOrders(_.object(
      _.map(contacts, function(contact) {return contact.id}), // Key as contact id
      contacts // value as contact itself
    ));
  });
</script>

This freshdesk plugin displays customer insights and recent orders on the ticket and customer page of Freshdesk.

Steps

1. Navigate to Admin and then open Apps (under Helpdesk Productivity)
2. Click on the custom apps tab
3. Click on new custom app.
4. Fill the name as "Fulfil.IO"
5. Fill the description as "Display order history and customer insights"
6. Copy and paste the above code into script box.
7. Fill the subdomain and api key in the placeholders (line 79,80)