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

package/.toolkitrc.yml

@@ -22,5 +22,5 @@ options:
   "@dotcom-tool-kit/circleci":
     nodeVersion: 18.17-browsers
   "@dotcom-tool-kit/babel":
-    files: components/*.jsx
+    files: "components/{*.jsx,index.js}"
     outputPath: dist

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "81b3434a27e006b0ff33f70da6550b649148702c",
-  "tag": "v31.0.3"
+  "version": "2702f16331ac10763bc88432e6886438ace7d5ba",
+  "tag": "v31.2.0"
 }

package/components/__snapshots__/confirmation.spec.js.snap

@@ -111,6 +111,117 @@ exports[`Confirmation renders appropriately if is trial 1`] = `
 </div>
 `;
 
+exports[`Confirmation renders appropriately if newsletterScheduleExplainer is not supplied 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <p class="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+      You are now subscribed to:
+    </p>
+    <h1 class="ncf__header ncf__header--confirmation">
+      Offer text
+    </h1>
+  </div>
+  <p class="ncf__paragraph">
+    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
+  </p>
+  <p class="ncf__paragraph">
+    Here’s a summary of your Offer text subscription:
+  </p>
+  <div class="ncf__headed-paragraph">
+    <h3 class="ncf__header">
+      Something not right?
+    </h3>
+    <p class="ncf__paragraph">
+      Go to your
+      <a class="ncf__link ncf__link--external"
+         href="https://www.ft.com/myaccount/personal-details"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="yourAccount"
+      >
+        account settings
+      </a>
+      to view or edit your account. If you need to get in touch call us on
+      <a href="tel:+442077556248"
+         class="ncf__link ncf__link--external"
+      >
+        +44 (0) 207 755 6248
+      </a>
+      . Or contact us for additional support.
+    </p>
+  </div>
+  <p class="ncf__paragraph">
+    We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. See our
+    <a class="ncf__link ncf__link--external"
+       href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+       target="_top"
+       rel="noopener"
+    >
+      Terms &amp; Conditions
+    </a>
+    for details on how to cancel.
+  </p>
+</div>
+`;
+
+exports[`Confirmation renders appropriately if newsletterScheduleExplainer is supplied 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <p class="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+      You are now subscribed to:
+    </p>
+    <h1 class="ncf__header ncf__header--confirmation">
+      Offer text
+    </h1>
+  </div>
+  <p class="ncf__paragraph">
+    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
+  </p>
+  You will receive your first newsletter on the next weekday to foo@bar.com
+  <p class="ncf__paragraph">
+    Here’s a summary of your Offer text subscription:
+  </p>
+  <div class="ncf__headed-paragraph">
+    <h3 class="ncf__header">
+      Something not right?
+    </h3>
+    <p class="ncf__paragraph">
+      Go to your
+      <a class="ncf__link ncf__link--external"
+         href="https://www.ft.com/myaccount/personal-details"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="yourAccount"
+      >
+        account settings
+      </a>
+      to view or edit your account. If you need to get in touch call us on
+      <a href="tel:+442077556248"
+         class="ncf__link ncf__link--external"
+      >
+        +44 (0) 207 755 6248
+      </a>
+      . Or contact us for additional support.
+    </p>
+  </div>
+  <p class="ncf__paragraph">
+    We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. See our
+    <a class="ncf__link ncf__link--external"
+       href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+       target="_top"
+       rel="noopener"
+    >
+      Terms &amp; Conditions
+    </a>
+    for details on how to cancel.
+  </p>
+</div>
+`;
+
 exports[`Confirmation renders appropriately if nextActionBottom is not supplied 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">

package/components/confirmation.jsx

@@ -14,6 +14,7 @@ export function Confirmation({
 	directDebitMandateUrl = null,
 	nextActionTop = null,
 	nextActionBottom = null,
+	newsletterScheduleExplainer = null,
 }) {
 	const containerDivProps = {
 		className: 'ncf ncf__wrapper',
@@ -83,6 +84,9 @@ export function Confirmation({
 			) : (
 				''
 			)}
+
+			{newsletterScheduleExplainer}
+
 			<p className="ncf__paragraph">
 				Here’s a summary of your {offer} subscription:
 			</p>
@@ -146,4 +150,5 @@ Confirmation.propTypes = {
 	directDebitMandateUrl: PropTypes.string,
 	nextActionTop: PropTypes.node,
 	nextActionBottom: PropTypes.node,
+	newsletterScheduleExplainer: PropTypes.node,
 };

package/components/confirmation.spec.js

@@ -6,6 +6,9 @@ expect.extend(expectToRenderCorrectly);
 const OFFER_TEXT = 'Offer text';
 const nextActionTop = ['i might take you to tailor your experience'];
 const nextActionBottom = ['i might take you to the ePaper'];
+const newsletterScheduleExplainer = [
+	'You will receive your first newsletter on the next weekday to foo@bar.com',
+];
 
 describe('Confirmation', () => {
 	it('renders with default props', () => {
@@ -93,4 +96,16 @@ describe('Confirmation', () => {
 
 		expect(Confirmation).toRenderCorrectly(props);
 	});
+
+	it('renders appropriately if newsletterScheduleExplainer is supplied', () => {
+		const props = { offer: OFFER_TEXT, newsletterScheduleExplainer };
+
+		expect(Confirmation).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if newsletterScheduleExplainer is not supplied', () => {
+		const props = { offer: OFFER_TEXT };
+
+		expect(Confirmation).toRenderCorrectly(props);
+	});
 });

package/components/confirmation.stories.js

@@ -38,6 +38,13 @@ const nextActionBottom = (
 	</div>
 );
 
+const newsletterScheduleExplainer = (
+	<p className="ncf__paragraph">
+		You will receive your first newsletter on the next weekday to{' '}
+		<strong>foo@bar.com</strong>.
+	</p>
+);
+
 export const Basic = (args) => <Confirmation {...args} />;
 Basic.args = {
 	offer: 'Premium Digital',
@@ -55,4 +62,5 @@ Basic.args = {
 	],
 	nextActionTop,
 	nextActionBottom,
+	newsletterScheduleExplainer,
 };

package/dist/confirmation.jsx

@@ -29,7 +29,9 @@ function Confirmation(_ref) {
     _ref$nextActionTop = _ref.nextActionTop,
     nextActionTop = _ref$nextActionTop === void 0 ? null : _ref$nextActionTop,
     _ref$nextActionBottom = _ref.nextActionBottom,
-    nextActionBottom = _ref$nextActionBottom === void 0 ? null : _ref$nextActionBottom;
+    nextActionBottom = _ref$nextActionBottom === void 0 ? null : _ref$nextActionBottom,
+    _ref$newsletterSchedu = _ref.newsletterScheduleExplainer,
+    newsletterScheduleExplainer = _ref$newsletterSchedu === void 0 ? null : _ref$newsletterSchedu;
   var containerDivProps = _objectSpread({
     className: 'ncf ncf__wrapper'
   }, isTrial && {
@@ -74,7 +76,7 @@ function Confirmation(_ref) {
     className: "ncf__paragraph"
   }, b2cPartnershipCopy[0], /*#__PURE__*/_react["default"].createElement("span", {
     className: "ncf__legend"
-  }, " ".concat(email, ". ")), b2cPartnershipCopy[1]) : '', /*#__PURE__*/_react["default"].createElement("p", {
+  }, " ".concat(email, ". ")), b2cPartnershipCopy[1]) : '', newsletterScheduleExplainer, /*#__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"
@@ -113,5 +115,6 @@ Confirmation.propTypes = {
   })),
   directDebitMandateUrl: _propTypes["default"].string,
   nextActionTop: _propTypes["default"].node,
-  nextActionBottom: _propTypes["default"].node
+  nextActionBottom: _propTypes["default"].node,
+  newsletterScheduleExplainer: _propTypes["default"].node
 };