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 1/3] 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;
+}

From 777f83b2b5dacc00828521298c160663de4d8c82 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <ima@variant.no>
Date: Fri, 8 Nov 2024 14:14:11 +0100
Subject: [PATCH 2/3] Refactor function

---
 src/components/utils/formatPhoneNumber.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/utils/formatPhoneNumber.ts b/src/components/utils/formatPhoneNumber.ts
index 4f6676519..fc1108a29 100644
--- a/src/components/utils/formatPhoneNumber.ts
+++ b/src/components/utils/formatPhoneNumber.ts
@@ -1,12 +1,12 @@
 export default function formatPhoneNumber(phoneNumber: string) {
-  const firstDigitsOfPhoneNumber = phoneNumber?.slice(0, 3);
+  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)}`;
+    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)}`;
+    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 : "";
+    formattedPhoneNumber = phoneNumber;
   }
   return formattedPhoneNumber;
 }

From 50bf34dd3c355c1cfbd28d7439bee8a76afcf7c6 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <ima@variant.no>
Date: Fri, 8 Nov 2024 14:40:43 +0100
Subject: [PATCH 3/3] Add comment and fix slice

---
 src/components/utils/formatPhoneNumber.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/utils/formatPhoneNumber.ts b/src/components/utils/formatPhoneNumber.ts
index fc1108a29..bb187db5f 100644
--- a/src/components/utils/formatPhoneNumber.ts
+++ b/src/components/utils/formatPhoneNumber.ts
@@ -1,10 +1,16 @@
+/*
+Format phone numbers:
+Formatting for Norwegian numbers: +47 xxx xx xxx
+Formatting for Swedish numbers: +46 xxx-xxx xx xx
+*/
+
 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)}`;
+    formattedPhoneNumber = `${phoneNumber.slice(0, 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)}`;
+    formattedPhoneNumber = `${phoneNumber.slice(0, 3)} 0${phoneNumber.slice(3, 5)}-${phoneNumber.slice(5, 8)} ${phoneNumber.slice(8, 10)} ${phoneNumber.slice(10)}`;
   } else {
     formattedPhoneNumber = phoneNumber;
   }