GCTC-NTGC / TalentCloud

/* eslint-disable camelcase, @typescript-eslint/camelcase */

import React from "react";

import { useIntl, defineMessages } from "react-intl";

import { Formik, Form, FastField } from "formik";

import Swal, { SweetAlertResult } from "sweetalert2";

import classNames from "classnames";

import { Application, ApplicationReview } from "../../models/types";

import { Portal } from "../../models/app";

import { getLocale } from "../../helpers/localize";

import {

  getApplicantUrl,

  getApplicationUrl,

  imageUrl,

} from "../../helpers/routes";

import { ReviewStatusId } from "../../models/lookupConstants";

import { ReviewStatuses } from "../../models/localizedConstants";

import AlertWhenUnsaved from "../Form/AlertWhenUnsaved";

import SelectInput from "../Form/SelectInput";

const messages = defineMessages({

  priorityLogo: {

    id: "application.review.priorityStatus.priorityLogoTitle",

    defaultMessage: "Talent cloud priority logo",

    description: "Title for Priority Logo Img",

  },

  priorityStatus: {

    id: "application.review.priorityStatus.priority",

    defaultMessage: "Priority",

    description: "Priority",

  },

  veteranLogo: {

    id: "application.review.veteranStatus.veteranLogoAlt",

    defaultMessage: "Talent cloud veteran logo",

    description: "Alt Text for Veteran Logo Img",

  },

  veteranStatus: {

    id: "application.review.veteranStatus.veteran",

    defaultMessage: "Veteran",

    description: "Veteran",

  },

  emailCandidate: {

    id: "application.review.emailCandidateLinkTitle",

    defaultMessage: "Email this candidate.",

    description: "Title, hover text, for email link.",

  },

  viewApplicationText: {

    id: "application.review.viewApplication",

    defaultMessage: "View Application",

    description: "Button text View Application",

  },

  viewApplicationTitle: {

    id: "application.review.viewApplicationLinkTitle",

    defaultMessage: "View this applicant's application.",

    description: "Title, hover text, for View Application Link",

  },

  viewProfileText: {

    id: "application.review.viewProfile",

    defaultMessage: "View Profile",

    description: "Button text View Profile",

  },

  viewProfileTitle: {

    id: "application.review.viewProfileLinkTitle",

    defaultMessage: "View this applicant's profile.",

    description: "Title, hover text, for View Profile Link",

  },

  decision: {

    id: "application.review.decision",

    defaultMessage: "Decision",

    description: "Decision dropdown label",

  },

  notReviewed: {

    id: "application.review.reviewStatus.notReviewed",

    defaultMessage: "Not Reviewed",

    description: "Decision dropdown label",

  },

  saving: {

    id: "application.review.button.saving",

    defaultMessage: "Saving...",

    description: "Dynamic Save button label",

  },

  save: {

    id: "application.review.button.save",

    defaultMessage: "Save",

    description: "Dynamic Save button label",

  },

  saved: {

    id: "application.review.button.saved",

    defaultMessage: "Saved",

    description: "Dynamic Save button label",

  },

  addNote: {

    id: "application.review.addNote",

    defaultMessage: "+ Add a Note",

    description: "Dynamic Note button label",

  },

  editNote: {

    id: "application.review.editNote",

    defaultMessage: "Edit Note",

    description: "Dynamic Note button label",

  },

  screenedOut: {

    id: "application.review.reviewStatus.screenedOut",

    defaultMessage: "Screened Out",

    description: "Dynamic Note button label",

  },

  stillThinking: {

    id: "application.review.reviewStatus.stillThinking",

    defaultMessage: "Still Thinking",

    description: "Dynamic Note button label",

  },

  stillIn: {

    id: "application.review.reviewStatus.stillIn",

    defaultMessage: "Still In",

    description: "Dynamic Note button label",

  },

  cancelButton: {

    id: "application.review.button.cancel",

    defaultMessage: "Cancel",

    description: "Cancel button label",

  },

  confirmButton: {

    id: "application.review.button.confirm",

    defaultMessage: "Confirm",

    description: "Confirm button for modal dialogue boxes",

  },

  screenOutConfirm: {

    id: "application.review.screenOutConfirm",

    defaultMessage: "Screen out the candidate?",

    description: "Are you sure you want to screen out the candidate warning",

  },

  screenInConfirm: {

    id: "application.review.screenInConfirm",

    defaultMessage: "Screen the candidate back in?",

    description: "Are you sure you want to screen in the candidate warning",

  },

  viewProfile: {

    id: "application.review.viewProfile",

    defaultMessage: "View Profile",

    description: "Button text View Profile",

  },

});

interface FormValues {

  reviewStatus: ReviewStatusId | null;

  notes: string;

}

interface ApplicationRowProps {

  application: Application;

  handleUpdateReview: (review: ApplicationReview) => Promise<void>;

  portal: Portal;

}

const ApplicationRow: React.FC<ApplicationRowProps> = ({

  application,

  handleUpdateReview,

  portal,

}) => {

  const intl = useIntl();

  const locale = getLocale(intl.locale);

  const applicantUrl = getApplicantUrl(

    locale,

    portal,

    application.applicant_id,

    application.job_poster_id,

  );

  const applicationUrl = getApplicationUrl(

    locale,

    portal,

    application.id,

    application.job_poster_id,

  );

  const reviewOptions = [

    {

      value: ReviewStatuses.screened_out.id,

      label: intl.formatMessage(ReviewStatuses.screened_out.name),

    },

    {

      value: ReviewStatuses.still_thinking.id,

      label: intl.formatMessage(ReviewStatuses.still_thinking.name),

    },

    {

      value: ReviewStatuses.still_in.id,

      label: intl.formatMessage(ReviewStatuses.still_in.name),

    },

  ];

  const statusIconClass = classNames("fas", {

    "fa-ban":

      application.application_review?.review_status_id ===

      ReviewStatusId.ScreenedOut,

    "fa-question-circle":

      application.application_review?.review_status_id ===

      ReviewStatusId.StillThinking,

    "fa-check-circle":

      application.application_review?.review_status_id ===

      ReviewStatusId.StillIn,

    "fa-exclamation-circle":

      application.application_review === undefined ||

      application.application_review?.review_status_id === null,

  });

  const noteButtonText =

    application.application_review && application.application_review.notes

      ? intl.formatMessage(messages.editNote)

      : intl.formatMessage(messages.addNote);

  const emptyReview: ApplicationReview = {

    id: 0,

    job_application_id: application.id,

    review_status_id: null,

    notes: null,

    created_at: new Date(),

    updated_at: new Date(),

    review_status: undefined,

    department_id: null,

    department: undefined,

    director_email_sent: false,

    reference_email_sent: false,

  };

  const validReviewStatus = (id: number | undefined | null): number | null => {

    if (id !== undefined && id !== null && id in ReviewStatusId) {

      return id;

    }

    return null;

  };

  const applicationReviewStatus = validReviewStatus(

    application.application_review?.review_status_id,

  );

  const initialValues: FormValues = {

    reviewStatus: applicationReviewStatus,

    notes: application.application_review?.notes || "",

  };

  const updateApplicationReview = (

    oldReview: ApplicationReview,

    values: FormValues,

  ): ApplicationReview => {

    const applicationReview: ApplicationReview = {

      ...oldReview,

      review_status_id: values.reviewStatus

        ? Number(values.reviewStatus)

        : null,

      notes: values.notes || null,

    };

    return applicationReview;

  };

  const handleNotesButtonClick = (

    notes: string,

    updateField: (

      field: string,

      value: any,

      shouldValidate?: boolean | undefined,

    ) => void,

  ): void => {

    Swal.fire({

      title: intl.formatMessage(messages.editNote),

      icon: "info",

      input: "textarea",

      showCancelButton: true,

      confirmButtonColor: "#0A6CBC",

      cancelButtonColor: "#F94D4D",

      cancelButtonText: intl.formatMessage(messages.cancelButton),

      confirmButtonText: intl.formatMessage(messages.save),

      inputValue: notes,

    }).then((result: SweetAlertResult) => {

      if (result && result.value !== undefined) {

        const value = result.value ? result.value : "";

        updateField("notes", value);

      }

    });

  };

  return (

    <Formik

      initialValues={initialValues}

      enableReinitialize

      onSubmit={(values, { setSubmitting, resetForm }): void => {

        const review = updateApplicationReview(

          application.application_review || emptyReview,

          values,

        );

        handleUpdateReview(review)

          .then(() => {

            setSubmitting(false);

            resetForm();

          })

          .catch(() => {

            setSubmitting(false);

          });

      }}

    >

      {({ values, dirty, isSubmitting, setFieldValue }): React.ReactElement => {

        const buttonDisabled = !dirty || isSubmitting;

        return (

          <Form className="applicant-summary">

            <AlertWhenUnsaved />

            <div className="flex-grid middle gutter">

              <div className="box lg-1of11 applicant-status">

                <i className={statusIconClass} />

              </div>

              <div className="box lg-2of11 applicant-information">

                <span

                  className="name"

                  data-name={`${application.applicant.user.first_name} ${application.applicant.user.last_name}`}

                >

                  {application.applicant.user.first_name}{" "}

                  {application.applicant.user.last_name}

                </span>

                <a

                  href={`mailto: ${application.applicant.user.email}`}

                  title={intl.formatMessage(messages.emailCandidate)}

                  data-email={`${application.applicant.user.email}`}

                  className="email"

                >

                  {application.applicant.user.email}

                </a>

                {/* This span only shown for priority applicants */}

                {application.applicant.user.is_priority && (

                  <span className="priority-status">

                    <i

                      aria-hidden="true"

                      className="fab fa-product-hunt"

                      title={intl.formatMessage(messages.priorityLogo)}

                    />

                    {intl.formatMessage(messages.priorityStatus)}

                  </span>

                )}

                {/* This span only shown for veterans */}

                {(application.veteran_status.name === "current" ||

                  application.veteran_status.name === "past") && (

                  <span className="veteran-status">

                    <img

                      alt={intl.formatMessage(messages.veteranLogo)}

                      src={imageUrl("icon_veteran.svg")}

                    />{" "}

                    {intl.formatMessage(messages.veteranStatus)}

                  </span>

                )}

              </div>

              <div className="box lg-2of11 applicant-links">

                <a

                  title={intl.formatMessage(messages.viewApplicationTitle)}

                  href={applicationUrl}

                >

                  <i className="fas fa-file-alt" />

                  {intl.formatMessage(messages.viewApplicationText)}

                </a>

                <a

                  title={intl.formatMessage(messages.viewProfileTitle)}

                  href={applicantUrl}

                >

                  <i className="fas fa-user" />

                  {intl.formatMessage(messages.viewProfile)}

                </a>

              </div>

              <div className="box lg-2of11 applicant-decision">

                <FastField

                  id={`review-status-${application.id}`}

                  name="reviewStatus"

                  label={intl.formatMessage(messages.decision)}

                  component={SelectInput}

                  nullSelection={intl.formatMessage(messages.notReviewed)}

                  options={reviewOptions}

                />

              </div>

              <div className="box lg-2of11 applicant-notes">

                <button

                  className="button--outline"

                  type="button"

                  onClick={(): void =>

                    handleNotesButtonClick(values.notes, setFieldValue)

                  }

                >

                  {noteButtonText}

                </button>

              </div>

              <div className="box lg-2of11 applicant-save-button">

                <button

                  className={`button--blue light-bg${

                    buttonDisabled ? " disabled" : ""

                  }`}

                  type="submit"

                  disabled={buttonDisabled}

                >

                  <span>

                    {dirty

                      ? intl.formatMessage(messages.save)

                      : intl.formatMessage(messages.saved)}

                  </span>

                </button>

              </div>

            </div>

          </Form>

        );

      }}

    </Formik>

  );

};

export default ApplicationRow;