refactor(storefront): ♻️ updated account settings

apps/api/src/entities/Account.ts

@@ -21,7 +21,8 @@ export class Account extends BaseEntity {
 	@Column()
 	userId!: number;
 
-	@ManyToOne(() => User, (user) => user.addresses)
+	@Field(() => User)
+	@ManyToOne(() => User, (user) => user.accounts)
 	user!: User;
 
 	@Field(() => String)

apps/api/src/entities/User.ts

@@ -85,6 +85,7 @@ export class User extends BaseEntity {
 	@OneToMany(() => UserPayment, (userpayment) => userpayment.user)
 	userpayments!: UserPayment[];
 
+	@Field(() => [Account], { nullable: true })
 	@OneToMany(() => Account, (account) => account.user)
 	accounts!: Account[];
 

apps/api/src/resolvers/user.ts

@@ -70,11 +70,12 @@ export class UserResolver {
 		if (!req.session?.userId) {
 			return null;
 		}
+
 		return User.findOne({
-			where: { id: req.session?.userId },
 			relations: {
 				accounts: true,
 			},
+			where: { id: req.session?.userId },
 		});
 	}
 

apps/storefront/src/components/pages/account/AccountSetting.tsx

@@ -6,11 +6,14 @@ import {
 	Text,
 	Stack,
 	StackDivider,
+	Icon,
+	Tooltip,
 } from "@chakra-ui/react";
 
 import dayjs from "dayjs";
 import { useRef } from "react";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { MdVerified } from "react-icons/md";
 import { useMeQuery } from "@/generated/graphql";
 import PageLoader from "@/components/shared/PageLoader";
 import ModalButton from "@/components/ui/ModalButton";
@@ -92,7 +95,21 @@ const AccountSettings = () => {
 					title="Login details"
 					description="Change your email and password"
 				>
-					<Text fontSize="sm">{data?.me?.email}</Text>
+					<HStack>
+						<Text fontSize="sm">
+							<strong>Email:</strong> {data?.me?.email}
+						</Text>
+						{data?.me?.email_verified ? (
+							<Tooltip hasArrow label="Verified" placement="bottom">
+								<Icon as={MdVerified} color="green" />
+							</Tooltip>
+						) : null}
+					</HStack>
+					{data?.me?.phone_number && (
+						<Text fontSize="sm">
+							<strong>Phone Number:</strong> {data?.me?.phone_number}
+						</Text>
+					)}
 					<HStack mt="5">
 						<Button size="sm" fontWeight="normal">
 							Change Phone Number

apps/storefront/src/components/pages/account/DangerZone.tsx

@@ -1,25 +1,41 @@
 import type { StackProps } from "@chakra-ui/react";
-import { Button, Stack, Text } from "@chakra-ui/react";
+import { Button, Stack, Text, useToast } from "@chakra-ui/react";
 
 import Card from "./Card";
 import HeadingGroup from "./HeadingGroup";
 
-const DangerZone = (props: StackProps) => (
-	<Stack as="section" spacing="6" {...props}>
-		<HeadingGroup
-			title="Danger zone"
-			description="Irreversible and destructive actions"
-		/>
-		<Card>
-			<Text fontWeight="bold">Delete account and data</Text>
-			<Text fontSize="sm" mt="1" mb="3">
-				Once you delete your user, there is no going back. Please be certain.
-			</Text>
-			<Button size="sm" colorScheme="red">
-				Delete account
-			</Button>
-		</Card>
-	</Stack>
-);
+const DangerZone = (props: StackProps) => {
+	const toast = useToast();
+
+	return (
+		<Stack as="section" spacing="6" {...props}>
+			<HeadingGroup
+				title="Danger zone"
+				description="Irreversible and destructive actions"
+			/>
+			<Card>
+				<Text fontWeight="bold">Delete account and data</Text>
+				<Text fontSize="sm" mt="1" mb="3">
+					Once you delete your user, there is no going back. Please be certain.
+				</Text>
+				<Button
+					size="sm"
+					colorScheme="red"
+					onClick={() => {
+						toast({
+							title: "Feature Comming Soon",
+							description: "It will be very available soon.",
+							status: "info",
+							duration: 5000,
+							isClosable: true,
+						});
+					}}
+				>
+					Delete account
+				</Button>
+			</Card>
+		</Stack>
+	);
+};
 
 export default DangerZone;

apps/storefront/src/components/pages/account/SocialAccount.tsx

@@ -1,12 +1,21 @@
 import type { FlexProps } from "@chakra-ui/react";
-import { Button, Flex, HStack, Icon, IconButton, Text } from "@chakra-ui/react";
+import {
+	Avatar,
+	Button,
+	Flex,
+	HStack,
+	Icon,
+	IconButton,
+	Text,
+} from "@chakra-ui/react";
 import type React from "react";
 import { HiX } from "react-icons/hi";
 
 interface SocialAccountProps extends FlexProps {
 	provider: string;
 	icon: React.ElementType;
 	iconColor?: string;
+	imageUrl?: string;
 	username?: string;
 	onConnect?: () => void;
 	onDisconnect?: () => void;
@@ -17,21 +26,25 @@ const SocialAccount = (props: SocialAccountProps) => {
 		provider,
 		icon,
 		iconColor,
+		imageUrl,
 		username,
 		onConnect,
 		onDisconnect,
 		...flexProps
 	} = props;
 	return (
-		<Flex align="center" {...flexProps}>
+		<Flex align="center" gap={2} {...flexProps}>
 			<HStack width="10rem">
 				<Icon as={icon} color={iconColor} />
 				<Text fontSize="sm">{provider}</Text>
 			</HStack>
 			{username ? (
-				<Text flex="1" fontWeight="semibold" fontSize="sm">
-					{username}
-				</Text>
+				<HStack>
+					{imageUrl && <Avatar size="sm" src={imageUrl} />}
+					<Text flex="1" fontWeight="semibold" fontSize="sm">
+						{username}
+					</Text>
+				</HStack>
 			) : (
 				<Button size="sm" fontWeight="normal" onClick={onConnect}>
 					Connect
@@ -55,6 +68,7 @@ const SocialAccount = (props: SocialAccountProps) => {
 SocialAccount.defaultProps = {
 	iconColor: "gray.500",
 	username: undefined,
+	imageUrl: undefined,
 	onConnect: undefined,
 	onDisconnect: undefined,
 };

apps/storefront/src/components/pages/account/SocialAccountSettings.tsx

@@ -1,30 +1,74 @@
 import type { StackProps } from "@chakra-ui/react";
-import { Stack } from "@chakra-ui/react";
-import { FaFacebook } from "react-icons/fa";
-
+import { Spinner, Stack } from "@chakra-ui/react";
 import { FcGoogle } from "react-icons/fc";
+import { useMeWithAccountQuery } from "@/generated/graphql";
+import Result from "@/components/shared/Result";
+import { capitalize, parseJwt } from "@/utils/helpers";
+import { getGoogleOAuthUrl } from "@/components/auth/AuthProvider";
 import Card from "./Card";
 import HeadingGroup from "./HeadingGroup";
 import SocialAccount from "./SocialAccount";
 
-const SocialAccountSettings = (props: StackProps) => (
-	<Stack as="section" spacing="6" {...props}>
-		<HeadingGroup
-			title="Connected accounts"
-			description="Connect your Hamropasal account to one or more provides"
-		/>
-		<Card>
-			<Stack spacing="5">
-				<SocialAccount provider="Google" icon={FcGoogle} username="Rohit Sah" />
-				<SocialAccount
-					provider="Facebook"
-					icon={FaFacebook}
-					// username="sahrohit9586"
-					iconColor="blue.500"
-				/>
-			</Stack>
-		</Card>
-	</Stack>
-);
+const providers = [
+	{
+		provider: "google",
+		icon: FcGoogle,
+		onConnect: () => {
+			window.location.href = getGoogleOAuthUrl();
+		},
+	},
+];
+
+const SocialAccountSettings = (props: StackProps) => {
+	const { data, loading, error } = useMeWithAccountQuery();
+
+	if (loading) {
+		return <Spinner />;
+	}
+
+	if (error)
+		return (
+			<Result
+				heading={error.name}
+				text={error.message}
+				type="error"
+				dump={error.stack}
+			/>
+		);
+
+	return (
+		<Stack as="section" spacing="6" {...props}>
+			<HeadingGroup
+				title="Connected accounts"
+				description="Connect your Hamropasal account to one or more provides"
+			/>
+			<Card>
+				<Stack spacing="5">
+					{providers?.map((provider) => {
+						let profile;
+
+						if (provider.provider === "google") {
+							profile = parseJwt(
+								data?.meWithAccount?.accounts?.find(
+									(account) => account.provider === "google"
+								)?.id_token ?? ""
+							);
+						}
+
+						return (
+							<SocialAccount
+								key={provider.provider}
+								provider={capitalize(provider.provider)}
+								icon={provider.icon}
+								imageUrl={profile?.picture}
+								username={profile?.name}
+							/>
+						);
+					})}
+				</Stack>
+			</Card>
+		</Stack>
+	);
+};
 
 export default SocialAccountSettings;