Skip to content

Commit

Permalink
Additional environments confirmation dialog (#8407)
Browse files Browse the repository at this point in the history
Tymek authored Oct 10, 2024
1 parent 5df7b15 commit 534dd09
Showing 7 changed files with 85 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import {
Table,
TablePlaceholder,
} from 'component/common/Table';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo } from 'react';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Alert, styled, TableBody } from '@mui/material';
import type { MoveListItem } from 'hooks/useDragItem';
@@ -27,11 +27,8 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import type { IEnvironment } from 'interfaces/environments';
import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
import { PurchasableFeature } from './PurchasableFeature/PurchasableFeature';
import { OrderEnvironmentsDialog } from './OrderEnvironmentsDialog/OrderEnvironmentsDialog';

import { OrderEnvironments } from './OrderEnvironments/OrderEnvironments';
const StyledAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(4),
}));
@@ -40,12 +37,10 @@ export const EnvironmentTable = () => {
const { changeSortOrder } = useEnvironmentApi();
const { setToastApiError } = useToast();
const { environments, mutateEnvironments } = useEnvironments();
const [purchaseDialogOpen, setPurchaseDialogOpen] = useState(false);
const isFeatureEnabled = useUiFlag('EEA');
const isPurchaseAdditionalEnvironmentsEnabled = useUiFlag(
'purchaseAdditionalEnvironments',
);
const { isPro } = useUiConfig();

const moveListItem: MoveListItem = useCallback(
async (dragIndex: number, dropIndex: number, save = false) => {
@@ -131,20 +126,7 @@ export const EnvironmentTable = () => {

return (
<PageContent header={header}>
{isPro() && isPurchaseAdditionalEnvironmentsEnabled ? (
<>
<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={() => {}} // TODO: API call
/>
</>
) : null}
<OrderEnvironments />
<StyledAlert severity='info'>
This is the order of environments that you have today in each
feature flag. Rearranging them here will change also the order
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 })}
/>
</>
);
};
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>
);
};

0 comments on commit 534dd09

Please sign in to comment.