Appearance

Subscription Functions Mixin ​

File Information ​

  • Path: mixins/subscription-functions.js
  • Purpose: Stripe subscription management and workspace switching functionality

Overview ​

The Subscription Functions mixin provides functionality for managing Stripe subscriptions, adding payment methods, and handling workspace switching with subscription updates. It integrates with Stripe Elements for secure payment processing.

Key Features ​

  1. Stripe Integration

    • Stripe Elements setup
    • Payment method addition
    • Setup intent creation
    • Payment confirmation

  2. Workspace Switching

    • Workspace change handling
    • Subscription update on switch
    • User profile update
    • Session refresh

  3. Card Management

    • Add card dialog
    • Card element mounting
    • Payment method saving

Methods ​

addCardDialog() ​

Opens dialog for adding payment card:

  • Creates Stripe setup intent
  • Initializes Stripe Elements
  • Mounts payment element
  • Shows add card dialog

Process:

  1. Checks if dialog already open
  2. Creates setup intent via API
  3. Configures Stripe Elements
  4. Mounts payment element to #payment-element-stripe
  5. Shows dialog after element loads

Requirements:

  • Stripe instance must be initialized
  • Component must have showAddCard data property
  • Component must have stripeElemLoaded data property
  • Component must have stripeCardElements data property

addCard() ​

Saves payment card:

  • Confirms Stripe setup
  • Updates subscription with card
  • Handles errors
  • Redirects on success

Process:

  1. Updates subscription trial with customer ID
  2. Confirms Stripe setup intent
  3. Handles errors or redirects
  4. Customer redirected to return URL

API Calls:

  • POST /subscription/user-trial - Update subscription
  • Stripe confirmSetup() - Confirm payment method

onSwitchWorkspace(workspace) ​

Handles workspace switching:

  • Updates user profile with new workspace
  • Updates subscription context
  • Refreshes authentication
  • Logs out and reloads

Parameters:

  • workspace (Object): Workspace object to switch to
    • id: Workspace ID
    • department_id: Department ID
    • workspace_unique_id: Workspace unique ID

Process:

  1. Prevents multiple switches
  2. Updates user profile via API
  3. Shows success message
  4. Updates current workspace
  5. Updates DAM branding
  6. Refreshes user data
  7. Logs out and reloads page

Data Properties Required ​

Components using this mixin should have:

javascript
{
  showAddCard: boolean,          // Add card dialog visibility
  stripeElemLoaded: boolean,     // Stripe element loaded state
  stripeCardElements: object,     // Stripe Elements instance
  stripe: object,                // Stripe instance
  stripeCustomerId: string,      // Stripe customer ID
  stripe_subscription_id: string, // Stripe subscription ID
  subscription_id: number,       // Subscription ID
  subscription: object,          // Subscription object
  addCardError: string,          // Add card error message
  switchingWP: boolean          // Workspace switching state
}

Stripe Integration ​

Setup Intent Creation ​

javascript
POST /stripe/init-setup-intent
{
  customer: stripe_customer_id
}

Response: {
  client_secret: "seti_xxx_secret_xxx"
}

Stripe Elements Configuration ​

javascript
{
  clientSecret: data.client_secret,
  appearance: {
    theme: 'stripe'
  }
}

Usage Examples ​

Add Card Functionality ​

vue
<template>
  <div>
    <v-dialog v-model="showAddCard">
      <div id="payment-element-stripe"></div>
      <button @click="addCard" :disabled="!stripeElemLoaded">
        Save Card
      </button>
      <p v-if="addCardError" class="error">{{ addCardError }}</p>
    </v-dialog>
    <button @click="addCardDialog">Add Payment Method</button>
  </div>
</template>

<script>
import { loadStripe } from '@stripe/stripe-js'
import subscriptionFunctions from '~/mixins/subscription-functions'

export default {
  mixins: [subscriptionFunctions],
  async mounted() {
    this.stripe = await loadStripe(process.env.STRIPE_PUBLIC_KEY)
  },
  data() {
    return {
      showAddCard: false,
      stripeElemLoaded: false,
      stripeCardElements: null,
      stripe: null,
      addCardError: '',
      subscription: null
    }
  }
}
</script>

Workspace Switching ​

vue
<template>
  <div>
    <v-select
      v-model="selectedWorkspace"
      :items="workspaces"
      @change="handleWorkspaceSwitch"
    />
  </div>
</template>

<script>
import subscriptionFunctions from '~/mixins/subscription-functions'

export default {
  mixins: [subscriptionFunctions],
  data() {
    return {
      selectedWorkspace: null,
      workspaces: [],
      switchingWP: false
    }
  },
  methods: {
    async handleWorkspaceSwitch(workspace) {
      await this.onSwitchWorkspace(workspace)
      // User will be logged out and page reloaded
    }
  }
}
</script>

API Endpoints ​

  • POST /stripe/init-setup-intent - Create Stripe setup intent

    • Request Body:
      json
      {
  "customer": "cus_xxx"
}
    • Response: Setup intent with client secret

  • POST /subscription/user-trial - Update subscription trial

    • Request Body:
      json
      {
  "stripe_customer_id": "cus_xxx",
  "stripe_subscription_id": "sub_xxx",
  "subscription_id": 123
}

  • POST /user/update-profile - Update user profile

    • Request Body:
      json
      {
  "default_department": 456,
  "default_workspace": "workspace-slug",
  "email": "[email protected]",
  "name": "User Name",
  "phone": "+1234567890",
  "timezone": "America/New_York",
  "user_id": 789
}

Integration Points ​

  • Stripe.js: Payment processing
  • Workspace Settings: Workspace management
  • Account & Billing: Subscription management
  • Authentication: User session
  • DAM Store: Branding updates

Notes for Development ​

  • Mixin requires Stripe.js to be loaded
  • Payment element must be mounted to specific ID
  • Workspace switch triggers full page reload
  • Subscription updates are handled automatically
  • Error handling for Stripe operations
  • Workspace switch updates branding