Appearance

Support Page ​

File Information ​

  • Path: app/pages/[brand_name]/support.vue
  • Route: /{brand_name}/support
  • Purpose: User feedback submission page
  • Layout: collage-layout
  • Middleware: check-url

Overview ​

The Support page allows authenticated users to submit feedback about the Collage platform. Users can provide their name, email, and feedback comment, which helps improve the platform and release new features.

Key Features ​

  1. User Information Display

    • User name (read-only, from auth store)
    • User email (read-only, from auth store)
    • Pre-filled from authenticated user data

  2. Feedback Form

    • Feedback comment textarea
    • Required field validation
    • Character limit handling
    • Form submission

  3. Thank You Message

    • Displayed after successful submission
    • Acknowledges user feedback
    • Explains value of feedback

  4. Loading States

    • Skeleton loader during initial load
    • Loading state during submission
    • Smooth transitions

Components Used ​

  • v-text-field - Vuetify text input components (read-only)
  • v-textarea - Vuetify textarea component
  • v-btn - Vuetify button component
  • v-skeleton-loader - Skeleton loaders

Composables Used ​

  • useSupport() - Support functionality (app/composables/core/pages/useSupport.ts)
  • useAuthStore() - Authentication store
  • useSnackbar() - Snackbar notifications

Data Properties ​

Reactive Data (from useSupport composable) ​

typescript
{
  userName: string,              // User name (from auth store)
  userEmail: string,             // User email (from auth store)
  comment: string,              // Feedback comment
  commentError: string | null,  // Comment validation error
  saveLoader: boolean,          // Submission loading state
  showThankyouBlock: boolean,   // Thank you message visibility
  contentLoading: boolean       // Initial content loading state
}

Methods ​

submitFeedback() ​

Handles feedback form submission.

typescript
async function submitFeedback() {
  // Validates comment
  // Submits feedback via API
  // Shows thank you message on success
  // Handles errors
}

Flow:

  1. Validates comment field
  2. Submits feedback to API
  3. Shows thank you message on success
  4. Handles errors with user feedback

User Interactions ​

  1. Form Input

    • View user name and email (read-only)
    • Enter feedback comment
    • Real-time validation

  2. Form Submission

    • Click "Submit Feedback" button
    • Form validates before submission
    • Loading state during API call

  3. Thank You State

    • Thank you message displayed
    • No further actions available

Styling ​

  • Uses custom CSS from assets/scss/custom.scss
  • Form layout styles
  • Textarea styles
  • Button styles with loading states
  • Skeleton loader styles
  • Thank you message styling

Lifecycle Hooks ​

onMounted ​

Initializes support data from composable.

typescript
onMounted(() => {
  // Composable handles initialization
})

API Endpoints ​

Submit Feedback ​

  • Endpoint: POST /support/feedback (via useSupport composable)
  • Request Body:
    typescript
    {
  name: string,
  email: string,
  comment: string
}
  • Response: Success message

User Flow ​

  1. User navigates to support page
  2. Page displays user information (name, email)
  3. User enters feedback comment
  4. User clicks "Submit Feedback" button
  5. System validates and submits feedback
  6. On success:
    • Thank you message displayed
    • Form hidden
  7. On failure:
    • Error message displayed
    • User can retry

Notes for Development ​

  • Page requires authentication (handled by global auth middleware)
  • User information pre-filled from auth store
  • Comment is required field
  • Thank you message replaces form after submission
  • Uses useSupport composable for all logic
  • Skeleton loader shown during initial load