From 41db773fde64647cee702f5bf7708b25ccfcbf11 Mon Sep 17 00:00:00 2001 From: Rishab Sanyal Date: Wed, 14 Aug 2024 00:30:52 -0700 Subject: [PATCH 1/3] Adding files to trigger modal as designed --- .../EmailPassword/EmailPasswordSignupForm.tsx | 14 +++++++++++ .../Modals/RecieveUpdatesModal/index.tsx | 24 ++++++++++--------- web/src/components/RequireAuth.tsx | 6 ++--- web/src/store/features/common/initialState.ts | 2 ++ 4 files changed, 32 insertions(+), 14 deletions(-) diff --git a/web/src/components/Auth/EmailPassword/EmailPasswordSignupForm.tsx b/web/src/components/Auth/EmailPassword/EmailPasswordSignupForm.tsx index 290afea50..630b75122 100644 --- a/web/src/components/Auth/EmailPassword/EmailPasswordSignupForm.tsx +++ b/web/src/components/Auth/EmailPassword/EmailPasswordSignupForm.tsx @@ -1,5 +1,6 @@ import { CircularProgress } from "@mui/material"; import { useState } from "react"; +import { useDispatch } from "react-redux"; import CustomButton from "../../common/CustomButton/index.tsx"; import { Toast } from "../../Toast.tsx"; import { useNavigate } from "react-router-dom"; @@ -10,9 +11,12 @@ import { import CustomInput from "../../Inputs/CustomInput.tsx"; import { InputTypes } from "../../../types/inputs/inputTypes.ts"; import ShowPasswordIcon from "./ShowPasswordIcon.tsx"; +import { setCommonKey } from "../../../store/features/common/commonSlice.ts"; function EmailPasswordSignupForm() { const navigate = useNavigate(); + const dispatch = useDispatch(); + const [error, setError] = useState(""); const [btnLoading, setBtnLoading] = useState(false); const [triggerSignup, { isLoading }] = useSignupMutation(); @@ -36,6 +40,15 @@ function EmailPasswordSignupForm() { navigate("/login"); } + function deleteLastLogin() { + localStorage.removeItem("last_login") + + dispatch(setCommonKey({ + key: "productUpdateStatus", + value : false } + )); + } + const getError = (err) => { const errObj = err?.data; if (errObj && Object.keys(errObj).length !== 0) { @@ -66,6 +79,7 @@ function EmailPasswordSignupForm() { setPassword(""); setFirstName(""); setLastName(""); + deleteLastLogin(); redirectToLoginAfterSignup(); } catch (err) { diff --git a/web/src/components/Modals/RecieveUpdatesModal/index.tsx b/web/src/components/Modals/RecieveUpdatesModal/index.tsx index a4b4e76b2..332b27693 100644 --- a/web/src/components/Modals/RecieveUpdatesModal/index.tsx +++ b/web/src/components/Modals/RecieveUpdatesModal/index.tsx @@ -1,23 +1,25 @@ import React, { useEffect } from "react"; +import { useDispatch } from "react-redux"; import Overlay from "../../Overlay/index.tsx"; import { CloseRounded } from "@mui/icons-material"; import CustomButton from "../../common/CustomButton/index.tsx"; import posthog from "posthog-js"; +import { setCommonKey } from "../../../store/features/common/commonSlice.ts"; const RecieveUpdatesModal = ({ isOpen, close }) => { - const handleYes = () => { - posthog.capture("POST_LOGIN_SUBSCRIPTION_UPDATE_INTERACTED", { - subscription_requested: true, - }); - close(); - }; + const dispatch = useDispatch(); + + const handleProductUpdateSignup = (signupStatus: boolean) => { + dispatch(setCommonKey({ + key: "productUpdateStatus", + value : true } + )); - const handleNo = () => { posthog.capture("POST_LOGIN_SUBSCRIPTION_UPDATE_INTERACTED", { - subscription_requested: false, + subscription_requested: signupStatus, }); close(); - }; + } useEffect(() => { if (isOpen) { @@ -41,11 +43,11 @@ const RecieveUpdatesModal = ({ isOpen, close }) => {
handleProductUpdateSignup(true)} className="!bg-violet-500 !text-white hover:!text-violet-500 hover:!bg-transparent"> Yes Please! - No thanks + handleProductUpdateSignup(false)}>No thanks
diff --git a/web/src/components/RequireAuth.tsx b/web/src/components/RequireAuth.tsx index da4e8105f..3ce391523 100644 --- a/web/src/components/RequireAuth.tsx +++ b/web/src/components/RequireAuth.tsx @@ -4,6 +4,7 @@ import { selectAccessToken, selectLastLogin, } from "../store/features/auth/authSlice.ts"; +import { commonKeySelector } from "../store/features/common/selectors/commonKeySelector.ts"; import FakeLoading from "./common/Loading/FakeLoading.tsx"; import RecieveUpdatesModal from "./Modals/RecieveUpdatesModal/index.tsx"; import useToggle from "../hooks/common/useToggle.js"; @@ -11,6 +12,7 @@ import useToggle from "../hooks/common/useToggle.js"; const RequireAuth = () => { const accessToken = useSelector(selectAccessToken); const lastLogin = useSelector(selectLastLogin); + const commonKey = useSelector(commonKeySelector) const location = useLocation(); const { isOpen, toggle } = useToggle(true); @@ -28,9 +30,7 @@ const RequireAuth = () => { )} - {/* {!lastLogin && ( - - )} */} + {!lastLogin && !commonKey.productUpdateStatus && } ); }; diff --git a/web/src/store/features/common/initialState.ts b/web/src/store/features/common/initialState.ts index 3d94edeb9..399a6283f 100644 --- a/web/src/store/features/common/initialState.ts +++ b/web/src/store/features/common/initialState.ts @@ -3,6 +3,7 @@ export type InitialStateType = { connectorOptions?: any[]; supportedTaskTypes?: any[]; interpreterTypes?: any[]; + productUpdateStatus?: any; }; export const initialState: InitialStateType = { @@ -10,4 +11,5 @@ export const initialState: InitialStateType = { connectorOptions: [], supportedTaskTypes: [], interpreterTypes: [], + productUpdateStatus: false, }; From d90f7b6fcaf0034e3a2a625f4d4a12509fb7502f Mon Sep 17 00:00:00 2001 From: Rishab Sanyal Date: Fri, 23 Aug 2024 10:27:09 -0700 Subject: [PATCH 2/3] Addressing comments --- web/src/components/Modals/RecieveUpdatesModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/Modals/RecieveUpdatesModal/index.tsx b/web/src/components/Modals/RecieveUpdatesModal/index.tsx index 332b27693..4cb326ed1 100644 --- a/web/src/components/Modals/RecieveUpdatesModal/index.tsx +++ b/web/src/components/Modals/RecieveUpdatesModal/index.tsx @@ -29,7 +29,7 @@ const RecieveUpdatesModal = ({ isOpen, close }) => { return (
- + {handleProductUpdateSignup(false)}} visible={isOpen}>
Date: Thu, 5 Sep 2024 12:04:37 +0530 Subject: [PATCH 3/3] fix the modal and use the same event on close button --- .../Modals/RecieveUpdatesModal/index.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/web/src/components/Modals/RecieveUpdatesModal/index.tsx b/web/src/components/Modals/RecieveUpdatesModal/index.tsx index 4cb326ed1..84093c512 100644 --- a/web/src/components/Modals/RecieveUpdatesModal/index.tsx +++ b/web/src/components/Modals/RecieveUpdatesModal/index.tsx @@ -10,16 +10,18 @@ const RecieveUpdatesModal = ({ isOpen, close }) => { const dispatch = useDispatch(); const handleProductUpdateSignup = (signupStatus: boolean) => { - dispatch(setCommonKey({ - key: "productUpdateStatus", - value : true } - )); + dispatch( + setCommonKey({ + key: "productUpdateStatus", + value: true, + }), + ); posthog.capture("POST_LOGIN_SUBSCRIPTION_UPDATE_INTERACTED", { subscription_requested: signupStatus, }); close(); - } + }; useEffect(() => { if (isOpen) { @@ -29,10 +31,14 @@ const RecieveUpdatesModal = ({ isOpen, close }) => { return (
- {handleProductUpdateSignup(false)}} visible={isOpen}> -
+ { + handleProductUpdateSignup(false); + }} + visible={isOpen}> +
handleProductUpdateSignup(false)} className="absolute top-0 right-0 m-2 cursor-pointer">
@@ -47,7 +53,9 @@ const RecieveUpdatesModal = ({ isOpen, close }) => { className="!bg-violet-500 !text-white hover:!text-violet-500 hover:!bg-transparent"> Yes Please! - handleProductUpdateSignup(false)}>No thanks + handleProductUpdateSignup(false)}> + No thanks +