feat(ActionBlock): PhoneLink (tel, sms, email)

datocms-environment.ts

@@ -3,5 +3,5 @@
  * @see docs/getting-started.md on how to use this file
  * @see docs/decision-log/2023-10-24-datocms-env-file.md on why file is preferred over env vars
  */
-export const datocmsEnvironment = 'external-links';
+export const datocmsEnvironment = 'email-and-phone-links';
 export const datocmsBuildTriggerId = '30535';

package.json

@@ -56,6 +56,7 @@
     "jiti": "^1.20.0",
     "nanostores": "^0.9.5",
     "oembed-providers": "^1.0.20230906",
+    "phone": "^3.1.56",
     "pretty-bytes": "^6.1.1",
     "promise-all-props": "^3.0.0",
     "regexparam": "^3.0.0",

src/blocks/ActionBlock/ActionBlock.astro

@@ -2,6 +2,7 @@
 import type { ActionBlockFragment } from '@lib/datocms/types';
 import Link from '@components/Link/Link.astro';
 import LinkToRecord from '@components/LinkToRecord/LinkToRecord.astro';
+import PhoneLink from './PhoneLink.astro';
 
 export interface Props {
   block: ActionBlockFragment;
@@ -29,6 +30,15 @@ const actionClassList = (style: string) => ['action', `action--${style}`];
         >
           {item.title}
         </Link>
+      ) : item.__typename === 'PhoneLinkRecord' ? (
+        <PhoneLink
+          action={item.action}
+          phoneNumber={item.phoneNumber}
+          text={item.text}
+          class:list={actionClassList(item.style)}
+        >
+          {item.title}
+        </PhoneLink>
       ) : (
         <Fragment />
       )

src/blocks/ActionBlock/ActionBlock.fragment.graphql

@@ -1,5 +1,6 @@
 #import './InternalLink.fragment.graphql'
 #import './ExternalLink.fragment.graphql'
+#import './PhoneLink.fragment.graphql'
 
 fragment ActionBlock on ActionBlockRecord {
   __typename
@@ -12,5 +13,8 @@ fragment ActionBlock on ActionBlockRecord {
     ... on ExternalLinkRecord {
       ...ExternalLink
     }
+    ... on PhoneLinkRecord {
+      ...PhoneLink
+    }
   }
 }

src/blocks/ActionBlock/PhoneLink.astro

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { PhoneLinkFragment } from '@lib/datocms/types';
+import { phone } from 'phone';
+
+type PhoneLinkProps = Pick<
+  PhoneLinkFragment,
+  'action' | 'phoneNumber' | 'text'
+>;
+export type Props = HTMLAttributes<'a'> & PhoneLinkProps;
+const { action, phoneNumber, text, ...props } = Astro.props;
+
+const formatPhoneNumber = (phoneNumber: string) => {
+  const output = phone(phoneNumber);
+  // console.log(output);
+  return output.isValid ? output.phoneNumber : phoneNumber.replace(/\s/g, '');
+};
+
+const getHref = ({ action, phoneNumber, text }: PhoneLinkProps) => {
+  if (action === 'call') {
+    return `tel:${formatPhoneNumber(phoneNumber)}`;
+  }
+  if (action === 'sms') {
+    const smsNumber = formatPhoneNumber(phoneNumber);
+    return text
+      ? `sms:${smsNumber}?body=${encodeURIComponent(text)}`
+      : `sms:${smsNumber}`;
+  }
+  if (action === 'whatsapp') {
+    const whatsAppNumber = formatPhoneNumber(phoneNumber).replace('+', '');
+    return text
+      ? `https://wa.me/${whatsAppNumber}?text=${encodeURIComponent(text)}`
+      : `https://wa.me/${whatsAppNumber}`;
+  }
+  return '';
+};
+
+const href = getHref({ action, phoneNumber, text });
+---
+
+<a {href} {...props}><slot /></a>

src/blocks/ActionBlock/PhoneLink.fragment.graphql

@@ -0,0 +1,9 @@
+fragment PhoneLink on PhoneLinkRecord {
+  __typename
+  id
+  title
+  phoneNumber
+  action
+  text
+  style
+}