Feat: contact page redesign (#597)

* misc: cherry pick contact commits from mvp contact form

* feat: redesign contact page

* feat: add responsivness

---------

Co-authored-by: David Abram <david@crocoder.dev>

Author: gloriababic

apps/contact/app/(helpers)/notion.ts

@@ -0,0 +1,166 @@
+import { Client, isFullPage } from "@notionhq/client";
+import { notifyContactCreated } from "./slack";
+
+const { NOTION_TOKEN, MENTION_EMAILS, MENTION_IDS } = process.env;
+
+const notion = new Client({ auth: NOTION_TOKEN });
+
+const mentionPerson = ({ id }: { id: string }) => [
+  {
+    mention: {
+      user: {
+        id,
+      },
+    },
+    plain_text: "",
+    href: null,
+  },
+  {
+    text: {
+      content: " ",
+    },
+  },
+];
+
+const getMentions = () => {
+  if (MENTION_EMAILS && MENTION_IDS) {
+    const emails = MENTION_EMAILS.split(",");
+    const ids = MENTION_IDS.split(",");
+
+    if (emails.length && ids.length) {
+      return ids.map((id, i) => ({
+        id,
+      }));
+    }
+  }
+  return [];
+};
+
+const mentionPeople = () => {
+  return getMentions().flatMap(mentionPerson);
+};
+
+const createContactObject = (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+  databaseID: string,
+  source: string,
+) => ({
+  parent: {
+    database_id: databaseID,
+  },
+  properties: {
+    id: {
+      title: [
+        {
+          text: {
+            content: id,
+          },
+        },
+      ],
+    },
+    email: {
+      email,
+    },
+    name: {
+      rich_text: [
+        {
+          text: {
+            content: name,
+          },
+        },
+      ],
+    },
+    date: {
+      date: {
+        start: new Date().toISOString(),
+      },
+    },
+    source: {
+      rich_text: [
+        {
+          text: {
+            content: source,
+          },
+        },
+      ],
+    },
+  },
+  children: [
+    {
+      paragraph: {
+        rich_text: [
+          {
+            text: {
+              content,
+            },
+          },
+        ],
+      },
+    },
+    {
+      paragraph: {
+        rich_text: mentionPeople(),
+      },
+    },
+  ],
+});
+
+const createContact = async (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+  databaseID: string,
+  source: string,
+) => {
+  const response = await notion.pages.create(
+    createContactObject(id, email, name, content, databaseID, source),
+  );
+
+  if (response.id && isFullPage(response)) {
+    return {
+      id: response.id,
+      url: response.url,
+    };
+  }
+  throw {
+    body: {
+      message: "Failed to create notion page",
+    },
+  };
+};
+
+export const processContact = async (event: {
+  id: string;
+  email: string;
+  name: string;
+  message: string;
+  databaseID: string;
+  source: string;
+}) => {
+  const { id, email, name, message, databaseID, source } = event;
+
+  if (!id || !email || !name || !databaseID) {
+    console.log({ event });
+    throw {
+      body: {
+        message: "Missing data in process contact event",
+      },
+    };
+  }
+
+  const { id: notionPageID, url } = await createContact(
+    `Message from ${name} (${id})`,
+    email,
+    name,
+    message,
+    databaseID,
+    source,
+  );
+
+  await notifyContactCreated(name, email, url);
+  return notionPageID;
+};

apps/contact/app/(helpers)/slack.ts

@@ -0,0 +1,73 @@
+const { SLACK_CHANNEL, SLACK_BOT_TOKEN, IS_OFFLINE } = process.env;
+
+export const createPayload = (name: string, email: string, url: string) => ({
+  channel: SLACK_CHANNEL,
+  blocks: [
+    {
+      type: "header",
+      text: {
+        type: "plain_text",
+        text: "We have 1 new message(s).",
+        emoji: true,
+      },
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: `We got a new message from _${name}_ (_${email}_).`,
+      },
+    },
+    {
+      type: "divider",
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: " ",
+      },
+      accessory: {
+        type: "button",
+        text: {
+          type: "plain_text",
+          text: "Show me the message",
+          emoji: true,
+        },
+        value: "new_message_click",
+        url,
+        action_id: "button-action",
+      },
+    },
+  ],
+});
+
+export const notifyContactCreated = async (
+  name: string,
+  email: string,
+  url: string,
+) => {
+  const payload = createPayload(name, email, url);
+  const payloadStringify = JSON.stringify(payload);
+
+  if (IS_OFFLINE) {
+    console.log(payload);
+  } else {
+    const result = await fetch("https://slack.com/api/chat.postMessage", {
+      method: "POST",
+      body: payloadStringify,
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+        "Content-Length": payloadStringify.length.toString(),
+        Authorization: `Bearer ${SLACK_BOT_TOKEN}`,
+        Accept: "application/json",
+      },
+    });
+    if (result.status !== 200) {
+      throw {
+        body: "Could not send notification message to Slack",
+        statusCode: result.status,
+      };
+    }
+  }
+};