Add formatting to phone numbers

varianter · Nov 8, 2024 · 41fe82f · 41fe82f
1 parent 616b07c
commit 41fe82f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}