V3 - format phone numbers (#871)

* Add formatting to phone numbers

* Refactor function

* Add comment and fix slice

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

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 && (

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>

src/components/utils/formatPhoneNumber.ts

@@ -0,0 +1,18 @@
+/*
+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(0, 3)} ${phoneNumber.slice(3, 6)} ${phoneNumber.slice(6, 8)} ${phoneNumber.slice(8)}`;
+  } else if (firstDigitsOfPhoneNumber == "+46") {
+    formattedPhoneNumber = `${phoneNumber.slice(0, 3)} 0${phoneNumber.slice(3, 5)}-${phoneNumber.slice(5, 8)} ${phoneNumber.slice(8, 10)} ${phoneNumber.slice(10)}`;
+  } else {
+    formattedPhoneNumber = phoneNumber;
+  }
+  return formattedPhoneNumber;
+}