@financial-times/n-conversion-forms 28.3.0 → 28.4.0

package/.circleci/config.yml

@@ -6,7 +6,7 @@ references:
   container_config_node: &container_config_node
     working_directory: ~/project/build
     docker:
-      - image: cimg/node:16.17-browsers
+      - image: cimg/node:16.19-browsers
   workspace_root: &workspace_root
     ~/project
 
@@ -53,9 +53,6 @@ references:
 
 version: 2.1
 
-orbs:
-  node: circleci/node@4.9.0
-
 jobs:
 
   build:
@@ -66,8 +63,9 @@ jobs:
           name: Checkout next-ci-shared-helpers
           command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git .circleci/shared-helpers
       - *restore_npm_cache
-      - node/install-npm:
-          version: "^7"
+      - run:
+          name: Install npm v7
+          command: npm install -g npm@7
       - run:
           name: Install project dependencies
           command: make install

package/build-state/npm-shrinkwrap.json

@@ -24133,7 +24133,7 @@
     "node_modules/puppeteer": {
       "version": "1.19.0",
       "integrity": "sha512-2S6E6ygpoqcECaagDbBopoSOPDv0pAZvTbnBgUY+6hq0/XDFDOLEMNlHF/SKJlzcaZ9ckiKjKDuueWI3FN/WXw==",
-      "deprecated": "< 19.2.0 is no longer supported",
+      "deprecated": "< 19.4.0 is no longer supported",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {

package/components/__snapshots__/payment-term.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`PaymentTerm When using custom options renders when not using an option in nameMap but provides a custom props instead 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class="ncf__payment-term__options-grid">
     <div class="ncf__payment-term__item o-forms-input--radio-round ncf__payment-term__item--discount">
@@ -68,6 +69,7 @@ exports[`PaymentTerm When using custom options renders when not using an option
 exports[`PaymentTerm annual option render option 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -119,6 +121,7 @@ exports[`PaymentTerm annual option render option 1`] = `
 exports[`PaymentTerm annual option render option with discount 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round ncf__payment-term__item--discount">
@@ -173,6 +176,7 @@ exports[`PaymentTerm annual option render option with discount 1`] = `
 exports[`PaymentTerm annual option render option with isTrial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -225,6 +229,7 @@ exports[`PaymentTerm annual option render option with isTrial 1`] = `
 exports[`PaymentTerm annual option render option with monthlyPrice 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -283,6 +288,7 @@ exports[`PaymentTerm annual option render option with monthlyPrice 1`] = `
 exports[`PaymentTerm annual option render option with selected 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -335,6 +341,7 @@ exports[`PaymentTerm annual option render option with selected 1`] = `
 exports[`PaymentTerm annual option render option with trial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -388,6 +395,7 @@ exports[`PaymentTerm annual option render option with trial 1`] = `
 exports[`PaymentTerm monthly option render option 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -438,6 +446,7 @@ exports[`PaymentTerm monthly option render option 1`] = `
 exports[`PaymentTerm monthly option render option with discount 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round ncf__payment-term__item--discount">
@@ -491,6 +500,7 @@ exports[`PaymentTerm monthly option render option with discount 1`] = `
 exports[`PaymentTerm monthly option render option with isTrial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -543,6 +553,7 @@ exports[`PaymentTerm monthly option render option with isTrial 1`] = `
 exports[`PaymentTerm monthly option render option with monthlyPrice 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -593,6 +604,7 @@ exports[`PaymentTerm monthly option render option with monthlyPrice 1`] = `
 exports[`PaymentTerm monthly option render option with selected 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -644,6 +656,7 @@ exports[`PaymentTerm monthly option render option with selected 1`] = `
 exports[`PaymentTerm monthly option render option with trial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -697,6 +710,7 @@ exports[`PaymentTerm monthly option render option with trial 1`] = `
 exports[`PaymentTerm quarterly option render option 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -747,6 +761,7 @@ exports[`PaymentTerm quarterly option render option 1`] = `
 exports[`PaymentTerm quarterly option render option with discount 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round ncf__payment-term__item--discount">
@@ -800,6 +815,7 @@ exports[`PaymentTerm quarterly option render option with discount 1`] = `
 exports[`PaymentTerm quarterly option render option with isTrial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -852,6 +868,7 @@ exports[`PaymentTerm quarterly option render option with isTrial 1`] = `
 exports[`PaymentTerm quarterly option render option with monthlyPrice 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -902,6 +919,7 @@ exports[`PaymentTerm quarterly option render option with monthlyPrice 1`] = `
 exports[`PaymentTerm quarterly option render option with selected 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -953,6 +971,7 @@ exports[`PaymentTerm quarterly option render option with selected 1`] = `
 exports[`PaymentTerm quarterly option render option with trial 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
     <div class="ncf__payment-term__item o-forms-input--radio-round">
@@ -1006,6 +1025,7 @@ exports[`PaymentTerm quarterly option render option with trial 1`] = `
 exports[`PaymentTerm render with defaults 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
   </div>
@@ -1032,6 +1052,7 @@ exports[`PaymentTerm render with defaults 1`] = `
 exports[`PaymentTerm render with isPrintOrBundle 1`] = `
 <div id="paymentTermField"
      class="o-forms__group ncf__payment-term"
+     data-country-code
 >
   <div class>
   </div>

package/components/payment-term.jsx

@@ -14,6 +14,7 @@ export function PaymentTerm({
 	showLegal = true,
 	largePrice = false,
 	optionsInARow = false,
+	billingCountry = '',
 }) {
 	/**
 	 * Compute monthly price for given term name
@@ -326,7 +327,11 @@ export function PaymentTerm({
 	};
 
 	return (
-		<div id={fieldId} className="o-forms__group ncf__payment-term">
+		<div
+			id={fieldId}
+			className="o-forms__group ncf__payment-term"
+			data-country-code={billingCountry}
+		>
 			<div className={optionsInARow ? 'ncf__payment-term__options-grid' : ''}>
 				{options.map((option) => createPaymentTerm(option))}
 			</div>
@@ -408,4 +413,5 @@ PaymentTerm.propTypes = {
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,
 	optionsInARow: PropTypes.bool,
+	billingCountry: PropTypes.string,
 };

package/dist/payment-term.js

@@ -31,7 +31,9 @@ function PaymentTerm(_ref) {
     _ref$largePrice = _ref.largePrice,
     largePrice = _ref$largePrice === void 0 ? false : _ref$largePrice,
     _ref$optionsInARow = _ref.optionsInARow,
-    optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow;
+    optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
+    _ref$billingCountry = _ref.billingCountry,
+    billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
@@ -242,7 +244,8 @@ function PaymentTerm(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     id: fieldId,
-    className: "o-forms__group ncf__payment-term"
+    className: "o-forms__group ncf__payment-term",
+    "data-country-code": billingCountry
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: optionsInARow ? 'ncf__payment-term__options-grid' : ''
   }, options.map(function (option) {
@@ -291,5 +294,6 @@ PaymentTerm.propTypes = {
   offerDisplayName: _propTypes["default"].string,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,
-  optionsInARow: _propTypes["default"].bool
+  optionsInARow: _propTypes["default"].bool,
+  billingCountry: _propTypes["default"].string
 };

package/package.json

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

@@ -56,6 +56,22 @@ class PaymentTerm {
 		return checked.getAttribute('value');
 	}
 
+	/**
+	 * Returns country code
+	 * @return {string}
+	 */
+	getCountryCode() {
+		return this.$paymentTerm.dataset.countryCode;
+	}
+
+	/**
+	 * Update country code
+	 * @return {string}
+	 */
+	updateCountryCode(countryCode) {
+		this.$paymentTerm.dataset.countryCode = countryCode;
+	}
+
 	/**
 	 * Returns the base amount for the selected payment term
 	 * @return {Number}
@@ -68,7 +84,6 @@ class PaymentTerm {
 		}
 		return checked.dataset.baseAmount;
 	}
-
 	/**
 	 * Register on change an event listener
 	 * @param {Function} callback Called with event when changed

package/utils/payment-term.spec.js

@@ -19,6 +19,7 @@ describe('PaymentTerm', () => {
 			value: 'test',
 			dataset: {
 				baseAmount: 100,
+				countryCode: 'GBP',
 			},
 		};
 		documentStub = {
@@ -193,6 +194,13 @@ describe('PaymentTerm', () => {
 					expect(returnedAmount).toBe(99);
 				});
 			});
+
+			describe('getCountryCode', () => {
+				it('returns countryCode of the selected term', () => {
+					const countryCode = paymentTerm.getCountryCode();
+					expect(countryCode).toBe('GBP');
+				});
+			});
 		});
 	});
 });