Developer Docs

Community Features

Social commerce primitives that power trust, engagement, and merchant accountability across Mallnline.


Features Overview

Feature Route / Component Status
Product Reviews [malet]/products/[id] ReviewsPanel โœ…
Helpful Votes ReviewCard โ†’ vote mutation โœ…
Questions & Answers QASection โ†’ product/service/malet โœ…
Product Variants VariantSelector / VariantGrid โœ…
SLA Dashboard [malet]/manage โ†’ SLA tab โœ…
Moderation Queue [malet]/manage โ†’ Moderation tab โœ…
Malet Blog [malet]/blog โœ…
Malet Events [malet]/events โœ…
Platform Blog /blog โœ…

Reviews & Ratings

Users can leave text reviews and star ratings on products. Reviews are fetched via the reviews subgraph and rendered in a ReviewsPanel component.

Key Files

File Purpose
src/lib/components/ReviewsPanel.svelte Review list + form
src/lib/components/ReviewCard.svelte Individual review card
src/lib/components/StarRating.svelte Interactive star UI
tests/reviewUtils.test.ts Review utility tests

GraphQL Queries

query GetProductReviews($productId: ID!, $page: Int) {
	reviews(productId: $productId, page: $page) {
		items {
			id
			rating
			text
			author
			createdAt
			helpfulCount
		}
		totalCount
	}
}

mutation SubmitReview($input: ReviewInput!) {
	createReview(input: $input) {
		id
		rating
		text
	}
}

Helpful Votes

Users can upvote reviews as "helpful". The system uses optimistic updates and deduplication to prevent double-voting.

GraphQL Mutation

mutation VoteHelpful($reviewId: ID!) {
	markReviewHelpful(reviewId: $reviewId) {
		id
		helpfulCount
	}
}

SLA Dashboard

Merchants can monitor service-level metrics including response times, resolution rates, and order fulfillment SLA compliance.

Key Files

File Purpose
src/lib/components/SLADashboard.svelte Metrics visualization
tests/slaUtils.test.ts SLA calculation tests

Moderation Queue

Flagged content (reviews, blog comments, Q&A) surfaces in the merchant's manage view for moderation.

Key Files

File Purpose
src/lib/components/ModerationQueue.svelte Queue list
tests/moderationUtils.test.ts Moderation utility tests
e2e/moderation-queue.test.ts E2E moderation flow

Malet Blogs

Each Malet can publish blog posts visible at [malet]/blog. Merchants manage posts via [malet]/manage/blog.

Key Files

File Purpose
src/routes/[malet]/blog/+page.svelte Blog listing page
src/routes/[malet]/blog/BlogCard.svelte Blog post card component
src/routes/[malet]/blog/[blog]/Blog.svelte Single blog post view
src/routes/[malet]/manage/blog/+page.svelte Merchant blog management
tests/blogUtils.test.ts Blog utility tests

Platform Blog

The platform-level blog lives at /blog and showcases product updates, engineering deep-dives, and company news. Distinct from per-malet blogs.

Key Files

File Purpose
src/routes/blog/+page.svelte Blog listing with filters
src/lib/data/blogPosts.ts Zod-typed post data & utils
tests/blogPosts.test.ts 14 unit tests
e2e/platformBlog.test.ts 6 E2E tests

Blog Post Categories

  • Product โ€” Feature announcements and product launches
  • Engineering โ€” Technical deep-dives and architecture posts
  • Company โ€” Funding, hiring, and company milestones
  • Community โ€” Social features, events, and merchant spotlights

Questions & Answers (Q&A)

Visitors can ask questions about products, services, or Malets. The community can reply and upvote, and the Question Author can accept the best answer (StackOverflow-style). See the full architecture in Unified Q&A โ€” Threaded Conversations.

Architecture

Questions implement the unified Comment interface with:

  • Threaded replies: QuestionComment entities with cursor pagination (replaces embedded answers)
  • Accepted answer model: Question Author marks the best reply via acceptAnswer mutation
  • Status lifecycle: PENDING โ†’ ANSWERED / CLOSED
  • Social likes: toggleLike mutation with subjectType: QUESTION
  • Content filtering: Spam, phishing, and repetition detection via ContentFilterService
  • Identity: ActorBadge component with hover popover (Follow/DM)

Key Files

File Purpose
src/lib/components/QASection.svelte Q&A container with stats + form
src/lib/components/QuestionCard.svelte Threaded question card
src/lib/components/ActorBadge.svelte Participant identity badge
src/lib/utils/qaUtils.ts Sorting, formatting, stats
src/lib/queries/community.ts GraphQL queries & types (Q&A)
tests/qaUtils.test.ts 27 unit tests

GraphQL Queries

# Fetch questions with threaded replies
query GetQuestions($subjectId: String!, $first: Int!) {
  questions(filter: { subjectId: { eq: $subjectId } }, paging: { first: $first }) {
    edges {
      node {
        id questionID body authorId status isLiked likeCount acceptedAnswerId
        comments { edges { node { id name createdBy isLiked likeCount } } totalCount }
      }
    }
    totalCount
  }
}

# Create a question
mutation CreateQuestion($input: CreateOneQuestionInput!) {
  createOneQuestion(input: $input) { id questionID body status }
}

# Reply to a question
mutation CreateQuestionComment($input: CreateOneQuestionCommentInput!) {
  createOneQuestionComment(input: $input) { id questionCommentID name createdBy }
}

# Accept / unaccept an answer
mutation AcceptAnswer($questionId: ID!, $commentId: ID!) {
  acceptAnswer(questionId: $questionId, commentId: $commentId) { id status acceptedAnswerId }
}

Product Variant Selector

The universal variant selection system renders option chips (size, material) and color swatches for any product with variants. The fashion vertical uses a 2D VariantGrid (size ร— color matrix), while all other verticals use the generic VariantSelector.

Key Files

File Purpose
src/lib/components/catalog/VariantSelector.svelte Generic option chip selector
src/lib/components/catalog/VariantGrid.svelte Fashion 2D sizeร—color matrix
src/lib/components/catalog/SizeChartModal.svelte Size guide modal
src/lib/utils/variantUtils.ts Label, image, stock utilities
src/lib/utils/catalogUtils.ts Variant matrix builder
tests/variantUtils.test.ts 20 unit tests

Variant UX Features

  • Variant image swap: Selecting a variant with a dedicated image prepends it to the product gallery
  • Dynamic cart label: "Add to uCart" updates to show selected variant (e.g., "Add Blue / Large to uCart")
  • Price transitions: Smooth CSS transition when switching between variant prices
  • Stock awareness: Out-of-stock variants show strikethrough, low-stock variants pulse with warning
  • Inventory deduplication: Unavailable option chips are disabled with visual indicators