first commit

Author: mattvagni

README.md

@@ -1,21 +1,18 @@
 # Example NextJS Advanced Contact Form
 
-This NextJS app shows how to build a contact form using Plain's [Custom Timeline Entries](https://docs.plain.com/recipes/custom-timeline-entry-upsert) and [Typescript SDK](https://www.npmjs.com/package/@team-plain/typescript-sdk).
+This NextJS app shows how to build a floating support bubble using Plain's [Custom Timeline Entries](https://docs.plain.com/recipes/custom-timeline-entry-upsert) and [Typescript SDK](https://www.npmjs.com/package/@team-plain/typescript-sdk).
 
-Using this contact form you will be able to quickly prioritise customers in Plain by what they are getting in touch about and how urgent it is.
+Using this contact form customers can easily get in touch with you
 
 This example mainly consists of one [Next.js API Route](https://nextjs.org/docs/api-routes/introduction) (`/api/contact-form.tsx`) which calls the Plain API to:
 
 - Create the customer within Plain if they don't exist
 - Create a Custom Timeline Entry with the contents of the contact form 
-- Open an issue with the right priority
 
-You can see what it looks like here https://example-nextjs-advanced-contact-form.vercel.app/ but you will need to run this example yourself if you want to see what it looks like within Plain as someone providing support.
+You can see what it looks like here https://TODO.vercel.app/ but you will need to run this example yourself if you want to see what it looks like within Plain as someone providing support.
 
 This is meant as a starting point that you can customise to specifically fit your product and needs.
 
-![Screenshot of demo](./screenshot.png)
-
 ### Interesting files:
 
 - The API route: [./pages/api/contact-form.ts](./pages/api/contact-form.ts)
@@ -32,24 +29,12 @@ For this demo you will need to grant the API key the following permissions:
 - `customer:create`
 - `customer:edit`
 - `customer:read`
-- `issue:create`
-- `issue:read`
-- `issueType:read`
-
-You will then have to create a few issue types in settings and copy their IDs. This example assumes you have an issue type for bugs, demo request, feature suggestions, security reports and general questions.
 
 You will then need to make a file called  `.env.local` file with the following details:
 
 ```bash
 # Your Plain API Key:
 PLAIN_API_KEY=plainApiKey_XXX
-
-# The issue type ids you created:
-NEXT_PUBLIC_PLAIN_ISSUE_TYPE_ID_BUG=it_XXX
-NEXT_PUBLIC_PLAIN_ISSUE_TYPE_ID_DEMO=it_XXX
-NEXT_PUBLIC_PLAIN_ISSUE_TYPE_ID_FEATURE=it_XXX
-NEXT_PUBLIC_PLAIN_ISSUE_TYPE_ID_SECURITY=it_XXX
-NEXT_PUBLIC_PLAIN_ISSUE_TYPE_ID_QUESTION=it_XXX
 ```
 
 After that you can run `npm install` followed by `npm run dev` to run the NextJS app and try it out!

package.json

@@ -12,11 +12,13 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-select": "^1.2.1",
     "@team-plain/typescript-sdk": "^1.1.0",
     "@types/lodash": "^4.14.194",
     "@types/ua-parser-js": "^0.7.36",
     "assert-ts": "^0.3.4",
+    "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "next": "13.3.2",
     "prettier": "2.8.8",

pages/api/contact-form.ts

@@ -17,18 +17,9 @@ export type ResponseData = {
 };
 
 export type RequestBody = {
-  customer: {
-    name: string;
-    email: string;
-  };
-  customeTimelineEntry: {
-    title: string;
-    components: UpsertCustomTimelineEntryInput['components'];
-  };
-  issue: {
-    issueTypeId: string;
-    priority: number | null;
-  };
+  name: string;
+  email: string;
+  message: string;
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ResponseData>) {
@@ -37,12 +28,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
 
   const upsertCustomerRes = await client.upsertCustomer({
     identifier: {
-      emailAddress: body.customer.email,
+      emailAddress: body.email,
     },
     onCreate: {
-      fullName: body.customer.name,
+      fullName: body.name,
       email: {
-        email: body.customer.email,
+        email: body.email,
         isVerified: true,
       },
     },
@@ -60,8 +51,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
 
   const upsertTimelineEntryRes = await client.upsertCustomTimelineEntry({
     customerId: upsertCustomerRes.data.id,
-    title: body.customeTimelineEntry.title,
-    components: body.customeTimelineEntry.components,
+    title: 'Contact form',
+    components: [
+      {
+        componentText: {
+          text: body.message,
+        },
+      },
+    ],
     changeCustomerStatusToActive: true,
   });
 
@@ -74,18 +71,5 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
 
   console.log(`Custom timeline entry upserted ${upsertTimelineEntryRes.data.timelineEntry.id}.`);
 
-  const createIssueRes = await client.createIssue({
-    customerId: upsertCustomerRes.data.id,
-    issueTypeId: body.issue.issueTypeId,
-    priorityValue: body.issue.priority,
-  });
-
-  if (createIssueRes.error) {
-    console.error(inspect(createIssueRes.error, { showHidden: false, depth: null, colors: true }));
-    return res.status(500).json({ error: createIssueRes.error.message });
-  }
-
-  console.log(`Issue created ${createIssueRes.data.id}`);
-
   res.status(200).json({ error: null });
 }

pages/index.tsx

@@ -1,20 +1,18 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { ContactForm } from '../src/components/contactForm';
-import { Layout } from '../src/components/layout';
+import { HelpButton } from '../src/components/helpButton';
 
 const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Custom Timeline Entries NextJS Example</title>
+        <title>Example NextJS Floating Form</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Layout>
-        <ContactForm />
-      </Layout>
+      <HelpButton />
     </>
   );
 };

public/images/background.svg

@@ -1,13 +1,13 @@
 .button {
     padding: 8px 16px;
     font-weight: 500;
-    background: #4747eb;
-    color: var(--textColor);
+    background: #e9d5ff;
+    color: #581c87;
     border-radius: 8px;
     outline: none;
     border: none;
     display: block;
-    max-width: 180px;
+    
     line-height: 24px;
     transition: background 150ms linear;
     position: relative;
@@ -18,23 +18,23 @@
 }
 
 .button:hover:not(:disabled) {
-    background: #5050f0;
+    background: #d8b4fe;
 }
 
 .button:disabled {
-    background: #cdccda1f;
-    color: #7f7e80;
+    background: #e4e4e7;
+    color: #27272a;
 }
 
 
 .spinner {
-    --size: 18px;
+    --size: 16px;
     position: absolute;
     left: 50%;
     top: 50%;
     width: var(--size);
     height: var(--size);
-    border: 2px solid #FFF;
+    border: 2px solid #27272a;
     border-bottom-color: transparent;
     border-radius: 50%;
     display: inline-block;

screenshot.png

@@ -1,13 +1,18 @@
-.basicDetails {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-}
-
 .form {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 16px;
+    opacity: 0;
+    animation: fadeIn 300ms forwards 300ms;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 .buttonRow {