@financial-times/n-conversion-forms 27.7.1 → 28.0.0

package/helpers/supportedCountries.js

@@ -29,7 +29,7 @@ const supportedCountriesMasterList = {
 		ZAF: 'South Africa',
 		ESP: 'Spain',
 		SWE: 'Sweden',
-		CHE: 'Switzerland'
+		CHE: 'Switzerland',
 	},
 	cemeaV2: { FRA: 'France', LUX: 'Luxembourg', MCO: 'Monaco' },
 	apac: {
@@ -43,14 +43,14 @@ const supportedCountriesMasterList = {
 		PHL: 'Philippines',
 		SGP: 'Singapore',
 		TWN: 'Taiwan, Province of China',
-		THA: 'Thailand'
+		THA: 'Thailand',
 	},
 	other: {
 		GBR: 'United Kingdom',
 		USA: 'United States',
 		CAN: 'Canada',
-		ARE: 'United Arab Emirates'
-	}
+		ARE: 'United Arab Emirates',
+	},
 };
 
 const cemeaV1ISO = Object.keys(supportedCountriesMasterList.cemeaV1);
@@ -73,4 +73,11 @@ const identifyFTShippingZone = (country) => {
 	return country;
 };
 
-module.exports = { cemeaV1ISO, cemeaV2ISO, apacISO, countriesSupported, countriesSupportedISO, identifyFTShippingZone };
+module.exports = {
+	cemeaV1ISO,
+	cemeaV2ISO,
+	apacISO,
+	countriesSupported,
+	countriesSupportedISO,
+	identifyFTShippingZone,
+};

package/helpers/supportedPostcodeExamples.js

@@ -21,7 +21,7 @@ const supportedPostcodeExamples = {
 		NOR: '1608',
 		POL: '43-190',
 		PRT: '2525-517',
-		QAT: '',//match anything
+		QAT: '', //match anything
 		ROU: '712341',
 		RUS: '191028',
 		SVK: '98401',
@@ -29,7 +29,7 @@ const supportedPostcodeExamples = {
 		ZAF: '5189',
 		ESP: '37752',
 		SWE: '260 38',
-		CHE: '9424'
+		CHE: '9424',
 	},
 	cemeaV2: { FRA: '95000', LUX: '1009', MCO: '98000' },
 	apac: {
@@ -43,13 +43,13 @@ const supportedPostcodeExamples = {
 		PHL: '2799',
 		SGP: '584163',
 		TWN: '100',
-		THA: '10330'
+		THA: '10330',
 	},
 	other: {
 		GBR: 'EC4M 9BT',
 		USA: '60411',
-		CAN: 'M5H 3E5'
-	}
+		CAN: 'M5H 3E5',
+	},
 };
 
 const allSupportedPostcodeExamples = flattenObj(supportedPostcodeExamples);

package/helpers/supportedPostcodeValidators.js

@@ -19,7 +19,7 @@ const supportedPostcodeValidators = {
 		NOR: /^\d{4}$/,
 		POL: /^\d{2}-\d{3}$/,
 		PRT: /^\d{4}([\-]\d{3})?$/,
-		QAT: /.*$/,//match anything
+		QAT: /.*$/, //match anything
 		ROU: /^\d{6}$/,
 		RUS: /^\d{6}$/,
 		SVK: /^\d{3}[ ]?\d{2}$/,
@@ -27,7 +27,7 @@ const supportedPostcodeValidators = {
 		ZAF: /^\d{4}$/,
 		ESP: /^\d{5}$/,
 		SWE: /^\d{3}[ ]?\d{2}$/,
-		CHE: /^\d{4}$/
+		CHE: /^\d{4}$/,
 	},
 	cemeaV2: { FRA: /^[0-9]{5}$/, LUX: /^\d{4}$/, MCO: /^980\d{2}$/ },
 	apac: {
@@ -41,13 +41,13 @@ const supportedPostcodeValidators = {
 		PHL: /^\d{4}$/,
 		SGP: /^\d{6}$/,
 		TWN: /^\d{3}(\d{2})?$/,
-		THA: /^\d{5}$/
+		THA: /^\d{5}$/,
 	},
 	other: {
 		GBR: /^[A-Za-z]{1,2}[0-9][0-9A-Za-z]?[\s-]?[0-9][A-Za-z]{2}$/,
 		USA: /^[0-9]{5}$/,
-		CAN: /^[A-Za-z]\d[A-Za-z][\s-]?\d[A-Za-z]\d$/
-	}
+		CAN: /^[A-Za-z]\d[A-Za-z][\s-]?\d[A-Za-z]\d$/,
+	},
 };
 
 module.exports = { supportedPostcodeValidators };

package/helpers/supportedPostcodeValidators.spec.js

@@ -1,26 +1,46 @@
-const { supportedPostcodeValidators } = require('./supportedPostcodeValidators');
+const {
+	supportedPostcodeValidators,
+} = require('./supportedPostcodeValidators');
 const { supportedPostcodeExamples } = require('./supportedPostcodeExamples');
 
 describe('supportedPostcodeValidators', () => {
 	it('should validate every cemeaV1 supportedPostcodeExamples', () => {
-		const cemeaV1PostcodeCountryCodes = Object.keys(supportedPostcodeExamples.cemeaV1);
+		const cemeaV1PostcodeCountryCodes = Object.keys(
+			supportedPostcodeExamples.cemeaV1
+		);
 
-		for ( const cemeaV1PostcodeCountryCode of cemeaV1PostcodeCountryCodes ) {
-			expect(supportedPostcodeValidators.cemeaV1[cemeaV1PostcodeCountryCode].test(supportedPostcodeExamples.cemeaV1[cemeaV1PostcodeCountryCode])).toBe(true);
+		for (const cemeaV1PostcodeCountryCode of cemeaV1PostcodeCountryCodes) {
+			expect(
+				supportedPostcodeValidators.cemeaV1[cemeaV1PostcodeCountryCode].test(
+					supportedPostcodeExamples.cemeaV1[cemeaV1PostcodeCountryCode]
+				)
+			).toBe(true);
 		}
 	});
 	it('should validate every cemeaV2 supportedPostcodeExamples', () => {
-		const cemeaV2PostcodeCountryCodes = Object.keys(supportedPostcodeExamples.cemeaV2);
+		const cemeaV2PostcodeCountryCodes = Object.keys(
+			supportedPostcodeExamples.cemeaV2
+		);
 
-		for ( const cemeaV2PostcodeCountryCode of cemeaV2PostcodeCountryCodes ) {
-			expect(supportedPostcodeValidators.cemeaV2[cemeaV2PostcodeCountryCode].test(supportedPostcodeExamples.cemeaV2[cemeaV2PostcodeCountryCode])).toBe(true);
+		for (const cemeaV2PostcodeCountryCode of cemeaV2PostcodeCountryCodes) {
+			expect(
+				supportedPostcodeValidators.cemeaV2[cemeaV2PostcodeCountryCode].test(
+					supportedPostcodeExamples.cemeaV2[cemeaV2PostcodeCountryCode]
+				)
+			).toBe(true);
 		}
 	});
 	it('should validate every apac supportedPostcodeExamples', () => {
-		const apacPostcodeCountryCodes = Object.keys(supportedPostcodeExamples.apac);
+		const apacPostcodeCountryCodes = Object.keys(
+			supportedPostcodeExamples.apac
+		);
 
-		for ( const apacPostcodeCountryCode of apacPostcodeCountryCodes ) {
-			expect(supportedPostcodeValidators.apac[apacPostcodeCountryCode].test(supportedPostcodeExamples.apac[apacPostcodeCountryCode])).toBe(true);
+		for (const apacPostcodeCountryCode of apacPostcodeCountryCodes) {
+			expect(
+				supportedPostcodeValidators.apac[apacPostcodeCountryCode].test(
+					supportedPostcodeExamples.apac[apacPostcodeCountryCode]
+				)
+			).toBe(true);
 		}
 	});
 });

package/helpers/utilities.js

@@ -1,9 +1,9 @@
 //Recursively flattens a nested object.
 //For example: input: {a:{b:1}}  -> output: {b:1}
-const flattenObj = (obj, out={}) => {
-	Object.keys(obj).forEach(key => {
+const flattenObj = (obj, out = {}) => {
+	Object.keys(obj).forEach((key) => {
 		if (typeof obj[key] === 'object') {
-			out = flattenObj(obj[key], out); //recursively call for nesteds
+			out = flattenObj(obj[key], out); //recursively call for nested objects
 		} else {
 			out[key] = obj[key]; //direct assign for values
 		}
@@ -11,4 +11,4 @@ const flattenObj = (obj, out={}) => {
 	return out;
 };
 
-module.exports = { flattenObj };
+module.exports = { flattenObj };

package/jest.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-	testPathIgnorePatterns: [
-		'/node_modules/',
-		'/cypress/',
-		'/test/',
-	],
+	testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/test/'],
 	transform: {
 		'.(js|jsx)': '@sucrase/jest-plugin',
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "27.7.1",
+  "version": "28.0.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": {
@@ -26,11 +26,11 @@
   "homepage": "https://github.com/Financial-Times/n-conversion-forms#readme",
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@financial-times/n-pricing": "5.6.1",
     "classnames": "2.3.1",
     "fetchres": "1.7.2",
     "lodash.get": "4.4.2",
-    "n-common-static-data": "github:Financial-Times/n-common-static-data#v1.7.1",
-    "@financial-times/n-pricing": "5.6.1"
+    "n-common-static-data": "github:Financial-Times/n-common-static-data#v1.7.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.5",
@@ -38,38 +38,35 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
-    "@financial-times/eslint-config-next": "^3.0.0",
+    "@financial-times/eslint-config-next": "^6.0.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
     "@financial-times/n-gage": "^8.2.0",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-essentials": "6.5.13",
     "@storybook/react": "^6.5.13",
     "@sucrase/jest-plugin": "^2.0.0",
-    "chai": "^4.2.0",
     "check-engines": "^1.5.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.4",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.1",
     "fetch-mock": "^7.2.0",
     "jest": "^26.0.0",
     "jest-serializer-html": "^7.0.0",
     "jsdom": "15.1.0",
-    "lint-staged": "^11.2.6",
-    "mocha": "5.1.1",
+    "lint-staged": "^13.0.4",
     "pa11y-ci": "2.1.1",
-    "postcss": "^7.0.32",
-    "prettier": "2.4.1",
+    "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.3",
     "prop-types": "15.7.2",
-    "proxyquire": "2.1.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-is": "^16.13.1",
     "sass": "^1.55.0",
     "sass-loader": "^10.2.1",
-    "sinon": "6.3.5",
     "snyk": "1.230.7"
   },
   "engines": {
@@ -83,8 +80,8 @@
   "husky": {
     "hooks": {
       "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
-      "pre-commit": "node_modules/.bin/secret-squirrel && npm run lint",
-      "pre-push": "make test"
+      "pre-commit": "node_modules/.bin/secret-squirrel && pretty-quick --staged && npm run lint",
+      "pre-push": "pretty-quick --staged && make test"
     }
   },
   "peerDependencies": {

package/styles/message.scss

@@ -4,20 +4,4 @@
 			margin-top: 0;
 		}
 	}
-
-	// Change the colour of messages inside the wrapper
-	// to look better with a white background
-	.ncf__wrapper & &__message {
-		.o-message--error {
-			color: oColorsByName('crimson');
-			background-color: oColorsMix('crimson', 'white', 10);
-
-			.o-message__actions__primary {
-				background-color: oColorsMix('crimson', 'white', 10);
-				&:hover {
-					background-color: oColorsMix('crimson', 'white', 20);
-				}
-			}
-		}
-	}
 }

package/test-jest/helpers/expect-to-render-correctly.js

@@ -1,7 +1,7 @@
 import ReactDOMServer from 'react-dom/server';
 
 export const expectToRenderCorrectly = {
-	toRenderCorrectly (reactComponent, props) {
+	toRenderCorrectly(reactComponent, props) {
 		// Render the React component with props.
 		const ReactComponentRendered = ReactDOMServer.renderToStaticMarkup(
 			reactComponent(props)

package/utils/app-banner.js

@@ -1,5 +1,5 @@
 class AppBanner {
-	constructor (window) {
+	constructor(window) {
 		if (!window) {
 			throw new Error('Please supply a Window object');
 		}

package/utils/apple-pay.js

@@ -38,7 +38,7 @@ class ApplePay {
 	 * @param {Object} options PaymentRequest API payment options object
 	 * @throws If browser doesn't support PaymentRequest API
 	 */
-	constructor (
+	constructor(
 		window,
 		methods = ApplePay.PAYMENT_METHODS,
 		details = ApplePay.PAYMENT_DETAILS,
@@ -63,7 +63,7 @@ class ApplePay {
 	 * Proxy call through to the request
 	 * @return {Promise<Boolean>}
 	 */
-	canMakePayment () {
+	canMakePayment() {
 		return this.request.canMakePayment();
 	}
 
@@ -72,7 +72,7 @@ class ApplePay {
 	 * @param {Object} paymentDetails Optional payment details object for update
 	 * @return {Promise<Object>} Response object from apple pay
 	 */
-	show (paymentDetails) {
+	show(paymentDetails) {
 		// Work around to enable the update of payment details for safari
 		// browsers as it seems not to be supported, regenerates PaymentRequest
 		if (paymentDetails) {
@@ -92,7 +92,7 @@ class ApplePay {
 	 * Validate ourselves via membership
 	 * @param {Object} event
 	 */
-	async handleMerchantValidation (event) {
+	async handleMerchantValidation(event) {
 		const merchantId = ApplePay.getMerchantId(this.methods);
 		const url = ApplePay.getMerchantValidationUrl(merchantId);
 		const data = {
@@ -123,7 +123,7 @@ class ApplePay {
 	 * @param {Array} methods
 	 * @return {String}
 	 */
-	static getMerchantId (methods = []) {
+	static getMerchantId(methods = []) {
 		const method = methods[0] || {};
 		return (
 			(method.data && method.data.merchantIdentifier) || ApplePay.MERCHANT_ID
@@ -135,7 +135,7 @@ class ApplePay {
 	 * @param {String} merchantId
 	 * @return {String}
 	 */
-	static getMerchantValidationUrl (merchantId) {
+	static getMerchantValidationUrl(merchantId) {
 		if (merchantId === ApplePay.TEST_MERCHANT_ID) {
 			return ApplePay.TEST_MERCHANT_VALIDATION_URL;
 		}
@@ -148,7 +148,7 @@ class ApplePay {
 	 * @param {String} currency ISO 3 digit currency code
 	 * @param {String} label Product name
 	 */
-	static getPaymentDetails (value, currency, label) {
+	static getPaymentDetails(value, currency, label) {
 		const details = ApplePay.PAYMENT_DETAILS;
 		details.total.label = label;
 		details.total.amount.value = value;
@@ -160,7 +160,7 @@ class ApplePay {
 	 * Expose the production merchant id
 	 * @return {String}
 	 */
-	static get MERCHANT_ID () {
+	static get MERCHANT_ID() {
 		return 'merchant.com.ft';
 	}
 
@@ -168,7 +168,7 @@ class ApplePay {
 	 * Expose the production merchant validation url
 	 * @return {String}
 	 */
-	static get MERCHANT_VALIDATION_URL () {
+	static get MERCHANT_VALIDATION_URL() {
 		return 'https://api.ft.com/idm/v1/apple-merchant-validation/validate';
 	}
 
@@ -176,7 +176,7 @@ class ApplePay {
 	 * Expose production payment methods
 	 * @return {Array}
 	 */
-	static get PAYMENT_METHODS () {
+	static get PAYMENT_METHODS() {
 		return [
 			{
 				supportedMethods: 'https://apple.com/apple-pay',
@@ -195,7 +195,7 @@ class ApplePay {
 	 * Default payment details
 	 * @return {Object}
 	 */
-	static get PAYMENT_DETAILS () {
+	static get PAYMENT_DETAILS() {
 		return {
 			total: {
 				label: 'FT.com',
@@ -211,7 +211,7 @@ class ApplePay {
 	 * Default payment options
 	 * @return {Object}
 	 */
-	static get PAYMENT_OPTIONS () {
+	static get PAYMENT_OPTIONS() {
 		return {
 			requestPayerName: false,
 			requestPayerEmail: false,
@@ -224,7 +224,7 @@ class ApplePay {
 	 * Expose the test merchant id
 	 * @return {String}
 	 */
-	static get TEST_MERCHANT_ID () {
+	static get TEST_MERCHANT_ID() {
 		return 'merchant.test.env.apple.pay';
 	}
 
@@ -232,7 +232,7 @@ class ApplePay {
 	 * Expose the test merchant validation url
 	 * @return {String}
 	 */
-	static get TEST_MERCHANT_VALIDATION_URL () {
+	static get TEST_MERCHANT_VALIDATION_URL() {
 		return 'https://api-t.ft.com/idm/v1/apple-merchant-validation/validate';
 	}
 
@@ -240,7 +240,7 @@ class ApplePay {
 	 * Expose the test payment methods
 	 * @return {Array}
 	 */
-	static get TEST_PAYMENT_METHODS () {
+	static get TEST_PAYMENT_METHODS() {
 		return [
 			{
 				supportedMethods: 'https://apple.com/apple-pay',

package/utils/billing-city.js

@@ -1,7 +1,7 @@
 const FormElement = require('./form-element');
 
 class BillingCity extends FormElement {
-	constructor (document) {
+	constructor(document) {
 		super(document, '.ncf #billingCityField');
 	}
 }

package/utils/billing-country.js

@@ -15,7 +15,7 @@ class BillingCountry {
 	 * @throws If the document not passed
 	 * @throws When the country element not found
 	 */
-	constructor (element) {
+	constructor(element) {
 		if (!element) {
 			throw new Error('Please supply a DOM element');
 		}
@@ -32,7 +32,7 @@ class BillingCountry {
 	 * Register an event listener
 	 * @param {Function} callback Called with event when changed
 	 */
-	onChange (callback = () => {}) {
+	onChange(callback = () => {}) {
 		return this.$billingCountry.addEventListener('change', callback);
 	}
 
@@ -41,7 +41,7 @@ class BillingCountry {
 	 * @return {String}
 	 * @throws If nothing has been selected
 	 */
-	getSelected () {
+	getSelected() {
 		const selected =
 			this.$billingCountry.options[this.$billingCountry.selectedIndex];
 		if (!selected) {

package/utils/billing-postcode.js

@@ -1,7 +1,7 @@
 const Postcode = require('./postcode');
 
 class BillingPostcode extends Postcode {
-	constructor (document) {
+	constructor(document) {
 		super(document, '.ncf #billingPostcodeField');
 	}
 }

package/utils/company-name.js

@@ -1,7 +1,7 @@
 const FormElement = require('./form-element');
 
 class CompanyName extends FormElement {
-	constructor (document, fieldId = 'companyNameField') {
+	constructor(document, fieldId = 'companyNameField') {
 		super(document, `.ncf #${fieldId}`);
 	}
 }

package/utils/countries.js

@@ -7,7 +7,7 @@ const { countries } = require('n-common-static-data').billingCountries;
  * @param {array} options.filter Only returns countries within the filter list if supplied
  * @param {number} options.minimumToGroup Only show groupings if there are over this amount of countries
  */
-function getCountries ({ value, filter = [], minimumToGroup = 20 } = {}) {
+function getCountries({ value, filter = [], minimumToGroup = 20 } = {}) {
 	let data = countries;
 
 	// Only show countries in the filter
@@ -41,7 +41,7 @@ function getCountries ({ value, filter = [], minimumToGroup = 20 } = {}) {
  * @param {string} options.alphabeticalLabel Label to use for all other countries
  * @return {array}
  */
-function groupCountries (
+function groupCountries(
 	countries,
 	{
 		minimumToShowGroups = 2,

package/utils/country.js

@@ -15,7 +15,7 @@ class Country {
 	 * @throws If the document not passed
 	 * @throws When the country element not found
 	 */
-	constructor (element) {
+	constructor(element) {
 		if (!element) {
 			throw new Error('Please supply a DOM element');
 		}
@@ -32,7 +32,7 @@ class Country {
 	 * Register an event listener
 	 * @param {Function} callback Called with event when changed
 	 */
-	onChange (callback = () => {}) {
+	onChange(callback = () => {}) {
 		return this.$country.addEventListener('change', callback);
 	}
 
@@ -41,7 +41,7 @@ class Country {
 	 * @return {String}
 	 * @throws If nothing has been selected
 	 */
-	getSelected () {
+	getSelected() {
 		const selected = this.$country.options[this.$country.selectedIndex];
 		if (!selected) {
 			throw new Error('No country has been selected');

package/utils/delivery-address-type.js

@@ -11,7 +11,7 @@ class DeliveryAdressType {
 	 * @throws If the document not passed
 	 * @throws When the country element not found
 	 */
-	constructor (element, fieldId = 'deliveryAddressTypeField') {
+	constructor(element, fieldId = 'deliveryAddressTypeField') {
 		if (!element) {
 			throw new Error('Please supply a DOM element');
 		}
@@ -29,7 +29,7 @@ class DeliveryAdressType {
 	 * @return {String}
 	 * @throws If nothing has been selected
 	 */
-	getSelected () {
+	getSelected() {
 		const checked = this.$deliveryAddressType.querySelector('input:checked');
 		if (!checked) {
 			throw new Error('No address type has been selected');
@@ -41,7 +41,7 @@ class DeliveryAdressType {
 	 * Register an event listener
 	 * @param {Function} callback Called with event when changed
 	 */
-	onChange (callback) {
+	onChange(callback) {
 		return (
 			typeof callback === 'function' &&
 			this.$deliveryAddressType.addEventListener('change', callback)

package/utils/delivery-address-type.spec.js

@@ -36,7 +36,9 @@ describe('Delivery Address Type - Util', () => {
 				<body>${component.html()}</body>
 				</html>`;
 
-			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(document);
+			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(
+				document
+			);
 			expect(deliveryAdressTypeUtilInstance.getSelected()).toEqual('home');
 		});
 
@@ -54,7 +56,9 @@ describe('Delivery Address Type - Util', () => {
 				<body>${component.html()}</body>
 				</html>`;
 
-			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(document);
+			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(
+				document
+			);
 			expect(deliveryAdressTypeUtilInstance.getSelected()).toEqual(props.value);
 		});
 	});

package/utils/delivery-address.js

@@ -1,7 +1,7 @@
 const FormElement = require('./form-element');
 
 class DeliveryAddress extends FormElement {
-	constructor (document, fieldId = 'deliveryAddressFields') {
+	constructor(document, fieldId = 'deliveryAddressFields') {
 		super(document, `.ncf #${fieldId}`);
 	}
 }

package/utils/delivery-instructions.js

@@ -1,7 +1,7 @@
 const FormElement = require('./form-element');
 
 class DeliveryInstructions extends FormElement {
-	constructor (document, fieldId = 'deliveryInstructionsField') {
+	constructor(document, fieldId = 'deliveryInstructionsField') {
 		super(document, `.ncf #${fieldId}`);
 	}
 }