Renamed (app) folder to (main).

src/app/(main)/settings/websites/WebsiteAddButton.js

@@ -0,0 +1,29 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
+import WebsiteAddForm from './WebsiteAddForm';
+import useMessages from 'components/hooks/useMessages';
+
+export function WebsiteAddButton({ onSave }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+
+  const handleSave = async () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    onSave?.();
+  };
+
+  return (
+    <ModalTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.addWebsite)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.addWebsite)}>
+        {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default WebsiteAddButton;

src/app/(main)/settings/websites/WebsiteAddForm.js

@@ -0,0 +1,58 @@
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+import useMessages from 'components/hooks/useMessages';
+
+export function WebsiteAddForm({ onSave, onClose }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <FormRow label={formatMessage(labels.name)}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.domain)}>
+        <FormInput
+          name="domain"
+          rules={{
+            required: formatMessage(labels.required),
+            pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
+          }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={false}>
+          {formatMessage(labels.save)}
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteAddForm;

src/app/(main)/settings/websites/WebsiteSettings.js

@@ -0,0 +1,84 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteEditForm from './[id]/WebsiteEditForm';
+import WebsiteData from './[id]/WebsiteData';
+import TrackingCode from './[id]/TrackingCode';
+import ShareUrl from './[id]/ShareUrl';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl }) {
+  const router = useRouter();
+  const { formatMessage, labels, messages } = useMessages();
+  const { get, useQuery } = useApi();
+  const { showToast } = useToasts();
+  const { data } = useQuery(['website', websiteId], () => get(`/websites/${websiteId}`), {
+    enabled: !!websiteId,
+    cacheTime: 0,
+  });
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+
+  const showSuccess = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  const handleSave = data => {
+    showSuccess();
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  const handleReset = async value => {
+    if (value === 'delete') {
+      await router.push('/settings/websites');
+    } else if (value === 'reset') {
+      showSuccess();
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <>
+      <PageHeader title={values?.name}>
+        <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
+          <Button variant="primary">
+            <Icon>
+              <Icons.External />
+            </Icon>
+            <Text>{formatMessage(labels.view)}</Text>
+          </Button>
+        </Link>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <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>
+      </Tabs>
+      {tab === 'details' && (
+        <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
+      )}
+      {tab === 'tracking' && <TrackingCode websiteId={websiteId} analyticsUrl={analyticsUrl} />}
+      {tab === 'share' && (
+        <ShareUrl
+          websiteId={websiteId}
+          data={values}
+          analyticsUrl={analyticsUrl}
+          onSave={handleSave}
+        />
+      )}
+      {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
+    </>
+  );
+}
+
+export default WebsiteSettings;

src/app/(main)/settings/websites/Websites.js

@@ -0,0 +1,43 @@
+'use client';
+import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
+import useUser from 'components/hooks/useUser';
+import useApi from 'components/hooks/useApi';
+import DataTable from 'components/common/DataTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import WebsitesHeader from './WebsitesHeader';
+
+export function Websites({
+  showHeader = true,
+  showEditButton = true,
+  showTeam,
+  includeTeams,
+  onlyTeams,
+}) {
+  const { user } = useUser();
+  const { get } = useApi();
+  const filterQuery = useFilterQuery(
+    ['websites', { includeTeams, onlyTeams }],
+    params => {
+      return get(`/users/${user?.id}/websites`, {
+        includeTeams,
+        onlyTeams,
+        ...params,
+      });
+    },
+    { enabled: !!user },
+  );
+  const { getProps } = filterQuery;
+
+  return (
+    <>
+      {showHeader && <WebsitesHeader />}
+      <DataTable {...getProps()}>
+        {({ data }) => (
+          <WebsitesTable data={data} showTeam={showTeam} showEditButton={showEditButton} />
+        )}
+      </DataTable>
+    </>
+  );
+}
+
+export default Websites;

src/app/(main)/settings/websites/Websites.module.css

@@ -0,0 +1,11 @@
+.website {
+  padding-bottom: 30px;
+  border-bottom: 1px solid var(--base300);
+  margin-bottom: 30px;
+  align-self: stretch;
+}
+
+.website:last-child {
+  border-bottom: 0;
+  margin-bottom: 20px;
+}

src/app/(main)/settings/websites/WebsitesHeader.js

@@ -0,0 +1,16 @@
+'use client';
+import useMessages from 'components/hooks/useMessages';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteAddButton from './WebsiteAddButton';
+
+export function WebsitesHeader() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageHeader title={formatMessage(labels.websites)}>
+      {!process.env.cloudMode && <WebsiteAddButton />}
+    </PageHeader>
+  );
+}
+
+export default WebsitesHeader;

src/app/(main)/settings/websites/WebsitesTable.js

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+
+export function WebsitesTable({ data = [], showTeam, showEditButton }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  return (
+    <GridTable data={data}>
+      <GridColumn name="name" label={formatMessage(labels.name)} />
+      <GridColumn name="domain" label={formatMessage(labels.domain)} />
+      {showTeam && (
+        <GridColumn name="teamName" label={formatMessage(labels.teamName)}>
+          {row => row.teamWebsite[0]?.team.name}
+        </GridColumn>
+      )}
+      {showTeam && (
+        <GridColumn name="owner" label={formatMessage(labels.owner)}>
+          {row => row.user.username}
+        </GridColumn>
+      )}
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          const {
+            id,
+            user: { id: ownerId },
+          } = row;
+
+          return (
+            <>
+              {showEditButton && (!showTeam || ownerId === user.id) && (
+                <Link href={`/settings/websites/${id}`}>
+                  <Button>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Button>
+                </Link>
+              )}
+              <Link href={`/websites/${id}`}>
+                <Button>
+                  <Icon>
+                    <Icons.External />
+                  </Icon>
+                  <Text>{formatMessage(labels.view)}</Text>
+                </Button>
+              </Link>
+            </>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default WebsitesTable;

src/app/(main)/settings/websites/WebsitesTable.module.css

@@ -0,0 +1,13 @@
+@media screen and (max-width: 992px) {
+  .row {
+    flex-wrap: wrap;
+  }
+
+  .header .actions {
+    display: none;
+  }
+
+  .actions {
+    flex-basis: 100%;
+  }
+}

src/app/(main)/settings/websites/[id]/ShareUrl.js

@@ -0,0 +1,92 @@
+import {
+  Form,
+  FormRow,
+  FormButtons,
+  Flexbox,
+  TextField,
+  SubmitButton,
+  Button,
+  Toggle,
+} from 'react-basics';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getRandomChars } from 'next-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+const generateId = () => getRandomChars(16);
+
+export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { name, shareId } = data;
+  const [id, setId] = useState(shareId);
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(({ shareId }) =>
+    post(`/websites/${websiteId}`, { shareId }),
+  );
+  const ref = useRef(null);
+  const url = useMemo(
+    () =>
+      `${analyticsUrl || location.origin}${process.env.basePath}/share/${id}/${encodeURIComponent(
+        name,
+      )}`,
+    [id, name],
+  );
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  const handleGenerate = () => {
+    const id = generateId();
+    ref.current.setValue('shareId', id, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setId(id);
+  };
+
+  const handleCheck = checked => {
+    const data = { shareId: checked ? generateId() : null };
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+      },
+    });
+    setId(data.shareId);
+  };
+
+  useEffect(() => {
+    if (id && id !== shareId) {
+      ref.current.setValue('shareId', id);
+    }
+  }, [id, shareId]);
+
+  return (
+    <>
+      <Toggle checked={Boolean(id)} onChecked={handleCheck} style={{ marginBottom: 30 }}>
+        {formatMessage(labels.enableShareUrl)}
+      </Toggle>
+      {id && (
+        <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+          <FormRow>
+            <p>{formatMessage(messages.shareUrl)}</p>
+            <Flexbox gap={10}>
+              <TextField value={url} readOnly allowCopy />
+              <Button onClick={handleGenerate}>{formatMessage(labels.regenerate)}</Button>
+            </Flexbox>
+          </FormRow>
+          <FormButtons>
+            <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+          </FormButtons>
+        </Form>
+      )}
+    </>
+  );
+}
+
+export default ShareUrl;

src/app/(main)/settings/websites/[id]/TrackingCode.js

@@ -0,0 +1,26 @@
+import { TextArea } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import useConfig from 'components/hooks/useConfig';
+
+export function TrackingCode({ websiteId, analyticsUrl }) {
+  const { formatMessage, messages } = useMessages();
+  const config = useConfig();
+
+  const trackerScriptName =
+    config?.trackerScriptName?.split(',')?.map(n => n.trim())?.[0] || 'script.js';
+
+  const url = trackerScriptName?.startsWith('http')
+    ? trackerScriptName
+    : `${analyticsUrl || location.origin}${process.env.basePath}/${trackerScriptName}`;
+
+  const code = `<script async src="${url}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <>
+      <p>{formatMessage(messages.trackingCode)}</p>
+      <TextArea rows={4} value={code} readOnly allowCopy />
+    </>
+  );
+}
+
+export default TrackingCode;

src/app/(main)/settings/websites/[id]/WebsiteData.js

@@ -0,0 +1,49 @@
+import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
+import WebsiteDeleteForm from './WebsiteDeleteForm';
+import WebsiteResetForm from './WebsiteResetForm';
+import useMessages from 'components/hooks/useMessages';
+
+export function WebsiteData({ websiteId, onSave }) {
+  const { formatMessage, labels, messages } = useMessages();
+
+  const handleReset = async () => {
+    onSave('reset');
+  };
+
+  const handleDelete = async () => {
+    onSave('delete');
+  };
+
+  return (
+    <>
+      <ActionForm
+        label={formatMessage(labels.resetWebsite)}
+        description={formatMessage(messages.resetWebsiteWarning)}
+      >
+        <ModalTrigger>
+          <Button variant="secondary">{formatMessage(labels.reset)}</Button>
+          <Modal title={formatMessage(labels.resetWebsite)}>
+            {close => (
+              <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
+      <ActionForm
+        label={formatMessage(labels.deleteWebsite)}
+        description={formatMessage(messages.deleteWebsiteWarning)}
+      >
+        <ModalTrigger>
+          <Button variant="danger">{formatMessage(labels.delete)}</Button>
+          <Modal title={formatMessage(labels.deleteWebsite)}>
+            {close => (
+              <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
+    </>
+  );
+}
+
+export default WebsiteData;

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.js

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        <FormattedMessage
+          {...messages.deleteWebsite}
+          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
+        />
+      </p>
+      <FormRow label={formatMessage(labels.confirm)}>
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteDeleteForm;

src/app/(main)/settings/websites/[id]/WebsiteEditForm.js

@@ -0,0 +1,53 @@
+import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'components/hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+import useMessages from 'components/hooks/useMessages';
+
+export function WebsiteEditForm({ websiteId, data, onSave }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label={formatMessage(labels.websiteId)}>
+        <TextField value={websiteId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label={formatMessage(labels.name)}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.domain)}>
+        <FormInput
+          name="domain"
+          rules={{
+            required: formatMessage(labels.required),
+            pattern: {
+              value: DOMAIN_REGEX,
+              message: formatMessage(messages.invalidDomain),
+            },
+          }}
+        >
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteEditForm;

src/app/(main)/settings/websites/[id]/WebsiteResetForm.js

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+const CONFIRM_VALUE = 'RESET';
+
+export function WebsiteResetForm({ websiteId, onSave, onClose }) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        <FormattedMessage
+          {...messages.resetWebsite}
+          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
+        />
+      </p>
+      <FormRow label={formatMessage(labels.confirm)}>
+        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="danger">{formatMessage(labels.reset)}</SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteResetForm;

src/app/(main)/settings/websites/[id]/page.js

@@ -0,0 +1,15 @@
+import WebsiteSettings from '../WebsiteSettings';
+
+async function getDisabled() {
+  return !!process.env.CLOUD_MODE;
+}
+
+export default async function WebsiteSettingsPage({ params }) {
+  const disabled = await getDisabled();
+
+  if (!params.id || disabled) {
+    return null;
+  }
+
+  return <WebsiteSettings websiteId={params.id} />;
+}

src/app/(main)/settings/websites/page.js

@@ -0,0 +1,9 @@
+import Websites from './Websites';
+
+export default function () {
+  if (process.env.cloudMode) {
+    return null;
+  }
+
+  return <Websites />;
+}