feat: add date picker into modal form

Author: ivke995

apps/website/src/components/DatePicker.astro

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import classnames from "classnames";
+
+type Props = {
+  labelProps?: HTMLAttributes<"label">;
+  label?: string;
+  errorText?: string;
+  classNames?: string;
+  onDark?: boolean;
+  inputProps: HTMLAttributes<"input"> & { type?: "date" | string };
+};
+
+const { classNames, labelProps, label = "", onDark } = Astro.props;
+---
+
+<div
+  data-field
+  class={classnames(
+    `group relative z-[2] flex min-h-[74px] overflow-hidden pt-6
+     rounded-[6px]
+     after:absolute after:top-6 after:ml-[1px] after:h-[46px]
+     after:w-[calc(100%-2px)] after:rounded-[6px] after:bg-[#F6FCFD]`,
+    classNames,
+  )}
+>
+  <input
+    {...Astro.props.inputProps}
+    type="date"
+    id="date-picker"
+    class="peer/input text-transparent relative z-[4] ml-[1px] h-[46px] w-[calc(100%-2px)]
+           rounded-[6px] border border-transparent bg-transparent px-4 py-2.5
+           focus:border-transparent focus:outline-0 focus:ring-0
+           focus:text-secondary valid:text-secondary"
+  />
+
+  <label
+    {...labelProps}
+    class={classnames(
+      `
+      text-xs
+      min-[375px]:text-sm
+      absolute
+      top-0
+      translate-y-[37px]
+      transition-transform
+      translate-x-[17px]
+      z-[3]
+      peer-focus/input:translate-y-0
+      peer-focus/input:translate-x-0
+      peer-valid/input:translate-0
+      `,
+      { "text-secondary": !onDark, "text-neutral-50": onDark },
+    )}
+  >
+    <span>{label}</span>
+  </label>
+
+  <div
+    class={classnames(
+      `
+      absolute top-[23px] flex h-[48px] w-full items-center justify-center overflow-hidden rounded-[6px]
+      bg-[#424c6d50]
+      after:h-5 after:w-5 after:scale-0 after:rounded-full after:transition-transform after:duration-[400ms]
+      peer-focus/input:after:scale-[25]
+      peer-[&:not(:focus):invalid]/input:data-[has-value=true]:bg-red-500
+      `,
+      { "after:bg-[#67a807]": !onDark, "after:bg-neutral-50": onDark },
+    )}
+  >
+  </div>
+</div>
+
+<script>
+
+</script>

apps/website/src/components/Field.astro

@@ -121,7 +121,7 @@ const { classNames, labelProps, label, errorText, onDark } = Astro.props;
   <div
     class={classnames(
       `absolute
-      w-full 
+      w-full
       rounded-[6px]
       bg-[#424c6d50]
       flex

apps/website/src/components/GetYourPlanForm.astro

@@ -19,6 +19,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
       onDark
       inputProps={{
         name: "form-full-name",
+        id: "form-full-name",
         maxlength: "100",
         placeholder: formContent.frontmatter.fullname,
         required: true,
@@ -36,6 +37,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
       onDark
       inputProps={{
         name: "form-email",
+        id: "form-email",
         maxlength: "100",
         placeholder: formContent.frontmatter.email,
         type: "email",
@@ -127,7 +129,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
       const modalFormLoader =
         modalFormSubmitBtn?.querySelector("#modal-form-loader");
 
-      const handleModalSoftDismiss = (e: PointerEvent) => {
+      const handleModalSoftDismiss = (e: MouseEvent) => {
         if (!e.currentTarget) return;
 
         const dialogElem = e.currentTarget as HTMLDialogElement;
@@ -181,6 +183,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
           const consent = formData.get("form-consent");
           const companyName = formData.get("form-company");
           const mainChallenge = formData.get("form-challenge");
+          const startDate = formData.get("form-start-date");
 
           if (!name || !email || !consent) {
             return;
@@ -202,6 +205,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
                 hasConsent: consent ? true : false,
                 companyName: companyName || "",
                 mainChallenge: mainChallenge || "",
+                startDate: startDate || "",
               }),
             },
           );

apps/website/src/components/GetYourPlanModal.astro

@@ -3,6 +3,7 @@ import Field from "./Field.astro";
 import Modal from "./Modal.astro";
 import * as formContent from "../content/contact/get-your-plan-form.md";
 import Select from "./Select.astro";
+import DatePicker from "./DatePicker.astro";
 ---
 
 <Modal id="get-plan-modal" classNames="w-[calc(100%-16px)] max-w-[500px]">
@@ -17,6 +18,7 @@ import Select from "./Select.astro";
         isTextArea={false}
         inputProps={{
           name: "form-company",
+          id: "form-company",
           maxlength: "100",
           placeholder: formContent.frontmatter.companyName,
         }}
@@ -41,6 +43,17 @@ import Select from "./Select.astro";
           content: c,
         }))}
       />
+      <DatePicker
+        label={formContent.frontmatter.expectedStartDate}
+        inputProps={{
+          id: "form-start-date",
+          name: "form-start-date",
+          min: new Date(Date.now()).toISOString().split("T")[0] }}
+        labelProps={{
+          for: "form-start-date",
+          "aria-hidden": false,
+        }}
+        />
       <button
         type="submit"
         id="modal-form-submit-button"
@@ -56,6 +69,7 @@ import Select from "./Select.astro";
         group-invalid/contact-us:focus-visible:bg-[#85a32a]
         group-invalid/contact-us:focus-visible:outline-transparent
         group-invalid/contact-us:focus:bg-[#85a32a]
+        group-valid/contact-us:cursor-pointer
         bg-crocoder-yellow
         hover:bg-crocoder-yellow/90
         focus:bg-crocoder-yellow/90