Additional environments confirmation dialog (#8407)

frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx

@@ -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 { OrderEnvironments } from './OrderEnvironments/OrderEnvironments';
-import { OrderEnvironmentsDialog } from './OrderEnvironmentsDialog/OrderEnvironmentsDialog';
-
 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 ? (
+            <OrderEnvironments />
-                <>
-                    <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}
             <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

frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx

@@ -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 })}
+            />
+        </>
+    );
+};

frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsConfirmation/OrderEnvironmentsConfirmation.tsx

@@ -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>
+    );
+};