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

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "934904541de6ceb44cf85d8171392787478cd084",
-  "tag": "v41.1.0",
-  "buildNumber": "15757"
+  "version": "4ddf21c1d1a8f7e1c6ea79d0628dc66321d77c3a",
+  "tag": "v41.2.0",
+  "buildNumber": "15786"
 }

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/index.js

@@ -58,3 +58,5 @@ 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,
+};

package/components/subscription-confirmation-with-payment-link.stories.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { SubscriptionConfirmationWithPaymentLink } from './subscription-confirmation-with-payment-link';
+import SubscriptionConfirmationWithPaymentLinkUtil from '../utils/subscription-confirmation-with-payment-link';
+
+// Initialize the utility after story renders
+const initializeUtil = () => {
+	const subscriptionConfirmation =
+		new SubscriptionConfirmationWithPaymentLinkUtil(document);
+	subscriptionConfirmation.handleCopyPaymentLink();
+};
+
+export default {
+	title: 'Subscription Confirmation With Payment Link',
+	component: SubscriptionConfirmationWithPaymentLink,
+	argTypes: {
+		body: { control: 'text' }, // Allows input of raw HTML in Storybook UI
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'A component that displays subscription confirmation with a copyable payment link.',
+			},
+		},
+	},
+};
+
+function handleButtonClick(event) {
+	const button = event.target.closest('button');
+	if (button) {
+		navigator.clipboard
+			.readText()
+			.then((copiedText) => action('copied')(copiedText));
+	}
+}
+
+// HOC to add utility initialization for stories with payment link
+const withUtilInit = (Story, args) => {
+	if (args.paymentLink) {
+		setTimeout(initializeUtil, 0);
+	}
+	return (
+		<div className="ncf" onClick={handleButtonClick}>
+			<Story {...args} />
+		</div>
+	);
+};
+
+export const WithPaymentLink = (args) =>
+	withUtilInit(SubscriptionConfirmationWithPaymentLink, args);
+
+WithPaymentLink.args = {
+	header: 'The subscription is now active',
+	body: 'To remain active, the customer must pay using the Zuora Payment link below <strong>within the next 24 hours</strong>.',
+	paymentLink: 'https://knowledgecenter.zuora.com/Zuora_Payments/Process',
+};
+
+export const WithoutPaymentLink = (args) =>
+	withUtilInit(SubscriptionConfirmationWithPaymentLink, args);
+
+WithoutPaymentLink.args = {
+	header: 'The subscription is now active',
+	body: 'Your subscription has been activated successfully.',
+};

package/dist/index.js

@@ -309,6 +309,12 @@ Object.defineProperty(exports, "Position", {
     return _position.Position;
   }
 });
+Object.defineProperty(exports, "ProceedWithPaymentLink", {
+  enumerable: true,
+  get: function get() {
+    return _proceedWithPaymentLink.ProceedWithPaymentLink;
+  }
+});
 Object.defineProperty(exports, "ProgressIndicator", {
   enumerable: true,
   get: function get() {
@@ -345,6 +351,12 @@ Object.defineProperty(exports, "Submit", {
     return _submit.Submit;
   }
 });
+Object.defineProperty(exports, "SubscriptionConfirmationWithPaymentLink", {
+  enumerable: true,
+  get: function get() {
+    return _subscriptionConfirmationWithPaymentLink.SubscriptionConfirmationWithPaymentLink;
+  }
+});
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function get() {
@@ -422,4 +434,6 @@ var _graduationDate = require("./graduation-date");
 var _googleSignIn = require("./google-sign-in");
 var _textInput = require("./text-input");
 var _deferredBillingTerms = require("./deferred-billing-terms");
-var _yearOfBirth = require("./year-of-birth");
+var _yearOfBirth = require("./year-of-birth");
+var _proceedWithPaymentLink = require("./proceed-with-payment-link");
+var _subscriptionConfirmationWithPaymentLink = require("./subscription-confirmation-with-payment-link");

package/dist/payment-type.jsx

@@ -52,7 +52,9 @@ function PaymentType(_ref) {
     _ref$isSingleTerm = _ref.isSingleTerm,
     isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
     _ref$isSingleTermChec = _ref.isSingleTermChecked,
-    isSingleTermChecked = _ref$isSingleTermChec === void 0 ? false : _ref$isSingleTermChec;
+    isSingleTermChecked = _ref$isSingleTermChec === void 0 ? false : _ref$isSingleTermChec,
+    _ref$enableZuoraPayme = _ref.enableZuoraPaymentLink,
+    enableZuoraPaymentLink = _ref$enableZuoraPayme === void 0 ? false : _ref$enableZuoraPayme;
   var createSecuritySeal = function createSecuritySeal() {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "ncf__security-seal",
@@ -90,8 +92,13 @@ function PaymentType(_ref) {
     label: 'Bank Transfer',
     hide: !enableBankTransfer
   };
+  var zuoraPaymentLink = {
+    id: 'zuorapaymentlink',
+    label: 'Zuora Payment',
+    hide: !enableZuoraPaymentLink
+  };
   var createPaymentTypes = function createPaymentTypes() {
-    var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer].filter(Boolean);
+    var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer, zuoraPaymentLink].filter(Boolean);
     return paymentTypes.map(function (type) {
       if (type.id === undefined) {
         return type;
@@ -207,5 +214,6 @@ PaymentType.propTypes = {
   inputId: _propTypes["default"].string,
   value: _propTypes["default"].string,
   isSingleTerm: _propTypes["default"].bool,
-  isSingleTermChecked: _propTypes["default"].bool
+  isSingleTermChecked: _propTypes["default"].bool,
+  enableZuoraPaymentLink: _propTypes["default"].bool
 };

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProceedWithPaymentLink = ProceedWithPaymentLink;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function ProceedWithPaymentLink(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'proceedWithPaymentLink' : _ref$id,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "By proceeding now, you're:" : _ref$title,
+    description = _ref.description,
+    _ref$listItems = _ref.listItems,
+    listItems = _ref$listItems === void 0 ? [] : _ref$listItems,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? /*#__PURE__*/_react["default"].createElement("button", {
+      className: "proceed-with-payment-link__button"
+    }, "Proceed") : _ref$children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: id,
+    className: "proceed-with-payment-link o-forms-field"
+  }, title && /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "proceed-with-payment-link__heading"
+  }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "proceed-with-payment-link__description"
+  }, description), listItems.length > 0 && /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "proceed-with-payment-link__list"
+  }, listItems.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: index,
+      className: "proceed-with-payment-link__list-item"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "proceed-with-payment-link__icon",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "proceed-with-payment-link__list-item-text"
+    }, item));
+  })), children && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "proceed-with-payment-link__actions"
+  }, children));
+}
+ProceedWithPaymentLink.propTypes = {
+  id: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  description: _propTypes["default"].string,
+  listItems: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  children: _propTypes["default"].node
+};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubscriptionConfirmationWithPaymentLink = SubscriptionConfirmationWithPaymentLink;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function SubscriptionConfirmationWithPaymentLink(_ref) {
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'subscriptionConfirmationWithPaymentLink' : _ref$id,
+    _ref$header = _ref.header,
+    header = _ref$header === void 0 ? 'The subscription is now active' : _ref$header,
+    body = _ref.body,
+    paymentLink = _ref.paymentLink;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: id,
+    className: "subscription-active-with-payment-link"
+  }, header && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "subscription-active-with-payment-link__header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "subscription-active-with-payment-link__icon-container"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "subscription-active-with-payment-link__icon"
+  })), /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "subscription-active-with-payment-link__title"
+  }, header)), body && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "subscription-active-with-payment-link__description",
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  }), paymentLink && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "subscription-active-with-payment-link__label"
+  }, "Zuora Payment Link"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "subscription-active-with-payment-link__payment-box"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    value: paymentLink,
+    readOnly: true,
+    className: "subscription-active-with-payment-link__input"
+  }), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "subscription-active-with-payment-link__button"
+  }, "Copy"))));
+}
+SubscriptionConfirmationWithPaymentLink.propTypes = {
+  id: _propTypes["default"].string,
+  header: _propTypes["default"].string,
+  body: _propTypes["default"].string,
+  paymentLink: _propTypes["default"].string
+};

package/main.scss

@@ -23,6 +23,8 @@
 @import './styles/google-sign-in';
 @import './styles/confirmation';
 @import './styles/ft-edit-registration-confirmation';
+@import './styles/subscription-confirmation-with-payment-link';
+@import './styles/proceed-with-payment-link';
 
 @include oTypography();
 @include oFonts();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "41.1.0",
+  "version": "41.2.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {

package/styles/proceed-with-payment-link.scss

@@ -0,0 +1,69 @@
+@import '@financial-times/o-icons/main';
+
+.proceed-with-payment-link {
+  font-family: oFontsGetFontFamilyWithFallbacks(MetricWeb);
+  font-weight: 400;
+  background: oColorsByName('ft-grey');
+  padding: 24px;
+  color: oColorsByName('white');
+  display: flex;
+  flex-direction: column;
+
+  @include oGridRespondTo($from: M) {
+    padding: oSpacingByName('s6') oSpacingByName('s6') oSpacingByName('s8');
+  }
+}
+
+.proceed-with-payment-link__heading {
+  margin: 0px;
+  margin-bottom: oSpacingByName('s1');
+  font-weight: 400;
+}
+
+.proceed-with-payment-link__description {
+  color: oColorsByName('white');
+  margin-top: 0;
+  padding-top: 0;
+  margin-bottom: 0;
+}
+
+.proceed-with-payment-link__list {
+  list-style: none;
+  padding: 0;
+}
+
+.proceed-with-payment-link__list-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: oSpacingByName('s2');
+  flex-wrap: nowrap;
+}
+
+.proceed-with-payment-link__icon {
+  @include oIconsContent($icon-name: 'tick', $color: oColorsByName('ft-pink'), $size: 26);
+  margin-right: oSpacingByName('s3');
+  flex-shrink: 0;
+  min-width: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.proceed-with-payment-link__list-item-text {
+  flex-grow: 1;
+}
+
+.proceed-with-payment-link__actions {
+  margin-top: oSpacingByName('s2');
+
+  button {
+    @include oButtonsContent($opts: ('type': 'primary', 'theme': ('color': 'ft-pink')));
+    color: oColorsByName('ft-grey');
+    padding: oSpacingByName('s3') oSpacingByName('s6');
+    width: 100%;
+  }
+
+  button:hover {
+    background-color: oColorsMix('ft-pink', 'black', 80);
+  }
+}

package/styles/subscription-confirmation-with-payment-link.scss

@@ -0,0 +1,86 @@
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-buttons/main';
+
+.subscription-active-with-payment-link {
+  background: oColorsByName('ft-grey');
+  padding: oSpacingByName('s6') oSpacingByName('s6') oSpacingByName('s8');
+  color: oColorsByName('white');
+  display: flex;
+  flex-direction: column;
+}
+
+.subscription-active-with-payment-link--responsive {
+  @include oGridRespondTo($from: M) {
+    padding: oSpacingByName('s6') 50px oSpacingByName('s8');
+  }
+}
+
+.subscription-active-with-payment-link__header {
+  display: flex;
+  align-items: center;
+}
+
+.subscription-active-with-payment-link__icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background-color: oColorsByName('ft-pink');
+  border-radius: 50%;
+  margin-right: oSpacingByName('s4');
+}
+
+.subscription-active-with-payment-link__icon {
+  @include oIconsContent($icon-name: 'tick', $color: oColorsByName('ft-grey'), $size: 34);
+}
+
+.subscription-active-with-payment-link__title {
+  margin: 0;
+  @include oTypographySans($scale: 4, $weight: 'regular');
+}
+
+.subscription-active-with-payment-link__description {
+  @include oTypographySans($scale: 1);
+  color: oColorsByName('white');
+}
+
+.subscription-active-with-payment-link__label {
+  @include oTypographySans($scale: 1);
+  color: oColorsByName('ft-pink');
+  margin-bottom: oSpacingByName('s2');
+}
+
+.subscription-active-with-payment-link__payment-box {
+  display: flex;
+  align-items: center;
+  background: oColorsByName('ft-grey');
+  overflow: hidden;
+  gap: oSpacingByName('s2');
+  width: 100%;
+}
+
+.subscription-active-with-payment-link__input {
+  flex-grow: 1;
+  background: oColorsByName('white-60');
+  border: none;
+  box-sizing: border-box;
+  color: oColorsByName('black-60');
+  @include oTypographySans($scale: 1);
+  padding: 10px oSpacingByName('s4');
+  text-overflow: ellipsis;
+  height: 40px;
+}
+
+.subscription-active-with-payment-link__button {
+  @include oTypographySans($scale: 1);
+  @include oButtonsContent($opts: ('type': 'primary', 'theme': ('color': 'ft-pink')));
+  color: oColorsByName('ft-grey');
+  transition: background 0.2s ease-in-out;
+  padding: 10px 20px;
+  height: 40px;
+}
+
+.subscription-active-with-payment-link__button--copied {
+  background-color: oColorsMix($color: 'ft-pink', $background: 'white', $percentage: 80%);
+}

package/utils/payment-type.js

@@ -147,6 +147,10 @@ class PaymentType {
 	static get BANKTRANSFER() {
 		return 'banktransfer';
 	}
+
+	static get ZUORAPAYMENTLINK() {
+		return 'zuorapaymentlink';
+	}
 }
 
 module.exports = PaymentType;

package/utils/submit.js

@@ -58,6 +58,20 @@ class Submit {
 	isDisabled() {
 		return !!this.$submit.disabled;
 	}
+
+	/**
+	 * Hides the submit button
+	 */
+	hide() {
+		this.$submit.classList.add('ncf__hidden');
+	}
+
+	/**
+	 * Shows the submit button
+	 */
+	show() {
+		this.$submit.classList.remove('ncf__hidden');
+	}
 }
 
 module.exports = Submit;

package/utils/subscription-confirmation-with-payment-link.js

@@ -0,0 +1,78 @@
+/**
+ * Utility for the subscription confirmation with payment link component
+ * @example
+ * const subscriptionConfirmation = new SubscriptionConfirmationWithPaymentLink(document);
+ * subscriptionConfirmation.handleCopyPaymentLink((copiedText) => {
+ *   // Handle copy event
+ * });
+ */
+class SubscriptionConfirmationWithPaymentLink {
+	static CONTAINER_QUERY_SELECTOR = '.subscription-active-with-payment-link';
+
+	/**
+	 * Initialize the SubscriptionConfirmationWithPaymentLink utility
+	 * @param {Element} element Usually the window.document
+	 * @throws If the document not passed
+	 * @throws When the component element not found
+	 */
+	constructor(element) {
+		if (!element) {
+			throw new Error('Please supply a DOM element');
+		}
+
+		this.$container = element.querySelector(
+			'.subscription-active-with-payment-link'
+		);
+
+		if (!this.$container) {
+			throw new Error(
+				'Please include the subscription confirmation with payment link component on the page'
+			);
+		}
+
+		this.$button = this.$container.querySelector(
+			'.subscription-active-with-payment-link__button'
+		);
+		this.$input = this.$container.querySelector(
+			'.subscription-active-with-payment-link__input'
+		);
+	}
+
+	/**
+	 * Get the payment link value
+	 * @return {String}
+	 */
+	getValue() {
+		return this.$input ? this.$input.value : '';
+	}
+
+	/**
+	 * Handle copying the payment link
+	 * @param {Function} callback Called after successful copy
+	 */
+	handleCopyPaymentLink(callback) {
+		if (!this.$button || !this.$input) return;
+
+		this.$button.addEventListener('click', () => {
+			navigator.clipboard.writeText(this.getValue()).then(() => {
+				this.$button.textContent = 'Copied';
+				this.$button.classList.add(
+					'subscription-active-with-payment-link__button--copied'
+				);
+
+				setTimeout(() => {
+					this.$button.textContent = 'Copy';
+					this.$button.classList.remove(
+						'subscription-active-with-payment-link__button--copied'
+					);
+				}, 2000);
+
+				if (callback) {
+					callback(this.getValue());
+				}
+			});
+		});
+	}
+}
+
+module.exports = SubscriptionConfirmationWithPaymentLink;

package/utils/subscription-confirmation-with-payment-link.spec.js

@@ -0,0 +1,117 @@
+const SubscriptionConfirmationWithPaymentLink = require('./subscription-confirmation-with-payment-link');
+
+describe('SubscriptionConfirmationWithPaymentLink', () => {
+	let subscriptionConfirmation;
+	let documentStub;
+	let containerStub;
+	let buttonStub;
+	let inputStub;
+	let clipboardStub;
+
+	beforeEach(() => {
+		buttonStub = {
+			addEventListener: jest.fn(),
+			classList: {
+				add: jest.fn(),
+				remove: jest.fn(),
+			},
+		};
+		inputStub = { value: 'test-link' };
+		containerStub = {
+			querySelector: jest.fn((selector) => {
+				if (selector.includes('button')) return buttonStub;
+				if (selector.includes('input')) return inputStub;
+				return null;
+			}),
+		};
+		documentStub = {
+			querySelector: jest.fn(() => containerStub),
+		};
+		clipboardStub = Promise.resolve();
+		global.navigator.clipboard = { writeText: jest.fn(() => clipboardStub) };
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+		jest.useRealTimers();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if nothing passed', () => {
+			expect(() => {
+				new SubscriptionConfirmationWithPaymentLink();
+			}).toThrow();
+		});
+
+		it('throws an error if container not present', () => {
+			documentStub.querySelector.mockReturnValue(false);
+			expect(() => {
+				new SubscriptionConfirmationWithPaymentLink(documentStub);
+			}).toThrow();
+		});
+	});
+
+	describe('handleCopyPaymentLink', () => {
+		beforeEach(() => {
+			documentStub.querySelector.mockReturnValue(containerStub);
+			subscriptionConfirmation = new SubscriptionConfirmationWithPaymentLink(
+				documentStub
+			);
+			jest.useFakeTimers();
+		});
+
+		it('adds click event listener to button', () => {
+			subscriptionConfirmation.handleCopyPaymentLink();
+			expect(buttonStub.addEventListener).toHaveBeenCalledWith(
+				'click',
+				expect.any(Function)
+			);
+		});
+
+		it('copies input value to clipboard on click', async () => {
+			const callback = jest.fn();
+			subscriptionConfirmation.handleCopyPaymentLink(callback);
+
+			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
+			await clickHandler();
+
+			expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test-link');
+		});
+
+		it('updates button text and style after copy', async () => {
+			subscriptionConfirmation.handleCopyPaymentLink();
+
+			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
+			await clickHandler();
+
+			expect(buttonStub.textContent).toBe('Copied');
+			expect(buttonStub.classList.add).toHaveBeenCalledWith(
+				'subscription-active-with-payment-link__button--copied'
+			);
+		});
+
+		it('resets button after timeout', async () => {
+			subscriptionConfirmation.handleCopyPaymentLink();
+
+			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
+			await clickHandler();
+
+			jest.advanceTimersByTime(2000);
+
+			expect(buttonStub.textContent).toBe('Copy');
+			expect(buttonStub.classList.remove).toHaveBeenCalledWith(
+				'subscription-active-with-payment-link__button--copied'
+			);
+		});
+
+		it('calls callback with copied value', async () => {
+			const callback = jest.fn();
+			subscriptionConfirmation.handleCopyPaymentLink(callback);
+
+			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
+			await clickHandler();
+
+			expect(callback).toHaveBeenCalledWith('test-link');
+		});
+	});
+});