2020-08-08 03:36:57 +00:00
|
|
|
import React, { useRef } from 'react';
|
2020-09-06 00:27:01 +00:00
|
|
|
import { FormattedMessage } from 'react-intl';
|
2021-01-14 08:34:51 +00:00
|
|
|
import { useRouter } from 'next/router';
|
2020-08-08 03:36:57 +00:00
|
|
|
import Button from 'components/common/Button';
|
|
|
|
|
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
|
2020-09-18 20:40:46 +00:00
|
|
|
import CopyButton from 'components/common/CopyButton';
|
2020-08-08 03:36:57 +00:00
|
|
|
|
2020-08-15 08:17:15 +00:00
|
|
|
export default function TrackingCodeForm({ values, onClose }) {
|
2020-08-08 03:36:57 +00:00
|
|
|
const ref = useRef();
|
2021-01-14 08:34:51 +00:00
|
|
|
const { basePath } = useRouter();
|
2020-08-08 03:36:57 +00:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<FormLayout>
|
|
|
|
|
<p>
|
2020-09-06 00:27:01 +00:00
|
|
|
<FormattedMessage
|
|
|
|
|
id="message.track-stats"
|
|
|
|
|
defaultMessage="To track stats for {target}, place the following code in the {head} section of your website."
|
|
|
|
|
values={{ head: '<head>', target: <b>{values.name}</b> }}
|
|
|
|
|
/>
|
2020-08-08 03:36:57 +00:00
|
|
|
</p>
|
|
|
|
|
<FormRow>
|
|
|
|
|
<textarea
|
|
|
|
|
ref={ref}
|
|
|
|
|
rows={3}
|
|
|
|
|
cols={60}
|
2020-08-17 04:28:54 +00:00
|
|
|
spellCheck={false}
|
2021-01-14 08:34:51 +00:00
|
|
|
defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}${basePath}/umami.js"></script>`}
|
2020-08-08 03:36:57 +00:00
|
|
|
readOnly
|
|
|
|
|
/>
|
|
|
|
|
</FormRow>
|
|
|
|
|
<FormButtons>
|
2020-09-18 20:40:46 +00:00
|
|
|
<CopyButton type="submit" variant="action" element={ref} />
|
2020-09-06 00:27:01 +00:00
|
|
|
<Button onClick={onClose}>
|
2020-10-13 05:53:59 +00:00
|
|
|
<FormattedMessage id="label.cancel" defaultMessage="Cancel" />
|
2020-09-06 00:27:01 +00:00
|
|
|
</Button>
|
2020-08-08 03:36:57 +00:00
|
|
|
</FormButtons>
|
|
|
|
|
</FormLayout>
|
|
|
|
|
);
|
|
|
|
|
}
|
