@financial-times/n-conversion-forms/dist/debug.js

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.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: 'delivery test3',\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
};