@financial-times/n-conversion-forms 27.3.2 → 27.4.1

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/accept-terms.jsx

@@ -22,7 +22,6 @@ export function AcceptTerms ({
 	isPrintProduct = false,
 	specialTerms = null,
 	isSingleTerm = false,
-	isNewDigitalBuyFlowConsent = false,
 	hideConfirmTermsAndConditions = false,
 }) {
 	const divProps = {
@@ -52,15 +51,7 @@ export function AcceptTerms ({
 
 	const authFirstStepTerms = (
 		<>
-			{
-				// TODO: clean up the code in https://financialtimes.atlassian.net/browse/ACQ-1593
-				// isNewDigitalBuyFlowConsent flag for new A/B testing of consents auth first buy flow
-				// after the test it will be one of the conditions for the below flow
-			}
-			{isNewDigitalBuyFlowConsent && (
-				<hr className=" ncf ncf__divider-horizontal" />
-			)}
-			{!isNewDigitalBuyFlowConsent && (
+			{(
 				<ul className="o-typography-list ncf__accept-terms-list">
 					<li>
 						<span className="terms-auth-first-step">
@@ -410,6 +401,5 @@ AcceptTerms.propTypes = {
 	isPrintProduct: PropTypes.bool,
 	specialTerms: PropTypes.string,
 	isSingleTerm: PropTypes.bool,
-	isNewDigitalBuyFlowConsent: PropTypes.bool,
 	hideConfirmTermsAndConditions: PropTypes.bool,
 };

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/delivery-instructions.jsx

@@ -103,12 +103,18 @@ export function DeliveryInstructions ({
 		'o-forms-input--textarea',
 		{ 'o-forms-input--invalid': hasError },
 	]);
-
+	const FTShippingZone = identifyFTShippingZone(country);
 	const extraInstruction =
 		country === 'GBR'
 			? ''
 			: '\u000a- Special handling, e.g. place in plastic bag, 24/7 security on reception';
 	const defaultPlaceholder = {
+		CEMEA_V1: `Enter instructions ${
+			maxlength && `(Max. ${maxlength} characters)`
+		}:\u000a- Door colour, letterbox location\u000a- Door entry codes, etc.`,
+		CEMEA_V2: `Enter instructions ${
+			maxlength && `(Max. ${maxlength} characters)`
+		}:\u000a- Door colour, letterbox location\u000a- Door entry codes, etc.`,
 		GBR: `Enter instructions ${
 			maxlength && `(Max. ${maxlength} characters)`
 		}:\u000a- Door colour, letterbox location\u000a- Placement i.e. letterbox delivery${extraInstruction}`,
@@ -126,7 +132,7 @@ export function DeliveryInstructions ({
 		...(maxlength && { maxLength: maxlength }),
 		...(rows && { rows }),
 		'data-trackable': 'field-deliveryInstructions',
-		placeholder: placeholder ? placeholder : defaultPlaceholder[country],
+		placeholder: placeholder ? placeholder : defaultPlaceholder[FTShippingZone],
 		disabled: isDisabled,
 		defaultValue: value,
 	};
@@ -135,7 +141,7 @@ export function DeliveryInstructions ({
 			Special characters including punctuation cannot be used in the delivery instructions.
 		</span>
 	);
-	const FTShippingZone = identifyFTShippingZone(country);
+
 	return (
 		<label
 			id={fieldId}

package/dist/accept-terms.js

@@ -56,8 +56,6 @@ function AcceptTerms(_ref) {
       specialTerms = _ref$specialTerms === void 0 ? null : _ref$specialTerms,
       _ref$isSingleTerm = _ref.isSingleTerm,
       isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
-      _ref$isNewDigitalBuyF = _ref.isNewDigitalBuyFlowConsent,
-      isNewDigitalBuyFlowConsent = _ref$isNewDigitalBuyF === void 0 ? false : _ref$isNewDigitalBuyF,
       _ref$hideConfirmTerms = _ref.hideConfirmTermsAndConditions,
       hideConfirmTermsAndConditions = _ref$hideConfirmTerms === void 0 ? false : _ref$hideConfirmTerms;
 
@@ -87,9 +85,7 @@ function AcceptTerms(_ref) {
     defaultChecked: true
   });
 
-  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isNewDigitalBuyFlowConsent && /*#__PURE__*/_react["default"].createElement("hr", {
-    className: " ncf ncf__divider-horizontal"
-  }), !isNewDigitalBuyFlowConsent && /*#__PURE__*/_react["default"].createElement("ul", {
+  var authFirstStepTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
     className: "o-typography-list ncf__accept-terms-list"
   }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-auth-first-step"
@@ -250,6 +246,5 @@ AcceptTerms.propTypes = {
   isPrintProduct: _propTypes["default"].bool,
   specialTerms: _propTypes["default"].string,
   isSingleTerm: _propTypes["default"].bool,
-  isNewDigitalBuyFlowConsent: _propTypes["default"].bool,
   hideConfirmTermsAndConditions: _propTypes["default"].bool
 };

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/delivery-instructions.js

@@ -85,8 +85,11 @@ function DeliveryInstructions(_ref) {
   var textAreaWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--textarea', {
     'o-forms-input--invalid': hasError
   }]);
+  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
   var extraInstruction = country === 'GBR' ? '' : "\n- Special handling, e.g. place in plastic bag, 24/7 security on reception";
   var defaultPlaceholder = {
+    CEMEA_V1: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
+    CEMEA_V2: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Door entry codes, etc."),
     GBR: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, letterbox location\n- Placement i.e. letterbox delivery").concat(extraInstruction),
     USA: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction),
     CAN: "Enter instructions ".concat(maxlength && "(Max. ".concat(maxlength, " characters)"), ":\n- Door colour, driveway signage\n- Cross street").concat(extraInstruction)
@@ -101,7 +104,7 @@ function DeliveryInstructions(_ref) {
     rows: rows
   }), {}, {
     'data-trackable': 'field-deliveryInstructions',
-    placeholder: placeholder ? placeholder : defaultPlaceholder[country],
+    placeholder: placeholder ? placeholder : defaultPlaceholder[FTShippingZone],
     disabled: isDisabled,
     defaultValue: value
   });
@@ -110,7 +113,6 @@ function DeliveryInstructions(_ref) {
     className: "o-forms-title__prompt"
   }, "Special characters including punctuation cannot be used in the delivery instructions.");
 
-  var FTShippingZone = (0, _supportedCountries.identifyFTShippingZone)(country);
   return /*#__PURE__*/_react["default"].createElement("label", {
     id: fieldId,
     className: "o-forms-field o-forms-field--optional",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "27.3.2",
+  "version": "27.4.1",
   "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';