From 700648bc0c26b5a34b14f3e37c6fcd58983b01f7 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Wed, 11 Oct 2023 14:20:12 +0200
Subject: [PATCH] Add Validation for Phone Numbers from Denmark, Germany, and
 Greenland

- Adjusted the input type to 'tel' to enhance phone number input handling.
- Introduced new properties to `TextInput` to facilitate the validation of phone numbers, with specific enhancements:
- `pattern`: A regex implemented to match phone numbers originating from Denmark, Germany, and Greenland.
- `title`: used to display an error message in most browsers when the input does not adhere to the specified pattern.
- Employed the same text for the `placeholder` as the error message to inform users about the accepted phone number formats.

pattern:
* (\+45|0045)[0-9]{8}: Matches a Denmark phone number: country code +45, followed by 8 digits.
* (\+49|0049)[0-9]{7,11}: Matches a German phone number: country code +49, followed by between 7 and 11 digits.
* (\+299|00299)[0-9]{6}: Matches a Greenland phone number: country code +299, followed by 6 digits.
---
 src/apps/patron-page/PatronPage.dev.tsx                |  5 +++++
 src/apps/patron-page/PatronPage.entry.tsx              |  1 +
 src/components/atoms/input/TextInput.tsx               | 10 ++++++++--
 .../contact-info-section/ContactInfoPhone.tsx          |  5 ++++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/apps/patron-page/PatronPage.dev.tsx b/src/apps/patron-page/PatronPage.dev.tsx
index 2ccf6c8f80..309f3964c1 100644
--- a/src/apps/patron-page/PatronPage.dev.tsx
+++ b/src/apps/patron-page/PatronPage.dev.tsx
@@ -239,6 +239,11 @@ export default {
     patronPageStatusSectionOutOfAriaLabelEbooksText: {
       defaultValue: "You used @this ebooks out of you quota of @that ebooks",
       control: { type: "text" }
+    },
+    phoneInputMessageText: {
+      defaultValue:
+        "The phone number should be from Denmark (+45), Germany (+49), or Greenland (+299)",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof PatronPage>;
diff --git a/src/apps/patron-page/PatronPage.entry.tsx b/src/apps/patron-page/PatronPage.entry.tsx
index 8acca1b48c..0ec2fbe099 100644
--- a/src/apps/patron-page/PatronPage.entry.tsx
+++ b/src/apps/patron-page/PatronPage.entry.tsx
@@ -70,6 +70,7 @@ interface PatronPageTextProps {
   patronPageStatusSectionOutOfText: string;
   patronPageStatusSectionOutOfAriaLabelAudioBooksText: string;
   patronPageStatusSectionOutOfAriaLabelEbooksText: string;
+  phoneInputMessageText: string;
 }
 
 export interface PatronPageProps
diff --git a/src/components/atoms/input/TextInput.tsx b/src/components/atoms/input/TextInput.tsx
index 9f0056958a..df5d898321 100644
--- a/src/components/atoms/input/TextInput.tsx
+++ b/src/components/atoms/input/TextInput.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 
 export interface TextInputProps {
   label: string;
-  type: "text" | "password" | "number" | "email";
+  type: "text" | "password" | "number" | "email" | "tel";
   id: string;
   required?: boolean;
   description?: string;
@@ -12,6 +12,8 @@ export interface TextInputProps {
   className?: string;
   pattern?: string;
   inputmode?: "numeric";
+  title?: string;
+  placeholder?: string;
 }
 
 const TextInput: FC<TextInputProps> = ({
@@ -25,7 +27,9 @@ const TextInput: FC<TextInputProps> = ({
   className,
   pattern,
   inputmode,
-  required
+  required,
+  title,
+  placeholder
 }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value);
@@ -44,6 +48,8 @@ const TextInput: FC<TextInputProps> = ({
         onChange={handleChange}
         value={value}
         aria-labelledby={validation ? `validation-${id}` : ""}
+        title={title}
+        placeholder={placeholder}
       />
       {description && (
         <div className="dpl-input__description" id={`description-${id}`}>
diff --git a/src/components/contact-info-section/ContactInfoPhone.tsx b/src/components/contact-info-section/ContactInfoPhone.tsx
index cebc0e27d7..e586cf5a17 100644
--- a/src/components/contact-info-section/ContactInfoPhone.tsx
+++ b/src/components/contact-info-section/ContactInfoPhone.tsx
@@ -28,12 +28,15 @@ const ContactInfoPhone: FC<ContactInfoPhoneProps> = ({
         className={className}
         id="phone-input"
         required={isRequired}
-        type="number"
+        type="tel"
+        pattern="(\+45|0045)[0-9]{8}|(\+49|0049)[0-9]{7,11}|(\+299|00299)[0-9]{6}"
+        title={t("phoneInputMessageText")}
         onChange={(newPhoneNumber) =>
           changePatron(newPhoneNumber, "phoneNumber")
         }
         value={patron?.phoneNumber}
         label={t("patronContactPhoneLabelText")}
+        placeholder={t("phoneInputMessageText")}
       />
       {showCheckboxes && (
         <CheckBox