@financial-times/n-conversion-forms 36.0.2 → 37.0.0

package/.eslintignore

@@ -7,4 +7,5 @@ package-lock.json
 *.sh
 .*
 *.feature
-/docs
+/docs
+*.scss

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -10,6 +10,9 @@
 | ------ | ----- |
 |        |       |
 
+### Semantic versioning
+<!-- What is the proposed release type (i.e. major, minor, path) for these changes and the rationale? -->
+
 ### Reminder
 Have you completed these common tasks (remove those that don't apply)?
 

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "130d302fb2332d165d2b06495f0fc1170eac37d0",
-  "tag": "v36.0.2"
+  "version": "386e3356ff251ce8366db3384b1648521b3fd5b6",
+  "tag": "v37.0.0"
 }

package/components/__snapshots__/delivery-start-date.spec.js.snap

@@ -30,7 +30,7 @@ exports[`DeliveryStartDate renders with a custom date 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
       5th November 2019
     </strong>
@@ -68,7 +68,7 @@ exports[`DeliveryStartDate renders with a custom input max value 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
       2
     </strong>
@@ -107,7 +107,7 @@ exports[`DeliveryStartDate renders with a custom input min value 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>
@@ -144,7 +144,7 @@ exports[`DeliveryStartDate renders with a custom input value 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>
@@ -182,7 +182,7 @@ exports[`DeliveryStartDate renders with a disabled input 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>
@@ -219,7 +219,7 @@ exports[`DeliveryStartDate renders with an error 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>
@@ -293,7 +293,7 @@ exports[`DeliveryStartDate renders with country different than default 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>
@@ -330,7 +330,7 @@ exports[`DeliveryStartDate renders with default props 1`] = `
     </span>
   </span>
   <p>
-    The first print edition you will receive is on:
+    The first print edition you will receive is:
     <strong class="js-start-date-text">
     </strong>
   </p>

package/components/delivery-start-date.jsx

@@ -32,7 +32,7 @@ export function DeliveryStartDate({
 
 	const startMessage = isAddressUpdate
 		? 'We’ll start delivering to this address from:'
-		: 'The first print edition you will receive is on:';
+		: 'The first print edition you will receive is:';
 
 	return (
 		<label

package/components/payment-type.jsx

@@ -72,9 +72,7 @@ export function PaymentType({
 	};
 
 	const paymentTypePaypal = () => {
-		if (showPaypalCustomerCareMessage) {
-			return PaypalCustomerCareMessage();
-		} else {
+		if (!showPaypalCustomerCareMessage) {
 			return { id: 'paypal', label: 'PayPal', hide: !enablePaypal };
 		}
 	};
@@ -104,7 +102,8 @@ export function PaymentType({
 			paymentTypeDirectDebit,
 			paymentTypeApplePay,
 			paymentTypeBankTransfer,
-		];
+		].filter(Boolean);
+
 		return paymentTypes.map((type) => {
 			if (type.id === undefined) {
 				return type;
@@ -239,7 +238,6 @@ export function PaymentType({
 		checked: true,
 		...(isSingleTermChecked && { defaultChecked: true }),
 	};
-
 	return (
 		<React.Fragment>
 			{createSecuritySeal()}
@@ -252,24 +250,21 @@ export function PaymentType({
 				<div className="o-forms-input__error">
 					Please enter a valid payment type
 				</div>
-
+				{showPaypalCustomerCareMessage && PaypalCustomerCareMessage()}
 				{createDirectDebitPanel()}
-
 				{createZuoraPanel()}
 			</div>
 			<div className="o-forms-field">
 				{isSingleTerm && (
-					<>
-						<label
-							className="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
-							htmlFor="payFasterNextTime"
-						>
-							<input {...inputCheckProps} />
-							<span className="o-forms-input__label">
-								Use these details to pay faster next time
-							</span>
-						</label>
-					</>
+					<label
+						className="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
+						htmlFor="payFasterNextTime"
+					>
+						<input {...inputCheckProps} />
+						<span className="o-forms-input__label">
+							Use these details to pay faster next time
+						</span>
+					</label>
 				)}
 			</div>
 		</React.Fragment>

package/dist/delivery-start-date.jsx

@@ -44,7 +44,7 @@ function DeliveryStartDate(_ref) {
     disabled: isDisabled,
     defaultValue: value
   });
-  var startMessage = isAddressUpdate ? 'We’ll start delivering to this address from:' : 'The first print edition you will receive is on:';
+  var startMessage = isAddressUpdate ? 'We’ll start delivering to this address from:' : 'The first print edition you will receive is:';
   return /*#__PURE__*/_react["default"].createElement("label", {
     id: "deliveryStartDateField",
     className: "o-forms-field ncf__validation-error",

package/dist/payment-type.jsx

@@ -67,9 +67,7 @@ function PaymentType(_ref) {
     hide: !enableCreditcard
   };
   var paymentTypePaypal = function paymentTypePaypal() {
-    if (showPaypalCustomerCareMessage) {
-      return PaypalCustomerCareMessage();
-    } else {
+    if (!showPaypalCustomerCareMessage) {
       return {
         id: 'paypal',
         label: 'PayPal',
@@ -93,7 +91,7 @@ function PaymentType(_ref) {
     hide: !enableBankTransfer
   };
   var createPaymentTypes = function createPaymentTypes() {
-    var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer];
+    var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer].filter(Boolean);
     return paymentTypes.map(function (type) {
       if (type.id === undefined) {
         return type;
@@ -188,14 +186,14 @@ function PaymentType(_ref) {
     className: "o-forms-input o-forms-input--radio-box ncf__payment-type-selector"
   }, createPaymentTypes()), /*#__PURE__*/_react["default"].createElement("div", {
     className: "o-forms-input__error"
-  }, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel()), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Please enter a valid payment type"), showPaypalCustomerCareMessage && PaypalCustomerCareMessage(), createDirectDebitPanel(), createZuoraPanel()), /*#__PURE__*/_react["default"].createElement("div", {
     className: "o-forms-field"
-  }, isSingleTerm && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
+  }, isSingleTerm && /*#__PURE__*/_react["default"].createElement("label", {
     className: "o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox",
     htmlFor: "payFasterNextTime"
   }, /*#__PURE__*/_react["default"].createElement("input", inputCheckProps), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-input__label"
-  }, "Use these details to pay faster next time")))));
+  }, "Use these details to pay faster next time"))));
 }
 PaymentType.propTypes = {
   enableApplepay: _propTypes["default"].bool,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "36.0.2",
-  "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
+  "version": "37.0.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": {
     "test": "dotcom-tool-kit test:local",

package/styles/payment-type.scss

@@ -10,6 +10,7 @@
 }
 
 @mixin ncfPaymentType() {
+
 	// #1 - Need to be this specific to override specific o-forms styles.
 	//      Helps us override the floating of the radio box so that we can have it
 	//      full width.
@@ -21,6 +22,7 @@
 			// #1
 			display: block;
 			margin-bottom: oSpacingByName('s3');
+			width: 100%;
 
 			&:last-child {
 				margin-bottom: 0;
@@ -33,17 +35,27 @@
 		}
 
 		&-selector {
-			margin-top: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-evenly;
+			align-items: baseline;
+			margin-bottom: oSpacingByName('s3');
+
+			@include oGridRespondTo($from: L) {
+				flex-direction: row;
+				gap: oSpacingByName('s2');
+			}
 		}
 
 		.o-forms-input--radio-box &--paypal {
+
 			// #2
-			[type='radio'] + .o-forms-input__label {
+			[type='radio']+.o-forms-input__label {
 				@include buttonImageOverriding();
 				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fthird-party%2Fpp-logo-100px.png?width=300&source=next&fit=scale-down);
 			}
 
-			[type='radio']:checked + .o-forms-input__label {
+			[type='radio']:checked+.o-forms-input__label {
 				@include buttonImageOverriding();
 				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fthird-party%2Fpp-logo-white.png?width=300&source=next&fit=scale-down);
 			}
@@ -52,12 +64,12 @@
 
 		.o-forms-input--radio-box &--directdebit {
 			// #2
-			[type='radio'] + .o-forms-input__label {
+			[type='radio']+.o-forms-input__label {
 				@include buttonImageOverriding();
 				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fthird-party%2Fdirect_debit.png?width=300&source=next&fit=scale-down);
 			}
 
-			[type='radio']:checked + .o-forms-input__label {
+			[type='radio']:checked+.o-forms-input__label {
 				@include buttonImageOverriding();
 				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2Fthird-party%2Fdirect_debit-white.png?width=300&source=next&fit=scale-down);
 			}
@@ -113,4 +125,4 @@
 
 .o-forms-input.o-forms-input--checkbox.o-forms-input--suffix.ncf__payment-type-pay-faster-next-time-checkbox {
 	margin-top: oSpacingByName('s3');
-}
+}