feat: Extenddatebutton (#2001)

Co-authored-by: Mudit Bhatia <[email protected]>

src/components/NoDataFound.res

@@ -1,4 +1,36 @@
-type renderType = InfoBox | Painting | NotFound | Locked | LoadError
+type renderType = InfoBox | Painting | NotFound | Locked | LoadError | ExtendDateUI
+
+module ExtendDateComponent = {
+  open LogicUtils
+  @react.component
+  let make = () => {
+    let {filterValueJson, updateExistingKeys} = React.useContext(FilterContext.filterContext)
+    let startTime = filterValueJson->getString("start_time", "")
+
+    let handleClick = _ => {
+      let startDateObj = startTime->DayJs.getDayJsForString
+      let extendedStartDate = startDateObj.subtract(90, "day").toDate()->Date.toISOString
+      let extendedEndDate = startDateObj.subtract(1, "day").toDate()->Date.toISOString
+
+      updateExistingKeys(Dict.fromArray([("start_time", {extendedStartDate})]))
+      updateExistingKeys(Dict.fromArray([("end_time", {extendedEndDate})]))
+    }
+    <div>
+      <ACLButton
+        buttonType=Primary onClick=handleClick text="Expand the search to the previous 90 days"
+      />
+      <div className="flex justify-center">
+        <p className="mt-6">
+          {"Or try the following:"->React.string}
+          <ul className="list-disc">
+            <li> {"Try a different search parameter"->React.string} </li>
+            <li> {"Adjust or remove filters and search once more"->React.string} </li>
+          </ul>
+        </p>
+      </div>
+    </div>
+  }
+}
 
 @react.component
 let make = (
@@ -19,6 +51,7 @@ let make = (
     | Locked => "mt-32 p-16"
     | LoadError => "mt-32 p-16"
     | InfoBox => ""
+    | ExtendDateUI => "mt-16 p-16"
     }
     isMobileView ? "" : marginPaddingClass
   }
@@ -101,6 +134,11 @@ let make = (
               }}
             </div>
           </div>
+        | ExtendDateUI =>
+          <div className=containerClass>
+            <div className="px-3 text-2xl text-black font-bold mb-6"> {message->React.string} </div>
+            <ExtendDateComponent />
+          </div>
         }}
       </div>
     </div>}

src/screens/Payouts/PayoutsList.res

@@ -20,6 +20,10 @@ let make = () => {
     UserInfoProvider.defaultContext,
   )
 
+  let customUI = {
+    <NoDataFound customCssClass="my-6" message="No results found" renderType=ExtendDateUI />
+  }
+
   let fetchPayouts = () => {
     switch filters {
     | Some(dict) =>

src/screens/Payouts/PayoutsUtils.res

@@ -45,13 +45,6 @@ let getPayoutsList = async (
   }
 }
 
-let customUI =
-  <HelperComponents.BluredTableComponent
-    infoText="No payout records as of now. Try initiating a payout."
-    moduleName=""
-    showRedirectCTA=false
-  />
-
 let (startTimeFilterKey, endTimeFilterKey) = ("start_time", "end_time")
 
 let filterByData = (txnArr, value) => {

src/screens/Transaction/Disputes/Disputes.res

@@ -3,6 +3,7 @@ let make = () => {
   open APIUtils
   open HSwitchRemoteFilter
   open DisputesUtils
+  open LogicUtils
 
   let getURL = useGetURL()
   let fetchDetails = useGetMethod()
@@ -18,8 +19,8 @@ let make = () => {
   let {userInfo: {transactionEntity}, checkUserEntity} = React.useContext(
     UserInfoProvider.defaultContext,
   )
+
   let getDisputesList = async () => {
-    open LogicUtils
     try {
       setScreenState(_ => Loading)
       if searchText->isNonEmptyString {
@@ -73,9 +74,7 @@ let make = () => {
   }, (filters, searchText))
 
   let customUI =
-    <NoDataFound
-      customCssClass={"my-6"} message="There are no disputes as of now" renderType=Painting
-    />
+    <NoDataFound customCssClass="my-6" message="No results found" renderType=ExtendDateUI />
 
   let filtersUI =
     <RemoteTableFilters

src/screens/Transaction/Order/Orders.res

@@ -110,9 +110,7 @@ let make = (~previewOnly=false) => {
   let customTitleStyle = previewOnly ? "py-0 !pt-0" : ""
 
   let customUI =
-    <NoDataFound
-      customCssClass={"my-6"} message="There are no payments as of now" renderType=Painting
-    />
+    <NoDataFound customCssClass="my-6" message="No results found" renderType=ExtendDateUI />
 
   let filtersUI = React.useMemo(() => {
     <RemoteTableFilters

src/screens/Transaction/Refunds/Refund.res

@@ -21,6 +21,9 @@ let make = () => {
     UserInfoProvider.defaultContext,
   )
 
+  let customUI = {
+    <NoDataFound customCssClass="my-6" message="No results found" renderType=ExtendDateUI />
+  }
   let fetchRefunds = () => {
     switch filters {
     | Some(dict) =>

src/screens/Transaction/Refunds/RefundUtils.res

@@ -72,14 +72,6 @@ let getRefundsList = async (
   }
 }
 
-let customUI =
-  <HelperComponents.BluredTableComponent
-    infoText="No refund records as of now. Try initiating a refund for a successful payment."
-    buttonText="Take me to payments"
-    onClickUrl="payments"
-    moduleName=""
-  />
-
 let (startTimeFilterKey, endTimeFilterKey) = ("start_time", "end_time")
 
 let filterByData = (txnArr, value) => {