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

package/dist/confirmation.jsx

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Confirmation = Confirmation;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 EMAIL_DEFAULT_TEXT = 'your email';
+function Confirmation(_ref) {
+  var _ref$isTrial = _ref.isTrial,
+    isTrial = _ref$isTrial === void 0 ? false : _ref$isTrial,
+    _ref$isB2cPartnership = _ref.isB2cPartnership,
+    isB2cPartnership = _ref$isB2cPartnership === void 0 ? false : _ref$isB2cPartnership,
+    _ref$b2cPartnershipCo = _ref.b2cPartnershipCopy,
+    b2cPartnershipCopy = _ref$b2cPartnershipCo === void 0 ? [] : _ref$b2cPartnershipCo,
+    _ref$offer = _ref.offer,
+    offer = _ref$offer === void 0 ? '' : _ref$offer,
+    _ref$email = _ref.email,
+    email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
+    _ref$details = _ref.details,
+    details = _ref$details === void 0 ? null : _ref$details,
+    _ref$directDebitManda = _ref.directDebitMandateUrl,
+    directDebitMandateUrl = _ref$directDebitManda === void 0 ? null : _ref$directDebitManda,
+    _ref$nextActionTop = _ref.nextActionTop,
+    nextActionTop = _ref$nextActionTop === void 0 ? null : _ref$nextActionTop,
+    _ref$nextActionBottom = _ref.nextActionBottom,
+    nextActionBottom = _ref$nextActionBottom === void 0 ? null : _ref$nextActionBottom;
+  var containerDivProps = _objectSpread({
+    className: 'ncf ncf__wrapper'
+  }, isTrial && {
+    'data-signup-is-trial': 'true'
+  });
+  var isB2cPartnershipCopyAvailable = isB2cPartnership && b2cPartnershipCopy.length > 0;
+  var detailElements = details && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "ncf__header2--afterline"
+  }, "Your billing details"), /*#__PURE__*/_react["default"].createElement("dl", {
+    className: "ncf__list"
+  }, details.map(function (detail, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("dt", {
+      className: "ncf__list-title"
+    }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
+      className: "ncf__list-data"
+    }, detail.data), detail.description && /*#__PURE__*/_react["default"].createElement("dd", {
+      className: "ncf__list-description"
+    }, detail.description));
+  })));
+  var directDebitMandateUrlElement = directDebitMandateUrl && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph--reduced-padding"
+  }, "Download your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    href: directDebitMandateUrl,
+    "data-trackable": "dd-mandate-link",
+    id: "encryptedMandateLink"
+  }, "direct debit mandate"), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "ncf__icon-download"
+  })));
+  return /*#__PURE__*/_react["default"].createElement("div", containerDivProps, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__center"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__icon ncf__icon--tick ncf__icon--large"
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation"
+  }, "You are now subscribed to:"), /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "ncf__header ncf__header--confirmation"
+  }, offer)), nextActionTop, !isB2cPartnershipCopyAvailable && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "We\u2019ve sent confirmation to ", email, ". Make sure you check your spam folder if you don\u2019t receive it."), isB2cPartnershipCopyAvailable ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, b2cPartnershipCopy[0], /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__legend"
+  }, " ".concat(email, ". ")), b2cPartnershipCopy[1]) : '', /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Here\u2019s a summary of your ", offer, " subscription:"), detailElements, directDebitMandateUrlElement, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__headed-paragraph"
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "ncf__header"
+  }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link ncf__link--external",
+    href: "https://www.ft.com/myaccount/personal-details",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "yourAccount"
+  }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    href: "tel:+442077556248",
+    className: "ncf__link ncf__link--external"
+  }, "+44 (0) 207 755 6248"), ". Or contact us for additional support.")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, "We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. See our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link ncf__link--external",
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: "_top",
+    rel: "noopener"
+  }, "Terms & Conditions"), ' ', "for details on how to cancel."), nextActionBottom);
+}
+Confirmation.propTypes = {
+  isTrial: _propTypes["default"].bool,
+  isB2cPartnership: _propTypes["default"].bool,
+  b2cPartnershipCopy: _propTypes["default"].array,
+  offer: _propTypes["default"].string.isRequired,
+  email: _propTypes["default"].string,
+  details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    data: _propTypes["default"].string.isRequired,
+    description: _propTypes["default"].string
+  })),
+  directDebitMandateUrl: _propTypes["default"].string,
+  nextActionTop: _propTypes["default"].node,
+  nextActionBottom: _propTypes["default"].node
+};

package/dist/continue-reading.jsx

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContinueReading = ContinueReading;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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; }
+function ContinueReading(_ref) {
+  var _ref$link = _ref.link,
+    link = _ref$link === void 0 ? null : _ref$link,
+    _ref$quote = _ref.quote,
+    quote = _ref$quote === void 0 ? '' : _ref$quote,
+    _ref$isEmbedded = _ref.isEmbedded,
+    isEmbedded = _ref$isEmbedded === void 0 ? false : _ref$isEmbedded;
+  var titleElement = link ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__continue-reading-title"
+  }, "You can now continue reading:") : /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__continue-reading-title"
+  }, "Become an FT subscriber to read:");
+  var aTagProps = _objectSpread(_objectSpread({
+    href: link
+  }, isEmbedded && {
+    target: '_top'
+  }), {}, {
+    className: 'ncf__button ncf__button--secondary'
+  });
+  var linkElement = link && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__center"
+  }, /*#__PURE__*/_react["default"].createElement("a", aTagProps, "Continue reading"));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__continue-reading-wrapper"
+  }, titleElement, /*#__PURE__*/_react["default"].createElement("blockquote", {
+    className: "ncf__continue-reading-quote"
+  }, quote), linkElement);
+}
+ContinueReading.propTypes = {
+  link: _propTypes["default"].string,
+  quote: _propTypes["default"].string,
+  isEmbedded: _propTypes["default"].bool
+};

package/dist/country.jsx

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Country = Country;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _countries = require("../utils/countries");
+function Country(_ref) {
+  var additionalFieldInformation = _ref.additionalFieldInformation,
+    _ref$dataTrackable = _ref.dataTrackable,
+    dataTrackable = _ref$dataTrackable === void 0 ? 'field-country' : _ref$dataTrackable,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'countryField' : _ref$fieldId,
+    _ref$filterList = _ref.filterList,
+    filterList = _ref$filterList === void 0 ? [] : _ref$filterList,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$inputId = _ref.inputId,
+    inputId = _ref$inputId === void 0 ? 'country' : _ref$inputId,
+    _ref$isB2b = _ref.isB2b,
+    isB2b = _ref$isB2b === void 0 ? false : _ref$isB2b,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isPlaceholderDis = _ref.isPlaceholderDisabled,
+    isPlaceholderDisabled = _ref$isPlaceholderDis === void 0 ? false : _ref$isPlaceholderDis,
+    value = _ref.value,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Country".concat(isB2b ? '/Region' : '') : _ref$label,
+    _ref$errorText = _ref.errorText,
+    errorText = _ref$errorText === void 0 ? "Please select your country".concat(isB2b ? '/region' : '') : _ref$errorText;
+  var selectWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var selectProps = {
+    id: inputId,
+    'aria-required': true,
+    required: true,
+    name: inputId,
+    'data-trackable': dataTrackable,
+    disabled: isDisabled
+  };
+  var countries = (0, _countries.getCountries)({
+    filter: filterList,
+    value: value
+  });
+  var createOption = function createOption(country) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: country.code,
+      value: country.code,
+      selected: country.selected
+    }, country.name);
+  };
+  var createOptGroup = function createOptGroup(country) {
+    return /*#__PURE__*/_react["default"].createElement("optgroup", {
+      key: country.label,
+      label: country.label
+    }, country.countries.map(function (country) {
+      return createOption(country);
+    }));
+  };
+  var createSelect = function createSelect(countries) {
+    return /*#__PURE__*/_react["default"].createElement("select", selectProps, /*#__PURE__*/_react["default"].createElement("option", {
+      value: "",
+      disabled: isPlaceholderDisabled
+    }, "Please select a country", isB2b ? '/region' : ''), countries.map(function (country) {
+      return country.label ? createOptGroup(country) : createOption(country);
+    }));
+  };
+  var fieldErrorClassNames = (0, _classnames["default"])(['o-forms-input__error', {
+    'additional-field-information__with-field-error': additionalFieldInformation
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: selectProps.id
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, label)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: selectWrapperClassName
+  }, createSelect(countries), /*#__PURE__*/_react["default"].createElement("span", {
+    className: fieldErrorClassNames
+  }, errorText), additionalFieldInformation ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "additional-field-information"
+  }, additionalFieldInformation) : null));
+}
+Country.propTypes = {
+  additionalFieldInformation: _propTypes["default"].node,
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  filterList: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  hasError: _propTypes["default"].bool,
+  inputId: _propTypes["default"].string,
+  isB2b: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isPlaceholderDisabled: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  value: _propTypes["default"].string
+};

package/dist/customer-care.jsx

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomerCare = CustomerCare;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var DEFAULT_HEADER_TEXT = 'Sorry, this is not available online';
+var DEFAULT_MESSAGE_TEXT = 'Speak now to our Customer Care team to discuss your options';
+function CustomerCare(_ref) {
+  var _ref$header = _ref.header,
+    header = _ref$header === void 0 ? DEFAULT_HEADER_TEXT : _ref$header,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? DEFAULT_MESSAGE_TEXT : _ref$message;
+  var className = (0, _classnames["default"])(['ncf__wrapper', 'ncf__center', 'ncf__customer-care', {
+    'ncf__customer-care--compact': isCompact === true
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: className
+  }, (header || message) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__paragraph"
+  }, header && /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "ncf__header"
+  }, header), message && /*#__PURE__*/_react["default"].createElement("p", {
+    id: "customer-care-message"
+  }, message)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__paragraph"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__icon ncf__icon--phone ncf__icon--large"
+  }), /*#__PURE__*/_react["default"].createElement("p", null, "International Toll Free Number"), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__customer-care__phone"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    id: "customer-care-international-number",
+    className: "ncf__header ncf__link",
+    href: "tel:+80007056477"
+  }, "+ 800 0705 6477"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__paragraph"
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link",
+    href: "https://help.ft.com/help/contact-us/"
+  }, "Find a local phone number")));
+}
+CustomerCare.propTypes = {
+  header: _propTypes["default"].string,
+  isCompact: _propTypes["default"].bool,
+  message: _propTypes["default"].string
+};

package/dist/debug.jsx

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Debug = Debug;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function Debug(_ref) {
+  var _ref$isTest = _ref.isTest,
+    isTest = _ref$isTest === void 0 ? false : _ref$isTest,
+    _ref$showHelpers = _ref.showHelpers,
+    showHelpers = _ref$showHelpers === void 0 ? false : _ref$showHelpers,
+    _ref$links = _ref.links,
+    links = _ref$links === void 0 ? {} : _ref$links;
+  // Strings are used rather than JSX as this component is injected into HTML
+  // along with onclick handlers, styles and javascript. JSX will escape and
+  // modify the HTML which we do not want. Once our applications are on JSX
+  // entirely this component should be rethought.
+  var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test\" onclick=\"setTestEnvironment('off');\"><strong>TEST</strong> relax you are using the test API</a>\n\t\t</span>\n\t";
+  var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production\" onclick=\"setTestEnvironment('on');\"><strong>PRODUCTION</strong> careful you are using the production API</a>\n\t\t</span>\n\t";
+  var testCards = "\n\t\t<button id=\"ncf-copy-visa-checkout-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkoutVisa');\" title=\"Copy Checkout Visa test card number to clipboard\">EU Visa (cvv:100)</button>\n\t\t<button id=\"ncf-copy-visa-checkout-3ds\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkout3dsChallenge');\" title=\"Copy Checkout challenge code -Checkout1!- to clipboard\">EU 3ds challenge</button>\n\t\t<button id=\"ncf-copy-visa-chase-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('chaseVisa');\" title=\"Copy Chase card number to clipboard\">US Visa (exp:1230,cvv:111)</button>\n\t\t<button id=\"ncf-link-checkout-cards\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');\" title=\"Checkout test cards documentation\">Doc:Checkout</button>\n\t";
+  var linksString = Object.keys(links).map(function (link) {
+    return "<a key=".concat(link, " class=\"ncf__button ncf__button--inverse ncf__link\" href=\"").concat(links[link], "\">").concat(link, "</a>");
+  });
+  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm(); submitForm();\" title=\"Fill form with debug data and submit\">Fill &amp; Submit</button>\n\t\t\t".concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
+  var html = {
+    __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
+  };
+  var javascript = {
+    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'APT 2C',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
+  };
+  var style = {
+    __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"
+  };
+  return (isTest || showHelpers) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__debug-panel",
+    dangerouslySetInnerHTML: html
+  }), /*#__PURE__*/_react["default"].createElement("script", {
+    dangerouslySetInnerHTML: javascript
+  }), /*#__PURE__*/_react["default"].createElement("style", {
+    dangerouslySetInnerHTML: style
+  }));
+}
+Debug.propTypes = {
+  isTest: _propTypes["default"].bool,
+  showHelpers: _propTypes["default"].bool,
+  links: _propTypes["default"].object
+};

package/dist/decision-maker.jsx

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DecisionMaker = DecisionMaker;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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; }
+function DecisionMaker(_ref) {
+  var _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 'yes' : _ref$value;
+  var radioButtonsWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--radio-box', 'o-forms-input--inline', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var decisionMakerYesInputProps = _objectSpread({
+    type: 'radio',
+    id: 'decisionMakerYes',
+    name: 'decisionMaker',
+    'aria-label': 'Yes',
+    value: 'yes'
+  }, value === 'yes' && {
+    defaultChecked: true
+  });
+  var decisionMakerNoInputProps = _objectSpread({
+    type: 'radio',
+    id: 'decisionMakerNo',
+    name: 'decisionMaker',
+    'aria-label': 'No',
+    value: 'no'
+  }, value === 'no' && {
+    defaultChecked: true
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "decisionMakerField",
+    role: "group",
+    "aria-labelledby": "decisionMakerFieldLabel",
+    className: "o-forms-field o-forms-field--inline",
+    "data-validate": "required"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main",
+    id: "decisionMakerFieldLabel"
+  }, "Are you a manager with direct reports?")), /*#__PURE__*/_react["default"].createElement("span", {
+    className: radioButtonsWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "o-forms-input--radio-box__container"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: decisionMakerYesInputProps.id
+  }, /*#__PURE__*/_react["default"].createElement("input", decisionMakerYesInputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label",
+    "aria-hidden": "true"
+  }, "Yes")), /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: decisionMakerNoInputProps.id
+  }, /*#__PURE__*/_react["default"].createElement("input", decisionMakerNoInputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label o-forms-input__label--negative",
+    "aria-hidden": "true"
+  }, "No"))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, "Please select an option")));
+}
+DecisionMaker.propTypes = {
+  hasError: _propTypes["default"].bool,
+  value: _propTypes["default"].string
+};

package/dist/deferred-billing-terms.jsx

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeferredBillingTerms = DeferredBillingTerms;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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 CONSENT_AGE = 16;
+function DeferredBillingTerms(_ref) {
+  var _ref$isDeferredBillin = _ref.isDeferredBilling,
+    isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
+    _ref$checkBoxTrackabl = _ref.checkBoxTrackableAttr,
+    checkBoxTrackableAttr = _ref$checkBoxTrackabl === void 0 ? 'field-terms' : _ref$checkBoxTrackabl,
+    _ref$trackableAttr = _ref.trackableAttr,
+    trackableAttr = _ref$trackableAttr === void 0 ? 'deferred-billing-terms' : _ref$trackableAttr,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? 'Please accept our terms &amp; conditions' : _ref$errorMessage,
+    _ref$inputId = _ref.inputId,
+    inputId = _ref$inputId === void 0 ? 'accept-deferred-billing-terms' : _ref$inputId,
+    _ref$fieldId = _ref.fieldId,
+    fieldId = _ref$fieldId === void 0 ? 'accept-deferred-terms' : _ref$fieldId,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError;
+  var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
+    'o-forms-input--invalid': hasError
+  }]);
+  var inputProps = _objectSpread({
+    id: "".concat(inputId),
+    type: 'checkbox',
+    name: "".concat(inputId),
+    value: 'true',
+    'data-trackable': checkBoxTrackableAttr,
+    'aria-required': 'true',
+    required: true
+  }, isChecked && {
+    defaultChecked: true
+  });
+  var divProps = _objectSpread({
+    id: 'acceptTermsField',
+    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    'data-validate': 'required,checked'
+  }, isChecked && {
+    'data-trackable': trackableAttr
+  });
+  return isDeferredBilling && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "I confirm I am ", CONSENT_AGE, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "I give consent for my chosen payment method to be charged automatically at the end of each subscription term until I cancel it by contacting Customer Care through chat, phone or email.")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "By placing my order, I acknowledge that my subscription will start on the date given above. Any cancellation notice received after that date will take effect at the end of my subscription term and previously paid amounts are non-refundable.")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("p", {
+    className: labelClassName
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__paragraph"
+  }, "Please note that if you fail to make payment for your Deferred Billing Plan within the due date your subscription will be automatically cancelled.", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
+    title: "FT Legal Terms and Conditions help page",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-trackable": "terms-and-conditions"
+  }, "Terms & Conditions"), ".")), /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("label", {
+    className: labelClassName,
+    htmlFor: inputId,
+    id: fieldId
+  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__label"
+  }, "I agree with terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "o-forms-input__error"
+  }, errorMessage))));
+}
+DeferredBillingTerms.propTypes = {
+  hasError: _propTypes["default"].bool,
+  isChecked: _propTypes["default"].bool,
+  isDeferredBilling: _propTypes["default"].bool,
+  fieldId: _propTypes["default"].string,
+  inputId: _propTypes["default"].string,
+  trackableAttr: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string
+};