chore: Refactoring and props change

juspay · Feb 4, 2025 · b14418e · b14418e
1 parent e6a0637
commit b14418e
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 79 deletions.
diff --git a/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHome.res b/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHome.res
@@ -2,13 +2,45 @@
 let make = () => {
   open RevenueRecoveryHomeUtils
   open VerticalStepIndicatorTypes
+  open VerticalStepIndicatorUtils
+  open RevenueRecoveryHomeTypes
 
-  let (currentStep, _) = React.useState(() => {
+  let (currentStep, setNextStep) = React.useState(() => {
     sectionId: (#connectProcessor: revenueRecoverySections :> string),
     subSectionId: Some((#selectProcessor: revenueRecoverySubsections :> string)),
   })
 
+  let getNextStep = (currentStep: step): option<step> => {
+    findNextStep(sections, currentStep)
+  }
+
+  let getPreviousStep = (currentStep: step): option<step> => {
+    findPreviousStep(sections, currentStep)
+  }
+
+  let onNextClick = () => {
+    switch getNextStep(currentStep) {
+    | Some(nextStep) => setNextStep(_ => nextStep)
+    | None => ()
+    }
+  }
+
+  let onPreviousClick = () => {
+    switch getPreviousStep(currentStep) {
+    | Some(previousStep) => setNextStep(_ => previousStep)
+    | None => ()
+    }
+  }
+
+  let backClick = () => {
+    RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url="/v2/recovery/home"))
+  }
+
   <div className="flex flex-row">
-    <VerticalStepIndicator title="Setup Recovery" sections currentStep url="/v2/recovery/home" />
+    <VerticalStepIndicator title="Setup Recovery" sections currentStep backClick />
+    <div className="flex flex-row gap-x-4">
+      <Button text="Previous" onClick={_ => onPreviousClick()->ignore} />
+      <Button text="Next" buttonType=Primary onClick={_ => onNextClick()->ignore} />
+    </div>
   </div>
 }
diff --git a/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHomeTypes.res b/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHomeTypes.res
@@ -0,0 +1,11 @@
+type revenueRecoverySections = [#connectProcessor | #addAPlatform | #reviewDetails]
+
+type revenueRecoverySubsections = [
+  | #selectProcessor
+  | #activePaymentMethods
+  | #setupWebhookProcessor
+  | #selectAPlatform
+  | #configureRetries
+  | #connectProcessor
+  | #setupWebhookPlatform
+]
diff --git a/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHomeUtils.res b/src/RevenueRecoveryScreens/RevenueRecoveryHome/RevenueRecoveryHomeUtils.res
@@ -1,15 +1,5 @@
 open VerticalStepIndicatorTypes
-
-type revenueRecoverySections = [#connectProcessor | #addAPlatform | #reviewDetails]
-type revenueRecoverySubsections = [
-  | #selectProcessor
-  | #activePaymentMethods
-  | #setupWebhookProcessor
-  | #selectAPlatform
-  | #configureRetries
-  | #connectProcessor
-  | #setupWebhookPlatform
-]
+open RevenueRecoveryHomeTypes
 
 let sections = [
   {

diff --git a/src/fragments/VerticalStepIndicator/VerticalStepIndicator.res b/src/fragments/VerticalStepIndicator/VerticalStepIndicator.res
@@ -1,13 +1,11 @@
 open VerticalStepIndicatorTypes
 @react.component
-let make = (~title: string, ~sections: array<section>, ~currentStep: step, ~url: string) => {
+let make = (~title: string, ~sections: array<section>, ~currentStep: step, ~backClick) => {
+  open VerticalStepIndicatorUtils
+
   let rows = sections->Array.length->Int.toString
   let currIndex = sections->findSectionIndex(currentStep.sectionId)
 
-  let backClick = () => {
-    RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url))
-  }
-
   <div className="flex flex-col gap-y-6 border-r h-774-px w-334-px">
     <div className="flex items-center gap-x-3 px-6">
       <Icon
@@ -50,18 +48,16 @@ let make = (~title: string, ~sections: array<section>, ~currentStep: step, ~url:
                   <Icon className={`${iconColor} pl-1 pt-1`} name={section.icon} />
                 </div>
               }}
-              {if sectionIndex == sections->Array.length - 1 {
-                React.null
-              } else {
+              <RenderIf condition={sectionIndex != sections->Array.length - 1}>
                 <div
                   className={`absolute top-8 ${sectionLineHeight} left-4 border-l border-gray-150 z-0`}
                 />
-              }}
+              </RenderIf>
               <div className={stepNameIndicator}> {section.name->React.string} </div>
             </div>
             <div className="flex flex-col gap-y-2.5">
-              {if isCurrentStep {
-                switch section.subSections {
+              <RenderIf condition={isCurrentStep}>
+                {switch section.subSections {
                 | Some(subSections) =>
                   subSections
                   ->Array.mapWithIndex((subSection, subSectionIndex) => {
@@ -94,27 +90,22 @@ let make = (~title: string, ~sections: array<section>, ~currentStep: step, ~url:
                           <div className={subStepNameIndicator}>
                             {subSection.name->React.string}
                           </div>
-                          {if (
-                            sectionIndex == sections->Array.length - 1 &&
-                              subSectionIndex == subSections->Array.length - 1
-                          ) {
-                            <div />
-                          } else {
+                          <RenderIf
+                            condition={sectionIndex != sections->Array.length - 1 ||
+                              subSectionIndex != subSections->Array.length - 1}>
                             <div
                               className={`absolute top-7 left-4 ${subSectionLineHeight} border-l border-gray-150 z-0`}
                             />
-                          }}
+                          </RenderIf>
                         </div>
                       }
                     | None => React.null
                     }
                   })
                   ->React.array
                 | None => React.null
-                }
-              } else {
-                React.null
-              }}
+                }}
+              </RenderIf>
             </div>
           </div>
         })

diff --git a/src/fragments/VerticalStepIndicator/VerticalStepIndicatorTypes.res b/src/fragments/VerticalStepIndicator/VerticalStepIndicatorTypes.res
@@ -13,28 +13,3 @@ type step = {
   sectionId: string,
   subSectionId: option<string>,
 }
-
-let getSectionFromStep = (sections: array<section>, step: step): option<section> => {
-  sections->Array.find(section => section.id === step.sectionId)
-}
-
-let getSubSectionFromStep = (sections: array<section>, step: step): option<subSection> => {
-  sections
-  ->Array.find(section => section.id === step.sectionId)
-  ->Option.flatMap(section => {
-    section.subSections->Option.flatMap(subSections => {
-      switch step.subSectionId {
-      | None => None
-      | Some(subSectionId) => subSections->Array.find(subSection => subSection.id === subSectionId)
-      }
-    })
-  })
-}
-
-let findSectionIndex = (sections: array<section>, sectionId: string): int => {
-  sections->Array.findIndex(section => section.id === sectionId)
-}
-
-let findSubSectionIndex = (subSections: array<subSection>, subSectionId: string): int => {
-  subSections->Array.findIndex(subSection => subSection.id === subSectionId)
-}
diff --git a/src/fragments/VerticalStepIndicator/VerticalStepIndicatorUtils.res b/src/fragments/VerticalStepIndicator/VerticalStepIndicatorUtils.res
@@ -1,7 +1,14 @@
 open VerticalStepIndicatorTypes
 
+let default: section = {
+  id: "",
+  name: "",
+  icon: "",
+  subSections: None,
+}
+
 let getSectionById = (sections: array<section>, sectionId) =>
-  sections->Array.find(section => section.id === sectionId)
+  sections->Array.find(section => section.id === sectionId)->Option.getOr(default)
 
 let getSubSectionById = (subSections, subSectionId) =>
   subSections->Array.find(subSection => subSection.id === subSectionId)
@@ -12,19 +19,11 @@ let getFirstSubSection = subSections => subSections->Array.get(0)
 let getLastSubSection = subSections => subSections->Array.get(subSections->Array.length - 1)
 
 let findNextStep = (sections: array<section>, currentStep: step): option<step> => {
-  let currentSection = sections->getSectionById(currentStep.sectionId)->Option.getExn
+  let currentSection = sections->getSectionById(currentStep.sectionId)
   let currentSectionIndex =
     sections->Array.findIndex(section => section.id === currentStep.sectionId)
 
   switch (currentSection.subSections, currentStep.subSectionId) {
-  | (None, _) =>
-    sections
-    ->Array.get(currentSectionIndex + 1)
-    ->Option.map(nextSection => {
-      let firstSubSection = nextSection.subSections->Option.flatMap(getFirstSubSection)
-      createStep(nextSection.id, firstSubSection->Option.map(sub => sub.id))
-    })
-
   | (Some(subSections), Some(subSectionId)) => {
       let currentSubIndex = subSections->Array.findIndex(sub => sub.id === subSectionId)
 
@@ -41,24 +40,23 @@ let findNextStep = (sections: array<section>, currentStep: step): option<step> =
         })
       }
     }
+  | (None, _) =>
+    sections
+    ->Array.get(currentSectionIndex + 1)
+    ->Option.map(nextSection => {
+      let firstSubSection = nextSection.subSections->Option.flatMap(getFirstSubSection)
+      createStep(nextSection.id, firstSubSection->Option.map(sub => sub.id))
+    })
   | (_, None) => None
   }
 }
 
 let findPreviousStep = (sections: array<section>, currentStep: step): option<step> => {
-  let currentSection = sections->getSectionById(currentStep.sectionId)->Option.getExn
+  let currentSection = sections->getSectionById(currentStep.sectionId)
   let currentSectionIndex =
     sections->Array.findIndex(section => section.id === currentStep.sectionId)
 
   switch (currentSection.subSections, currentStep.subSectionId) {
-  | (None, _) =>
-    sections
-    ->Array.get(currentSectionIndex - 1)
-    ->Option.map(prevSection => {
-      let lastSubSection = prevSection.subSections->Option.flatMap(getLastSubSection)
-      createStep(prevSection.id, lastSubSection->Option.map(sub => sub.id))
-    })
-
   | (Some(subSections), Some(subSectionId)) => {
       let currentSubIndex = subSections->Array.findIndex(sub => sub.id === subSectionId)
 
@@ -75,6 +73,14 @@ let findPreviousStep = (sections: array<section>, currentStep: step): option<ste
         })
       }
     }
+  | (None, _) =>
+    sections
+    ->Array.get(currentSectionIndex - 1)
+    ->Option.map(prevSection => {
+      let lastSubSection = prevSection.subSections->Option.flatMap(getLastSubSection)
+      createStep(prevSection.id, lastSubSection->Option.map(sub => sub.id))
+    })
+
   | (_, None) => None
   }
 }
@@ -108,3 +114,28 @@ let isLastStep = (sections: array<section>, step: step): bool => {
   )
   ->Option.getOr(false)
 }
+
+let getSectionFromStep = (sections: array<section>, step: step): option<section> => {
+  sections->Array.find(section => getSectionById(sections, step.sectionId) === section)
+}
+
+let getSubSectionFromStep = (sections: array<section>, step: step): option<subSection> => {
+  sections
+  ->Array.find(section => section.id === step.sectionId)
+  ->Option.flatMap(section => {
+    section.subSections->Option.flatMap(subSections => {
+      switch step.subSectionId {
+      | Some(subSectionId) => subSections->Array.find(subSection => subSection.id === subSectionId)
+      | None => None
+      }
+    })
+  })
+}
+
+let findSectionIndex = (sections: array<section>, sectionId: string): int => {
+  sections->Array.findIndex(section => section.id === sectionId)
+}
+
+let findSubSectionIndex = (subSections: array<subSection>, subSectionId: string): int => {
+  subSections->Array.findIndex(subSection => subSection.id === subSectionId)
+}