add member onboarding

pages/api/v1/auth/[...nextauth].ts

@@ -1393,6 +1393,7 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
             },
             include: {
               subscriptions: true,
+              parentSubscription: true,
             },
           });
 

pages/api/v1/users/[id].ts

@@ -41,6 +41,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
       },
       include: {
         subscriptions: true,
+        parentSubscription: true,
       },
     });
 

pages/member-onboarding.tsx

@@ -0,0 +1,158 @@
+import Button from "@/components/ui/Button";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { FormEvent, useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { Trans, useTranslation } from "next-i18next";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
+import { useSession } from "next-auth/react";
+
+interface FormData {
+  password: string;
+  name: string;
+}
+
+export default function MemberOnboarding() {
+  const { t } = useTranslation();
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const router = useRouter();
+
+  const [form, setForm] = useState<FormData>({
+    password: "",
+    name: "",
+  });
+
+  const { data: user = {} } = useUser();
+  const updateUser = useUpdateUser();
+
+  const { status } = useSession();
+
+  useEffect(() => {
+    toast.success(t("accepted_invitation_please_fill"));
+  }, []);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (form.password !== "" && form.name !== "" && !submitLoader) {
+      setSubmitLoader(true);
+
+      const load = toast.loading(t("sending_password_recovery_link"));
+
+      await updateUser.mutateAsync(
+        {
+          ...user,
+          name: form.name,
+          password: form.password,
+        },
+        {
+          onSuccess: (data) => {
+            router.push("/dashboard");
+          },
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
+              toast.success(t("settings_applied"));
+            }
+          },
+        }
+      );
+
+      setSubmitLoader(false);
+    } else {
+      toast.error(t("please_fill_all_fields"));
+    }
+  }
+
+  return (
+    <CenteredForm>
+      <form onSubmit={submit}>
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
+          <p className="text-3xl text-center font-extralight">
+            {t("finalize_profile")}
+          </p>
+
+          <div className="divider my-0"></div>
+
+          <p
+            style={{
+              whiteSpace: "pre-line",
+            }}
+          >
+            {t("invitation_desc", {
+              owner: user?.parentSubscription?.user?.email,
+            })}
+          </p>
+
+          <div>
+            <p className="text-sm w-fit font-semibold mb-1">
+              {t("display_name")}
+            </p>
+            <TextInput
+              autoFocus
+              placeholder="John Doe"
+              value={form.name}
+              className="bg-base-100"
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <p className="text-sm w-fit font-semibold mb-1">
+              {t("new_password")}
+            </p>
+            <TextInput
+              type="password"
+              placeholder="••••••••••••••"
+              value={form.password}
+              className="bg-base-100"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            />
+          </div>
+
+          {process.env.NEXT_PUBLIC_STRIPE && (
+            <div className="text-xs text-neutral mb-3">
+              <p>
+                <Trans
+                  i18nKey="sign_up_agreement"
+                  components={[
+                    <Link
+                      href="https://linkwarden.app/tos"
+                      className="font-semibold"
+                      data-testid="terms-of-service-link"
+                      key={0}
+                    />,
+                    <Link
+                      href="https://linkwarden.app/privacy-policy"
+                      className="font-semibold"
+                      data-testid="privacy-policy-link"
+                      key={1}
+                    />,
+                  ]}
+                />
+              </p>
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            intent="accent"
+            className="mt-2"
+            size="full"
+            loading={submitLoader}
+          >
+            {t("sign_up")}
+          </Button>
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
+
+export { getServerSideProps };

pages/subscribe.tsx

@@ -23,13 +23,13 @@ export default function Subscribe() {
   const { data: user = {} } = useUser();
 
   useEffect(() => {
+    console.log("user", user);
     if (
       session.status === "authenticated" &&
       user.id &&
-      user?.subscription?.active
-    ) {
+      (user?.subscription?.active || user.parentSubscription?.active)
+    )
       router.push("/dashboard");
-    }
   }, [session.status, user]);
 
   async function submit() {