feat: AcfPhone component

wp-content/themes/moonshine/app/components/acf/AcfPhone.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfPhone on AcfPhone {
+  national
+  e164
+  extension
+}

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>

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 "phone" Field Type added to the schema as part of the "GroupSiteOptions" 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 "phone" Field Type added to the schema as part of the "GroupSiteOptions" Field Group
+  """
+  phoneNumber: AcfPhone!
 }
 
 """