From 41fe82f0ca4fc413547d59bddabb69fd125eee39 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <ima@variant.no>
Date: Fri, 8 Nov 2024 14:11:43 +0100
Subject: [PATCH] Add formatting to phone numbers

---
 src/components/consultantCard/ConsultantCard.tsx |  5 ++++-
 src/components/employeePage/EmployeePage.tsx     |  4 +++-
 src/components/sections/employees/Employees.tsx  |  3 ++-
 src/components/utils/formatPhoneNumber.ts        | 12 ++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/components/utils/formatPhoneNumber.ts

diff --git a/src/components/consultantCard/ConsultantCard.tsx b/src/components/consultantCard/ConsultantCard.tsx
index 597ae2788..76145249f 100644
--- a/src/components/consultantCard/ConsultantCard.tsx
+++ b/src/components/consultantCard/ConsultantCard.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 
 import CustomLink from "src/components/link/CustomLink";
+import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
 import { aliasFromEmail } from "src/utils/employees";
 import { LinkType } from "studio/lib/interfaces/navigation";
@@ -53,7 +54,9 @@ export default function ConsultantCard({
             <p className={styles.consultantEmail}>{consultant.email}</p>
           )}
           {consultant.telephone && (
-            <p className={styles.consultantTelephone}>{consultant.telephone}</p>
+            <p className={styles.consultantTelephone}>
+              {formatPhoneNumber(consultant.telephone)}
+            </p>
           )}
           {employeePageSlug && (
             <CustomLink
diff --git a/src/components/employeePage/EmployeePage.tsx b/src/components/employeePage/EmployeePage.tsx
index d0630ab1a..99a9a3178 100644
--- a/src/components/employeePage/EmployeePage.tsx
+++ b/src/components/employeePage/EmployeePage.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import Text from "src/components/text/Text";
+import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
 
 import styles from "./employeePage.module.css";
@@ -11,6 +12,7 @@ export interface EmployeePageProps {
 
 export default function EmployeePage({ employee }: EmployeePageProps) {
   const image = employee.imageUrl ?? employee.imageThumbUrl ?? null;
+
   return (
     employee.name && (
       <div className={styles.wrapper}>
@@ -35,7 +37,7 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
               )}
               {employee.telephone && (
                 <Text type={"bodyBig"} className={styles.employeeTelephone}>
-                  {employee.telephone}
+                  {formatPhoneNumber(employee.telephone)}
                 </Text>
               )}
               {employee.officeName && (
diff --git a/src/components/sections/employees/Employees.tsx b/src/components/sections/employees/Employees.tsx
index 2f901fdc4..25ec2e8b0 100644
--- a/src/components/sections/employees/Employees.tsx
+++ b/src/components/sections/employees/Employees.tsx
@@ -2,6 +2,7 @@ import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 
+import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import {
   aliasFromEmail,
   domainFromEmail,
@@ -81,7 +82,7 @@ export default async function Employees({ language, section }: EmployeesProps) {
                   )}
                   {employee.telephone && (
                     <p className={styles.employeeTelephone}>
-                      {employee.telephone}
+                      {formatPhoneNumber(employee.telephone)}
                     </p>
                   )}
                 </div>
diff --git a/src/components/utils/formatPhoneNumber.ts b/src/components/utils/formatPhoneNumber.ts
new file mode 100644
index 000000000..4f6676519
--- /dev/null
+++ b/src/components/utils/formatPhoneNumber.ts
@@ -0,0 +1,12 @@
+export default function formatPhoneNumber(phoneNumber: string) {
+  const firstDigitsOfPhoneNumber = phoneNumber?.slice(0, 3);
+  let formattedPhoneNumber = ``;
+  if (firstDigitsOfPhoneNumber == "+47") {
+    formattedPhoneNumber = `+${phoneNumber?.slice(1, 3)} ${phoneNumber?.slice(3, 6)} ${phoneNumber?.slice(6, 8)} ${phoneNumber?.slice(8)}`;
+  } else if (firstDigitsOfPhoneNumber == "+46") {
+    formattedPhoneNumber = `+${phoneNumber?.slice(1, 3)} 0${phoneNumber?.slice(3, 5)}-${phoneNumber?.slice(5, 8)} ${phoneNumber?.slice(8, 10)} ${phoneNumber?.slice(10)}`;
+  } else {
+    formattedPhoneNumber = phoneNumber ? phoneNumber : "";
+  }
+  return formattedPhoneNumber;
+}