@financial-times/n-conversion-forms/dist/lite-sub-confirmation.jsx

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.LiteSubConfirmation = LiteSubConfirmation;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var EMAIL_DEFAULT_TEXT = 'your email';
var PREMIUM_OFFER = 'P2';
var isPremium = function isPremium(productCode) {
  return productCode === PREMIUM_OFFER;
};
var DetailsMobileView = function DetailsMobileView(_ref) {
  var details = _ref.details;
  return /*#__PURE__*/_react["default"].createElement("dl", {
    className: "ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg"
  }, 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));
  }));
};
function LiteSubConfirmation(_ref2) {
  var _ref2$productCode = _ref2.productCode,
    productCode = _ref2$productCode === void 0 ? '' : _ref2$productCode,
    _ref2$offerName = _ref2.offerName,
    offerName = _ref2$offerName === void 0 ? '' : _ref2$offerName,
    _ref2$subscriptionAmo = _ref2.subscriptionAmount,
    subscriptionAmount = _ref2$subscriptionAmo === void 0 ? '' : _ref2$subscriptionAmo,
    _ref2$email = _ref2.email,
    email = _ref2$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref2$email,
    _ref2$details = _ref2.details,
    details = _ref2$details === void 0 ? [] : _ref2$details;
  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 ncf__lite-sub-confirmation--hidden-sm"
  }, 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));
  })), /*#__PURE__*/_react["default"].createElement(DetailsMobileView, {
    details: details
  }));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ncf ncf__wrapper"
  }, /*#__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've been upgraded to:"), /*#__PURE__*/_react["default"].createElement("h1", {
    className: "ncf__header ncf__header--confirmation"
  }, isPremium(productCode) ? 'Premium Digital' : 'Standard Digital')), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__paragraph"
  }, "Thank you for choosing to subscribe to ", /*#__PURE__*/_react["default"].createElement("strong", null, offerName), ". We are not quite ready to deliver this type of subscription, so we have upgraded you to a ", isPremium(productCode) ? 'Premium' : 'Digital', " 3 month subscription at no additional cost."), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__paragraph"
  }, "For ", subscriptionAmount, " a month, here's what your subscription covers:"), /*#__PURE__*/_react["default"].createElement("ul", {
    className: "ncf__unordered-list"
  }, /*#__PURE__*/_react["default"].createElement("li", null, "Access to stories from over 600 journalists in 50+ countries covering markets, politics, business, tech and more"), /*#__PURE__*/_react["default"].createElement("li", null, "FirstFT: a daily newsletter with the global stories you need to know"), /*#__PURE__*/_react["default"].createElement("li", null, "Share 10 articles per month with colleagues, family and friends")), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__paragraph"
  }, "However, if you would like to cancel your subscription, please contact our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
    className: "ncf__link ncf__link--external",
    href: "https://help.ft.com/contact/",
    target: "_blank",
    rel: "noopener noreferrer"
  }, "customer care team"), ' ', "and they will arrange this for you."), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__center"
  }, /*#__PURE__*/_react["default"].createElement("a", {
    href: "/",
    className: "ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
  }, "Go to FT.com")), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__paragraph"
  }, "We've sent confirmation to ", email, ". Make sure you check your spam folder if you don\u2019t receive it."), /*#__PURE__*/_react["default"].createElement("p", {
    className: "ncf__paragraph"
  }, "Here's a summary of your", ' ', isPremium(productCode) ? 'Premium Digital' : 'Standard Digital', ' ', "subscription:"), detailElements, /*#__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:+18556852372",
    className: "ncf__link ncf__link--external"
  }, "+1 855 685 2372"), ". Or", ' ', /*#__PURE__*/_react["default"].createElement("a", {
    className: "ncf__link ncf__link--external",
    href: "https://help.ft.com/contact/",
    target: "_blank",
    rel: "noopener noreferrer"
  }, "contact us"), ' ', "for additional support.")));
}
LiteSubConfirmation.propTypes = {
  offerName: _propTypes["default"].string.isRequired,
  subscriptionAmount: _propTypes["default"].string.isRequired,
  productCode: _propTypes["default"].string,
  email: _propTypes["default"].string,
  details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    title: _propTypes["default"].string.isRequired,
    data: _propTypes["default"].string.isRequired
  }))
};