From bfc3844215eb2d357ca6942de09e72a07e21cae3 Mon Sep 17 00:00:00 2001
From: kundan <kdn.rthr@gmail.com>
Date: Tue, 17 Dec 2024 14:42:37 +0530
Subject: [PATCH] feat(OPEN-SPARK): fixed prefix value of buying preference
 input and layout

---
 .../components/energyPurchaseForm/index.tsx   | 36 +++++++++++--------
 apps/open-spark/pages/buyingPreference.tsx    | 13 ++++++-
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/apps/open-spark/components/energyPurchaseForm/index.tsx b/apps/open-spark/components/energyPurchaseForm/index.tsx
index 74f454d5..0b226f12 100644
--- a/apps/open-spark/components/energyPurchaseForm/index.tsx
+++ b/apps/open-spark/components/energyPurchaseForm/index.tsx
@@ -60,12 +60,18 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
       setTradeId(tradeId as string)
       setEnergyUnits(Number(quantity))
       setPricePerUnit(Number(price))
-      setPreferences(JSON.parse(preferencesTags as any))
+      setPreferences(JSON.parse(preferencesTags as string))
     }
-  }, [])
-
-  const handleInputChange = (setter: React.Dispatch<React.SetStateAction<number>>, value: number) =>
-    setter(Math.max(0, value))
+  }, [router.query])
+
+  const handleInputChange = (setter: React.Dispatch<React.SetStateAction<number>>, value: string) => {
+    const numericValue = value.replace(/[^0-9]/g, '') // Allow only digits
+    if (numericValue === '') {
+      setter(0) // Set to 0 if empty
+    } else {
+      setter(Number(numericValue)) // Convert to number
+    }
+  }
 
   const handleCheckboxChange = (key: string, value: boolean) => setPreferences(prev => ({ ...prev, [key]: value }))
 
@@ -122,6 +128,7 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
         spacing={8}
         align="stretch"
       >
+        {/* Energy Units Input */}
         <FormControl>
           <HStack mb={2}>
             <FormLabel
@@ -135,21 +142,21 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
           </HStack>
           <HStack spacing={4}>
             <Box
-              onClick={() => handleInputChange(setEnergyUnits, energyUnits + 1)}
+              onClick={() => handleInputChange(setEnergyUnits, (energyUnits + 1).toString())}
               cursor="pointer"
             >
               <FaPlus />
             </Box>
             <Input
               type="number"
-              value={energyUnits}
-              onChange={e => handleInputChange(setEnergyUnits, Number(e.target.value))}
+              value={energyUnits.toString()}
+              onChange={e => handleInputChange(setEnergyUnits, e.target.value)}
               textAlign="center"
               width="100px"
               size="md"
             />
             <Box
-              onClick={() => handleInputChange(setEnergyUnits, energyUnits - 1)}
+              onClick={() => handleInputChange(setEnergyUnits, (energyUnits - 1).toString())}
               cursor="pointer"
             >
               <FaMinus />
@@ -178,21 +185,21 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
           </HStack>
           <HStack spacing={4}>
             <Box
-              onClick={() => handleInputChange(setPricePerUnit, pricePerUnit + 1)}
+              onClick={() => handleInputChange(setPricePerUnit, (pricePerUnit + 1).toString())}
               cursor="pointer"
             >
               <FaPlus />
             </Box>
             <Input
               type="number"
-              value={pricePerUnit}
-              onChange={e => handleInputChange(setPricePerUnit, Number(e.target.value))}
+              value={pricePerUnit.toString()}
+              onChange={e => handleInputChange(setPricePerUnit, e.target.value)}
               textAlign="center"
               width="100px"
               size="md"
             />
             <Box
-              onClick={() => handleInputChange(setPricePerUnit, pricePerUnit - 1)}
+              onClick={() => handleInputChange(setPricePerUnit, (pricePerUnit - 1).toString())}
               cursor="pointer"
             >
               <FaMinus />
@@ -207,6 +214,7 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
         </FormControl>
         <Divider />
 
+        {/* Preferences */}
         <FormControl>
           <FormLabel
             fontSize="15"
@@ -237,7 +245,7 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
         <BecknButton
           children="Submit"
           handleClick={handleSubmit}
-          disabled={!isFormComplete}
+          disabled={!isFormComplete} // Button disabled if form incomplete
         />
       </VStack>
     </Box>
diff --git a/apps/open-spark/pages/buyingPreference.tsx b/apps/open-spark/pages/buyingPreference.tsx
index f4e6fa22..a8b01b91 100644
--- a/apps/open-spark/pages/buyingPreference.tsx
+++ b/apps/open-spark/pages/buyingPreference.tsx
@@ -1,7 +1,18 @@
+import { Box } from '@chakra-ui/react'
 import PreferenceComponent from '../components/energyPurchaseForm'
 
 const BuyingPreference = () => {
-  return <PreferenceComponent preferenceType={'buy'} />
+  return (
+    <Box
+      margin={'0 auto'}
+      maxW={['100%', '100%', '40rem', '40rem']}
+      className="hideScroll"
+      maxH={'calc(100vh - 80px)'}
+      overflowY="scroll"
+    >
+      <PreferenceComponent preferenceType={'buy'} />
+    </Box>
+  )
 }
 
 export default BuyingPreference