@financial-times/n-conversion-forms
Version:
Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).
140 lines (139 loc) • 7.72 kB
JSX
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RegistrationConfirmation = RegistrationConfirmation;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var EMAIL_DEFAULT_TEXT = 'your email';
var DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL = 'https://find-your-subscription.ft.com/request';
var SOCIALS = [{
name: 'instagram',
link: 'https://www.instagram.com/financialtimes'
}, {
name: 'linkedin',
link: 'https://www.linkedin.com/company/financial-times'
}, {
name: 'twitter',
link: 'https://twitter.com/FT'
}, {
name: 'facebook',
link: 'https://www.facebook.com/financialtimes'
}];
var STORES = [{
name: 'apple',
link: 'https://apps.apple.com/app/apple-store/id1200842933'
}, {
name: 'android',
link: 'https://play.google.com/store/apps/details?id=com.ft.news'
}];
function RegistrationConfirmation(_ref) {
var _ref$email = _ref.email,
email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
_ref$showProfessional = _ref.showProfessionalSubscriptionCheckBanner,
showProfessionalSubscriptionCheckBanner = _ref$showProfessional === void 0 ? false : _ref$showProfessional,
_ref$professionalSubs = _ref.professionalSubscriptionCheckRequestUrl,
professionalSubscriptionCheckRequestUrl = _ref$professionalSubs === void 0 ? DEFAULT_PROFESSIONAL_SUBSCRIPTION_CHECK_REQUEST_URL : _ref$professionalSubs,
_ref$returnUrl = _ref.returnUrl,
returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__center ncf__margin"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__icon ncf__icon--tick ncf__icon--large"
}), /*#__PURE__*/_react["default"].createElement("h1", {
className: "ncf__header ncf__header--confirmation"
}, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
className: "ncf__confirmation--message"
}, "We\u2019ve sent confirmation to ", email, ".")), showProfessionalSubscriptionCheckBanner && /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation__professional-subscription-check-banner",
"data-trackable": "professional-subscription-check-banner",
"data-o3-brand": "professional"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation__professional-subscription-check-banner-header"
}, /*#__PURE__*/_react["default"].createElement("h2", {
className: "ncf__confirmation__professional-subscription-check-banner-title"
}, "See if you can join the FT through your organisation"), /*#__PURE__*/_react["default"].createElement("p", {
className: "ncf__confirmation__professional-subscription-check-banner-text"
}, "Your email address matches the domain we have for an FT Professional subscription. This means your organisation may have an FT subscription you can join for free.")), /*#__PURE__*/_react["default"].createElement("ul", {
className: "ncf__confirmation__professional-subscription-check-banner-checklist"
}, /*#__PURE__*/_react["default"].createElement("li", {
className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
}, "Get the", ' ', /*#__PURE__*/_react["default"].createElement("b", {
className: "ncf__confirmation__professional-subscription-check-banner-text--bold"
}, "FT for free"), ' ', "through your organisation"), /*#__PURE__*/_react["default"].createElement("li", {
className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
}, "Full access to Standard FT content"), /*#__PURE__*/_react["default"].createElement("li", {
className: "ncf__confirmation__professional-subscription-check-banner-checklist-item"
}, "Unlimited access to Premium content and newsletters")), /*#__PURE__*/_react["default"].createElement("a", {
href: professionalSubscriptionCheckRequestUrl,
className: "ncf__button o3-button o3-button--primary",
"data-trackable": "professional-subscription-check-banner-request",
"data-o3-theme": "inverse"
}, "Check if your organisation subscribes")), /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__divider-horizontal"
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation--links ncf__margin"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation--socials"
}, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
className: "ncf__confirmation--mobile"
}, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
className: "ncf__confirmation--desktop"
}, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation--badges"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "o-social-follow",
"aria-label": "Follow on social media"
}, SOCIALS.map(function (_ref2) {
var name = _ref2.name,
link = _ref2.link;
return /*#__PURE__*/_react["default"].createElement("a", {
key: name,
href: link,
className: "o-social-follow-icon o-social-follow-icon--".concat(name),
target: "_blank",
rel: "noopener noreferrer",
"data-trackable": "register-social-".concat(name)
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "o-social-follow-icon__label"
}, "on ", name));
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation--mobile ncf__confirmation--app-badges",
"aria-label": "Download the app"
}, STORES.map(function (_ref3) {
var name = _ref3.name,
link = _ref3.link;
return /*#__PURE__*/_react["default"].createElement("a", {
key: name,
href: link,
className: "ncf-icon ncf-icon--".concat(name),
target: "_blank",
rel: "noopener noreferrer",
"data-trackable": "register-app-".concat(name)
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "o-social-follow-icon__label"
}, "on ", name));
})))), /*#__PURE__*/_react["default"].createElement("div", {
className: "ncf__confirmation--alerts"
}, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
"aria-label": "myFT",
className: "ncf-icon ncf-icon--myft"
})), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
href: "/myft",
className: "margin-top-x4 ncf__button o3-button o3-button--secondary",
"data-trackable": "register-personalise-my-alerts"
}, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
href: returnUrl,
target: "_parent",
className: "ncf__confirmation--finish ncf__button o3-button o3-button--primary",
"data-trackable": "register-finish"
}, "Start reading"));
}
RegistrationConfirmation.propTypes = {
email: _propTypes["default"].string,
showProfessionalSubscriptionCheckBanner: _propTypes["default"].bool,
professionalSubscriptionCheckRequestUrl: _propTypes["default"].string
};