From fdd2c70ba73aa44197aa68fe9cc99356a9b234b1 Mon Sep 17 00:00:00 2001
From: halcyonjac <halcyon@judicialappointments.digital>
Date: Wed, 25 Jan 2023 11:01:45 +0000
Subject: [PATCH] add handover checks

---
 src/router.js                                 |  69 +++
 src/views/Applications.vue                    |  18 +
 src/views/Apply/HandoverChecks/Consent.vue    |  96 ++++
 .../Apply/HandoverChecks/FormSubmitted.vue    |  50 ++
 .../Apply/HandoverChecks/HandoverChecks.vue   |  67 +++
 src/views/Apply/HandoverChecks/Intro.vue      |  62 +++
 .../HandoverChecks/PersonalInformation.vue    | 281 +++++++++++
 .../HandoverChecks/ProfessionalDetails.vue    | 152 ++++++
 src/views/Apply/HandoverChecks/Review.vue     | 465 ++++++++++++++++++
 9 files changed, 1260 insertions(+)
 create mode 100644 src/views/Apply/HandoverChecks/Consent.vue
 create mode 100644 src/views/Apply/HandoverChecks/FormSubmitted.vue
 create mode 100644 src/views/Apply/HandoverChecks/HandoverChecks.vue
 create mode 100644 src/views/Apply/HandoverChecks/Intro.vue
 create mode 100644 src/views/Apply/HandoverChecks/PersonalInformation.vue
 create mode 100644 src/views/Apply/HandoverChecks/ProfessionalDetails.vue
 create mode 100644 src/views/Apply/HandoverChecks/Review.vue

diff --git a/src/router.js b/src/router.js
index 6864d5acb..c719debd6 100644
--- a/src/router.js
+++ b/src/router.js
@@ -82,6 +82,15 @@ import CharacterChecksReview from '@/views/Apply/CharacterChecks/Review';
 import CharacterChecksConsent from '@/views/Apply/CharacterChecks/Consent';
 import CharacterChecksFormSubmitted from '@/views/Apply/CharacterChecks/FormSubmitted';
 
+// Handover Checks
+import HandoverChecks from '@/views/Apply/HandoverChecks/HandoverChecks';
+import HandoverChecksIntro from '@/views/Apply/HandoverChecks/Intro';
+import HandoverChecksPersonalInformation from '@/views/Apply/HandoverChecks/PersonalInformation';
+import HandoverChecksProfessionalDetails from '@/views/Apply/HandoverChecks/ProfessionalDetails';
+import HandoverChecksReview from '@/views/Apply/HandoverChecks/Review';
+import HandoverChecksConsent from '@/views/Apply/HandoverChecks/Consent';
+import HandoverChecksFormSubmitted from '@/views/Apply/HandoverChecks/FormSubmitted';
+
 // Online Tests
 import QualifyingTests from '@/views/QualifyingTests/QualifyingTests';
 import QualifyingTest from '@/views/QualifyingTests/QualifyingTest';
@@ -695,6 +704,66 @@ const router = new Router({
             },
           ],
         },
+        {
+          path: 'handover-checks',
+          component: HandoverChecks,
+          children: [
+            {
+              path: '',
+              component: HandoverChecksIntro,
+              name: 'handover-checks-intro',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks',
+              },
+            },
+            {
+              path: 'personal-information',
+              component: HandoverChecksPersonalInformation,
+              name: 'handover-checks-personal-information',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks | Personal information',
+              },
+            },
+            {
+              path: 'professional-details',
+              component: HandoverChecksProfessionalDetails,
+              name: 'handover-checks-professional-details',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks | Professional details',
+              },
+            },
+            {
+              path: 'review',
+              component: HandoverChecksReview,
+              name: 'handover-checks-review',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks | Review',
+              },
+            },
+            {
+              path: 'consent',
+              component: HandoverChecksConsent,
+              name: 'handover-checks-consent',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks | Consent',
+              },
+            },
+            {
+              path: 'form-submitted',
+              component: HandoverChecksFormSubmitted,
+              name: 'handover-checks-form-submitted',
+              meta: {
+                requiresAuth: true,
+                title: 'Consent to handover checks | Form Submitted',
+              },
+            },
+          ],
+        },
       ],
     },
     {
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 5145b229f..658bda936 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -119,6 +119,24 @@
                   >
                     View sent character checks consent form
                   </RouterLink>
+                  <RouterLink
+                    v-if="application.handoverChecks && application.handoverChecks.status === 'requested'"
+                    class="govuk-button govuk-button--secondary moj-button-menu__item float-right"
+                    :to="{ name: 'handover-checks-intro', params: { id: application.exerciseId } }"
+                    role="button"
+                    data-module="govuk-button"
+                  >
+                    Complete handover checks consent form
+                  </RouterLink>
+                  <RouterLink
+                    v-if="application.handoverChecks && application.handoverChecks.status === 'completed'"
+                    class="govuk-button govuk-button--secondary moj-button-menu__item float-right"
+                    :to="{ name: 'handover-checks-review', params: { id: application.exerciseId } }"
+                    role="button"
+                    data-module="govuk-button"
+                  >
+                    View sent handover checks consent form
+                  </RouterLink>
                 </div>
               </div>
             </div>
diff --git a/src/views/Apply/HandoverChecks/Consent.vue b/src/views/Apply/HandoverChecks/Consent.vue
new file mode 100644
index 000000000..42ed8d0e2
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/Consent.vue
@@ -0,0 +1,96 @@
+<template>
+  <form
+    ref="formRef"
+    @submit.prevent="save"
+  >
+    <div class="govuk-grid-column-two-thirds">
+      <BackLink />
+
+      <h1 class="govuk-heading-xl">
+        Consent
+      </h1>
+
+      <ErrorSummary :errors="errors" />
+
+      <h2 class="govuk-heading-l">
+        Professional bodies
+      </h2>
+      <p class="govuk-body">
+        I consent to such persons and/or professional bodies as may be required for the purposes of my application disclosing to the JAC, in strict confidence, information relating to my conduct and professional reputation, including:
+      </p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>the disclosure of the details of any complaints upheld (relating to professional misconduct or inadequate professional service)</li>
+        <li>the disclosure of the details of any outstanding complaints that have not yet been determined or resolved relating to professional misconduct or inadequate professional service</li>
+      </ul>
+
+      <h2 class="govuk-heading-l">
+        Criminal checks
+      </h2>
+      <p class="govuk-body">
+        I consent that the Association of Chief Police Officers Criminal Records Office (ACRO) may, in strict confidence, disclose to the JAC any offence of which I have been convicted in relation to a criminal matter or infringement of the law and any caution administered to me at any time, whether spent or unspent, including any impending prosecutions.
+      </p>
+
+      <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible govuk-!-margin-top-9">
+
+      <Checkbox
+        id="consent"
+        v-model="application.handoverChecks.consent"
+      >
+        Yes, I understand and consent to handover checks being undertaken
+      </Checkbox>
+
+      <button
+        class="govuk-button"
+        :disabled="!application.handoverChecks.consent"
+      >
+        Submit
+      </button>
+    </div>
+  </form>
+</template>
+<script>
+import firebase from '@firebase/app';
+import BackLink from '@/components/BackLink';
+import Form from '@/components/Form/Form';
+import Checkbox from '@/components/Form/Checkbox';
+import ErrorSummary from '@/components/Form/ErrorSummary';
+
+export default {
+  name: 'Consent',
+  components: {
+    BackLink,
+    ErrorSummary,
+    Checkbox,
+  },
+  extends: Form,
+  data() {
+    const defaults = {
+      consent: null,
+      status: null,
+    };
+    const application = this.$store.getters['application/data']();
+    application.handoverChecks = { ...defaults, ...application.handoverChecks };
+    return {
+      application,
+    };
+  },
+  computed: {
+    applicationRecord() {
+      return this.$store.state.application.record;
+    },
+  },
+  methods: {
+    async save() {
+      this.validate();
+      if (this.isValid()) {
+        if (this.application.handoverChecks.consent === true) {
+          this.application.handoverChecks.status = 'completed';
+          this.application.handoverChecks.completedAt = firebase.firestore.FieldValue.serverTimestamp();
+        }
+        await this.$store.dispatch('application/save', this.application);
+        this.$router.push({ name: 'handover-checks-form-submitted' });
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/Apply/HandoverChecks/FormSubmitted.vue b/src/views/Apply/HandoverChecks/FormSubmitted.vue
new file mode 100644
index 000000000..958e60e76
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/FormSubmitted.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="govuk-grid-column-two-thirds govuk-!-margin-top-8">
+    <div class="govuk-panel govuk-panel--confirmation">
+      <h1 class="govuk-panel__title">
+        Consent to handover checks submitted
+      </h1>
+    </div>
+    <h2 class="govuk-heading-m govuk-!-margin-top-6">
+      What happens next
+    </h2>
+    <p class="govuk-body">
+      This information will be used by the Judicial Appointments Commission to undertake handover checks.
+    </p>
+    <p class="govuk-body">
+      We may get in touch to ask for more information. In the meantime refer to the timeline, given in your exercise to understand the next steps ahead.
+    </p>
+    <p class="govuk-body">
+      If your circumstances change after submitting this form that might impact your ability to meet the good handover requirements please notify the
+      <a
+        :href="`mailto:${vacancy.exerciseMailbox}?subject=Re: ${vacancy.referenceNumber}`"
+        class="govuk-link"
+      >Selection Exercise Team</a>.
+    </p>
+    <p class="govuk-body">
+      Any personal data collected and processed is in accordance with the <a
+        href="https://judicialappointments.gov.uk/data-protection-freedom-of-information-and-making-requests-for-your-data/"
+        class="govuk-link"
+        target="_blank"
+      >JAC's privacy standards</a>.
+    </p>
+    <p class="govuk-body govuk-!-margin-top-6">
+      <RouterLink
+        :to="{ name: 'applications' }"
+      >
+        Return to your applications
+      </RouterLink>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormSubmitted',
+  computed: {
+    vacancy() {
+      return this.$store.state.vacancy.record;
+    },
+  },
+};
+</script>
diff --git a/src/views/Apply/HandoverChecks/HandoverChecks.vue b/src/views/Apply/HandoverChecks/HandoverChecks.vue
new file mode 100644
index 000000000..8be009afa
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/HandoverChecks.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="govuk-grid-row">
+    <LoadingMessage
+      v-if="!loaded"
+      :load-failed="loadFailed"
+    />
+    <RouterView v-else />
+  </div>
+</template>
+
+<script>
+import LoadingMessage from '@/components/LoadingMessage';
+
+export default {
+  name: 'HandoverChecks',
+  components: {
+    LoadingMessage,
+  },
+  data() {
+    return {
+      loaded: false,
+      loadFailed: false,
+    };
+  },
+  computed: {
+    vacancyId() {
+      return this.$route.params.id;
+    },
+  },
+  async mounted() {
+    try {
+      const today = Date.now();
+      const vacancy = await this.$store.dispatch('vacancy/bind', this.vacancyId);
+
+      if (vacancy === null) {
+        this.redirectToErrorPage();
+      } else if (this.$store.getters['vacancy/getOpenDate'] > today) {
+        this.redirectToVacancyDetails();
+      } else {
+        await this.$store.dispatch('candidate/bind');
+        await this.$store.dispatch('application/bind');
+        if (!this.$store.state.application.record) {
+          this.redirectToVacancyDetails();
+        }
+        await this.$store.dispatch('applications/bind');
+        this.loaded = true;
+      }
+    } catch (e) {
+      this.loadFailed = true;
+      throw e;
+    }
+  },
+  methods: {
+    redirectToErrorPage() {
+      this.$router.replace({ name: 'exercise-not-found' });
+    },
+    redirectToVacancyDetails() {
+      this.$router.replace({
+        name: 'vacancy-details',
+        params: {
+          id: this.vacancyId,
+        },
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/Apply/HandoverChecks/Intro.vue b/src/views/Apply/HandoverChecks/Intro.vue
new file mode 100644
index 000000000..44a5debf2
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/Intro.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="govuk-grid-column-two-thirds">
+    <BackLink />
+
+    <h1 class="govuk-heading-xl">
+      Consent to handover checks
+    </h1>
+
+    <p class="govuk-body">
+      You must grant consent for the Judicial Appointments Commission (JAC) to undertake handover checks before you can be considered for an appointment.
+    </p>
+    <p class="govuk-body">
+      These checks may be undertaken with HMRC, ACRO Criminal Records Office and the relevant professional bodies.
+    </p>
+    <p class="govuk-body">
+      Please check your details are correct and complete the remaining sections of this form.
+    </p>
+    <p class="govuk-body">
+      Any personal data collected and processed is in accordance with the <a
+        href="https://judicialappointments.gov.uk/data-protection-freedom-of-information-and-making-requests-for-your-data/"
+        class="govuk-link"
+        target="_blank"
+      >JAC's privacy standards</a>.
+    </p>
+    <p class="govuk-body">
+      Before you begin, have the following ready to fill this form in quickly and accurately.
+    </p>
+    <ul class="govuk-list govuk-list--bullet">
+      <li>National Insurance number</li>
+      <li>Professional body membership number(s) (if applicable)</li>
+      <li>VAT registration number(s) (if applicable) - all partnership, company and sole trader VAT registered number(s) that have been personally allocated to you, whether they relate to the practice of law or not.</li>
+    </ul>
+
+    <button
+      class="govuk-button govuk-!-margin-top-3"
+      @click="next"
+    >
+      Continue
+    </button>
+  </div>
+</template>
+
+<script>
+import BackLink from '@/components/BackLink';
+
+export default {
+  name: 'Intro',
+  components: {
+    BackLink,
+  },
+  computed: {
+    vacancy() {
+      return this.$store.state.vacancy.record;
+    },
+  },
+  methods: {
+    next () {
+      this.$router.push({ name: 'handover-checks-personal-information' });
+    },
+  },
+};
+</script>
diff --git a/src/views/Apply/HandoverChecks/PersonalInformation.vue b/src/views/Apply/HandoverChecks/PersonalInformation.vue
new file mode 100644
index 000000000..2842e591f
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/PersonalInformation.vue
@@ -0,0 +1,281 @@
+<template>
+  <form
+    ref="formRef"
+    @submit.prevent="save"
+  >
+    <div class="govuk-grid-column-two-thirds">
+      <BackLink />
+
+      <h1 class="govuk-heading-xl">
+        Personal information
+      </h1>
+
+      <ErrorSummary :errors="errors" />
+
+      <TextField
+        id="title"
+        v-model="personalDetails.title"
+        label="Title"
+        required
+      />
+
+      <TextField
+        id="firstName"
+        v-model="personalDetails.firstName"
+        label="First name"
+        hint="Enter your first name as it's written on an official document like your driving licence."
+        required
+      />
+
+      <TextField
+        id="middleNames"
+        v-model="personalDetails.middleNames"
+        label="Middle name(s)"
+      />
+
+      <TextField
+        id="lastName"
+        v-model="personalDetails.lastName"
+        label="Last name"
+        hint="Enter your last name as it's written on an official document like your driving licence."
+        required
+      />
+
+      <TextField
+        id="suffix"
+        v-model="personalDetails.suffix"
+        label="Suffix"
+      />
+
+      <TextField
+        id="previousNames"
+        v-model="personalDetails.previousNames"
+        label="Previously known name(s)"
+      />
+
+      <TextField
+        id="professionalName"
+        v-model="personalDetails.professionalName"
+        label="ProfessionalName"
+      />
+
+      <RadioGroup
+        id="gender"
+        v-model="equalityAndDiversitySurvey.gender"
+        required
+        label="What is your sex?"
+      >
+        <RadioItem
+          value="female"
+          label="Female"
+        />
+        <RadioItem
+          value="male"
+          label="Male"
+        />
+        <RadioItem
+          value="gender-neutral"
+          label="Gender neutral"
+        />
+        <RadioItem
+          value="other-gender"
+          label="Other sex"
+        >
+          <TextField
+            id="other-gender-details"
+            v-model="equalityAndDiversitySurvey.otherGenderDetails"
+            label="Other sex"
+            class="govuk-!-width-two-thirds"
+          />
+        </RadioItem>
+        <RadioItem
+          value="prefer-not-to-say"
+          label="Prefer not to say"
+        />
+      </RadioGroup>
+
+      <DateInput
+        id="dateOfBirth"
+        v-model="personalDetails.dateOfBirth"
+        required
+        label="Date of birth"
+        hint="For example, 27 3 1964"
+      />
+
+      <TextField
+        id="placeOfBirth"
+        v-model="personalDetails.placeOfBirth"
+        required
+        label="Place of Birth"
+        hint="Town or city and country."
+      />
+
+      <RadioGroup
+        id="citizenship"
+        v-model="personalDetails.citizenship"
+        required
+        label="Citizenship"
+        hint="Select one. If you have dual citizenship, please select the option most appropriate to you."
+      >
+        <RadioItem
+          value="uk"
+          label="UK"
+        />
+        <RadioItem
+          value="republic-of-ireland"
+          label="Republic of Ireland"
+        />
+        <RadioItem
+          value="another-commonwealth-country"
+          label="Another Commonwealth country"
+        />
+        <RadioItem
+          value="other"
+          label="Other"
+        />
+      </RadioGroup>
+
+      <Address
+        id="currentAddress"
+        v-model="personalDetails.address.current"
+        required
+        label="Address"
+      />
+
+      <RadioGroup
+        id="currentAddressMoreThan5Years"
+        v-model="personalDetails.address.currentMoreThan5Years"
+        required
+        label="Have you lived at this address for more than 5 years?"
+        hint="If you've lived anywhere else in the UK within the past 5 years you need to answer no and enter details."
+      >
+        <RadioItem
+          label="Yes"
+          :value="true"
+        />
+        <RadioItem
+          label="No"
+          :value="false"
+        >
+          <RepeatableFields
+            v-model="personalDetails.address.previous"
+            required
+            :component="repeatableFields.Addresses"
+          />
+        </RadioItem>
+      </RadioGroup>
+
+      <TextField
+        id="national-insurance-number"
+        v-model="personalDetails.nationalInsuranceNumber"
+        label="National Insurance number"
+        hint="It’s on your National Insurance card, payslip or P60. For example, ‘QQ 12 34 56 C’."
+        class="govuk-!-width-one-half"
+        type="nino"
+        required
+      />
+
+      <button class="govuk-button info-btn--personal-information--save-and-continue">
+        Save and continue
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import BackLink from '@/components/BackLink';
+import Form from '@/components/Form/Form';
+import ErrorSummary from '@/components/Form/ErrorSummary';
+import RadioItem from '@/components/Form/RadioItem';
+import RadioGroup from '@/components/Form/RadioGroup';
+import TextField from '@/components/Form/TextField';
+import DateInput from '@/components/Form/DateInput';
+import RepeatableFields from '@/components/RepeatableFields';
+import Addresses from '@/components/RepeatableFields/Addresses';
+import Address from '@/components/Form/Address';
+import splitFullName from '@jac-uk/jac-kit/helpers/splitFullName';
+
+export default {
+  name: 'PersonalInformation',
+  components: {
+    BackLink,
+    ErrorSummary,
+    RadioItem,
+    RadioGroup,
+    TextField,
+    DateInput,
+    Address,
+    RepeatableFields,
+  },
+  extends: Form,
+  data() {
+    const defaults = {
+      title: null,
+      firstName: null,
+      lastName: null,
+      suffix: null,
+      gender: null,
+      otherGenderDetails: null,
+      changedGender: null,
+      placeOfBirth: null,
+      nationalInsuranceNumber: null,
+      address: {
+        current: {},
+        previous: [],
+        currentMoreThan5Years: null,
+      },
+    };
+    const data1 = this.$store.getters['candidate/personalDetails']();
+    const data2 = this.$store.getters['candidate/equalityAndDiversitySurvey']();
+    const personalDetails = { ...defaults, ...data1 };
+    const equalityAndDiversitySurvey = { ...defaults, ...data2 };
+    const application = this.$store.getters['application/data']();
+    return {
+      personalDetails,
+      equalityAndDiversitySurvey,
+      application,
+      repeatableFields: {
+        Addresses,
+      },
+    };
+  },
+  created() {
+    const { firstName, lastName, fullName } = this.personalDetails;
+
+    if (!firstName && !lastName) {
+      if (fullName) {
+        const result = splitFullName(fullName);
+        this.personalDetails.firstName = result[0];
+        this.personalDetails.lastName = result[1];
+      } else {
+        this.personalDetails.firstName = '';
+        this.personalDetails.lastName = '';
+      }
+    } else {
+      this.personalDetails.firstName = firstName;
+      this.personalDetails.lastName = lastName;
+    }
+  },
+  methods: {
+    async save() {
+      this.makeFullName();
+      this.validate();
+      if (this.isValid()) {
+        if (this.personalDetails.address.currentMoreThan5Years === true) {
+          this.personalDetails.address.previous = null;
+        }
+        this.application.personalDetails = this.personalDetails;
+        this.application.equalityAndDiversitySurvey = this.equalityAndDiversitySurvey;
+        await this.$store.dispatch('application/save', this.application);
+        await this.$store.dispatch('candidate/savePersonalDetails', this.personalDetails);
+        await this.$store.dispatch('candidate/saveEqualityAndDiversitySurvey', this.equalityAndDiversitySurvey);
+        this.$router.push({ name: 'handover-checks-professional-details' });
+      }
+    },
+    makeFullName() {
+      this.personalDetails.fullName = `${this.personalDetails.firstName} ${this.personalDetails.lastName}`;
+    },
+  },
+};
+
+</script>
diff --git a/src/views/Apply/HandoverChecks/ProfessionalDetails.vue b/src/views/Apply/HandoverChecks/ProfessionalDetails.vue
new file mode 100644
index 000000000..e9d7f1050
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/ProfessionalDetails.vue
@@ -0,0 +1,152 @@
+<template>
+  <form
+    ref="formRef"
+    @submit.prevent="save"
+  >
+    <div class="govuk-grid-column-two-thirds">
+      <BackLink />
+
+      <h1 class="govuk-heading-xl">
+        Professional details
+      </h1>
+
+      <ErrorSummary :errors="errors" />
+
+      <div
+        v-for="(qualification, index) in application.qualifications"
+        :key="index"
+      >
+        <div class="govuk-inset-text govuk-!-margin-top-0">
+          You stated on your application that you have been a {{ qualification.type | lookup }}{{ getDate(qualification) }}
+        </div>
+        <TextField
+          id="barMembershipNum"
+          v-model="qualification.membershipNumber"
+          type="number"
+          :label="membershipNumberLabel(qualification.type)"
+          required
+        />
+      </div>
+
+      <RadioGroup
+        id="magistrate"
+        v-model="application.magistrate"
+        label="Have you been a magistrate?"
+        required
+        hint=""
+      >
+        <RadioItem
+          :value="true"
+          label="Yes"
+        >
+          <div class="govuk-form-group">
+            <DateInput
+              id="magistrateStartDate"
+              v-model="application.magistrateStartDate"
+              :required="application.magistrate"
+              label="From date"
+              hint="For example, 12 11 2007"
+            />
+            <DateInput
+              id="magistrateEndDate"
+              v-model="application.magistrateEndDate"
+              label="Until date"
+              hint="For example, 11 6 2020. Leave blank if this is your present role."
+            />
+            <TextField
+              id="magistrateLocation"
+              v-model="application.magistrateLocation"
+              :required="application.magistrate"
+              label="Location"
+            />
+          </div>
+        </RadioItem>
+        <RadioItem
+          :value="false"
+          label="No"
+        />
+      </RadioGroup>
+
+      <button
+        class="govuk-button info-btn--professional-bodies--save-and-continue"
+      >
+        Save and continue
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import BackLink from '@/components/BackLink';
+import Form from '@/components/Form/Form';
+import ErrorSummary from '@/components/Form/ErrorSummary';
+import TextField from '@/components/Form/TextField';
+import RadioGroup from '@/components/Form/RadioGroup';
+import RadioItem from '@/components/Form/RadioItem';
+import DateInput from '@/components/Form/DateInput';
+import { formatDate } from '@jac-uk/jac-kit/filters/filters';
+
+const membershipNumbers = {
+  barrister: 'Bar membership number',
+  solicitor: 'Solicitors Regulation Authority number',
+  default: 'Membership number',
+};
+export default {
+  name: 'ProfessionalDetails',
+  components: {
+    BackLink,
+    ErrorSummary,
+    TextField,
+    RadioGroup,
+    RadioItem,
+    DateInput,
+  },
+  extends: Form,
+  data() {
+    const defaults = {
+      magistrate: null,
+      magistrateStartDate: null,
+      magistrateEndDate: null,
+      magistrateLocation: null,
+    };
+    const data = this.$store.getters['application/data']();
+    const application = { ...defaults, ...data };
+    return {
+      membershipNumbers,
+      application,
+    };
+  },
+  computed: {
+    vacancy() {
+      return this.$store.state.vacancy.record;
+    },
+  },
+  methods: {
+    getDate(value) {
+      if (value.date) {
+        return ` since ${formatDate(value.date)}.`;
+      }
+      if (value.calledToBarDate) {
+        return ` since ${formatDate(value.calledToBarDate)}.`;
+      }
+      return '.';
+    },
+    membershipNumberLabel(type) {
+      return membershipNumbers[type] || membershipNumbers.default;
+    },
+    async save() {
+      this.validate();
+      if (this.isValid()) {
+        if (this.application.magistrate === false) {
+          this.application.magistrateStartDate = null;
+          this.application.magistrateEndDate = null;
+          this.application.magistrateLocation = null;
+        }
+        await this.$store.dispatch('application/save', this.application);
+        this.$router.push({ name: 'handover-checks-review' });
+      }
+    },
+  },
+};
+
+</script>
diff --git a/src/views/Apply/HandoverChecks/Review.vue b/src/views/Apply/HandoverChecks/Review.vue
new file mode 100644
index 000000000..7ad7f4919
--- /dev/null
+++ b/src/views/Apply/HandoverChecks/Review.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="govuk-grid-column-full">
+    <BackLink />
+
+    <h1 class="govuk-heading-xl">
+      <template
+        v-if="canEdit"
+      >
+        Check your answers
+      </template>
+      <template v-else>
+        Review sent answers
+      </template>
+    </h1>
+
+    <div class="govuk-!-margin-top-9">
+      <h2
+        class="govuk-heading-l"
+        style="display:inline-block;"
+      >
+        Personal details
+      </h2>
+      <RouterLink
+        v-if="canEdit"
+        class="govuk-link govuk-body-m change-link"
+        style="display:inline-block;"
+        :to="{name: 'handover-checks-personal-information'}"
+      >
+        Change
+      </RouterLink>
+    </div>
+
+    <dl class="govuk-summary-list">
+      <div
+        v-if="application.personalDetails.title"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Title
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.title }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.firstName && application.personalDetails.lastName"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          First name
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.firstName }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.middleNames"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Middle name(s)
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.middleNames }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.firstName && application.personalDetails.lastName"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Last name
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.lastName }}
+        </dd>
+      </div>
+
+      <div
+        v-if="!application.personalDetails.firstName && !application.personalDetails.lastName"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Full Name
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.fullName }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.suffix"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Suffix
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.suffix }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.previousNames"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Previously known name(s)
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.previousNames }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.professionalName"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Professional name
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.professionalName }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.equalityAndDiversitySurvey"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          What is your sex?
+        </dt>
+        <dd class="govuk-summary-list__value">
+          <p
+            v-if="application.equalityAndDiversitySurvey.gender == 'other-gender'"
+            class="govuk-body govuk-!-margin-bottom-0"
+          >
+            <span class="govuk-caption-m">{{ application.equalityAndDiversitySurvey.gender | lookup }}</span>
+            {{ application.equalityAndDiversitySurvey.otherGenderDetails }}
+          </p>
+          <span v-else>{{ application.equalityAndDiversitySurvey.gender | lookup }}</span>
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.dateOfBirth"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Date of birth
+        </dt>
+        <dd class="govuk-summary-list__value">
+          <p v-if="application.personalDetails.dateOfBirth">
+            {{ application.personalDetails.dateOfBirth | formatDate }}
+          </p>
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.placeOfBirth"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Place of birth
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.placeOfBirth }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.nationalInsuranceNumber"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          National Insurance Number
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.nationalInsuranceNumber }}
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.citizenship"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Citizenship
+        </dt>
+        <dd class="govuk-summary-list__value">
+          {{ application.personalDetails.citizenship | lookup }}
+        </dd>
+      </div>
+
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Address
+        </dt>
+        <dd
+          v-if="application.personalDetails.address && application.personalDetails.address.current"
+          class="govuk-summary-list__value"
+        >
+          {{ application.personalDetails.address.current.street }}
+          <br>
+          <span v-if="application.personalDetails.address.current.street2">
+            {{ application.personalDetails.address.current.street2 }}
+            <br>
+          </span>
+          {{ application.personalDetails.address.current.town }}
+          <br>
+          <span v-if="application.personalDetails.address.current.county">
+            {{ application.personalDetails.address.current.county }}
+            <br>
+          </span>
+          {{ application.personalDetails.address.current.postcode }}
+        </dd>
+        <dd
+          v-else
+          class="govuk-summary-list__value"
+        >
+          No information provided
+        </dd>
+      </div>
+
+      <div
+        v-if="application.personalDetails.address && application.personalDetails.address.currentMoreThan5Years"
+        class="govuk-summary-list__row"
+      >
+        <dt class="govuk-summary-list__key">
+          Have you lived at this address for more than 5 years?
+        </dt>
+        <dd
+          class="govuk-summary-list__value"
+        >
+          {{ application.personalDetails.address.currentMoreThan5Years | toYesNo }}
+        </dd>
+      </div>
+
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Previous addresses
+        </dt>
+        <dd
+          v-if="application.personalDetails.address && application.personalDetails.address.previous"
+          class="govuk-summary-list__value"
+        >
+          <ol
+            class="govuk-list"
+          >
+            <li
+              v-for="(address, index) in application.personalDetails.address.previous"
+              :key="index"
+            >
+              <p class="govuk-body">
+                {{ address.startDate | formatDate }} - {{ address.endDate | formatDate }}
+              </p>
+              <p class="govuk-body">
+                {{ address.street }}
+                <br>
+                <span v-if="address.street2">
+                  {{ address.street2 }}
+                  <br>
+                </span>
+                {{ address.town }}
+                <br>
+                <span v-if="address.county">
+                  {{ address.county }}
+                  <br>
+                </span>
+                {{ address.postcode }}
+              </p>
+            </li>
+          </ol>
+        </dd>
+        <dd
+          v-else
+          class="govuk-summary-list__value"
+        >
+          No information provided
+        </dd>
+      </div>
+    </dl>
+
+    <div class="govuk-!-margin-top-9">
+      <h2
+        class="govuk-heading-l"
+        style="display:inline-block;"
+      >
+        Professional details
+      </h2>
+      <RouterLink
+        v-if="canEdit"
+        class="govuk-link govuk-body-m change-link"
+        style="display:inline-block;"
+        :to="{name: 'handover-checks-professional-details'}"
+      >
+        Change
+      </RouterLink>
+    </div>
+
+    <div>
+      <dl
+        v-if="application.qualifications"
+        class="govuk-summary-list"
+      >
+        <div
+          v-for="(qualification, index) in application.qualifications"
+          :key="index"
+          class="govuk-summary-list__row"
+        >
+          <dt class="govuk-summary-list__key">
+            {{ qualification.type | lookup }}
+          </dt>
+          <dd
+            class="govuk-summary-list__value"
+          >
+            <p
+              v-if="qualification.date"
+              class="govuk-body"
+            >
+              {{ qualification.date | formatDate }}
+            </p>
+            <p
+              v-if="qualification.calledToBarDate"
+              class="govuk-body"
+            >
+              {{ qualification.calledToBarDate | formatDate }}
+            </p>
+            <p class="govuk-body">
+              {{ qualification.membershipNumber }}
+            </p>
+          </dd>
+        </div>
+      </dl>
+
+      <dl
+        v-if="application.magistrate === true || application.magistrate === false"
+        class="govuk-summary-list"
+      >
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
+            Have you been a magistrate?
+          </dt>
+          <dd
+            class="govuk-summary-list__value"
+          >
+            <p class="govuk-body">
+              {{ application.magistrate | toYesNo }}
+            </p>
+            <p
+              v-if="application.magistrateStartDate"
+              class="govuk-body"
+            >
+              {{ application.magistrateStartDate | formatDate }} - {{ getDate(application.magistrateEndDate) || 'present' }}
+            </p>
+            <p
+              v-if="application.magistrateLocation"
+              class="govuk-body"
+            >
+              {{ application.magistrateLocation }}
+            </p>
+          </dd>
+        </div>
+      </dl>
+      <div
+        v-else
+        class="govuk-body"
+      >
+        No information provided
+      </div>
+    </div>
+
+    <div
+      v-if="application.handoverChecks.consent"
+      class="govuk-!-margin-top-9"
+    >
+      <h2
+        class="govuk-heading-l"
+        style="display:inline-block;"
+      >
+        Consent
+      </h2>
+      <RouterLink
+        v-if="canEdit"
+        class="govuk-link govuk-body-m change-link"
+        style="display:inline-block;"
+        :to="{name: 'handover-checks-consent'}"
+      >
+        Change
+      </RouterLink>
+
+      <dl class="govuk-summary-list">
+        <div
+          class="govuk-summary-list__row"
+        >
+          <dt class="govuk-summary-list__key">
+            I understand and consent to handover checks being undertaken
+          </dt>
+          <dd
+            class="govuk-summary-list__value"
+          >
+            {{ application.handoverChecks.consent | toYesNo }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <button
+      v-if="canEdit"
+      class="govuk-button"
+      @click="next"
+    >
+      Continue
+    </button>
+  </div>
+</template>
+
+<script>
+import BackLink from '@/components/BackLink';
+import { formatDate } from '@jac-uk/jac-kit/filters/filters';
+
+export default {
+  name: 'Review',
+  components: {
+    BackLink,
+  },
+  computed: {
+    vacancy() {
+      return this.$store.state.vacancy.record;
+    },
+    application() {
+      return this.$store.state.application.record;
+    },
+    canEdit() {
+      return !(this.application.handoverChecks && this.application.handoverChecks.consent
+        && this.application.handoverChecks.status === 'completed');
+    },
+  },
+  methods: {
+    next () {
+      this.$router.push({ name: 'handover-checks-consent' });
+    },
+    getDate(value) {
+      return formatDate(value);
+    },
+  },
+};
+</script>
+
+<style type="text/css" rel="stylesheet/scss" lang="scss" scoped>
+.govuk-summary-list__value,
+.govuk-summary-list__value:last-child,
+.govuk-summary-list__key {
+@include govuk-media-query($from: tablet) {
+  width: auto;
+}
+}
+.change-link {
+  float: right;
+}
+</style>