From 1367ee2bb1f231a5380af440f70ab912ace39071 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Mon, 30 Mar 2026 13:59:40 -0400
Subject: [PATCH] feat: AcfPhone

---
 .../themes/headless/app/components/acf/AcfPhone.gql   |  5 +++++
 .../themes/headless/app/components/acf/AcfPhone.vue   | 11 +++++++++++
 .../themes/headless/app/components/acf/AcfSocial.vue  |  4 ++--
 .../headless/app/components/site/SiteFooter.vue       |  5 +++--
 .../headless/app/composables/useSiteOptions.gql       |  3 +++
 5 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfPhone.gql
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfPhone.vue

diff --git a/wp-content/themes/headless/app/components/acf/AcfPhone.gql b/wp-content/themes/headless/app/components/acf/AcfPhone.gql
new file mode 100644
index 0000000..cb75160
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfPhone.gql
@@ -0,0 +1,5 @@
+fragment AcfPhone on AcfPhone {
+  e164
+  national
+  extension
+}
diff --git a/wp-content/themes/headless/app/components/acf/AcfPhone.vue b/wp-content/themes/headless/app/components/acf/AcfPhone.vue
new file mode 100644
index 0000000..7ad9efd
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfPhone.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { AcfPhoneFragment } from "#graphql/types";
+
+defineProps<{ phone: AcfPhoneFragment; link?: boolean }>();
+</script>
+
+<template>
+  <Component :is="link ? 'a' : 'span'" v-if="phone" :href="link ? `tel:${phone.e164}` : undefined">
+    {{ phone.national }}{{ phone.extension ? ` ext. ${phone.extension}` : "" }}
+  </Component>
+</template>
diff --git a/wp-content/themes/headless/app/components/acf/AcfSocial.vue b/wp-content/themes/headless/app/components/acf/AcfSocial.vue
index 157c4d2..e6758bb 100644
--- a/wp-content/themes/headless/app/components/acf/AcfSocial.vue
+++ b/wp-content/themes/headless/app/components/acf/AcfSocial.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AcfSocialFragment } from "#graphql/types";
 
-defineProps<{ social?: AcfSocialFragment }>();
+defineProps<{ social: AcfSocialFragment }>();
 
 const socialIconNames = {
   "facebook.com": "i-cib-facebook-f",
@@ -24,7 +24,7 @@ function getSocialIcon(url: string): string {
 </script>
 
 <template>
-  <ul v-if="social?.profiles.length">
+  <ul v-if="social.profiles.length">
     <li v-for="({ url }, key) in social.profiles" :key="key">
       <a :href="url" target="_blank" rel="noopener noreferrer">
         <UIcon :name="getSocialIcon(url)" />
diff --git a/wp-content/themes/headless/app/components/site/SiteFooter.vue b/wp-content/themes/headless/app/components/site/SiteFooter.vue
index a7554da..ff94002 100644
--- a/wp-content/themes/headless/app/components/site/SiteFooter.vue
+++ b/wp-content/themes/headless/app/components/site/SiteFooter.vue
@@ -3,12 +3,13 @@ const { data: siteOptions } = await useSiteOptions();
 </script>
 
 <template>
-  <footer class="links:link-prose bg-muted">
+  <footer v-if="siteOptions" class="bg-muted links:link-underline">
     <div class="container py-3">
       <AcfSocial
-        :social="siteOptions?.social"
+        :social="siteOptions.social"
         class="flex items-center gap-1.5 links:link-opacity"
       ></AcfSocial>
+      <AcfPhone :phone="siteOptions.phoneNumber" link></AcfPhone>
     </div>
     <SiteFooterBottom />
   </footer>
diff --git a/wp-content/themes/headless/app/composables/useSiteOptions.gql b/wp-content/themes/headless/app/composables/useSiteOptions.gql
index 09b1073..ae8d301 100644
--- a/wp-content/themes/headless/app/composables/useSiteOptions.gql
+++ b/wp-content/themes/headless/app/composables/useSiteOptions.gql
@@ -3,6 +3,9 @@ fragment SiteOptions on GroupSiteOptions {
   social @nonNull {
     ...AcfSocial
   }
+  phoneNumber {
+    ...AcfPhone
+  }
 }
 
 query SiteOptions {