chore: add i18n in routing form pages (#7193)

* chore: add i18n in routing form pages

* use existing string

* add strings to en/common.json file

* address comments

Author: saideepesh000

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

@@ -1599,5 +1599,25 @@
   "booking_with_payment_cancelled_already_paid": "A refund for this booking payment it's on the way.",
   "booking_with_payment_cancelled_refunded": "This booking payment has been refunded.",
   "booking_confirmation_failed": "Booking confirmation failed",
-  "get_started_zapier_templates": "Get started with Zapier templates"
+  "get_started_zapier_templates": "Get started with Zapier templates",
+  "a_routing_form": "A Routing Form",
+  "form_description_placeholder": "Form Description",
+  "keep_me_connected_with_form": "Keep me connected with the form",
+  "fields_in_form_duplicated":"Any changes in Router and Fields of the form being duplicated, would reflect in the duplicate.",
+  "form_deleted": "Form deleted",
+  "delete_form": "Delete Form",
+  "delete_form_action": "Yes, delete Form",
+  "delete_form_confirmation":"Are you sure you want to delete this form? Anyone who you've shared the link with will no longer be able to book using it. Also, all associated responses would be deleted.",
+  "typeform_redirect_url_copied": "Typeform Redirect URL copied! You can go and set the URL in Typeform form.",
+  "modifications_in_fields_warning": "Modifications in fields and routes of following forms will be reflected in this form.",
+  "connected_forms": "Connected Forms",
+  "form_modifications_warning": "Following forms would be affected when you modify fields or routes here.",
+  "responses_collection_waiting_description": "Wait for some time for responses to be collected. You can go and submit the form yourself as well.",
+  "this_is_what_your_users_would_see":"This is what your users would see",
+  "identifies_name_field": "Identifies field by this name.",
+  "add_1_option_per_line": "Add 1 option per line",
+  "select_a_router": "Select a router",
+  "add_a_new_route": "Add a new Route",
+  "no_responses_yet": "No responses yet",
+  "this_will_be_the_placeholder": "This will be the placeholder"
 }

packages/app-store/ee/routing-forms/components/FormActions.tsx

@@ -69,7 +69,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
       router.push(`${appUrl}/form-edit/${variables.id}`);
     },
     onError: () => {
-      showToast(`Something went wrong`, "error");
+      showToast(t("something_went_wrong"), "error");
     },
     onSettled: () => {
       utils.viewer.appRoutingForms.forms.invalidate();
@@ -109,14 +109,14 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
             });
           }}>
           <div className="mt-3 space-y-4">
-            <TextField label={t("title")} required placeholder="A Routing Form" {...register("name")} />
+            <TextField label={t("title")} required placeholder={t("a_routing_form")} {...register("name")} />
             <div className="mb-5">
               <TextAreaField
                 id="description"
                 label={t("description")}
                 {...register("description")}
                 data-testid="description"
-                placeholder="Form Description"
+                placeholder={t("form_description_placeholder")}
               />
             </div>
             {action === "duplicate" && (
@@ -125,8 +125,8 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
                 render={({ field: { value, onChange } }) => {
                   return (
                     <SettingsToggle
-                      title="Keep me connected with the form"
-                      description="Any changes in Router and Fields of the form being duplicated, would reflect in the duplicate."
+                      title={t("keep_me_connected_with_form")}
+                      description={t("fields_in_form_duplicated")}
                       checked={value}
                       onCheckedChange={(checked) => {
                         onChange(checked);
@@ -184,6 +184,7 @@ function Dialogs({
 }) {
   const utils = trpc.useContext();
   const router = useRouter();
+  const { t } = useLocale();
   const deleteMutation = trpc.viewer.appRoutingForms.deleteForm.useMutation({
     onMutate: async ({ id: formId }) => {
       await utils.viewer.appRoutingForms.forms.cancel();
@@ -195,7 +196,7 @@ function Dialogs({
       return { previousValue };
     },
     onSuccess: () => {
-      showToast("Form deleted", "success");
+      showToast(t("form_deleted"), "success");
       setDeleteDialogOpen(false);
       router.replace(`${appUrl}/forms`);
     },
@@ -207,7 +208,7 @@ function Dialogs({
       if (context?.previousValue) {
         utils.viewer.appRoutingForms.forms.setData(undefined, context.previousValue);
       }
-      showToast(err.message || "Something went wrong", "error");
+      showToast(err.message || t("something_went_wrong"), "error");
     },
   });
   return (
@@ -217,9 +218,9 @@ function Dialogs({
         <ConfirmationDialogContent
           isLoading={deleteMutation.isLoading}
           variety="danger"
-          title="Delete Form"
-          confirmBtnText="Yes, delete Form"
-          loadingText="Yes, delete Form"
+          title={t("delete_form")}
+          confirmBtn={t("delete_form_action")}
+          loadingText={t("delete_form_action")}
           onConfirm={(e) => {
             if (!deleteDialogFormId) {
               return;
@@ -229,8 +230,7 @@ function Dialogs({
               id: deleteDialogFormId,
             });
           }}>
-          Are you sure you want to delete this form? Anyone who you&apos;ve shared the link with will no
-          longer be able to book using it. Also, all associated responses would be deleted.
+          {t("delete_form_confirmation")}
         </ConfirmationDialogContent>
       </Dialog>
       <NewFormDialog appUrl={appUrl} />
@@ -255,6 +255,7 @@ const actionsCtx = createContext({
 export function FormActionsProvider({ appUrl, children }: { appUrl: string; children: React.ReactNode }) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleteDialogFormId, setDeleteDialogFormId] = useState<string | null>(null);
+  const { t } = useLocale();
   const utils = trpc.useContext();
 
   const toggleMutation = trpc.viewer.appRoutingForms.formMutation.useMutation({
@@ -279,7 +280,7 @@ export function FormActionsProvider({ appUrl, children }: { appUrl: string; chil
       if (context?.previousValue) {
         utils.viewer.appRoutingForms.forms.setData(undefined, context.previousValue);
       }
-      showToast("Something went wrong", "error");
+      showToast(t("something_went_wrong"), "error");
     },
   });
 
@@ -401,7 +402,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     copyRedirectUrl: {
       onClick: () => {
         navigator.clipboard.writeText(redirectUrl);
-        showToast("Typeform Redirect URL copied! You can go and set the URL in Typeform form.", "success");
+        showToast(t("typeform_redirect_url_copied"), "success");
       },
     },
     toggle: {

packages/app-store/ee/routing-forms/components/SingleForm.tsx

@@ -278,14 +278,14 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                   <TextField
                     type="text"
                     containerClassName="mb-6"
-                    placeholder="Title"
+                    placeholder={t("title")}
                     {...hookForm.register("name")}
                   />
                   <TextAreaField
                     rows={3}
                     id="description"
                     data-testid="description"
-                    placeholder="Form Description"
+                    placeholder={t("form_description_placeholder")}
                     {...hookForm.register("description")}
                     defaultValue={form.description || ""}
                   />
@@ -311,7 +311,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                     <div className="mt-6">
                       <div className="mb-2 block text-sm font-semibold leading-none text-black ">Routers</div>
                       <p className="-mt-1 text-xs leading-normal text-gray-600">
-                        Modifications in fields and routes of following forms will be reflected in this form.
+                        {t("modifications_in_fields_warning")}
                       </p>
                       <div className="flex">
                         {form.routers.map((router) => {
@@ -330,10 +330,10 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                   {connectedForms?.length ? (
                     <div className="mt-6">
                       <div className="mb-2 block text-sm font-semibold leading-none text-black ">
-                        Connected Forms
+                        {t("connected_forms")}
                       </div>
                       <p className="-mt-1 text-xs leading-normal text-gray-600">
-                        Following forms would be affected when you modify fields or routes here
+                        {t("form_modifications_warning")}
                       </p>
                       <div className="flex">
                         {connectedForms.map((router) => {
@@ -362,8 +362,8 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                       <Alert
                         className="mt-6"
                         severity="neutral"
-                        title="No responses yet"
-                        message="Wait for some time for responses to be collected. You can go and submit the form yourself as well."
+                        title={t("no_responses_yet")}
+                        message={t("responses_collection_waiting_description")}
                       />
                     </>
                   )}

packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx

@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from "uuid";
 
 import Shell from "@calcom/features/shell/Shell";
 import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   BooleanToggleGroupField,
   Button,
@@ -85,6 +86,7 @@ function Field({
   appUrl: string;
 }) {
   const [identifier, _setIdentifier] = useState(hookForm.getValues(`${hookFieldNamespace}.identifier`));
+  const { t } = useLocale();
 
   const setUserChangedIdentifier = (val: string) => {
     _setIdentifier(val);
@@ -118,7 +120,7 @@ function Field({
             <TextField
               disabled={!!router}
               label="Label"
-              placeholder="This is what your users would see"
+              placeholder={t("this_is_what_your_users_would_see")}
               /**
                * This is a bit of a hack to make sure that for routerField, label is shown from there.
                * For other fields, value property is used because it exists and would take precedence
@@ -134,7 +136,7 @@ function Field({
               label="Identifier"
               name="identifier"
               required
-              placeholder="Identifies field by this name."
+              placeholder={t("identifies_name_field")}
               value={identifier}
               defaultValue={routerField?.identifier || routerField?.label}
               onChange={(e) => setUserChangedIdentifier(e.target.value)}
@@ -143,8 +145,8 @@ function Field({
           <div className="mb-6 w-full">
             <TextField
               disabled={!!router}
-              label="Placeholder"
-              placeholder="This will be the placeholder"
+              label={t("placeholder")}
+              placeholder={t("this_will_be_the_placeholder")}
               defaultValue={routerField?.placeholder}
               {...hookForm.register(`${hookFieldNamespace}.placeholder`)}
             />
@@ -182,7 +184,7 @@ function Field({
                   rows={3}
                   label="Options"
                   defaultValue={routerField?.selectText}
-                  placeholder="Add 1 option per line"
+                  placeholder={t("add_1_option_per_line")}
                   {...hookForm.register(`${hookFieldNamespace}.selectText`)}
                 />
               </div>
@@ -198,7 +200,7 @@ function Field({
                 return (
                   <BooleanToggleGroupField
                     disabled={!!router}
-                    label="Required"
+                    label={t("required")}
                     value={value}
                     onValueChange={onChange}
                   />

packages/app-store/ee/routing-forms/pages/route-builder/[...appPages].tsx

@@ -6,6 +6,7 @@ import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
 import type { JsonTree, ImmutableTree, BuilderProps } from "react-awesome-query-builder";
 
 import Shell from "@calcom/features/shell/Shell";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import {
@@ -286,6 +287,7 @@ const Routes = ({
   appUrl: string;
 }) => {
   const { routes: serializedRoutes } = form;
+  const { t } = useLocale();
 
   const config = getQueryBuilderConfig(form);
   const [routes, setRoutes] = useState(() => {
@@ -446,10 +448,10 @@ const Routes = ({
           );
         })}
         <SelectField
-          placeholder="Select a router"
+          placeholder={t("select_a_router")}
           containerClassName="mb-6 data-testid-select-router"
           isOptionDisabled={(option) => !!option.isDisabled}
-          label="Add a new Route"
+          label={t("add_a_new_route")}
           options={routerOptions}
           key={mainRoutes.length}
           onChange={(option) => {