Merge pull request #59 from marmelab/feat/inbound-mail

Feat(setting): Display inboud email for user
marmelab · Aug 12, 2024 · b861381 · b861381
2 parents fd5a73b + f5cdb7d
commit b861381
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 51 deletions.
diff --git a/.env.development b/.env.development
@@ -3,5 +3,6 @@ SKIP_PREFLIGHT_CHECK=true
 VITE_SUPABASE_URL=http://127.0.0.1:54321
 VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 VITE_IS_DEMO=false
+VITE_INBOUND_EMAIL=2aff30e603e54dc3eb556bd9e03ee099@inbound.postmarkapp.com
 SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
 DATABASE_URL=postgres://postgres:postgres@127.0.0.1:54322/postgres
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,6 +25,7 @@ jobs:
             VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
             VITE_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
             VITE_IS_DEMO: ${{ vars.VITE_IS_DEMO }}
+            VITE_INBOUND_EMAIL: ${{ vars.VITE_INBOUND_EMAIL }}
             PRODUCTION_REMOTE: https://git:${{ secrets.DEPLOY_TOKEN || secrets.GITHUB_TOKEN }}@github.com/${{ vars.DEPLOY_REPOSITORY || github.repository }}
 
         steps:

diff --git a/src/settings/SettingsPage.tsx b/src/settings/SettingsPage.tsx
@@ -7,6 +7,7 @@ import {
     CardContent,
     Container,
     Stack,
+    Tooltip,
     Typography,
 } from '@mui/material';
 import { useState } from 'react';
@@ -26,6 +27,7 @@ import ImageEditorField from '../misc/ImageEditorField';
 import { CrmDataProvider } from '../providers/types';
 import { SalesFormData } from '../types';
 import { useMutation } from '@tanstack/react-query';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 export const SettingsPage = () => {
     const [isEditMode, setEditMode] = useState(false);
@@ -138,63 +140,98 @@ const SettingsForm = ({
     };
 
     return (
-        <Card>
-            <CardContent>
-                <Stack mb={2} direction="row" justifyContent="space-between">
-                    <Typography variant="h5" color="textSecondary">
-                        My info
-                    </Typography>
-                </Stack>
-                <Stack gap={2} mb={2}>
-                    <ImageEditorField
-                        source="avatar"
-                        type="avatar"
-                        onSave={handleAvatarUpdate}
-                        linkPosition="right"
-                    />
-                    <TextRender source="first_name" isEditMode={isEditMode} />
-                    <TextRender source="last_name" isEditMode={isEditMode} />
-                    <TextRender source="email" isEditMode={isEditMode} />
-                </Stack>
-                {!isEditMode && (
-                    <>
+        <Stack gap={4}>
+            <Card>
+                <CardContent>
+                    <Stack
+                        mb={2}
+                        direction="row"
+                        justifyContent="space-between"
+                    >
+                        <Typography variant="h5" color="textSecondary">
+                            My info
+                        </Typography>
+                    </Stack>
+                    <Stack gap={2} mb={2}>
+                        <ImageEditorField
+                            source="avatar"
+                            type="avatar"
+                            onSave={handleAvatarUpdate}
+                            linkPosition="right"
+                        />
+                        <TextRender
+                            source="first_name"
+                            isEditMode={isEditMode}
+                        />
+                        <TextRender
+                            source="last_name"
+                            isEditMode={isEditMode}
+                        />
+                        <TextRender source="email" isEditMode={isEditMode} />
+                    </Stack>
+                    {!isEditMode && (
+                        <>
+                            <Button
+                                variant="outlined"
+                                onClick={handleClickOpenPasswordChange}
+                            >
+                                Change password
+                            </Button>
+                        </>
+                    )}
+                </CardContent>
+
+                <CardActions
+                    sx={{
+                        paddingX: 2,
+                        background: theme => theme.palette.background.default,
+                        justifyContent: isEditMode
+                            ? 'space-between'
+                            : 'flex-end',
+                    }}
+                >
+                    {isEditMode && (
                         <Button
-                            variant="outlined"
-                            onClick={handleClickOpenPasswordChange}
+                            variant="contained"
+                            type="submit"
+                            disabled={!isDirty}
+                            hidden={isEditMode}
                         >
-                            Change password
+                            Save
                         </Button>
-                    </>
-                )}
-            </CardContent>
-
-            <CardActions
-                sx={{
-                    paddingX: 2,
-                    background: theme => theme.palette.background.default,
-                    justifyContent: isEditMode ? 'space-between' : 'flex-end',
-                }}
-            >
-                {isEditMode && (
+                    )}
                     <Button
-                        variant="contained"
-                        type="submit"
-                        disabled={!isDirty}
-                        hidden={isEditMode}
+                        variant="text"
+                        size="small"
+                        startIcon={
+                            isEditMode ? <VisibilityIcon /> : <EditIcon />
+                        }
+                        onClick={() => setEditMode(!isEditMode)}
                     >
-                        Save
+                        {isEditMode ? 'Show' : 'Edit'}
                     </Button>
-                )}
-                <Button
-                    variant="text"
-                    size="small"
-                    startIcon={isEditMode ? <VisibilityIcon /> : <EditIcon />}
-                    onClick={() => setEditMode(!isEditMode)}
-                >
-                    {isEditMode ? 'Show' : 'Edit'}
-                </Button>
-            </CardActions>
-        </Card>
+                </CardActions>
+            </Card>
+            {import.meta.env.VITE_INBOUND_EMAIL && (
+                <Card>
+                    <CardContent>
+                        <Stack gap={2} justifyContent="space-between">
+                            <Typography variant="h5" color="textSecondary">
+                                Inboud email
+                            </Typography>
+                            <Typography variant="body2" color="textSecondary">
+                                You can start sending emails to your server's
+                                inbound email address, e.g. by adding it to the
+                                <b> Cc: </b> field. Atomic CRM will process the
+                                emails and add notes to the corresponding
+                                contacts.
+                            </Typography>
+                            <CopyPaste />
+                        </Stack>
+                    </CardContent>
+                </Card>
+            )}
+        </Stack>
     );
 };
 
@@ -215,4 +252,29 @@ const TextRender = ({
     );
 };
 
+const CopyPaste = () => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        setCopied(true);
+        navigator.clipboard.writeText(import.meta.env.VITE_INBOUND_EMAIL);
+        setTimeout(() => {
+            setCopied(false);
+        }, 1500);
+    };
+    return (
+        <Tooltip placement="top" title={copied ? 'Copied!' : 'Copy'}>
+            <Button
+                onClick={handleCopy}
+                sx={{
+                    textTransform: 'none',
+                    justifyContent: 'space-between',
+                }}
+                endIcon={<ContentCopyIcon />}
+            >
+                {import.meta.env.VITE_INBOUND_EMAIL}
+            </Button>
+        </Tooltip>
+    );
+};
+
 SettingsPage.path = '/settings';