@financial-times/n-conversion-forms/dist/graduation-date.jsx

Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Compliance = void 0;
exports.GraduationDate = GraduationDate;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var getMonthNameByIndex = function getMonthNameByIndex(index) {
  return new Date(null, index, null).toLocaleDateString('en', {
    month: 'long'
  });
};
var Compliance = exports.Compliance = function Compliance() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "graduationDateCompliance",
    className: "ncf__field ncf__gd-compliance"
  }, /*#__PURE__*/_react["default"].createElement("p", null, "We use the information you provide, and may share it with your institution, for the purposes of administering your institution's licence for", ' ', /*#__PURE__*/_react["default"].createElement("a", {
    className: "ncf__link--external",
    href: "https://ft.com/",
    title: "Financial Times",
    target: "_blank",
    rel: "noopener noreferrer"
  }, "FT.com.", ' ')), /*#__PURE__*/_react["default"].createElement("p", null, "We may also use it to ensure our communications to you are more relevant. If you do not wish us to do so, you can amend your preferences at any time", ' ', /*#__PURE__*/_react["default"].createElement("a", {
    className: "ncf__link--external",
    href: "http://www.ft.com/myft/alerts/",
    title: "Financial Times",
    target: "_blank",
    rel: "noopener noreferrer"
  }, "here")));
};
function GraduationDate(_ref) {
  var value = _ref.value,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$isRequired = _ref.isRequired,
    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
    _ref$hasError = _ref.hasError,
    hasError = _ref$hasError === void 0 ? false : _ref$hasError;
  var currentYear = new Date().getUTCFullYear();
  var earliestSelectableYear = currentYear - 4;
  var defaultValues = value && value.trim().match(/^([0-9]{4})-(0[0-9]|1[012])-[0-9]{2}$/);
  var _ref2 = defaultValues || [],
    _ref3 = (0, _slicedToArray2["default"])(_ref2, 3),
    defaultYear = _ref3[1],
    defaultMonth = _ref3[2];
  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
    'o-forms-input--invalid': hasError
  }]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: "graduationDateField",
    className: "o-forms-field ncf__validation-error ncf__graduation-date",
    "data-validate": "required"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title",
    role: "group",
    "aria-labelledby": "graduationTitleMain"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__main",
    id: "graduationTitleMain"
  }, "Expected graduation date")), /*#__PURE__*/_react["default"].createElement("div", {
    className: inputWrapperClassNames
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ncf__graduation-date__select-wrapper"
  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "graduationDateMonth"
  }, "Month"), /*#__PURE__*/_react["default"].createElement("select", {
    id: "graduationDateMonth",
    name: "graduationDateMonth",
    required: isRequired,
    "aria-required": isRequired,
    disabled: isDisabled,
    defaultValue: defaultMonth
  }, Array.from({
    length: 12
  }, function (_, index) {
    return /*#__PURE__*/_react["default"].createElement("option", {
      key: index,
      value: (index + 1).toString(10).padStart(2, '0')
    }, getMonthNameByIndex(index + 1));
  }))), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "graduationDateYear"
  }, "Year"), /*#__PURE__*/_react["default"].createElement("select", {
    id: "graduationDateYear",
    name: "graduationDateYear",
    required: isRequired,
    "aria-required": isRequired,
    disabled: isDisabled,
    defaultValue: defaultYear
  }, Array.from({
    length: 9
  }, function (_, index) {
    var value = earliestSelectableYear + index;
    return /*#__PURE__*/_react["default"].createElement("option", {
      key: index,
      value: value
    }, value);
  })))), /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-input__error"
  }, "Please select a valid graduation date")), /*#__PURE__*/_react["default"].createElement(Compliance, null));
}
GraduationDate.propTypes = {
  value: _propTypes["default"].string,
  isDisabled: _propTypes["default"].bool,
  isRequired: _propTypes["default"].bool,
  hasError: _propTypes["default"].bool
};