From c4e2b6b45878cbdffa8dd2c98c0fa46a69379e52 Mon Sep 17 00:00:00 2001
From: Mihai C <34626017+mihaic195@users.noreply.github.com>
Date: Fri, 15 Oct 2021 13:53:42 +0300
Subject: [PATCH] more strings extractions (#963)

---
 components/AddToHomescreen.tsx               |  9 ++--
 components/BookingsShell.tsx                 |  9 ++--
 components/ImageUploader.tsx                 | 21 ++++++---
 components/Shell.tsx                         |  9 ++--
 components/booking/BookingListItem.tsx       | 18 +++++---
 components/booking/pages/BookingPage.tsx     |  4 +-
 components/eventtype/CustomInputTypeForm.tsx | 26 +++++------
 components/eventtype/EventTypeList.tsx       |  6 +--
 components/security/EnableTwoFactorModal.tsx | 14 +++---
 components/team/TeamListItem.tsx             |  4 +-
 components/ui/PoweredByCal.tsx               | 43 ++++++++++---------
 components/ui/Schedule/Schedule.tsx          |  5 ++-
 components/ui/Scheduler.tsx                  |  9 ++--
 components/ui/TableActions.tsx               |  4 +-
 components/ui/form/CheckedSelect.tsx         |  7 ++-
 components/ui/form/radio-area/Select.tsx     |  4 +-
 components/ui/modal/SetTimesModal.tsx        | 23 +++++-----
 components/webhook/EditWebhook.tsx           | 30 ++++++++-----
 components/webhook/WebhookListItem.tsx       | 23 +++++-----
 public/static/locales/en/common.json         | 45 +++++++++++++++++++-
 20 files changed, 201 insertions(+), 112 deletions(-)

diff --git a/components/AddToHomescreen.tsx b/components/AddToHomescreen.tsx
index 4c4e95b4..312894dc 100644
--- a/components/AddToHomescreen.tsx
+++ b/components/AddToHomescreen.tsx
@@ -1,7 +1,10 @@
 import { XIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 export default function AddToHomescreen() {
+  const { t } = useLocale();
   const [closeBanner, setCloseBanner] = useState(false);
 
   if (typeof window !== "undefined") {
@@ -27,9 +30,7 @@ export default function AddToHomescreen() {
                 </svg>
               </span>
               <p className="ml-3 text-xs font-medium text-white">
-                <span className="inline">
-                  Add this app to your home screen for faster access and improved experience.
-                </span>
+                <span className="inline">{t("add_to_homescreen")}</span>
               </p>
             </div>
 
@@ -38,7 +39,7 @@ export default function AddToHomescreen() {
                 onClick={() => setCloseBanner(true)}
                 type="button"
                 className="-mr-1 flex p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
-                <span className="sr-only">Dismiss</span>
+                <span className="sr-only">{t("dismiss")}</span>
                 <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
diff --git a/components/BookingsShell.tsx b/components/BookingsShell.tsx
index dd5e4019..700d0029 100644
--- a/components/BookingsShell.tsx
+++ b/components/BookingsShell.tsx
@@ -1,19 +1,22 @@
 import React from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 import NavTabs from "./NavTabs";
 
 export default function BookingsShell({ children }: { children: React.ReactNode }) {
+  const { t } = useLocale();
   const tabs = [
     {
-      name: "Upcoming",
+      name: t("upcoming"),
       href: "/bookings/upcoming",
     },
     {
-      name: "Past",
+      name: t("past"),
       href: "/bookings/past",
     },
     {
-      name: "Cancelled",
+      name: t("cancelled"),
       href: "/bookings/cancelled",
     },
   ];
diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index a4085a11..7dccb69e 100644
--- a/components/ImageUploader.tsx
+++ b/components/ImageUploader.tsx
@@ -3,6 +3,7 @@ import Cropper from "react-easy-crop";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
+import { useLocale } from "@lib/hooks/useLocale";
 
 import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@components/Dialog";
 import Slider from "@components/Slider";
@@ -24,6 +25,7 @@ function CropContainer({
   imageSrc: string;
   onCropComplete: (croppedAreaPixels: Area) => void;
 }) {
+  const { t } = useLocale();
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
 
@@ -49,7 +51,7 @@ function CropContainer({
         min={1}
         max={3}
         step={0.1}
-        label="Slide to zoom, drag to reposition"
+        label={t("slide_zoom_drag_instructions")}
         changeHandler={handleZoomSliderChange}
       />
     </div>
@@ -63,6 +65,7 @@ export default function ImageUploader({
   handleAvatarChange,
   ...props
 }: ImageUploaderProps) {
+  const { t } = useLocale();
   const [imageSrc, setImageSrc] = useState<string | null>();
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>();
 
@@ -110,7 +113,7 @@ export default function ImageUploader({
         <div className="sm:flex sm:items-start mb-4">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
             <h3 className="font-cal text-lg leading-6 font-bold text-gray-900" id="modal-title">
-              Upload {target}
+              {t("upload_target", { target })}
             </h3>
           </div>
         </div>
@@ -118,7 +121,11 @@ export default function ImageUploader({
           <div className="cropper mt-6 flex flex-col justify-center items-center p-8 bg-gray-50">
             {!result && (
               <div className="flex justify-start items-center bg-gray-500 max-h-20 h-20 w-20 rounded-full">
-                {!imageSrc && <p className="sm:text-xs text-sm text-white w-full text-center">No {target}</p>}
+                {!imageSrc && (
+                  <p className="sm:text-xs text-sm text-white w-full text-center">
+                    {t("no_target", { target })}
+                  </p>
+                )}
                 {imageSrc && <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />}
               </div>
             )}
@@ -128,20 +135,20 @@ export default function ImageUploader({
                 onInput={onInputFile}
                 type="file"
                 name={id}
-                placeholder="Upload image"
+                placeholder={t("upload_image")}
                 className="mt-4 pointer-events-none opacity-0 absolute"
                 accept="image/*"
               />
-              Choose a file...
+              {t("choose_a_file")}
             </label>
           </div>
         </div>
         <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
           <DialogClose asChild>
-            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>Save</Button>
+            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button color="secondary">Cancel</Button>
+            <Button color="secondary">{t("cancel")}</Button>
           </DialogClose>
         </div>
       </DialogContent>
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 8dda9abc..11caafad 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -232,7 +232,7 @@ export default function Shell(props: {
               </Link>
               <div className="flex items-center self-center gap-3">
                 <button className="p-2 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
-                  <span className="sr-only">View notifications</span>
+                  <span className="sr-only">{t("view_notifications")}</span>
                   <Link href="/settings/profile">
                     <a>
                       <CogIcon className="w-6 h-6" aria-hidden="true" />
@@ -294,6 +294,7 @@ export default function Shell(props: {
 }
 
 function UserDropdown({ small }: { small?: boolean }) {
+  const { t } = useLocale();
   const query = useMeQuery();
   const user = query.data;
 
@@ -331,7 +332,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               rel="noopener noreferrer"
               href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
               className="flex px-4 py-2 text-sm text-neutral-500">
-              View public page <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
+              {t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
             </a>
           </DropdownMenuItem>
           <DropdownMenuSeparator className="h-px bg-gray-200" />
@@ -363,7 +364,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                     fill="#9BA6B6"></path>
                 </g>
               </svg>
-              Join our Slack
+              {t("join_our_slack")}
             </a>
           </DropdownMenuItem>
           <HelpMenuItemDynamic />
@@ -379,7 +380,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 )}
                 aria-hidden="true"
               />
-              Sign out
+              {t("sign_out")}
             </a>
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/components/booking/BookingListItem.tsx b/components/booking/BookingListItem.tsx
index 1d21655f..0dd428d3 100644
--- a/components/booking/BookingListItem.tsx
+++ b/components/booking/BookingListItem.tsx
@@ -4,6 +4,7 @@ import dayjs from "dayjs";
 import { useMutation } from "react-query";
 
 import { HttpError } from "@lib/core/http/error";
+import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import TableActions, { ActionType } from "@components/ui/TableActions";
@@ -11,6 +12,7 @@ import TableActions, { ActionType } from "@components/ui/TableActions";
 type BookingItem = inferQueryOutput<"viewer.bookings">[number];
 
 function BookingListItem(booking: BookingItem) {
+  const { t } = useLocale();
   const utils = trpc.useContext();
   const mutation = useMutation(
     async (confirm: boolean) => {
@@ -37,14 +39,14 @@ function BookingListItem(booking: BookingItem) {
   const pendingActions: ActionType[] = [
     {
       id: "reject",
-      label: "Reject",
+      label: t("reject"),
       onClick: () => mutation.mutate(false),
       icon: BanIcon,
       disabled: mutation.isLoading,
     },
     {
       id: "confirm",
-      label: "Confirm",
+      label: t("confirm"),
       onClick: () => mutation.mutate(true),
       icon: CheckIcon,
       disabled: mutation.isLoading,
@@ -55,13 +57,13 @@ function BookingListItem(booking: BookingItem) {
   const bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label: "Cancel",
+      label: t("cancel"),
       href: `/cancel/${booking.uid}`,
       icon: XIcon,
     },
     {
       id: "reschedule",
-      label: "Reschedule",
+      label: t("reschedule"),
       href: `/reschedule/${booking.uid}`,
       icon: ClockIcon,
     },
@@ -78,7 +80,7 @@ function BookingListItem(booking: BookingItem) {
         </div>
         {!booking.confirmed && !booking.rejected && (
           <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
-            Unconfirmed
+            {t("unconfirmed")}
           </span>
         )}
       </td>
@@ -86,7 +88,7 @@ function BookingListItem(booking: BookingItem) {
         <div className="sm:hidden">
           {!booking.confirmed && !booking.rejected && (
             <span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
-              Unconfirmed
+              {t("unconfirmed")}
             </span>
           )}
           <div className="text-sm text-gray-900 font-medium">
@@ -117,7 +119,9 @@ function BookingListItem(booking: BookingItem) {
           <>
             {!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
             {booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
-            {!booking.confirmed && booking.rejected && <div className="text-sm text-gray-500">Rejected</div>}
+            {!booking.confirmed && booking.rejected && (
+              <div className="text-sm text-gray-500">{t("rejected")}</div>
+            )}
           </>
         ) : null}
       </td>
diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 4e252bbf..4ba006ae 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -151,7 +151,7 @@ const BookingPage = (props: BookingPageProps) => {
 
         if (payload["location"]) {
           if (payload["location"].includes("integration")) {
-            params.location = "Web conferencing details to follow.";
+            params.location = t("web_conferencing_details_to_follow");
           } else {
             params.location = payload["location"];
           }
@@ -398,7 +398,7 @@ const BookingPage = (props: BookingPageProps) => {
                           <label
                             htmlFor="guests"
                             className="block mb-1 text-sm font-medium text-gray-700 dark:text-white">
-                            Guests
+                            {t("guests")}
                           </label>
                           <ReactMultiEmail
                             className="relative"
diff --git a/components/eventtype/CustomInputTypeForm.tsx b/components/eventtype/CustomInputTypeForm.tsx
index 7e7a000b..ca25567c 100644
--- a/components/eventtype/CustomInputTypeForm.tsx
+++ b/components/eventtype/CustomInputTypeForm.tsx
@@ -3,12 +3,7 @@ import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 import Select, { OptionTypeBase } from "react-select";
 
-const inputOptions: OptionTypeBase[] = [
-  { value: EventTypeCustomInputType.TEXT, label: "Text" },
-  { value: EventTypeCustomInputType.TEXTLONG, label: "Multiline Text" },
-  { value: EventTypeCustomInputType.NUMBER, label: "Number" },
-  { value: EventTypeCustomInputType.BOOL, label: "Checkbox" },
-];
+import { useLocale } from "@lib/hooks/useLocale";
 
 interface Props {
   onSubmit: SubmitHandler<IFormInput>;
@@ -19,6 +14,13 @@ interface Props {
 type IFormInput = EventTypeCustomInput;
 
 const CustomInputTypeForm: FC<Props> = (props) => {
+  const { t } = useLocale();
+  const inputOptions: OptionTypeBase[] = [
+    { value: EventTypeCustomInputType.TEXT, label: t("text") },
+    { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
+    { value: EventTypeCustomInputType.NUMBER, label: t("number") },
+    { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
+  ];
   const { selectedCustomInput } = props;
   const defaultValues = selectedCustomInput || { type: inputOptions[0].value };
   const { register, control, handleSubmit } = useForm<IFormInput>({
@@ -35,7 +37,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
     <form onSubmit={handleSubmit(props.onSubmit)}>
       <div className="mb-2">
         <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-          Input type
+          {t("input_type")}
         </label>
         <Controller
           name="type"
@@ -57,7 +59,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
       </div>
       <div className="mb-2">
         <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-          Label
+          {t("label")}
         </label>
         <div className="mt-1">
           <input
@@ -74,7 +76,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         selectedInputType === EventTypeCustomInputType.TEXTLONG) && (
         <div className="mb-2">
           <label htmlFor="placeholder" className="block text-sm font-medium text-gray-700">
-            Placeholder
+            {t("placeholder")}
           </label>
           <div className="mt-1">
             <input
@@ -96,7 +98,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
           {...register("required")}
         />
         <label htmlFor="required" className="block text-sm font-medium text-gray-700">
-          Is required
+          {t("is_required")}
         </label>
       </div>
       <input
@@ -113,10 +115,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
       />
       <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
         <button type="submit" className="btn btn-primary">
-          Save
+          {t("save")}
         </button>
         <button onClick={onCancel} type="button" className="mr-2 btn btn-white">
-          Cancel
+          {t("cancel")}
         </button>
       </div>
     </form>
diff --git a/components/eventtype/EventTypeList.tsx b/components/eventtype/EventTypeList.tsx
index 9908a5cb..de2cf33a 100644
--- a/components/eventtype/EventTypeList.tsx
+++ b/components/eventtype/EventTypeList.tsx
@@ -79,7 +79,7 @@ const EventTypeList = ({ readOnly, types, profile }: Props): JSX.Element => {
                         }))}
                       />
                     )}
-                    <Tooltip content="Preview">
+                    <Tooltip content={t("preview")}>
                       <a
                         href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
                         target="_blank"
@@ -89,10 +89,10 @@ const EventTypeList = ({ readOnly, types, profile }: Props): JSX.Element => {
                       </a>
                     </Tooltip>
 
-                    <Tooltip content="Copy link">
+                    <Tooltip content={t("copy_link")}>
                       <button
                         onClick={() => {
-                          showToast("Link copied!", "success");
+                          showToast(t("link_copied"), "success");
                           navigator.clipboard.writeText(
                             `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
                           );
diff --git a/components/security/EnableTwoFactorModal.tsx b/components/security/EnableTwoFactorModal.tsx
index 45b307b6..0a4f4323 100644
--- a/components/security/EnableTwoFactorModal.tsx
+++ b/components/security/EnableTwoFactorModal.tsx
@@ -27,13 +27,6 @@ enum SetupStep {
   EnterTotpCode,
 }
 
-const setupDescriptions = {
-  [SetupStep.ConfirmPassword]: "Confirm your current password to get started.",
-  [SetupStep.DisplayQrCode]:
-    "Scan the image below with the authenticator app on your phone or manually enter the text code instead.",
-  [SetupStep.EnterTotpCode]: "Enter the six-digit code from your authenticator app below.",
-};
-
 const WithStep = ({
   step,
   current,
@@ -47,6 +40,12 @@ const WithStep = ({
 };
 
 const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
+  const { t } = useLocale();
+  const setupDescriptions = {
+    [SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
+    [SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
+    [SetupStep.EnterTotpCode]: t("2fa_enter_six_digit_code"),
+  };
   const [step, setStep] = useState(SetupStep.ConfirmPassword);
   const [password, setPassword] = useState("");
   const [totpCode, setTotpCode] = useState("");
@@ -54,7 +53,6 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
   const [secret, setSecret] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const { t } = useLocale();
 
   async function handleSetup(e: SyntheticEvent) {
     e.preventDefault();
diff --git a/components/team/TeamListItem.tsx b/components/team/TeamListItem.tsx
index 42cc5d01..c6f34b96 100644
--- a/components/team/TeamListItem.tsx
+++ b/components/team/TeamListItem.tsx
@@ -100,7 +100,7 @@ export default function TeamListItem(props: {
               <span className="self-center h-6 px-3 py-1 text-xs text-gray-700 capitalize rounded-md bg-gray-50">
                 {t("owner")}
               </span>
-              <Tooltip content="Copy link">
+              <Tooltip content={t("copy_link")}>
                 <Button
                   onClick={() => {
                     navigator.clipboard.writeText(
@@ -155,7 +155,7 @@ export default function TeamListItem(props: {
                       </DialogTrigger>
                       <ConfirmationDialogContent
                         variety="danger"
-                        title="Disband Team"
+                        title={t("disband_team")}
                         confirmBtnText={t("confirm_disband_team")}
                         onConfirm={() => props.onActionSelect("disband")}>
                         {t("disband_team_confirmation_message")}
diff --git a/components/ui/PoweredByCal.tsx b/components/ui/PoweredByCal.tsx
index 997eea4c..06e9e847 100644
--- a/components/ui/PoweredByCal.tsx
+++ b/components/ui/PoweredByCal.tsx
@@ -1,23 +1,28 @@
 import Link from "next/link";
 
-const PoweredByCal = () => (
-  <div className="text-xs text-center sm:text-right p-1">
-    <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
-      <a target="_blank" className="dark:text-white text-gray-500 opacity-50 hover:opacity-100">
-        powered by{" "}
-        <img
-          className="dark:hidden w-auto inline h-[10px] relative -mt-px"
-          src="https://cal.com/logo.svg"
-          alt="Cal.com Logo"
-        />
-        <img
-          className="hidden dark:inline w-auto h-[10px] relativ -mt-px"
-          src="https://cal.com/logo-white.svg"
-          alt="Cal.com Logo"
-        />
-      </a>
-    </Link>
-  </div>
-);
+import { useLocale } from "@lib/hooks/useLocale";
+
+const PoweredByCal = () => {
+  const { t } = useLocale();
+  return (
+    <div className="text-xs text-center sm:text-right p-1">
+      <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
+        <a target="_blank" className="dark:text-white text-gray-500 opacity-50 hover:opacity-100">
+          {t("powered_by")}{" "}
+          <img
+            className="dark:hidden w-auto inline h-[10px] relative -mt-px"
+            src="https://cal.com/logo.svg"
+            alt="Cal.com Logo"
+          />
+          <img
+            className="hidden dark:inline w-auto h-[10px] relativ -mt-px"
+            src="https://cal.com/logo-white.svg"
+            alt="Cal.com Logo"
+          />
+        </a>
+      </Link>
+    </div>
+  );
+};
 
 export default PoweredByCal;
diff --git a/components/ui/Schedule/Schedule.tsx b/components/ui/Schedule/Schedule.tsx
index 9bf0bb47..3642c482 100644
--- a/components/ui/Schedule/Schedule.tsx
+++ b/components/ui/Schedule/Schedule.tsx
@@ -3,6 +3,8 @@ import classnames from "classnames";
 import dayjs, { Dayjs } from "dayjs";
 import React from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 import Text from "@components/ui/Text";
 
 export const SCHEDULE_FORM_ID = "SCHEDULE_FORM_ID";
@@ -79,6 +81,7 @@ type Props = {
 };
 
 const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
+  const { t } = useLocale();
   const ref = React.useRef<HTMLFormElement>(null);
 
   const transformElementsToSchedule = (elements: HTMLFormControlsCollection): Schedule => {
@@ -299,7 +302,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
               ))
             ) : (
               <Text key={`${day}`} variant="caption">
-                Unavailable
+                {t("unavailable")}
               </Text>
             )}
           </div>
diff --git a/components/ui/Scheduler.tsx b/components/ui/Scheduler.tsx
index abcc4fdd..10a1f750 100644
--- a/components/ui/Scheduler.tsx
+++ b/components/ui/Scheduler.tsx
@@ -6,6 +6,8 @@ import utc from "dayjs/plugin/utc";
 import React, { useEffect, useState } from "react";
 import TimezoneSelect from "react-timezone-select";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 import { WeekdaySelect } from "./WeekdaySelect";
 import SetTimesModal from "./modal/SetTimesModal";
 
@@ -24,6 +26,7 @@ export const Scheduler = ({
   timeZone: selectedTimeZone,
   setTimeZone,
 }: Props) => {
+  const { t } = useLocale();
   const [editSchedule, setEditSchedule] = useState(-1);
   const [dateOverrides, setDateOverrides] = useState([]);
   const [openingHours, setOpeningHours] = useState([]);
@@ -81,7 +84,7 @@ export const Scheduler = ({
             .startOf("day")
             .add(item.startTime, "minutes")
             .format(item.startTime % 60 === 0 ? "ha" : "h:mma")}
-          &nbsp;until&nbsp;
+          &nbsp;{t("until")}&nbsp;
           {dayjs()
             .startOf("day")
             .add(item.endTime, "minutes")
@@ -103,7 +106,7 @@ export const Scheduler = ({
         <div className="w-full">
           <div>
             <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
-              Timezone
+              {t("timezone")}
             </label>
             <div className="mt-1">
               <TimezoneSelect
@@ -120,7 +123,7 @@ export const Scheduler = ({
             ))}
           </ul>
           <button type="button" onClick={addNewSchedule} className="btn-white btn-sm mt-2">
-            Add another
+            {t("add_another")}
           </button>
         </div>
       </div>
diff --git a/components/ui/TableActions.tsx b/components/ui/TableActions.tsx
index a2aff35d..3604568f 100644
--- a/components/ui/TableActions.tsx
+++ b/components/ui/TableActions.tsx
@@ -3,6 +3,7 @@ import { DotsHorizontalIcon } from "@heroicons/react/solid";
 import React, { FC, Fragment } from "react";
 
 import classNames from "@lib/classNames";
+import { useLocale } from "@lib/hooks/useLocale";
 import { SVGComponent } from "@lib/types/SVGComponent";
 
 import Button from "./Button";
@@ -20,6 +21,7 @@ interface Props {
 }
 
 const TableActions: FC<Props> = ({ actions }) => {
+  const { t } = useLocale();
   return (
     <>
       <div className="space-x-2 hidden lg:block">
@@ -41,7 +43,7 @@ const TableActions: FC<Props> = ({ actions }) => {
           <>
             <div>
               <Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
-                <span className="sr-only">Open options</span>
+                <span className="sr-only">{t("open_options")}</span>
                 <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
               </Menu.Button>
             </div>
diff --git a/components/ui/form/CheckedSelect.tsx b/components/ui/form/CheckedSelect.tsx
index a4a8b87c..f7a8d5d0 100644
--- a/components/ui/form/CheckedSelect.tsx
+++ b/components/ui/form/CheckedSelect.tsx
@@ -1,6 +1,8 @@
 import { CheckIcon, XIcon } from "@heroicons/react/outline";
 import React, { ForwardedRef, useEffect, useState } from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";
 
@@ -21,6 +23,7 @@ export type CheckedSelectProps = {
 
 export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: ForwardedRef<unknown>) => {
   const [selectedOptions, setSelectedOptions] = useState<CheckedSelectValue>(props.defaultValue || []);
+  const { t } = useLocale();
 
   useEffect(() => {
     props.onChange(selectedOptions);
@@ -66,12 +69,12 @@ export const CheckedSelect = React.forwardRef((props: CheckedSelectProps, ref: F
           }),
         }}
         name={props.name}
-        placeholder={props.placeholder || "Select..."}
+        placeholder={props.placeholder || t("select")}
         isSearchable={false}
         formatOptionLabel={formatOptionLabel}
         options={options}
         isMulti
-        value={props.placeholder || "Select..."}
+        value={props.placeholder || t("select")}
         onChange={changeHandler}
       />
       {selectedOptions.map((option) => (
diff --git a/components/ui/form/radio-area/Select.tsx b/components/ui/form/radio-area/Select.tsx
index 751e2276..fa261a16 100644
--- a/components/ui/form/radio-area/Select.tsx
+++ b/components/ui/form/radio-area/Select.tsx
@@ -3,6 +3,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/r
 import React from "react";
 
 import classNames from "@lib/classNames";
+import { useLocale } from "@lib/hooks/useLocale";
 
 import { RadioArea, RadioAreaGroup } from "@components/ui/form/radio-area/RadioAreaGroup";
 
@@ -15,10 +16,11 @@ type RadioAreaSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
 };
 
 export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
+  const { t } = useLocale();
   const {
     options,
     disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway
-    placeholder = "Select...",
+    placeholder = t("select"),
   } = props;
 
   const getLabel = (value: string | ReadonlyArray<string> | number) =>
diff --git a/components/ui/modal/SetTimesModal.tsx b/components/ui/modal/SetTimesModal.tsx
index 773a71d9..24b764dd 100644
--- a/components/ui/modal/SetTimesModal.tsx
+++ b/components/ui/modal/SetTimesModal.tsx
@@ -1,7 +1,10 @@
 import { ClockIcon } from "@heroicons/react/outline";
 import { useRef } from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
+
 export default function SetTimesModal(props) {
+  const { t } = useLocale();
   const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
   const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60];
 
@@ -48,18 +51,18 @@ export default function SetTimesModal(props) {
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
-                Change when you are available for bookings
+                {t("change_bookings_availability")}
               </h3>
               <div>
-                <p className="text-sm text-gray-500">Set your work schedule</p>
+                <p className="text-sm text-gray-500">{t("set_work_schedule")}</p>
               </div>
             </div>
           </div>
           <div className="flex mb-4">
-            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">Start time</label>
+            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("start_time")}</label>
             <div>
               <label htmlFor="startHours" className="sr-only">
-                Hours
+                {t("hours")}
               </label>
               <input
                 ref={startHoursRef}
@@ -77,7 +80,7 @@ export default function SetTimesModal(props) {
             <span className="mx-2 pt-1">:</span>
             <div>
               <label htmlFor="startMinutes" className="sr-only">
-                Minutes
+                {t("minutes")}
               </label>
               <input
                 ref={startMinsRef}
@@ -95,10 +98,10 @@ export default function SetTimesModal(props) {
             </div>
           </div>
           <div className="flex">
-            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">End time</label>
+            <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">{t("end_time")}</label>
             <div>
               <label htmlFor="endHours" className="sr-only">
-                Hours
+                {t("hours")}
               </label>
               <input
                 ref={endHoursRef}
@@ -116,7 +119,7 @@ export default function SetTimesModal(props) {
             <span className="mx-2 pt-1">:</span>
             <div>
               <label htmlFor="endMinutes" className="sr-only">
-                Minutes
+                {t("minutes")}
               </label>
               <input
                 ref={endMinsRef}
@@ -135,10 +138,10 @@ export default function SetTimesModal(props) {
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <button onClick={updateStartEndTimesHandler} type="submit" className="btn btn-primary">
-              Save
+              {t("save")}
             </button>
             <button onClick={props.onExit} type="button" className="btn btn-white mr-2">
-              Cancel
+              {t("cancel")}
             </button>
           </div>
         </div>
diff --git a/components/webhook/EditWebhook.tsx b/components/webhook/EditWebhook.tsx
index b773f9fc..5487a5c6 100644
--- a/components/webhook/EditWebhook.tsx
+++ b/components/webhook/EditWebhook.tsx
@@ -1,6 +1,7 @@
 import { ArrowLeftIcon } from "@heroicons/react/solid";
 import { useEffect, useRef, useState } from "react";
 
+import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 import { Webhook } from "@lib/webhook";
 
@@ -8,6 +9,7 @@ import Button from "@components/ui/Button";
 import Switch from "@components/ui/Switch";
 
 export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => void }) {
+  const { t } = useLocale();
   const [bookingCreated, setBookingCreated] = useState(
     props.webhook.eventTriggers.includes("booking_created")
   );
@@ -58,7 +60,7 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
     })
       .then(handleErrors)
       .then(() => {
-        showToast("Webhook updated successfully!", "success");
+        showToast(t("webhook_updated_successfully"), "success");
         setBtnLoading(false);
       });
   };
@@ -74,12 +76,12 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
             loading={btnLoading}
             StartIcon={ArrowLeftIcon}
             onClick={() => props.onCloseEdit()}>
-            Back
+            {t("back")}
           </Button>
         </div>
         <div>
           <div className="pb-5 pr-4 sm:pb-6">
-            <h3 className="text-lg font-bold leading-6 text-gray-900">Manage your webhook</h3>
+            <h3 className="text-lg font-bold leading-6 text-gray-900">{t("manage_your_webhook")}</h3>
           </div>
         </div>
         <hr className="mt-2" />
@@ -87,7 +89,7 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
           <div className="my-4">
             <div className="mb-4">
               <label htmlFor="subUrl" className="block text-sm font-medium text-gray-700">
-                Subscriber Url
+                {t("subscriber_url")}
               </label>
               <input
                 ref={subUrlRef}
@@ -99,11 +101,14 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
                 required
                 className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-sm shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
               />
-              <legend className="block pt-4 mb-2 text-sm font-medium text-gray-700"> Event Triggers </legend>
+              <legend className="block pt-4 mb-2 text-sm font-medium text-gray-700">
+                {" "}
+                {t("event_triggers")}{" "}
+              </legend>
               <div className="p-2 bg-white border border-gray-300 rounded-sm">
                 <div className="flex p-2">
                   <div className="w-10/12">
-                    <h2 className="text-sm text-gray-800">Booking Created</h2>
+                    <h2 className="text-sm text-gray-800">{t("booking_created")}</h2>
                   </div>
                   <div className="flex items-center justify-end w-2/12 text-right">
                     <Switch
@@ -116,7 +121,7 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
                 </div>
                 <div className="flex px-2 py-1">
                   <div className="w-10/12">
-                    <h2 className="text-sm text-gray-800">Booking Rescheduled</h2>
+                    <h2 className="text-sm text-gray-800">{t("booking_rescheduled")}</h2>
                   </div>
                   <div className="flex items-center justify-end w-2/12 text-right">
                     <Switch
@@ -129,7 +134,7 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
                 </div>
                 <div className="flex p-2">
                   <div className="w-10/12">
-                    <h2 className="text-sm text-gray-800">Booking Cancelled</h2>
+                    <h2 className="text-sm text-gray-800">{t("booking_cancelled")}</h2>
                   </div>
                   <div className="flex items-center justify-end w-2/12 text-right">
                     <Switch
@@ -141,11 +146,14 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
                   </div>
                 </div>
               </div>
-              <legend className="block pt-4 mb-2 text-sm font-medium text-gray-700"> Webhook Status </legend>
+              <legend className="block pt-4 mb-2 text-sm font-medium text-gray-700">
+                {" "}
+                {t("webhook_status")}{" "}
+              </legend>
               <div className="p-2 bg-white border border-gray-300 rounded-sm">
                 <div className="flex p-2">
                   <div className="w-10/12">
-                    <h2 className="text-sm text-gray-800">Webhook Enabled</h2>
+                    <h2 className="text-sm text-gray-800">{t("webhook_enabled")}</h2>
                   </div>
                   <div className="flex items-center justify-end w-2/12 text-right">
                     <Switch
@@ -160,7 +168,7 @@ export default function EditTeam(props: { webhook: Webhook; onCloseEdit: () => v
             </div>
             <div className="gap-2 mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
               <Button type="submit" color="primary" className="ml-2" loading={btnLoading}>
-                Save
+                {t("save")}
               </Button>
             </div>
           </div>
diff --git a/components/webhook/WebhookListItem.tsx b/components/webhook/WebhookListItem.tsx
index 4357255a..32818426 100644
--- a/components/webhook/WebhookListItem.tsx
+++ b/components/webhook/WebhookListItem.tsx
@@ -1,5 +1,6 @@
 import { TrashIcon, PencilAltIcon } from "@heroicons/react/outline";
 
+import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 import { Webhook } from "@lib/webhook";
 
@@ -14,6 +15,7 @@ export default function WebhookListItem(props: {
   webhook: Webhook;
   onEditWebhook: () => void;
 }) {
+  const { t } = useLocale();
   const handleErrors = async (resp: Response) => {
     if (!resp.ok) {
       const err = await resp.json();
@@ -31,7 +33,7 @@ export default function WebhookListItem(props: {
     })
       .then(handleErrors)
       .then(() => {
-        showToast("Webhook removed successfully!", "success");
+        showToast(t("webhook_removed_successfully"), "success");
         props.onChange();
       });
   };
@@ -43,7 +45,7 @@ export default function WebhookListItem(props: {
           <span className="flex flex-col space-y-2 text-xs">
             {props.webhook.eventTriggers.map((eventTrigger, ind) => (
               <span key={ind} className="px-1 text-xs text-blue-700 rounded-md w-max bg-blue-50">
-                {eventTrigger}
+                {t(`${eventTrigger}`)}
               </span>
             ))}
           </span>
@@ -56,16 +58,16 @@ export default function WebhookListItem(props: {
         <div className="flex">
           {!props.webhook.active && (
             <span className="self-center h-6 px-3 py-1 text-xs text-red-700 capitalize rounded-md bg-red-50">
-              Disabled
+              {t("disabled")}
             </span>
           )}
           {!!props.webhook.active && (
             <span className="self-center h-6 px-3 py-1 text-xs text-green-700 capitalize rounded-md bg-green-50">
-              Enabled
+              {t("enabled")}
             </span>
           )}
 
-          <Tooltip content="Edit Webhook">
+          <Tooltip content={t("edit_webhook")}>
             <Button
               onClick={() => props.onEditWebhook()}
               color="minimal"
@@ -74,7 +76,7 @@ export default function WebhookListItem(props: {
               className="self-center w-full p-2 ml-4"></Button>
           </Tooltip>
           <Dialog>
-            <Tooltip content="Delete Webhook">
+            <Tooltip content={t("delete_webhook")}>
               <DialogTrigger asChild>
                 <Button
                   onClick={(e) => {
@@ -88,14 +90,13 @@ export default function WebhookListItem(props: {
             </Tooltip>
             <ConfirmationDialogContent
               variety="danger"
-              title="Delete Webhook"
-              confirmBtnText="Yes, delete webhook"
-              cancelBtnText="Cancel"
+              title={t("delete_webhook")}
+              confirmBtnText={t("confirm_delete_webhook")}
+              cancelBtnText={t("cancel")}
               onConfirm={() => {
                 deleteWebhook(props.webhook.id);
               }}>
-              Are you sure you want to delete this webhook? You will no longer receive Cal.com meeting data at
-              a specified URL, in real-time, when an event is scheduled or canceled .
+              {t("delete_webhook_confirmation_message")}
             </ConfirmationDialogContent>
           </Dialog>
         </div>
diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index 9ac67ebd..a39e5eca 100644
--- a/public/static/locales/en/common.json
+++ b/public/static/locales/en/common.json
@@ -1,5 +1,46 @@
 {
+  "delete_webhook_confirmation_message": "Are you sure you want to delete this webhook? You will no longer receive Cal.com meeting data at a specified URL, in real-time, when an event is scheduled or canceled.",
+  "confirm_delete_webhook": "Yes, delete webhook",
+  "edit_webhook": "Edit Webhook",
+  "delete_webhook": "Delete Webhook",
+  "webhook_status": "Webhook Status",
+  "webhook_enabled": "Webhook Enabled",
+  "manage_your_webhook": "Manage your webhook",
+  "webhook_updated_successfully": "Webhook updated successfully!",
+  "webhook_removed_successfully": "Webhook removed successfully!",
+  "dismiss": "Dismiss",
+  "add_to_homescreen": "Add this app to your home screen for faster access and improved experience.",
+  "upcoming": "Upcoming",
+  "past": "Past",
+  "choose_a_file": "Choose a file...",
+  "upload_image": "Upload image",
+  "upload_target": "Upload {{target}}",
+  "no_target": "No {{target}}",
+  "slide_zoom_drag_instructions": "Slide to zoom, drag to reposition",
+  "view_notifications": "View notifications",
+  "view_public_page": "View public page",
+  "sign_out": "Sign out",
+  "add_another": "Add another",
+  "until": "until",
+  "powered_by": "powered by",
+  "unavailable": "Unavailable",
+  "set_work_schedule": "Set your work schedule",
+  "change_bookings_availability": "Change when you are available for bookings",
+  "select": "Select...",
+  "2fa_confirm_current_password": "Confirm your current password to get started.",
+  "2fa_scan_image_or_use_code": "Scan the image below with the authenticator app on your phone or manually enter the text code instead.",
+  "text": "Text",
+  "multiline_text": "Multiline Text",
+  "number": "Number",
+  "checkbox": "Checkbox",
+  "is_required": "Is required",
+  "input_type": "Input type",
+  "rejected": "Rejected",
+  "unconfirmed": "Unconfirmed",
+  "guests": "Guests",
+  "web_conferencing_details_to_follow": "Web conferencing details to follow.",
   "the_username": "The username",
+  "username": "Username",
   "is_still_available": "is still available.",
   "documentation": "Documentation",
   "documentation_description": "Learn how to integrate our tools with your app",
@@ -8,6 +49,7 @@
   "blog": "Blog",
   "blog_description": "Read our latest news and articles",
   "join_our_community": "Join our community",
+  "join_our_slack": "Join our Slack",
   "claim_username_and_schedule_events": "Claim your username and schedule events",
   "popular_pages": "Popular pages",
   "register_now": "Register now",
@@ -31,6 +73,7 @@
   "incorrect_2fa_code": "Two-factor code is incorrect.",
   "no_account_exists": "No account exists matching that email address.",
   "2fa_enabled_instructions": "Two-factor authentication enabled. Please enter the six-digit code from your authenticator app.",
+  "2fa_enter_six_digit_code": "Enter the six-digit code from your authenticator app below.",
   "create_an_account": "Create an account",
   "dont_have_an_account": "Don't have an account?",
   "2fa_code": "Two-Factor Code",
@@ -139,7 +182,7 @@
   "booking_cancelled": "Booking Cancelled",
   "booking_rescheduled": "Booking Rescheduled",
   "booking_created": "Booking Created",
-  "event_triggers": "Event triggers",
+  "event_triggers": "Event Triggers",
   "subscriber_url": "Subscriber Url",
   "create_new_webhook": "Create a new webhook",
   "create_new_webhook_to_account": "Create a new webhook to your account",