diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx index aa9a5edfb8..3bd91c348d 100644 --- a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx +++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx @@ -24,7 +24,7 @@ const MAX_TRANSACTION_VALUE = 1_000_000 - 1; interface Props { canSubmit: boolean; licensedSeats: number; - initialSeats: number; + minimumSeats: number; submit: () => void; updateSeats: (seats: number) => void; } @@ -34,10 +34,10 @@ export default function SelfHostedExpansionCard(props: Props) { const license = useSelector(getLicense); const startsAt = moment(parseInt(license.StartsAt, 10)).format('MMM. D, YYYY'); const endsAt = moment(parseInt(license.ExpiresAt, 10)).format('MMM. D, YYYY'); - const [additionalSeats, setAdditionalSeats] = useState(props.initialSeats); + const [additionalSeats, setAdditionalSeats] = useState(props.minimumSeats); const [overMaxSeats, setOverMaxSeats] = useState(false); const licenseExpiry = new Date(parseInt(license.ExpiresAt, 10)); - const invalidAdditionalSeats = additionalSeats === 0 || isNaN(additionalSeats); + const invalidAdditionalSeats = additionalSeats === 0 || isNaN(additionalSeats) || additionalSeats < props.minimumSeats; const [products] = useGetSelfHostedProducts(); const currentProduct = findSelfHostedProductBySku(products, license.SkuShortName); const costPerMonth = currentProduct?.price_per_seat || 0; @@ -76,9 +76,9 @@ export default function SelfHostedExpansionCard(props: Props) { const maxAdditionalSeats = getMaximumAdditionalSeats(); const handleNewSeatsInputChange = (e: React.ChangeEvent) => { - const requestedSeats = parseInt(e.target.value, 10); + let requestedSeats = parseInt(e.target.value, 10); - if (requestedSeats <= 0) { + if (!isNaN(requestedSeats) && requestedSeats <= 0) { e.preventDefault(); return; } @@ -141,12 +141,11 @@ export default function SelfHostedExpansionCard(props: Props) { type='number' value={additionalSeats} onChange={handleNewSeatsInputChange} - error={invalidAdditionalSeats} disabled={maxAdditionalSeats === 0} />
- {invalidAdditionalSeats && !overMaxSeats && + {invalidAdditionalSeats && !overMaxSeats && isNaN(additionalSeats) && } + {invalidAdditionalSeats && additionalSeats < props.minimumSeats && + , + minimumSeats: props.minimumSeats + }} + /> + } {overMaxSeats && maxAdditionalSeats > 0 &&