@financial-times/n-conversion-forms 46.0.0 → 47.0.0

package/helpers/duration-helpers.js

@@ -0,0 +1,104 @@
+/**
+ * Returns period converted to time if found
+ * otherwise returns empty string to avoid show information not mapped.
+ * @param {string} iso8601Value: PxY (yearly), PxM (montly), PxW (weekly), of PxD (daily), where x is the amount of years/months/weeks/days
+ * @param {boolean} excludeAmountWhenSingular: Omits the amount from the returned string when the discerned amount is singular.
+ * @returns {string}
+ */
+const getDurationFromISO8601Value = ({
+	iso8601Value,
+	excludeAmountWhenSingular = true,
+}) => {
+	const amount = iso8601Value.substring(1, iso8601Value.length - 1);
+
+	const PERIOD_UNIT_CODE_TO_PLURAL_TERM_MAP = {
+		Y: 'years',
+		M: 'months',
+		W: 'weeks',
+		D: 'days',
+	};
+
+	const PERIOD_UNIT_CODE_TO_SINGULAR_TERM_MAP = {
+		Y: 'year',
+		M: 'month',
+		W: 'week',
+		D: 'day',
+	};
+
+	const periodUnitCode = iso8601Value.substring(iso8601Value.length - 1);
+
+	if (iso8601Value) {
+		const unit =
+			amount === '1'
+				? PERIOD_UNIT_CODE_TO_SINGULAR_TERM_MAP[periodUnitCode] || ''
+				: PERIOD_UNIT_CODE_TO_PLURAL_TERM_MAP[periodUnitCode] || '';
+
+		return amount === '1' && excludeAmountWhenSingular
+			? unit
+			: `${amount} ${unit}`;
+	}
+
+	return '';
+};
+
+const DAYS_IN_A_YEAR = 365; // Disregarding leap years
+const DAYS_IN_A_MONTH = 30; // Approximate
+const DAYS_IN_A_WEEK = 7;
+
+const DAYS_IN_90_DAYS = 90;
+const DAYS_IN_52_WEEKS = 52 * DAYS_IN_A_WEEK;
+
+/**
+ * Parses an ISO 8601 duration string and converts it into an approximate total number of days.
+ * @param {string} iso8601Duration: PxY (yearly), PxM (monthly), PxW (weekly), or PxD (daily), where x is the amount.
+ * @returns {number|null} Total number of days represented by the duration or null if the input is not a valid ISO 8601 duration.
+ */
+const parseISODurationToDays = (iso8601Duration) => {
+	const match = iso8601Duration.match(
+		/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)W)?(?:(\d+)D)?$/
+	);
+
+	if (!match) return null;
+
+	const years = Number(match[1] ?? 0);
+	const months = Number(match[2] ?? 0);
+	const weeks = Number(match[3] ?? 0);
+	const days = Number(match[4] ?? 0);
+
+	return (
+		years * DAYS_IN_A_YEAR +
+		months * DAYS_IN_A_MONTH +
+		weeks * DAYS_IN_A_WEEK +
+		days
+	);
+};
+
+/**
+ * Approximate check of whether an ISO 8601 duration is 52 weeks or shorter.
+ * @param {string} iso8601Duration
+ * @returns {boolean}
+ */
+const is52WeeksOrLonger = (iso8601Duration) => {
+	const totalDays = parseISODurationToDays(iso8601Duration);
+	if (totalDays === null) return false;
+
+	return totalDays >= DAYS_IN_52_WEEKS;
+};
+
+/**
+ * Approximate check of whether an ISO 8601 duration is 90 days or longer.
+ * @param {string} iso8601Duration
+ * @returns {boolean}
+ */
+const is90DaysOrLonger = (iso8601Duration) => {
+	const totalDays = parseISODurationToDays(iso8601Duration);
+	if (totalDays === null) return false;
+
+	return totalDays >= DAYS_IN_90_DAYS;
+};
+
+module.exports = {
+	getDurationFromISO8601Value,
+	is52WeeksOrLonger,
+	is90DaysOrLonger,
+};

package/helpers/duration-helpers.spec.js

@@ -0,0 +1,175 @@
+const {
+	getDurationFromISO8601Value,
+	is52WeeksOrLonger,
+	is90DaysOrLonger,
+} = require('./duration-helpers');
+
+describe('Duration Utils', () => {
+	describe('getDurationFromISO8601Value', () => {
+		describe('plural units', () => {
+			const PLURAL_UNITS = [
+				{
+					input: 'P3Y',
+					expectation: '3 years',
+				},
+				{
+					input: 'P26M',
+					expectation: '26 months',
+				},
+				{
+					input: 'P2Y',
+					expectation: '2 years',
+				},
+				{
+					input: 'P13M',
+					expectation: '13 months',
+				},
+				{
+					input: 'P52W',
+					expectation: '52 weeks',
+				},
+				{
+					input: 'P6M',
+					expectation: '6 months',
+				},
+				{
+					input: 'P13W',
+					expectation: '13 weeks',
+				},
+				{
+					input: 'P3M',
+					expectation: '3 months',
+				},
+				{
+					input: 'P8W',
+					expectation: '8 weeks',
+				},
+			];
+
+			PLURAL_UNITS.forEach(({ input, expectation }) => {
+				it(`returns "${expectation}" for ${input}`, () => {
+					expect(getDurationFromISO8601Value({ iso8601Value: input })).toBe(
+						expectation
+					);
+				});
+			});
+		});
+
+		describe('singular units', () => {
+			describe('excludeAmountWhenSingular is true', () => {
+				const SINGULAR_UNITS = [
+					{
+						input: 'P1Y',
+						expectation: 'year',
+					},
+					{
+						input: 'P1M',
+						expectation: 'month',
+					},
+				];
+
+				SINGULAR_UNITS.forEach(({ input, expectation }) => {
+					it(`returns "${expectation}" for ${input}`, () => {
+						expect(
+							getDurationFromISO8601Value({
+								iso8601Value: input,
+								excludeAmountWhenSingular: true,
+							})
+						).toBe(expectation);
+					});
+				});
+			});
+
+			describe('excludeAmountWhenSingular is false', () => {
+				const SINGULAR_UNITS = [
+					{
+						input: 'P1Y',
+						expectation: '1 year',
+					},
+					{
+						input: 'P1M',
+						expectation: '1 month',
+					},
+				];
+
+				SINGULAR_UNITS.forEach(({ input, expectation }) => {
+					it(`returns "${expectation}" for ${input}`, () => {
+						expect(
+							getDurationFromISO8601Value({
+								iso8601Value: input,
+								excludeAmountWhenSingular: false,
+							})
+						).toBe(expectation);
+					});
+				});
+			});
+		});
+	});
+
+	describe('is52WeeksOrLonger', () => {
+		describe('returns true for durations >= 52 weeks', () => {
+			const DURATIONS_OF_52_WEEKS_OR_MORE = [
+				'P3Y',
+				'P26M',
+				'P2Y',
+				'P13M',
+				'P1Y',
+				'P52W',
+			];
+
+			DURATIONS_OF_52_WEEKS_OR_MORE.forEach((duration) => {
+				it(`returns true for ${duration}`, () => {
+					expect(is52WeeksOrLonger(duration)).toBe(true);
+				});
+			});
+		});
+
+		describe('returns false for durations < 52 weeks', () => {
+			const DURATIONS_OF_LESS_THAN_52_WEEKS = [
+				'P8W',
+				'P1M',
+				'P3M',
+				'P13W',
+				'P6M',
+			];
+
+			DURATIONS_OF_LESS_THAN_52_WEEKS.forEach((duration) => {
+				it(`returns false for ${duration}`, () => {
+					expect(is52WeeksOrLonger(duration)).toBe(false);
+				});
+			});
+		});
+	});
+
+	describe('is90DaysOrLonger', () => {
+		describe('returns true for durations >= 90 days', () => {
+			const DURATIONS_OF_90_DAYS_OR_MORE = [
+				'P3Y',
+				'P26M',
+				'P2Y',
+				'P13M',
+				'P1Y',
+				'P52W',
+				'P6M',
+				'P13W',
+				'P3M',
+			];
+
+			DURATIONS_OF_90_DAYS_OR_MORE.forEach((duration) => {
+				it(`returns true for ${duration}`, () => {
+					expect(is90DaysOrLonger(duration)).toBe(true);
+				});
+			});
+		});
+
+		describe('returns false for durations < 90 days', () => {
+			const DURATIONS_OF_LESS_THAN_90_DAYS = ['P8W', 'P1M'];
+
+			DURATIONS_OF_LESS_THAN_90_DAYS.forEach((duration) => {
+				it(`returns false for ${duration}`, () => {
+					expect(is90DaysOrLonger(duration)).toBe(false);
+				});
+			});
+		});
+	});
+});

package/helpers/index.js

@@ -14,4 +14,8 @@ module.exports = {
 	allSupportedPostcodeExamples: require('./supportedPostcodeExamples')
 		.allSupportedPostcodeExamples,
 	billingCountries: require('./billing-countries').billingCountries,
+	getDurationFromISO8601Value:
+		require('./duration-helpers').getDurationFromISO8601Value,
+	is52WeeksOrLonger: require('./duration-helpers').is52WeeksOrLonger,
+	is90DaysOrLonger: require('./duration-helpers').is90DaysOrLonger,
 };

package/helpers/index.spec.js

@@ -45,4 +45,16 @@ describe('helpers', () => {
 	it('export allSupportedPostcodeExamples', () => {
 		expect(helpers).toHaveProperty('allSupportedPostcodeExamples');
 	});
+
+	it('export getDurationFromISO8601Value', () => {
+		expect(helpers).toHaveProperty('getDurationFromISO8601Value');
+	});
+
+	it('export is52WeeksOrLonger', () => {
+		expect(helpers).toHaveProperty('is52WeeksOrLonger');
+	});
+
+	it('export is90DaysOrLonger', () => {
+		expect(helpers).toHaveProperty('is90DaysOrLonger');
+	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "46.0.0",
+  "version": "47.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": {

package/styles/payment-term.scss

@@ -58,6 +58,10 @@
       margin: 20px 0;
     }
 
+    &__price, &__monthly-price, &__trial-price {
+      font-weight: var(--o3-font-weight-semibold);
+    }
+
     &__equivalent-price {
       font-family: var(--o3-type-detail-font-family);
       font-size: var(--o3-type-detail-font-size);
@@ -66,10 +70,6 @@
       display: block;
     }
 
-    &__monthly-price {
-      font-weight: var(--o3-font-weight-semibold);
-    }
-
     &__large-price {
       font-size: var(--o3-font-size-metric2-5);
       line-height: var(--o3-font-lineheight-metric2-5);
@@ -108,4 +108,4 @@
       margin-bottom: 2px;
     }
   }
-}
+}

package/styles/payment-type.scss

@@ -37,6 +37,15 @@
   }
 }
 
+.o-forms-input--radio-box .o-forms-input--radio-box__container.ncf__payment-type--applepay {
+
+  // when the radio button is not checked
+  [type='radio']+.o-forms-input__label {
+    color: var(--o3-color-palette-black);
+  }
+
+}
+
 @mixin ncfPaymentType() {
 
   // #1 - Need to be this specific to override specific o-forms styles.
@@ -64,7 +73,7 @@
 
       span {
         max-height: none;
-        
+
         @include oGridRespondTo($from: L) {
           line-height: var(--o3-spacing-2xs);
         }
@@ -138,4 +147,4 @@
 
 .o-forms-input.o-forms-input--checkbox.o-forms-input--suffix.ncf__payment-type-pay-faster-next-time-checkbox {
   margin-top: var(--o3-spacing-3xs);
-}
+}