Student logoHelp
FAQ

Account Settings Dialog

The Account Settings dialog is accessed by clicking your profile avatar in the top right corner of any page. This opens a dropdown menu with quick access options, and selecting "Profile", "Settings", or "Affiliates" opens the full Account Settings dialog.

Avatar Dropdown Menu

image

When you click your profile avatar (top right corner), a dropdown menu appears with the following options:

  1. Your Email Address (Header)

    • Displays your registered email at the top of the menu

    • Serves as identification

    • Example: "community.clases@gmail.com"

  2. Profile

    • Opens the Account Settings dialog with the "Profile" tab active

    • Quick access to profile settings

  3. Settings

    • Opens the Account Settings dialog with the "Account" tab active

    • Quick access to account security settings

  4. Affiliates

    • Opens the Account Settings dialog with the "Affiliates" tab active

    • Quick access to affiliate program settings

  5. Help center

    • Link to the help center page (/help)

    • Opens in the same tab

    • Provides platform documentation and support

  6. Log out

    • Signs you out of your account

    • Shows "Logging out..." while processing

    • Redirects to the discover page after logout

How to Use:

  • Click your profile avatar (circular image or initial) in the top right

  • Select any option from the dropdown menu

  • The dropdown closes automatically after selection

  • "Log out" requires confirmation and processes immediately

Account Settings Dialog Overview

image

The Account Settings dialog is a modal window that appears over the current page. It contains 9 main tabs accessible from the left sidebar.

Dialog Structure:

  • Header: Shows your name or email and "Account settings" subtitle

  • Left Sidebar: Tab navigation (9 tabs listed vertically)

  • Main Content Area: Displays the active tab's content

  • Close Button: X button in the top right to close the dialog

  • Mobile Responsive: On mobile, tabs are hidden when viewing content (use back button)

Tab Navigation:

  • Active tab is highlighted in yellow with shadow

  • Inactive tabs are gray and become yellow on hover

  • Click any tab to switch to that section

  • On mobile, tabs show a chevron indicating they're clickable

Profile Tab

image

The Profile tab manages your public profile information.

Key Elements:

  1. Avatar Section:

    • Current Avatar: Large circular profile picture (24x24 size)

    • CHANGE Button: Click to upload a new profile photo

    • Upload Process: Shows "Uploading..." with spinner during upload

    • File Requirements: Image files only (validates file type)

  2. Name Fields:

    • First Name: Text input for your first name

    • Last Name: Text input for your last name

    • Restriction Note: "You can only change your name once, and you must use your real name."

  3. Profile URL:

    • URL Display: Shows your profile URL (e.g., clases.community/member/username)

    • View Profile Button: Opens your public profile in a new tab (if profile slug exists)

    • Auto-generated: URL is automatically generated from your name

    • Note: "Your profile URL is automatically generated from your name and is unique."

  4. Bio:

    • Textarea: Multi-line text input for biography

    • Placeholder: "Tell us about yourself"

    • Character Counter: Shows "X / 150" (150 character limit)

    • Max Length: 150 characters

  5. Location:

    • Text Input: Enter your city and country

    • Placeholder: "City, Country"

    • Example: "Los Angeles, CA"

  6. Timezone:

    • Text Input: Enter your timezone

    • Placeholder: "e.g., America/New_York"

    • Format: IANA timezone format

  7. Links Section:

    • Title: "Links" heading

    • Social Media Profiles:

      • Displays existing social profiles (Twitter, LinkedIn, GitHub, YouTube, etc.)

      • Each profile shows network icon, profile URL, and edit/delete options

      • Add New Profile: Button to add additional social media links

      • Network Selection: Dropdown to select social network type

      • Profile URL: Input for the profile URL

      • Custom Label: For "Other" network types

    • Supported Networks: Twitter/X, LinkedIn, GitHub, YouTube, Website, and custom "Other"

  8. Save Changes Button:

    • Yellow button at the bottom

    • Saves all profile changes

    • Shows loading state while saving

How to Use:

  • Upload a new avatar by clicking "CHANGE" and selecting an image file

  • Update your name (remember: can only change once)

  • Add or edit your bio (150 character limit)

  • Enter your location and timezone

  • Add social media links by clicking "Add New Profile"

  • Edit existing social profiles using the edit icon

  • Delete social profiles using the delete/trash icon

  • Click "Save Changes" to apply all updates

Account Tab

image

The Account tab manages your account security and authentication settings.

Key Elements:

  1. Email Section:

    • Current Email Display: Shows your registered email address

    • CHANGE EMAIL Button: Yellow button to update your email

    • Change Email Dialog: Opens when clicked, requires:

      • New email address

      • Email verification

    • Process: Sends verification email to new address

  2. Password Section:

    • Description: "Change your password"

    • CHANGE PASSWORD Button: Yellow button to update password

    • Change Password Dialog: Opens when clicked, requires:

      • Current password

      • New password

      • Confirm new password

    • Password Requirements: Must meet platform security standards

  3. Timezone Section:

    • Label: "Timezone"

    • Timezone Dropdown: Select from list of timezones

    • Available Timezones: Includes major timezones worldwide:

      • Pacific/Midway (GMT -11:00)

      • Pacific/Honolulu (GMT -10:00)

      • America/Los_Angeles (GMT -08:00)

      • America/New_York (GMT -05:00)

      • Europe/London (GMT +00:00)

      • Asia/Tokyo (GMT +09:00)

      • And many more...

    • SAVE Button: Yellow button to save timezone selection

    • Disabled State: Button is disabled if timezone hasn't changed

  4. Session Management:

    • Title: "Log out of all devices"

    • Description: "Log out of all active sessions on all devices."

    • LOG OUT EVERYWHERE Button: Yellow button to immediately log out from all devices

    • Use Case: Useful if you suspect unauthorized access or want to secure your account

    • Warning: This action cannot be undone - you'll need to log in again on all devices

How to Use:

  • Click "CHANGE EMAIL" to update your email (requires verification)

  • Click "CHANGE PASSWORD" to update your password

  • Select your timezone from the dropdown menu

  • Click "SAVE" to save timezone changes

  • Use "LOG OUT EVERYWHERE" if you need to secure your account

  • All changes take effect immediately (except email, which requires verification)

Communities Tab

image

The Communities tab shows all communities you own or are a member of.

Key Elements:

  1. Page Header:

    • Title: "Communities"

    • Subtitle: "Drag and drop to reorder, or hide."

  2. Community Cards: Each community is displayed as a card showing:

    • Community Logo: 12x12 rounded image

    • Community Name: Bold name of the community

    • Member Count: Number of members (e.g., "8 members")

    • Pricing: "Free" for public communities or "Paid" for private

    • SETTINGS Button: Opens group settings dialog for that community

    • View Icon: Eye icon to navigate to the community

    • Role Badge: Shows if you're "Owner" or "Member"

  3. Empty State:

    • Shows "You are not a member of any communities yet." if no communities

How to Use:

  • View all your communities in one list

  • Click "SETTINGS" to manage a specific community's settings

  • Click the eye icon to navigate to that community

  • See your role (Owner/Member) for each community

  • Communities are organized by ownership status

Notifications Tab

image

The Notifications tab controls how and when you receive notifications.

Key Elements:

  1. General Notifications Section: Three toggle switches for platform-wide notifications:

    • New follower email notification:

      • Toggle to receive emails when someone follows you

      • Default: Enabled (green)

    • New affiliate referral email notification:

      • Toggle to receive emails for affiliate referrals

      • Default: Enabled (green)

    • New customer ka-ching sound:

      • Toggle to play a sound when you get a new customer

      • Default: Enabled (green)

      • Saves automatically when toggled

  2. Community Notifications Section:

    • Title: "Community Notifications"

    • Community Cards: Each community you're a member of has its own card:

      • Community Icon: Avatar/logo of the community

      • Community Name: Name of the community

      • Current Setting: Shows notification frequency (e.g., "Weekly digest • Hourly bundle")

      • CHANGE Button: Click to modify notification preferences for that community

  3. Notification Settings Dialog: When you click "CHANGE" on a community card, a dialog opens with:

    • Digest Frequency:

      • Options: Never, Daily, Weekly

      • Controls how often you receive summary emails

    • Notification Frequency:

      • Options: Real-time, Hourly bundle, Daily bundle, Never

      • Controls how notifications are grouped

    • Post Likes: Toggle to receive notifications for post likes

    • Admin Announcements: Toggle to receive admin announcements

How to Use:

  • Toggle general notification switches on/off as needed

  • Click "CHANGE" on any community card to customize its notifications

  • Set different preferences for each community

  • Balance between staying informed and avoiding notification overload

  • Changes save automatically for sound preferences

  • Community notification changes are saved when you close the dialog

Chat Tab

image

The Chat tab manages your chat and messaging preferences.

Key Elements:

  1. Notifications Section:

    • Title: "Notifications"

    • Description: "Notify me with sound and blinking tab header when somebody messages me."

    • Toggle Switch: Enable/disable sound and visual notifications

    • Saves Automatically: Changes apply immediately

  2. Email Notifications Section:

    • Title: "Email notifications"

    • Description: "If you're offline and somebody messages you, we'll let you know via email. We won't email you if you're online."

    • Toggle Switch: Enable/disable email notifications for messages

    • Smart Behavior: Only sends emails when you're offline

  3. Who Can Message Me Section:

    • Title: "Who can message me?"

    • Description: "Only members in the group you're in can message you. You choose what group users can message you from by turning your chat on/off below."

    • Community List: Shows all communities you're a member of

    • Chat Toggle: For each community:

      • Community Icon: Avatar of the community

      • Community Name: Name of the community

      • Dropdown Button: Shows "ON" or "OFF" with message icon

      • Dropdown Options:

        • "Chat on" - Allow messages from this community

        • "Chat off" - Block messages from this community

      • Active State: Selected option is highlighted in yellow

  4. Blocked Users Section:

    • Title: "Blocked users"

    • Blocked User Cards: Each blocked user shows:

      • User Avatar: Profile picture

      • User Name: Full name or "Unknown User"

      • Blocked Date: When the user was blocked

      • Unblock Button: Red button to unblock the user

    • Empty State: "You have no blocked users." if none blocked

How to Use:

  • Toggle sound/visual notifications on/off

  • Toggle email notifications for offline messages

  • Use the dropdown for each community to enable/disable chat

  • Block users from the chat interface, then manage them here

  • Click "Unblock" to allow a previously blocked user to message you

  • Changes save automatically

Payment Methods Tab

image

The Payment Methods tab manages your saved payment methods for subscriptions and purchases.

Key Elements:

  1. Page Header:

    • Title: "Payment Methods"

    • Subtitle: "Manage your payment methods and subscriptions"

  2. ADD PAYMENT METHOD Button:

    • Yellow button in the top right

    • Click to add a new credit card or payment method

    • Opens Stripe payment method form

  3. Payment Method Cards: Each saved payment method displays:

    • Card Brand: Visa, Mastercard, Amex, etc.

    • Last 4 Digits: Shows "•••• 4242" format

    • Expiration Date: "Expires: MM/YYYY"

    • Membership Count: Link showing number of active memberships (e.g., "1 membership")

      • Clicking navigates to Payment History tab

    • More Options Menu: Three-dot menu with:

      • Remove: Delete the payment method

  4. Empty State:

    • Shows "No payment methods added yet." if none saved

How to Use:

  • Click "ADD PAYMENT METHOD" to add a new card

  • View all saved payment methods

  • Click membership count to see related subscriptions

  • Use the three-dot menu to remove payment methods

  • Payment methods are used automatically for subscriptions

Payment History Tab

image

The Payment History tab shows all your past transactions and payments.

Key Elements:

  1. Page Header:

    • Title: "Payment History"

    • Subtitle: "View your past payments and transactions"

    • Settings Icon: Gear icon button (future functionality)

  2. Payment List: Each payment entry shows:

    • Date: Clickable date link (formatted as "Month Day, Year")

    • Amount: Currency symbol and amount (e.g., "$100.00")

    • Payment Type Badge:

      • "Membership" badge for subscription payments

      • "Course" badge for one-time course purchases

    • Description:

      • For memberships: "{Group Name} membership"

      • For courses: "{Course Name} ({Group Name})"

    • Invoice Link: "View Receipt" link if invoice is available

      • Opens Stripe invoice in new tab

  3. Empty State:

    • Shows "No payment history yet."

    • Message: "Your payment history will appear here once you make a purchase."

How to Use:

  • Scroll through your payment history chronologically

  • Click on dates to view payment details (if implemented)

  • Click "View Receipt" to download or view invoices

  • Payments are listed from most recent to oldest

  • All payments include full transaction details

Affiliates Tab

image

The Affiliates tab manages your affiliate program participation, referral links, and commission tracking.

Key Elements:

  1. Page Header:

    • Title: "Affiliates"

    • Subtitle: "Earn commission for life when you invite somebody to create or join a Clases community."

  2. Statistics Cards (Top Row): Three cards showing key metrics:

    • Last 30 days:

      • Dollar amount earned in the last 30 days

      • Green dollar sign icon

    • Lifetime:

      • Total commission earned all-time

      • Blue trending up icon

    • Account balance:

      • Available balance (total - pending)

      • Green dollar sign icon

      • PAYOUT Button: Navigates to Payouts tab

      • Disabled State: Button disabled if balance is less than $50

  3. Pending Commission:

    • Text showing: "${X.XX} available soon"

    • Amount that's pending processing

  4. Payout Account Card:

    • Title: "Payout Account"

    • Status Message:

      • If connected: "Your Stripe Connect account is active. Payouts will be sent automatically."

      • If not connected: "Connect your Stripe account to receive automatic payouts"

    • Open Dashboard Button (if connected): Green button to open Stripe dashboard

    • Connect Stripe Button (if not connected): Yellow button to connect Stripe account

      • Opens Stripe onboarding flow

  5. Referral Statistics Cards:

    • Total Referrals Card:

      • Blue users icon

      • Large number showing total referrals

      • "People you've referred" description

    • Active Referrals Card:

      • Green users icon

      • Large number showing active referrals

      • "Currently paying members" description

  6. Affiliate Links Section:

    • Title: "Your affiliate links"

    • Group Selection Bubbles:

      • Clases Platform: Default selection (40% commission)

      • Community Bubbles: One for each community you're in (varies by community, typically 20%)

      • Active Bubble: Dark gray/black background with white text

      • Inactive Bubbles: Light gray background

    • Commission Rate Display:

      • Shows commission percentage for selected link

      • Platform: "40% commission"

      • Communities: "{X}% commission" (varies by community)

    • Referral Link:

      • Read-only input showing the full referral URL

      • Platform link: https://clases.community/signup?ref={user_id}

      • Community link: https://clases.community/groups/{group_slug}/about?ref={user_id}

    • COPY Button: Yellow button to copy link to clipboard

      • Shows toast notification when copied

  7. Affiliate Program Card:

    • Title: "Affiliate Program"

    • Description: "Invite people using your referral link and earn commissions"

    • Invite People Button: Opens invite dialog to send referral links via email

  8. Commission History Section:

    • Title: "Commission History"

    • Filter Dropdown: Filter by status:

      • All Commissions

      • Pending

      • Paid

      • Cancelled

    • Commission Cards: Each commission shows:

      • Group Name: Community or "Platform Referral"

      • Status Badge: Color-coded (green=paid, yellow=pending, red=cancelled)

      • Approval Badge: "Requires Approval" if needed

      • User Info: Referred user's name

      • Date: Commission creation date

      • Recurring Badge: If commission is recurring

      • Approval Date: If approved, shows approval date

      • Amount: Dollar amount earned

      • Commission Type: B2C or other type

  9. Recent Referrals Section:

    • Title: "Recent Referrals"

    • Referral Cards: Each referral shows:

      • User Avatar: Referred user's profile picture

      • User Name: Full name or email

      • Status: "Joined {Group Name}" or "Signed up"

      • Date: Referral creation date

      • Commission Earned: Dollar amount in green

      • Status Badge: "active" or "pending"

  10. Commission Breakdown Section:

    • Title: "Commission Breakdown"

    • Breakdown Card:

      • Total Earned: Total commission amount

      • Pending (Processing): Amount pending processing

      • Available for Payout: Amount ready for payout

    • Commissions by Group (if applicable):

      • Per-group breakdown showing:

        • Group logo and name

        • Total commission for that group

        • Available for payout amount

        • Request Payout Button: Request payout for specific group (minimum $50)

How to Use:

  • View your affiliate statistics and earnings

  • Select a group bubble to see that community's referral link

  • Click "COPY" to copy the referral link to your clipboard

  • Share your referral links to earn commissions

  • Track commission history with status filters

  • View recent referrals and their status

  • Connect Stripe account to receive automatic payouts

  • Request payouts when balance reaches $50 minimum

  • Use "Invite People" to send referral links via email

Payouts Tab

image

The Payouts tab manages your payout account and payout history for affiliate commissions.

Key Elements:

  1. Page Header:

    • Title: "Payouts"

    • Subtitle: "Payouts for community and affiliate earnings."

    • Settings Icon: Gear icon button (future functionality)

  2. Stripe Connection Status:

    • If Not Connected:

      • Card: Large centered card with yellow dollar icon

      • Title: "Connect your bank account"

      • Description: Explains need to connect Stripe for payouts

      • CONNECT BANK ACCOUNT Button: Yellow button to start Stripe connection

      • Info Card: Blue card explaining why connection is needed:

        • Receive affiliate commission payouts automatically

        • Get paid for community membership fees

        • Secure and encrypted through Stripe

        • Minimum payout threshold: $50

    • If Connected:

      • Available Balance Card:

        • Large Amount: Shows available for payout (e.g., "$XX.XX")

        • Label: "Available for payout"

        • REQUEST PAYOUT Button: Yellow button to request payout

        • Disabled State: Disabled if balance is less than $50

        • Minimum Notice: "Minimum payout amount is $50" if below threshold

      • Pending Amount:

        • Shows pending commission amount

        • "pending (processing)" label

        • Note: "Commissions are available for payout 30 days after the referral's payment"

  3. Payout History Section:

    • Title: "Payout History"

    • Filter Dropdown: Filter by status:

      • All Payouts

      • Pending

      • Processing

      • Completed

      • Failed

    • Payout Cards: Each payout shows:

      • Payout Label: "Payout" text

      • Status Badge: Color-coded status

      • Date: Request date

      • Amount: Dollar amount

      • Description: Payout details

      • Stripe Dashboard Link: "View in Stripe" if available

  4. Empty States:

    • No Payouts: Shows dollar icon and "No payouts yet" message

    • Not Connected: Shows connection prompt card

How to Use:

  • Connect your Stripe account to receive payouts

  • View your available payout balance

  • Request payouts when balance reaches $50 minimum

  • Track payout history with status filters

  • View payout details and status

  • Access Stripe dashboard for detailed payout information

  • Understand that commissions become available 30 days after referral payment

Important Notes:

  • Minimum payout amount is $50

  • Commissions are processed within 30 days of the referral's payment

  • Payouts are sent automatically once Stripe account is connected

  • All payouts go through Stripe for security and compliance