- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 743
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Additional environments confirmation dialog (#8407)
Showing
7 changed files
with
85 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { useState, type FC } from 'react'; | ||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; | ||
import { useUiFlag } from 'hooks/useUiFlag'; | ||
import { PurchasableFeature } from './PurchasableFeature/PurchasableFeature'; | ||
import { OrderEnvironmentsDialog } from './OrderEnvironmentsDialog/OrderEnvironmentsDialog'; | ||
import { OrderEnvironmentsConfirmation } from './OrderEnvironmentsConfirmation/OrderEnvironmentsConfirmation'; | ||
|
||
type OrderEnvironmentsProps = {}; | ||
|
||
export const OrderEnvironments: FC<OrderEnvironmentsProps> = () => { | ||
const [purchaseDialogOpen, setPurchaseDialogOpen] = useState(false); | ||
const [confirmationState, setConfirmationState] = useState<{ | ||
isOpen: boolean; | ||
environmentsCount?: number; | ||
}>({ isOpen: false }); | ||
const { isPro } = useUiConfig(); | ||
const isPurchaseAdditionalEnvironmentsEnabled = useUiFlag( | ||
'purchaseAdditionalEnvironments', | ||
); | ||
|
||
if (!isPro() || !isPurchaseAdditionalEnvironmentsEnabled) { | ||
return null; | ||
} | ||
|
||
const onSubmit = (environments: string[]) => { | ||
setPurchaseDialogOpen(false); | ||
// TODO: API call | ||
setConfirmationState({ | ||
isOpen: true, | ||
environmentsCount: environments.length, | ||
}); | ||
}; | ||
|
||
return ( | ||
<> | ||
<PurchasableFeature | ||
title='Order additional environments' | ||
description='With our Pro plan, you now have the flexibility to expand your workspace by adding up to three additional environments.' | ||
onClick={() => setPurchaseDialogOpen(true)} | ||
/> | ||
<OrderEnvironmentsDialog | ||
open={purchaseDialogOpen} | ||
onClose={() => setPurchaseDialogOpen(false)} | ||
onSubmit={onSubmit} | ||
/> | ||
<OrderEnvironmentsConfirmation | ||
open={confirmationState.isOpen} | ||
orderedEnvironments={confirmationState.environmentsCount || 0} | ||
onClose={() => setConfirmationState({ isOpen: false })} | ||
/> | ||
</> | ||
); | ||
}; |
29 changes: 29 additions & 0 deletions
29
...ntTable/OrderEnvironments/OrderEnvironmentsConfirmation/OrderEnvironmentsConfirmation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import type { FC } from 'react'; | ||
import { Typography } from '@mui/material'; | ||
import { Dialogue } from 'component/common/Dialogue/Dialogue'; | ||
|
||
type OrderEnvironmentsConfirmationProps = { | ||
open: boolean; | ||
orderedEnvironments: number; | ||
onClose: () => void; | ||
}; | ||
|
||
export const OrderEnvironmentsConfirmation: FC< | ||
OrderEnvironmentsConfirmationProps | ||
> = ({ open, orderedEnvironments, onClose }) => { | ||
return ( | ||
<Dialogue | ||
open={open} | ||
title='Order confirmed' | ||
onClick={onClose} | ||
primaryButtonText='Close' | ||
> | ||
<Typography> | ||
You have ordered <strong>{orderedEnvironments}</strong>{' '} | ||
additional{' '} | ||
{orderedEnvironments === 1 ? 'environment' : 'environments'}. It | ||
may take up to 24 hours before you will get access. | ||
</Typography> | ||
</Dialogue> | ||
); | ||
}; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.