TP-00 | Enable Click Stream Changes (#22)

src/pages/CreateExperiment/BaseRequirementForm.tsx

@@ -95,6 +95,26 @@ const BaseRequirementForm = () => {
         value={values?.vertical}
         width="100%"
       />
+
+      <DropDownSelect
+        label="Enable Clickstream"
+        name="enableClickStream"
+        placeHolder="Select Enable Clickstream"
+        className={commonStyles['custom-dropdown']}
+        itemList={[
+          {
+            label: 'Yes',
+            value: 'Yes',
+          },
+          {
+            label: 'No',
+            value: 'No',
+          },
+        ]}
+        onChange={handleChange}
+        value={values?.enableClickStream}
+        width="100%"
+      />
     </div>
   );
 };

src/pages/EditExperiment/EditExperiment.module.scss

@@ -239,3 +239,9 @@
   align-items: center;
   gap: 12px;
 }
+
+.enable-clickstream {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}

src/pages/EditExperiment/Header/index.tsx

@@ -33,7 +33,11 @@ const Header = () => {
   const [showExtraDetailsModal, setShowExtraDetailsModal] = useState(false);
   const [showEnableExperimentModal, setShowEnableExperimentModal] =
     useState(false);
+
+  const [showEnableClickstreamModal, setShowEnableClickstreamModal] =
+    useState(false);
   const [isExperimentEnabled, setIsExperimentEnabled] = useState(false);
+  const [isClickStreamEnabled, setClickStreamEnabled] = useState(false);
 
   const { updateExperiment } = useAppSelector(
     (state) => state.litmusFormDataStore,
@@ -53,6 +57,7 @@ const Header = () => {
     createdAt,
     experimentId,
     enabled,
+    enableClickStream,
   } = updateExperiment || {};
 
   const { experimentStatus } = experimentInfo || {};
@@ -61,7 +66,8 @@ const Header = () => {
   const showExperimentCta = experimentStatus
     ? experimentStatus !== ExperimentStatus.DONE
     : false;
-  const { updateExperimentStatus, enableExperiment } = useExperimentsApi();
+  const { updateExperimentStatus, enableExperiment, enableClickStreamApi } =
+    useExperimentsApi();
 
   const updateExperimentStatusHandler = (action: string) => {
     if (action === 'RELEASE') {
@@ -108,6 +114,10 @@ const Header = () => {
     setIsExperimentEnabled(enabled);
   }, [enabled]);
 
+  useEffect(() => {
+    setClickStreamEnabled(enableClickStream);
+  }, [enableClickStream]);
+
   const statusDetails = getExperimentStatusHeaderColor(experimentStatus);
   return (
     <div className={styles['header-wrapper']}>
@@ -143,6 +153,15 @@ const Header = () => {
             {result ?? DefaultText}
           </Typography>
         </div>
+        <div className={styles['enable-clickstream']}>
+          <Typography variant="p3" color="#657384">
+            Enable Clickstream
+          </Typography>
+          <Switch
+            checked={isClickStreamEnabled}
+            onChange={(e: any) => setShowEnableClickstreamModal(true)}
+          />
+        </div>
       </div>
       <div className={styles['right-side-wrapper']}>
         <div className={styles['switch-wrapper']}>
@@ -210,6 +229,20 @@ const Header = () => {
           setShowEnableExperimentModal(false);
         }}
       />
+
+      <ConfirmDialog
+        open={showEnableClickstreamModal}
+        onClose={() => setShowEnableClickstreamModal(false)}
+        headerTitle="Enable/Disable the clickstream events?"
+        description="Doing so will toggle the clickstream state."
+        actionHandler={() => {
+          enableClickStreamApi(
+            `experiments/toggle/click-stream/${experimentId}`,
+            () => setClickStreamEnabled(!isExperimentEnabled),
+          );
+          setShowEnableClickstreamModal(false);
+        }}
+      />
       <ConfirmDialog
         open={showConcludeModal}
         onClose={() => setShowConcludeModal(false)}

src/utils/Api.ts

@@ -363,6 +363,19 @@ export const useExperimentsApi = () => {
     });
   };
 
+  const enableClickStreamApi = (url: string, callBackFn: () => void): void => {
+    put(`${baseUrl}/v2/${url}`, {
+      headers: {},
+      onSuccess: ({ data }: any) => {
+        showSuccesToast('Experiment Updated Successfully');
+        callBackFn();
+      },
+      onError: (error: any) => {
+        showErrorToast(error?.message);
+      },
+    });
+  };
+
   return {
     getExperiments,
     getOwnerDropDownList,
@@ -385,5 +398,6 @@ export const useExperimentsApi = () => {
     enableExperiment,
     addUserToSegment,
     addUserToSegmentWithCSV,
+    enableClickStreamApi,
   };
 };

src/utils/constants.tsx

@@ -30,6 +30,7 @@ export const baseRequirementsInitialState: BaseRequirements = {
   secondaryMetric: '',
   vertical: '',
   teamName: '',
+  enableClickStream: '',
 };
 
 export const configRequirementsInitialState: ConfigRequirements = {
@@ -79,6 +80,7 @@ export const updateExperimentInitialState: UpdateExperiment = {
   overviewData: [],
   populationGraph: [],
   visitorsData: [],
+  enableClickStream: false,
 };
 
 export const litmusInitialState: LitmusInitialStateData = {

src/utils/index.tsx

@@ -191,10 +191,17 @@ export const isNextBtnDisabled = (data: any, activeStep: number) => {
     variants,
     strategies,
     sampleSizeRequired,
+    enableClickStream,
   } = data || {};
   switch (activeStep) {
     case 1:
-      return !experimentName || !hypothesis || !vertical || !teamName;
+      return (
+        !experimentName ||
+        !hypothesis ||
+        !vertical ||
+        !teamName ||
+        !enableClickStream
+      );
     case 2:
       return (
         !!strategies?.filter(
@@ -286,6 +293,7 @@ export const getSaveExperimentPayload = (values: any) => {
     secondaryMetric,
     vertical,
     teamName,
+    enableClickStream,
   } = baseRequirements || {};
   const { strategies, variants } = configRequirements || {};
 
@@ -340,6 +348,7 @@ export const getSaveExperimentPayload = (values: any) => {
     type: ExperimentType.EXPERIMENT,
     vertical,
     teamName,
+    enableClickStream: enableClickStream === 'Yes' ? true : false,
   };
 };
 

src/utils/interface.ts

@@ -121,6 +121,7 @@ export interface BaseRequirements {
   secondaryMetric: string;
   vertical: string;
   teamName: string;
+  enableClickStream: string;
 }
 
 export interface Variant {
@@ -236,6 +237,7 @@ export interface UpdateExperiment {
   overviewData: Array<any>;
   populationGraph: Array<Population>;
   visitorsData: Array<any>;
+  enableClickStream: boolean;
 }
 
 export interface Population {