[Bucks] Add DVLA registration lookup.

.cypress/cypress/fixtures/bucks_dvla_notok.json

@@ -0,0 +1 @@
+{"registrationNumber":"L2WPS","engineCapacity":498,"markedForExport":false,"fuelType":"PETROL","motStatus":"Not valid","colour":"BLACK","make":"KAWASAKI","yearOfManufacture":1994,"taxDueDate":"2011-05-31","taxStatus":"Untaxed","dateOfLastV5CIssued":"2005-05-23","wheelplan":"2 WHEEL","monthOfFirstRegistration":"1994-05"}

.cypress/cypress/fixtures/bucks_dvla_ok.json

@@ -0,0 +1 @@
+{"registrationNumber":"AA19MOT","co2Emissions":152,"engineCapacity":1984,"markedForExport":false,"fuelType":"PETROL","motStatus":"Valid","revenueWeight":2025,"colour":"WHITE","make":"AUDI","typeApproval":"M1","yearOfManufacture":2016,"taxDueDate":"2026-12-16","taxStatus":"Taxed","dateOfLastV5CIssued":"2016-10-17","motExpiryDate":"2026-12-16","wheelplan":"2 AXLE RIGID BODY","monthOfFirstRegistration":"2016-09"}

.cypress/cypress/integration/buckinghamshire.js

@@ -181,3 +181,56 @@ describe('buckinghamshire roads handling', function() {
     cy.contains('Please select a road on which to make a report.').should('be.visible');
   });
 });
+
+describe('Abandoned vehicle behaviour', function() {
+  beforeEach(function() {
+    cy.server();
+    cy.route('/report/new/ajax*').as('report-ajax');
+    cy.route('/around\?ajax*').as('update-results');
+    cy.visit('http://buckinghamshire.localhost:3001/');
+    cy.contains('Buckinghamshire');
+    cy.get('[name=pc]').type('SL9 0NX');
+    cy.get('[name=pc]').parents('form').submit();
+    cy.wait('@update-results');
+    cy.get('#map_box').click(322, 307);
+    cy.wait('@report-ajax');
+    cy.pickCategory('Abandoned/Nuisance vehicle');
+    cy.nextPageReporting();
+    cy.pickSubcategory('Abandoned/Nuisance vehicle', 'A vehicle blocking a footpath');
+    cy.nextPageReporting();
+  });
+
+  it('No reg plate', function() {
+    cy.get('.js-reporting-page--active').contains('No').click();
+    cy.nextPageReporting();
+    cy.get('[name=VEHICLE_REGISTRATION]').should('have.value', 'Not known');
+  });
+
+  it('Said yes but no reg plate', function() {
+    cy.get('.js-reporting-page--active').contains('Yes').click();
+    cy.nextPageReporting();
+    cy.contains('This field is required');
+  });
+
+  it('Gave an okay reg plate', function() {
+    cy.route('POST', '/report/dvla', 'fixture:bucks_dvla_ok.json').as('dvla');
+    cy.get('.js-reporting-page--active').contains('Yes').click();
+    cy.get('[name=dvla_reg]').type('G00D');
+    cy.nextPageReporting();
+    cy.wait('@dvla');
+    cy.contains('White Audi car, Petrol, 2016');
+    cy.contains('that are taxed or have a valid MOT');
+  });
+
+  it('Gave an untaxed reg plate', function() {
+    cy.route('POST', '/report/dvla', 'fixture:bucks_dvla_notok.json').as('dvla');
+    cy.get('.js-reporting-page--active').contains('Yes').click();
+    cy.get('[name=dvla_reg]').type('B4D');
+    cy.nextPageReporting();
+    cy.wait('@dvla');
+    cy.get('[name=VEHICLE_REGISTRATION]').should('have.value', 'B4D');
+    cy.get('[name=ABANDONED_VEHICLE_TAXED]').should('have.value', 'No');
+    cy.get('[name=ABANDONED_SELECT_TYPE]').should('have.value', 'Motorbike');
+    cy.get('[name="MAKE_/_COLOUR_OF_THE_VEHI"]').should('have.value', 'Kawasaki / Black');
+  });
+});

bin/fixmystreet.com/fixture

@@ -148,6 +148,8 @@ if ($opt->test_fixtures) {
         { area_id => 164186, categories => ['Shelter Damaged', 'Very Urgent'], name => 'Northamptonshire Highways', cobrand => 'northamptonshire' },
         { area_id => 163793, categories => [
                 'Flytipping', 'Roads',
+                { group => 'Abandoned/Nuisance vehicle', category => 'A vehicle blocking a footpath' },
+                { group => 'Abandoned/Nuisance vehicle', category => 'A vehicle burnt out on the road' },
                 { group => 'Grass, hedges and weeds', category => 'Grass cutting' },
                 { group => 'Grass, hedges and weeds', category => 'Hedge problem' },
                 { group => 'Roads & Pavements', category => 'Parks' },
@@ -284,6 +286,20 @@ if ($opt->test_fixtures) {
         $child_cat->update;
     }
 
+    for my $cat ('A vehicle blocking a footpath', 'A vehicle burnt out on the road') {
+        $child_cat = FixMyStreet::DB->resultset("Contact")->find({
+            body => $bodies->{163793},
+            category => $cat,
+        });
+        $child_cat->set_extra_fields(
+            {"code" => "VEHICLE_REGISTRATION", "datatype" => "string", "required" => "true", "variable" => "true", "protected" => "false", "description" => "Vehicle registration number"},
+            {"code" => "ABANDONED_VEHICLE_TAXED", "values" => [{"key" => "Yes", "name" => "Yes"}, {"key" => "No", "name" => "No"}], "datatype" => "singlevaluelist", "required" => "true", "variable" => "true", "protected" => "false", "description" => "Is the vehicle taxed?"},
+            {"code" => "ABANDONED_SELECT_TYPE", "values" => [{"key" => "Car", "name" => "Car"}, {"key" => "Motorbike", "name" => "Motorbike"}, {"key" => "Other", "name" => "Other"}, {"key" => "Van", "name" => "Van"}], "datatype" => "singlevaluelist", "required" => "false", "variable" => "true", "protected" => "false", "description" => "Please select the type of vehicle"},
+            {"code" => "MAKE_/_COLOUR_OF_THE_VEHI", "datatype" => "string", "required" => "false", "variable" => "true", "protected" => "false", "description" => "Make/colour of the vehicle (if not known, please note not known)"},
+        );
+        $child_cat->update;
+    }
+
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({
         body => $bodies->{53822},
         category => 'Grass cutting',

perllib/FixMyStreet/App/Controller/Report/DVLA.pm

@@ -0,0 +1,34 @@
+package FixMyStreet::App::Controller::Report::DVLA;
+
+use Moose;
+use namespace::autoclean;
+BEGIN { extends 'Catalyst::Controller'; }
+
+use JSON::MaybeXS;
+use LWP::UserAgent;
+
+sub lookup : Path : Args(0) {
+    my ($self, $c) = @_;
+
+    my $reg = $c->req->body_params->{registration};
+    my $request = {
+        registrationNumber => $reg,
+    };
+
+    my $ua = LWP::UserAgent->new;
+
+    my $dvla = $c->cobrand->feature('dvla');
+    $c->detach( '/page_error_404_not_found' ) unless $dvla;
+
+    my $response = $ua->post(
+        $dvla->{uri} . '/v1/vehicles',
+        X_API_Key => $dvla->{key},
+        Content_Type => 'application/json',
+        Content => encode_json($request),
+    );
+
+    $c->res->content_type('application/json; charset=utf-8');
+    $c->res->body($response->decoded_content);
+}
+
+1;

templates/web/buckinghamshire/footer_extra_js.html

@@ -2,7 +2,8 @@
 [%
 IF bodyclass.match('mappage');
     scripts.push(
-        version('/cobrands/buckinghamshire/grass_cutting.js')
+        version('/cobrands/buckinghamshire/grass_cutting.js'),
+        version('/cobrands/fixmystreet-uk-councils/dvla.js'),
     );
 END;
 %]

web/cobrands/buckinghamshire/base.scss

@@ -115,6 +115,10 @@ dl dt {
       background-image: none;
       color: $bucks_charcoal !important;
     }
+    &:disabled {
+      color: transparentize(#000, 0.4) !important;
+      background: #eee;
+    }
 }
 
 label {

web/cobrands/fixmystreet-uk-councils/dvla.js

@@ -0,0 +1,161 @@
+/* Query the DVLA API on the tax status of a registration number */
+// jshint esversion: 6
+
+(function(){
+
+var FIELDS = {
+    'buckinghamshire': {
+        'reg': 'VEHICLE_REGISTRATION',
+        'taxed': 'ABANDONED_VEHICLE_TAXED',
+        'type': 'ABANDONED_SELECT_TYPE',
+        'colour': 'COLOUR_OF_THE'
+    }
+};
+
+fixmystreet.dvla = {};
+
+function title_case(str) {
+    return str.replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase());
+}
+
+fixmystreet.dvla.lookup = function(e) {
+    var yesno = document.querySelector('input[name=dvla_reg_have]:checked');
+
+    var fields = FIELDS[fixmystreet.cobrand];
+
+    if (!yesno) return;
+    yesno = yesno.value;
+    if (!yesno) {
+        field = document.querySelector('input[name*="' + fields.reg + '"]');
+        if (field) {
+            field.value = 'Not known';
+        }
+        return;
+    }
+    var reg = document.getElementById('dvla_reg').value;
+    if (!reg) return;
+    e.preventDefault();
+    e.stopPropagation();
+    $.post('/report/dvla', {'registration':reg}, function(data) {
+        var reasons = [];
+        if (data.taxStatus == 'Taxed') {
+            reasons.push('are taxed');
+        } else if (data.taxStatus == 'SORN') {
+            reasons.push('have SORN status');
+        }
+        if (data.motStatus == 'Valid') {
+            reasons.push('have a valid MOT');
+        }
+
+        data.make = title_case(data.make || '');
+        data.colour = title_case(data.colour || '');
+        data.fuelType = title_case(data.fuelType || '');
+
+        var type = data.typeApproval || '';
+        var wheelplan = data.wheelplan || '';
+        var vehicle_type = '';
+        if (type.match(/L[1-7]|motorcycle/i) || wheelplan.match(/motorcyle|moped|2 wheel/i)) {
+            vehicle_type = 'Motorbike';
+        } else if (type.match(/N1|commercial/i) || wheelplan.match(/van|commercial/i)) {
+            vehicle_type = 'Van';
+        } else if (type.match(/M1/i)) {
+            vehicle_type = 'Car';
+        } else if (type.match(/M[23]|N[23]/i) || wheelplan.match(/& artic|3 axle rigid|multi-axle rigid/i)) {
+            vehicle_type = 'Other';
+        }
+
+        if (reasons.length) {
+            $('.js-reporting-page--next').prop('disabled', true);
+            var stopperId = 'js-dvla-stopper';
+            var $id = $('#' + stopperId);
+
+            var vehicle_desc = [data.colour, data.make, vehicle_type=='Other'?'':vehicle_type.toLowerCase()].filter(Boolean).join(' ');
+            if (data.fuelType) vehicle_desc += ', ' + data.fuelType;
+            if (data.yearOfManufacture) vehicle_desc += ', ' + data.yearOfManufacture;
+            var reason = 'We cannot accept reports on vehicles that ' + reasons.join(' or ');
+            $msg = $('<div class="js-stopper-notice box-warning"><strong>' + vehicle_desc + '</strong><br>' + reason + '. You may be able to <a href="https://contact.dvla.gov.uk/report-untaxed-vehicle">contact the DVLA</a>.</div>');
+            $msg.attr('id', stopperId);
+            $msg.attr('role', 'alert');
+            $msg.attr('aria-live', 'assertive');
+            if ($id.length) {
+                $id.replaceWith($msg);
+            } else {
+                $msg.prependTo('.js-reporting-page--active .pre-button-messaging');
+            }
+            $('.js-reporting-page--active').css('padding-bottom', $('.js-reporting-page--active .pre-button-messaging').height());
+        } else {
+            var field = document.querySelector('input[name*="' + fields.colour + '"]');
+            if (field) {
+                var a = [];
+                if (data.make) a.push(data.make);
+                if (data.colour) a.push(data.colour);
+                field.value = a.join(' / ');
+            }
+            field = document.querySelector('select[name*="' + fields.type + '"]');
+            if (field && vehicle_type) {
+                field.value = vehicle_type;
+            }
+            field = document.querySelector('select[name*="' + fields.taxed + '"]');
+            if (field && !data.errors) {
+                field.value = 'No';
+            }
+            field = document.querySelector('input[name*="' + fields.reg + '"]');
+            if (field) {
+                field.value = reg;
+            }
+            fixmystreet.pageController.toPage('next');
+        }
+    });
+};
+
+fixmystreet.dvla.setup = function() {
+    var selected = fixmystreet.reporting.selectedCategory();
+    if (selected.group == 'Abandoned/Nuisance vehicle') {
+        var $msg = $(`<div class="js-dvla-message">
+
+<div class="govuk-form-group">
+  <fieldset class="govuk-radios govuk-radios--small">
+   <legend>
+      Do you know the vehicle’s registration number?
+    </legend>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="dvla_reg_have_yes" name="dvla_reg_have" type="radio" value="1" data-show="#dvla_reg_field" required>
+        <label class="govuk-label govuk-radios__label" for="dvla_reg_have_yes">Yes</label>
+      </div>
+      <div id="dvla_reg_field" class="hidden-js govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact">
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="dvla_reg">Registration number</label>
+          <input class="govuk-input required" id="dvla_reg" name="dvla_reg" type="text" spellcheck="false">
+        </div>
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="dvla_reg_have_no" name="dvla_reg_have" type="radio" value="" data-hide="#dvla_reg_field">
+        <label class="govuk-label govuk-radios__label" for="dvla_reg_have_no">No</label>
+      </div>
+  </fieldset>
+</div>
+
+</div>
+
+<div class="floating-button-spacer"><div class="floating-button-wrapper"><div class="floating-button">
+        <div class="pre-button-messaging"></div>
+        <button class="btn btn--block btn--primary js-reporting-page--next">Continue</button>
+</div></div></div>
+`);
+
+        var $div = $(".js-reporting-page.js-dvla-page");
+        if (!$div.length) {
+            $div = $("<div class='js-dvla-page'></div>");
+        }
+        $div.html($msg);
+        $div.find('button').on('click', fixmystreet.dvla.lookup);
+        fixmystreet.pageController.addPageAfter('duplicates', 'dvla', $div);
+        fixmystreet.set_up.toggle_visibility();
+    } else {
+        $(".js-dvla-page").remove();
+    }
+};
+
+$(fixmystreet).on('report_new:category_change', fixmystreet.dvla.setup);
+
+})();

web/cobrands/fixmystreet/fixmystreet.js

@@ -445,6 +445,11 @@ fixmystreet.pageController = {
         $div.attr('data-page-name', name);
         $div.append("<button class='btn btn--block btn--final js-reporting-page--next'>" + translation_strings.ok + "</button>");
         $('.js-reporting-page--active').after($div);
+    },
+    addPageAfter: function(after, name, $div) {
+        $div.addClass('js-reporting-page');
+        $div.attr('data-page-name', name);
+        $('.js-reporting-page[data-page-name=' + after + ']').after($div);
     }
 };