@financial-times/n-conversion-forms 41.2.0 → 41.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.toolkitstate/ci.json +3 -3
  2. package/components/__snapshots__/debug.spec.js.snap +2 -0
  3. package/components/__snapshots__/year-of-birth.spec.js.snap +18 -6
  4. package/components/debug.jsx +1 -0
  5. package/components/year-of-birth.jsx +3 -1
  6. package/dist/debug.jsx +1 -1
  7. package/dist/year-of-birth.jsx +4 -2
  8. package/package.json +1 -1
  9. package/utils/year-of-birth.js +9 -0
package/.toolkitstate/ci.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "branch": "",
3
3
  "repo": "n-conversion-forms",
4
- "version": "4ddf21c1d1a8f7e1c6ea79d0628dc66321d77c3a",
5
- "tag": "v41.2.0",
6
- "buildNumber": "15786"
4
+ "version": "51bf2cd974b73f91af3c130939107db573d70f37",
5
+ "tag": "v41.3.1",
6
+ "buildNumber": "15912"
7
7
  }
package/components/__snapshots__/debug.spec.js.snap CHANGED
@@ -57,6 +57,7 @@ exports[`Debug renders with isTest 1`] = `
57
57
  checkout3dsChallenge: 'Checkout1!',
58
58
  chaseVisa: '4011361100000010',
59
59
  verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
60
+ yearOfBirth: 1999
60
61
  };
61
62
 
62
63
  function logout () {
@@ -1503,6 +1504,7 @@ exports[`Debug renders with showHelpers 1`] = `
1503
1504
  checkout3dsChallenge: 'Checkout1!',
1504
1505
  chaseVisa: '4011361100000010',
1505
1506
  verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
1507
+ yearOfBirth: 1999
1506
1508
  };
1507
1509
 
1508
1510
  function logout () {
package/components/__snapshots__/year-of-birth.spec.js.snap CHANGED
@@ -14,16 +14,18 @@ exports[`YearOfBirth render a year of birth input with default value 1`] = `
14
14
  </span>
15
15
  </span>
16
16
  <span class="o-forms-input o-forms-input--text">
17
- <input type="number"
17
+ <input type="text"
18
18
  id="yearOfBirth"
19
19
  name="yearOfBirth"
20
20
  placeholder="YYYY"
21
21
  autocomplete="bday-year"
22
22
  minlength="4"
23
23
  maxlength="4"
24
+ pattern="\\d{4}"
24
25
  data-trackable="year-of-birth"
25
26
  aria-required="true"
26
27
  required
28
+ inputmode="numeric"
27
29
  value="2001"
28
30
  >
29
31
  <span class="o-forms-input__error">
@@ -47,17 +49,19 @@ exports[`YearOfBirth render a year of birth input with disabled field 1`] = `
47
49
  </span>
48
50
  </span>
49
51
  <span class="o-forms-input o-forms-input--text">
50
- <input type="number"
52
+ <input type="text"
51
53
  id="yearOfBirth"
52
54
  name="yearOfBirth"
53
55
  placeholder="YYYY"
54
56
  autocomplete="bday-year"
55
57
  minlength="4"
56
58
  maxlength="4"
59
+ pattern="\\d{4}"
57
60
  data-trackable="year-of-birth"
58
61
  aria-required="true"
59
62
  required
60
63
  disabled
64
+ inputmode="numeric"
61
65
  value="2001"
62
66
  >
63
67
  <span class="o-forms-input__error">
@@ -82,16 +86,18 @@ exports[`YearOfBirth renders a year of birth input with custom prompt 1`] = `
82
86
  </span>
83
87
  </span>
84
88
  <span class="o-forms-input o-forms-input--text">
85
- <input type="number"
89
+ <input type="text"
86
90
  id="yearOfBirth"
87
91
  name="yearOfBirth"
88
92
  placeholder="YYYY"
89
93
  autocomplete="bday-year"
90
94
  minlength="4"
91
95
  maxlength="4"
96
+ pattern="\\d{4}"
92
97
  data-trackable="year-of-birth"
93
98
  aria-required="true"
94
99
  required
100
+ inputmode="numeric"
95
101
  value
96
102
  >
97
103
  <span class="o-forms-input__error">
@@ -115,16 +121,18 @@ exports[`YearOfBirth renders a year of birth input with default error message 1`
115
121
  </span>
116
122
  </span>
117
123
  <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
118
- <input type="number"
124
+ <input type="text"
119
125
  id="yearOfBirth"
120
126
  name="yearOfBirth"
121
127
  placeholder="YYYY"
122
128
  autocomplete="bday-year"
123
129
  minlength="4"
124
130
  maxlength="4"
131
+ pattern="\\d{4}"
125
132
  data-trackable="year-of-birth"
126
133
  aria-required="true"
127
134
  required
135
+ inputmode="numeric"
128
136
  value
129
137
  >
130
138
  <span class="o-forms-input__error">
@@ -148,16 +156,18 @@ exports[`YearOfBirth renders a year of birth input with default params 1`] = `
148
156
  </span>
149
157
  </span>
150
158
  <span class="o-forms-input o-forms-input--text">
151
- <input type="number"
159
+ <input type="text"
152
160
  id="yearOfBirth"
153
161
  name="yearOfBirth"
154
162
  placeholder="YYYY"
155
163
  autocomplete="bday-year"
156
164
  minlength="4"
157
165
  maxlength="4"
166
+ pattern="\\d{4}"
158
167
  data-trackable="year-of-birth"
159
168
  aria-required="true"
160
169
  required
170
+ inputmode="numeric"
161
171
  value
162
172
  >
163
173
  <span class="o-forms-input__error">
@@ -181,15 +191,17 @@ exports[`YearOfBirth renders an optional year of birth input 1`] = `
181
191
  </span>
182
192
  </span>
183
193
  <span class="o-forms-input o-forms-input--text">
184
- <input type="number"
194
+ <input type="text"
185
195
  id="yearOfBirth"
186
196
  name="yearOfBirth"
187
197
  placeholder="YYYY"
188
198
  autocomplete="bday-year"
189
199
  minlength="4"
190
200
  maxlength="4"
201
+ pattern="\\d{4}"
191
202
  data-trackable="year-of-birth"
192
203
  aria-required="false"
204
+ inputmode="numeric"
193
205
  value
194
206
  >
195
207
  <span class="o-forms-input__error">
package/components/debug.jsx CHANGED
@@ -122,6 +122,7 @@ export function Debug({
122
122
  checkout3dsChallenge: 'Checkout1!',
123
123
  chaseVisa: '4011361100000010',
124
124
  verificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',
125
+ yearOfBirth: 1999
125
126
  };
126
127
 
127
128
  function logout () {
package/components/year-of-birth.jsx CHANGED
@@ -39,18 +39,20 @@ export function YearOfBirth({
39
39
  </span>
40
40
  <span className={inputWrapperClassNames}>
41
41
  <input
42
- type="number"
42
+ type="text"
43
43
  id={inputId}
44
44
  name={inputName}
45
45
  placeholder="YYYY"
46
46
  autoComplete="bday-year"
47
47
  minLength="4"
48
48
  maxLength="4"
49
+ pattern="\d{4}"
49
50
  data-trackable={dataTrackable}
50
51
  aria-required={isRequired}
51
52
  required={isRequired}
52
53
  disabled={isDisabled}
53
54
  defaultValue={value}
55
+ inputmode="numeric"
54
56
  />
55
57
  <span className="o-forms-input__error">
56
58
  {customErrorMessage || 'Please enter a valid year of birth'}
package/dist/debug.jsx CHANGED
@@ -52,7 +52,7 @@ function Debug(_ref) {
52
52
  __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
53
53
  };
54
54
  var javascript = {
55
- __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = ".concat(JSON.stringify(_supportedPostcodeExamples.allSupportedPostcodeExamples), ";\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'APT 2C',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t\n\tfunction reloadWithSelectedCountry () {\n\t\tvar countryBox = document.getElementById(\"ncf-country\");\n\t\tvar selectedValue = countryBox.options[countryBox.selectedIndex].value;\n\t\tif (selectedValue) {\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set(\"countryCode\", selectedValue);\n\t\t\thistory.pushState({}, \"\", url);\n\t\t\twindow.location.reload();\n\t\t}\n\t}\n\t")
55
+ __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = ".concat(JSON.stringify(_supportedPostcodeExamples.allSupportedPostcodeExamples), ";\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'APT 2C',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t\tverificationEmail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tyearOfBirth: 1999\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type) && input.disabled === false) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t\n\tfunction reloadWithSelectedCountry () {\n\t\tvar countryBox = document.getElementById(\"ncf-country\");\n\t\tvar selectedValue = countryBox.options[countryBox.selectedIndex].value;\n\t\tif (selectedValue) {\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set(\"countryCode\", selectedValue);\n\t\t\thistory.pushState({}, \"\", url);\n\t\t\twindow.location.reload();\n\t\t}\n\t}\n\t")
56
56
  };
57
57
  var style = {
58
58
  __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"
package/dist/year-of-birth.jsx CHANGED
@@ -51,18 +51,20 @@ function YearOfBirth(_ref) {
51
51
  }, prompt)), /*#__PURE__*/_react["default"].createElement("span", {
52
52
  className: inputWrapperClassNames
53
53
  }, /*#__PURE__*/_react["default"].createElement("input", {
54
- type: "number",
54
+ type: "text",
55
55
  id: inputId,
56
56
  name: inputName,
57
57
  placeholder: "YYYY",
58
58
  autoComplete: "bday-year",
59
59
  minLength: "4",
60
60
  maxLength: "4",
61
+ pattern: "\\d{4}",
61
62
  "data-trackable": dataTrackable,
62
63
  "aria-required": isRequired,
63
64
  required: isRequired,
64
65
  disabled: isDisabled,
65
- defaultValue: value
66
+ defaultValue: value,
67
+ inputmode: "numeric"
66
68
  }), /*#__PURE__*/_react["default"].createElement("span", {
67
69
  className: "o-forms-input__error"
68
70
  }, customErrorMessage || 'Please enter a valid year of birth')));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "41.2.0",
3
+ "version": "41.3.1",
4
4
  "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
5
5
  "main": "./dist/index.js",
6
6
  "scripts": {
package/utils/year-of-birth.js CHANGED
@@ -10,6 +10,8 @@ class YearOfBirth {
10
10
  if (!this.$yearOfBirth) {
11
11
  throw new Error('Please include the year of birth partial on the page');
12
12
  }
13
+
14
+ this.preventNonNumericInput();
13
15
  }
14
16
 
15
17
  handleYearOfBirthBlur(callback = () => {}) {
@@ -19,6 +21,13 @@ class YearOfBirth {
19
21
  getYearOfBirth() {
20
22
  return this.$yearOfBirth.value;
21
23
  }
24
+
25
+ preventNonNumericInput() {
26
+ this.$yearOfBirth.addEventListener('input', (event) => {
27
+ event.preventDefault();
28
+ this.$yearOfBirth.value = this.$yearOfBirth.value.replace(/\D/g, '');
29
+ });
30
+ }
22
31
  }
23
32
 
24
33
  module.exports = YearOfBirth;