first commit

calcom/packages/features/ee/dsync/components/CreateDirectory.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  SelectField,
+  Form,
+  TextField,
+  DialogFooter,
+  showToast,
+} from "@calcom/ui";
+
+import { directoryProviders } from "../lib/directoryProviders";
+
+const defaultValues = {
+  name: "",
+  provider: directoryProviders[0].value,
+};
+
+const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+  const form = useForm({ defaultValues });
+  const [openModal, setOpenModal] = useState(false);
+
+  const mutation = trpc.viewer.dsync.create.useMutation({
+    async onSuccess() {
+      showToast(t("directory_sync_created"), "success");
+      await utils.viewer.dsync.invalidate();
+      setOpenModal(false);
+    },
+  });
+
+  return (
+    <>
+      <div className="flex flex-col sm:flex-row">
+        <div>
+          <p className="text-default text-sm font-normal leading-6 dark:text-gray-300">
+            {t("directory_sync_title")}
+          </p>
+        </div>
+        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
+          <Button color="primary" onClick={() => setOpenModal(true)}>
+            {t("configure")}
+          </Button>
+        </div>
+      </div>
+
+      <Dialog open={openModal} onOpenChange={setOpenModal}>
+        <DialogContent type="creation">
+          <Form
+            form={form}
+            handleSubmit={(values) => {
+              mutation.mutate({
+                ...values,
+                organizationId: orgId,
+              });
+            }}>
+            <div className="mb-5 mt-1">
+              <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
+                {t("directory_sync_configure")}
+              </h2>
+              <p className="mt-1 text-sm text-gray-500">{t("directory_sync_configure_description")}</p>
+            </div>
+            <fieldset className="space-y-6 py-2">
+              <Controller
+                control={form.control}
+                name="name"
+                render={({ field: { value } }) => (
+                  <TextField
+                    name="title"
+                    label={t("directory_name")}
+                    value={value}
+                    onChange={(e) => {
+                      form.setValue("name", e?.target.value);
+                    }}
+                    type="text"
+                    required
+                  />
+                )}
+              />
+              <Controller
+                control={form.control}
+                name="provider"
+                render={() => (
+                  <SelectField
+                    name="provider"
+                    label={t("directory_provider")}
+                    options={directoryProviders}
+                    placeholder={t("choose_directory_provider")}
+                    defaultValue={directoryProviders[0]}
+                    onChange={(option) => {
+                      if (option) {
+                        form.setValue("provider", option.value);
+                      }
+                    }}
+                  />
+                )}
+              />
+            </fieldset>
+            <DialogFooter>
+              <Button
+                type="button"
+                color="secondary"
+                onClick={() => {
+                  setOpenModal(false);
+                }}
+                tabIndex={-1}>
+                {t("cancel")}
+              </Button>
+              <Button type="submit" loading={form.formState.isSubmitting || mutation.isPending}>
+                {t("save")}
+              </Button>
+            </DialogFooter>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default CreateDirectory;