IO-3181-Testing-Framework-Selection: Remove Cypress, upgrade Split

client/src/App/App.container.jsx

@@ -1,14 +1,14 @@
 import { ApolloProvider } from "@apollo/client";
-import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
-
 import themeProvider from "./themeProvider";
 import { Userpilot } from "userpilot";
 
@@ -17,13 +17,28 @@ if (import.meta.env.DEV) {
   Userpilot.initialize("NX-69145f08");
 }
 
+// Base Split configuration
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-    key: "anon"
+    key: "anon" // Default key, overridden dynamically by SplitClientProvider
   }
 };
-export const factory = SplitSdk(config);
+
+// Custom provider to manage the Split client key based on imexshopid from Redux
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
+  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
+
+  useEffect(() => {
+    if (splitClient && imexshopid) {
+      // Log readiness for debugging; no need for ready() since isReady is available
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
 
 function AppContainer() {
   const { t } = useTranslation();
@@ -31,7 +46,6 @@ function AppContainer() {
   return (
     <ApolloProvider client={client}>
       <ConfigProvider
-        //componentSize="small"
         input={{ autoComplete: "new-password" }}
         locale={enLocale}
         theme={themeProvider}
@@ -43,8 +57,10 @@ function AppContainer() {
         }}
       >
         <GlobalLoadingBar />
-        <SplitFactoryProvider factory={factory}>
-          <App />
+        <SplitFactoryProvider config={config}>
+          <SplitClientProvider>
+            <App />
+          </SplitClientProvider>
         </SplitFactoryProvider>
       </ConfigProvider>
     </ApolloProvider>

client/src/redux/user/user.actions.js

@@ -118,3 +118,8 @@ export const setCurrentEula = (eula) => ({
 export const acceptEula = () => ({
   type: UserActionTypes.EULA_ACCEPTED
 });
+
+export const setImexShopId = (imexshopid) => ({
+  type: UserActionTypes.SET_IMEX_SHOP_ID,
+  payload: imexshopid
+});

client/src/redux/user/user.reducer.js

@@ -121,6 +121,11 @@ const userReducer = (state = INITIAL_STATE, action) => {
       };
     case UserActionTypes.SET_AUTH_LEVEL:
       return { ...state, authLevel: action.payload };
+    case UserActionTypes.SET_IMEX_SHOP_ID:
+      return {
+        ...state,
+        imexshopid: action.payload
+      };
     default:
       return state;
   }

client/src/redux/user/user.sagas.js

@@ -15,7 +15,6 @@ import { getToken } from "firebase/messaging";
 import i18next from "i18next";
 import LogRocket from "logrocket";
 import { all, call, delay, put, select, takeLatest } from "redux-saga/effects";
-import { factory } from "../../App/App.container";
 import {
   analytics,
   auth,
@@ -35,6 +34,7 @@ import {
   sendPasswordResetFailure,
   sendPasswordResetSuccess,
   setAuthlevel,
+  setImexShopId,
   setInstanceConflict,
   setInstanceId,
   setLocalFingerprint,
@@ -318,7 +318,8 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
       console.log(error);
     }
 
-    factory.client(payload.imexshopid);
+    // Dispatch the imexshopid to Redux store
+    yield put(setImexShopId(payload.imexshopid));
 
     const authRecord = payload.associations.filter((a) => a.useremail.toLowerCase() === userEmail.toLowerCase());
 

client/src/redux/user/user.types.js

@@ -32,6 +32,7 @@ const UserActionTypes = {
   CHECK_ACTION_CODE_SUCCESS: "CHECK_ACTION_CODE_SUCCESS",
   CHECK_ACTION_CODE_FAILURE: "CHECK_ACTION_CODE_FAILURE",
   SET_CURRENT_EULA: "SET_CURRENT_EULA",
-  EULA_ACCEPTED: "EULA_ACCEPTED"
+  EULA_ACCEPTED: "EULA_ACCEPTED",
+  SET_IMEX_SHOP_ID: "SET_IMEX_SHOP_ID"
 };
 export default UserActionTypes;