@financial-times/n-conversion-forms
Version:
Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).
213 lines (212 loc) • 12.7 kB
JSX
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PaymentType = PaymentType;
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 _loader = require("./loader");
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 PaypalCustomerCareMessage = function PaypalCustomerCareMessage() {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__payment-type-paypal-message"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "o-message o-message--notice o-message--inform",
"data-o-component": "o-message"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "o-message__container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "o-message__content"
}, /*#__PURE__*/_react["default"].createElement("p", {
className: "o-message__content-main"
}, "If you", "'", "d like to change your payment method to Paypal please", ' ', /*#__PURE__*/_react["default"].createElement("a", {
className: "o-message__actions__secondary",
href: "https://help.ft.com"
}, "contact Customer Care"), ".")))));
};
function PaymentType(_ref) {
var _ref$enableApplepay = _ref.enableApplepay,
enableApplepay = _ref$enableApplepay === void 0 ? false : _ref$enableApplepay,
_ref$enableCreditcard = _ref.enableCreditcard,
enableCreditcard = _ref$enableCreditcard === void 0 ? false : _ref$enableCreditcard,
_ref$enableDirectdebi = _ref.enableDirectdebit,
enableDirectdebit = _ref$enableDirectdebi === void 0 ? false : _ref$enableDirectdebi,
_ref$enablePaypal = _ref.enablePaypal,
enablePaypal = _ref$enablePaypal === void 0 ? false : _ref$enablePaypal,
_ref$enableBankTransf = _ref.enableBankTransfer,
enableBankTransfer = _ref$enableBankTransf === void 0 ? false : _ref$enableBankTransf,
_ref$showLoaderOnInit = _ref.showLoaderOnInit,
showLoaderOnInit = _ref$showLoaderOnInit === void 0 ? false : _ref$showLoaderOnInit,
_ref$showPaypalCustom = _ref.showPaypalCustomerCareMessage,
showPaypalCustomerCareMessage = _ref$showPaypalCustom === void 0 ? false : _ref$showPaypalCustom,
_ref$fieldId = _ref.fieldId,
fieldId = _ref$fieldId === void 0 ? 'paymentTypeField' : _ref$fieldId,
_ref$inputId = _ref.inputId,
inputId = _ref$inputId === void 0 ? 'paymentType' : _ref$inputId,
value = _ref.value,
_ref$isSingleTerm = _ref.isSingleTerm,
isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
_ref$isSingleTermChec = _ref.isSingleTermChecked,
isSingleTermChecked = _ref$isSingleTermChec === void 0 ? false : _ref$isSingleTermChec;
var createSecuritySeal = function createSecuritySeal() {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__security-seal",
dangerouslySetInnerHTML: {
__html: "\n\t\t\t\t<!-- NOTE: this won't display on local.ft.com (yet it will still take up space. I know.) -->\n\t\t\t\t<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->\n\t\t\t\t<!-- Disabled until we can get a version from GlobalSign that works better than this one. Currently it doesn't always load correctly. -->\n\t\t\t\t<!-- <table width=125 border=0 cellspacing=0 cellpadding=0 title=\"CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information.\">\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td><span id=\"ss_img_wrapper_gmogs_image_110-45_en_dblue\"><a href=\"https://www.globalsign.com/\" target=_blank title=\"GlobalSign Site Seal\" rel=\"nofollow\"><img alt=\"SSL\" border=0 id=\"ss_img\" src=\"//seal.globalsign.com/SiteSeal/images/gs_noscript_110-45_en.gif\"></a></span>\n\t\t\t\t\t\t\t<script type=\"text/javascript\" src=\"//seal.globalsign.com/SiteSeal/gmogs_image_110-45_en_dblue.js\"></script>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</table> -->\n\t\t\t\t<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->\n\t\t\t"
}
});
};
var paymentTypeCreditCard = {
id: 'creditcard',
label: 'Credit / Debit Card',
hide: !enableCreditcard
};
var paymentTypePaypal = function paymentTypePaypal() {
if (showPaypalCustomerCareMessage) {
return PaypalCustomerCareMessage();
} else {
return {
id: 'paypal',
label: 'PayPal',
hide: !enablePaypal
};
}
};
var paymentTypeDirectDebit = {
id: 'directdebit',
label: 'Direct Debit',
hide: !enableDirectdebit
};
var paymentTypeApplePay = {
id: 'applepay',
label: 'Apple Pay',
hide: !enableApplepay
};
var paymentTypeBankTransfer = {
id: 'banktransfer',
label: 'Bank Transfer',
hide: !enableBankTransfer
};
var createPaymentTypes = function createPaymentTypes() {
var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer];
return paymentTypes.map(function (type) {
if (type.id === undefined) {
return type;
} else {
var inputProps = _objectSpread({
type: 'radio',
name: inputId,
value: type.id,
id: type.id,
'aria-label': type.label
}, value === type.id && {
defaultChecked: true
});
var className = (0, _classnames["default"])(['o-forms-input--radio-box__container', 'ncf__payment-type', "ncf__payment-type--".concat(type.id), {
ncf__hidden: type.hide
}]);
return /*#__PURE__*/_react["default"].createElement("div", {
key: type.id,
className: className
}, /*#__PURE__*/_react["default"].createElement("label", {
htmlFor: inputProps.id
}, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
className: "o-forms-input__label",
"aria-hidden": "true"
}, type.label)));
}
});
};
var createDirectDebitPanel = function createDirectDebitPanel() {
return enableDirectdebit && /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__payment-type-panel ncf__payment-type-panel--directdebit ncf__hidden"
}, /*#__PURE__*/_react["default"].createElement("div", {
id: "directDebitGuarantee",
className: "ncf__directdebit-guarantee",
"data-o-component": "o-expander",
"data-o-expander-shrink-to": "hidden",
"data-o-expander-expanded-toggle-text": "guarantee",
"data-o-expander-collapsed-toggle-text": "guarantee",
role: "tabpanel"
}, /*#__PURE__*/_react["default"].createElement("p", null, "Direct Debit is only supported in the UK"), /*#__PURE__*/_react["default"].createElement("p", null, "Your payments are protected by the Direct Debit", ' ', /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: "ncf__directdebit-guarantee-toggle o-expander__toggle"
}, "guarantee")), /*#__PURE__*/_react["default"].createElement("ul", {
className: "ncf__directdebit-guarantee-list o-expander__content"
}, /*#__PURE__*/_react["default"].createElement("li", null, "This Guarantee is offered by all banks and building societies that accept instructions to pay Direct Debits."), /*#__PURE__*/_react["default"].createElement("li", null, "If there are any changes to the amount, date or frequency of your Direct Debit GoCardless re: The Financial Times will notify you 3 working days in advance of your account being debited or as otherwise agreed. If you request GoCardless Ltd re: The Financial Times to collect a payment, confirmation of the amount and date will be given to you at the time of the request."), /*#__PURE__*/_react["default"].createElement("li", null, "If an error is made in the payment of your Direct Debit, by GoCardless Ltd re: The Financial Times or your bank or building society, you are entitled to a full and immediate refund of the amount paid from your bank or building society."), /*#__PURE__*/_react["default"].createElement("li", null, "If you receive a refund you are not entitled to, you must pay it back when GoCardless Ltd re: The Financial Times asks you to."), /*#__PURE__*/_react["default"].createElement("li", null, "You can cancel a Direct Debit at any time by simply contacting your bank or building society. Written confirmation may be required. Please also notify us."))));
};
var createZuoraPanel = function createZuoraPanel() {
// eslint-disable-next-line react/no-unknown-property
return (enableDirectdebit || enableCreditcard) && /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__payment-type-panel ncf__payment-type-panel--creditcard ncf__payment-type-panel--directdebit ncf__hidden"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__zuora-payment-overlay ncf__hidden"
}), /*#__PURE__*/_react["default"].createElement("div", {
id: "zuora_payment",
className: "ncf__zuora-payment"
}, /*#__PURE__*/_react["default"].createElement("iframe", {
id: "z_hppm_iframe",
title: "Zuora Payment",
overflow: "visible",
scrolling: "no",
frameBorder: "0",
className: "z_hppm_iframe",
style: {
display: 'block',
width: '100%'
}
})), /*#__PURE__*/_react["default"].createElement("script", {
src: "https://static.zuora.com/Resources/libs/hosted/1.3.1/zuora-min.js"
}));
};
var createLoaderOnInit = function createLoaderOnInit() {
return showLoaderOnInit && /*#__PURE__*/_react["default"].createElement(_loader.Loader, {
inElement: true,
showLoader: true,
title: "Loading payment form..."
});
};
var inputCheckProps = _objectSpread({
id: 'payFasterNextTime',
type: 'checkbox',
name: 'payFasterNextTime',
value: 'true',
required: false,
checked: true
}, isSingleTermChecked && {
defaultChecked: true
});
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, createSecuritySeal(), /*#__PURE__*/_react["default"].createElement("div", {
id: fieldId,
className: "o-forms-field"
}, createLoaderOnInit(), /*#__PURE__*/_react["default"].createElement("div", {
className: "o-forms-input o-forms-input--radio-box ncf__payment-type-selector"
}, createPaymentTypes()), /*#__PURE__*/_react["default"].createElement("div", {
className: "o-forms-input__error"
}, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel()), /*#__PURE__*/_react["default"].createElement("div", {
className: "o-forms-field"
}, isSingleTerm && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
className: "o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox",
htmlFor: "payFasterNextTime"
}, /*#__PURE__*/_react["default"].createElement("input", inputCheckProps), /*#__PURE__*/_react["default"].createElement("span", {
className: "o-forms-input__label"
}, "Use these details to pay faster next time")))));
}
PaymentType.propTypes = {
enableApplepay: _propTypes["default"].bool,
enableCreditcard: _propTypes["default"].bool,
enableDirectdebit: _propTypes["default"].bool,
enablePaypal: _propTypes["default"].bool,
enableBankTransfer: _propTypes["default"].bool,
showLoaderOnInit: _propTypes["default"].bool,
showPaypalCustomerCareMessage: _propTypes["default"].bool,
fieldId: _propTypes["default"].string,
inputId: _propTypes["default"].string,
value: _propTypes["default"].string,
isSingleTerm: _propTypes["default"].bool,
isSingleTermChecked: _propTypes["default"].bool
};