From fc007dced3021f26bb4962390f1c232fb8d8e2e8 Mon Sep 17 00:00:00 2001
From: kilya11 <kilya@ymail.com>
Date: Wed, 22 May 2024 14:00:23 +0200
Subject: [PATCH] feat: add callto link to user details (#269)

---
 src/UserDetailsPopover/PhoneRow.tsx      | 19 +++++++++++++++++++
 src/UserDetailsPopover/UserDetails.tsx   | 16 ++++++++++++----
 src/UserDetailsPopover/index.stories.tsx |  3 +++
 src/UserDetailsPopover/phone.test.ts     | 12 ++++++++++++
 src/UserDetailsPopover/phone.ts          |  7 +++++++
 5 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/UserDetailsPopover/PhoneRow.tsx
 create mode 100644 src/UserDetailsPopover/phone.test.ts
 create mode 100644 src/UserDetailsPopover/phone.ts

diff --git a/src/UserDetailsPopover/PhoneRow.tsx b/src/UserDetailsPopover/PhoneRow.tsx
new file mode 100644
index 00000000..f02b65d2
--- /dev/null
+++ b/src/UserDetailsPopover/PhoneRow.tsx
@@ -0,0 +1,19 @@
+import { PhoneOutlined } from '@ant-design/icons';
+import React from 'react';
+
+import { Anchor } from '../Anchor';
+
+import { RowWithLabel } from './RowWithLabel';
+import { callToLink } from './phone';
+
+type PhoneRowProps = {
+  phone: string;
+};
+
+export function PhoneRow({ phone }: PhoneRowProps) {
+  return (
+    <RowWithLabel label={<PhoneOutlined />}>
+      <Anchor href={callToLink(phone)}>{phone}</Anchor>
+    </RowWithLabel>
+  );
+}
diff --git a/src/UserDetailsPopover/UserDetails.tsx b/src/UserDetailsPopover/UserDetails.tsx
index c94b248b..c547eff0 100644
--- a/src/UserDetailsPopover/UserDetails.tsx
+++ b/src/UserDetailsPopover/UserDetails.tsx
@@ -8,6 +8,7 @@ import { Space } from '../Space';
 import { Typography } from '../Typography';
 
 import { EmailRow } from './EmailRow';
+import { PhoneRow } from './PhoneRow';
 import { GUTTER, SPACE } from './constants';
 
 type User = {
@@ -16,6 +17,7 @@ type User = {
   firstname?: string | null;
   inactive?: boolean;
   lastname?: string | null;
+  phone?: string | null;
   username: string;
 };
 
@@ -24,7 +26,8 @@ export type UserDetailsProps = {
 };
 
 export function UserDetails({ user }: UserDetailsProps) {
-  const { acronym, email, firstname, lastname, inactive, username } = user;
+  const { acronym, email, firstname, lastname, inactive, username, phone } =
+    user;
   const fullName = joinNonEmpty([firstname, lastname], ' ');
   const showFullName = !inactive && fullName;
   return (
@@ -54,9 +57,14 @@ export function UserDetails({ user }: UserDetailsProps) {
 
       <Divider style={{ marginTop: SPACE, marginBottom: SPACE }} />
 
-      {inactive
-        ? 'The user was deactivated'
-        : email && <EmailRow email={email} />}
+      {inactive ? (
+        'The user was deactivated'
+      ) : (
+        <>
+          {email && <EmailRow email={email} />}
+          {phone && <PhoneRow phone={phone} />}
+        </>
+      )}
     </Space>
   );
 }
diff --git a/src/UserDetailsPopover/index.stories.tsx b/src/UserDetailsPopover/index.stories.tsx
index 4aebf7fa..4f8dcaa7 100644
--- a/src/UserDetailsPopover/index.stories.tsx
+++ b/src/UserDetailsPopover/index.stories.tsx
@@ -13,6 +13,7 @@ export default {
     email: { control: { type: 'text' }, defaultValue: 'john.doe@mll.com' },
     firstname: { control: { type: 'text' }, defaultValue: 'John' },
     lastname: { control: { type: 'text' }, defaultValue: 'Doe' },
+    phone: { control: { type: 'text' }, defaultValue: '123' },
     username: { control: { type: 'text' }, defaultValue: 'jdoe' },
     inactive: {
       control: {
@@ -56,6 +57,7 @@ export const Default: Story = function Link(args) {
                 firstname: args.firstname,
                 lastname: args.lastname,
                 username: args.username,
+                phone: args.phone,
                 inactive: args.inactive,
               }
         }
@@ -73,6 +75,7 @@ export const WithCustomChildren: Story = function Link(args) {
       firstname: args.firstname,
       lastname: args.lastname,
       username: args.username,
+      phone: args.phone,
       inactive: args.inactive,
     }),
     [args],
diff --git a/src/UserDetailsPopover/phone.test.ts b/src/UserDetailsPopover/phone.test.ts
new file mode 100644
index 00000000..11133642
--- /dev/null
+++ b/src/UserDetailsPopover/phone.test.ts
@@ -0,0 +1,12 @@
+import { callToLink } from './phone';
+
+describe('callToLink', () => {
+  it('throws error when phone is empty ', () => {
+    expect(() => callToLink('')).toThrow(/empty/);
+  });
+
+  it('renders callto link ', () => {
+    const phone = '123';
+    expect(callToLink(phone)).toBe(`callto:${phone}`);
+  });
+});
diff --git a/src/UserDetailsPopover/phone.ts b/src/UserDetailsPopover/phone.ts
new file mode 100644
index 00000000..d8e046ff
--- /dev/null
+++ b/src/UserDetailsPopover/phone.ts
@@ -0,0 +1,7 @@
+export function callToLink(phone: string): string {
+  if (!phone) {
+    throw new Error('Could not create callto-Link because phone is empty');
+  }
+
+  return `callto:${phone}`;
+}