[web] Move custom domain related strings to translations

web/apps/photos/src/components/Sidebar.tsx

@@ -55,7 +55,6 @@ import { useBaseContext } from "ente-base/context";
 import { isHTTPErrorWithStatus } from "ente-base/http";
 import {
     getLocaleInUse,
-    pt,
     setLocaleInUse,
     supportedLocales,
     ut,
@@ -826,7 +825,7 @@ const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                     </RowButtonGroup>
                 )}
                 <RowButton
-                    label={pt("Custom domains")}
+                    label={t("custom_domains")}
                     endIcon={
                         <Stack
                             direction="row"
@@ -1018,9 +1017,8 @@ const DomainSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
         <TitledNestedSidebarDrawer
             {...{ open, onClose }}
             onRootClose={handleRootClose}
-            // TODO: CD: Translations
-            title={pt("Custom domains")}
-            caption={pt("Use your own domain when sharing")}
+            title={t("custom_domains")}
+            caption={t("custom_domains_desc")}
         >
             <DomainSettingsContents />
         </TitledNestedSidebarDrawer>
@@ -1043,11 +1041,11 @@ const DomainSettingsContents: React.FC = () => {
             } catch (e) {
                 log.error(`Failed to submit input ${domain}`, e);
                 if (isHTTPErrorWithStatus(e, 400)) {
-                    setValueFieldError(pt("Invalid domain"));
+                    setValueFieldError(t("invalid_domain"));
                 } else if (isHTTPErrorWithStatus(e, 402)) {
                     setValueFieldError(t("sharing_disabled_for_free_accounts"));
                 } else if (isHTTPErrorWithStatus(e, 409)) {
-                    setValueFieldError(pt("Domain already linked by a user"));
+                    setValueFieldError(t("already_linked_domain"));
                 } else {
                     setValueFieldError(t("generic_error"));
                 }
@@ -1057,7 +1055,7 @@ const DomainSettingsContents: React.FC = () => {
 
     return (
         <Stack sx={{ px: 2, py: "12px" }}>
-            <DomainItem title={pt("Link your domain")} ordinal={pt("1")}>
+            <DomainItem title={t("link_your_domain")} ordinal={t("num_1")}>
                 <form onSubmit={formik.handleSubmit}>
                     <TextField
                         name="domain"
@@ -1069,11 +1067,8 @@ const DomainSettingsContents: React.FC = () => {
                         margin="dense"
                         disabled={formik.isSubmitting}
                         error={!!formik.errors.domain}
-                        helperText={
-                            formik.errors.domain ??
-                            pt("Any domain or subdomain you own")
-                        }
-                        label={pt("Domain")}
+                        helperText={formik.errors.domain ?? t("domain_help")}
+                        label={t("domain")}
                         placeholder={ut("photos.example.org")}
                         sx={{ mb: 2 }}
                     />
@@ -1088,26 +1083,38 @@ const DomainSettingsContents: React.FC = () => {
                 </form>
             </DomainItem>
             <Divider sx={{ mt: 4, mb: 2, opacity: 0.5 }} />
-            <DomainItem title={pt("Add DNS entry")} ordinal={pt("2")}>
+            <DomainItem title={t("add_dns_entry")} ordinal={t("num_2")}>
                 <Typography sx={{ color: "text.muted" }}>
-                    On your DNS provider, add a CNAME from your domain to{" "}
-                    <Typography
-                        component="span"
-                        sx={{ fontWeight: "bold", color: "text.base" }}
-                    >
-                        {customDomainCNAME}
-                    </Typography>
+                    <Trans
+                        i18nKey="add_dns_entry_hint"
+                        components={{
+                            b: (
+                                <Typography
+                                    component="span"
+                                    sx={{
+                                        fontWeight: "bold",
+                                        color: "text.base",
+                                    }}
+                                />
+                            ),
+                        }}
+                        values={{ host: customDomainCNAME }}
+                    />
                 </Typography>
                 <Typography sx={{ color: "text.muted", mt: 3 }}>
-                    For more information, see{" "}
-                    <Link
-                        href="https://help.ente.io/photos/features/custom-domains/"
-                        target="_blank"
-                        rel="noopener"
-                        color="accent"
-                    >
-                        {t("help").toLocaleLowerCase()}
-                    </Link>
+                    <Trans
+                        i18nKey="custom_domains_help"
+                        components={{
+                            a: (
+                                <Link
+                                    href="https://help.ente.io/photos/features/custom-domains/"
+                                    target="_blank"
+                                    rel="noopener"
+                                    color="accent"
+                                />
+                            ),
+                        }}
+                    />
                 </Typography>
             </DomainItem>
         </Stack>

web/packages/base/locales/en-US/translation.json

@@ -685,5 +685,17 @@
     "person_favorites": "{{name}}'s favorites",
     "shared_favorites": "Shared favorites",
     "added_by_name": "Added by {{name}}",
-    "unowned_files_not_processed": "Files added by other users were not processed"
+    "unowned_files_not_processed": "Files added by other users were not processed",
+    "custom_domains": "Custom domains",
+    "custom_domains_desc": "Use your own domain when sharing",
+    "link_your_domain": "Link your domain",
+    "domain": "Domain",
+    "domain_help": "Any domain or subdomain you own",
+    "invalid_domain": "Invalid domain",
+    "already_linked_domain": "Domain already linked by a user",
+    "add_dns_entry": "Add DNS entry",
+    "add_dns_entry_hint": "On your DNS provider, add a CNAME from your domain to <b>{{host}}</b>",
+    "custom_domains_help": "For more information, see <a>help</a>",
+    "num_1": "1",
+    "num_2": "2"
 }