diff --git a/packages/i18n/src/locales/en/user.json b/packages/i18n/src/locales/en/user.json index 82dc52244..c773ff26d 100644 --- a/packages/i18n/src/locales/en/user.json +++ b/packages/i18n/src/locales/en/user.json @@ -226,7 +226,8 @@ "reminder": "Please complete your profile to access this page." }, "buttons": { - "gotoProfile": "Go to profile" + "gotoProfile": "Go to profile", + "skipProfile": "Skip" } } } diff --git a/packages/i18n/src/locales/fr/user.json b/packages/i18n/src/locales/fr/user.json index c893eb796..c1fd211b3 100644 --- a/packages/i18n/src/locales/fr/user.json +++ b/packages/i18n/src/locales/fr/user.json @@ -225,7 +225,8 @@ "reminder": "Please complete your profile to access this page. (fr)" }, "buttons": { - "gotoProfile": "Go to profile (fr)" + "gotoProfile": "Go to profile (fr)", + "skipProfile": "Skip (fr)" } } } diff --git a/packages/user/src/assets/css/profile-completion-reminder.css b/packages/user/src/assets/css/profile-completion-reminder.css index 3237b8e93..ba4832ae2 100644 --- a/packages/user/src/assets/css/profile-completion-reminder.css +++ b/packages/user/src/assets/css/profile-completion-reminder.css @@ -9,4 +9,5 @@ .profile-completion-reminder > .dz-page-content button { margin-top: 1rem; + width: 18rem; } diff --git a/packages/user/src/context/UserProvider.tsx b/packages/user/src/context/UserProvider.tsx index ddd43ed63..f965cc010 100644 --- a/packages/user/src/context/UserProvider.tsx +++ b/packages/user/src/context/UserProvider.tsx @@ -6,6 +6,7 @@ import { getUserData, removeUserData, setUserData } from "../helpers"; import { useConfig } from "../hooks"; import { isEmailVerified, + isOnGracePeriod, isProfileCompleted, verifySessionRoles, } from "../supertokens/helpers"; @@ -70,6 +71,10 @@ const UserProvider = ({ children }: Properties) => { userData.isProfileCompleted = await isProfileCompleted(); + // if (userData.isProfileCompleted === false) { + // userData.isOnGracePeriod = await isOnGracePeriod(); + // } + await setUserData(userData); setUser(userData); diff --git a/packages/user/src/index.ts b/packages/user/src/index.ts index 69888827a..a67d1d1ad 100644 --- a/packages/user/src/index.ts +++ b/packages/user/src/index.ts @@ -37,7 +37,11 @@ import superTokens from "./supertokens"; import changePassword from "./supertokens/change-password"; import { forgotPassword } from "./supertokens/forgot-password"; import googleLogin from "./supertokens/google-login"; -import { verifySessionRoles, isProfileCompleted } from "./supertokens/helpers"; +import { + verifySessionRoles, + isProfileCompleted, + isOnGracePeriod, +} from "./supertokens/helpers"; import login from "./supertokens/login"; import logout from "./supertokens/logout"; import ProfileValidationClaim from "./supertokens/profileValidationClaim"; @@ -131,6 +135,7 @@ export { superTokens, useEmailVerification, useFirstUserSignup, + isOnGracePeriod, isProfileCompleted, useProfileCompletion, useUser, diff --git a/packages/user/src/supertokens/helpers.ts b/packages/user/src/supertokens/helpers.ts index 364a1e6aa..6aadca55d 100644 --- a/packages/user/src/supertokens/helpers.ts +++ b/packages/user/src/supertokens/helpers.ts @@ -101,8 +101,16 @@ const isProfileCompleted = async (): Promise => { return; } - if (profileClaim.isVerified) { - return true; + return profileClaim.isVerified; +}; + +const isOnGracePeriod = async (): Promise => { + const profileClaim = await Session.getClaimValue({ + claim: new ProfileValidationClaim(), + }); + + if (!profileClaim || profileClaim.isVerified) { + return; } if (profileClaim.gracePeriodEndsAt) { @@ -115,6 +123,7 @@ const isProfileCompleted = async (): Promise => { export { getUserRoles, isEmailVerified, + isOnGracePeriod, isProfileCompleted, verifySessionRoles, }; diff --git a/packages/user/src/types/types.ts b/packages/user/src/types/types.ts index 3115e0d4f..970d78692 100644 --- a/packages/user/src/types/types.ts +++ b/packages/user/src/types/types.ts @@ -4,6 +4,7 @@ export interface UserType extends EmailPasswordUserType { disabled?: boolean; givenName: string | null; isEmailVerified?: boolean; + isOnGracePeriod?: boolean; isProfileCompleted?: boolean; lastLoginAt: number; middleNames: string | null; diff --git a/packages/user/src/views/ProfileCompletionReminder.tsx b/packages/user/src/views/ProfileCompletionReminder.tsx index 02961ac41..3a2f0b1f1 100644 --- a/packages/user/src/views/ProfileCompletionReminder.tsx +++ b/packages/user/src/views/ProfileCompletionReminder.tsx @@ -1,15 +1,44 @@ import { useTranslation } from "@dzangolab/react-i18n"; import { Button, Page } from "@dzangolab/react-ui"; +import { useEffect, useState } from "react"; + +import { isOnGracePeriod } from ".."; +import { useUser } from "../hooks"; const ProfileCompletionReminder = ({ centered = true, onClick, + onSkip, }: { centered?: boolean; onClick?: () => void; + onSkip?: () => void; }) => { + const [isGracePeriod, setIsGracePeriod] = useState( + false, + ); + + const { user, setUser } = useUser(); const { t } = useTranslation("user"); + const handleSkip = async () => { + await onSkip?.(); + + if (user) { + user.isOnGracePeriod = true; + + setUser(user); + } + }; + + useEffect(() => { + const getGracePeriod = async () => { + setIsGracePeriod(await isOnGracePeriod()); + }; + + getGracePeriod(); + }, []); + return ( {t("profileCompletion.buttons.gotoProfile")} + {isGracePeriod && ( + + )} ); };