feat: send rich info to Plain support and track submit event for amplitude

pages/api/support-create-ticket.ts

@@ -1,3 +1,4 @@
+import { ethers } from 'ethers';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { CREATE_THREAD_MUTATION, UPSERT_CUSTOMER_MUTATION } from './plain-mutations';
@@ -57,7 +58,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 
   try {
-    const { email, text } = req.body;
+    const { email, text, walletAddress } = req.body;
 
     if (!email || !text) {
       return res.status(400).json({ message: 'Email and text are required.' });
@@ -70,6 +71,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     if (!text?.trim()) {
       return res.status(400).json({ error: 'Missing inquiry' });
     }
+    let sanitizedWalletAddress: string | undefined = undefined;
+    if (walletAddress && typeof walletAddress === 'string') {
+      const candidate = walletAddress.trim();
+      if (ethers.utils.isAddress(candidate)) {
+        sanitizedWalletAddress = ethers.utils.getAddress(candidate);
+      } else {
+        console.warn('Invalid walletAddress format provided');
+      }
+    }
 
     const upsertCustomerVariables = {
       input: {
@@ -109,6 +119,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         customerIdentifier: {
           emailAddress: email,
         },
+
         components: [
           {
             componentText: {
@@ -155,6 +166,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             },
           },
         ],
+        threadFields: [
+          {
+            key: 'wallet_address',
+            type: 'STRING',
+            stringValue: sanitizedWalletAddress ?? '',
+          },
+        ],
       },
     };
     const result = await makeGraphQLRequest(CREATE_THREAD_MUTATION, createThreadVariables);

src/layouts/SupportModal.tsx

@@ -1,17 +1,31 @@
 import { XIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
-import { Box, Button, CircularProgress, SvgIcon, TextField, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  FormControlLabel,
+  SvgIcon,
+  TextField,
+  Typography,
+} from '@mui/material';
 import { FormEvent, useEffect, useState } from 'react';
 import { BasicModal } from 'src/components/primitives/BasicModal';
 import { Link } from 'src/components/primitives/Link';
 import { BaseSuccessView } from 'src/components/transactions/FlowCommons/BaseSuccess';
+import { CONSENT_KEY } from 'src/store/analyticsSlice';
 import { useRootStore } from 'src/store/root';
+import { SUPPORT } from 'src/utils/events';
 import { useShallow } from 'zustand/shallow';
 
 export const SupportModal = () => {
   const [feedbackDialogOpen, setFeedbackOpen] = useRootStore(
     useShallow((state) => [state.feedbackDialogOpen, state.setFeedbackOpen])
   );
+  const [account, trackEvent] = useRootStore(
+    useShallow((store) => [store.account, store.trackEvent])
+  );
 
   const [value, setValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -20,13 +34,19 @@ export const SupportModal = () => {
   const [email, setEmail] = useState('');
   const [emailError, setEmailError] = useState('');
   const [dirtyEmailField, setDirtyEmailField] = useState(false);
+  const [hasOptedIn, setHasOptedIn] = useState(false);
+  const [isShareWalletApproved, setIsShareWalletApproved] = useState(false);
 
   const onBlur = () => {
     if (!dirtyEmailField) setDirtyEmailField(true);
   };
 
   useEffect(() => {
     if (feedbackDialogOpen) {
+      const optInStatus =
+        typeof window !== 'undefined' ? localStorage.getItem(CONSENT_KEY) === 'true' : false;
+
+      setHasOptedIn(optInStatus);
       setSuccess(false);
       setError(false);
       setEmailError('');
@@ -56,10 +76,10 @@ export const SupportModal = () => {
     setIsLoading(true);
 
     const url = '/api/support-create-ticket';
-
     const payload = {
       text: value,
       email: email,
+      walletAddress: (hasOptedIn || isShareWalletApproved) && account ? account : undefined,
     };
 
     try {
@@ -75,15 +95,22 @@ export const SupportModal = () => {
         setIsLoading(false);
         setValue('');
         setEmail('');
+        setIsShareWalletApproved(false);
         return;
       }
       setSuccess(true);
+      trackEvent(SUPPORT.TICKET_CREATED, {
+        type: 'Form',
+        hasWalletConnected: !!account,
+      });
     } catch (error) {
       setError(true);
+      setIsShareWalletApproved(false);
     } finally {
       setIsLoading(false);
       setValue('');
       setEmail('');
+      setIsShareWalletApproved(false);
     }
   };
 
@@ -92,6 +119,7 @@ export const SupportModal = () => {
     setEmailError('');
     setEmail('');
     setValue('');
+    setIsShareWalletApproved(false);
     setDirtyEmailField(false);
     setSuccess(false);
     setError(false);
@@ -208,7 +236,7 @@ export const SupportModal = () => {
                   sx={{
                     mb: 2,
                     '& .MuiInputBase-input': {
-                      padding: '6px 12px',
+                      padding: '6px 8px',
                     },
                   }}
                 />
@@ -234,6 +262,34 @@ export const SupportModal = () => {
                     },
                   }}
                 />
+
+                {account && (
+                  <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.50', borderRadius: 1.5 }}>
+                    {!hasOptedIn ? (
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            checked={isShareWalletApproved}
+                            onChange={(e) => setIsShareWalletApproved(e.target.checked)}
+                            color="primary"
+                            size="small"
+                          />
+                        }
+                        label={
+                          <Box>
+                            <Typography color="text.primary">
+                              <Trans>
+                                Share my wallet address to help the support team resolve my issue
+                              </Trans>
+                            </Typography>
+                          </Box>
+                        }
+                      />
+                    ) : (
+                      ''
+                    )}
+                  </Box>
+                )}
                 <Box display="flex" flexDirection={'row-reverse'} mt={3}>
                   <Button disabled={!value || !!emailError} variant="contained" type="submit">
                     <Trans>Submit</Trans>

src/locales/en/messages.po

@@ -997,6 +997,10 @@ msgstr "Disabled"
 msgid "Estimated compounding interest rate, that is determined by Aave Governance. This rate may be changed over time depending on the need for the GHO supply to contract/expand."
 msgstr "Estimated compounding interest rate, that is determined by Aave Governance. This rate may be changed over time depending on the need for the GHO supply to contract/expand."
 
+#: src/layouts/SupportModal.tsx
+msgid "Share my wallet address to help the support team resolve my issue"
+msgstr "Share my wallet address to help the support team resolve my issue"
+
 #: src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeActions.tsx
 msgid "Restaking {symbol}"
 msgstr "Restaking {symbol}"

src/utils/events.ts

@@ -143,3 +143,6 @@ export const GHO_SUCCESS_MODAL = {
 export const SWITCH_MODAL = {
   SWITCH_TYPE: 'Change switch type',
 };
+export const SUPPORT = {
+  TICKET_CREATED: 'Support Ticket Created', // Este string es lo que ve Amplitude
+} as const;