@financial-times/n-conversion-forms/dist/delivery-address.jsx

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DeliveryAddress = DeliveryAddress;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _deliveryAddressMap = _interopRequireDefault(require("./delivery-address-map"));
var _constants = require("../helpers/constants");
var _supportedCountries = require("../helpers/supportedCountries");
function DeliveryAddress(_ref) {
  var _ref$fieldId = _ref.fieldId,
    fieldId = _ref$fieldId === void 0 ? 'deliveryAddressFields' : _ref$fieldId,
    _ref$hasError = _ref.hasError,
    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
    _ref$line = _ref.line1,
    line1 = _ref$line === void 0 ? '' : _ref$line,
    _ref$line2 = _ref.line2,
    line2 = _ref$line2 === void 0 ? '' : _ref$line2,
    _ref$line3 = _ref.line3,
    line3 = _ref$line3 === void 0 ? '' : _ref$line3,
    _ref$isDisabled = _ref.isDisabled,
    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
    _ref$isHidden = _ref.isHidden,
    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
    _ref$country = _ref.country,
    country = _ref$country === void 0 ? 'GBR' : _ref$country,
    _ref$addressType = _ref.addressType,
    addressType = _ref$addressType === void 0 ? 'home' : _ref$addressType;
  var divClassNames = (0, _classnames["default"])([{
    ncf__hidden: isHidden
  }]);
  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
    'o-forms-input--invalid': hasError
  }]);
  var shippingZone = (0, _supportedCountries.identifyShippingZone)(country);
  var addressLine1 = /*#__PURE__*/_react["default"].createElement("label", {
    className: "o-forms-field ncf__validation-error",
    htmlFor: "deliveryAddressLine1"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__main"
  }, _deliveryAddressMap["default"][addressType].addressLine1Title[shippingZone] || 'Address line 1')), /*#__PURE__*/_react["default"].createElement("span", {
    className: inputWrapperClassNames
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    id: "deliveryAddressLine1",
    name: "deliveryAddressLine1",
    "data-trackable": "field-deliveryAddressLine1",
    autoComplete: _constants.addressLine1AutoComplete,
    placeholder: _deliveryAddressMap["default"][addressType].addressLine1Placeholder[shippingZone] || '',
    maxLength: 50,
    "aria-required": "true",
    required: true,
    disabled: isDisabled,
    defaultValue: line1
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-input__error"
  }, "Please enter a valid address")));
  var addressLine2 = /*#__PURE__*/_react["default"].createElement("label", {
    className: "o-forms-field o-forms-field--optional",
    htmlFor: "deliveryAddressLine2"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__main"
  }, "Address line 2")), /*#__PURE__*/_react["default"].createElement("span", {
    className: inputWrapperClassNames
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    id: "deliveryAddressLine2",
    name: "deliveryAddressLine2",
    "data-trackable": "field-deliveryAddressLine2",
    autoComplete: _deliveryAddressMap["default"][addressType].addressLine2AutoComplete[shippingZone] || _constants.addressLine2AutoComplete,
    placeholder: _deliveryAddressMap["default"][addressType].addressLine2Placeholder[shippingZone] || '',
    maxLength: 50,
    disabled: isDisabled,
    defaultValue: line2
  })));
  var addressLine3 = /*#__PURE__*/_react["default"].createElement("label", {
    className: "o-forms-field o-forms-field--optional",
    htmlFor: "deliveryAddressLine3"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__main"
  }, _deliveryAddressMap["default"][addressType].addressLine3Title[shippingZone] || 'Address line 3'), /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-forms-title__prompt"
  }, _deliveryAddressMap["default"][addressType].addressLine3Prompt[shippingZone] || '')), /*#__PURE__*/_react["default"].createElement("span", {
    className: inputWrapperClassNames
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "text",
    id: "deliveryAddressLine3",
    name: "deliveryAddressLine3",
    "data-trackable": "field-deliveryAddressLine3",
    autoComplete: _deliveryAddressMap["default"][addressType].addressLine3AutoComplete[shippingZone] || _constants.addressLine3AutoComplete,
    placeholder: _deliveryAddressMap["default"][addressType].addressLine3Placeholder[shippingZone] || 'e.g. Apt. 1',
    maxLength: _deliveryAddressMap["default"][addressType].addressLine3MaxLength[country] || 50,
    disabled: isDisabled,
    defaultValue: line3
  })));
  var addressLines = _deliveryAddressMap["default"][addressType].template(addressLine1, addressLine2, addressLine3, shippingZone);
  return /*#__PURE__*/_react["default"].createElement("div", {
    id: fieldId,
    "data-validate": "required",
    className: divClassNames
  }, addressLines);
}
DeliveryAddress.propTypes = {
  fieldId: _propTypes["default"].string,
  hasError: _propTypes["default"].bool,
  line1: _propTypes["default"].string,
  line2: _propTypes["default"].string,
  line3: _propTypes["default"].string,
  isDisabled: _propTypes["default"].bool,
  isHidden: _propTypes["default"].bool,
  country: _propTypes["default"].string,
  addressType: _propTypes["default"].oneOf(['home', 'company', 'pobox'])
};