From 16a3e1850a658e397dc8f924f1bc07443e73ace5 Mon Sep 17 00:00:00 2001 From: Lokesh Jain <56452497+jainlokesh318@users.noreply.github.com> Date: Tue, 12 Dec 2023 12:40:58 +0530 Subject: [PATCH] feat: sub steps (#56) Co-authored-by: Lokesh Jain Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com> --- package-lock.json | 4 +- .../IntegrateYourApp/IntegrateFromScratch.res | 27 ++++++++---- .../IntegrateYourAppUtils.res | 23 ++++++++++ .../IntegrateYourApp/MigrateFromStripe.res | 26 ++++++++---- .../Home/QuickStart/QuickStartTypes.res | 20 +++++++++ .../Home/QuickStart/QuickStartUtils.res | 42 +++++++++++++++---- .../HyperSwitch/Hooks/EnumVariantHook.res | 4 ++ 7 files changed, 121 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 195c36bdd..581a1335b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "rescript-euler-dashboard", + "name": "hyperswitch-dashboard", "version": "1.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "rescript-euler-dashboard", + "name": "hyperswitch-dashboard", "version": "1.0.5", "hasInstallScript": true, "license": "MIT", diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res index a85045ad2..073c4f22d 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res +++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res @@ -14,6 +14,7 @@ let make = ( let (currentStep, setCurrentStep) = React.useState(_ => DownloadTestAPIKey) let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext) let isLastStep = currentStep === DisplayPaymentConfirmation + let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil() let theme = switch ThemeProvider.useTheme() { | Dark => "vs-dark" @@ -25,10 +26,18 @@ let make = ( buttonState={Normal} buttonType={PrimaryOutline} text="Back" - onClick={_ => - currentStep === DownloadTestAPIKey - ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION)) - : setCurrentStep(_ => getNavigationStepForStandardIntegration(~currentStep, ()))} + onClick={_ => { + let prevStep = getNavigationStepForStandardIntegration(~currentStep, ()) + if currentStep === DownloadTestAPIKey { + setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION)) + } else { + let _ = updateEnumInRecoil([ + (String("pending"), currentStep->getPolyMorphicVariantOfIntegrationSubStep), + (String("ongoing"), prevStep->getPolyMorphicVariantOfIntegrationSubStep), + ]) + setCurrentStep(_ => prevStep) + } + }} buttonSize=Small /> @@ -40,9 +49,13 @@ let make = ( if isLastStep { markAsDone()->ignore } else { - setCurrentStep(_ => - getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ()) - ) + let nextStep = getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ()) + let _ = updateEnumInRecoil([ + (String("completed"), currentStep->getPolyMorphicVariantOfIntegrationSubStep), + (String("ongoing"), nextStep->getPolyMorphicVariantOfIntegrationSubStep), + ]) + + setCurrentStep(_ => nextStep) } }} buttonSize=Small diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res index 35abaf046..2b24edd6b 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res +++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res @@ -45,3 +45,26 @@ let getNavigationStepForStandardIntegration = ( | DisplayPaymentConfirmation => forward ? DisplayPaymentConfirmation : DisplayCheckout } } + +let getPolyMorphicVariantOfIntegrationSubStep: standardIntegrationSteps => QuickStartTypes.sectionHeadingVariant = ( + currentStep: standardIntegrationSteps, +) => { + switch currentStep { + | DownloadTestAPIKey => #DownloadTestAPIKey + | CreatePayment => #CreatePayment + | DisplayCheckout => #DisplayCheckout + | DisplayPaymentConfirmation => #DisplayPaymentConfirmation + } +} + +let getPolyMorphicVariantOfMigrateFromStripe: migrateFromStripeSteps => QuickStartTypes.sectionHeadingVariant = ( + currentStep: migrateFromStripeSteps, +) => { + switch currentStep { + | DownloadAPIKey => #DownloadTestAPIKeyStripe + | InstallDeps => #InstallDeps + | ReplaceAPIKeys => #ReplaceAPIKeys + | ReconfigureCheckout => #ReconfigureCheckout + | LoadCheckout => #LoadCheckout + } +} diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res index 0d1b1f156..562726bee 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res +++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res @@ -14,6 +14,7 @@ let make = ( let (currentStep, setCurrentStep) = React.useState(_ => DownloadAPIKey) let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext) let isLastStep = currentStep === LoadCheckout + let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil() let theme = switch ThemeProvider.useTheme() { | Dark => "vs-dark" @@ -25,10 +26,18 @@ let make = ( buttonState={Normal} buttonType={PrimaryOutline} text="Back" - onClick={_ => - currentStep === DownloadAPIKey - ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION)) - : setCurrentStep(_ => getNavigationStepForMigrateFromStripe(~currentStep, ()))} + onClick={_ => { + let prevStep = getNavigationStepForMigrateFromStripe(~currentStep, ()) + if currentStep === DownloadAPIKey { + setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION)) + } else { + let _ = updateEnumInRecoil([ + (String("pending"), currentStep->getPolyMorphicVariantOfMigrateFromStripe), + (String("ongoing"), prevStep->getPolyMorphicVariantOfMigrateFromStripe), + ]) + setCurrentStep(_ => prevStep) + } + }} buttonSize=Small /> @@ -40,9 +49,12 @@ let make = ( if isLastStep { markAsDone()->ignore } else { - setCurrentStep(_ => - getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ()) - ) + let nextStep = getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ()) + let _ = updateEnumInRecoil([ + (String("completed"), currentStep->getPolyMorphicVariantOfMigrateFromStripe), + (String("ongoing"), nextStep->getPolyMorphicVariantOfMigrateFromStripe), + ]) + setCurrentStep(_ => nextStep) } }} buttonSize=Small diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res index 34f0e65c2..caa84a5ac 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res +++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res @@ -47,6 +47,10 @@ type sectionHeadingVariant = [ | #TestPayment | #IntegrationMethod | #IntegrationCompleted + | #DownloadTestAPIKey + | #CreatePayment + | #DisplayCheckout + | #DisplayPaymentConfirmation | #StripeConnected | #PaypalConnected | #SPRoutingConfigured @@ -56,6 +60,11 @@ type sectionHeadingVariant = [ | #SetupWoocomWebhook | #IsMultipleConfiguration | #GoLive + | #DownloadTestAPIKeyStripe + | #InstallDeps + | #ReplaceAPIKeys + | #ReconfigureCheckout + | #LoadCheckout ] type processorType = { @@ -85,7 +94,17 @@ type responseType = { configureWoocom: bool, setupWoocomWebhook: bool, isMultipleConfiguration: bool, + downloadTestAPIKeyStripe: string, + installDeps: string, + replaceAPIKeys: string, + reconfigureCheckout: string, + loadCheckout: string, + downloadTestAPIKey: string, + createPayment: string, + displayCheckout: string, + displayPaymentConfirmation: string, } + type requestObjectType = | ProcesorType(processorType) | RoutingType(routingType) @@ -93,5 +112,6 @@ type requestObjectType = | IntegrationMethod(integrationMethod) | ConnectorChoice(connectorChoice) | Boolean(bool) + | String(string) type valueType = String(string) | Boolean(bool) diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res index 4ae161e6c..7de1e90e6 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res +++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res @@ -169,6 +169,13 @@ let getTypedValueFromDict = valueString => { ->getDictfromDict(#IntegrationMethod->getStringFromVariant) ->getIntegrationType, integrationCompleted: value->getBool(#IntegrationCompleted->getStringFromVariant, false), + downloadTestAPIKey: value->getString(#DownloadTestAPIKey->getStringFromVariant, ""), + createPayment: value->getString(#CreatePayment->getStringFromVariant, ""), + displayCheckout: value->getString(#DisplayCheckout->getStringFromVariant, ""), + displayPaymentConfirmation: value->getString( + #DisplayPaymentConfirmation->getStringFromVariant, + "", + ), stripeConnected: value ->getDictfromDict(#StripeConnected->getStringFromVariant) ->getProcessorType, @@ -183,6 +190,11 @@ let getTypedValueFromDict = valueString => { configureWoocom: value->getBool(#ConfigureWoocom->getStringFromVariant, false), setupWoocomWebhook: value->getBool(#SetupWoocomWebhook->getStringFromVariant, false), isMultipleConfiguration: value->getBool(#IsMultipleConfiguration->getStringFromVariant, false), + downloadTestAPIKeyStripe: value->getString(#DownloadTestAPIKeyStripe->getStringFromVariant, ""), + installDeps: value->getString(#InstallDeps->getStringFromVariant, ""), + replaceAPIKeys: value->getString(#ReplaceAPIKeys->getStringFromVariant, ""), + reconfigureCheckout: value->getString(#ReconfigureCheckout->getStringFromVariant, ""), + loadCheckout: value->getString(#LoadCheckout->getStringFromVariant, ""), } typedValue } @@ -231,6 +243,17 @@ let getStatusValue = (comparator: valueType, enumVariant, dashboardPageState) => boolValue ? COMPLETED : dashboardPageState === enumVariant ? ONGOING : PENDING } } + +let getStatusFromString = statusString => { + open HSSelfServeSidebar + switch statusString->Js.String2.toUpperCase { + | "PENDING" => PENDING + | "COMPLETED" => COMPLETED + | "ONGOING" => ONGOING + | _ => PENDING + } +} + let sidebarTextBasedOnVariant = choiceState => switch choiceState { | #MigrateFromStripe => "Hyperswitch For Stripe Users" @@ -276,23 +299,23 @@ let getSidebarOptionsForIntegrateYourApp: ( subOptions: [ { title: "Download Test API Keys", - status: PENDING, + status: enumValue.downloadTestAPIKeyStripe->getStatusFromString, }, { title: "Install Dependencies", - status: PENDING, + status: enumValue.installDeps->getStatusFromString, }, { title: "Replace API keys", - status: PENDING, + status: enumValue.replaceAPIKeys->getStatusFromString, }, { title: "Reconfigure Checkout Form", - status: PENDING, + status: enumValue.reconfigureCheckout->getStatusFromString, }, { title: "Load Hyperswitch Checkout", - status: PENDING, + status: enumValue.loadCheckout->getStatusFromString, }, ], }, @@ -317,19 +340,19 @@ let getSidebarOptionsForIntegrateYourApp: ( subOptions: [ { title: "Download Test API Key", - status: PENDING, + status: enumValue.downloadTestAPIKey->getStatusFromString, }, { title: "Create a Payment", - status: PENDING, + status: enumValue.createPayment->getStatusFromString, }, { title: "Display Hyperswitch Checkout", - status: PENDING, + status: enumValue.displayCheckout->getStatusFromString, }, { title: "Display Payment Confirmation", - status: PENDING, + status: enumValue.displayPaymentConfirmation->getStatusFromString, }, ], }, @@ -571,6 +594,7 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ ]->getJsonFromArrayOfJson | Boolean(_) => (parentVariant :> string)->Js.Json.string + | String(str) => str->Js.Json.string } } diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res index ae31a0902..0a7ae6a37 100644 --- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res +++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res @@ -48,6 +48,10 @@ let useUpdateEnumInRecoil = () => { let booleanDict = [((enumVariant :> string), true->Js.Json.boolean)]->Js.Dict.fromArray enumDictsArray->Array.push(booleanDict) } + | String(str) => { + let stringDict = [((enumVariant :> string), str->Js.Json.string)]->Js.Dict.fromArray + enumDictsArray->Array.push(stringDict) + } | _ => enumDictsArray->Array.push(bodyValForApi->getDictFromJsonObject) } })