Creating the `RadioGroupTabsDiscreteSlider` as a custom Formik component

[CharlestonREM]

the first fields in the app

Hello @Amin-Essid ! These fields are the first formik fields in the form, and pass vital variables to the calculator provider state

overview of component specs

We need to create two fields in one custom component

Radio Group Tabs parent Component corresponding to the propertyType field

1. It needs to utilize the material ui Tabs & Tab Components
2. when the component mounts, it needs to pass its value property (see tabs props here) via React's useEffect hook to Formik to update the field value with the name propertyType.
3. Each Tab component corresponds to an individual radio button selection (check wireframe below)

Discrete slider child component corresponding to the propertySize field

1. It needs to utilize the material ui Slider component
2. It will pass a range value integer between 1 to 6 corresponding to the Lvl variable in the pricing calculation to the calculator context provider via a dispatch.

wireframes

an old attempt

@Amin-Essid, you might be able to pick up where I left off in the component below. Take a look and let me know what you think.

https://github.com/CharlestonREM/MedsyPurchase/blob/main/medsy/packages/medsy-minimal/src/components/formik-controls/radio-group-tabs-discrete-slider.tsx

[CharlestonREM]

Check out the Calculator context

Hey @Amin-Essid, I created an issue for you to reference when dispatching to the CalculatorContext. https://github.com/CharlestonREM/MedsyPurchase/issues/3

[CharlestonREM]

Check out the current state of the temporary radio button group and select component that i am currently using to dispatch state changes when the field's onChange event is triggered:

https://medsy-minimal-test-2fhu1l3ph-charlestonrem.vercel.app/crem

[CharlestonREM]

tasklist @Amin-Essid

• [ ] check and read the above
• [ ] look at this again for reference: https://github.com/CharlestonREM/MedsyPurchase/blob/main/medsy/packages/medsy-minimal/src/components/formik-controls/radio-group-tabs-discrete-slider.tsx
• [ ] consult this page for reference to creating custom formik component with the formik-material-ui library of bindings: https://stackworx.github.io/formik-material-ui/docs/guide/custom-component
• [ ] create your own component called <AminRadioGroupTabsDiscreteSlider /> in the components/formik-controls/ directory
• [ ] make sure the onChange event fires and demonstrate with a console log
• [ ] let me know in fiverr when you get this far