From 035f8706688c3fb0a19059623c8f8c37b292e132 Mon Sep 17 00:00:00 2001
From: Ashen Iranda <73756207+AshenI99@users.noreply.github.com>
Date: Fri, 1 Apr 2022 17:39:10 +0530
Subject: [PATCH] fix(components): Maximum resale value prop for BidCreate

* Added maximum resale error message

* Removed error message
---
 packages/components/src/BidCreate.tsx         | 26 ++++++++++++++++---
 .../src/stories/BidCreate.stories.tsx         |  4 ++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/BidCreate.tsx b/packages/components/src/BidCreate.tsx
index 4c076182..b7cd4722 100644
--- a/packages/components/src/BidCreate.tsx
+++ b/packages/components/src/BidCreate.tsx
@@ -6,8 +6,10 @@ import { Box, Select, Label, Input, Button, Text } from 'theme-ui'
 
 export function BidCreate({
     onBid,
+    maxResale
 }: {
-    onBid: (amount: string, resale: string) => void
+    onBid: (amount: string, resale: string) => void,
+    maxResale?: number
 }) {
     const [amount, setAmount] = useState(null)
     const [resale, setResale] = useState('0')
@@ -69,7 +71,18 @@ export function BidCreate({
                 />
             </Box>
             <Box sx={{ variant: 'forms.primary.row' }}>
-                <Label htmlFor="resale">RESALE FEE</Label>
+                <Label htmlFor="resale">
+                    RESALE FEE
+                    <Text
+                        sx={{
+                            marginTop:'3px',
+                            marginLeft:1,
+                            fontSize:14
+                        }}
+                    >
+                        {`(MAX ${maxResale ? maxResale : '100'}%)`}
+                    </Text>
+                </Label>
                 <Input
                     type="number"
                     step="1"
@@ -77,12 +90,17 @@ export function BidCreate({
                     id="resale"
                     value={resale}
                     min={0}
+                    max={maxResale || 100}
                     autoComplete="off"
-                    onChange={(e) => setResale(e.target.value)}
+                    onChange={(e) => {
+                        if(maxResale ?  e.target.value <= Number(maxResale) : e.target.value <= 100){
+                            setResale(e.target.value)
+                        }
+                    }}
                 />
             </Box>
             <Button
-                disabled={!amount}
+                disabled={!amount || Number(resale) > maxResale}
                 mt={24}
                 sx={{
                     width: ['100%', '100%', '100%', 'unset'],
diff --git a/packages/components/src/stories/BidCreate.stories.tsx b/packages/components/src/stories/BidCreate.stories.tsx
index 0b42efc7..5beaadfd 100644
--- a/packages/components/src/stories/BidCreate.stories.tsx
+++ b/packages/components/src/stories/BidCreate.stories.tsx
@@ -14,4 +14,6 @@ const Template: ComponentStory<typeof BidCreate> = (args) => (
 )
 
 export const Zero = Template.bind({})
-Zero.args = {}
+Zero.args = {
+    maxResale: 40,
+}
\ No newline at end of file