@financial-times/n-conversion-forms 28.9.0 → 28.10.0

package/components/__snapshots__/accept-terms.spec.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
+exports[`AcceptTerms renders a component matching snapshot when withPrivacyPolicyTerms is true 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"
      data-validate="required,checked"
 >
-  <div class="auth-first-step-terms">
+  <div class="privacy-policy-terms">
     <span class="consent-text--top">
       For more information about how we use your data, please refer to our
       <a class="ncf__link--external"
@@ -58,70 +58,6 @@ exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
 </div>
 `;
 
-exports[`AcceptTerms renders appropriately if a isAuthFirstPayment 1`] = `
-<div id="acceptTermsField"
-     class="o-forms-field o-layout-typography ncf__validation-error"
-     data-validate="required,checked"
->
-  <ul class="o-typography-list ncf__accept-terms-list">
-  </ul>
-  <label class="o-forms-input o-forms-input--checkbox"
-         for="termsAcceptance"
-  >
-    <input type="checkbox"
-           id="termsAcceptance"
-           name="termsAcceptance"
-           value="true"
-           data-trackable="field-terms"
-           aria-required="true"
-           required
-    >
-    <span class="o-forms-input__label">
-      I agree to the above terms &amp; conditions.
-    </span>
-    <p class="o-forms-input__error">
-      Please accept our terms &amp; conditions
-    </p>
-  </label>
-</div>
-`;
-
-exports[`AcceptTerms renders appropriately if a registration 1`] = `
-<div id="acceptTermsField"
-     class="o-forms-field o-layout-typography ncf__validation-error"
-     data-validate="required,checked"
-     data-trackable="register-up-terms"
->
-  <label class="o-forms-input o-forms-input--checkbox"
-         for="termsAcceptance"
-  >
-    <input type="checkbox"
-           id="termsAcceptance"
-           name="termsAcceptance"
-           value="true"
-           data-trackable="field-terms"
-           aria-required="true"
-           required
-    >
-    <span class="o-forms-input__label terms-register">
-      I confirm I am 16 years or older and have read and agree to the
-      <a class="ncf__link--external"
-         href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-         target="_blank"
-         rel="noopener noreferrer"
-         data-trackable="terms-and-conditions"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </span>
-    <p class="o-forms-input__error">
-      Please accept our terms &amp; conditions
-    </p>
-  </label>
-</div>
-`;
-
 exports[`AcceptTerms renders appropriately if a signup 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"
@@ -196,85 +132,6 @@ exports[`AcceptTerms renders appropriately if a signup 1`] = `
 </div>
 `;
 
-exports[`AcceptTerms renders appropriately if a signup and has special terms 1`] = `
-<div id="acceptTermsField"
-     class="o-forms-field o-layout-typography ncf__validation-error"
-     data-validate="required,checked"
-     data-trackable="sign-up-terms"
->
-  <ul class="o-typography-list ncf__accept-terms-list">
-    <li>
-      <span class="terms-default">
-        I confirm I am 16 years or older and have read and agree to the
-        <a class="ncf__link--external"
-           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-           target="_blank"
-           rel="noopener noreferrer"
-           data-trackable="terms-and-conditions"
-        >
-          Terms &amp; Conditions
-        </a>
-        .
-      </span>
-    </li>
-    <li>
-      <span class="terms-signup">
-        I give consent for my chosen payment method to be charged automatically at the end of each subscription term until I cancel it by contacting
-        <a class="ncf__link--external"
-           href="https://help.ft.com/help/contact-us/"
-           target="_blank"
-           rel="noopener noreferrer"
-        >
-          customer care through chat, phone or email
-        </a>
-        .
-      </span>
-    </li>
-    <li>
-      <span class="terms-signup">
-        By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.
-      </span>
-    </li>
-    <li>
-      <span class="terms-signup">
-        Find out more about our cancellation policy in our
-        <a class="ncf__link--external"
-           href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-           target="_blank"
-           rel="noopener noreferrer"
-        >
-          Terms &amp; Conditions
-        </a>
-        .
-      </span>
-    </li>
-    <li>
-      <span class="terms-special">
-        Special terms text
-      </span>
-    </li>
-  </ul>
-  <label class="o-forms-input o-forms-input--checkbox"
-         for="termsAcceptance"
-  >
-    <input type="checkbox"
-           id="termsAcceptance"
-           name="termsAcceptance"
-           value="true"
-           data-trackable="field-terms"
-           aria-required="true"
-           required
-    >
-    <span class="o-forms-input__label">
-      I agree to the above terms &amp; conditions.
-    </span>
-    <p class="o-forms-input__error">
-      Please accept our terms &amp; conditions
-    </p>
-  </label>
-</div>
-`;
-
 exports[`AcceptTerms renders appropriately if a signup for the print product 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"

package/components/accept-terms.jsx

@@ -6,11 +6,9 @@ const DEFAULT_AGE_RESTRICTION = '16';
 const DEFAULT_PRIVACY_POLICIES_POSITION = 'top';
 
 export function AcceptTerms({
-	isAuthFirstAccount = false,
-	isAuthFirstPayment = false,
+	withPrivacyPolicyTerms = false,
 	hasError = false,
 	isSignup = false,
-	isRegister = false,
 	isChecked = false,
 	isB2b = false,
 	isB2cPartnership = false,
@@ -21,7 +19,6 @@ export function AcceptTerms({
 	isTransition = false,
 	transitionType = null,
 	isPrintProduct = false,
-	specialTerms = null,
 	isSingleTerm = false,
 	isDeferredBilling = false,
 	hideConfirmTermsAndConditions = false,
@@ -33,7 +30,6 @@ export function AcceptTerms({
 		className: 'o-forms-field o-layout-typography ncf__validation-error',
 		'data-validate': 'required,checked',
 		...(isSignup && { 'data-trackable': 'sign-up-terms' }),
-		...(isRegister && { 'data-trackable': 'register-up-terms' }),
 	};
 
 	const labelClassName = classNames([
@@ -55,8 +51,8 @@ export function AcceptTerms({
 		...(isChecked && { defaultChecked: true }),
 	};
 
-	const authFirstStepTerms = (
-		<div className="auth-first-step-terms">
+	const privacyPolicyTerms = (
+		<div className="privacy-policy-terms">
 			<span className={`consent-text--${privacyPoliciesPosition}`}>
 				For more information about how we use your data, please refer to our{' '}
 				<a
@@ -106,29 +102,6 @@ export function AcceptTerms({
 		</div>
 	);
 
-	const registerTerms = (
-		<label className={labelClassName} htmlFor="termsAcceptance">
-			<input {...inputProps} />
-			<span className="o-forms-input__label terms-register">
-				I confirm I am {ageRestriction} years or older and have read and agree
-				to the{' '}
-				<a
-					className="ncf__link--external"
-					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-					target={isEmbedded ? '_top' : '_blank'}
-					rel="noopener noreferrer"
-					data-trackable="terms-and-conditions"
-				>
-					Terms &amp; Conditions
-				</a>
-				.
-			</span>
-			<p className="o-forms-input__error">
-				Please accept our terms &amp; conditions
-			</p>
-		</label>
-	);
-
 	const b2bTerms = isB2b ? (
 		<li>
 			<span className="terms-b2b">
@@ -324,12 +297,6 @@ export function AcceptTerms({
 					</li>
 				</>
 			)}
-
-			{specialTerms && (
-				<li>
-					<span className="terms-special">{specialTerms}</span>
-				</li>
-			)}
 		</>
 	);
 
@@ -369,14 +336,12 @@ export function AcceptTerms({
 		<div {...divProps}>
 			{isB2cPartnership ? (
 				b2cPartnershipTerms
-			) : isRegister ? (
-				registerTerms
-			) : isAuthFirstAccount ? (
-				authFirstStepTerms
+			) : withPrivacyPolicyTerms ? (
+				privacyPolicyTerms
 			) : (
 				<>
 					<ul className="o-typography-list ncf__accept-terms-list">
-						{!isAuthFirstPayment && b2bTerms}
+						{b2bTerms}
 						{corpSignupTerms}
 						{transitionTerms}
 						{signupTerms}
@@ -398,9 +363,9 @@ export function AcceptTerms({
 }
 
 AcceptTerms.propTypes = {
+	withPrivacyPolicyTerms: PropTypes.bool,
 	hasError: PropTypes.bool,
 	isSignup: PropTypes.bool,
-	isRegister: PropTypes.bool,
 	isChecked: PropTypes.bool,
 	isB2b: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
@@ -411,7 +376,6 @@ AcceptTerms.propTypes = {
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,
 	isPrintProduct: PropTypes.bool,
-	specialTerms: PropTypes.string,
 	isSingleTerm: PropTypes.bool,
 	isDeferredBilling: PropTypes.bool,
 	hideConfirmTermsAndConditions: PropTypes.bool,

package/components/accept-terms.spec.js

@@ -16,14 +16,8 @@ describe('AcceptTerms', () => {
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
 
-	it('renders appropriately if a isAuthFirstAccount', () => {
-		const props = { isAuthFirstAccount: true };
-
-		expect(AcceptTerms).toRenderCorrectly(props);
-	});
-
-	it('renders appropriately if a isAuthFirstPayment', () => {
-		const props = { isAuthFirstPayment: true };
+	it('renders a component matching snapshot when withPrivacyPolicyTerms is true', () => {
+		const props = { withPrivacyPolicyTerms: true };
 
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
@@ -70,21 +64,6 @@ describe('AcceptTerms', () => {
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
 
-	it('renders appropriately if a signup and has special terms', () => {
-		const props = {
-			isSignup: true,
-			specialTerms: 'Special terms text',
-		};
-
-		expect(AcceptTerms).toRenderCorrectly(props);
-	});
-
-	it('renders appropriately if a registration', () => {
-		const props = { isRegister: true };
-
-		expect(AcceptTerms).toRenderCorrectly(props);
-	});
-
 	it('renders appropriately if input is checked', () => {
 		const props = { isChecked: true };
 

package/components/accept-terms.stories.js

@@ -12,16 +12,14 @@ export default {
 				options: ['immediate', 'endOfTerm'],
 			},
 		},
-		isAuthFirstAccount: {
+		withPrivacyPolicyTerms: {
 			control: 'boolean',
 			table: {
-				type: { summary: 'Show new buy flow design' },
+				type: { summary: 'Show privacy policy terms' },
 			},
 		},
-		isAuthFirstPayment: { control: 'boolean' },
 		hasError: { control: 'boolean' },
 		isSignup: { control: 'boolean' },
-		isRegister: { control: 'boolean' },
 		isChecked: { control: 'boolean' },
 		isB2b: { control: 'boolean' },
 		isB2cPartnership: { control: 'boolean' },
@@ -36,7 +34,9 @@ export default {
 		children: {
 			control: false,
 			table: {
-				type: { summary: "Only rendered when 'isAuthFirstAccount' is true" },
+				type: {
+					summary: "Only rendered when 'withPrivacyPolicyTerms' is true",
+				},
 			},
 		},
 		privacyPoliciesPosition: {
@@ -56,12 +56,12 @@ Basic.args = {};
 
 export const NewBuyFlow = (args) => <AcceptTerms {...args} />;
 NewBuyFlow.args = {
-	isAuthFirstAccount: true,
+	withPrivacyPolicyTerms: true,
 };
 
 export const NewBuyFlowEmailVerification = (args) => <AcceptTerms {...args} />;
 NewBuyFlowEmailVerification.args = {
-	isAuthFirstAccount: true,
+	withPrivacyPolicyTerms: true,
 	hideConfirmTermsAndConditions: true,
 };
 
@@ -71,12 +71,12 @@ export const NewBuyFlowWithChildren = (args) => (
 	</AcceptTerms>
 );
 NewBuyFlowWithChildren.args = {
-	isAuthFirstAccount: true,
+	withPrivacyPolicyTerms: true,
 	privacyPoliciesPosition: 'bottom',
 };
 NewBuyFlowWithChildren.parameters = {
 	controls: {
-		include: ['privacyPoliciesPosition', 'isAuthFirstAccount', 'children'],
+		include: ['privacyPoliciesPosition', 'withPrivacyPolicyTerms', 'children'],
 		expanded: true,
 	},
 };

package/dist/accept-terms.js

@@ -14,16 +14,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var DEFAULT_AGE_RESTRICTION = '16';
 var DEFAULT_PRIVACY_POLICIES_POSITION = 'top';
 function AcceptTerms(_ref) {
-  var _ref$isAuthFirstAccou = _ref.isAuthFirstAccount,
-    isAuthFirstAccount = _ref$isAuthFirstAccou === void 0 ? false : _ref$isAuthFirstAccou,
-    _ref$isAuthFirstPayme = _ref.isAuthFirstPayment,
-    isAuthFirstPayment = _ref$isAuthFirstPayme === void 0 ? false : _ref$isAuthFirstPayme,
+  var _ref$withPrivacyPolic = _ref.withPrivacyPolicyTerms,
+    withPrivacyPolicyTerms = _ref$withPrivacyPolic === void 0 ? false : _ref$withPrivacyPolic,
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     _ref$isSignup = _ref.isSignup,
     isSignup = _ref$isSignup === void 0 ? false : _ref$isSignup,
-    _ref$isRegister = _ref.isRegister,
-    isRegister = _ref$isRegister === void 0 ? false : _ref$isRegister,
     _ref$isChecked = _ref.isChecked,
     isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
     _ref$isB2b = _ref.isB2b,
@@ -44,8 +40,6 @@ function AcceptTerms(_ref) {
     transitionType = _ref$transitionType === void 0 ? null : _ref$transitionType,
     _ref$isPrintProduct = _ref.isPrintProduct,
     isPrintProduct = _ref$isPrintProduct === void 0 ? false : _ref$isPrintProduct,
-    _ref$specialTerms = _ref.specialTerms,
-    specialTerms = _ref$specialTerms === void 0 ? null : _ref$specialTerms,
     _ref$isSingleTerm = _ref.isSingleTerm,
     isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
     _ref$isDeferredBillin = _ref.isDeferredBilling,
@@ -55,14 +49,12 @@ function AcceptTerms(_ref) {
     children = _ref.children,
     _ref$privacyPoliciesP = _ref.privacyPoliciesPosition,
     privacyPoliciesPosition = _ref$privacyPoliciesP === void 0 ? DEFAULT_PRIVACY_POLICIES_POSITION : _ref$privacyPoliciesP;
-  var divProps = _objectSpread(_objectSpread({
+  var divProps = _objectSpread({
     id: 'acceptTermsField',
     className: 'o-forms-field o-layout-typography ncf__validation-error',
     'data-validate': 'required,checked'
   }, isSignup && {
     'data-trackable': 'sign-up-terms'
-  }), isRegister && {
-    'data-trackable': 'register-up-terms'
   });
   var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
     'o-forms-input--invalid': hasError
@@ -78,8 +70,8 @@ function AcceptTerms(_ref) {
   }, isChecked && {
     defaultChecked: true
   });
-  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement("div", {
-    className: "auth-first-step-terms"
+  var privacyPolicyTerms = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "privacy-policy-terms"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "consent-text--".concat(privacyPoliciesPosition)
   }, "For more information about how we use your data, please refer to our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
@@ -110,20 +102,6 @@ function AcceptTerms(_ref) {
   }, "Please accept our terms & conditions")), children && /*#__PURE__*/_react["default"].createElement("div", {
     className: "children-container"
   }, children));
-  var registerTerms = /*#__PURE__*/_react["default"].createElement("label", {
-    className: labelClassName,
-    htmlFor: "termsAcceptance"
-  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "o-forms-input__label terms-register"
-  }, "I confirm I am ", ageRestriction, " years or older and have read and agree to the", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
-    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
-    target: isEmbedded ? '_top' : '_blank',
-    rel: "noopener noreferrer",
-    "data-trackable": "terms-and-conditions"
-  }, "Terms & Conditions"), "."), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "o-forms-input__error"
-  }, "Please accept our terms & conditions"));
   var b2bTerms = isB2b ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-b2b"
   }, "By submitting this form, you indicate your consent to also being contacted by Financial Times by email, post, or phone about our other products, services or special offers unless you untick this box.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
@@ -189,9 +167,7 @@ function AcceptTerms(_ref) {
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     target: isEmbedded ? '_top' : '_blank',
     rel: "noopener noreferrer"
-  }, "Terms & Conditions"), "."))), specialTerms && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-special"
-  }, specialTerms)));
+  }, "Terms & Conditions"), "."))));
   var deferredBillingTerms = isDeferredBilling && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-deferred"
   }, "Please note if you fail to make payment for your deferred billing plan within due date your subscription will be automatically cancelled."));
@@ -208,9 +184,9 @@ function AcceptTerms(_ref) {
   }, "Terms & Conditions"), "."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "o-forms-input__error"
   }, "Please accept our terms & conditions"));
-  return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : isRegister ? registerTerms : isAuthFirstAccount ? authFirstStepTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
+  return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : withPrivacyPolicyTerms ? privacyPolicyTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
     className: "o-typography-list ncf__accept-terms-list"
-  }, !isAuthFirstPayment && b2bTerms, corpSignupTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
+  }, b2bTerms, corpSignupTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
@@ -220,9 +196,9 @@ function AcceptTerms(_ref) {
   }, "Please accept our terms & conditions"))));
 }
 AcceptTerms.propTypes = {
+  withPrivacyPolicyTerms: _propTypes["default"].bool,
   hasError: _propTypes["default"].bool,
   isSignup: _propTypes["default"].bool,
-  isRegister: _propTypes["default"].bool,
   isChecked: _propTypes["default"].bool,
   isB2b: _propTypes["default"].bool,
   isB2cPartnership: _propTypes["default"].bool,
@@ -233,7 +209,6 @@ AcceptTerms.propTypes = {
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,
   isPrintProduct: _propTypes["default"].bool,
-  specialTerms: _propTypes["default"].string,
   isSingleTerm: _propTypes["default"].bool,
   isDeferredBilling: _propTypes["default"].bool,
   hideConfirmTermsAndConditions: _propTypes["default"].bool,

package/package.json

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

package/styles/accept-terms.scss

@@ -19,7 +19,7 @@
 	}
 }
 
-.auth-first-step-terms {
+.privacy-policy-terms {
   display: flex;
   flex-direction: column;