feat: order environment plausible events

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

@@ -11,6 +11,7 @@ import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { OrderEnvironmentsDialogPricing } from './OrderEnvironmentsDialogPricing/OrderEnvironmentsDialogPricing';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import Input from 'component/common/Input/Input';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 type OrderEnvironmentsDialogProps = {
     open: boolean;
@@ -75,10 +76,19 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
     onClose,
     onSubmit,
 }) => {
+    const { trackEvent } = usePlausibleTracker();
     const [selectedOption, setSelectedOption] = useState(OPTIONS[0]);
     const [costCheckboxChecked, setCostCheckboxChecked] = useState(false);
     const [environmentNames, setEnvironmentNames] = useState<string[]>([]);
 
+    const trackEnvironmentSelect = () => {
+        trackEvent('order-environments', {
+            props: {
+                eventType: 'selected environment count',
+            },
+        });
+    };
+
     return (
         <StyledDialog open={open} title=''>
             <FormTemplate
@@ -135,6 +145,7 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
                                 setEnvironmentNames((names) =>
                                     names.slice(0, value),
                                 );
+                                trackEnvironmentSelect();
                             }}
                         />
                     </Box>

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

@@ -3,6 +3,7 @@ import { Box, Button, styled, Typography } from '@mui/material';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
 import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 type PurchasableFeatureProps = {
     title: ReactNode;
@@ -50,6 +51,17 @@ export const PurchasableFeature: FC<PurchasableFeatureProps> = ({
     description,
     onClick,
 }) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    const onViewPricingClick = () => {
+        onClick();
+        trackEvent('order-environments', {
+            props: {
+                eventType: 'view pricing clicked',
+            },
+        });
+    };
+
     return (
         <StyledContainer>
             <StyledMessage>
@@ -62,7 +74,7 @@ export const PurchasableFeature: FC<PurchasableFeatureProps> = ({
                 </Box>
             </StyledMessage>
             <StyledButtonContainer>
-                <Button variant='contained' onClick={onClick}>
+                <Button variant='contained' onClick={onViewPricingClick}>
                     View pricing
                 </Button>
             </StyledButtonContainer>

frontend/src/hooks/usePlausibleTracker.ts

@@ -69,7 +69,8 @@ export type CustomEvents =
     | 'events-exported'
     | 'event-timeline'
     | 'onboarding'
-    | 'personal-dashboard';
+    | 'personal-dashboard'
+    | 'order-environments';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);

src/lib/services/email-service.ts

@@ -476,7 +476,9 @@ export class EmailService {
             const email = {
                 from: this.sender,
                 to: userEmail,
-                bcc: process.env.ORDER_ENVIRONMENTS_BCC || '[email protected]',
+                bcc:
+                    process.env.ORDER_ENVIRONMENTS_BCC ||
+                    '[email protected]',
                 subject: ORDER_ENVIRONMENTS_SUBJECT,
                 html: bodyHtml,
                 text: bodyText,