Existing membership screen during checkout; queue jobs with local fallbacks

Author: Rajat Saxena

apps/web/components/community/create-post-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useContext } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
@@ -24,6 +24,7 @@ import { GifSelector } from "./gif-selector";
 import { MediaPreview } from "./media-preview";
 import { CommunityPost } from "@courselit/common-models";
 import { type MediaItem } from "./media-item";
+import { ProfileContext } from "@components/contexts";
 
 interface CreatePostDialogProps {
     onPostCreated: (
@@ -51,6 +52,7 @@ export function CreatePostDialog({
         category?: string;
     }>({});
     const [isPostButtonDisabled, setIsPostButtonDisabled] = useState(true);
+    const { profile } = useContext(ProfileContext);
 
     useEffect(() => {
         setIsPostButtonDisabled(title.trim() === "" || content.trim() === "");
@@ -172,13 +174,22 @@ export function CreatePostDialog({
                 <div className="flex items-center gap-2 mb-4">
                     <Avatar className="h-10 w-10">
                         <AvatarImage
-                            src="/courselit_backdrop_square.webp"
-                            alt="Your avatar"
+                            src={
+                                profile.avatar
+                                    ? profile.avatar.file
+                                    : "/courselit_backdrop_square.webp"
+                            }
+                            alt={`${profile.name} avatar`}
                         />
-                        <AvatarFallback>YN</AvatarFallback>
+                        <AvatarFallback>
+                            {(profile.name
+                                ? profile.name.charAt(0)
+                                : profile.email.charAt(0)
+                            ).toUpperCase()}
+                        </AvatarFallback>
                     </Avatar>
                     <div>
-                        <span className="font-semibold">Your Name</span>
+                        <span className="font-semibold">{profile.name}</span>
                     </div>
                 </div>
 

apps/web/components/community/info.tsx

@@ -94,7 +94,7 @@ export function CommunityInfo({
         navigator.clipboard.writeText(`${address.frontend}/p/${pageId}`);
         toast({
             title: TOAST_TITLE_SUCCESS,
-            description: "Page ID copied to clipboard!",
+            description: "Page URL copied to clipboard!",
         });
     };
 

apps/web/components/community/membership-list.tsx

@@ -100,7 +100,7 @@ export function MembershipList({ id }: { id: string }) {
 
     const loadMembers = async () => {
         const query = `
-            query ($communityId: String!, $page: Int, $limit: Int, $status: MemberStatus) {
+            query ($communityId: String!, $page: Int, $limit: Int, $status: MembershipStatusType) {
                 members: getMembers(communityId: $communityId, page: $page, limit: $limit, status: $status) {
                     user {
                         userId

apps/web/components/public/payments/checkout.tsx

@@ -24,6 +24,7 @@ import {
     CommunityMemberStatus,
     CommunityReportStatus,
 } from "@courselit/common-models";
+import userTypes from "../users/types";
 
 const queries = {
     getCommunity: {
@@ -65,7 +66,7 @@ const queries = {
                 type: new GraphQLNonNull(GraphQLString),
             },
             status: {
-                type: types.memberStatusType,
+                type: userTypes.membershipStatusType,
             },
         },
         resolve: async (
@@ -96,7 +97,7 @@ const queries = {
                 type: new GraphQLNonNull(GraphQLString),
             },
             status: {
-                type: types.memberStatusType,
+                type: userTypes.membershipStatusType,
             },
         },
         resolve: (

apps/web/graphql/communities/query.ts

@@ -16,20 +16,6 @@ import { getUser } from "../users/logic";
 import GQLContext from "@models/GQLContext";
 import paymentPlansTypes from "../paymentplans/types";
 
-const memberStatusMap = {};
-for (const status of [
-    Constants.MembershipStatus.PENDING,
-    Constants.MembershipStatus.ACTIVE,
-    Constants.MembershipStatus.REJECTED,
-]) {
-    memberStatusMap[status.toUpperCase()] = { value: status };
-}
-
-const memberStatusType = new GraphQLEnumType({
-    name: "MemberStatus",
-    values: memberStatusMap,
-});
-
 const communityReportContentType = new GraphQLEnumType({
     name: "CommunityReportContentType",
     values: Object.fromEntries(
@@ -121,7 +107,7 @@ const communityMemberStatus = new GraphQLObjectType({
             resolve: (member, _, ctx: GQLContext, __) =>
                 getUser(member.userId, ctx),
         },
-        status: { type: memberStatusType },
+        status: { type: userTypes.membershipStatusType },
         joiningReason: { type: GraphQLString },
         rejectionReason: { type: GraphQLString },
     },
@@ -201,7 +187,6 @@ const types = {
     community,
     communityPost,
     communityMemberStatus,
-    memberStatusType,
     communityPostInputMedia,
     communityComment,
     communityReportContentType,

apps/web/graphql/communities/types.ts

@@ -6,9 +6,9 @@ import SearchData from "./models/search-data";
 import DownloadLinkModel from "@models/DownloadLink";
 import pug from "pug";
 import digitalDownloadTemplate from "../../templates/download-link";
-import { send } from "../../services/mail";
 import { responses } from "@config/strings";
 import { generateEmailFrom } from "@/lib/utils";
+import { addMailJob } from "@/services/queue";
 
 export function areAllEmailIdsValid(
     emailsOrder: string[],
@@ -92,7 +92,7 @@ export async function createTemplateAndSendMail({
         hideCourseLitBranding: ctx.subdomain.settings?.hideCourseLitBranding,
     });
 
-    await send({
+    await addMailJob({
         to: [user.email],
         subject: `Thank you for signing up for ${course.title}`,
         body: emailBody,

apps/web/graphql/mails/helpers.ts

@@ -708,113 +708,6 @@ export async function getMailsCount(
     return await MailModel.countDocuments(query);
 }
 
-// export async function updateMail(
-//     mailData: Pick<Mail, "mailId" | "to" | "subject" | "body"> = {},
-//     ctx: GQLContext,
-// ): Promise<Mail | null> {
-//     checkIfAuthenticated(ctx);
-
-//     let mail: Mail | null = await MailModel.findOne({
-//         mailId: mailData.mailId,
-//         domain: ctx.subdomain._id,
-//     });
-
-//     if (!isNotUndefined(mail)) {
-//         throw new Error(responses.item_not_found);
-//     }
-
-//     if (!checkPermission(ctx.user.permissions, [permissions.manageUsers])) {
-//         throw new Error(responses.action_not_allowed);
-//     }
-
-//     if (
-//         mailData.subject &&
-//         mailData.subject.length > UIConstants.MAIL_SUBJECT_MAX_LENGTH
-//     ) {
-//         throw new Error(responses.mail_subject_length_exceeded);
-//     }
-
-//     if (mailData.to) {
-//         mailData.to = removeEmptyMembers(Array.from(new Set(mailData.to)));
-//     }
-
-//     if (mailData.to && mailData.to.length > UIConstants.MAIL_MAX_RECIPIENTS) {
-//         throw new Error(responses.mail_max_recipients_exceeded);
-//     }
-
-//     try {
-//         for (const key of Object.keys(mailData)) {
-//             if (key === "mailId") continue;
-
-//             mail[key] = mailData[key];
-//         }
-
-//         mail = await (mail as any).save();
-
-//         return mail;
-//     } catch (e: any) {
-//         error(e.message, {
-//             stack: e.stack,
-//         });
-//         return null;
-//     }
-// }
-
-// const removeEmptyMembers = (arr: string[]) =>
-//     arr.filter((x) => x.trim() !== "");
-
-// function isNotUndefined(mail: Mail | null): mail is Mail {
-//     return !!mail;
-// }
-
-// export async function sendMail(mailId: string, ctx: GQLContext): Promise<Mail> {
-//     checkIfAuthenticated(ctx);
-
-//     let mail: Mail | null = await MailModel.findOne({
-//         mailId: mailId,
-//         domain: ctx.subdomain._id,
-//     });
-
-//     if (!isNotUndefined(mail)) {
-//         throw new Error(responses.item_not_found);
-//     }
-
-//     if (!checkPermission(ctx.user.permissions, [permissions.manageUsers])) {
-//         throw new Error(responses.action_not_allowed);
-//     }
-
-//     if (mail.published) {
-//         throw new Error(responses.mail_already_sent);
-//     }
-
-//     if (!mail.to || !mail.subject || !mail.body) {
-//         throw new Error(responses.invalid_mail);
-//     }
-
-//     const from = `${ctx.subdomain.settings.title || ctx.subdomain.name} ${
-//         ctx.user.email
-//     }`;
-
-//     await send({
-//         from,
-//         to: mail.to,
-//         subject: mail.subject,
-//         body: mail.body,
-//     });
-
-//     mail.published = true;
-//     try {
-//         await (mail as any).save();
-
-//         return mail;
-//     } catch (e: any) {
-//         error(e.message, {
-//             stack: e.stack,
-//         });
-//         throw new Error(responses.internal_error);
-//     }
-// }
-
 export async function sendCourseOverMail(
     courseId: string,
     email: string,

apps/web/graphql/mails/logic.ts

@@ -2,6 +2,7 @@ import { GraphQLInt, GraphQLNonNull, GraphQLString } from "graphql";
 import types from "./types";
 import { archivePaymentPlan, changeDefaultPlan, createPlan } from "./logic";
 import { MembershipEntityType } from "@courselit/common-models";
+import userTypes from "../users/types";
 
 const mutations = {
     createPlan: {
@@ -11,7 +12,7 @@ const mutations = {
             type: { type: new GraphQLNonNull(types.paymentPlanType) },
             entityId: { type: new GraphQLNonNull(GraphQLString) },
             entityType: {
-                type: new GraphQLNonNull(types.membershipEntityType),
+                type: new GraphQLNonNull(userTypes.membershipEntityType),
             },
             oneTimeAmount: { type: GraphQLInt },
             emiAmount: { type: GraphQLInt },
@@ -63,7 +64,7 @@ const mutations = {
             planId: { type: new GraphQLNonNull(GraphQLString) },
             entityId: { type: new GraphQLNonNull(GraphQLString) },
             entityType: {
-                type: new GraphQLNonNull(types.membershipEntityType),
+                type: new GraphQLNonNull(userTypes.membershipEntityType),
             },
         },
         resolve: async (
@@ -86,7 +87,7 @@ const mutations = {
             planId: { type: new GraphQLNonNull(GraphQLString) },
             entityId: { type: new GraphQLNonNull(GraphQLString) },
             entityType: {
-                type: new GraphQLNonNull(types.membershipEntityType),
+                type: new GraphQLNonNull(userTypes.membershipEntityType),
             },
         },
         resolve: async (

apps/web/graphql/paymentplans/mutation.ts

@@ -6,17 +6,7 @@ import {
     GraphQLString,
 } from "graphql";
 import { Constants } from "@courselit/common-models";
-const { PaymentPlanType, MembershipEntityType } = Constants;
-
-const membershipEntityType = new GraphQLEnumType({
-    name: "MembershipEntityType",
-    values: Object.fromEntries(
-        Object.entries(MembershipEntityType).map(([key, value]) => [
-            key,
-            { value: value },
-        ]),
-    ),
-});
+const { PaymentPlanType } = Constants;
 
 const paymentPlanType = new GraphQLEnumType({
     name: "PaymentPlanType",
@@ -45,7 +35,6 @@ const paymentPlan = new GraphQLObjectType({
 const types = {
     paymentPlan,
     paymentPlanType,
-    membershipEntityType,
 };
 
 export default types;