hunk.code_window: import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
   export const appDataSchema = eventTypeAppCardZod.merge(
     z.object({
       // FIXME: Due to some reason autogenerated zod schema at prisma/zod/eventtype.ts fails typecheck on using `.default()`. It somehow thinks that trackingId can be undefined
       // z.lazy has something to do with it. Figure it out later.
       trackingId: z.string().default("") as unknown as z.ZodString,
     })
   );
  
hunk.labels: keep keep keep keep keep replace replace replace keep keep keep
hunk.after_edit:     trackingId: z.string().default("").optional(),
  
hunk.file_path: packages/app-store/plausible/zod.ts
hunk.type: replace
file: import type { FormValues } from "pages/event-types/[type]";
  import { useState } from "react";
  import { useFormContext } from "react-hook-form";
  
  import { useLocale } from "@calcom/lib/hooks/useLocale";
  import { Frequency } from "@calcom/prisma/zod-utils";
  import type { RecurringEvent } from "@calcom/types/Calendar";
  import { Alert, Select, SettingsToggle } from "@calcom/ui";
  
  type RecurringEventControllerProps = {
    recurringEvent: RecurringEvent | null;
    paymentEnabled: boolean;
  };
  
  export default function RecurringEventController({
    recurringEvent,
    paymentEnabled,
  }: RecurringEventControllerProps) {
    const { t } = useLocale();
    const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
    const formMethods = useFormContext<FormValues>();
  
    /* Just yearly-0, monthly-1 and weekly-2 */
    const recurringEventFreqOptions = Object.entries(Frequency)
      .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
      .map(([key, value]) => ({
        label: t(`${key.toString().toLowerCase()}`, { count: recurringEventState?.interval }),
        value: value.toString(),
      }));
  
    return (
      <div className="block items-start sm:flex">
        <div className={!paymentEnabled ? "w-full" : ""}>
          {paymentEnabled ? (
            <Alert severity="warning" title={t("warning_payment_recurring_event")} />
          ) : (
            <>
              <SettingsToggle
                title={t("recurring_event")}
                description={t("recurring_event_description")}
                checked={recurringEventState !== null}
                data-testid="recurring-event-check"
                onCheckedChange={(e) => {
                  if (!e) {
                    formMethods.setValue("recurringEvent", null);
                    setRecurringEventState(null);
                  } else {
                    const newVal = recurringEvent || {
                      interval: 1,
                      count: 12,
                      freq: Frequency.WEEKLY,
                    };
                    formMethods.setValue("recurringEvent", newVal);
                    setRecurringEventState(newVal);
                  }
                }}>
                {recurringEventState && (
                  <div data-testid="recurring-event-collapsible" className="text-sm">
                    <div className="flex items-center">
                      <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                      <input
                        type="number"
                        min="1"
                        max="20"
                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                        defaultValue={recurringEventState.interval}
                        onChange={(event) => {
                          const newVal = {
                            ...recurringEventState,
                            interval: parseInt(event?.target.value),
                          };
                          formMethods.setValue("recurringEvent", newVal);
                          setRecurringEventState(newVal);
                        }}
                      />
                      <Select
                        options={recurringEventFreqOptions}
                        value={recurringEventFreqOptions[recurringEventState.freq]}
                        isSearchable={false}
                        className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
                        onChange={(event) => {
                          const newVal = {
                            ...recurringEventState,
                            freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
                          };
                          formMethods.setValue("recurringEvent", newVal);
                          setRecurringEventState(newVal);
                        }}
                      />
                    </div>
                    <div className="mt-4 flex items-center">
                      <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                      <input
                        type="number"
                        min="1"
                        max="20"
                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                        defaultValue={recurringEventState.count}
                        onChange={(event) => {
                          const newVal = {
                            ...recurringEventState,
                            count: parseInt(event?.target.value),
                          };
                          formMethods.setValue("recurringEvent", newVal);
                          setRecurringEventState(newVal);
                        }}
                      />
                      <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
                        {t("events", {
                          count: recurringEventState.count,
                        })}
                      </p>
                    </div>
                  </div>
                )}
              </SettingsToggle>
            </>
          )}
        </div>
      </div>
    );
  }
  