fix(components): Maximum resale value prop for BidCreate

* Added maximum resale error message * Removed error message
curaOS · Apr 1, 2022 · 035f870 · 035f870 · vercel · Apr 1, 2022
1 parent da528c6
commit 035f870
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git 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,20 +71,36 @@ 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"
                     name="resale"
                     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
@@ -14,4 +14,6 @@ const Template: ComponentStory<typeof BidCreate> = (args) => (
 )
 
 export const Zero = Template.bind({})
-Zero.args = {}
+Zero.args = {
+    maxResale: 40,
+}