Modrinth/pages/dashboard/revenue.vue

<template>
  <div>
    <ModalTransfer
      v-if="enrolled"
      ref="modal_transfer"
      :wallet="$auth.user.payout_data.payout_wallet"
      :account-type="$auth.user.payout_data.payout_wallet_type"
      :account="$auth.user.payout_data.payout_address"
      :balance="$auth.user.payout_data.balance"
      :min-withdraw="minWithdraw"
    />
    <section class="universal-card">
      <h2>Withdraw</h2>
      <div v-if="$auth.user.payout_data.balance >= minWithdraw">
        <p>
          You have
          <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong>
          available to withdraw.
          <span v-if="!enrolled"
            >Enroll in the Creator Monetization Program to withdraw your
            revenue.</span
          >
        </p>

        <div v-if="enrolled" class="buttons">
          <button
            class="iconified-button brand-button"
            @click="$refs.modal_transfer.show()"
          >
            <TransferIcon /> Transfer to
            {{ $formatWallet($auth.user.payout_data.payout_wallet) }}
          </button>
          <NuxtLink class="iconified-button" to="/settings/monetization">
            <SettingsIcon /> Monetization settings
          </NuxtLink>
        </div>
      </div>
      <p v-else-if="$auth.user.payout_data.balance > 0">
        You have made
        <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong
        >, however you have not yet met the minimum of ${{ minWithdraw }} to
        withdraw.
      </p>
      <p v-else>
        You have made
        <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong
        >, which is under the minimum of ${{ minWithdraw }} to withdraw.
      </p>
      <div v-if="!enrolled">
        <NuxtLink class="iconified-button" to="/settings/monetization">
          <SettingsIcon /> Enroll in the Creator Monetization Program
        </NuxtLink>
      </div>
    </section>
    <section class="universal-card">
      <h2>Processing fees</h2>
      <p>
        To avoid paying unnecessary fee deductions, you may want to wait to
        transfer your money out after it accumulates for a bit rather than
        transferring as soon as you reach the minimum of ${{ minWithdraw }}.
      </p>
      <h3>PayPal</h3>
      <ul>
        <li>
          In the <strong>United States</strong>, PayPal charges a flat
          <strong>$0.25</strong>
          fee per transaction.
        </li>
        <li>
          In the rest of the world, PayPal charges a <strong>2%</strong> (up to
          $20) fee per transaction.
        </li>
      </ul>
      <p>
        Modrinth will deduct <strong>2%</strong> for the fee (minimum of $0.25
        and maximum of $20) from <strong>all transfers</strong> and if the fee
        PayPal charges is less than the amount we deducted, the difference will
        be added back to your Modrinth balance. This happens as Modrinth cannot
        determine if a transaction will be in the United States or international
        or not until after the transaction has been made.
      </p>
      <h3>Venmo (United States only)</h3>
      <p>
        Venmo will charge a $0.25 processing fee per transaction, which will be
        deducted from the amount you choose to transfer.
      </p>
      <h2>Currency conversions</h2>
      <p>
        All revenue generated by Modrinth is in United States dollars. Any
        conversions to your local currency will happen at withdrawal and is not
        handled by Modrinth. Modrinth cannot guarantee any exchange rate, so
        only USD is displayed in the creator dashboard.
      </p>
    </section>
  </div>
</template>

<script>
import TransferIcon from '~/assets/images/utils/transfer.svg?inline'
import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
import ModalTransfer from '~/components/ui/ModalTransfer'

export default {
  components: { TransferIcon, SettingsIcon, ModalTransfer },
  data() {
    return {
      minWithdraw: 0.26,
      enrolled:
        this.$auth.user.payout_data.payout_wallet &&
        this.$auth.user.payout_data.payout_wallet_type &&
        this.$auth.user.payout_data.payout_address,
    }
  },
  head: {
    title: 'Revenue - Modrinth',
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
strong {
  color: var(--color-text-dark);
  font-weight: 500;
}

.buttons {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-card-sm);
}
</style>