fix: date of birth validations

src/Payments/DateOfBirth.res

@@ -21,8 +21,34 @@ let years = Array.fromInitializer(~length=currentYear - startYear, i => currentY
 
 @react.component
 let make = () => {
+  open Utils
   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(_ => !isNotEligible)
+      }
+    }
+  }, (selectedDate, isNotEligible))
+
+  useSubmitPaymentData(submitCallback)
+
+  let onChange = date => {
+    let isAbove18 = switch date->Nullable.toOption {
+    | Some(val) => val->check18AboveOrNot
+    | None => false
+    }
+    setSelectedDate(_ => date)
+    setIsNotEligible(_ => !isAbove18)
+  }
+  let errorString = error ? "Date of birth is required" : "Age should be greater than 18 years"
 
   <div className="flex flex-col gap-1">
     <div
@@ -39,9 +65,11 @@ 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
+      placeholderText="Enter Date of Birth"
       renderCustomHeader={val => {
         <div className="flex gap-4 items-center justify-center m-2">
           <select
@@ -75,5 +103,17 @@ let make = () => {
         </div>
       }}
     />
+    <RenderIf condition={error || isNotEligible}>
+      <div
+        className="Error pt-1"
+        style={
+          color: themeObj.colorDangerText,
+          fontSize: themeObj.fontSizeSm,
+          alignSelf: "start",
+          textAlign: "left",
+        }>
+        {React.string(errorString)}
+      </div>
+    </RenderIf>
   </div>
 }

src/Utilities/DynamicFieldsUtils.res

@@ -126,6 +126,7 @@ let useRequiredFieldsEmptyAndValid = (
   let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(areRequiredFieldsEmpty)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
   let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
+  let dateOfBirth = Recoil.useRecoilValueFromAtom(dateOfBirth)
 
   let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress(billingAddress)
 
@@ -159,6 +160,11 @@ let useRequiredFieldsEmptyAndValid = (
         isExpiryValid->Option.getOr(false)
       | CardCvc => isCVCValid->Option.getOr(false)
       | CardExpiryAndCvc => isExpiryValid->Option.getOr(false) && isCVCValid->Option.getOr(false)
+      | DateOfBirth =>
+        switch dateOfBirth->Nullable.toOption {
+        | Some(val) => val->Utils.check18AboveOrNot
+        | None => false
+        }
       | _ => true
       }
     })
@@ -203,6 +209,7 @@ let useRequiredFieldsEmptyAndValid = (
       | CardExpiryAndCvc =>
         let (month, year) = getExpiryDates(cardExpiry)
         month === "" || year === "" || cvcNumber === ""
+      | DateOfBirth => dateOfBirth->Js.Nullable.isNullable
       | _ => false
       }
     })
@@ -215,6 +222,7 @@ let useRequiredFieldsEmptyAndValid = (
     country,
     billingName.value,
     line1.value,
+    dateOfBirth,
     (
       email,
       line2.value,
@@ -382,8 +390,12 @@ let useSetInitialRequiredFields = (
           setCryptoCurrencyNetworks(_ => value)
         }
       | DateOfBirth =>
-        if value !== "" && dateOfBirth->Date.toDateString === "" {
-          setDateOfBirth(_ => dateOfBirth)
+        switch dateOfBirth->Nullable.toOption {
+        | Some(x) =>
+          if value !== "" && x->Date.toDateString === "" {
+            setDateOfBirth(_ => Nullable.make(x))
+          }
+        | None => ()
         }
       | SpecialField(_)
       | InfoElement
@@ -470,7 +482,11 @@ let useRequiredFieldsBody = (
       let (_, year) = CardUtils.getExpiryDates(cardExpiry)
       year
     | CryptoCurrencyNetworks => cryptoCurrencyNetworks
-    | DateOfBirth => dateOfBirth->Date.toISOString->String.slice(~start=0, ~end=10)
+    | DateOfBirth =>
+      switch dateOfBirth->Nullable.toOption {
+      | Some(x) => x->Date.toISOString->String.slice(~start=0, ~end=10)
+      | None => ""
+      }
     | CardCvc => cvcNumber
     | StateAndCity
     | CountryAndPincode(_)

src/Utilities/RecoilAtoms.res

@@ -61,7 +61,7 @@ let cryptoCurrencyNetworks = Recoil.atom("cryptoCurrencyNetworks", "")
 let isShowOrPayUsing = Recoil.atom("isShowOrPayUsing", false)
 let areRequiredFieldsValid = Recoil.atom("areRequiredFieldsValid", true)
 let areRequiredFieldsEmpty = Recoil.atom("areRequiredFieldsEmpty", false)
-let dateOfBirth = Recoil.atom("dateOfBirth", Date.make())
+let dateOfBirth = Recoil.atom("dateOfBirth", Nullable.null)
 let userBillingName = Recoil.atom("userBillingName", defaultFieldValues)
 
 type areOneClickWalletsRendered = {

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
+}

src/libraries/DatePicker.res

@@ -18,8 +18,8 @@ type customHeaderProps = {
 
 @module("react-datepicker") @react.component
 external make: (
-  ~selected: Date.t,
-  ~onChange: Date.t => unit,
+  ~selected: Nullable.t<Date.t>,
+  ~onChange: Nullable.t<Date.t> => unit,
   ~showIcon: bool=?,
   ~icon: React.element=?,
   ~dateFormat: string=?,
@@ -31,4 +31,5 @@ external make: (
   ~className: string=?,
   ~wrapperClassName: string=?,
   ~closeOnScroll: bool=?,
+  ~shouldCloseOnSelect: bool=?,
 ) => React.element = "default"