[MOC-43][MOC-64]: Redirect user to demo url on play mode and undo-modifications fix

apps/mocksi-lite/background.ts

@@ -1,7 +1,13 @@
 import MocksiRollbar from "./MocksiRollbar";
-import { STORAGE_KEY, SignupURL, WebSocketURL } from "./consts";
+import {
+	MOCKSI_RECORDING_STATE,
+	RecordingState,
+	STORAGE_KEY,
+	SignupURL,
+	WebSocketURL,
+} from "./consts";
 import { apiCall } from "./networking";
-import { getEmail, logout } from "./utils";
+import { getAlterations, getEmail, loadAlterations, logout } from "./utils";
 
 export interface Alteration {
 	selector: string;
@@ -315,6 +321,18 @@ function allEventHandler(
 	}
 }
 
+const setPlayMode = async (url?: string) => {
+	const [result] = await chrome.tabs.query({
+		active: true,
+		lastFocusedWindow: true,
+	});
+	await chrome.tabs.create({ url });
+	await chrome.action.setIcon({ path: "./public/pause-icon.png" });
+	await chrome.storage.local.set({
+		[MOCKSI_RECORDING_STATE]: RecordingState.PLAY,
+	});
+};
+
 let currentTabId: number | undefined;
 chrome.runtime.onMessage.addListener(
 	(
@@ -360,6 +378,12 @@ chrome.runtime.onMessage.addListener(
 			return true;
 		}
 
+		if (request.message === "playMode") {
+			const url: string = request.body?.url as string;
+			setPlayMode(url ?? "");
+			return true;
+		}
+
 		sendResponse({ message: request.message, status: "fail" });
 		return false; // No async response for other messages
 	},

apps/mocksi-lite/common/Button.tsx

@@ -18,7 +18,7 @@ const getButtonStyles = (variant: Variant) => {
 		case Variant.primary:
 			return "bg-[#E8F3EC] border-[#E8F3EC] px-6";
 		case Variant.icon:
-			return "bg-[#E8F3EC] border-[#E8F3EC] p-3 max-h-[42px] h-[42px]";
+			return "bg-[#E8F3EC] border-[#E8F3EC] p-3 !max-h-[42px] !h-[42px]";
 		case Variant.secondary:
 			return "border-[#009875] px-6";
 		default:
@@ -35,9 +35,9 @@ const Button = ({
 	const styles = getButtonStyles(variant);
 	return (
 		<div
-			className={`border text-[#009875] w-fit min-h-[42px] rounded-full flex items-center justify-center ${
+			className={`border text-[#009875] w-fit !min-h-[42px] rounded-full flex items-center justify-center ${
 				disabled ? "cursor-not-allowed" : "cursor-pointer"
-			} ${styles} ${className}`}
+			} ${styles} ${className ?? ""}`}
 			onClick={!disabled ? onClick : undefined}
 			onKeyUp={(event) => {
 				event.key === "Enter" && onClick();

apps/mocksi-lite/content/ContentApp.tsx

@@ -51,10 +51,6 @@ function ShadowContentApp({ isOpen, email, initialState }: ContentProps) {
 				return <EditToast state={state} onChangeState={onChangeState} />;
 			case RecordingState.PLAY:
 				return <PlayToast onChangeState={onChangeState} close={closeDialog} />;
-			case RecordingState.HIDDEN:
-				return (
-					<HiddenToast onChangeState={onChangeState} close={closeDialog} />
-				);
 			default:
 				return (
 					<RecordingToast

apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../../consts";
 import editIcon from "../../../public/edit-icon.png";
 import playIcon from "../../../public/play-icon.png";
-import { loadAlterations } from "../../../utils";
+import { loadAlterations, sendMessage } from "../../../utils";
 import { setEditorMode } from "../../EditMode/editMode";
 
 interface DemoItemProps extends Recording {
@@ -23,20 +23,27 @@ const DemoItem = ({
 	alterations,
 	url,
 }: DemoItemProps) => {
+	const domain = new URL(url).hostname;
 	const handleEdit = () => {
 		setEditorMode(true, uuid);
 		loadAlterations(alterations, true);
 		setState(RecordingState.EDITING);
 	};
 
 	const handlePlay = async () => {
-		await chrome.storage.local.set({ [MOCKSI_ALTERATIONS]: alterations });
-		await chrome.storage.local.set({ [MOCKSI_RECORDING_ID]: uuid });
-		loadAlterations(alterations, false);
-		setState(RecordingState.PLAY);
+		await chrome.storage.local.set({
+			[MOCKSI_ALTERATIONS]: alterations,
+			[MOCKSI_RECORDING_ID]: uuid,
+		});
+		if (window.location.href === url) {
+			sendMessage("updateToPauseIcon");
+			loadAlterations(alterations, false);
+			setState(RecordingState.PLAY);
+		} else {
+			sendMessage("playMode", { url });
+		}
 	};
 
-	const domain = new URL(url).hostname;
 	return (
 		<div className={"flex justify-between px-6"}>
 			<div className={"w-[200px]"}>
@@ -61,11 +68,7 @@ const DemoItem = ({
 				<Button
 					variant={Variant.icon}
 					onClick={handlePlay}
-					disabled={
-						!url.includes(window.location.hostname) ||
-						!alterations ||
-						!alterations.length
-					}
+					disabled={!alterations || !alterations.length}
 				>
 					<img src={playIcon} alt={"playIcon"} />
 				</Button>

apps/mocksi-lite/content/Toast/HiddenToast.tsx

@@ -9,6 +9,7 @@ import {
 	loadAlterations,
 	loadRecordingId,
 	sendMessage,
+	undoModifications,
 } from "../../utils";
 import { setEditorMode } from "../EditMode/editMode";
 import Divider from "../Popup/Divider";
@@ -42,6 +43,7 @@ const HiddenToast = ({ onChangeState, close }: HiddenToastProps) => {
 	};
 
 	const handleClose = () => {
+		undoModifications();
 		sendMessage("resetIcon");
 		onChangeState(RecordingState.CREATE);
 		close();

apps/mocksi-lite/content/Toast/PlayToast.tsx

@@ -19,16 +19,24 @@ interface PlayToastProps {
 }
 const PlayToast = ({ onChangeState, close }: PlayToastProps) => {
 	const handleEdit = async () => {
+		sendMessage("resetIcon");
 		const alterations = await getAlterations();
 		loadAlterations(alterations, true);
 		setEditorMode(true);
 		onChangeState(RecordingState.EDITING);
 	};
 	const handleHideToast = () => {
 		sendMessage("updateToPauseIcon");
-		onChangeState(RecordingState.HIDDEN);
+		onChangeState(RecordingState.PLAY);
 		close();
 	};
+
+	const handleStop = () => {
+		sendMessage("resetIcon");
+		undoModifications();
+		onChangeState(RecordingState.CREATE);
+	};
+
 	return (
 		<Toast className={"mb-7 gap-4 py-3 px-4"}>
 			<div
@@ -42,13 +50,7 @@ const PlayToast = ({ onChangeState, close }: PlayToastProps) => {
 			</div>
 			<img src={labeledIcon} alt={"labeledIcon"} />
 			<div className={"flex gap-2"}>
-				<Button
-					variant={Variant.icon}
-					onClick={() => {
-						undoModifications();
-						onChangeState(RecordingState.CREATE);
-					}}
-				>
+				<Button variant={Variant.icon} onClick={handleStop}>
 					<img src={stopIcon} alt={"stopIcon"} />
 				</Button>
 				<Button variant={Variant.icon} onClick={handleEdit}>

apps/mocksi-lite/content/content.tsx

@@ -5,16 +5,36 @@ import {
 	STORAGE_CHANGE_EVENT,
 	SignupURL,
 } from "../consts";
-import { getEmail, sendMessage, setRootPosition } from "../utils";
+import {
+	getAlterations,
+	getEmail,
+	loadAlterations,
+	sendMessage,
+	setRootPosition,
+} from "../utils";
 import ContentApp from "./ContentApp";
 
 let root: ReactDOM.Root;
+async function handlePlayState() {
+	const alterations = await getAlterations();
+	if (alterations?.length) {
+		loadAlterations(alterations, false);
+	}
+}
 
 function initial() {
 	const rootDiv =
 		document.getElementById("extension-root") || document.createElement("div");
 	rootDiv.id = "extension-root";
 	document.body.appendChild(rootDiv);
+
+	chrome.storage.local.get([MOCKSI_RECORDING_STATE], (results) => {
+		const recordingState: RecordingState | null =
+			results[MOCKSI_RECORDING_STATE];
+		if (recordingState === RecordingState.HIDDEN) {
+			handlePlayState();
+		}
+	});
 }
 
 document.addEventListener("DOMContentLoaded", initial);
@@ -45,7 +65,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 					});
 					state = RecordingState.CREATE;
 				}
-				if (recordingState === RecordingState.HIDDEN) {
+				if (recordingState === RecordingState.PLAY) {
 					sendMessage("updateToPlayIcon");
 				}
 				if (

apps/mocksi-lite/utils.ts

@@ -46,6 +46,7 @@ export const setRootPosition = (state: RecordingState | null) => {
 		const bottom =
 			state === RecordingState.READY ||
 			state === RecordingState.CREATE ||
+			state === RecordingState.HIDDEN ||
 			state === RecordingState.PLAY;
 		extensionRoot.className = bottom ? "bottom-extension" : "top-extension";
 	}