@financial-times/n-conversion-forms 26.0.0 → 27.0.0

package/components/__snapshots__/b2c-partnership-confirmation.spec.js.snap

@@ -7,7 +7,7 @@ exports[`B2CPartnershipConfirmation renders as default 1`] = `
     </div>
     <div class="ncf__paragraph">
       <h1 class="ncf__header ncf__header--confirmation">
-        Welcome to your three months&#x27; Premium access
+        Welcome to your 30 days&#x27; Premium access
       </h1>
     </div>
   </div>

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

@@ -14,9 +14,6 @@ exports[`Confirmation renders appropriately if is B2C Partnership 1`] = `
   <p class="ncf__paragraph">
     We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
   </p>
-  <p>
-    We&#x27;ve also sent you an email to start your 90-day All Access Digital subscription with The Washington Post.
-  </p>
   <p class="ncf__paragraph">
     Here’s a summary of your  subscription:
   </p>

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

@@ -5,7 +5,7 @@ exports[`Debug renders with default props 1`] = `""`;
 exports[`Debug renders with isTest 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--inverse ncf__debug-button--test"
+    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test"
        onclick="setTestEnvironment('off');"
     >
       <strong>
@@ -30,7 +30,7 @@ exports[`Debug renders with isTest 1`] = `
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -54,9 +54,12 @@ exports[`Debug renders with isTest 1`] = `
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -75,7 +78,7 @@ exports[`Debug renders with isTest 1`] = `
 
 		var inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);
 		inputs.forEach(function (input) {
-			if (!/hidden/i.test(input.type)) {
+			if (!/hidden/i.test(input.type) && input.disabled === false) {
 				var value = debugData[input.name];
 				input.value = value;
 				input.dispatchEvent(changeEvent);
@@ -130,6 +133,9 @@ exports[`Debug renders with isTest 1`] = `
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 </style>
 `;
 
@@ -138,7 +144,7 @@ exports[`Debug renders with links 1`] = `""`;
 exports[`Debug renders with showHelpers 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--inverse ncf__debug-button--production"
+    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production"
        onclick="setTestEnvironment('on');"
     >
       <strong>
@@ -148,19 +154,19 @@ exports[`Debug renders with showHelpers 1`] = `
     </a>
   </span>
   <span class="ncf__debug-helpers">
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="logout();"
             title="Logout and refresh"
     >
       Logout
     </button>
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="fillForm();"
             title="Fill form with debug data"
     >
       Fill
     </button>
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="fillForm(); submitForm();"
             title="Fill form with debug data and submit"
     >
@@ -183,7 +189,7 @@ exports[`Debug renders with showHelpers 1`] = `
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -207,9 +213,12 @@ exports[`Debug renders with showHelpers 1`] = `
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -228,7 +237,7 @@ exports[`Debug renders with showHelpers 1`] = `
 
 		var inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);
 		inputs.forEach(function (input) {
-			if (!/hidden/i.test(input.type)) {
+			if (!/hidden/i.test(input.type) && input.disabled === false) {
 				var value = debugData[input.name];
 				input.value = value;
 				input.dispatchEvent(changeEvent);
@@ -283,5 +292,8 @@ exports[`Debug renders with showHelpers 1`] = `
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 </style>
 `;

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

@@ -175,7 +175,7 @@ exports[`Delivery Postcode renders a postcode input with a label set as postal c
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="e.g. M4W 2C6"
+           placeholder="e.g. M5H 3E5"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"

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

@@ -16,7 +16,7 @@ exports[`PaymentTerm When using custom options renders when not using an option
              class="o-forms-input__label ncf__payment-term__label"
       >
         <span class="ncf__payment-term__discount">
-          Best offer - 33% off RRP
+          Best offer
         </span>
         <span class="ncf__payment-term__title ncf__payment-term__title--large-price">
           Annual

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

@@ -72,6 +72,8 @@ exports[`PaymentType can initialise with the loader visible 1`] = `
     Please enter a valid payment type
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with default props 1`] = `
@@ -146,6 +148,8 @@ exports[`PaymentType render with default props 1`] = `
     Please enter a valid payment type
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with enableApplepay 1`] = `
@@ -220,6 +224,8 @@ exports[`PaymentType render with enableApplepay 1`] = `
     Please enter a valid payment type
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with enableCreditcard 1`] = `
@@ -314,6 +320,8 @@ exports[`PaymentType render with enableCreditcard 1`] = `
     </script>
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with enableDirectdebit 1`] = `
@@ -447,6 +455,8 @@ exports[`PaymentType render with enableDirectdebit 1`] = `
     </script>
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with enablePaypal 1`] = `
@@ -521,6 +531,8 @@ exports[`PaymentType render with enablePaypal 1`] = `
     Please enter a valid payment type
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;
 
 exports[`PaymentType render with isSingleTerm 1`] = `
@@ -594,6 +606,8 @@ exports[`PaymentType render with isSingleTerm 1`] = `
   <div class="o-forms-input__error">
     Please enter a valid payment type
   </div>
+</div>
+<div class="o-forms-field">
   <label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
          for="payFasterNextTime"
   >
@@ -601,6 +615,7 @@ exports[`PaymentType render with isSingleTerm 1`] = `
            id="payFasterNextTime"
            name="payFasterNextTime"
            value="true"
+           checked
     >
     <span class="o-forms-input__label">
       Use these details to pay faster next time
@@ -680,6 +695,8 @@ exports[`PaymentType render with isSingleTermChecked 1`] = `
   <div class="o-forms-input__error">
     Please enter a valid payment type
   </div>
+</div>
+<div class="o-forms-field">
   <label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
          for="payFasterNextTime"
   >
@@ -769,4 +786,6 @@ exports[`PaymentType render with value 1`] = `
     Please enter a valid payment type
   </div>
 </div>
+<div class="o-forms-field">
+</div>
 `;

package/components/__snapshots__/registration-confirmation.spec.js.snap

@@ -1,95 +1,251 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RegistrationConfirmation renders with a custom email 1`] = `
-<div class="ncf ncf__wrapper">
-  <div class="ncf__center">
+<div class="ncf">
+  <div class="ncf__center ncf__margin">
     <div class="ncf__icon ncf__icon--tick ncf__icon--large">
     </div>
-    <div class="ncf__paragraph">
-      <h1 class="ncf__header ncf__header--confirmation">
-        Welcome to FT.com
-      </h1>
-    </div>
+    <h1 class="ncf__header ncf__header--confirmation">
+      Success
+    </h1>
+    <p class="ncf__confirmation--message">
+      We’ve sent confirmation to test@example.com.
+    </p>
   </div>
-  <p class="ncf__paragraph">
-    We’ve sent confirmation of your new account to test@example.com.
-  </p>
-  <div class="ncf__headed-paragraph">
-    <h2 class="ncf__header">
-      Something not right?
-    </h2>
-    <p class="ncf__paragraph">
-      Go to your
-      <a class="ncf__link ncf__link--external"
-         href="https://www.ft.com/myaccount/personal-details"
-         target="_blank"
-         rel="noopener noreferrer"
-         data-trackable="yourAccount"
-      >
-        account settings
-      </a>
-      to view or edit your account. If you need to get in touch call us on
-      <a href="tel:+442077556248"
-         class="ncf__link ncf__link--external"
+  <div class="ncf__divider-horizontal">
+  </div>
+  <div class="ncf__confirmation--links ncf__margin">
+    <div class="ncf__confirmation--socials">
+      <b>
+        Breaking news alerts, direct to your lock screen
+      </b>
+      <p class="ncf__confirmation--mobile">
+        Download our apps or follow us on our socials
+      </p>
+      <p class="ncf__confirmation--desktop">
+        Find us in the app and google play stores or follow us on our socials
+      </p>
+      <div class="ncf__confirmation--badges">
+        <div class="o-social-follow"
+             aria-label="Follow on social media"
+        >
+          <a href="https://www.instagram.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--instagram"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-instagram"
+          >
+            <span class="o-social-follow-icon__label">
+              on instagram
+            </span>
+          </a>
+          <a href="https://www.linkedin.com/company/financial-times"
+             class="o-social-follow-icon o-social-follow-icon--linkedin"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-linkedin"
+          >
+            <span class="o-social-follow-icon__label">
+              on linkedin
+            </span>
+          </a>
+          <a href="https://twitter.com/FT"
+             class="o-social-follow-icon o-social-follow-icon--twitter"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-twitter"
+          >
+            <span class="o-social-follow-icon__label">
+              on twitter
+            </span>
+          </a>
+          <a href="https://www.facebook.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--facebook"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-facebook"
+          >
+            <span class="o-social-follow-icon__label">
+              on facebook
+            </span>
+          </a>
+        </div>
+        <div class="ncf__confirmation--mobile ncf__confirmation--app-badges"
+             aria-label="Download the app"
+        >
+          <a href="https://apps.apple.com/app/apple-store/id1200842933"
+             class="ncf-icon ncf-icon--apple"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-apple"
+          >
+            <span class="o-social-follow-icon__label">
+              on apple
+            </span>
+          </a>
+          <a href="https://play.google.com/store/apps/details?id=com.ft.news"
+             class="ncf-icon ncf-icon--android"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-android"
+          >
+            <span class="o-social-follow-icon__label">
+              on android
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="ncf__confirmation--alerts">
+      <b>
+        Set up email alerts in
+        <span aria-label="myFT"
+              class="ncf-icon ncf-icon--myft"
+        >
+        </span>
+      </b>
+      <p>
+        Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
+      </p>
+      <a href="/myft"
+         class="margin-top-x4 ncf__button ncf__button--secondary"
+         data-trackable="register-personalise-my-alerts"
       >
-        +44 (0) 207 755 6248
+        Personalise my alerts
       </a>
-      . Or contact us for additional support.
-    </p>
+    </div>
   </div>
-  <p class="ncf__center">
-    <a href="/products "
-       class="ncf__button ncf__button--submit"
-    >
-      See our subscription packages
-    </a>
-  </p>
+  <a href="/"
+     target="_parent"
+     class="ncf__confirmation--finish ncf__button ncf__button--submit"
+     data-trackable="register-finish"
+  >
+    Finish
+  </a>
 </div>
 `;
 
 exports[`RegistrationConfirmation renders with default props 1`] = `
-<div class="ncf ncf__wrapper">
-  <div class="ncf__center">
+<div class="ncf">
+  <div class="ncf__center ncf__margin">
     <div class="ncf__icon ncf__icon--tick ncf__icon--large">
     </div>
-    <div class="ncf__paragraph">
-      <h1 class="ncf__header ncf__header--confirmation">
-        Welcome to FT.com
-      </h1>
-    </div>
+    <h1 class="ncf__header ncf__header--confirmation">
+      Success
+    </h1>
+    <p class="ncf__confirmation--message">
+      We’ve sent confirmation to your email.
+    </p>
   </div>
-  <p class="ncf__paragraph">
-    We’ve sent confirmation of your new account to your email.
-  </p>
-  <div class="ncf__headed-paragraph">
-    <h2 class="ncf__header">
-      Something not right?
-    </h2>
-    <p class="ncf__paragraph">
-      Go to your
-      <a class="ncf__link ncf__link--external"
-         href="https://www.ft.com/myaccount/personal-details"
-         target="_blank"
-         rel="noopener noreferrer"
-         data-trackable="yourAccount"
-      >
-        account settings
-      </a>
-      to view or edit your account. If you need to get in touch call us on
-      <a href="tel:+442077556248"
-         class="ncf__link ncf__link--external"
+  <div class="ncf__divider-horizontal">
+  </div>
+  <div class="ncf__confirmation--links ncf__margin">
+    <div class="ncf__confirmation--socials">
+      <b>
+        Breaking news alerts, direct to your lock screen
+      </b>
+      <p class="ncf__confirmation--mobile">
+        Download our apps or follow us on our socials
+      </p>
+      <p class="ncf__confirmation--desktop">
+        Find us in the app and google play stores or follow us on our socials
+      </p>
+      <div class="ncf__confirmation--badges">
+        <div class="o-social-follow"
+             aria-label="Follow on social media"
+        >
+          <a href="https://www.instagram.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--instagram"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-instagram"
+          >
+            <span class="o-social-follow-icon__label">
+              on instagram
+            </span>
+          </a>
+          <a href="https://www.linkedin.com/company/financial-times"
+             class="o-social-follow-icon o-social-follow-icon--linkedin"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-linkedin"
+          >
+            <span class="o-social-follow-icon__label">
+              on linkedin
+            </span>
+          </a>
+          <a href="https://twitter.com/FT"
+             class="o-social-follow-icon o-social-follow-icon--twitter"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-twitter"
+          >
+            <span class="o-social-follow-icon__label">
+              on twitter
+            </span>
+          </a>
+          <a href="https://www.facebook.com/financialtimes"
+             class="o-social-follow-icon o-social-follow-icon--facebook"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-social-facebook"
+          >
+            <span class="o-social-follow-icon__label">
+              on facebook
+            </span>
+          </a>
+        </div>
+        <div class="ncf__confirmation--mobile ncf__confirmation--app-badges"
+             aria-label="Download the app"
+        >
+          <a href="https://apps.apple.com/app/apple-store/id1200842933"
+             class="ncf-icon ncf-icon--apple"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-apple"
+          >
+            <span class="o-social-follow-icon__label">
+              on apple
+            </span>
+          </a>
+          <a href="https://play.google.com/store/apps/details?id=com.ft.news"
+             class="ncf-icon ncf-icon--android"
+             target="_blank"
+             rel="noopener noreferrer"
+             data-trackable="register-app-android"
+          >
+            <span class="o-social-follow-icon__label">
+              on android
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="ncf__confirmation--alerts">
+      <b>
+        Set up email alerts in
+        <span aria-label="myFT"
+              class="ncf-icon ncf-icon--myft"
+        >
+        </span>
+      </b>
+      <p>
+        Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
+      </p>
+      <a href="/myft"
+         class="margin-top-x4 ncf__button ncf__button--secondary"
+         data-trackable="register-personalise-my-alerts"
       >
-        +44 (0) 207 755 6248
+        Personalise my alerts
       </a>
-      . Or contact us for additional support.
-    </p>
+    </div>
   </div>
-  <p class="ncf__center">
-    <a href="/products "
-       class="ncf__button ncf__button--submit"
-    >
-      See our subscription packages
-    </a>
-  </p>
+  <a href="/"
+     target="_parent"
+     class="ncf__confirmation--finish ncf__button ncf__button--submit"
+     data-trackable="register-finish"
+  >
+    Finish
+  </a>
 </div>
 `;