Merge pull request #14639 from artsy/damassi/remove-i18n

refactor(app): Remove i18n

.env.example

@@ -36,7 +36,6 @@
 # ------------------------
 APP_TIMEOUT=29s
 API_REQUEST_TIMEOUT=10000
-ENABLE_I18N_DEBUG=false
 NODE_ENV=development
 PORT=4000
 USER_TYPE=Admin

jest.config.js

@@ -12,7 +12,6 @@ module.exports = {
   moduleNameMapper: {
     "^luxon$": "<rootDir>/node_modules/luxon",
     "^react$": "<rootDir>/node_modules/react",
-    "react-i18next": "<rootDir>/src/DevTools/mockReactI18n",
   },
   reporters: ["default", "jest-junit"],
   setupFilesAfterEnv: ["<rootDir>/src/tests.ts"],

package.json

@@ -57,7 +57,6 @@
     "test": "scripts/jest.sh",
     "test:smoke": "npx cypress run",
     "test:smoke:spec": "npx cypress run --spec",
-    "translations": "node scripts/list-translations",
     "type-check": "tsc",
     "stats:client": "WEBPACK_STATS=normal yarn build:client:prod --profile --json > stats-client.json",
     "stats:server": "WEBPACK_STATS=normal yarn build:server:prod --profile --json > stats-server.json",
@@ -142,8 +141,6 @@
     "http-proxy": "1.18.1",
     "http-proxy-middleware": "^3.0.0",
     "http-shutdown": "1.2.1",
-    "i18next": "^21.6.14",
-    "i18next-browser-languagedetector": "^6.1.4",
     "insane": "2.6.1",
     "ip": "^1.1.9",
     "isomorphic-fetch": "^2.2.1",
@@ -174,7 +171,6 @@
     "react-dom": "17.0.2",
     "react-dropzone": "^11.4.2",
     "react-head": "3.0.2",
-    "react-i18next": "^11.16.2",
     "react-is": "^18.2.0",
     "react-lines-ellipsis": "^0.14.0",
     "react-linkify": "1.0.0-alpha",

src/Apps/ArtQuiz/Components/ArtQuizResultsEmpty.tsx

@@ -2,23 +2,21 @@ import { Spacer, Tabs, Tab, Text } from "@artsy/palette"
 import { ArtQuizTrendingArtistsQueryRenderer } from "Apps/ArtQuiz/Components/ArtQuizTrendingArtists"
 import { ArtQuizTrendingCollectionsQueryRenderer } from "Apps/ArtQuiz/Components/ArtQuizTrendingCollections"
 import { FC } from "react"
-import { useTranslation } from "react-i18next"
 
 export const ArtQuizResultsEmpty: FC = () => {
-  const { t } = useTranslation()
-
   return (
     <>
       <Spacer y={[4, 6]} />
 
       <Text variant={["lg-display", "xl"]}>
-        {t("artQuizPage.results.empty.title")}
+        Explore Trending Collections and Artists
       </Text>
 
       <Spacer y={[0, 1]} />
 
       <Text color="black60" variant={["lg-display", "md"]}>
-        {t("artQuizPage.results.empty.subtitle")}
+        There are almost 2 million artworks on Artsy—keep exploring to find
+        something you love.
       </Text>
 
       <Spacer y={[4, 6]} />

src/Apps/ArtQuiz/Components/ArtQuizResultsLoader.tsx

@@ -2,7 +2,7 @@ import { Flex, Text, Spacer, FullBleed, Spinner, Box } from "@artsy/palette"
 import { ArtQuizFullScreen } from "Apps/ArtQuiz/Components/ArtQuizFullscreen"
 import { SplitLayout } from "Components/SplitLayout"
 import { useState, useEffect, FC } from "react"
-import { useTranslation } from "react-i18next"
+
 import ArtsyMarkIcon from "@artsy/icons/ArtsyMarkIcon"
 
 interface ArtQuizResultsLoaderProps {
@@ -12,8 +12,6 @@ interface ArtQuizResultsLoaderProps {
 export const ArtQuizResultsLoader: FC<ArtQuizResultsLoaderProps> = ({
   onReady,
 }) => {
-  const { t } = useTranslation()
-
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -57,17 +55,13 @@ export const ArtQuizResultsLoader: FC<ArtQuizResultsLoaderProps> = ({
               <Spacer y={2} />
 
               <Text variant={["lg", "xl"]}>
-                {loading
-                  ? t("artQuizPage.loadingScreen.findingArt")
-                  : t("artQuizPage.loadingScreen.resultsReady")}
+                {loading ? "Finding art for you..." : "Your results are ready"}
               </Text>
 
               <Spacer y={2} />
 
               <Text variant={["sm", "md"]} color="black60">
-                {loading
-                  ? t("artQuizPage.loadingScreen.calculatingResults")
-                  : t("artQuizPage.loadingScreen.resultsComplete")}
+                {loading ? "Calculating Results…" : "Results Complete"}
               </Text>
             </Flex>
           }

src/Apps/ArtQuiz/Components/ArtQuizResultsTabs.tsx

@@ -4,21 +4,19 @@ import { ArtQuizRecommendedArtistsQueryRenderer } from "Apps/ArtQuiz/Components/
 import { ArtQuizResultsRecommendedArtworksQueryRenderer } from "Apps/ArtQuiz/Components/ArtQuizResultsRecommendedArtworks"
 import { TriggerCampaignButton } from "Apps/ArtQuiz/Components/TriggerCampaignButton"
 import { FC } from "react"
-import { useTranslation } from "react-i18next"
 
 export const ArtQuizResultsTabs: FC = ({}) => {
-  const { t } = useTranslation()
-
   return (
     <>
       <Spacer y={[4, 6]} />
 
-      <Text variant={["lg", "xl"]}>{t("artQuizPage.results.title")}</Text>
+      <Text variant={["lg", "xl"]}>Explore Art We Think You’ll Love</Text>
 
       <Spacer y={[0, 1]} />
 
       <Text color="black60" variant={["sm", "md"]}>
-        {t("artQuizPage.results.subtitle")}
+        Based on your responses, we think you’ll enjoy these artworks and
+        artists. Keep saving and following to continue tailoring Artsy to you.
       </Text>
 
       <Spacer y={[2, 4]} />
@@ -28,15 +26,15 @@ export const ArtQuizResultsTabs: FC = ({}) => {
       <Spacer y={[4, 6]} />
 
       <Tabs fill>
-        <Tab name={t("artQuizPage.results.tabs.worksYouLiked")}>
+        <Tab name="Works You Liked">
           <ArtQuizLikedArtworksQueryRenderer />
         </Tab>
 
-        <Tab name={t("artQuizPage.results.tabs.recommendedArtworks")}>
+        <Tab name="Works for You">
           <ArtQuizResultsRecommendedArtworksQueryRenderer />
         </Tab>
 
-        <Tab name={t("artQuizPage.results.tabs.recommendedArtists")}>
+        <Tab name="Artists for You">
           <Spacer y={4} />
 
           <ArtQuizRecommendedArtistsQueryRenderer />

src/Apps/ArtQuiz/Components/TriggerCampaignButton.tsx

@@ -1,5 +1,4 @@
 import { Button, useToasts } from "@artsy/palette"
-import { t } from "i18next"
 import { FC, useState } from "react"
 import { graphql } from "react-relay"
 import { useSystemContext } from "System/Hooks/useSystemContext"
@@ -34,14 +33,14 @@ export const TriggerCampaignButton: FC = () => {
       })
       sendToast({
         variant: "success",
-        message: t("artQuizPage.results.emailSuccess", { email: user?.email }),
+        message: `Results sent to ${user?.email}`,
       })
 
       setIsLoading(false)
     } catch (error) {
       sendToast({
         variant: "error",
-        message: t("common.errors.somethingWentWrong"),
+        message: "Something went wrong. Please try again.",
       })
 
       setIsLoading(false)
@@ -55,7 +54,7 @@ export const TriggerCampaignButton: FC = () => {
       onClick={handleClick}
       loading={isLoading}
     >
-      {t("artQuizPage.results.emailButton")}
+      Email My Results
     </Button>
   )
 }

src/Apps/ArtQuiz/Routes/ArtQuizArtworks.tsx

@@ -24,7 +24,7 @@ import { useSaveArtwork } from "Apps/ArtQuiz/Hooks/useSaveArtwork"
 import { ArtQuizResultsLoader } from "Apps/ArtQuiz/Components/ArtQuizResultsLoader"
 import { useTracking } from "react-tracking"
 import { ContextModule } from "@artsy/cohesion"
-import { useTranslation } from "react-i18next"
+
 import { compact } from "lodash"
 import { ArtQuizArtworksCardFragmentContainer } from "Apps/ArtQuiz/Components/ArtQuizArtworksCard"
 import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon"
@@ -39,7 +39,7 @@ export const ArtQuizArtworks: FC<ArtQuizArtworksProps> = ({ me }) => {
   const { submitMutation: submitUpdate } = useUpdateQuiz()
   const { trackEvent } = useTracking()
   const { router } = useRouter()
-  const { t } = useTranslation()
+
   const [showLoader, setShowLoader] = useState(false)
 
   const edges = me.quiz?.quizArtworkConnection?.edges || []
@@ -202,8 +202,7 @@ export const ArtQuizArtworks: FC<ArtQuizArtworksProps> = ({ me }) => {
     return <ArtQuizResultsLoader onReady={handleReady} />
   }
 
-  // Using split to create a deliberate break in text for better readability
-  const tooltipText = t("artQuizPage.artworksScreen.tooltip").split("\n")
+  const tooltipText = "Like it? Hit the heart.\nNot for you? Choose X."
 
   return (
     <ArtQuizFullScreen>
@@ -268,13 +267,7 @@ export const ArtQuizArtworks: FC<ArtQuizArtworksProps> = ({ me }) => {
         </Flex>
 
         <Tooltip
-          content={
-            <Text variant="xs">
-              {tooltipText.map((text, i) => {
-                return <div key={i}>{text}</div>
-              })}
-            </Text>
-          }
+          content={<Text variant="xs">{tooltipText}</Text>}
           variant="defaultDark"
           offset={-10}
           pointer