@financial-times/n-conversion-forms 27.3.3 → 27.4.2

package/components/__snapshots__/delivery-address-type.spec.js.snap

@@ -10,6 +10,8 @@ exports[`DeliveryAddressType renders with all props 1`] = `
     <span class="o-forms-title__main">
       Address type
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <div class="o-forms-input o-forms-input--inline o-forms-input--radio-round">
     <label for="home"
@@ -72,6 +74,8 @@ exports[`DeliveryAddressType renders with default props 1`] = `
     <span class="o-forms-title__main">
       Address type
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <div class="o-forms-input o-forms-input--inline o-forms-input--radio-round">
     <label for="home"

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

@@ -11,7 +11,7 @@ exports[`Phone render a disabled phone input 1`] = `
       Phone number
     </span>
     <span class="o-forms-title__prompt">
-      5 to 15 characters (numbers only)
+      We need this for security purposes. We&#x27;ll never send anything without consent (Use numbers only)
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -48,7 +48,7 @@ exports[`Phone render a phone input with a label 1`] = `
       Phone number
     </span>
     <span class="o-forms-title__prompt">
-      5 to 15 characters (numbers only)
+      We need this for security purposes. We&#x27;ll never send anything without consent (Use numbers only)
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -84,7 +84,7 @@ exports[`Phone render a phone input with a label for B2B 1`] = `
       Work phone number
     </span>
     <span class="o-forms-title__prompt">
-      5 to 15 characters (numbers only)
+      We need this for security purposes. We&#x27;ll never send anything without consent (Use numbers only)
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
@@ -120,7 +120,7 @@ exports[`Phone render a phone input with error styling 1`] = `
       Phone number
     </span>
     <span class="o-forms-title__prompt">
-      5 to 15 characters (numbers only)
+      We need this for security purposes. We&#x27;ll never send anything without consent (Use numbers only)
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
@@ -156,7 +156,7 @@ exports[`Phone render default label if B2B and educational licence 1`] = `
       Phone number
     </span>
     <span class="o-forms-title__prompt">
-      5 to 15 characters (numbers only)
+      We need this for security purposes. We&#x27;ll never send anything without consent (Use numbers only)
     </span>
   </span>
   <span class="o-forms-input o-forms-input--text">

package/components/delivery-address-type.jsx

@@ -13,6 +13,7 @@ export function DeliveryAddressType ({
 	inputName = 'deliveryAddressType',
 	options = ['home', 'company', 'pobox'],
 	editMode = false,
+	titlePrompt = ''
 }) {
 	return (
 		<div
@@ -23,6 +24,7 @@ export function DeliveryAddressType ({
 		>
 			<span className="o-forms-title">
 				<span className="o-forms-title__main">Address type</span>
+				<span className="o-forms-title__prompt">{titlePrompt}</span>
 			</span>
 
 			<div className="o-forms-input o-forms-input--inline o-forms-input--radio-round">
@@ -59,4 +61,5 @@ DeliveryAddressType.propTypes = {
 	inputName: PropTypes.string,
 	value: PropTypes.oneOf(['home', 'company', 'pobox']),
 	options: PropTypes.arrayOf(PropTypes.oneOf(['home', 'company', 'pobox'])),
+	titlePrompt:PropTypes.string,
 };

package/components/delivery-city.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { countriesSupportedISO } from '../helpers/supportedCountries';
+import { countriesSupportedISO, identifyFTShippingZone } from '../helpers/supportedCountries';
 
 
 export function DeliveryCity ({
@@ -22,8 +22,14 @@ export function DeliveryCity ({
 		CAN: 'e.g. Montreal',
 		ARE: 'e.g. Dubai'
 	};
+	const FTShippingZone = identifyFTShippingZone(country);
 
-	const inputLabel = country === 'ARE'? 'Emirate or City':'City';
+	const labelMapping = {
+		ARE: 'Emirate or City',
+		APAC: 'City/Prefecture',
+		DEFAULT: 'City',
+	};
+	const inputLabel = labelMapping[FTShippingZone] ? labelMapping[FTShippingZone] : labelMapping['DEFAULT'];
 
 	return (
 		<label

package/components/phone.jsx

@@ -39,7 +39,8 @@ export function Phone ({
 			<span className={fieldTitleClassName}>
 				<span className="o-forms-title__main">{labelText}</span>
 				<span className="o-forms-title__prompt">
-					5 to 15 characters (numbers only)
+					We need this for security purposes. We&apos;ll never send anything
+					without consent (Use numbers only)
 				</span>
 			</span>
 			<span className={inputWrapperClassNames}>

package/dist/delivery-address-type.js

@@ -32,7 +32,9 @@ function DeliveryAddressType(_ref) {
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? ['home', 'company', 'pobox'] : _ref$options,
       _ref$editMode = _ref.editMode,
-      editMode = _ref$editMode === void 0 ? false : _ref$editMode;
+      editMode = _ref$editMode === void 0 ? false : _ref$editMode,
+      _ref$titlePrompt = _ref.titlePrompt,
+      titlePrompt = _ref$titlePrompt === void 0 ? '' : _ref$titlePrompt;
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
     className: "o-forms-field ncf__delivery-address-type",
@@ -42,7 +44,9 @@ function DeliveryAddressType(_ref) {
     className: "o-forms-title"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__main"
-  }, "Address type")), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Address type"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, titlePrompt)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "o-forms-input o-forms-input--inline o-forms-input--radio-round"
   }, options.map(function (option) {
     var type = addressTypes.find(function (item) {
@@ -71,5 +75,6 @@ DeliveryAddressType.propTypes = {
   fieldId: _propTypes["default"].string,
   inputName: _propTypes["default"].string,
   value: _propTypes["default"].oneOf(['home', 'company', 'pobox']),
-  options: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['home', 'company', 'pobox']))
+  options: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['home', 'company', 'pobox'])),
+  titlePrompt: _propTypes["default"].string
 };

package/dist/delivery-city.js

@@ -33,7 +33,13 @@ function DeliveryCity(_ref) {
     CAN: 'e.g. Montreal',
     ARE: 'e.g. Dubai'
   };
-  var inputLabel = country === 'ARE' ? 'Emirate or City' : 'City';
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
+  var labelMapping = {
+    ARE: 'Emirate or City',
+    APAC: 'City/Prefecture',
+    DEFAULT: 'City'
+  };
+  var inputLabel = labelMapping[FTShippingZone] ? labelMapping[FTShippingZone] : labelMapping['DEFAULT'];
   return /*#__PURE__*/_react["default"].createElement("label", {
     id: "deliveryCityField",
     className: "o-forms-field ncf__validation-error",

package/dist/phone.js

@@ -55,7 +55,7 @@ function Phone(_ref) {
     className: "o-forms-title__main"
   }, labelText), /*#__PURE__*/_react["default"].createElement("span", {
     className: "o-forms-title__prompt"
-  }, "5 to 15 characters (numbers only)")), /*#__PURE__*/_react["default"].createElement("span", {
+  }, "We need this for security purposes. We'll never send anything without consent (Use numbers only)")), /*#__PURE__*/_react["default"].createElement("span", {
     className: inputWrapperClassNames
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "tel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "27.3.3",
+  "version": "27.4.2",
   "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/utils/payment-type.js

@@ -115,6 +115,18 @@ class PaymentType {
 			}
 		}
 	}
+	/**
+	 * Hide the payment types panel
+	 */
+	hidePanel () {
+		const content = this.$paymentType.querySelectorAll(
+			'.ncf__payment-type-panel'
+		);
+		for (let i = 0; i < content.length; i++) {
+			const element = content[i];
+			element.classList.add('ncf__hidden');
+		}
+	}
 
 	static get CREDITCARD () {
 		return 'creditcard';