From 6b17201f60fe674805150e4faca5a00b00ad1e1a Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Fri, 30 Jan 2026 10:05:49 -0500
Subject: [PATCH] feat: AcfPhone component

---
 .../app/components/acf/AcfPhone.fragment.gql  |  5 ++++
 .../moonshine/app/components/acf/AcfPhone.vue | 14 +++++++++++
 .../moonshine/server/graphql/schema.graphql   | 25 +++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql
 create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfPhone.vue

diff --git a/wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql b/wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql
new file mode 100644
index 0000000..674512c
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql
@@ -0,0 +1,5 @@
+fragment AcfPhone on AcfPhone {
+  national
+  e164
+  extension
+}
diff --git a/wp-content/themes/moonshine/app/components/acf/AcfPhone.vue b/wp-content/themes/moonshine/app/components/acf/AcfPhone.vue
new file mode 100644
index 0000000..e757188
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/acf/AcfPhone.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { AcfPhoneFragment } from "#graphql/operations";
+
+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/moonshine/server/graphql/schema.graphql b/wp-content/themes/moonshine/server/graphql/schema.graphql
index 803fa9b..0b8bc1a 100644
--- a/wp-content/themes/moonshine/server/graphql/schema.graphql
+++ b/wp-content/themes/moonshine/server/graphql/schema.graphql
@@ -79,6 +79,21 @@ interface AcfOptionsPage implements Node {
   parentId: String
 }
 
+"""ACF Phone field"""
+type AcfPhone {
+  """The country code associated with the phone number"""
+  country: String!
+
+  """The phone number in E.164 format"""
+  e164: String!
+
+  """The phone number extension, if any"""
+  extension: String
+
+  """The phone number in national format"""
+  national: String!
+}
+
 """The Headless Login authentication data."""
 type AuthenticationData {
   """A new authentication token to use in future requests."""
@@ -3695,6 +3710,11 @@ type GroupSiteOptions implements AcfFieldGroup & AcfFieldGroupFields & GroupSite
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the &quot;phone&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
+  """
+  phoneNumber: AcfPhone!
 }
 
 """
@@ -3708,6 +3728,11 @@ interface GroupSiteOptions_Fields implements AcfFieldGroup & AcfFieldGroupFields
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the &quot;phone&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
+  """
+  phoneNumber: AcfPhone!
 }
 
 """