Updated settings components.

components/pages/settings/websites/ShareUrl.js

@@ -23,7 +23,7 @@ export default function ShareUrl({ websiteId, data, onSave }) {
   );
   const ref = useRef(null);
   const url = useMemo(
-    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
+    () => `${process.env.analyticsUrl || location.origin}/share/${id}/${encodeURIComponent(name)}`,
     [id, name],
   );
 

components/pages/settings/websites/WebsiteEditForm.js

@@ -18,7 +18,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
       <FormRow label="Website ID">
         <TextField value={websiteId} readOnly allowCopy />
       </FormRow>

components/pages/settings/websites/WebsiteSettings.js

@@ -1,16 +1,29 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
-import useApi from 'hooks/useApi';
+import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
+import { defineMessages, useIntl } from 'react-intl';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
 import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
 import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
-import PageHeader from 'components/layout/PageHeader';
 import TrackingCode from 'components/pages/settings/websites/TrackingCode';
 import ShareUrl from 'components/pages/settings/websites/ShareUrl';
-import ExternalLink from 'assets/external-link.svg';
+import useApi from 'hooks/useApi';
 
-export default function WebsiteDetails({ websiteId }) {
+const { External } = Icons;
+
+const messages = defineMessages({
+  websites: { id: 'label.websites', defaultMessage: 'Websites' },
+  details: { id: 'label.details', defaultMessage: 'Details' },
+  trackingCode: { id: 'label.tracking-code', defaultMessage: 'Tracking code' },
+  shareUrl: { id: 'label.share-url', defaultMessage: 'Share URL' },
+  actions: { id: 'label.actions', defaultMessage: 'Actions' },
+  view: { id: 'label.view', defaultMessage: 'View' },
+  saved: { id: 'message.saved-successfully', defaultMessage: 'Save successfully.' },
+});
+
+export default function WebsiteSettings({ websiteId }) {
+  const { formatMessage } = useIntl();
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
@@ -26,7 +39,7 @@ export default function WebsiteDetails({ websiteId }) {
   );
 
   const handleSave = data => {
-    showToast({ message: 'Saved successfully.', variant: 'success' });
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
     setValues(state => ({ ...state, ...data }));
   };
 
@@ -42,7 +55,7 @@ export default function WebsiteDetails({ websiteId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/settings/websites">Websites</Link>
+            <Link href="/settings/websites">{formatMessage(messages.websites)}</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
@@ -50,18 +63,18 @@ export default function WebsiteDetails({ websiteId }) {
           <a>
             <Button variant="primary">
               <Icon>
-                <ExternalLink />
+                <External />
               </Icon>
-              View
+              <Text>{formatMessage(messages.view)}</Text>
             </Button>
           </a>
         </Link>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
-        <Item key="details">Details</Item>
-        <Item key="tracking">Tracking code</Item>
-        <Item key="share">Share URL</Item>
-        <Item key="actions">Actions</Item>
+        <Item key="details">{formatMessage(messages.details)}</Item>
+        <Item key="tracking">{formatMessage(messages.trackingCode)}</Item>
+        <Item key="share">{formatMessage(messages.shareUrl)}</Item>
+        <Item key="actions">{formatMessage(messages.actions)}</Item>
       </Tabs>
       {tab === 'details' && (
         <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />

components/pages/settings/websites/WebsitesList.js

@@ -1,72 +1,70 @@
 import { useState } from 'react';
 import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
-import useApi from 'hooks/useApi';
+import { useIntl, defineMessages } from 'react-intl';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
-import PageHeader from 'components/layout/PageHeader';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
-import Page from 'components/layout/Page';
+import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
 
+const messages = defineMessages({
+  saved: { id: 'messages.website-saved', defaultMessage: 'Website saved.' },
+  noWebsites: {
+    id: 'messages.no-websites',
+    defaultMessage: "You don't have any websites configured.",
+  },
+  websites: { id: 'label.websites', defaultMessage: 'Websites' },
+  addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
+});
+
 const { Plus } = Icons;
 
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
-  const { get, useQuery } = useApi();
   const { user } = useUser();
+  const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(
     ['websites', user?.id],
     () => get(`/users/${user?.id}/websites`),
     { enabled: !!user },
   );
-  const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();
-
-  const columns = [
-    { name: 'name', label: 'Name', style: { flex: 2 } },
-    { name: 'domain', label: 'Domain' },
-    { name: 'action', label: ' ' },
-  ];
-
-  const handleAdd = () => {
-    setEdit(true);
-  };
+  const { formatMessage } = useIntl();
+  const hasData = data && data.length !== 0;
 
   const handleSave = async () => {
     await refetch();
     setEdit(false);
-    showToast({ message: 'Website saved.', variant: 'success' });
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const handleClose = () => {
-    setEdit(false);
-  };
+  const handleAdd = () => setEdit(true);
+
+  const handleClose = () => setEdit(false);
+
+  const addButton = (
+    <Button variant="primary" onClick={handleAdd}>
+      <Icon>
+        <Plus />
+      </Icon>
+      <Text>{formatMessage(messages.addWebsite)}</Text>
+    </Button>
+  );
 
   return (
     <Page loading={isLoading} error={error}>
       {toast}
-      <PageHeader title="Websites">
-        <Button variant="primary" onClick={handleAdd}>
-          <Icon>
-            <Plus />
-          </Icon>
-          <Text>Add website</Text>
-        </Button>
-      </PageHeader>
-
-      {hasData && <WebsitesTable columns={columns} rows={data} />}
+      <PageHeader title={formatMessage(messages.websites)}>{addButton}</PageHeader>
+      {hasData && <WebsitesTable data={data} />}
       {!hasData && (
-        <EmptyPlaceholder message="You don't have any websites configured.">
-          <Button variant="primary" onClick={handleAdd}>
-            <Icon>
-              <Plus />
-            </Icon>
-            <Text>Add website</Text>
-          </Button>
+        <EmptyPlaceholder message={formatMessage(messages.noWebsites)}>
+          {addButton}
         </EmptyPlaceholder>
       )}
       {edit && (
-        <Modal title="Add website" onClose={handleClose}>
+        <Modal title={formatMessage(messages.addWebsite)} onClose={handleClose}>
           {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
         </Modal>
       )}

components/pages/settings/websites/WebsitesTable.js

@@ -14,9 +14,15 @@ import styles from './WebsitesTable.module.css';
 
 const { ArrowRight, External } = Icons;
 
-export default function WebsitesTable({ columns = [], rows = [] }) {
+const columns = [
+  { name: 'name', label: 'Name', style: { flex: 2 } },
+  { name: 'domain', label: 'Domain' },
+  { name: 'action', label: ' ' },
+];
+
+export default function WebsitesTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={rows}>
+    <Table className={styles.table} columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (