Rewrite Parity (#647)

* Rewrite Parity * Update SEO, fix modals, add dashes to changelog * Edit create version title * Cache tags, SEO for search/partial noscript support, notifications fix * Deploy? * Fix vercel config * Fix it again * Finish user editing * Remove broken docker build * Switch reports to modals * Update project card * Navbar line animation in most places * Add chips * Move to navlink query params * remove autogen file * Add copy code * Fix webkit text box outlines, port report modal * Update error page * Switch to avatar component * Make keyboard nav work * Fix team member spacing * improve project ID display (#676) * Bug fixes * Update OG site title * More fixes * Design tweaks * Fix card wrapping on mobile * Darken light theme color a little * Sidebar navigation for settings, notifications, and moderation * Change follow icon from a heart to a bell * Revert "Change follow icon from a heart to a bell" This reverts commit e30b46ec5d93c57df847be88eba123c7419dd03b. * Change follows icon in settings * AaaaUUUUUUUGghghhhhhhhh * Project sidebar transparent button animations * Update file input button styling and change icon remove button text * Fix environments filter condition being inverted * Remove -> revert * Improve readability of warning banners on light mode * Fix mobile menu button colors * Clean up notifications page more * Creator dashboard and monetization work * Add processing fees declarations and acknowledgement box * Beta badges * Downgrade Nuxt Vercel Builder * Update the style of button groups to be more consistent * More button consistency * Remove desktop navbar on mobile * Update home page progress indicators * Fix page jumping (Thanks @stairman06) * Make checkbox checked style consistent with other selection indicators * More home page updates * Properly reset NavRows * Move filters menu on mobile * Stylized checkbox updated to match active styling * Filters icon * Respect prefers-reduced-motion * Add most backend payouts changes (untested) * Finish tested payouts code * Allow monetization unenrolling * No longer use brand color for active highlights on standard nav elements * More consistent button group on project page * Rounded tables * Fix some things (#716) * Team member fixes + re-add changelog/versions stuff * Remove dummy data * The great CSS refactor * Remove commented out css * Give modals the legacy label styles and update profile edit labels * Fix active chip size * Remove shadow from selected chip * Require email set for CMP * Update styles of notifications to universal-card * Equivalent exchange, trading some jank for some less bad jank * Fix all gallery buttons being missing when there is only 1 image * Update project creation modal * Make beta badge less bright * Beta badge heading styling * Update withdraw processing fees info * Remove redundant label * be * Fix inverted logic * 2% is 0.02 * Add toggle to turn off alpha modpacks banner * Why warning button? * Add more footer links (#719) * Add more footer links * Move twitter * Make items on user pages less comically large and move ad above navigation * Bump text down a little on home page * Update favicon colors * Remove task list package and change default description to use bullet points * I don't remember why I made this important but let's not * Ah, yes * this doesn't actually need to be important * Align items in input groups * Adjust some spacings and clear creation modal on opening * Versions now clickable * Add link to edit page to default description * Improve monetization information text * Make wrapped text inputs not shrink * Make chips work better * smol margin on clear mod message button * Allow non-authenticated users to access settings * Remove settings anchors * Fix versions page button style on firefox * Add advanced rendering toggle * Update slug input and icon card in project edit page * Legal sidebar * h1 at beginning of description no longer has top margin * Use universal card for legal pages * Update email addresses on legal pages * Update various page titles and descriptions for consistency * Various fixes and consolidation to API URL retrieval Prevents a bug where it's possible to generate the tags under one API, switch the API, and still have tags leftover from the old API Also finally fixes staging URL being jank * Make the theme button show regardless of login state Also remove the change theme from the user dropdown because it's very redundant with the several other ways of changing theme * Make mobile profile dropdown ordering consistent with desktop * Change the base url back * Revert "Change the base url back" This reverts commit c1da89fddb83776b39f626eab33c8dc67f8a75e4. * constantize * Tiny fixes (#722) * Box-shadow chip outlines * Show settings when signed out * mods -> projects * space * Beta badge border * Slug input overflow fix, scrollable * 🙈 it will all be okay 🙊 this is just temporary 🙉 😭😭 forgive me * Fix minor bugs * fix moderation page * More fixes * Temp fix for download button * BEGONE TABLES * Fix download button Co-authored-by: Ryan Cao <70191398+ryanccn@users.noreply.github.com> Co-authored-by: Prospector <prospectordev@gmail.com> Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com> Co-authored-by: triphora <emmaffle@modrinth.com>
2022-11-12 17:57:40 -07:00
parent 66d0ee8156
commit 20785926e2
100 changed files with 7572 additions and 7284 deletions
--- a/pages/settings/monetization.vue
+++ b/pages/settings/monetization.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <section v-if="enrolled" class="universal-card">
+      <h2>Revenue and metrics</h2>
+      <p>View your revenue and metrics in the creator dashboard:</p>
+      <NuxtLink class="iconified-button" to="/dashboard/revenue">
+        <ChartIcon /> Visit creator dashboard
+      </NuxtLink>
+    </section>
+    <section class="universal-card">
+      <h2 class="title">Enrollment</h2>
+      <template v-if="!enrolled && !$auth.user.email">
+        <p v-if="!enrolled">
+          You are not currently enrolled in Modrinth's Creator Monetization
+          Program. In order to enroll, you must first add a valid email address
+          to your account.
+        </p>
+        <NuxtLink class="iconified-button" to="/settings/account">
+          <SettingsIcon /> Visit account settings
+        </NuxtLink>
+      </template>
+      <template v-else-if="editing || !enrolled">
+        <p v-if="!enrolled">
+          You are not currently enrolled in Modrinth's Creator Monetization
+          Program. Setup a method of receiving payments below to enable
+          monetization.
+        </p>
+        <div class="enroll">
+          <Chips
+            v-model="selectedWallet"
+            :starting-value="selectedWallet"
+            :items="wallets"
+            :format-label="$formatWallet"
+            @input="onChangeWallet()"
+          />
+
+          <p>
+            Enter the information for the
+            {{ $formatWallet(selectedWallet) }} account you would like to
+            receive your revenue from the Creator Monetization Program:
+          </p>
+          <div class="input-group">
+            <Multiselect
+              v-model="accountType"
+              :options="getAccountTypes()"
+              :custom-label="(value) => formatAccountType(value)"
+              :searchable="false"
+              :close-on-select="true"
+              :show-labels="false"
+              :allow-empty="false"
+            />
+
+            <label class="hidden" for="account-input"
+              >{{ $formatWallet(selectedWallet) }}
+              {{ formatAccountType(accountType).toLowerCase() }} input
+              field</label
+            >
+            <input
+              id="account-input"
+              v-model="account"
+              :placeholder="`Enter your ${$formatWallet(
+                selectedWallet
+              )} ${formatAccountType(accountType).toLowerCase()}...`"
+              :type="accountType === 'email' ? 'email' : ''"
+            />
+            <span v-if="accountType === 'phone'">
+              Format: +18888888888 or +1-888-888-8888
+            </span>
+          </div>
+          <div class="input-group">
+            <button
+              class="iconified-button brand-button"
+              @click="updatePayoutData(false)"
+            >
+              <SaveIcon /> Save information
+            </button>
+            <button
+              v-if="enrolled"
+              class="iconified-button danger-button"
+              @click="updatePayoutData(true)"
+            >
+              <TrashIcon /> Remove enrollment
+            </button>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <p>
+          You are currently enrolled in the Creator Monetization Program with a
+          {{ $formatWallet(selectedWallet) }} account.
+        </p>
+        <button class="iconified-button brand-button" @click="editing = true">
+          <EditIcon /> Edit information
+        </button>
+      </template>
+    </section>
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+import Chips from '~/components/ui/Chips'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
+import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import EditIcon from '~/assets/images/utils/edit.svg?inline'
+import ChartIcon from '~/assets/images/utils/chart.svg?inline'
+import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
+
+export default {
+  components: {
+    Multiselect,
+    Chips,
+    SaveIcon,
+    TrashIcon,
+    EditIcon,
+    ChartIcon,
+    SettingsIcon,
+  },
+  data() {
+    return {
+      editing: false,
+      enrolled:
+        this.$auth.user.payout_data.payout_wallet &&
+        this.$auth.user.payout_data.payout_wallet_type &&
+        this.$auth.user.payout_data.payout_address,
+      wallets: ['paypal', 'venmo'],
+      selectedWallet: this.$auth.user.payout_data.payout_wallet ?? 'paypal',
+      accountType:
+        this.$auth.user.payout_data.payout_wallet_type ??
+        this.getAccountTypes()[0],
+      account: this.$auth.user.payout_data.payout_address ?? '',
+    }
+  },
+  head: {
+    title: 'Monetization settings - Modrinth',
+  },
+  methods: {
+    getAccountTypes() {
+      const types = []
+      if (this.selectedWallet === 'venmo') {
+        types.push('user_handle')
+      }
+      types.push('email')
+      types.push('phone')
+      return types
+    },
+    formatAccountType(value) {
+      switch (value) {
+        case 'email':
+          return 'Email address'
+        case 'phone':
+          return 'Phone number'
+        case 'user_handle':
+          return 'Username'
+        default:
+          return value.charAt(0).toUpperCase() + value.slice(1)
+      }
+    },
+    onChangeWallet() {
+      this.account = ''
+
+      // Set default account type for each wallet
+      if (this.selectedWallet === 'paypal') {
+        this.accountType = 'email'
+      } else if (this.selectedWallet === 'venmo') {
+        this.accountType = 'user_handle'
+      }
+    },
+    async updatePayoutData(unenroll) {
+      this.$nuxt.$loading.start()
+      if (unenroll) {
+        this.selectedWallet = 'paypal'
+        this.accountType = this.getAccountTypes()[0]
+        this.account = ''
+      }
+      try {
+        const data = {
+          payout_data: unenroll
+            ? null
+            : {
+                payout_wallet: this.selectedWallet,
+                payout_wallet_type: this.accountType,
+                payout_address: this.account,
+              },
+        }
+
+        await this.$axios.patch(
+          `user/${this.$auth.user.id}`,
+          data,
+          this.$defaultHeaders()
+        )
+        await this.$store.dispatch('auth/fetchUser', {
+          token: this.$auth.token,
+        })
+
+        this.editing = false
+        this.enrolled = !unenroll
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An error occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+      this.$nuxt.$loading.finish()
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>