fix: show expected start date and fix label value for date picker input

Author: ivke995

apps/website/src/components/DatePicker.astro

@@ -27,11 +27,10 @@ const { classNames, labelProps, label = "", onDark } = Astro.props;
   <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"
+           focus:text-secondary"
   />
 
   <label
@@ -48,7 +47,6 @@ const { classNames, labelProps, label = "", onDark } = Astro.props;
       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 },
     )}
@@ -71,6 +69,24 @@ const { classNames, labelProps, label = "", onDark } = Astro.props;
   </div>
 </div>
 
-<script>
-
+<script is:inline>
+  const dateInput = document.getElementById("form-start-date");
+  const label = document.getElementById("form-start-date-label");
+  if (dateInput && label) {
+    dateInput.addEventListener("change", () => {
+      if (dateInput.value) {
+        label.classList.remove("translate-y-[37px]", "translate-x-[17px]");
+        dateInput.classList.remove("text-transparent");
+        label.classList.add("translate-y-0", "translate-x-0");
+      } else {
+        label.classList.remove("translate-y-0", "translate-x-0");
+        dateInput.classList.add("text-transparent");
+        label.classList.add(
+          "translate-y-[37px]",
+          "translate-x-[17px]",
+          "text-transparent",
+        );
+      }
+    });
+  }
 </script>

apps/website/src/components/GetYourPlanForm.astro

@@ -1,4 +1,5 @@
 ---
+import classNames from "classnames";
 import * as formContent from "../content/contact/get-your-plan-form.md";
 import "../styles/loader.css";
 import Field from "./Field.astro";
@@ -71,9 +72,9 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
         type={enableModalForm ? "button" : "submit"}
         id="form-submit-button"
         class="rounded-md
-        min-h-14
-        px-[25px] w-full py-4
-        text-center
+          min-h-14
+          px-[25px] w-full py-4
+          text-center
         text-secondary
         text-base
         font-medium
@@ -113,13 +114,6 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
         "#get-your-plan-form-loader",
       );
 
-      submitBtn?.addEventListener("click", () => {
-        const startDateInput = document.getElementById("form-start-date");
-        if (startDateInput) {
-          startDateInput.setAttribute("required", "");
-        }
-      });
-
       const notificationElem = form?.querySelector("#form-notification");
 
       /* Modal part of form elements */
@@ -151,20 +145,10 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
       };
 
       const handleCloseModal = () => {
-        const startDateInput = document.getElementById("form-start-date");
-        if (startDateInput) {
-          startDateInput.removeAttribute("required");
-        }
         getPlanModal?.close();
       };
 
       if (getPlanModal) {
-        getPlanModal.addEventListener("close", () => {
-          const startDateInput = document.getElementById("form-start-date");
-          if (startDateInput) {
-            startDateInput.removeAttribute("required");
-          }
-        });
         getPlanModal.addEventListener("click", handleModalSoftDismiss);
         submitBtn?.addEventListener("click", handleOpenModal);
       }
@@ -200,7 +184,8 @@ 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");
+          const expectedStartDate = formData.get("form-start-date");
+          console.log("startDate", expectedStartDate)
 
           if (!name || !email || !consent) {
             return;
@@ -222,7 +207,7 @@ const enableModalForm = import.meta.env.PUBLIC_ENABLE_MODAL_FORM === "true";
                 hasConsent: consent ? true : false,
                 companyName: companyName || "",
                 mainChallenge: mainChallenge || "",
-                startDate: startDate || "",
+                expectedStartDate: expectedStartDate || "",
               }),
             },
           );

apps/website/src/components/GetYourPlanModal.astro

@@ -51,6 +51,7 @@ import DatePicker from "./DatePicker.astro";
           min: new Date(Date.now()).toISOString().split("T")[0] }}
         labelProps={{
           for: "form-start-date",
+          id: "form-start-date-label",
           "aria-hidden": false,
         }}
         />