@financial-times/n-conversion-forms 20.3.4 → 20.4.2

package/.circleci/config.yml

@@ -77,9 +77,6 @@ jobs:
       - run:
           name: Install project dependencies
           command: make install
-      - run:
-          name: shared-helper / npm-update
-          command: .circleci/shared-helpers/helper-npm-update
       - run:
           name: Run the project build task
           command: make build

package/.github/workflows/gh-pages-deploy.yml

@@ -11,7 +11,7 @@ jobs:
     name: Deploying Storybook
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 14.x
       - uses: actions/checkout@v2

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

@@ -185,7 +185,7 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
   >
     <span class="o-forms-title">
       <span class="o-forms-title__main">
-        Apt/Floor/Suite
+        APT/FL/STE
       </span>
       <span class="o-forms-title__prompt">
         Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”
@@ -197,7 +197,7 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
              name="deliveryAddressLine3"
              data-trackable="field-deliveryAddressLine3"
              autocomplete="address-line3"
-             placeholder="e.g Apt 2C / FL 10 / STE 5"
+             placeholder="e.g Apt 2C / FL 10 / STE 50"
              maxlength="50"
              value
       >

package/components/__snapshots__/graduation-date.spec.js.snap

@@ -71,9 +71,6 @@ exports[`GraduationDate renders with default props 1`] = `
                 name="graduationDateYear"
                 aria-required="false"
         >
-          <option value="2017">
-            2017
-          </option>
           <option value="2018">
             2018
           </option>
@@ -98,6 +95,9 @@ exports[`GraduationDate renders with default props 1`] = `
           <option value="2025">
             2025
           </option>
+          <option value="2026">
+            2026
+          </option>
         </select>
       </span>
     </div>

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

@@ -12,7 +12,7 @@ exports[`Password can render a disable input 1`] = `
       Password
     </span>
     <span class="o-forms-title__prompt">
-      Use 8 or more characters with a mix of letters, numbers &amp; symbols
+      Use 8 or more characters. You can use letters, numbers or symbols
     </span>
   </label>
   <div class="o-forms-input o-forms-input--password o-forms-input--checkbox o-forms-input--suffix">
@@ -58,7 +58,7 @@ exports[`Password can render a pattern attribute 1`] = `
       Password
     </span>
     <span class="o-forms-title__prompt">
-      Use 8 or more characters with a mix of letters, numbers &amp; symbols
+      Use 8 or more characters. You can use letters, numbers or symbols
     </span>
   </label>
   <div class="o-forms-input o-forms-input--password o-forms-input--checkbox o-forms-input--suffix">
@@ -104,7 +104,7 @@ exports[`Password can render as an Error 1`] = `
       Password
     </span>
     <span class="o-forms-title__prompt">
-      Use 8 or more characters with a mix of letters, numbers &amp; symbols
+      Use 8 or more characters. You can use letters, numbers or symbols
     </span>
   </label>
   <div class="o-forms-input o-forms-input--password o-forms-input--checkbox o-forms-input--suffix o-forms-input--invalid">
@@ -149,7 +149,7 @@ exports[`Password can render as an Unknown user 1`] = `
       Password
     </span>
     <span class="o-forms-title__prompt">
-      Use 8 or more characters with a mix of letters, numbers &amp; symbols
+      Use 8 or more characters. You can use letters, numbers or symbols
     </span>
   </label>
   <div class="o-forms-input o-forms-input--password o-forms-input--checkbox o-forms-input--suffix">
@@ -194,7 +194,7 @@ exports[`Password render a password input with a label where input ID and Name a
       Password
     </span>
     <span class="o-forms-title__prompt">
-      Use 8 or more characters with a mix of letters, numbers &amp; symbols
+      Use 8 or more characters. You can use letters, numbers or symbols
     </span>
   </label>
   <div class="o-forms-input o-forms-input--password o-forms-input--checkbox o-forms-input--suffix">

package/components/delivery-address.jsx

@@ -22,8 +22,8 @@ export function DeliveryAddress ({
 
 	const addressLine3Title = {
 		GBR: 'Address line 3',
-		USA: 'Apt/Floor/Suite',
-		CAN: 'Apt/Floor/Suite',
+		USA: 'APT/FL/STE',
+		CAN: 'APT/FL/STE',
 	};
 
 	const addressLine3Prompt = {
@@ -32,8 +32,8 @@ export function DeliveryAddress ({
 	};
 
 	const addressLine3Placeholder = {
-		USA: 'e.g Apt 2C / FL 10 / STE 5',
-		CAN: 'e.g Apt 2C / FL 10 / STE 5',
+		USA: 'e.g Apt 2C / FL 10 / STE 50',
+		CAN: 'e.g Apt 2C / FL 10 / STE 50',
 	};
 
 	const addressLine1Placeholder = {

package/components/password.jsx

@@ -12,7 +12,7 @@ export function Password ({
 	inputName,
 	label = 'Password',
 	placeholder = 'Enter a password',
-	description = 'Use 8 or more characters with a mix of letters, numbers & symbols',
+	description = 'Use 8 or more characters. You can use letters, numbers or symbols',
 	showDescription = true,
 	hasShowPassword = true,
 }) {

package/dist/delivery-address.js

@@ -38,16 +38,16 @@ function DeliveryAddress(_ref) {
   }]);
   var addressLine3Title = {
     GBR: 'Address line 3',
-    USA: 'Apt/Floor/Suite',
-    CAN: 'Apt/Floor/Suite'
+    USA: 'APT/FL/STE',
+    CAN: 'APT/FL/STE'
   };
   var addressLine3Prompt = {
     USA: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”',
     CAN: 'Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”'
   };
   var addressLine3Placeholder = {
-    USA: 'e.g Apt 2C / FL 10 / STE 5',
-    CAN: 'e.g Apt 2C / FL 10 / STE 5'
+    USA: 'e.g Apt 2C / FL 10 / STE 50',
+    CAN: 'e.g Apt 2C / FL 10 / STE 50'
   };
   var addressLine1Placeholder = {
     GBR: 'e.g. 10 Elm Street',

package/dist/password.js

@@ -32,7 +32,7 @@ function Password(_ref) {
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? 'Enter a password' : _ref$placeholder,
       _ref$description = _ref.description,
-      description = _ref$description === void 0 ? 'Use 8 or more characters with a mix of letters, numbers & symbols' : _ref$description,
+      description = _ref$description === void 0 ? 'Use 8 or more characters. You can use letters, numbers or symbols' : _ref$description,
       _ref$showDescription = _ref.showDescription,
       showDescription = _ref$showDescription === void 0 ? true : _ref$showDescription,
       _ref$hasShowPassword = _ref.hasShowPassword,

package/package.json

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

@@ -43,7 +43,7 @@ class Zuora {
 	 * @param {Object} prePopulatedFields Parameters with field ids and values to be pre-populated on the form
 	 * @param {Function} renderCallback A function that gets called after the form is rendered.
 	 */
-	render ({ params, prePopulatedFields = {}, renderCallback = () => {} }) {
+	render ({ params, prePopulatedFields = {}, renderCallback = () => {}, captchaCallback = () => {} }) {
 		// Using an undocumented Zuora method to attach a render callback for the iframe.
 		// This method is called once when the iframe is rendered but gets removed for subsequent renderings.
 		// In the Zuora code https://static.zuora.com/Resources/libs/hosted/1.3.1/zuora.js
@@ -71,6 +71,16 @@ class Zuora {
 				this.Z.sendErrorMessageToHpm(key, errorMessage);
 			}
 		);
+
+		// if we have RECAPTCHA enabled for a given app id this allows the application
+		// to hide/show the loader so it is not in the way of completing the challenge
+		// docs: https://knowledgecenter.zuora.com/Billing/Billing_and_Payments/LA_Hosted_Payment_Pages/B_Payment_Pages_2.0/Configure_Advanced_Security_Checks_for_Payment_Pages_2.0
+		/**
+		 * Z.setEventHandler - Zuora 3rd party method
+		 * @param {string}    event name
+		 * @param {Function}  anonymous - expects a single argument - event
+		 */
+		this.Z.setEventHandler('onCaptchaStateChange', captchaCallback);
 	}
 
 	/**