@financial-times/n-conversion-forms 41.0.5 → 41.2.0

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "3969dbd0a7267428b395ba85de43e9b86d7b8066",
-  "tag": "v41.0.5",
-  "buildNumber": "15740"
+  "version": "4ddf21c1d1a8f7e1c6ea79d0628dc66321d77c3a",
+  "tag": "v41.2.0",
+  "buildNumber": "15786"
 }

package/README.md

@@ -345,7 +345,7 @@ You can add some custom validation functionality as follows:
 
 ```js
 validation.addCustomValidation({
-	errorMessage: 'Custom error message here.',
+	errorMessage: 'Custom error message here.',  // can be a string or a function return that returns a string
 	field: domElementToValidate,
 	validator: () => {
 		// Custom validation code here. *Must* return truthy or falsey.
@@ -355,6 +355,20 @@ validation.addCustomValidation({
 
 If the validation fails, the field will look like it usually does when validation fails with your specified message displayed underneath.
 
+### YearOfBirth
+
+The Year of Birth utility provides a more friendly way to get the value in the input field and add event listener on blur.
+
+```js
+const yearOfBirth = new YearOfBirth(document));
+// Get the value in the input field
+const yearOfBirthInputValue = yearOfBirth.getYearOfBirth();
+// add event listener to the input field on blur
+yearOfBirth.handleYearOfBirthBlur(() => {
+	doSomething();
+});
+```
+
 ### Zuora
 
 The Zuora utility aims to wrap the Zuora client side library to make it more user friendly.

package/components/__snapshots__/payment-type.spec.js.snap

@@ -82,6 +82,21 @@ exports[`PaymentType can initialise with the loader visible 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -173,6 +188,21 @@ exports[`PaymentType render with default props 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -264,6 +294,21 @@ exports[`PaymentType render with enableApplepay 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -355,6 +400,21 @@ exports[`PaymentType render with enableBankTransfer 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -446,6 +506,21 @@ exports[`PaymentType render with enableCreditcard 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -556,6 +631,21 @@ exports[`PaymentType render with enableDirectdebit 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -705,6 +795,21 @@ exports[`PaymentType render with enablePaypal 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -796,6 +901,21 @@ exports[`PaymentType render with isSingleTerm 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -900,6 +1020,21 @@ exports[`PaymentType render with isSingleTermChecked 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type
@@ -1005,6 +1140,21 @@ exports[`PaymentType render with value 1`] = `
         </span>
       </label>
     </div>
+    <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--zuorapaymentlink ncf__hidden">
+      <label for="zuorapaymentlink">
+        <input type="radio"
+               name="paymentType"
+               value="zuorapaymentlink"
+               id="zuorapaymentlink"
+               aria-label="Zuora Payment"
+        >
+        <span class="o-forms-input__label"
+              aria-hidden="true"
+        >
+          Zuora Payment
+        </span>
+      </label>
+    </div>
   </div>
   <div class="o-forms-input__error">
     Please enter a valid payment type

package/components/__snapshots__/year-of-birth.spec.js.snap

@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`YearOfBirth render a year of birth input with default value 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value="2001"
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth render a year of birth input with disabled field 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           disabled
+           value="2001"
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with custom prompt 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+      This helps us ensure people of all ages find value in the FT
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with default error message 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders a year of birth input with default params 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="true"
+           required
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;
+
+exports[`YearOfBirth renders an optional year of birth input 1`] = `
+<label id="yearOfBirthField"
+       for="yearOfBirth"
+       class="o-forms-field ncf__validation-error"
+       data-validate="required,number"
+>
+  <span class="o-forms-title o-forms-field--optional">
+    <span class="o-forms-title__main">
+      Year of birth
+    </span>
+    <span class="o-forms-title__prompt">
+    </span>
+  </span>
+  <span class="o-forms-input o-forms-input--text">
+    <input type="number"
+           id="yearOfBirth"
+           name="yearOfBirth"
+           placeholder="YYYY"
+           autocomplete="bday-year"
+           minlength="4"
+           maxlength="4"
+           data-trackable="year-of-birth"
+           aria-required="false"
+           value
+    >
+    <span class="o-forms-input__error">
+      Please enter a valid year of birth
+    </span>
+  </span>
+</label>
+`;

package/components/index.js

@@ -57,3 +57,6 @@ export { GraduationDate } from './graduation-date';
 export { GoogleSignIn } from './google-sign-in';
 export { TextInput } from './text-input';
 export { DeferredBillingTerms } from './deferred-billing-terms';
+export { YearOfBirth } from './year-of-birth';
+export { ProceedWithPaymentLink } from './proceed-with-payment-link';
+export { SubscriptionConfirmationWithPaymentLink } from './subscription-confirmation-with-payment-link';

package/components/payment-type.jsx

@@ -42,6 +42,7 @@ export function PaymentType({
 	value,
 	isSingleTerm = false,
 	isSingleTermChecked = false,
+	enableZuoraPaymentLink = false,
 }) {
 	const createSecuritySeal = () => {
 		return (
@@ -95,6 +96,11 @@ export function PaymentType({
 		hide: !enableBankTransfer,
 	};
 
+	const zuoraPaymentLink = {
+		id: 'zuorapaymentlink',
+		label: 'Zuora Payment',
+		hide: !enableZuoraPaymentLink,
+	};
 	const createPaymentTypes = () => {
 		const paymentTypes = [
 			paymentTypeCreditCard,
@@ -102,6 +108,7 @@ export function PaymentType({
 			paymentTypeDirectDebit,
 			paymentTypeApplePay,
 			paymentTypeBankTransfer,
+			zuoraPaymentLink,
 		].filter(Boolean);
 
 		return paymentTypes.map((type) => {
@@ -284,4 +291,5 @@ PaymentType.propTypes = {
 	value: PropTypes.string,
 	isSingleTerm: PropTypes.bool,
 	isSingleTermChecked: PropTypes.bool,
+	enableZuoraPaymentLink: PropTypes.bool,
 };

package/components/payment-type.stories.js

@@ -15,4 +15,5 @@ Basic.args = {
 	enablePaypal: true,
 	showPaypalCustomerCareMessage: true,
 	enableBankTransfer: true,
+	enableZuoraPaymentLink: true,
 };

package/components/proceed-with-payment-link.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function ProceedWithPaymentLink({
+	id = 'proceedWithPaymentLink',
+	title = `By proceeding now, you're:`,
+	description,
+	listItems = [],
+	children = (
+		<button className="proceed-with-payment-link__button">Proceed</button>
+	),
+}) {
+	return (
+		<div id={id} className="proceed-with-payment-link o-forms-field">
+			{title && <h2 className="proceed-with-payment-link__heading">{title}</h2>}
+			{description && (
+				<p className="proceed-with-payment-link__description">{description}</p>
+			)}
+			{listItems.length > 0 && (
+				<ul className="proceed-with-payment-link__list">
+					{listItems.map((item, index) => (
+						<li key={index} className="proceed-with-payment-link__list-item">
+							<span
+								className="proceed-with-payment-link__icon"
+								aria-hidden="true"
+							></span>
+							<span className="proceed-with-payment-link__list-item-text">
+								{item}
+							</span>
+						</li>
+					))}
+				</ul>
+			)}
+			{children && (
+				<div className="proceed-with-payment-link__actions">{children}</div>
+			)}
+		</div>
+	);
+}
+
+ProceedWithPaymentLink.propTypes = {
+	id: PropTypes.string,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	listItems: PropTypes.arrayOf(PropTypes.string),
+	children: PropTypes.node,
+};

package/components/proceed-with-payment-link.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ProceedWithPaymentLink } from './proceed-with-payment-link';
+
+export default {
+	title: 'Proceed With Payment Link',
+	component: ProceedWithPaymentLink,
+	argTypes: {
+		id: { control: 'text' },
+		title: { control: 'text' },
+		description: { control: 'text' },
+		listItems: { control: 'array' },
+	},
+};
+
+export const Basic = (args) => (
+	<ProceedWithPaymentLink {...args}>
+		<button className="proceed-with-payment-link__button">
+			{args.buttonText}
+		</button>
+	</ProceedWithPaymentLink>
+);
+
+Basic.args = {
+	id: 'payment-section',
+	title: `By proceeding now, you're:`,
+	listItems: [
+		'Activating the customer’s subscription',
+		'Creating a payment link for the customer to complete their payment on Zuora, which they must do within 24 hours',
+	],
+	buttonText: 'Proceed now',
+};

package/components/subscription-confirmation-with-payment-link.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function SubscriptionConfirmationWithPaymentLink({
+	id = 'subscriptionConfirmationWithPaymentLink',
+	header = 'The subscription is now active',
+	body,
+	paymentLink,
+}) {
+	return (
+		<div id={id} className="subscription-active-with-payment-link">
+			{/* Header */}
+			{header && (
+				<div className="subscription-active-with-payment-link__header">
+					<div className="subscription-active-with-payment-link__icon-container">
+						<span className="subscription-active-with-payment-link__icon"></span>
+					</div>
+					<h3 className="subscription-active-with-payment-link__title">
+						{header}
+					</h3>
+				</div>
+			)}
+
+			{/* Body */}
+			{body && (
+				<p
+					className="subscription-active-with-payment-link__description"
+					dangerouslySetInnerHTML={{ __html: body }}
+				/>
+			)}
+
+			{/* Payment Link Section */}
+			{paymentLink && (
+				<>
+					<label className="subscription-active-with-payment-link__label">
+						Zuora Payment Link
+					</label>
+					<div className="subscription-active-with-payment-link__payment-box">
+						<input
+							type="text"
+							value={paymentLink}
+							readOnly
+							className="subscription-active-with-payment-link__input"
+						/>
+						<button className="subscription-active-with-payment-link__button">
+							Copy
+						</button>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+SubscriptionConfirmationWithPaymentLink.propTypes = {
+	id: PropTypes.string,
+	header: PropTypes.string,
+	body: PropTypes.string,
+	paymentLink: PropTypes.string,
+};