feat: add plain support integration to the support section

Author: AGMASO

.env.example

@@ -20,6 +20,7 @@ NEXT_PUBLIC_IS_CYPRESS_ENABLED=false
 NEXT_PUBLIC_AMPLITUDE_API_KEY=6b28cb736c53d59f0951a50f59597aae
 NEXT_PUBLIC_PRIVATE_RPC_ENABLED=false
 
+
 # Set to 'true' to allow all domains for CORS (use only in development)
 CORS_DOMAINS_ALLOWED=false
 
@@ -40,3 +41,4 @@ SONIC_RPC_API_KEY=
 CELO_RPC_API_KEY=
 FAMILY_API_KEY=
 FAMILY_API_URL=
+PLAIN_API_KEY=

package.json

@@ -52,6 +52,7 @@
     "@safe-global/safe-apps-provider": "^0.18.4",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@tanstack/react-query": "^5.62.8",
+    "@team-plain/typescript-sdk": "^5.10.3",
     "@visx/annotation": "^3.3.0",
     "@visx/axis": "^2.14.0",
     "@visx/curve": "^2.1.0",

pages/api/support-create-ticket.ts

@@ -0,0 +1,130 @@
+import {
+  ComponentDividerSpacingSize,
+  ComponentSpacerSize,
+  ComponentTextColor,
+  ComponentTextSize,
+  PlainClient,
+} from '@team-plain/typescript-sdk';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+const apiKey = process.env.PLAIN_API_KEY;
+if (!apiKey) throw new Error('PLAIN_API_KEY env variable is missing');
+const client = new PlainClient({ apiKey });
+const isEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim());
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ message: 'Method Not Allowed' });
+  }
+
+  try {
+    const { email, text } = req.body;
+
+    if (!email || !text) {
+      return res.status(400).json({ message: 'Email and text are required.' });
+    }
+
+    if (!isEmail(email)) {
+      return res.status(400).json({ message: 'Invalid email format.' });
+    }
+
+    if (!text?.trim()) {
+      return res.status(400).json({ error: 'Missing inquiry' });
+    }
+
+    const customerRes = await client.upsertCustomer({
+      identifier: {
+        emailAddress: email,
+      },
+
+      onCreate: {
+        fullName: email,
+        email: {
+          email: email,
+          isVerified: true,
+        },
+      },
+
+      onUpdate: {},
+    });
+
+    if (customerRes.error) {
+      console.error('Error upserting Customer:', customerRes.error);
+
+      return res
+        .status(400)
+        .json({ message: 'Failed to create support ticket', error: customerRes.error });
+    }
+
+    const result = await client.createThread({
+      title: 'New Support Inquiry',
+      customerIdentifier: {
+        emailAddress: email,
+      },
+      components: [
+        {
+          componentText: {
+            text: 'Support inquiry from aave.com',
+          },
+        },
+        {
+          componentDivider: {
+            dividerSpacingSize: ComponentDividerSpacingSize.M,
+          },
+        },
+        {
+          componentText: {
+            textSize: ComponentTextSize.S,
+            textColor: ComponentTextColor.Muted,
+            text: 'Contact email',
+          },
+        },
+        {
+          componentText: {
+            text: email,
+          },
+        },
+        {
+          componentSpacer: {
+            spacerSize: ComponentSpacerSize.M,
+          },
+        },
+        {
+          componentText: {
+            textSize: ComponentTextSize.S,
+            textColor: ComponentTextColor.Muted,
+            text: 'Message',
+          },
+        },
+        {
+          componentPlainText: {
+            plainText: text,
+          },
+        },
+        {
+          componentSpacer: {
+            spacerSize: ComponentSpacerSize.M,
+          },
+        },
+      ],
+
+      // Label types for: web-support-form
+      labelTypeIds: ['lt_01K36FQ2J7ZGXQ55RV769TJHYN'],
+    });
+
+    if (result.error) {
+      console.error('Error creating support ticket:', result.error);
+
+      return res
+        .status(400)
+        .json({ message: 'Failed to create support ticket', error: result.error });
+    }
+
+    return res
+      .status(200)
+      .json({ message: 'Support Ticket Created Successfully', data: result.data.id, ok: true });
+  } catch (error) {
+    console.error('Support ticket backend error:', error);
+    return res.status(500).json({ message: 'Internal Server Error' });
+  }
+}

src/layouts/AppFooter.tsx

@@ -72,8 +72,8 @@ export function AppFooter() {
     },
     {
       href: 'https://discord.com/invite/aave',
-      label: <Trans>Send feedback</Trans>,
-      key: 'Send feedback',
+      label: <Trans>Get Support</Trans>,
+      key: 'Get Support',
       onClick: (event: React.MouseEvent) => {
         event.preventDefault();
         setFeedbackOpen(true);

src/layouts/MainLayout.tsx

@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent';
 import { useModalContext } from 'src/hooks/useModal';
-import { FeedbackModal } from 'src/layouts/FeedbackDialog';
+import { SupportModal } from 'src/layouts/SupportModal';
 // import { useRootStore } from 'src/store/root';
 // import { CustomMarket } from 'src/ui-config/marketsConfig';
 import { FORK_ENABLED } from 'src/utils/marketsAndNetworksConfig';
@@ -141,7 +141,7 @@ export function MainLayout({ children }: { children: ReactNode }) {
         {children}
       </Box>
       <AppFooter />
-      <FeedbackModal />
+      <SupportModal />
       {FORK_ENABLED ? null : <AnalyticsConsent />}
     </>
   );

src/layouts/FeedbackDialog.tsx renamed to src/layouts/SupportModal.tsx

@@ -8,7 +8,7 @@ import { BaseSuccessView } from 'src/components/transactions/FlowCommons/BaseSuc
 import { useRootStore } from 'src/store/root';
 import { useShallow } from 'zustand/shallow';
 
-export const FeedbackModal = () => {
+export const SupportModal = () => {
   const [feedbackDialogOpen, setFeedbackOpen] = useRootStore(
     useShallow((state) => [state.feedbackDialogOpen, state.setFeedbackOpen])
   );
@@ -45,7 +45,7 @@ export const FeedbackModal = () => {
     }
   };
 
-  const handleFeedbackSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleSupportSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (emailError || !email) {
@@ -55,7 +55,7 @@ export const FeedbackModal = () => {
 
     setIsLoading(true);
 
-    const url = process.env.NEXT_PUBLIC_API_BASEURL + '/feedback';
+    const url = '/api/support-create-ticket';
 
     const payload = {
       text: value,
@@ -104,7 +104,7 @@ export const FeedbackModal = () => {
         ) : success ? (
           <BaseSuccessView hideTx={true}>
             <Box display="flex" justifyContent={'center'} mt={3}>
-              <Trans>Thank you for submitting feedback!</Trans>
+              <Trans>Thank you for submitting your inquiry!</Trans>
             </Box>
           </BaseSuccessView>
         ) : error ? (
@@ -145,7 +145,7 @@ export const FeedbackModal = () => {
         ) : (
           <Box width={'100%'}>
             <Typography variant="h3" display="flex" justifyContent="flex-start">
-              <Trans>Feedback </Trans>
+              <Trans>Support</Trans>
             </Typography>
 
             <Typography
@@ -154,22 +154,21 @@ export const FeedbackModal = () => {
               sx={{ textAlign: 'center', mb: 2, mt: 4 }}
             >
               <Trans>
-                Let us know how we can make the app better for you. For user support related
-                inquiries please reach out on
+                Let us know how we can help you. You may also consider joining our community
               </Trans>{' '}
               <Link
                 target="_blank"
                 variant="subheader1"
                 color="text.secondary"
-                href="https://discord.com/invite/aave"
+                href="https://discord.gg/aave"
                 underline="always"
               >
-                discord
+                Discord server
               </Link>
               {'.'}
             </Typography>
             <Box width={'100%'}>
-              <form style={{ width: '100%' }} onSubmit={handleFeedbackSubmit}>
+              <form style={{ width: '100%' }} onSubmit={handleSupportSubmit}>
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                   <Typography color="text.secondary">
                     <Trans>Email</Trans>
@@ -179,6 +178,7 @@ export const FeedbackModal = () => {
                 <TextField
                   // label="Email"
                   onBlur={onBlur}
+                  placeholder="Please enter a valid email address here."
                   fullWidth
                   value={email}
                   onChange={handleEmailChange}
@@ -188,13 +188,13 @@ export const FeedbackModal = () => {
                 />
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                   <Typography color="text.secondary">
-                    <Trans>Feedback</Trans>
+                    <Trans>Inquiry</Trans>
                   </Typography>
                 </Box>
                 <TextField
                   multiline
                   rows={4}
-                  placeholder="Can you add this new feature"
+                  placeholder="Please describe your issue here."
                   fullWidth
                   value={value}
                   onChange={(e) => setValue(e.target.value)}
@@ -210,7 +210,7 @@ export const FeedbackModal = () => {
                 />
                 <Box display="flex" flexDirection={'row-reverse'} mt={3}>
                   <Button disabled={!value || !!emailError} variant="contained" type="submit">
-                    <Trans>Send Feedback</Trans>
+                    <Trans>Submit</Trans>
                   </Button>
                 </Box>
               </form>