2023-09-29 14:29:22 +02:00
|
|
|
'use client';
|
2022-12-27 01:57:59 +01:00
|
|
|
import { useEffect, useState } from 'react';
|
2023-12-02 05:27:59 +01:00
|
|
|
import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
|
2023-09-29 14:29:22 +02:00
|
|
|
import { useRouter } from 'next/navigation';
|
2022-12-27 01:57:59 +01:00
|
|
|
import Link from 'next/link';
|
2023-01-21 02:12:53 +01:00
|
|
|
import PageHeader from 'components/layout/PageHeader';
|
2023-09-29 14:29:22 +02:00
|
|
|
import WebsiteEditForm from './[id]/WebsiteEditForm';
|
|
|
|
import WebsiteData from './[id]/WebsiteData';
|
|
|
|
import TrackingCode from './[id]/TrackingCode';
|
|
|
|
import ShareUrl from './[id]/ShareUrl';
|
2023-08-21 11:06:09 +02:00
|
|
|
import useApi from 'components/hooks/useApi';
|
|
|
|
import useMessages from 'components/hooks/useMessages';
|
2023-01-21 02:12:53 +01:00
|
|
|
|
2023-09-18 18:51:43 +02:00
|
|
|
export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl }) {
|
2023-01-28 06:53:13 +01:00
|
|
|
const router = useRouter();
|
2023-03-22 22:05:55 +01:00
|
|
|
const { formatMessage, labels, messages } = useMessages();
|
2023-01-10 08:59:26 +01:00
|
|
|
const { get, useQuery } = useApi();
|
2023-06-13 20:59:12 +02:00
|
|
|
const { showToast } = useToasts();
|
2023-12-02 05:27:59 +01:00
|
|
|
const { data, isLoading } = useQuery({
|
|
|
|
queryKey: ['website', websiteId],
|
|
|
|
queryFn: () => get(`/websites/${websiteId}`),
|
2023-09-29 14:29:22 +02:00
|
|
|
enabled: !!websiteId,
|
2023-12-03 12:07:03 +01:00
|
|
|
gcTime: 0,
|
2023-09-29 14:29:22 +02:00
|
|
|
});
|
2023-03-30 08:08:26 +02:00
|
|
|
const [values, setValues] = useState(null);
|
|
|
|
const [tab, setTab] = useState('details');
|
2022-12-27 01:57:59 +01:00
|
|
|
|
2023-04-05 18:55:21 +02:00
|
|
|
const showSuccess = () => {
|
2023-01-21 02:12:53 +01:00
|
|
|
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
2023-04-05 18:55:21 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const handleSave = data => {
|
|
|
|
showSuccess();
|
2022-12-27 01:57:59 +01:00
|
|
|
setValues(state => ({ ...state, ...data }));
|
|
|
|
};
|
|
|
|
|
2023-01-28 06:53:13 +01:00
|
|
|
const handleReset = async value => {
|
|
|
|
if (value === 'delete') {
|
2023-12-01 06:58:11 +01:00
|
|
|
router.push('/settings/websites');
|
2023-04-05 18:55:21 +02:00
|
|
|
} else if (value === 'reset') {
|
|
|
|
showSuccess();
|
2023-01-28 06:53:13 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-12-27 01:57:59 +01:00
|
|
|
useEffect(() => {
|
|
|
|
if (data) {
|
|
|
|
setValues(data);
|
|
|
|
}
|
|
|
|
}, [data]);
|
|
|
|
|
2023-12-02 05:27:59 +01:00
|
|
|
if (isLoading || !values) {
|
|
|
|
return <Loading />;
|
|
|
|
}
|
|
|
|
|
2022-12-27 01:57:59 +01:00
|
|
|
return (
|
2023-09-29 14:29:22 +02:00
|
|
|
<>
|
2023-08-28 06:59:39 +02:00
|
|
|
<PageHeader title={values?.name}>
|
2023-03-30 08:08:26 +02:00
|
|
|
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
|
2023-03-09 05:23:32 +01:00
|
|
|
<Button variant="primary">
|
|
|
|
<Icon>
|
|
|
|
<Icons.External />
|
|
|
|
</Icon>
|
|
|
|
<Text>{formatMessage(labels.view)}</Text>
|
|
|
|
</Button>
|
2022-12-27 01:57:59 +01:00
|
|
|
</Link>
|
|
|
|
</PageHeader>
|
2023-01-10 08:59:26 +01:00
|
|
|
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
|
2023-01-25 16:42:46 +01:00
|
|
|
<Item key="details">{formatMessage(labels.details)}</Item>
|
|
|
|
<Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
|
|
|
|
<Item key="share">{formatMessage(labels.shareUrl)}</Item>
|
|
|
|
<Item key="data">{formatMessage(labels.data)}</Item>
|
2022-12-27 01:57:59 +01:00
|
|
|
</Tabs>
|
2023-01-06 07:56:36 +01:00
|
|
|
{tab === 'details' && (
|
2022-12-27 01:57:59 +01:00
|
|
|
<WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
|
|
|
|
)}
|
2023-09-18 18:51:43 +02:00
|
|
|
{tab === 'tracking' && <TrackingCode websiteId={websiteId} analyticsUrl={analyticsUrl} />}
|
2023-09-22 02:30:40 +02:00
|
|
|
{tab === 'share' && (
|
|
|
|
<ShareUrl
|
|
|
|
websiteId={websiteId}
|
|
|
|
data={values}
|
|
|
|
analyticsUrl={analyticsUrl}
|
|
|
|
onSave={handleSave}
|
|
|
|
/>
|
|
|
|
)}
|
2023-02-28 05:03:04 +01:00
|
|
|
{tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
|
2023-09-29 14:29:22 +02:00
|
|
|
</>
|
2022-12-27 01:57:59 +01:00
|
|
|
);
|
|
|
|
}
|
2023-04-21 17:00:42 +02:00
|
|
|
|
|
|
|
export default WebsiteSettings;
|