From 97b446f609ebb40f88befdd917d644cf38cd5617 Mon Sep 17 00:00:00 2001
From: Bharat <bharatkalluri@protonmail.com>
Date: Tue, 27 Apr 2021 16:04:58 +0530
Subject: [PATCH] Added phone number field (#286)

* Added phone number field

* Removed phone number validation since its a complicated problem to solve for now

* Added the missing case for phone
---
 webapp/src/components/propertyValueElement.tsx    | 15 ++++++++-------
 .../__snapshots__/propertyMenu.test.tsx.snap      | 15 +++++++++++++++
 webapp/src/widgets/propertyMenu.tsx               |  5 +++++
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 6833dffc6..d0f742b94 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -3,7 +3,7 @@
 
 import React, {useState} from 'react'
 
-import {IPropertyOption, IPropertyTemplate} from '../blocks/board'
+import {IPropertyOption, IPropertyTemplate, PropertyType} from '../blocks/board'
 import {Card} from '../blocks/card'
 import mutator from '../mutator'
 import {OctoUtils} from '../octoUtils'
@@ -38,14 +38,16 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             return !isNaN(parseInt(val, 10))
         case 'email': {
             const emailRegexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-            return emailRegexp.test(val.toLowerCase())
+            return emailRegexp.test(val)
         }
         case 'url': {
             const urlRegexp = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/
-            return urlRegexp.test(val.toLowerCase())
+            return urlRegexp.test(val)
         }
         case 'text':
             return true
+        case 'phone':
+            return true
         default:
             return false
         }
@@ -97,11 +99,10 @@ const PropertyValueElement = (props:Props): JSX.Element => {
         )
     }
 
+    const editableFields: Array<PropertyType> = ['text', 'number', 'email', 'url', 'phone']
+
     if (
-        propertyTemplate.type === 'text' ||
-        propertyTemplate.type === 'number' ||
-        propertyTemplate.type === 'email' ||
-        propertyTemplate.type === 'url'
+        editableFields.includes(propertyTemplate.type)
     ) {
         if (!readOnly) {
             return (
diff --git a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
index 185008592..a0c22d609 100644
--- a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
+++ b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
@@ -111,6 +111,21 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                     class="noicon"
                   />
                 </div>
+                <div
+                  class="MenuOption TextOption menu-option"
+                >
+                  <div
+                    class="noicon"
+                  />
+                  <div
+                    class="menu-name"
+                  >
+                    Phone
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
                 <div
                   class="MenuOption TextOption menu-option"
                 >
diff --git a/webapp/src/widgets/propertyMenu.tsx b/webapp/src/widgets/propertyMenu.tsx
index fdaa74408..9764794a6 100644
--- a/webapp/src/widgets/propertyMenu.tsx
+++ b/webapp/src/widgets/propertyMenu.tsx
@@ -103,6 +103,11 @@ const PropertyMenu = React.memo((props: Props) => {
                     name={typeDisplayName(intl, 'email')}
                     onClick={() => props.onTypeChanged('email')}
                 />
+                <Menu.Text
+                    id='phone'
+                    name={typeDisplayName(intl, 'phone')}
+                    onClick={() => props.onTypeChanged('phone')}
+                />
                 <Menu.Text
                     id='url'
                     name={typeDisplayName(intl, 'url')}