diff --git a/packages/web/src/components/DeleteAccountDialog/index.ee.jsx b/packages/web/src/components/DeleteAccountDialog/index.ee.jsx index c4d3d08c..17fc568e 100644 --- a/packages/web/src/components/DeleteAccountDialog/index.ee.jsx +++ b/packages/web/src/components/DeleteAccountDialog/index.ee.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import { useNavigate } from 'react-router-dom'; import { useMutation } from '@apollo/client'; + import * as URLS from 'config/urls'; import ConfirmationDialog from 'components/ConfirmationDialog'; import apolloClient from 'graphql/client'; @@ -13,15 +14,18 @@ import useCurrentUser from 'hooks/useCurrentUser'; function DeleteAccountDialog(props) { const [deleteCurrentUser] = useMutation(DELETE_CURRENT_USER); const formatMessage = useFormatMessage(); - const currentUser = useCurrentUser(); + const { data: currentUser } = useCurrentUser(); + const authentication = useAuthentication(); const navigate = useNavigate(); + const handleConfirm = React.useCallback(async () => { await deleteCurrentUser(); authentication.updateToken(''); await apolloClient.clearStore(); navigate(URLS.LOGIN); - }, [deleteCurrentUser, currentUser]); + }, [deleteCurrentUser, currentUser?.data]); + return ( { const theme = useTheme(); - const currentUser = useCurrentUser(); + const { data: currentUser } = useCurrentUser(); const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md')); + React.useEffect(function initiateChatwoot() { window.chatwootSDK.run({ websiteToken: 'EFyq5MTsvS7XwUrwSH36VskT', baseUrl: appConfig.chatwootBaseUrl, }); + return function removeChatwoot() { window.$chatwoot.reset(); window.$chatwoot.toggleBubbleVisibility('hide'); }; }, []); + React.useEffect( function initiateUser() { - if (!currentUser?.id || !ready) return; - window.$chatwoot.setUser(currentUser.id, { - email: currentUser.email, - name: currentUser.fullName, + if (!currentUser?.data?.id || !ready) return; + window.$chatwoot.setUser(currentUser.data?.id, { + email: currentUser?.data?.email, + name: currentUser?.data?.fullName, }); + if (!matchSmallScreens) { window.$chatwoot.toggleBubbleVisibility('show'); } }, - [currentUser, ready, matchSmallScreens], + [currentUser?.data, ready, matchSmallScreens], ); React.useLayoutEffect( function hideChatwoot() { @@ -40,6 +46,7 @@ const Chatwoot = ({ ready }) => { }, [matchSmallScreens], ); + return ; }; export default Chatwoot; diff --git a/packages/web/src/components/UpgradeFreeTrial/index.ee.jsx b/packages/web/src/components/UpgradeFreeTrial/index.ee.jsx index c5773274..161adacd 100644 --- a/packages/web/src/components/UpgradeFreeTrial/index.ee.jsx +++ b/packages/web/src/components/UpgradeFreeTrial/index.ee.jsx @@ -21,7 +21,7 @@ import usePaddle from 'hooks/usePaddle.ee'; export default function UpgradeFreeTrial() { const { data: plans, isLoading: isPaymentPlansLoading } = usePaymentPlans(); - const currentUser = useCurrentUser(); + const { data: currentUser } = useCurrentUser(); const { loaded: paddleLoaded } = usePaddle(); const [selectedIndex, setSelectedIndex] = React.useState(0); const selectedPlan = plans?.data?.[selectedIndex]; @@ -30,13 +30,13 @@ export default function UpgradeFreeTrial() { const handleCheckout = React.useCallback(() => { window.Paddle.Checkout?.open({ product: selectedPlan.productId, - email: currentUser.email, + email: currentUser?.data?.email, passthrough: JSON.stringify({ - id: currentUser.id, - email: currentUser.email, + id: currentUser?.data?.id, + email: currentUser?.data?.email, }), }); - }, [selectedPlan, currentUser]); + }, [selectedPlan, currentUser?.data]); if (isPaymentPlansLoading || !plans?.data?.length) return null; diff --git a/packages/web/src/hooks/useCurrentUser.js b/packages/web/src/hooks/useCurrentUser.js index 33d7b546..c5679715 100644 --- a/packages/web/src/hooks/useCurrentUser.js +++ b/packages/web/src/hooks/useCurrentUser.js @@ -1,6 +1,18 @@ -import { useQuery } from '@apollo/client'; -import { GET_CURRENT_USER } from 'graphql/queries/get-current-user'; +import { useQuery } from '@tanstack/react-query'; + +import api from 'helpers/api'; + export default function useCurrentUser() { - const { data } = useQuery(GET_CURRENT_USER); - return data?.getCurrentUser; + const query = useQuery({ + queryKey: ['currentUser'], + queryFn: async ({ signal }) => { + const { data } = await api.get(`/v1/users/me`, { + signal, + }); + + return data; + }, + }); + + return query; } diff --git a/packages/web/src/hooks/useCurrentUserAbility.js b/packages/web/src/hooks/useCurrentUserAbility.js index 7985a67c..169d06a5 100644 --- a/packages/web/src/hooks/useCurrentUserAbility.js +++ b/packages/web/src/hooks/useCurrentUserAbility.js @@ -1,6 +1,8 @@ import userAbility from 'helpers/userAbility'; import useCurrentUser from 'hooks/useCurrentUser'; + export default function useCurrentUserAbility() { - const currentUser = useCurrentUser(); - return userAbility(currentUser); + const { data: currentUser } = useCurrentUser(); + + return userAbility(currentUser?.data); } diff --git a/packages/web/src/pages/ProfileSettings/index.jsx b/packages/web/src/pages/ProfileSettings/index.jsx index 305d1584..01c23f63 100644 --- a/packages/web/src/pages/ProfileSettings/index.jsx +++ b/packages/web/src/pages/ProfileSettings/index.jsx @@ -9,6 +9,7 @@ import { styled } from '@mui/material/styles'; import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; import * as React from 'react'; import * as yup from 'yup'; + import Container from 'components/Container'; import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee'; import Form from 'components/Form'; @@ -17,6 +18,7 @@ import TextField from 'components/TextField'; import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user'; import useCurrentUser from 'hooks/useCurrentUser'; import useFormatMessage from 'hooks/useFormatMessage'; + const validationSchema = yup .object({ fullName: yup.string().required(), @@ -27,27 +29,32 @@ const validationSchema = yup .oneOf([yup.ref('password')], 'Passwords must match'), }) .required(); + const StyledForm = styled(Form)` display: flex; align-items: end; flex-direction: column; `; + function ProfileSettings() { const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false); const enqueueSnackbar = useEnqueueSnackbar(); - const currentUser = useCurrentUser(); + const { data: currentUser } = useCurrentUser(); const formatMessage = useFormatMessage(); const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER); + const handleProfileSettingsUpdate = async (data) => { const { fullName, password, email } = data; const mutationInput = { fullName, email, }; + if (password) { mutationInput.password = password; } + await updateCurrentUser({ variables: { input: mutationInput, @@ -55,12 +62,13 @@ function ProfileSettings() { optimisticResponse: { updateCurrentUser: { __typename: 'User', - id: currentUser.id, + id: currentUser?.data?.id, fullName, email, }, }, }); + enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), { variant: 'success', SnackbarProps: { @@ -68,6 +76,7 @@ function ProfileSettings() { }, }); }; + return ( @@ -78,7 +87,7 @@ function ProfileSettings() {