fix: validations added

src/Payments/DateOfBirth.res

@@ -25,20 +25,30 @@ let make = () => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (selectedDate, setSelectedDate) = Recoil.useRecoilState(RecoilAtoms.dateOfBirth)
   let (error, setError) = React.useState(_ => false)
+  let (isNotEligible, setIsNotEligible) = React.useState(_ => false)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     if confirm.doSubmit {
       switch selectedDate->Nullable.toOption {
       | Some(_) => setError(_ => false)
-      | None => setError(_ => true)
+      | None => setError(_ => !isNotEligible)
       }
     }
-  }, [selectedDate])
+  }, (selectedDate, isNotEligible))
 
   useSubmitPaymentData(submitCallback)
 
+  let onChange = date => {
+    let isAbove18 = switch date->Nullable.toOption {
+    | Some(val) => val->check18AboveOrNot
+    | None => false
+    }
+    setSelectedDate(_ => date)
+    setIsNotEligible(_ => !isAbove18)
+  }
+
   <div className="flex flex-col gap-1">
     <div
       className={`Label`}
@@ -54,7 +64,7 @@ let make = () => {
       icon={<Icon name="calander" size=13 className="!px-[6px] !py-[10px]" />}
       className="w-full border border-gray-300 rounded p-2"
       selected={selectedDate}
-      onChange={date => setSelectedDate(_ => date)}
+      onChange={date => onChange(date)}
       dateFormat="dd-MM-yyyy"
       wrapperClassName="datepicker"
       shouldCloseOnSelect=true
@@ -104,5 +114,17 @@ let make = () => {
         {React.string("Date of birth is required")}
       </div>
     </RenderIf>
+    <RenderIf condition={isNotEligible}>
+      <div
+        className="Error pt-1"
+        style={
+          color: themeObj.colorDangerText,
+          fontSize: themeObj.fontSizeSm,
+          alignSelf: "start",
+          textAlign: "left",
+        }>
+        {React.string("Age should be greater than 18 years")}
+      </div>
+    </RenderIf>
   </div>
 }

src/Utilities/DynamicFieldsUtils.res

@@ -160,7 +160,11 @@ let useRequiredFieldsEmptyAndValid = (
         isExpiryValid->Option.getOr(false)
       | CardCvc => isCVCValid->Option.getOr(false)
       | CardExpiryAndCvc => isExpiryValid->Option.getOr(false) && isCVCValid->Option.getOr(false)
-      | DateOfBirth => !(dateOfBirth->Js.Nullable.isNullable)
+      | DateOfBirth =>
+        switch dateOfBirth->Nullable.toOption {
+        | Some(val) => val->Utils.check18AboveOrNot
+        | None => false
+        }
       | _ => true
       }
     })

src/Utilities/Utils.res

@@ -1339,3 +1339,11 @@ let handleFailureResponse = (~message, ~errorType) =>
 
 let getPaymentId = clientSecret =>
   String.split(clientSecret, "_secret_")->Array.get(0)->Option.getOr("")
+
+let check18AboveOrNot = date => {
+  let currentDate = Date.make()
+  let year = currentDate->Date.getFullYear - 18
+  let month = currentDate->Date.getMonth
+  let compareDate = Date.makeWithYMD(~year, ~month, ~date=currentDate->Date.getDate)
+  date < compareDate
+}