feat: localisation and multi-lang support (#95)
* feat: setup localisation with lingui * Fix hydration and locale issues * Add missing translations and tweak selector styling * Extend language support * Update lang support * Extend lang support * Fix build and add dyanmic imports
This commit is contained in:
Henry
@@ -1,8 +1,10 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { env } from "next-runtime-env";
|
||||
import { useEffect } from "react";
|
||||
import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import { LanguageSelector } from "~/components/LanguageSelector";
|
||||
import Modal from "~/components/modal";
|
||||
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
|
||||
import { PageHead } from "~/components/PageHead";
|
||||
@@ -35,12 +37,17 @@ export default function SettingsPage() {
|
||||
} = api.integration.providers.useQuery();
|
||||
|
||||
const { data: trelloUrl, refetch: refetchTrelloUrl } =
|
||||
api.integration.getAuthorizationUrl.useQuery({ provider: "trello" }, {
|
||||
enabled:
|
||||
!integrationsLoading &&
|
||||
!integrations?.some((integration) => integration.provider === "trello"),
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
api.integration.getAuthorizationUrl.useQuery(
|
||||
{ provider: "trello" },
|
||||
{
|
||||
enabled:
|
||||
!integrationsLoading &&
|
||||
!integrations?.some(
|
||||
(integration) => integration.provider === "trello",
|
||||
),
|
||||
refetchOnWindowFocus: true,
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleFocus = () => {
|
||||
@@ -52,25 +59,26 @@ export default function SettingsPage() {
|
||||
};
|
||||
}, [refetchIntegrations]);
|
||||
|
||||
const { mutateAsync: disconnectTrello } = api.integration.disconnect.useMutation({
|
||||
onSuccess: () => {
|
||||
refetchUser();
|
||||
refetchIntegrations();
|
||||
refetchTrelloUrl();
|
||||
showPopup({
|
||||
header: "Trello disconnected",
|
||||
message: "Your Trello account has been disconnected.",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
showPopup({
|
||||
header: "Error disconnecting Trello",
|
||||
message: "An error occurred while disconnecting your Trello account.",
|
||||
icon: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
const { mutateAsync: disconnectTrello } =
|
||||
api.integration.disconnect.useMutation({
|
||||
onSuccess: () => {
|
||||
refetchUser();
|
||||
refetchIntegrations();
|
||||
refetchTrelloUrl();
|
||||
showPopup({
|
||||
header: t`Trello disconnected`,
|
||||
message: t`Your Trello account has been disconnected.`,
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
showPopup({
|
||||
header: t`Error disconnecting Trello`,
|
||||
message: t`An error occurred while disconnecting your Trello account.`,
|
||||
icon: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const refetchUser = () => utils.user.getUser.refetch();
|
||||
|
||||
@@ -97,29 +105,29 @@ export default function SettingsPage() {
|
||||
<>
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
|
||||
<PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
|
||||
<PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
|
||||
<div className="px-28 py-12">
|
||||
<div className="mb-8 flex w-full justify-between">
|
||||
<h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
|
||||
Settings
|
||||
{t`Settings`}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Profile picture
|
||||
{t`Profile picture`}
|
||||
</h2>
|
||||
<Avatar userId={data?.id} userImage={data?.image} />
|
||||
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Display name
|
||||
{t`Display name`}
|
||||
</h2>
|
||||
<UpdateDisplayNameForm displayName={data?.name ?? ""} />
|
||||
</div>
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Workspace name
|
||||
{t`Workspace name`}
|
||||
</h2>
|
||||
<UpdateWorkspaceNameForm
|
||||
workspacePublicId={workspace.publicId}
|
||||
@@ -127,16 +135,16 @@ export default function SettingsPage() {
|
||||
/>
|
||||
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Workspace URL
|
||||
{t`Workspace URL`}
|
||||
</h2>
|
||||
<UpdateWorkspaceUrlForm
|
||||
workspacePublicId={workspace.publicId}
|
||||
workspaceUrl={workspace.slug}
|
||||
workspacePlan={workspace.plan}
|
||||
workspaceUrl={workspace.slug ?? ""}
|
||||
workspacePlan={workspace.plan ?? "free"}
|
||||
/>
|
||||
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Workspace description
|
||||
{t`Workspace description`}
|
||||
</h2>
|
||||
<UpdateWorkspaceDescriptionForm
|
||||
workspacePublicId={workspace.publicId}
|
||||
@@ -144,20 +152,30 @@ export default function SettingsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
{t`Language`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
{t`Change the language of the app.`}
|
||||
</p>
|
||||
<LanguageSelector />
|
||||
</div>
|
||||
|
||||
{env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Billing
|
||||
{t`Billing`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
View and manage your billing and subscription.
|
||||
{t`View and manage your billing and subscription.`}
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
iconRight={<HiMiniArrowTopRightOnSquare />}
|
||||
onClick={handleOpenBillingPortal}
|
||||
>
|
||||
Billing portal
|
||||
{t`Billing portal`}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
@@ -171,7 +189,7 @@ export default function SettingsPage() {
|
||||
) && trelloUrl ? (
|
||||
<>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
Connect your Trello account to import boards.
|
||||
{t`Connect your Trello account to import boards.`}
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
@@ -184,32 +202,34 @@ export default function SettingsPage() {
|
||||
)
|
||||
}
|
||||
>
|
||||
Connect Trello
|
||||
{t`Connect Trello`}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
You are already connected to Trello.
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
disconnectTrello({ provider: "trello" });
|
||||
}}
|
||||
>
|
||||
Disconnect Trello
|
||||
</Button>
|
||||
</>
|
||||
integrations?.some(
|
||||
(integration) => integration.provider === "trello",
|
||||
) && (
|
||||
<>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
{t`Your Trello account is connected.`}
|
||||
</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => disconnectTrello({ provider: "trello" })}
|
||||
>
|
||||
{t`Disconnect Trello`}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
API keys
|
||||
{t`API keys`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
View and manage your API keys.
|
||||
{t`View and manage your API keys.`}
|
||||
</p>
|
||||
<CreateAPIKeyForm
|
||||
apiKey={data?.apiKey}
|
||||
@@ -219,36 +239,35 @@ export default function SettingsPage() {
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Delete workspace
|
||||
{t`Delete workspace`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
Once you delete your workspace, there is no going back. This
|
||||
action cannot be undone.
|
||||
{t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => openModal("DELETE_WORKSPACE")}
|
||||
disabled={workspace.role !== "admin"}
|
||||
>
|
||||
Delete workspace
|
||||
{t`Delete workspace`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
|
||||
Delete account
|
||||
{t`Delete account`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
Once you delete your account, there is no going back. This
|
||||
action cannot be undone.
|
||||
{t`Once you delete your account, there is no going back. This action cannot be undone.`}
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => openModal("DELETE_ACCOUNT")}
|
||||
>
|
||||
Delete account
|
||||
{t`Delete account`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user