added key_strings for /integrations (#1144)

components/integrations/CalendarListContainer.tsx

@@ -2,6 +2,7 @@ import React, { Fragment } from "react";
 import { useMutation } from "react-query";
 
 import { QueryCell } from "@lib/QueryCell";
+import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 
@@ -90,6 +91,7 @@ function CalendarSwitch(props: {
 }
 
 function ConnectedCalendarsList(props: Props) {
+  const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
 
   return (
@@ -109,7 +111,7 @@ function ConnectedCalendarsList(props: Props) {
                       id={item.credentialId}
                       render={(btnProps) => (
                         <Button {...btnProps} color="warn">
-                          Disconnect
+                          {t("disconnect")}
                         </Button>
                       )}
                       onOpenChange={props.onChanged}
@@ -137,7 +139,7 @@ function ConnectedCalendarsList(props: Props) {
                       id={item.credentialId}
                       render={(btnProps) => (
                         <Button {...btnProps} color="warn">
-                          Disconnect
+                          {t("disconnect")}
                         </Button>
                       )}
                       onOpenChange={() => props.onChanged()}
@@ -154,6 +156,7 @@ function ConnectedCalendarsList(props: Props) {
 }
 
 function CalendarList(props: Props) {
+  const { t } = useLocale();
   const query = trpc.useQuery(["viewer.integrations"]);
 
   return (
@@ -170,7 +173,7 @@ function CalendarList(props: Props) {
                   type={item.type}
                   render={(btnProps) => (
                     <Button color="secondary" {...btnProps}>
-                      Connect
+                      {t("connect")}
                     </Button>
                   )}
                   onOpenChange={() => props.onChanged()}
@@ -184,6 +187,7 @@ function CalendarList(props: Props) {
   );
 }
 export function CalendarListContainer(props: { heading?: false }) {
+  const { t } = useLocale();
   const { heading = true } = props;
   const utils = trpc.useContext();
   const onChanged = () =>
@@ -197,21 +201,15 @@ export function CalendarListContainer(props: { heading?: false }) {
       {heading && (
         <ShellSubHeading
           className="mt-10"
-          title={<SubHeadingTitleWithConnections title="Calendars" numConnections={query.data?.length} />}
-          subtitle={
-            <>
-              Configure how your links integrate with your calendars.
-              <br />
-              You can override these settings on a per event basis.
-            </>
-          }
+          title={<SubHeadingTitleWithConnections title={t("calendar")} numConnections={query.data?.length} />}
+          subtitle={t("configure_how_your_event_types_interact")}
         />
       )}
       <ConnectedCalendarsList onChanged={onChanged} />
       {!!query.data?.length && (
         <ShellSubHeading
           className="mt-6"
-          title={<SubHeadingTitleWithConnections title="Connect an additional calendar" />}
+          title={<SubHeadingTitleWithConnections title={t("connect_an_additional_calendar")} />}
         />
       )}
       <CalendarList onChanged={onChanged} />

pages/integrations/index.tsx

@@ -288,7 +288,7 @@ function WebhookListContainer() {
                 <Image width={40} height={40} src="/integrations/webhooks.svg" alt="Webhooks" />
                 <div className="flex-grow pl-2 truncate">
                   <ListItemTitle component="h3">Webhooks</ListItemTitle>
-                  <ListItemText component="p">Automation</ListItemText>
+                  <ListItemText component="p">{t("automation")}</ListItemText>
                 </div>
                 <div>
                   <Button
@@ -361,7 +361,7 @@ function IframeEmbedContainer() {
               <Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
               <div className="flex-grow pl-2 truncate">
                 <ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
-                <ListItemText component="p">Embed your calendar within your webpage</ListItemText>
+                <ListItemText component="p">{t("embed_your_calendar")}</ListItemText>
               </div>
               <div>
                 <input
@@ -433,6 +433,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   type: string;
   installed: boolean;
 }) {
+  const { t } = useLocale();
   const [credentialId] = props.credentialIds;
   const utils = trpc.useContext();
   const handleOpenChange = () => {
@@ -445,7 +446,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
         id={credentialId}
         render={(btnProps) => (
           <Button {...btnProps} color="warn">
-            Disconnect
+            {t("disconnect")}
           </Button>
         )}
         onOpenChange={handleOpenChange}
@@ -455,7 +456,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   if (!props.installed) {
     return (
       <div className="flex items-center truncate">
-        <Alert severity="warning" title="Not installed" />
+        <Alert severity="warning" title={t("not_installed")} />
       </div>
     );
   }
@@ -463,7 +464,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   if (props.type === "daily_video") {
     return (
       <div className="px-3 py-2 truncate">
-        <h3 className="text-sm font-medium text-gray-700">Installed</h3>
+        <h3 className="text-sm font-medium text-gray-700">{t("installed")}</h3>
       </div>
     );
   }
@@ -472,7 +473,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
       type={props.type}
       render={(btnProps) => (
         <Button color="secondary" {...btnProps}>
-          Connect
+          {t("connect")}
         </Button>
       )}
       onOpenChange={handleOpenChange}
@@ -481,8 +482,8 @@ function ConnectOrDisconnectIntegrationButton(props: {
 }
 
 function IntegrationsContainer() {
+  const { t } = useLocale();
   const query = trpc.useQuery(["viewer.integrations"], { suspense: true });
-
   return (
     <QueryCell
       query={query}
@@ -491,7 +492,7 @@ function IntegrationsContainer() {
           <ShellSubHeading
             title={
               <SubHeadingTitleWithConnections
-                title="Conferencing"
+                title={t("conferencing")}
                 numConnections={data.conferencing.numActive}
               />
             }
@@ -508,7 +509,9 @@ function IntegrationsContainer() {
 
           <ShellSubHeading
             className="mt-10"
-            title={<SubHeadingTitleWithConnections title="Payment" numConnections={data.payment.numActive} />}
+            title={
+              <SubHeadingTitleWithConnections title={t("payment")} numConnections={data.payment.numActive} />
+            }
           />
           <List>
             {data.payment.items.map((item) => (
@@ -525,8 +528,10 @@ function IntegrationsContainer() {
 }
 
 export default function IntegrationsPage() {
+  const { t } = useLocale();
+
   return (
-    <Shell heading="Integrations" subtitle="Connect your favourite apps.">
+    <Shell heading={t("integrations")} subtitle={t("connect_your_favourite_apps")}>
       <ClientSuspense fallback={<Loader />}>
         <IntegrationsContainer />
         <CalendarListContainer />

public/static/locales/en/common.json

@@ -512,5 +512,15 @@
   "delete_event_type": "Delete Event Type",
   "confirm_delete_event_type": "Yes, delete event type",
   "integrations": "Integrations",
-  "settings": "Settings"
+  "settings": "Settings",
+  "installed": "Installed",
+  "disconnect": "Disconnect",
+  "embed_your_calendar": "Embed your calendar within your webpage",
+  "connect_your_favourite_apps": "Connect your favourite apps.",
+  "automation": "Automation",
+  "configure_how_your_event_types_interact": "Configure how your event types should interact with your calendars.",
+  "connect_an_additional_calendar": "Connect an additional calendar",
+  "conferencing": "Conferencing",
+  "calendar": "Calendar",
+  "not_installed": "Not installed"
 }