Makes WizardForm translation agnostic (#6111)

apps/web/pages/auth/setup/index.tsx

@@ -35,7 +35,14 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   return (
     <>
       <main className="flex items-center bg-gray-100 print:h-full">
-        <WizardForm href="/auth/setup" steps={steps} />
+        <WizardForm
+          href="/auth/setup"
+          steps={steps}
+          nextLabel={t("next_step_text")}
+          finishLabel={t("finish")}
+          prevLabel={t("prev_step")}
+          stepLabel={(currentStep, maxSteps) => t("current_step_of_total", { currentStep, maxSteps })}
+        />
       </main>
     </>
   );

packages/ui/v2/core/Stepper.tsx

@@ -1,8 +1,5 @@
-import { TFunction } from "next-i18next";
 import Link from "next/link";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
 type DefaultStep = {
   title: string;
 };
@@ -12,20 +9,18 @@ function Stepper<T extends DefaultStep>(props: {
   step: number;
   steps: T[];
   disableSteps?: boolean;
-  t?: TFunction;
+  stepLabel?: (currentStep: number, totalSteps: number) => string;
 }) {
-  let { t } = useLocale();
+  const {
-  if (props.t) {
+    href,
-    t = props.t;
+    steps,
-  }
+    stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
-  const { href, steps } = props;
+  } = props;
   return (
     <>
       {steps.length > 1 && (
         <nav className="flex items-center justify-center" aria-label="Progress">
-          <p className="text-sm font-medium">
+          <p className="text-sm font-medium">{stepLabel(props.step, steps.length)}</p>
-            {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) => (
               <li key={mapStep.title}>

packages/ui/v2/core/WizardForm.tsx

@@ -1,8 +1,7 @@
-import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
+import { ComponentProps } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Button, Stepper } from "../..";
 
@@ -19,13 +18,12 @@ function WizardForm<T extends DefaultStep>(props: {
   steps: T[];
   disableNavigation?: boolean;
   containerClassname?: string;
-  t?: TFunction;
+  prevLabel?: string;
+  nextLabel?: string;
+  finishLabel?: string;
+  stepLabel?: ComponentProps<typeof Stepper>["stepLabel"];
 }) {
-  const { href, steps } = props;
+  const { href, steps, nextLabel = "Next", finishLabel = "Finish", prevLabel = "Back", stepLabel } = props;
-  let { t } = useLocale();
-  if (props.t) {
-    t = props.t;
-  }
   const router = useRouter();
   const step = parseInt((router.query.step as string) || "1");
   const currentStep = steps[step - 1];
@@ -58,7 +56,7 @@ function WizardForm<T extends DefaultStep>(props: {
                     onClick={() => {
                       setStep(step - 1);
                     }}>
-                    {t("prev_step")}
+                    {prevLabel}
                   </Button>
                 )}
 
@@ -69,7 +67,7 @@ function WizardForm<T extends DefaultStep>(props: {
                   color="primary"
                   form={`wizard-step-${step}`}
                   className="relative ml-2">
-                  {step < steps.length ? t("next_step_text") : t("finish")}
+                  {step < steps.length ? nextLabel : finishLabel}
                 </Button>
               </div>
             )}
@@ -78,7 +76,7 @@ function WizardForm<T extends DefaultStep>(props: {
       </div>
       {!props.disableNavigation && (
         <div className="print:hidden">
-          <Stepper href={href} step={step} steps={steps} disableSteps t={t} />
+          <Stepper href={href} step={step} steps={steps} disableSteps stepLabel={stepLabel} />
         </div>
       )}
     </div>