feat: CustomEventType placeholder and API fixes (#446)

* feat: add optional placeholder for text/multi-line text custom inputs on event types

* fix: delete associations of event type first

* fix: remove unneeded check

* fix: minor tweak

Co-authored-by: mihaic195 <mihai@sortlist.com>
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

pages/[user]/book.tsx

@@ -286,7 +286,7 @@ export default function Book(props: any): JSX.Element {
                               required={input.required}
                               rows={3}
                               className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
-                              placeholder=""
+                              placeholder={input.placeholder}
                             />
                           )}
                           {input.type === EventTypeCustomInputType.TEXT && (
@@ -296,7 +296,7 @@ export default function Book(props: any): JSX.Element {
                               id={"custom_" + input.id}
                               required={input.required}
                               className="shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md"
-                              placeholder=""
+                              placeholder={input.placeholder}
                             />
                           )}
                           {input.type === EventTypeCustomInputType.NUMBER && (

pages/api/availability/eventtype.ts

@@ -35,6 +35,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                   type: input.type,
                   label: input.label,
                   required: input.required,
+                  placeholder: input.placeholder,
                 })),
             },
             update: req.body.customInputs
@@ -44,6 +45,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                   type: input.type,
                   label: input.label,
                   required: input.required,
+                  placeholder: input.placeholder,
                 },
                 where: {
                   id: input.id,
@@ -107,6 +109,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 
   if (req.method == "DELETE") {
+    // Delete associations first
+    await prisma.eventTypeCustomInput.deleteMany({
+      where: {
+        eventTypeId: req.body.id,
+      },
+    });
+
     await prisma.eventType.delete({
       where: {
         id: req.body.id,

pages/event-types/[type].tsx

@@ -347,12 +347,14 @@ export default function EventTypePage({
 
     const customInput: EventTypeCustomInput = {
       label: e.target.label.value,
+      placeholder: e.target.placeholder?.value,
       required: e.target.required.checked,
       type: e.target.type.value,
     };
 
     if (selectedCustomInput) {
       selectedCustomInput.label = customInput.label;
+      selectedCustomInput.placeholder = customInput.placeholder;
       selectedCustomInput.required = customInput.required;
       selectedCustomInput.type = customInput.type;
     } else {
@@ -645,6 +647,13 @@ export default function EventTypePage({
                                       <div>
                                         <span className="ml-2 text-sm">Label: {customInput.label}</span>
                                       </div>
+                                      {customInput.placeholder && (
+                                        <div>
+                                          <span className="ml-2 text-sm">
+                                            Placeholder: {customInput.placeholder}
+                                          </span>
+                                        </div>
+                                      )}
                                       <div>
                                         <span className="ml-2 text-sm">Type: {customInput.type}</span>
                                       </div>
@@ -1015,6 +1024,23 @@ export default function EventTypePage({
                       />
                     </div>
                   </div>
+                  {(selectedInputOption.value === EventTypeCustomInputType.TEXT ||
+                    selectedInputOption.value === EventTypeCustomInputType.TEXTLONG) && (
+                    <div className="mb-2">
+                      <label htmlFor="placeholder" className="block text-sm font-medium text-gray-700">
+                        Placeholder
+                      </label>
+                      <div className="mt-1">
+                        <input
+                          type="text"
+                          name="placeholder"
+                          id="placeholder"
+                          className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-sm"
+                          defaultValue={selectedCustomInput?.placeholder}
+                        />
+                      </div>
+                    </div>
+                  )}
                   <div className="flex items-center h-5">
                     <input
                       id="required"

prisma/migrations/20210820130519_add_placeholder_to_custom_event_types/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventTypeCustomInput" ADD COLUMN     "placeholder" TEXT NOT NULL DEFAULT E'';

prisma/schema.prisma

@@ -177,6 +177,7 @@ model EventTypeCustomInput {
   label       String
   type        EventTypeCustomInputType
   required    Boolean
+  placeholder String @default("")
 }
 
 model ResetPasswordRequest {