feature: Email Link and Phone Link (in Action Block)

config/datocms/migrations/1735398092_emailAndPhoneLinks.ts

@@ -0,0 +1,232 @@
+import type { Client } from '@datocms/cli/lib/cma-client-node';
+import { actionStyleField } from './1734363388_actionBlock';
+
+export default async function (client: Client) {
+  console.log('Manage upload filters');
+
+  console.log('Install plugin "Dropdown Conditional Fields"');
+  await client.plugins.create({
+    id: 'Srdwo4YOREmRtvMAV2otlQ',
+    package_name: 'datocms-plugin-dropdown-conditional-fields',
+  });
+
+  console.log('Create new models/block models');
+
+  console.log('Create block model "\uD83D\uDCDE Phone Link" (`phone_link`)');
+  await client.itemTypes.create(
+    {
+      id: 'C5fWG5CYRJ69oqaP6CjYdA',
+      name: '\uD83D\uDCDE Phone Link',
+      api_key: 'phone_link',
+      modular_block: true,
+      inverse_relationships_enabled: false,
+    },
+    {
+      skip_menu_item_creation: true,
+      schema_menu_item_id: 'YNbDA4R-Srqf0u4-Rya3Ug',
+    }
+  );
+
+  console.log('Create block model "\uD83D\uDCE7 Email Link" (`email_link`)');
+  await client.itemTypes.create(
+    {
+      id: 'b90_c2zeS6auRELEzZHNcA',
+      name: '\uD83D\uDCE7 Email Link',
+      api_key: 'email_link',
+      modular_block: true,
+      inverse_relationships_enabled: false,
+    },
+    {
+      skip_menu_item_creation: true,
+      schema_menu_item_id: 'Vgf9ZeHvTqeh-tMAks2jFw',
+    }
+  );
+
+  console.log('Creating new fields/fieldsets');
+
+  console.log(
+    'Create Single-line string field "Title" (`title`) in block model "\uD83D\uDCDE Phone Link" (`phone_link`)'
+  );
+  await client.fields.create('C5fWG5CYRJ69oqaP6CjYdA', {
+    id: 'fp9Cugu8QlKqawis3QTnPA',
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Phone number" (`phone_number`) in block model "\uD83D\uDCDE Phone Link" (`phone_link`)'
+  );
+  await client.fields.create('C5fWG5CYRJ69oqaP6CjYdA', {
+    id: 'bfnOOp5cSM-x8S5RKEpKsw',
+    label: 'Phone number',
+    field_type: 'string',
+    api_key: 'phone_number',
+    hint: 'Best to use international notation: +31 20 2610954',
+    validators: { required: {} },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Action" (`action`) in block model "\uD83D\uDCDE Phone Link" (`phone_link`)'
+  );
+  await client.fields.create('C5fWG5CYRJ69oqaP6CjYdA', {
+    id: 'ZbVIU9fdQgG8IFcEqIQ54A',
+    label: 'Action',
+    field_type: 'string',
+    api_key: 'action',
+    validators: { required: {}, enum: { values: ['call', 'sms', 'whatsapp'] } },
+    appearance: {
+      addons: [
+        {
+          id: 'Srdwo4YOREmRtvMAV2otlQ',
+          parameters: {
+            dependencies:
+              '{\n  "sms": [\n    "text"\n  ],\n  "whatsapp": [\n    "text"\n  ]\n}',
+          },
+        },
+      ],
+      editor: 'string_select',
+      parameters: {
+        options: [
+          { hint: '', label: 'Call', value: 'call' },
+          { hint: '', label: 'Text (sms)', value: 'sms' },
+          { hint: '', label: 'WhatsApp', value: 'whatsapp' },
+        ],
+      },
+    },
+    default_value: 'call',
+  });
+
+  console.log(
+    'Create Multiple-paragraph text field "Text" (`text`) in block model "\uD83D\uDCDE Phone Link" (`phone_link`)'
+  );
+  await client.fields.create('C5fWG5CYRJ69oqaP6CjYdA', {
+    id: 'FKNWfZ5FS-KwBcWn9H8C7A',
+    label: 'Text',
+    field_type: 'text',
+    api_key: 'text',
+    validators: { sanitized_html: { sanitize_before_validation: true } },
+    appearance: {
+      addons: [],
+      editor: 'textarea',
+      parameters: { placeholder: null },
+      type: 'textarea',
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Style" (`style`) in block model "\uD83D\uDCDE Phone Link" (`phone_link`)'
+  );
+  await client.fields.create('C5fWG5CYRJ69oqaP6CjYdA', {
+    id: 'GnHv18BPRyCsFsCAGmX0cQ',
+    ...actionStyleField,
+  });
+
+  console.log(
+    'Create Single-line string field "Title" (`title`) in block model "\uD83D\uDCE7 Email Link" (`email_link`)'
+  );
+  await client.fields.create('b90_c2zeS6auRELEzZHNcA', {
+    id: 'RM3FgSTnT4W5lYs16ndS9Q',
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Email address" (`email_address`) in block model "\uD83D\uDCE7 Email Link" (`email_link`)'
+  );
+  await client.fields.create('b90_c2zeS6auRELEzZHNcA', {
+    id: 'VpbcpEhCS5OjLjrdUU8Z6w',
+    label: 'Email address',
+    field_type: 'string',
+    api_key: 'email_address',
+    validators: { required: {}, format: { predefined_pattern: 'email' } },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Email Subject" (`email_subject`) in block model "\uD83D\uDCE7 Email Link" (`email_link`)'
+  );
+  await client.fields.create('b90_c2zeS6auRELEzZHNcA', {
+    id: 'LMloAtp6SxOTDuaxCQ7L9g',
+    label: 'Email Subject',
+    field_type: 'string',
+    api_key: 'email_subject',
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Multiple-paragraph text field "Email Body" (`email_body`) in block model "\uD83D\uDCE7 Email Link" (`email_link`)'
+  );
+  await client.fields.create('b90_c2zeS6auRELEzZHNcA', {
+    id: 'DvV-XIMvT-eioHVaY6AOeQ',
+    label: 'Email Body',
+    field_type: 'text',
+    api_key: 'email_body',
+    appearance: {
+      addons: [],
+      editor: 'textarea',
+      parameters: { placeholder: null },
+      type: 'textarea',
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "Style" (`style`) in block model "\uD83D\uDCE7 Email Link" (`email_link`)'
+  );
+  await client.fields.create('b90_c2zeS6auRELEzZHNcA', {
+    id: 'OAAORe89QV-DoOO1GfG5Jw',
+    ...actionStyleField,
+  });
+
+  console.log('Update existing fields/fieldsets');
+
+  console.log(
+    'Update Modular Content (Multiple blocks) field "Items" (`items`) in block model "\uD83C\uDF9B\uFE0F Action Block" (`action_block`)'
+  );
+  await client.fields.update('dAUckF8qR0edf_f7zam6hA', {
+    validators: {
+      rich_text_blocks: {
+        item_types: [
+          'C5fWG5CYRJ69oqaP6CjYdA',
+          'GWnhoQDqQoGJj4-sQTVttw',
+          'Yk1ge9eTTf25Iwph1Dx3_g',
+          'b90_c2zeS6auRELEzZHNcA',
+        ],
+      },
+      size: { min: 1 },
+    },
+  });
+}

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 = 'control-bot-access';
+export const datocmsEnvironment = 'email-phone-links';
 export const datocmsBuildTriggerId = '30535';

src/blocks/ActionBlock/ActionBlock.astro

@@ -2,6 +2,8 @@
 import type { ActionBlockFragment } from '@lib/datocms/types';
 import Link from '@components/Link/Link.astro';
 import LinkToRecord from '@components/LinkToRecord/LinkToRecord.astro';
+import EmailLink from './EmailLink.astro';
+import PhoneLink from './PhoneLink.astro';
 
 export interface Props {
   block: ActionBlockFragment;
@@ -29,6 +31,24 @@ const actionClassList = (style: string) => ['action', `action--${style}`];
         >
           {item.title}
         </Link>
+      ) : item.__typename === 'EmailLinkRecord' ? (
+        <EmailLink
+          emailAddress={item.emailAddress}
+          emailSubject={item.emailSubject}
+          emailBody={item.emailBody}
+          class:list={actionClassList(item.style)}
+        >
+          {item.title}
+        </EmailLink>
+      ) : 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,7 @@
 #import './InternalLink.fragment.graphql'
 #import './ExternalLink.fragment.graphql'
+#import './EmailLink.fragment.graphql'
+#import './PhoneLink.fragment.graphql'
 
 fragment ActionBlock on ActionBlockRecord {
   __typename
@@ -12,5 +14,11 @@ fragment ActionBlock on ActionBlockRecord {
     ... on ExternalLinkRecord {
       ...ExternalLink
     }
+    ... on EmailLinkRecord {
+      ...EmailLink
+    }
+    ... on PhoneLinkRecord {
+      ...PhoneLink
+    }
   }
 }

src/blocks/ActionBlock/EmailLink.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { EmailLinkFragment } from '@lib/datocms/types';
+
+type EmailLinkProps = Pick<
+  EmailLinkFragment,
+  'emailAddress' | 'emailSubject' | 'emailBody'
+>;
+export type Props = HTMLAttributes<'a'> & EmailLinkProps;
+const { emailAddress, emailSubject, emailBody, ...props } = Astro.props;
+
+const getHref = ({ emailAddress, emailSubject, emailBody }: EmailLinkProps) => {
+  const url = new URL(`mailto:${emailAddress}`);
+  const params = [
+    ...emailSubject ? [`subject=${encodeURIComponent(emailSubject)}`] : [],
+    ...emailBody ? [`body=${encodeURIComponent(emailBody)}`] : [],
+  ];
+  if (params.length) url.search = params.join('&');
+  return url.href;
+};
+
+const href = getHref({ emailAddress, emailSubject, emailBody });
+---
+
+<a {href} {...props}><slot /></a>

src/blocks/ActionBlock/EmailLink.fragment.graphql

@@ -0,0 +1,9 @@
+fragment EmailLink on EmailLinkRecord {
+  __typename
+  id
+  title
+  emailAddress
+  emailSubject
+  emailBody
+  style
+}

src/blocks/ActionBlock/PhoneLink.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { PhoneLinkFragment } from '@lib/datocms/types';
+
+type PhoneLinkProps = Pick<
+  PhoneLinkFragment,
+  'action' | 'phoneNumber' | 'text'
+>;
+export type Props = HTMLAttributes<'a'> & PhoneLinkProps;
+const { action, phoneNumber, text, ...props } = Astro.props;
+
+const formatPhoneNumber = (phoneNumber: string) => {
+  return 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
+}