user: add grace period

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"
     }
   }
 }

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)"
     }
   }
 }

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;
 }

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);

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,

packages/user/src/supertokens/helpers.ts

@@ -101,8 +101,16 @@ const isProfileCompleted = async (): Promise<boolean | undefined> => {
     return;
   }
 
-  if (profileClaim.isVerified) {
-    return true;
+  return profileClaim.isVerified;
+};
+
+const isOnGracePeriod = async (): Promise<boolean | undefined> => {
+  const profileClaim = await Session.getClaimValue({
+    claim: new ProfileValidationClaim(),
+  });
+
+  if (!profileClaim || profileClaim.isVerified) {
+    return;
   }
 
   if (profileClaim.gracePeriodEndsAt) {
@@ -115,6 +123,7 @@ const isProfileCompleted = async (): Promise<boolean | undefined> => {
 export {
   getUserRoles,
   isEmailVerified,
+  isOnGracePeriod,
   isProfileCompleted,
   verifySessionRoles,
 };

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;

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<boolean | undefined>(
+    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 (
     <Page
       className="profile-completion-reminder"
@@ -20,6 +49,11 @@ const ProfileCompletionReminder = ({
       <Button onClick={onClick}>
         {t("profileCompletion.buttons.gotoProfile")}
       </Button>
+      {isGracePeriod && (
+        <Button onClick={handleSkip}>
+          {t("profileCompletion.buttons.skipProfile")}
+        </Button>
+      )}
     </Page>
   );
 };