@financial-times/n-conversion-forms/dist/delivery-postcode.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.DeliveryPostcode = DeliveryPostcode;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _supportedCountries = require("../helpers/supportedCountries");
var _supportedPostcodeExamples = require("../helpers/supportedPostcodeExamples");
var postcodeLabel = Object.keys(_supportedCountries.countriesSupported).reduce(function (previous, countryCode) {
  if (countryCode === 'USA') {
    previous[countryCode] = 'Zip Code';
  } else if (countryCode === 'GBR') {
    previous[countryCode] = 'Postcode';
  } else {
    previous[countryCode] = 'Postal Code';
  }
  return previous;
}, {});
var promptLabel = Object.keys(_supportedCountries.countriesSupported).reduce(function (previous, countryCode) {
  if (countryCode === 'USA') {
    previous[countryCode] = 'Please enter your 5 digit Zip Code';
  } else if (countryCode === 'CAN') {
    previous[countryCode] = 'Please enter your 6 digit postal code';
  } else if (countryCode !== 'GBR') {
    //GBR has no label
    previous[countryCode] = 'Please enter your postal code';
  }
  return previous;
}, {});
var placeholderLabel = Object.keys(_supportedPostcodeExamples.allSupportedPostcodeExamples).reduce(function (previous, countryCode) {
  previous[countryCode] = 'e.g. ' + _supportedPostcodeExamples.allSupportedPostcodeExamples[countryCode];
  return previous;
}, {});
function DeliveryPostcode(_ref) {
  var _ref$value = _ref.value,
    value = _ref$value === void 0 ? '' : _ref$value,
    _ref$country = _ref.country,
    country = _ref$country === void 0 ? '' : _ref$country,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$hasError = _ref.hasError,
    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
    _ref$isHidden = _ref.isHidden,
    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
    pattern = _ref.pattern,
    additionalFieldInformation = _ref.additionalFieldInformation,
    _ref$changePostcodeUr = _ref.changePostcodeUrl,
    changePostcodeUrl = _ref$changePostcodeUr === void 0 ? '' : _ref$changePostcodeUr;
  var postcodeReference = postcodeLabel[country.toUpperCase()] || 'Postcode';
  var promptReference = promptLabel[country.toUpperCase()];
  var placeholderReference = placeholderLabel[country.toUpperCase()] || "Enter your ".concat(postcodeReference);
  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
    'o-forms-input--invalid': hasError
  }]);
  var deliveryPostcodeFieldClassNames = (0, _classnames["default"])(['o-forms-field', {
    ncf__hidden: isHidden
  }]);
  var fieldErrorClassNames = (0, _classnames["default"])(['o-forms-input__error', {
    'additional-field-information__with-field-error': additionalFieldInformation
  }]);
  return /*#__PURE__*/_react["default"].createElement("label", {
    id: "deliveryPostcodeField",
    className: deliveryPostcodeFieldClassNames,
    "data-validate": "required",
    htmlFor: "deliveryPostcode"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__main"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    "data-reference": "postcode"
  }, postcodeReference)), /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__prompt"
  }, promptReference)), /*#__PURE__*/_react["default"].createElement("span", {
    className: inputWrapperClassNames
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    id: "deliveryPostcode",
    name: "deliveryPostcode",
    defaultValue: "".concat(value),
    placeholder: placeholderReference,
    autoComplete: "postal-code",
    "data-trackable": "delivery-postcode",
    "aria-required": "true",
    required: true,
    pattern: pattern,
    disabled: isDisabled
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: fieldErrorClassNames
  }, "Please enter a valid", ' ', /*#__PURE__*/_react["default"].createElement("span", {
    "data-reference": "postcode"
  }, postcodeReference), "."), additionalFieldInformation ? /*#__PURE__*/_react["default"].createElement("p", {
    className: "additional-field-information"
  }, additionalFieldInformation) : null, changePostcodeUrl ? /*#__PURE__*/_react["default"].createElement("a", {
    href: changePostcodeUrl,
    style: {
      fontSize: '12px'
    },
    className: "change-postcode-url",
    "data-trackable": "change-progress"
  }, "Change ".concat(postcodeReference)) : null));
}
DeliveryPostcode.propTypes = {
  country: _propTypes["default"].string,
  value: _propTypes["default"].string,
  pattern: _propTypes["default"].string,
  isDisabled: _propTypes["default"].bool,
  hasError: _propTypes["default"].bool,
  isHidden: _propTypes["default"].bool,
  additionalFieldInformation: _propTypes["default"].node,
  changePostcodeUrl: _propTypes["default"].string
};