From 0c144d13302f8950599bd5d8e27b74aab6e15005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alda=20Vigd=C3=ADs=20Skarph=C3=A9=C3=B0insd=C3=B3ttir?=
 <aldavigdis@aldavigdis.is>
Date: Fri, 22 Sep 2023 21:48:06 +0200
Subject: [PATCH] Initial work on kennitala field [wip]

---
 askell-registration.php   | 11 +++++++++++
 src/askellRegistration.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/askell-registration.php b/askell-registration.php
index 0d599bb..e1627d2 100644
--- a/askell-registration.php
+++ b/askell-registration.php
@@ -177,6 +177,17 @@ public function customer_rest_post(WP_REST_Request $request) {
 			);
 		}
 
+		if (
+			array_key_exists( 'kennitala', $request_body ) &&
+			(!is_null($request_body['kennitala']))
+		) {
+			update_user_meta(
+				$new_user_id,
+				'askell_kennitala',
+				$request_body['kennitala']
+			);
+		}
+
 		update_user_meta(
 			$new_user_id,
 			'askell_plan_id',
diff --git a/src/askellRegistration.js b/src/askellRegistration.js
index c8d5dad..d7ed52c 100644
--- a/src/askellRegistration.js
+++ b/src/askellRegistration.js
@@ -38,6 +38,7 @@ class AskellRegistration extends React.Component {
 		this.onChangePlan = this.onChangePlan.bind(this);
 		this.onClickPlansNextStep = this.onClickPlansNextStep.bind(this);
 
+		this.onChangeKennitala = this.onChangeKennitala.bind(this);
 		this.onChangeFirstName = this.onChangeFirstName.bind(this);
 		this.onChangeLastName = this.onChangeLastName.bind(this);
 		this.onChangeEmailAddress = this.onChangeEmailAddress.bind(this);
@@ -146,6 +147,22 @@ class AskellRegistration extends React.Component {
 		this.setState({ currentStep: 'user-info' });
 	}
 
+	onChangeKennitala(event) {
+		const cleanKennitala = event.target.value.replace(/[^0-9]/g, '');
+
+		const spacedKennitala = [
+			cleanKennitala.slice(0, 6),
+			cleanKennitala.slice(6, 10),
+		]
+			.filter((portion) => portion !== '')
+			.join('-');
+
+		this.setState({
+			kennitala: cleanKennitala,
+			kennitalaSpaced: spacedKennitala,
+		});
+	}
+
 	onChangeFirstName(event) {
 		this.setState({ firstName: event.target.value });
 	}
@@ -473,6 +490,23 @@ class AskellRegistration extends React.Component {
 						fields below in order to get to the next step, where you
 						will enter your payment information.
 					</p>
+					{ this.state.reference == 'kennitala' &&
+						<div className="field-container">
+							<div className="askell-form-kennitala askell-form-field">
+								<label htmlFor={this.state.blockId + '-kennitala'}>
+									Kennitala
+								</label>
+								<input
+									id={this.state.blockId + '-kennitala'}
+									type="text"
+									value={this.state.kennitalaSpaced}
+									required
+									pattern="/^([0-9]{6}-[0-9]{4})$/"
+									onChange={this.onChangeKennitala}
+								/>
+							</div>
+						</div>
+					}
 					<div className="field-container">
 						<div className="askell-form-first-name askell-form-field">
 							<label htmlFor={this.state.blockId + '-first-name'}>