@financial-times/n-conversion-forms 31.0.1 → 31.0.3

package/dist/delivery-address-map.jsx

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("../helpers/constants");
+var React = require('react');
+var addressTemplateGenerator = function addressTemplateGenerator(addressLine1, addressLine2, addressLine3) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, addressLine1, addressLine2, addressLine3);
+};
+var deliveryAddressMap = {
+  home: {
+    addressLine1Placeholder: {
+      GBR: 'e.g. 10 Elm Street',
+      USA: 'e.g. 10 Elm St.',
+      CAN: 'e.g. 36 Poirier Blvd.',
+      CEMEA_V1: 'Street and House Number',
+      CEMEA_V2: 'House Number and Street',
+      APAC: 'Street name',
+      ARE: 'PO Box 12345'
+    },
+    addressLine2Placeholder: {
+      CEMEA_V1: 'Apt No./Floor/Building',
+      CEMEA_V2: 'Apt No./Floor/Building',
+      APAC: 'House/Apartment/Building name'
+    },
+    addressLine3Placeholder: {
+      USA: 'e.g Apt 2C / FL 10 / STE 50',
+      CAN: 'e.g Apt 2C / FL 10 / STE 50',
+      CEMEA_V1: ' ',
+      CEMEA_V2: ' ',
+      APAC: 'District/County/Province/Ward'
+    },
+    addressLine1Title: {
+      ARE: 'PO Box'
+    },
+    // Overrides auto-complete
+    addressLine2AutoComplete: {
+      USA: _constants.addressLine3AutoComplete,
+      CAN: _constants.addressLine3AutoComplete
+    },
+    // Overrides auto-complete
+    addressLine3AutoComplete: {
+      USA: _constants.addressLine2AutoComplete,
+      CAN: _constants.addressLine2AutoComplete
+    },
+    addressLine3Title: {
+      GBR: 'Address line 3',
+      USA: 'APT/FL/STE',
+      CAN: 'APT/FL/STE',
+      CEMEA_V1: 'Address line 3',
+      CEMEA_V2: 'Address line 3',
+      APAC: 'Address line 3'
+    },
+    addressLine3Prompt: {
+      USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+      CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”'
+    },
+    addressLine3MaxLength: {
+      USA: 6,
+      CAN: 6
+    },
+    template: function template(addressLine1, addressLine2, addressLine3, region) {
+      var addressLines = {
+        GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CEMEA_V1: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        CEMEA_V2: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        APAC: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        ARE: /*#__PURE__*/React.createElement(React.Fragment, null, " ", addressLine1, " ")
+      };
+      return addressLines[region];
+    }
+  },
+  company: {
+    addressLine1Placeholder: {
+      GBR: 'e.g. 10 Elm Street',
+      USA: 'e.g. 10 Elm St.',
+      CAN: 'e.g. 36 Poirier Blvd.',
+      CEMEA_V1: 'Street and House Number',
+      CEMEA_V2: 'House Number and Street',
+      APAC: 'Street name',
+      ARE: 'PO Box 12345'
+    },
+    addressLine2Placeholder: {
+      CEMEA_V1: 'Apt No./Floor/Building/Department',
+      CEMEA_V2: 'Apt No./Floor/Building/Department',
+      APAC: 'House/Apartment/Building name'
+    },
+    addressLine3Placeholder: {
+      USA: 'e.g Apt 2C / FL 10 / STE 50',
+      CAN: 'e.g Apt 2C / FL 10 / STE 50',
+      CEMEA_V1: 'Department name/job title',
+      CEMEA_V2: 'Department name/job title',
+      APAC: 'District/County/Province/Ward'
+    },
+    addressLine3Title: {
+      GBR: 'Address line 3',
+      USA: 'APT/FL/STE',
+      CAN: 'APT/FL/STE',
+      CEMEA_V1: 'Address line 3',
+      CEMEA_V2: 'Address line 3'
+    },
+    addressLine3Prompt: {
+      USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+      CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”'
+    },
+    addressLine1Title: {
+      ARE: 'PO Box'
+    },
+    // Overrides auto-complete
+    addressLine2AutoComplete: {
+      USA: _constants.addressLine3AutoComplete,
+      CAN: _constants.addressLine3AutoComplete
+    },
+    // Overrides auto-complete
+    addressLine3AutoComplete: {
+      USA: _constants.addressLine2AutoComplete,
+      CAN: _constants.addressLine2AutoComplete
+    },
+    addressLine3MaxLength: {
+      USA: 6,
+      CAN: 6
+    },
+    template: function template(addressLine1, addressLine2, addressLine3, region) {
+      var addressLines = {
+        GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CEMEA_V1: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        CEMEA_V2: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        APAC: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        ARE: /*#__PURE__*/React.createElement(React.Fragment, null, " ", addressLine1, " ")
+      };
+      return addressLines[region];
+    }
+  },
+  pobox: {
+    addressLine1Placeholder: {
+      GBR: 'e.g. 10 Elm Street',
+      USA: 'e.g. 10 Elm St.',
+      CAN: 'e.g. 36 Poirier Blvd.',
+      CEMEA_V1: 'P.O. Box',
+      CEMEA_V2: 'P.O. Box'
+    },
+    addressLine2Placeholder: {},
+    addressLine3Placeholder: {},
+    addressLine1Title: {},
+    addressLine3Title: {
+      GBR: 'Address line 3',
+      USA: 'APT/FL/STE',
+      CAN: 'APT/FL/STE'
+    },
+    // Overrides auto-complete
+    addressLine2AutoComplete: {
+      USA: _constants.addressLine3AutoComplete,
+      CAN: _constants.addressLine3AutoComplete
+    },
+    // Overrides auto-complete
+    addressLine3AutoComplete: {
+      USA: _constants.addressLine2AutoComplete,
+      CAN: _constants.addressLine2AutoComplete
+    },
+    addressLine3Prompt: {
+      USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
+      CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”'
+    },
+    addressLine3MaxLength: {},
+    template: function template(addressLine1, addressLine2, addressLine3, region) {
+      var addressLines = {
+        GBR: addressTemplateGenerator(addressLine1, addressLine2, addressLine3),
+        USA: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CAN: addressTemplateGenerator(addressLine1, addressLine3, addressLine2),
+        CEMEA_V1: /*#__PURE__*/React.createElement(React.Fragment, null, " ", addressLine1, " "),
+        CEMEA_V2: /*#__PURE__*/React.createElement(React.Fragment, null, " ", addressLine1, " ")
+      };
+      return addressLines[region];
+    }
+  }
+};
+var _default = deliveryAddressMap;
+exports["default"] = _default;

package/dist/delivery-address-type.jsx

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveryAddressType = DeliveryAddressType;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var addressTypes = [{
+  id: 'home',
+  label: 'Home Address'
+}, {
+  id: 'company',
+  label: 'Company Address'
+}, {
+  id: 'pobox',
+  label: 'P.O. Box'
+}];
+function DeliveryAddressType(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 'home' : _ref$value,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'deliveryAddressTypeField' : _ref$fieldId,
+    _ref$inputName = _ref.inputName,
+    inputName = _ref$inputName === void 0 ? 'deliveryAddressType' : _ref$inputName,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? ['home', 'company', 'pobox'] : _ref$options,
+    _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? false : _ref$editMode,
+    _ref$titlePrompt = _ref.titlePrompt,
+    titlePrompt = _ref$titlePrompt === void 0 ? '' : _ref$titlePrompt;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: fieldId,
+    className: "o-forms-field ncf__delivery-address-type",
+    role: "group",
+    "aria-label": "Delivery Address Type"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, "Address type"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, titlePrompt)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-forms-input o-forms-input--inline o-forms-input--radio-round"
+  }, options.map(function (option) {
+    var type = addressTypes.find(function (item) {
+      return item.id === option;
+    });
+    return !type ? null : /*#__PURE__*/_react["default"].createElement("label", {
+      htmlFor: type.id,
+      "aria-label": type.label,
+      key: type.id
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "radio",
+      id: type.id,
+      name: inputName,
+      value: type.id,
+      className: "ncf__delivery-address-type__input",
+      disabled: editMode && type.id !== value,
+      defaultChecked: type.id === value
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-forms-input__label o-forms-input__address-type__label",
+      "aria-hidden": "true"
+    }, type.label));
+  })));
+}
+DeliveryAddressType.propTypes = {
+  fieldId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  value: _propTypes["default"].oneOf(['home', 'company', 'pobox']),
+  options: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['home', 'company', 'pobox'])),
+  titlePrompt: _propTypes["default"].string
+};

package/dist/delivery-address.jsx

@@ -0,0 +1,123 @@
+"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 FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(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[FTShippingZone] || '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[FTShippingZone],
+    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[FTShippingZone] || _constants.addressLine2AutoComplete,
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine2Placeholder[FTShippingZone] || '',
+    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[FTShippingZone]), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, _deliveryAddressMap["default"][addressType].addressLine3Prompt[FTShippingZone])), /*#__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[FTShippingZone] || _constants.addressLine3AutoComplete,
+    placeholder: _deliveryAddressMap["default"][addressType].addressLine3Placeholder[FTShippingZone] || 'e.g. Apt. 1',
+    maxLength: _deliveryAddressMap["default"][addressType].addressLine3MaxLength[country] || 50,
+    disabled: isDisabled,
+    defaultValue: line3
+  })));
+  var addressLines = _deliveryAddressMap["default"][addressType].template(addressLine1, addressLine2, addressLine3, FTShippingZone);
+  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"].oneOf(_supportedCountries.countriesSupportedISO),
+  addressType: _propTypes["default"].oneOf(['home', 'company', 'pobox'])
+};

package/dist/delivery-city.jsx

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveryCity = DeliveryCity;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _supportedCountries = require("../helpers/supportedCountries");
+function DeliveryCity(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$country = _ref.country,
+    country = _ref$country === void 0 ? 'GBR' : _ref$country;
+  var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var inputPlaceholder = {
+    GBR: 'e.g. Bath',
+    USA: 'e.g. Los Angeles',
+    CAN: 'e.g. Montreal',
+    ARE: 'e.g. Dubai'
+  };
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var labelMapping = {
+    ARE: 'Emirate or City',
+    APAC: 'City/Prefecture',
+    DEFAULT: 'City'
+  };
+  var inputLabel = labelMapping[FTShippingZone] ? labelMapping[FTShippingZone] : labelMapping['DEFAULT'];
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: "deliveryCityField",
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: "deliveryCity"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, inputLabel)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassName
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: "deliveryCity",
+    name: "deliveryCity",
+    "data-trackable": "field-deliveryCity",
+    autoComplete: "address-level2",
+    placeholder: inputPlaceholder[country] || '',
+    maxLength: 40,
+    "aria-required": "true",
+    required: true,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, "Please enter a valid city or town")));
+}
+DeliveryCity.propTypes = {
+  hasError: _propTypes["default"].bool,
+  value: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  maxlength: _propTypes["default"].number,
+  country: _propTypes["default"].oneOf(_supportedCountries.countriesSupportedISO)
+};

package/dist/delivery-county.jsx

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveryCounty = DeliveryCounty;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function DeliveryCounty(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: "deliveryCountyField",
+    className: "o-forms-field o-forms-field--optional",
+    "data-validate": "required",
+    htmlFor: "deliveryCounty"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, "County")), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassName
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: "deliveryCounty",
+    name: "deliveryCounty",
+    "data-trackable": "field-deliveryCounty",
+    autoComplete: "address-level3",
+    placeholder: "e.g. Somerset",
+    maxLength: 40,
+    disabled: isDisabled,
+    defaultValue: value
+  })));
+}
+DeliveryCounty.propTypes = {
+  hasError: _propTypes["default"].bool,
+  value: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool
+};

package/dist/delivery-instructions.jsx

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeliveryInstructions = DeliveryInstructions;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _supportedCountries = require("../helpers/supportedCountries");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var spanMessageByCountry = {
+  GBR: /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "For newspaper delivery, we can only deliver to the ground floor, so if you live in an apartment, we\u2019ll leave the newspaper at reception or by the entrance. We deliver in the early hours of the morning so our drivers won\u2019t be able to contact you or ring your doorbell."),
+  USA: /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Please note we cannot guarantee delivery of the newspaper to a specific location on your property, which also includes delivery to a specific floor/suite in a building. US Federal Law prohibits delivery of newspapers into a mailbox, except via a USPS mail carrier. If you prefer delivery to a mailbox, please either select the \"PO Box\" delivery option from the top of this form, or contact \xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "https://help.ft.com/contact/"
+  }, "FT Customer Care"), "."),
+  CAN: /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Please note we cannot guarantee delivery of the newspaper to a specific location on your property, which also includes delivery to a specific floor/suite in a building. If you prefer delivery by Canada Post, please either select the \"PO Box\" delivery option from the top of this form, or contact \xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "https://help.ft.com/contact/"
+  }, "FT Customer Care"), "."),
+  CEMEA_V1: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Newspaper delivery is restricted to ground floor addresses. If you live in an apartment the newspaper will be left at reception or by the entrance. Delivery is made in the early hours making it sometimes difficult to identify the right delivery location or gaining access where letter boxes are inside a building."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Special characters including punctuation cannot be used in the delivery instructions."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "If you prefer delivery to a mailbox, please either select the \u201CPO Box\u201D delivery option from the top of this form, or contact\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "https://help.ft.com/contact/"
+  }, "FT Customer Care"), ".")),
+  CEMEA_V2: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Newspaper delivery is restricted to ground floor addresses. If you live in an apartment the newspaper will be left at reception or by the entrance. Delivery is made in the early hours making it sometimes difficult to identify the right delivery location or gaining access where letter boxes are inside a building."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Special characters including punctuation cannot be used in the delivery instructions."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "If you prefer delivery to a mailbox, please either select the \u201CPO Box\u201D delivery option from the top of this form, or contact\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "https://help.ft.com/contact/"
+  }, "FT Customer Care"), ".")),
+  APAC: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Newspaper delivery is restricted to ground floor addresses. If you live in an apartment the newspaper will be left at reception or by the entrance. Delivery is made in the early hours making it sometimes difficult to identify the right delivery location or gaining access where letter boxes are inside a building."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Special characters including punctuation cannot be used in the delivery instructions."), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "If you prefer delivery to a mailbox, please either select the \u201CPO Box\u201D delivery option from the top of this form, or contact\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "https://help.ft.com/contact/"
+  }, "FT Customer Care"), "."))
+};
+function DeliveryInstructions(_ref) {
+  var _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'deliveryInstructionsField' : _ref$fieldId,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$inputId = _ref.inputId,
+    inputId = _ref$inputId === void 0 ? 'deliveryInstructions' : _ref$inputId,
+    _ref$maxlength = _ref.maxlength,
+    maxlength = _ref$maxlength === void 0 ? null : _ref$maxlength,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? null : _ref$rows,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    country = _ref.country;
+  var textAreaWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--textarea', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var extraInstruction = country === 'GBR' ? '' : "\n- Special handling, e.g. place in plastic bag, 24/7 security on reception";
+  var defaultPlaceholder = {
+    CEMEA_V1: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
+    CEMEA_V2: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
+    GBR: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Placement i.e. letterbox delivery").concat(extraInstruction),
+    USA: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction),
+    CAN: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction)
+  };
+  var textAreaProps = _objectSpread(_objectSpread(_objectSpread({
+    id: inputId,
+    name: inputId
+  }, maxlength && {
+    maxLength: maxlength
+  }), rows && {
+    rows: rows
+  }), {}, {
+    'data-trackable': 'field-deliveryInstructions',
+    placeholder: placeholder ? placeholder : defaultPlaceholder[FTShippingZone],
+    disabled: isDisabled,
+    defaultValue: value
+  });
+  var deliveryInstructionsMessage = /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, "Special characters including punctuation cannot be used in the delivery instructions.");
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field o-forms-field--optional",
+    "data-validate": "required",
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, "Delivery instructions"), spanMessageByCountry[FTShippingZone], country === 'GBR' && deliveryInstructionsMessage), /*#__PURE__*/_react["default"].createElement("span", {
+    className: textAreaWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("textarea", textAreaProps)));
+}
+DeliveryInstructions.propTypes = {
+  hasError: _propTypes["default"].bool,
+  maxlength: _propTypes["default"].number,
+  rows: _propTypes["default"].number,
+  isDisabled: _propTypes["default"].bool,
+  value: _propTypes["default"].string,
+  country: _propTypes["default"].oneOf(['GBR', 'USA', 'CAN']).isRequired
+};