fix: added translations for connect atoms (#15969)

* fix: added translations for connect atoms

* fix: already spelling

---------

Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/public/static/locales/en/common.json

@@ -2507,6 +2507,15 @@
   "event_expired": "This event is expired",
   "skip_contact_creation": "Skip creating contacts if they do not exist in {{appName}} ",
   "skip_writing_to_calendar_note": "If your ICS link is read-only (e.g., Proton Calendar), check the box above to avoid errors. You'll also need to manually update your calendar for changes.",
+  "apple_connect_atom_label": "Connect Apple Calendar",
+  "apple_connect_atom_already_connected_label": "Connected Apple Calendar",
+  "apple_connect_atom_loading_label": "Checking Apple Calendar",
+  "google_connect_atom_label": "Connect Google Calendar",
+  "google_connect_atom_already_connected_label": "Connected Google Calendar",
+  "google_connect_atom_loading_label": "Checking Google Calendar",
+  "outlook_connect_atom_label": "Connect Outlook Calendar",
+  "outlook_connect_atom_already_connected_label": "Connected Outlook Calendar",
+  "outlook_connect_atom_loading_label": "Checking Outlook Calendar",
   "booking_question_response_variables": "Booking question response variables",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/platform/atoms/connect/apple/AppleConnect.tsx

@@ -10,6 +10,7 @@ import type { FC } from "react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Form, PasswordField, TextField } from "@calcom/ui";
 
 import { SUCCESS_STATUS } from "../../../constants/api";
@@ -21,12 +22,13 @@ import { cn } from "../../src/lib/utils";
 import type { OAuthConnectProps } from "../OAuthConnect";
 
 export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
-  label = "Connect Apple Calendar",
-  alreadyConnectedLabel = "Connected Apple Calendar",
-  loadingLabel = "Checking Apple Calendar",
+  label,
+  alreadyConnectedLabel,
+  loadingLabel,
   className,
   initialData,
 }) => {
+  const { t } = useLocale();
   const form = useForm({
     defaultValues: {
       username: "",
@@ -40,7 +42,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
   });
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  let displayedLabel = label;
+  let displayedLabel = label || t("apple_connect_atom_label");
 
   const { mutate: saveCredentials, isPending: isSaving } = useSaveCalendarCredentials({
     onSuccess: (res) => {
@@ -64,9 +66,9 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
   const isDisabled = isChecking || !allowConnect;
 
   if (isChecking) {
-    displayedLabel = loadingLabel;
+    displayedLabel = loadingLabel || t("apple_connect_atom_loading_label");
   } else if (!allowConnect) {
-    displayedLabel = alreadyConnectedLabel;
+    displayedLabel = alreadyConnectedLabel || t("apple_connect_atom_already_connected_label");
   }
 
   return (

packages/platform/atoms/connect/google/GcalConnect.tsx

@@ -1,24 +1,26 @@
 import type { FC } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { GOOGLE_CALENDAR } from "@calcom/platform-constants";
 
 import type { OAuthConnectProps } from "../OAuthConnect";
 import { OAuthConnect } from "../OAuthConnect";
 
 export const GcalConnect: FC<Partial<OAuthConnectProps>> = ({
-  label = "Connect Google Calendar",
-  alreadyConnectedLabel = "Connected Google Calendar",
-  loadingLabel = "Checking Google Calendar",
+  label,
+  alreadyConnectedLabel,
+  loadingLabel,
   className,
   onCheckError,
   redir,
   initialData,
 }) => {
+  const { t } = useLocale();
   return (
     <OAuthConnect
-      label={label}
-      alreadyConnectedLabel={alreadyConnectedLabel}
-      loadingLabel={loadingLabel}
+      label={label || t("google_connect_atom_label")}
+      alreadyConnectedLabel={alreadyConnectedLabel || t("google_connect_atom_already_connected_label")}
+      loadingLabel={loadingLabel || t("google_connect_atom_loading_label")}
       calendar={GOOGLE_CALENDAR}
       className={className}
       onCheckError={onCheckError}

packages/platform/atoms/connect/outlook/OutlookConnect.tsx

@@ -1,24 +1,26 @@
 import type { FC } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { OFFICE_365_CALENDAR } from "@calcom/platform-constants";
 
 import type { OAuthConnectProps } from "../OAuthConnect";
 import { OAuthConnect } from "../OAuthConnect";
 
 export const OutlookConnect: FC<Partial<OAuthConnectProps>> = ({
-  label = "Connect Outlook Calendar",
-  alreadyConnectedLabel = "Connected Outlook Calendar",
-  loadingLabel = "Checking Outlook Calendar",
+  label,
+  alreadyConnectedLabel,
+  loadingLabel,
   className,
   onCheckError,
   redir,
   initialData,
 }) => {
+  const { t } = useLocale();
   return (
     <OAuthConnect
-      label={label}
-      alreadyConnectedLabel={alreadyConnectedLabel}
-      loadingLabel={loadingLabel}
+      label={label || t("outlook_connect_atom_label")}
+      alreadyConnectedLabel={alreadyConnectedLabel || t("outlook_connect_atom_already_connected_label")}
+      loadingLabel={loadingLabel || t("outlook_connect_atom_loading_label")}
       calendar={OFFICE_365_CALENDAR}
       className={className}
       onCheckError={onCheckError}