Fixing admin wizard translations (#6038)

packages/ui/v2/core/Stepper.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
 type DefaultStep = {
   title: string;
 };
@@ -10,13 +12,14 @@ function Stepper<T extends DefaultStep>(props: {
   steps: T[];
   disableSteps?: boolean;
 }) {
+  const { t } = useLocale();
   const { href, steps } = props;
   return (
     <>
       {steps.length > 1 && (
         <nav className="flex items-center justify-center" aria-label="Progress">
           <p className="text-sm font-medium">
-            Step {props.step} of {steps.length}
+            {t("current_step_of_total", { currentStep: props.step, maxSteps: steps.length })}
           </p>
           <ol role="list" className="ml-8 flex items-center space-x-5">
             {steps.map((mapStep, index) => (

packages/ui/v2/core/WizardForm.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Button, Stepper } from "../..";
 
@@ -19,6 +20,7 @@ function WizardForm<T extends DefaultStep>(props: {
   containerClassname?: string;
 }) {
   const { href, steps } = props;
+  const { t } = useLocale();
   const router = useRouter();
   const step = parseInt((router.query.step as string) || "1");
   const currentStep = steps[step - 1];
@@ -51,7 +53,7 @@ function WizardForm<T extends DefaultStep>(props: {
                     onClick={() => {
                       setStep(step - 1);
                     }}>
-                    Back
+                    {t("prev_step")}
                   </Button>
                 )}
 
@@ -65,7 +67,7 @@ function WizardForm<T extends DefaultStep>(props: {
                   onClick={() => {
                     setStep(step + 1);
                   }}>
-                  {step < steps.length ? "Next" : "Finish"}
+                  {step < steps.length ? t("next_step_text") : t("finish")}
                 </Button>
               </div>
             )}