From f7df1ae8221b5610f10d754b630bd9f69b3cad07 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 22 Mar 2022 00:59:46 +0100
Subject: [PATCH] feat(validate-messages): add PhoneNumber messages

---
 .changeset/spicy-bikes-visit.md               |  5 ++
 packages/validate-messages/package.json       |  3 +-
 .../src/loadDefaultFeedbackMessages.js        | 61 +++++++++++--------
 3 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/spicy-bikes-visit.md

diff --git a/.changeset/spicy-bikes-visit.md b/.changeset/spicy-bikes-visit.md
new file mode 100644
index 000000000..1c7d6d711
--- /dev/null
+++ b/.changeset/spicy-bikes-visit.md
@@ -0,0 +1,5 @@
+---
+'@lion/validate-messages': patch
+---
+
+validate-messages: PhoneNumber messages
diff --git a/packages/validate-messages/package.json b/packages/validate-messages/package.json
index 0ba84f659..323da3f46 100644
--- a/packages/validate-messages/package.json
+++ b/packages/validate-messages/package.json
@@ -33,7 +33,8 @@
   },
   "dependencies": {
     "@lion/form-core": "^0.16.0",
-    "@lion/localize": "^0.23.0"
+    "@lion/localize": "^0.23.0",
+    "@lion/input-tel": "^0.0.0"
   },
   "keywords": [
     "feedback",
diff --git a/packages/validate-messages/src/loadDefaultFeedbackMessages.js b/packages/validate-messages/src/loadDefaultFeedbackMessages.js
index ae9ca70d5..a2fd9d74e 100644
--- a/packages/validate-messages/src/loadDefaultFeedbackMessages.js
+++ b/packages/validate-messages/src/loadDefaultFeedbackMessages.js
@@ -19,15 +19,10 @@ import {
   MinMaxLength,
   Pattern,
 } from '@lion/form-core';
+import { PhoneNumber } from '@lion/input-tel';
 
 /**
- * @typedef {object} MessageData
- * @property {*} [MessageData.modelValue]
- * @property {string} [MessageData.fieldName]
- * @property {*} [MessageData.formControl]
- * @property {string} [MessageData.type]
- * @property {Object.<string,?>} [MessageData.config]
- * @property {string} [MessageData.name]
+ * @typedef {import('@lion/form-core/types').FeedbackMessageData} FeedbackMessageData
  */
 
 let loaded = false;
@@ -119,7 +114,7 @@ export function loadDefaultFeedbackMessages() {
     );
 
   /**
-   * @param {MessageData} data
+   * @param {FeedbackMessageData} data
    * @returns {Promise<string|Element>}
    */
   const getLocalizedMessage = async data => {
@@ -130,37 +125,37 @@ export function loadDefaultFeedbackMessages() {
     return '';
   };
 
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   Required.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   EqualsLength.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinLength.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MaxLength.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinMaxLength.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   Pattern.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   IsEmail.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   IsNumber.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinNumber.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MaxNumber.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinMaxNumber.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   IsDate.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinDate.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MaxDate.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   MinMaxDate.getMessage = async data => getLocalizedMessage(data);
-  /** @param {MessageData} data */
+  /** @param {FeedbackMessageData} data */
   IsDateDisabled.getMessage = async data => getLocalizedMessage(data);
 
   DefaultSuccess.getMessage = async data => {
@@ -170,5 +165,23 @@ export function loadDefaultFeedbackMessages() {
     return localize.msg(`lion-validate:${key}`, data);
   };
 
+  /** @param {FeedbackMessageData} data */
+  // @ts-ignore
+  PhoneNumber.getMessage = async data => {
+    await forMessagesToBeReady();
+    const { type, outcome } = data;
+    if (outcome === 'too-long') {
+      return localize.msg(`lion-validate:${type}.MaxLength`, data);
+    }
+    if (outcome === 'too-short') {
+      return localize.msg(`lion-validate:${type}.MinLength`, data);
+    }
+    // TODO: add a more specific message here
+    if (outcome === 'invalid-country-code') {
+      return localize.msg(`lion-validate:${type}.Pattern`, data);
+    }
+    return localize.msg(`lion-validate:${type}.Pattern`, data);
+  };
+
   loaded = true;
 }