feat: AcfPhone

wp-content/themes/headless/app/components/acf/AcfPhone.gql

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

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>

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)" />

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>

wp-content/themes/headless/app/composables/useSiteOptions.gql

@@ -3,6 +3,9 @@ fragment SiteOptions on GroupSiteOptions {
   social @nonNull {
     ...AcfSocial
   }
+  phoneNumber {
+    ...AcfPhone
+  }
 }
 
 query SiteOptions {