hunk.code_window:                               )}
                                 {!isManagedEventType && (
                                   <DropdownMenuItem className="outline-none">
                                     <EventTypeEmbedButton
                                       namespace={type.slug}
                                       as={DropdownItem}
                                       type="button"
                                       StartIcon={Code}
  
hunk.labels: keep keep keep keep replace keep keep keep
hunk.after_edit:                                     namespace=""
  
hunk.file_path: apps/web/modules/event-types/views/event-types-listing-view.tsx
hunk.type: replace
file: import { useRouter } from "next/navigation";
  import { useState } from "react";
  import { useForm } from "react-hook-form";
  import { Toaster } from "react-hot-toast";
  
  import { useLocale } from "@calcom/lib/hooks/useLocale";
  import { Alert, Button, Form, TextField } from "@calcom/ui";
  import { Plus, Trash } from "@calcom/ui/components/icon";
  
  export default function ICSFeedSetup() {
    const { t } = useLocale();
    const router = useRouter();
    const form = useForm({
      defaultValues: {},
    });
  
    const [urls, setUrls] = useState<string[]>([""]);
    const [errorMessage, setErrorMessage] = useState("");
    const [errorActionUrl, setErrorActionUrl] = useState("");
  
    return (
      <div className="bg-emphasis flex h-screen">
        <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
          <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
            <div>
              {/* eslint-disable @next/next/no-img-element */}
              <img src="/api/app-store/ics-feed/icon.svg" alt="ICS Feed" className="h-12 w-12 max-w-2xl" />
            </div>
            <div className="flex w-10/12 flex-col">
              <h1 className="text-default">{t("connect_ics_feed")}</h1>
              <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
              <div className="my-2 mt-3">
                <Form
                  form={form}
                  handleSubmit={async (_) => {
                    setErrorMessage("");
                    const res = await fetch("/api/integrations/ics-feed/add", {
                      method: "POST",
                      body: JSON.stringify({ urls }),
                      headers: {
                        "Content-Type": "application/json",
                      },
                    });
                    const json = await res.json();
                    if (!res.ok) {
                      setErrorMessage(json?.message || t("something_went_wrong"));
                      if (json.actionUrl) {
                        setErrorActionUrl(json.actionUrl);
                      }
                    } else {
                      router.push(json.url);
                    }
                  }}>
                  <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
                    {urls.map((url, i) => (
                      <div key={i} className="flex w-full items-center gap-2">
                        <TextField
                          required
                          type="text"
                          label={t("calendar_url")}
                          value={url}
                          containerClassName={`w-full ${i === 0 ? "mr-6" : ""}`}
                          onChange={(e) => {
                            const newVal = e.target.value as string;
                            setUrls((urls) => urls.map((x, ii) => (ii === i ? newVal : x)));
                          }}
                          placeholder="https://example.com/calendar.ics"
                        />
                        {i !== 0 ? (
                          <button
                            type="button"
                            className="mb-2 h-min text-sm"
                            onClick={() => setUrls((urls) => urls.filter((_, ii) => i !== ii))}>
                            <Trash size={16} />
                          </button>
                        ) : null}
                      </div>
                    ))}
                  </fieldset>
  
                  <button
                    className="text-sm"
                    type="button"
                    onClick={() => {
                      setUrls((urls) => urls.concat(""));
                    }}>
                    {t("add")} <Plus size={16} />
                  </button>
  
                  {errorMessage && (
                    <Alert
                      severity="error"
                      title={errorMessage}
                      actions={
                        errorActionUrl !== "" ? (
                          <Button
                            href={errorActionUrl}
                            color="secondary"
                            target="_blank"
                            className="ml-5 w-32 !p-5">
                            Go to Admin
                          </Button>
                        ) : undefined
                      }
                      className="my-4"
                    />
                  )}
                  <div className="mt-5 justify-end space-x-2 rtl:space-x-reverse sm:mt-4 sm:flex">
                    <Button type="button" color="secondary" onClick={() => router.back()}>
                      {t("cancel")}
                    </Button>
                    <Button type="submit" loading={form.formState.isSubmitting}>
                      {t("save")}
                    </Button>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </div>
        <Toaster position="bottom-right" />
      </div>
    );
  }
  