chore: Extract product name from translation strings (#4646)

app/scenes/Document/Shared.tsx

@@ -13,6 +13,7 @@ import ErrorOffline from "~/scenes/ErrorOffline";
 import Layout from "~/components/Layout";
 import Sidebar from "~/components/Sidebar/Shared";
 import Text from "~/components/Text";
+import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
@@ -136,9 +137,10 @@ function SharedDocumentScene(props: Props) {
             config?.name && isCloudHosted ? (
               <Content>
                 {t(
-                  "{{ teamName }} is using Outline to share documents, please login to continue.",
+                  "{{ teamName }} is using {{ appName }} to share documents, please login to continue.",
                   {
                     teamName: config.name,
+                    appName: env.APP_NAME,
                   }
                 )}
               </Content>

app/scenes/Login/Notices.tsx

@@ -74,8 +74,8 @@ export default function Notices() {
       )}
       {notice === "suspended" && (
         <NoticeAlert>
-          Your Outline account has been suspended. To re-activate your account,
-          please contact a team admin.
+          Your account has been suspended. To re-activate your account, please
+          contact a team admin.
         </NoticeAlert>
       )}
       {notice === "authentication-provider-disabled" && (

app/scenes/Login/index.tsx

@@ -215,7 +215,7 @@ function Login({ children }: Props) {
           <>
             <StyledHeading as="h2" centered>
               {t("Login to {{ authProviderName }}", {
-                authProviderName: config.name || "Outline",
+                authProviderName: config.name || env.APP_NAME,
               })}
             </StyledHeading>
             {children?.(config)}

app/scenes/Settings/Import.tsx

@@ -12,6 +12,7 @@ import Item from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 import FileOperationListItem from "./components/FileOperationListItem";
 import ImportNotionDialog from "./components/ImportNotionDialog";
@@ -20,6 +21,7 @@ import ImportOutlineDialog from "./components/ImportOutlineDialog";
 function Import() {
   const { t } = useTranslation();
   const { dialogs, fileOperations } = useStores();
+  const appName = env.APP_NAME;
 
   return (
     <Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
@@ -27,8 +29,9 @@ function Import() {
       <Text type="secondary">
         <Trans>
           Quickly transfer your existing documents, pages, and files from other
-          tools and services into Outline. You can also drag and drop any HTML,
-          Markdown, and text documents directly into Collections in the app.
+          tools and services into {{ appName }}. You can also drag and drop any
+          HTML, Markdown, and text documents directly into Collections in the
+          app.
         </Trans>
       </Text>
 
@@ -38,7 +41,7 @@ function Import() {
           image={<MarkdownIcon size={28} />}
           title={t("Markdown")}
           subtitle={t(
-            "Import a zip file of Markdown documents (exported from Outline 0.67.0 or earlier)"
+            "Import a zip file of Markdown documents (exported from version 0.67.0 or earlier)"
           )}
           actions={
             <Button

app/scenes/Settings/Members.tsx

@@ -16,6 +16,7 @@ import InputSearch from "~/components/InputSearch";
 import Modal from "~/components/Modal";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
+import env from "~/env";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
@@ -142,6 +143,8 @@ function Members() {
     [params, history, location.pathname]
   );
 
+  const appName = env.APP_NAME;
+
   return (
     <Scene
       title={t("Members")}
@@ -168,9 +171,9 @@ function Members() {
       <Heading>{t("Members")}</Heading>
       <Text type="secondary">
         <Trans>
-          Everyone that has signed into Outline appears here. It’s possible that
-          there are other users who have access through {team.signinMethods} but
-          haven’t signed in yet.
+          Everyone that has signed into {{ appName }} is listed here. It’s
+          possible that there are other users who have access through{" "}
+          {team.signinMethods} but haven’t signed in yet.
         </Trans>
       </Text>
       <Flex gap={8}>

app/scenes/Settings/Notifications.tsx

@@ -62,9 +62,7 @@ function Notifications() {
       visible: isCloudHosted,
       event: "emails.onboarding",
       title: t("Getting started"),
-      description: t(
-        "Tips on getting started with Outline’s features and functionality"
-      ),
+      description: t("Tips on getting started with features and functionality"),
     },
     {
       visible: isCloudHosted,

app/scenes/Settings/Slack.tsx

@@ -53,6 +53,8 @@ function Slack() {
     })
     .sort((a) => (a[1] ? -1 : 1));
 
+  const appName = env.APP_NAME;
+
   return (
     <Scene title="Slack" icon={<SlackIcon color="currentColor" />}>
       <Heading>Slack</Heading>
@@ -61,7 +63,7 @@ function Slack() {
         <Notice>
           <Trans>
             Whoops, you need to accept the permissions in Slack to connect
-            Outline to your team. Try again?
+            {{ appName }} to your team. Try again?
           </Trans>
         </Notice>
       )}
@@ -75,9 +77,10 @@ function Slack() {
       )}
       <Text type="secondary">
         <Trans
-          defaults="Get rich previews of Outline links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat."
+          defaults="Get rich previews of {{ appName }} links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat."
           values={{
             command: "/outline",
+            appName,
           }}
           components={{
             em: <Code />,
@@ -112,8 +115,8 @@ function Slack() {
           <h2>{t("Collections")}</h2>
           <Text type="secondary">
             <Trans>
-              Connect Outline collections to Slack channels and messages will be
-              automatically posted to Slack when documents are published or
+              Connect {{ appName }} collections to Slack channels. Messages will
+              be automatically posted to Slack when documents are published or
               updated.
             </Trans>
           </Text>

app/scenes/Settings/Webhooks.tsx

@@ -11,6 +11,7 @@ import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Subheading from "~/components/Subheading";
 import Text from "~/components/Text";
+import env from "~/env";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
@@ -24,6 +25,7 @@ function Webhooks() {
   const { webhookSubscriptions } = useStores();
   const [newModalOpen, handleNewModalOpen, handleNewModalClose] = useBoolean();
   const can = usePolicy(team);
+  const appName = env.APP_NAME;
 
   return (
     <Scene
@@ -45,7 +47,11 @@ function Webhooks() {
     >
       <Heading>{t("Webhooks")}</Heading>
       <Text type="secondary">
-        <Trans defaults="Webhooks can be used to notify your application when events happen in Outline. Events are sent as a https request with a JSON payload in near real-time." />
+        <Trans>
+          Webhooks can be used to notify your application when events happen in{" "}
+          {{ appName }}. Events are sent as a https request with a JSON payload
+          in near real-time.
+        </Trans>
       </Text>
       <PaginatedList
         fetch={webhookSubscriptions.fetchPage}

app/scenes/Settings/Zapier.tsx

@@ -5,11 +5,13 @@ import Heading from "~/components/Heading";
 import ZapierIcon from "~/components/Icons/ZapierIcon";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 
 function Zapier() {
   const { ui } = useStores();
   const { resolvedTheme } = ui;
+  const appName = env.APP_NAME;
 
   return (
     <Scene title="Zapier" icon={<ZapierIcon color="currentColor" />}>
@@ -28,9 +30,9 @@ function Zapier() {
       </Helmet>
       <Text type="secondary">
         <Trans>
-          Zapier is a platform that allows Outline to easily integrate with
-          thousands of other business tools. Automate your workflows, sync data,
-          and more.
+          Zapier is a platform that allows {{ appName }} to easily integrate
+          with thousands of other business tools. Automate your workflows, sync
+          data, and more.
         </Trans>
       </Text>
       <br />

app/scenes/Settings/components/ImportOutlineDialog.tsx

@@ -2,12 +2,14 @@ import * as React from "react";
 import { Trans } from "react-i18next";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 import DropToImport from "./DropToImport";
 import HelpDisclosure from "./HelpDisclosure";
 
 function ImportOutlineDialog() {
   const { dialogs } = useStores();
+  const appName = env.APP_NAME;
 
   return (
     <Flex column>
@@ -17,8 +19,8 @@ function ImportOutlineDialog() {
           format="outline-markdown"
         >
           <Trans>
-            Drag and drop the zip file from Outline's Markdown export option, or
-            click to upload
+            Drag and drop the zip file from the Markdown export option in{" "}
+            {{ appName }}, or click to upload
           </Trans>
         </DropToImport>
       </Text>

app/scenes/UserDelete.tsx

@@ -56,6 +56,7 @@ function UserDelete() {
   const inputProps = register("code", {
     required: true,
   });
+  const appName = env.APP_NAME;
 
   return (
     <Flex column>
@@ -91,8 +92,8 @@ function UserDelete() {
               <Trans>
                 Are you sure? Deleting your account will destroy identifying
                 data associated with your user and cannot be undone. You will be
-                immediately logged out of Outline and all your API tokens will
-                be revoked.
+                immediately logged out of {{ appName }} and all your API tokens
+                will be revoked.
               </Trans>
             </Text>
           </>