From 454b6ed98ad27f7ddbd5f5ef025deeae201b03f7 Mon Sep 17 00:00:00 2001
From: ansen01-svg <ansenbeyc73@gmail.com>
Date: Sun, 15 Dec 2024 10:43:18 +0530
Subject: [PATCH] feat: added email display in account settings page

---
 .changeset/eight-yaks-itch.md                 |   5 +
 .gitignore                                    |   2 +
 convex/_generated/api.d.ts                    |   4 +-
 convex/users.ts                               |   7 ++
 .../EditEmailSetting/EditEmailSetting.tsx     | 112 ++++++++++++++++++
 .../settings/EditEmailSetting/index.tsx       |   1 +
 .../EditNameSetting/EditNameSetting.tsx       |   3 +-
 src/components/settings/index.ts              |   1 +
 .../_authenticated/settings/account.tsx       |   2 +
 9 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/eight-yaks-itch.md
 create mode 100644 src/components/settings/EditEmailSetting/EditEmailSetting.tsx
 create mode 100644 src/components/settings/EditEmailSetting/index.tsx

diff --git a/.changeset/eight-yaks-itch.md b/.changeset/eight-yaks-itch.md
new file mode 100644
index 0000000..087eeb7
--- /dev/null
+++ b/.changeset/eight-yaks-itch.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Added email display in account settings page.
diff --git a/.gitignore b/.gitignore
index 08a4462..8a12f00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,5 @@ node_modules
 
 # Local files
 *.local
+
+.env.local
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
index 9eb0e7a..0a33f91 100644
--- a/convex/_generated/api.d.ts
+++ b/convex/_generated/api.d.ts
@@ -25,8 +25,8 @@ import type * as seed from "../seed.js";
 import type * as topics from "../topics.js";
 import type * as userFormData from "../userFormData.js";
 import type * as userQuests from "../userQuests.js";
-import type * as userSettings from "../userSettings.js";
 import type * as users from "../users.js";
+import type * as userSettings from "../userSettings.js";
 import type * as validators from "../validators.js";
 
 /**
@@ -50,8 +50,8 @@ declare const fullApi: ApiFromModules<{
   topics: typeof topics;
   userFormData: typeof userFormData;
   userQuests: typeof userQuests;
-  userSettings: typeof userSettings;
   users: typeof users;
+  userSettings: typeof userSettings;
   validators: typeof validators;
 }>;
 export declare const api: FilterApi<
diff --git a/convex/users.ts b/convex/users.ts
index 6a1a56b..02bff7a 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -50,6 +50,13 @@ export const setName = userMutation({
   },
 });
 
+export const setEmail = userMutation({
+  args: { email: v.optional(v.string()) },
+  handler: async (ctx, args) => {
+    await ctx.db.patch(ctx.userId, { email: args.email });
+  },
+});
+
 export const setResidence = userMutation({
   args: { residence: jurisdiction },
   handler: async (ctx, args) => {
diff --git a/src/components/settings/EditEmailSetting/EditEmailSetting.tsx b/src/components/settings/EditEmailSetting/EditEmailSetting.tsx
new file mode 100644
index 0000000..9fc4f4f
--- /dev/null
+++ b/src/components/settings/EditEmailSetting/EditEmailSetting.tsx
@@ -0,0 +1,112 @@
+import {
+  Banner,
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  TextField,
+} from "@/components/common";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { SettingsItem } from "../SettingsItem";
+
+type EditEmailModalProps = {
+  defaultEmail: string;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const EditEmailModal = ({
+  defaultEmail,
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: EditEmailModalProps) => {
+  const updateEmail = useMutation(api.users.setEmail);
+  const [email, setEmail] = useState(defaultEmail);
+  const [error, setError] = useState<string>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(undefined);
+
+    try {
+      setIsSubmitting(true);
+      await updateEmail({ email: email.trim() });
+      onSubmit();
+      toast.success("Email updated.");
+    } catch (err) {
+      setError("Failed to update email. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader
+        title="Email address"
+        description="This is the email we’ll use to contact you."
+      />
+      <Form onSubmit={handleSubmit} className="w-full">
+        {error && <Banner variant="danger">{error}</Banner>}
+        <TextField
+          label="Email"
+          name="email"
+          type="email"
+          value={email}
+          onChange={(value) => {
+            setEmail(value);
+            setError(undefined);
+          }}
+          className="w-full"
+          isRequired
+        />
+        <ModalFooter>
+          <Button
+            variant="secondary"
+            isDisabled={isSubmitting}
+            onPress={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary" isDisabled={isSubmitting}>
+            Save
+          </Button>
+        </ModalFooter>
+      </Form>
+    </Modal>
+  );
+};
+
+type EditEmailSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditEmailSetting = ({ user }: EditEmailSettingProps) => {
+  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Email address"
+      description="This is the email we’ll use to contact you."
+    >
+      <Button icon={Pencil} onPress={() => setIsEmailModalOpen(true)}>
+        {user?.email ?? "Set email"}
+      </Button>
+      <EditEmailModal
+        isOpen={isEmailModalOpen}
+        onOpenChange={setIsEmailModalOpen}
+        defaultEmail={user.email ?? ""}
+        onSubmit={() => setIsEmailModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditEmailSetting/index.tsx b/src/components/settings/EditEmailSetting/index.tsx
new file mode 100644
index 0000000..80982e8
--- /dev/null
+++ b/src/components/settings/EditEmailSetting/index.tsx
@@ -0,0 +1 @@
+export * from "./EditEmailSetting";
diff --git a/src/components/settings/EditNameSetting/EditNameSetting.tsx b/src/components/settings/EditNameSetting/EditNameSetting.tsx
index 8b1df2d..2a5aeab 100644
--- a/src/components/settings/EditNameSetting/EditNameSetting.tsx
+++ b/src/components/settings/EditNameSetting/EditNameSetting.tsx
@@ -63,8 +63,9 @@ const EditNameModal = ({
       <Form onSubmit={handleSubmit} className="w-full">
         {error && <Banner variant="danger">{error}</Banner>}
         <TextField
-          name="name"
           label="Name"
+          name="name"
+          type="text"
           value={name}
           onChange={(value) => {
             setName(value);
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index 5b7239d..b9f2610 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -1,6 +1,7 @@
 export * from "./DeleteAccountSetting";
 export * from "./EditBirthplaceSetting";
 export * from "./EditNameSetting";
+export * from "./EditEmailSetting";
 export * from "./EditMinorSetting";
 export * from "./EditResidenceSetting";
 export * from "./EditThemeSetting";
diff --git a/src/routes/_authenticated/settings/account.tsx b/src/routes/_authenticated/settings/account.tsx
index 23c8316..a0d4b44 100644
--- a/src/routes/_authenticated/settings/account.tsx
+++ b/src/routes/_authenticated/settings/account.tsx
@@ -2,6 +2,7 @@ import { PageHeader } from "@/components/app";
 import {
   DeleteAccountSetting,
   EditBirthplaceSetting,
+  EditEmailSetting,
   EditMinorSetting,
   EditNameSetting,
   EditResidenceSetting,
@@ -30,6 +31,7 @@ function SettingsAccountRoute() {
         <>
           <SettingsGroup title="Personal Information">
             <EditNameSetting user={user} />
+            <EditEmailSetting user={user} />
             <EditMinorSetting user={user} />
             <EditResidenceSetting user={user} />
             <EditBirthplaceSetting user={user} />