Skip to content

Commit

Permalink
enh: crisp settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmpetrov
gmpetrov committed Jun 2, 2023
1 parent b8bcf08 commit 74aaaca
Showing 1 changed file with 95 additions and 82 deletions.
177 changes: 95 additions & 82 deletions pages/integrations/crisp/config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import axios from 'axios';
import { GetServerSidePropsContext } from 'next';
import Head from 'next/head';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import { useEffect, useState } from 'react';
import superjson from 'superjson';

Expand All @@ -23,6 +24,7 @@ import { getConnectedWebsites } from '@app/utils/crisp';
import prisma from '@app/utils/prisma-client';

export default function CrispConfig(props: { agent: Agent }) {
const session = useSession();
const [isLoading, setIsLoading] = useState(false);
const [showSuccessAlert, setShowSuccessAlert] = useState(false);

Expand All @@ -42,6 +44,8 @@ export default function CrispConfig(props: { agent: Agent }) {
subscription?.plan && subscription?.plan !== 'level_0'
);

const user = session?.data?.user;

const handleFetchAgents = async (apiKey: string) => {
try {
setIsFetchAgentsLoading(true);
Expand Down Expand Up @@ -127,97 +131,106 @@ export default function CrispConfig(props: { agent: Agent }) {
</Alert>
)}

<Card variant="outlined">
<Logo className="w-20 mx-auto mb-5" />
<form className="flex flex-col">
<Stack spacing={2}>
<FormControl>
<FormLabel>Databerry API Key</FormLabel>
<Alert variant="outlined" sx={{ mb: 2 }}>
<Stack>
You can find your API Key in your Databerry{' '}
<Link
href={'https://app.databerry.ai/account'}
target="_blank"
>
<Typography color="primary">
account settings.
</Typography>
</Link>
</Stack>
</Alert>
<Input
value={inputValue}
placeholder="Your Databerry API Key here"
onChange={(e) => setInputValue(e.currentTarget.value)}
/>
</FormControl>

{!isPremium && isApiKeyValid && (
<Alert color="warning">
This is a premium feature. Please upgrade your plan to use
the Crisp integration.
</Alert>
)}
{user && (
<Alert color="success" variant="outlined">
Crisp integration is now configured for this website. You can now
close this window.
</Alert>
)}

{isPremium && isApiKeyValid && (
{!user && (
<Card variant="outlined">
<Logo className="w-20 mx-auto mb-5" />
<form className="flex flex-col">
<Stack spacing={2}>
<FormControl>
<FormLabel>Agent to connect to Crisp</FormLabel>
<Select
placeholder="Choose an Agent"
defaultValue={props?.agent?.id}
onChange={(_, value) => {
const agent = agents?.find((one) => one.id === value);

if (agent) {
setCurrentAgent(agent);
}
}}
>
{agents?.map((agent) => (
<Option key={agent.id} value={agent.id}>
{agent.name}
</Option>
))}
</Select>
<FormLabel>Databerry API Key</FormLabel>
<Alert variant="outlined" sx={{ mb: 2 }}>
<Stack>
You can find your API Key in your Databerry{' '}
<Link
href={'https://app.databerry.ai/account'}
target="_blank"
>
<Typography color="primary">
account settings.
</Typography>
</Link>
</Stack>
</Alert>
<Input
value={inputValue}
placeholder="Your Databerry API Key here"
onChange={(e) => setInputValue(e.currentTarget.value)}
/>
</FormControl>
)}
</Stack>
<Divider className="my-8" />

{!currentAgent && (
<Button
loading={isFetchAgentsLoading}
className="ml-auto"
size="md"
onClick={() => handleFetchAgents(inputValue)}
>
Continue
</Button>
)}
{currentAgent && (
<Stack direction={'row'} spacing={1} ml="auto">
{!isPremium && isApiKeyValid && (
<Alert color="warning">
This is a premium feature. Please upgrade your plan to use
the Crisp integration.
</Alert>
)}

{isPremium && isApiKeyValid && (
<FormControl>
<FormLabel>Agent to connect to Crisp</FormLabel>
<Select
placeholder="Choose an Agent"
defaultValue={props?.agent?.id}
onChange={(_, value) => {
const agent = agents?.find((one) => one.id === value);

if (agent) {
setCurrentAgent(agent);
}
}}
>
{agents?.map((agent) => (
<Option key={agent.id} value={agent.id}>
{agent.name}
</Option>
))}
</Select>
</FormControl>
)}
</Stack>
<Divider className="my-8" />

{!currentAgent && (
<Button
loading={isFetchAgentsLoading}
className="ml-auto"
size="md"
onClick={() => {
setAgents([]);
setInputValue('');
setIsApiKeyValid(false);
setCurrentAgent(undefined);
setShowSuccessAlert(false);
}}
variant="plain"
onClick={() => handleFetchAgents(inputValue)}
>
Reset
Continue
</Button>
)}
{currentAgent && (
<Stack direction={'row'} spacing={1} ml="auto">
<Button
size="md"
onClick={() => {
setAgents([]);
setInputValue('');
setIsApiKeyValid(false);
setCurrentAgent(undefined);
setShowSuccessAlert(false);
}}
variant="plain"
>
Reset
</Button>

<Button loading={isLoading} size="md" onClick={sendConfig}>
Save Settings
</Button>
</Stack>
)}
</form>
</Card>
<Button loading={isLoading} size="md" onClick={sendConfig}>
Save Settings
</Button>
</Stack>
)}
</form>
</Card>
)}
</Stack>
</Box>
</>
Expand Down

0 comments on commit 74aaaca

Please sign in to comment.