import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import Table from 'components/common/Table'; import Button from 'components/common/Button'; import PageHeader from 'components/layout/PageHeader'; import Modal from 'components/common/Modal'; import WebsiteEditForm from 'components/forms/WebsiteEditForm'; import DeleteForm from 'components/forms/DeleteForm'; import TrackingCodeForm from 'components/forms/TrackingCodeForm'; import ShareUrlForm from 'components/forms/ShareUrlForm'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import ButtonLayout from 'components/layout/ButtonLayout'; import Toast from 'components/common/Toast'; import Pen from 'assets/pen.svg'; import Trash from 'assets/trash.svg'; import Plus from 'assets/plus.svg'; import Code from 'assets/code.svg'; import Link from 'assets/link.svg'; import useFetch from 'hooks/useFetch'; import styles from './WebsiteSettings.module.css'; export default function WebsiteSettings() { const [editWebsite, setEditWebsite] = useState(); const [deleteWebsite, setDeleteWebsite] = useState(); const [addWebsite, setAddWebsite] = useState(); const [showCode, setShowCode] = useState(); const [showUrl, setShowUrl] = useState(); const [saved, setSaved] = useState(0); const [message, setMessage] = useState(); const { data } = useFetch(`/api/websites`, {}, { update: [saved] }); const Buttons = row => ( <ButtonLayout> {row.share_id && ( <Button icon={<Link />} size="small" tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />} tooltipId={`button-share-${row.website_id}`} onClick={() => setShowUrl(row)} /> )} <Button icon={<Code />} size="small" tooltip={ <FormattedMessage id="tooltip.get-tracking-code" defaultMessage="Get tracking code" /> } tooltipId={`button-code-${row.website_id}`} onClick={() => setShowCode(row)} /> <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}> <div> <FormattedMessage id="button.edit" defaultMessage="Edit" /> </div> </Button> <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}> <div> <FormattedMessage id="button.delete" defaultMessage="Delete" /> </div> </Button> </ButtonLayout> ); const columns = [ { key: 'name', label: <FormattedMessage id="label.name" defaultMessage="Name" />, className: 'col-6 col-md-4', }, { key: 'domain', label: <FormattedMessage id="label.domain" defaultMessage="Domain" />, className: 'col-6 col-md-4', }, { key: 'action', className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'), render: Buttons, }, ]; function handleSave() { setSaved(state => state + 1); setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />); handleClose(); } function handleClose() { setAddWebsite(null); setEditWebsite(null); setDeleteWebsite(null); setShowCode(null); setShowUrl(null); } if (!data) { return null; } const empty = ( <EmptyPlaceholder msg={ <FormattedMessage id="placeholder.message.no-websites-configured" defaultMessage="You don't have any websites configured." /> } > <Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}> <div> <FormattedMessage id="button.add-website" defaultMessage="Add website" /> </div> </Button> </EmptyPlaceholder> ); return ( <> <PageHeader> <div> <FormattedMessage id="settings.websites" defaultMessage="Websites" /> </div> <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}> <div> <FormattedMessage id="button.add-website" defaultMessage="Add website" /> </div> </Button> </PageHeader> <Table columns={columns} rows={data} empty={empty} /> {editWebsite && ( <Modal title={<FormattedMessage id="title.edit-website" defaultMessage="Edit website" />}> <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} /> </Modal> )} {addWebsite && ( <Modal title={<FormattedMessage id="title.add-website" defaultMessage="Add website" />}> <WebsiteEditForm onSave={handleSave} onClose={handleClose} /> </Modal> )} {deleteWebsite && ( <Modal title={<FormattedMessage id="title.delete-website" defaultMessage="Delete website" />} > <DeleteForm values={{ type: 'website', id: deleteWebsite.website_id, name: deleteWebsite.name }} onSave={handleSave} onClose={handleClose} /> </Modal> )} {showCode && ( <Modal title={<FormattedMessage id="title.tracking-code" defaultMessage="Tracking code" />}> <TrackingCodeForm values={showCode} onClose={handleClose} /> </Modal> )} {showUrl && ( <Modal title={<FormattedMessage id="title.share-url" defaultMessage="Share URL" />}> <ShareUrlForm values={showUrl} onClose={handleClose} /> </Modal> )} {message && <Toast message={message} onClose={() => setMessage(null)} />} </> ); }