Billing / plus frontend (#2130)

* [wip] initial

* [wip] subscriptions/plus frontend

* [wip] finish payment flow

* Charges page

* finish most subscriptions work

* Finish

* update eslint

* Fix issues

* fix intl extract

* fix omorphia locale extract

* fix responsiveness

* fix lint

apps/app-frontend/.env

@@ -1,3 +0,0 @@
-BASE_URL=https://staging-api.modrinth.com/v2/
-BROWSER_BASE_URL=https://staging-api.modrinth.com/v2/
-BASE_URL=

apps/app-frontend/package.json

@@ -23,7 +23,7 @@
     "tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
-    "vue-multiselect": "3.0.0-beta.3",
+    "vue-multiselect": "3.0.0",
     "vue-router": "4.3.0",
     "vue-typed-virtual-list": "^1.0.10"
   },

apps/frontend/nuxt.config.ts

@@ -77,6 +77,13 @@ export default defineNuxtConfig({
           title: "Modrinth mods",
         },
       ],
+      script: [
+        {
+          src: "https://js.stripe.com/v3/",
+          defer: true,
+          async: true,
+        },
+      ],
     },
   },
   vite: {
@@ -125,6 +132,7 @@ export default defineNuxtConfig({
         homePageProjects?: any[];
         homePageSearch?: any[];
         homePageNotifs?: any[];
+        products?: any[];
       } = {};
 
       try {
@@ -165,6 +173,7 @@ export default defineNuxtConfig({
         homePageProjects,
         homePageSearch,
         homePageNotifs,
+        products,
       ] = await Promise.all([
         $fetch(`${API_URL}tag/category`, headers),
         $fetch(`${API_URL}tag/loader`, headers),
@@ -174,6 +183,8 @@ export default defineNuxtConfig({
         $fetch(`${API_URL}projects_random?count=60`, headers),
         $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
         $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
+        // TODO: dehardcode
+        $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
       ]);
 
       state.categories = categories;
@@ -184,6 +195,7 @@ export default defineNuxtConfig({
       state.homePageProjects = homePageProjects;
       state.homePageSearch = homePageSearch;
       state.homePageNotifs = homePageNotifs;
+      state.products = products;
 
       await fs.writeFile("./src/generated/state.json", JSON.stringify(state));
 
@@ -236,7 +248,7 @@ export default defineNuxtConfig({
         const omorphiaLocales: string[] = [];
         const omorphiaLocaleSets = new Map<string, { files: { from: string }[] }>();
 
-        for await (const localeDir of globIterate("node_modules/omorphia/locales/*", {
+        for await (const localeDir of globIterate("node_modules/@modrinth/ui/src/locales/*", {
           posix: true,
         })) {
           const tag = basename(localeDir);

apps/frontend/package.json

@@ -10,9 +10,10 @@
     "postinstall": "nuxi prepare",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file locales/en-US/index.json --format crowdin --preserve-whitespace"
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
   },
   "devDependencies": {
+    "@formatjs/cli": "^6.2.12",
     "@nuxt/devtools": "^1.3.3",
     "@nuxtjs/turnstile": "^0.8.0",
     "@types/node": "^20.1.0",
@@ -49,7 +50,7 @@
     "pathe": "^1.1.2",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
-    "vue-multiselect": "3.0.0-alpha.2",
+    "vue-multiselect": "3.0.0",
     "vue3-apexcharts": "^1.5.2",
     "xss": "^1.0.14"
   }

apps/frontend/src/assets/styles/layout.scss

@@ -116,6 +116,5 @@
 
   .normal-page__content {
     max-width: calc(60rem - 0.75rem);
-    overflow-x: hidden;
   }
 }

apps/frontend/src/assets/styles/utils.scss

@@ -2,10 +2,6 @@
   display: none !important;
 }
 
-.w-100 {
-  width: 100%;
-}
-
 body {
   overflow-y: scroll;
   overflow-x: hidden;

apps/frontend/src/composables/auth.js

@@ -39,6 +39,16 @@ export const initAuth = async (oldToken = null) => {
     authCookie.value = route.query.code;
   }
 
+  if (route.fullPath.includes("new_account=true") && route.path !== "/auth/welcome") {
+    const redirect = route.path.startsWith("/auth/") ? null : route.fullPath;
+
+    await navigateTo(
+      `/auth/welcome?authToken=${route.query.code}${
+        redirect ? `&redirect=${encodeURIComponent(redirect)}` : ""
+      }`,
+    );
+  }
+
   if (authCookie.value) {
     auth.token = authCookie.value;
 

apps/frontend/src/composables/country.js

@@ -0,0 +1,6 @@
+export const useUserCountry = () =>
+  useState("userCountry", () => {
+    const headers = useRequestHeaders(["cf-ipcountry"]);
+
+    return headers["cf-ipcountry"] ?? "US";
+  });

apps/frontend/src/composables/user.js

@@ -12,20 +12,27 @@ export const initUser = async () => {
   const auth = (await useAuth()).value;
 
   const user = {
-    notifications: [],
+    collections: [],
     follows: [],
+    subscriptions: [],
     lastUpdated: 0,
   };
 
   if (auth.user && auth.user.id) {
     try {
-      const [follows, collections] = await Promise.all([
+      const headers = {
-        useBaseFetch(`user/${auth.user.id}/follows`),
+        Authorization: auth.token,
-        useBaseFetch(`user/${auth.user.id}/collections`, { apiVersion: 3 }),
+      };
+
+      const [follows, collections, subscriptions] = await Promise.all([
+        useBaseFetch(`user/${auth.user.id}/follows`, { headers }, true),
+        useBaseFetch(`user/${auth.user.id}/collections`, { apiVersion: 3, headers }, true),
+        useBaseFetch(`billing/subscriptions`, { internal: true, headers }, true),
       ]);
 
       user.collections = collections;
       user.follows = follows;
+      user.subscriptions = subscriptions;
       user.lastUpdated = Date.now();
     } catch (err) {
       console.error(err);
@@ -170,6 +177,5 @@ export const logout = async () => {
 
   await useAuth("none");
   useCookie("auth-token").value = null;
-  await navigateTo("/");
   stopLoading();
 };

apps/frontend/src/layouts/default.vue

@@ -18,6 +18,21 @@
         </nuxt-link>
       </template>
     </div>
+    <div
+      v-if="
+        user &&
+        user.subscriptions &&
+        user.subscriptions.some((x) => x.status === 'payment-failed') &&
+        route.path !== '/settings/billing'
+      "
+      class="email-nag"
+    >
+      <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
+      <nuxt-link class="btn" to="/settings/billing">
+        <SettingsIcon />
+        {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
+      </nuxt-link>
+    </div>
     <div
       v-if="
         config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com') &&
@@ -454,6 +469,12 @@ const { formatMessage } = useVIntl();
 
 const app = useNuxtApp();
 const auth = await useAuth();
+const user = ref();
+
+if (import.meta.client) {
+  user.value = await useUser();
+}
+
 const cosmetics = useCosmetics();
 const flags = useFeatureFlags();
 const tags = useTags();
@@ -484,6 +505,18 @@ const addEmailBannerMessages = defineMessages({
   },
 });
 
+const subscriptionPaymentFailedBannerMessages = defineMessages({
+  title: {
+    id: "layout.banner.subscription-payment-failed.title",
+    defaultMessage:
+      "Your subscription failed to renew. Please update your payment method to prevent losing access.",
+  },
+  action: {
+    id: "layout.banner.subscription-payment-failed.button",
+    defaultMessage: "Update billing info",
+  },
+});
+
 const stagingBannerMessages = defineMessages({
   title: {
     id: "layout.banner.staging.title",

apps/frontend/src/locales/en-US/index.json

@@ -368,6 +368,12 @@
   "layout.banner.staging.title": {
     "message": "You’re viewing Modrinth’s staging environment."
   },
+  "layout.banner.subscription-payment-failed.button": {
+    "message": "Update billing info"
+  },
+  "layout.banner.subscription-payment-failed.title": {
+    "message": "Your subscription failed to renew. Please update your payment method to prevent losing access."
+  },
   "layout.banner.verify-email.action": {
     "message": "Re-send verification email"
   },
@@ -788,6 +794,93 @@
   "settings.authorized-apps.title": {
     "message": "Authorized apps"
   },
+  "settings.billing.modal.cancel.action": {
+    "message": "Cancel subscription"
+  },
+  "settings.billing.modal.cancel.description": {
+    "message": "This will cancel your subscription. You will retain your perks until the end of the current billing cycle."
+  },
+  "settings.billing.modal.cancel.title": {
+    "message": "Are you sure you want to cancel your subscription?"
+  },
+  "settings.billing.modal.delete.action": {
+    "message": "Remove this payment method"
+  },
+  "settings.billing.modal.delete.description": {
+    "message": "This will remove this payment method forever (like really forever)."
+  },
+  "settings.billing.modal.delete.title": {
+    "message": "Are you sure you want to remove this payment method?"
+  },
+  "settings.billing.payment_method.action.add": {
+    "message": "Add payment method"
+  },
+  "settings.billing.payment_method.action.history": {
+    "message": "View past charges"
+  },
+  "settings.billing.payment_method.action.primary": {
+    "message": "Make primary"
+  },
+  "settings.billing.payment_method.card_display": {
+    "message": "{card_brand} ending in {last_four}"
+  },
+  "settings.billing.payment_method.card_expiry": {
+    "message": "Expires {month}/{year}"
+  },
+  "settings.billing.payment_method.none": {
+    "message": "You have not added any payment methods."
+  },
+  "settings.billing.payment_method.primary": {
+    "message": "Primary"
+  },
+  "settings.billing.payment_method.title": {
+    "message": "Payment methods"
+  },
+  "settings.billing.payment_method_type.amazon_pay": {
+    "message": "Amazon Pay"
+  },
+  "settings.billing.payment_method_type.amex": {
+    "message": "American Express"
+  },
+  "settings.billing.payment_method_type.cashapp": {
+    "message": "Cash App"
+  },
+  "settings.billing.payment_method_type.diners": {
+    "message": "Diners Club"
+  },
+  "settings.billing.payment_method_type.discover": {
+    "message": "Discover"
+  },
+  "settings.billing.payment_method_type.eftpos": {
+    "message": "EFTPOS"
+  },
+  "settings.billing.payment_method_type.jcb": {
+    "message": "JCB"
+  },
+  "settings.billing.payment_method_type.mastercard": {
+    "message": "MasterCard"
+  },
+  "settings.billing.payment_method_type.paypal": {
+    "message": "PayPal"
+  },
+  "settings.billing.payment_method_type.unionpay": {
+    "message": "UnionPay"
+  },
+  "settings.billing.payment_method_type.unknown": {
+    "message": "Unknown payment method"
+  },
+  "settings.billing.payment_method_type.visa": {
+    "message": "Visa"
+  },
+  "settings.billing.subscription.description": {
+    "message": "Manage your Modrinth subscriptions."
+  },
+  "settings.billing.subscription.title": {
+    "message": "Subscriptions"
+  },
+  "settings.billing.title": {
+    "message": "Billing and subscriptions"
+  },
   "settings.display.banner.developer-mode.button": {
     "message": "Deactivate developer mode"
   },
@@ -827,6 +920,9 @@
   "settings.display.project-list-layouts.user": {
     "message": "User profile pages"
   },
+  "settings.display.project-list.layouts.collection": {
+    "message": "Collection"
+  },
   "settings.display.sidebar.advanced-rendering.description": {
     "message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
   },

apps/frontend/src/pages/[type]/[id].vue

@@ -272,7 +272,7 @@
               <hr class="card-divider" />
             </div>
             <div class="input-group">
-              <template v-if="auth.user">
+              <template v-if="auth.user && user && user.follows">
                 <button
                   v-if="!user.follows.find((x) => x.id === project.id)"
                   class="btn"
@@ -486,7 +486,12 @@
             >our documentation</a
           >.
         </MessageBanner>
-        <Promotion v-if="tags.approvedStatuses.includes(project.status)" />
+        <Promotion
+          v-if="
+            tags.approvedStatuses.includes(project.status) &&
+            (!auth.user || !isPermission(auth.user.badges, 1 << 0))
+          "
+        />
         <div class="navigation-card">
           <NavRow
             :links="[
@@ -1128,7 +1133,11 @@ const route = useNativeRoute();
 const config = useRuntimeConfig();
 
 const auth = await useAuth();
-const user = await useUser();
+const user = ref();
+if (import.meta.client) {
+  user.value = await useUser();
+}
+
 const cosmetics = useCosmetics();
 const tags = useTags();
 const flags = useFeatureFlags();

apps/frontend/src/pages/auth/sign-in.vue

@@ -181,13 +181,7 @@ const route = useNativeRoute();
 
 const redirectTarget = route.query.redirect || "";
 
-if (route.fullPath.includes("new_account=true")) {
+if (route.query.code && !route.fullPath.includes("new_account=true")) {
-  await navigateTo(
-    `/auth/welcome?authToken=${route.query.code}${
-      route.query.redirect ? `&redirect=${encodeURIComponent(route.query.redirect)}` : ""
-    }`,
-  );
-} else if (route.query.code) {
   await finishSignIn();
 }
 

apps/frontend/src/pages/auth/sign-up.vue

@@ -205,14 +205,6 @@ const route = useNativeRoute();
 
 const redirectTarget = route.query.redirect;
 
-if (route.fullPath.includes("new_account=true")) {
-  await navigateTo(
-    `/auth/welcome?authToken=${route.query.code}${
-      route.query.redirect ? `&redirect=${encodeURIComponent(route.query.redirect)}` : ""
-    }`,
-  );
-}
-
 if (auth.value.user) {
   await navigateTo("/dashboard");
 }

apps/frontend/src/pages/auth/welcome.vue

@@ -73,7 +73,7 @@ useHead({
 const subscribe = ref(true);
 
 async function continueSignUp() {
-  const route = useNativeRoute();
+  const route = useRoute();
 
   await useAuth(route.query.authToken);
   await useUser();

apps/frontend/src/pages/collection/[id].vue

@@ -249,7 +249,7 @@
         </div>
       </div>
       <div class="normal-page__content">
-        <Promotion :external="false" query-param="" />
+        <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
 
         <nav class="navigation-card">
           <NavRow

apps/frontend/src/pages/dashboard/collections.vue

@@ -32,7 +32,7 @@
               <BoxIcon />
               {{
                 formatMessage(messages.projectsCountLabel, {
-                  count: formatCompactNumber(user.follows.length),
+                  count: formatCompactNumber(user ? user.follows.length : 0),
                 })
               }}
             </div>
@@ -127,8 +127,8 @@ useHead({
   title: () => `${formatMessage(messages.collectionsLongTitle)} - Modrinth`,
 });
 
-const user = await useUser();
 const auth = await useAuth();
+const user = await useUser();
 
 if (import.meta.client) {
   await initUserFollows();

apps/frontend/src/pages/organization/[id].vue

@@ -129,7 +129,7 @@
     </div>
     <div v-if="!routeHasSettings" class="normal-page__content">
       <ModalCreation ref="modal_creation" :organization-id="organization.id" />
-      <Promotion :external="false" query-param="" />
+      <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
       <div v-if="isInvited" class="universal-card information invited">
         <h2>Invitation to join {{ organization.name }}</h2>
         <p>You have been invited to join {{ organization.name }}.</p>

apps/frontend/src/pages/plus.vue

@@ -0,0 +1,159 @@
+<template>
+  <PurchaseModal
+    ref="purchaseModal"
+    :product="midasProduct"
+    :country="country"
+    publishable-key="pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b"
+    :send-billing-request="
+      async (body) =>
+        await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
+    "
+    :fetch-payment-data="fetchPaymentData"
+    :on-error="
+      (err) =>
+        data.$notify({
+          group: 'main',
+          title: 'An error occurred',
+          type: 'error',
+          text: err.message ?? (err.data ? err.data.description : err),
+        })
+    "
+    :customer="customer"
+    :payment-methods="paymentMethods"
+    :return-url="`${config.public.siteUrl}/settings/billing`"
+  />
+  <div class="main-hero">
+    <div class="flex max-w-screen-lg flex-col items-center gap-4 text-center">
+      <ModrinthPlusIcon class="h-8 w-max text-contrast" />
+      <h1 class="m-0 text-[4rem]">Support creators and go ad-free</h1>
+      <p class="m-0 mb-4 text-[18px] leading-relaxed">
+        Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an
+        exclusive profile badge! Half your subscription goes directly to Modrinth creators. Cancel
+        anytime.
+      </p>
+      <p class="m-0 text-[2rem] font-bold text-purple">
+        {{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}/mo
+      </p>
+      <p class="m-0 mb-4 text-secondary">
+        or save
+        {{ calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly) }}% with
+        annual billing!
+      </p>
+      <nuxt-link
+        v-if="auth.user && isPermission(auth.user.badges, 1 << 0)"
+        to="/settings/billing"
+        class="btn btn-purple btn-large"
+      >
+        <SettingsIcon />
+        Manage subscription
+      </nuxt-link>
+      <button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">
+        Subscribe
+      </button>
+      <nuxt-link
+        v-else
+        :to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`"
+        class="btn btn-purple btn-large"
+      >
+        Subscribe
+      </nuxt-link>
+    </div>
+  </div>
+  <div class="perks-hero">
+    <h2>What you get with Modrinth Plus!</h2>
+    <div class="mt-8 grid max-w-screen-lg gap-8 lg:grid-cols-3">
+      <div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
+        <HeartIcon class="h-8 w-8 text-purple" />
+        <span class="text-lg font-bold">Support Modrinth creators</span>
+        <span class="leading-5 text-secondary">
+          50% of your subscription goes directly to Modrinth creators.
+        </span>
+      </div>
+      <div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
+        <SparklesIcon class="h-8 w-8 text-purple" />
+        <span class="text-lg font-bold">Remove all ads</span>
+        <span class="leading-5 text-secondary">
+          Never see an advertisement again on the Modrinth app or the website.
+        </span>
+      </div>
+      <div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
+        <StarIcon class="h-8 w-8 text-purple" />
+        <span class="text-lg font-bold">Profile badge</span>
+        <span class="leading-5 text-secondary">Get an exclusive badge on your user page.</span>
+      </div>
+    </div>
+    <span class="mt-4 text-secondary">...and much more coming soon!</span>
+  </div>
+</template>
+<script setup>
+import {
+  ModrinthPlusIcon,
+  HeartIcon,
+  SparklesIcon,
+  StarIcon,
+  SettingsIcon,
+} from "@modrinth/assets";
+import { PurchaseModal } from "@modrinth/ui";
+import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
+import { products } from "~/generated/state.json";
+
+const title = "Subscribe to Modrinth Plus!";
+const description =
+  "Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators.";
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+});
+
+const vintl = useVIntl();
+
+const data = useNuxtApp();
+const config = useRuntimeConfig();
+
+const auth = await useAuth();
+const purchaseModal = ref();
+const midasProduct = ref(products.find((x) => x.metadata.type === "midas"));
+const country = useUserCountry();
+const price = computed(() =>
+  midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
+);
+const customer = ref();
+const paymentMethods = ref([]);
+
+async function fetchPaymentData() {
+  [customer.value, paymentMethods.value] = await Promise.all([
+    useBaseFetch("billing/customer", { internal: true }),
+    useBaseFetch("billing/payment_methods", { internal: true }),
+  ]);
+}
+
+const route = useRoute();
+onMounted(() => {
+  if (route.query.showModal) {
+    purchaseModal.value.show();
+  }
+});
+</script>
+<style lang="scss" scoped>
+.main-hero {
+  background: linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
+    var(--color-accent-contrast);
+  margin-top: -4rem;
+  padding: 11.25rem 1rem 8rem;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.perks-hero {
+  background-color: var(--color-accent-contrast);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 4rem 1rem;
+}
+</style>

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -216,7 +216,7 @@
       </section>
     </aside>
     <section class="normal-page__content">
-      <Promotion :external="false" query-param="" />
+      <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
       <div class="card search-controls">
         <div class="search-filter-container">
           <button
@@ -369,6 +369,7 @@ const route = useNativeRoute();
 
 const cosmetics = useCosmetics();
 const tags = useTags();
+const auth = await useAuth();
 
 const query = ref("");
 const facets = ref([]);

apps/frontend/src/pages/settings.vue

@@ -47,6 +47,12 @@
               >
                 <MonitorSmartphoneIcon />
               </NavStackItem>
+              <NavStackItem
+                link="/settings/billing"
+                :label="formatMessage(commonSettingsMessages.billing)"
+              >
+                <CardIcon />
+              </NavStackItem>
             </template>
             <template v-if="auth.user">
               <h3>Developer</h3>
@@ -81,6 +87,7 @@ import {
   ShieldIcon,
   KeyIcon,
   LanguagesIcon,
+  CardIcon,
 } from "@modrinth/assets";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";

apps/frontend/src/pages/settings/billing/charges.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <section class="card">
+      <Breadcrumbs
+        current-title="Past charges"
+        :link-stack="[{ href: '/settings/billing', label: 'Billing and subscriptions' }]"
+      />
+      <h2>Past charges</h2>
+      <p>All of your past charges to your Modrinth account will be listed here:</p>
+      <div
+        v-for="charge in charges"
+        :key="charge.id"
+        class="universal-card recessed flex items-center justify-between gap-4"
+      >
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-1">
+            <span class="font-bold text-primary">
+              <template v-if="charge.product.metadata.type === 'midas'"> Modrinth Plus </template>
+              <template v-else> Unknown product </template>
+              <template v-if="charge.metadata.modrinth_subscription_interval">
+                {{ charge.metadata.modrinth_subscription_interval }}
+              </template>
+            </span>
+            ⋅
+            <span>{{ formatPrice(charge.amount, charge.currency) }}</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <Badge :color="charge.status === 'succeeded' ? 'green' : 'red'" :type="charge.status" />
+            ⋅
+            {{ $dayjs.unix(charge.created).format("YYYY-MM-DD") }}
+          </div>
+        </div>
+        <a
+          v-if="charge.receipt_url"
+          class="iconified-button raised-button"
+          :href="charge.receipt_url"
+        >
+          <ReceiptTextIcon />
+          View receipt
+        </a>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup>
+import { ReceiptTextIcon } from "@modrinth/assets";
+import { Breadcrumbs, Badge } from "@modrinth/ui";
+import { products } from "~/generated/state.json";
+
+definePageMeta({
+  middleware: "auth",
+});
+
+const vintl = useVIntl();
+
+const { data: charges } = await useAsyncData(
+  "billing/payments",
+  () => useBaseFetch("billing/payments", { internal: true }),
+  {
+    transform: (charges) => {
+      return charges.map((charge) => {
+        const product = products.find((product) =>
+          product.prices.some((price) => price.id === charge.metadata.modrinth_price_id),
+        );
+
+        charge.product = product;
+
+        return charge;
+      });
+    },
+  },
+);
+
+// TODO move to omorphia utils , duplicated from index
+function formatPrice(price, currency) {
+  const formatter = new Intl.NumberFormat(vintl.locale, {
+    style: "currency",
+    currency,
+  });
+
+  const maxDigits = formatter.resolvedOptions().maximumFractionDigits;
+
+  const convertedPrice = price / Math.pow(10, maxDigits);
+
+  return formatter.format(convertedPrice);
+}
+console.log(charges);
+</script>

apps/frontend/src/pages/settings/billing/index.vue

@@ -0,0 +1,668 @@
+<template>
+  <section class="universal-card">
+    <h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
+    <p>{{ formatMessage(messages.subscriptionDescription) }}</p>
+    <div class="universal-card recessed">
+      <ConfirmModal
+        ref="modal_cancel"
+        :title="formatMessage(cancelModalMessages.title)"
+        :description="formatMessage(cancelModalMessages.description)"
+        :proceed-label="formatMessage(cancelModalMessages.action)"
+        @proceed="cancelSubscription(cancelSubscriptionId)"
+      />
+      <div class="flex flex-wrap justify-between gap-4">
+        <div class="flex flex-col gap-4">
+          <template v-if="midasSubscription">
+            <span v-if="midasSubscription.status === 'active'">
+              You're currently subscribed to:
+            </span>
+            <span v-else-if="midasSubscription.status === 'payment-processing'" class="text-orange">
+              Your payment is being processed. Perks will activate once payment is complete.
+            </span>
+            <span v-else-if="midasSubscription.status === 'cancelled'">
+              You've cancelled your subscription. <br />
+              You will retain your perks until the end of the current billing cycle.
+            </span>
+            <span v-else-if="midasSubscription.status === 'payment-failed'" class="text-red">
+              Your subscription payment failed. Please update your payment method.
+            </span>
+          </template>
+
+          <span v-else>Become a subscriber to Modrinth Plus!</span>
+          <ModrinthPlusIcon class="h-8 w-min" />
+          <div class="flex flex-col gap-2">
+            <span class="font-bold">Benefits</span>
+            <div class="flex items-center gap-2">
+              <CheckCircleIcon class="h-5 w-5 text-brand" />
+              <span>Ad-free browsing on modrinth.com and Modrinth App</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <CheckCircleIcon class="h-5 w-5 text-brand" />
+              <span>Modrinth+ badge on your profile</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <CheckCircleIcon class="h-5 w-5 text-brand" />
+              <span>Support Modrinth and creators directly</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex w-full flex-wrap justify-between gap-4 xl:w-auto xl:flex-col">
+          <div class="flex flex-col gap-1 xl:ml-auto xl:text-right">
+            <span class="text-2xl font-bold text-dark">
+              <template v-if="midasSubscription">
+                {{
+                  formatPrice(
+                    vintl.locale,
+                    midasSubscriptionPrice.prices.intervals[midasSubscription.interval],
+                    midasSubscriptionPrice.currency_code,
+                  )
+                }}
+                /
+                {{ midasSubscription.interval }}
+              </template>
+              <template v-else>
+                {{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}
+                / month
+              </template>
+            </span>
+            <template v-if="midasSubscription">
+              <span class="text-sm text-secondary">
+                Since {{ $dayjs(midasSubscription.created).format("MMMM D, YYYY") }}
+              </span>
+              <span v-if="midasSubscription.status === 'active'" class="text-sm text-secondary">
+                Renews {{ $dayjs(midasSubscription.expires).format("MMMM D, YYYY") }}
+              </span>
+              <span
+                v-else-if="midasSubscription.status === 'cancelled'"
+                class="text-sm text-secondary"
+              >
+                Expires {{ $dayjs(midasSubscription.expires).format("MMMM D, YYYY") }}
+              </span>
+            </template>
+
+            <span v-else class="text-sm text-secondary">
+              Or
+              {{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }} /
+              year (save
+              {{
+                calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly)
+              }}%)!
+            </span>
+          </div>
+          <div
+            v-if="midasSubscription && midasSubscription.status === 'payment-failed'"
+            class="ml-auto flex flex-row-reverse items-center gap-2"
+          >
+            <button
+              v-if="midasSubscription && midasSubscription.status === 'payment-failed'"
+              class="iconified-button raised-button"
+              @click="
+                () => {
+                  purchaseModalStep = 0;
+                  $refs.purchaseModal.show();
+                }
+              "
+            >
+              <UpdatedIcon />
+              Update method
+            </button>
+            <OverflowMenu
+              class="btn icon-only transparent"
+              :options="[
+                {
+                  id: 'cancel',
+                  action: () => {
+                    cancelSubscriptionId = midasSubscription.id;
+                    $refs.modal_cancel.show();
+                  },
+                },
+              ]"
+            >
+              <MoreVerticalIcon />
+              <template #cancel><XIcon /> Cancel</template>
+            </OverflowMenu>
+          </div>
+          <button
+            v-else-if="midasSubscription && midasSubscription.status !== 'cancelled'"
+            class="iconified-button raised-button !ml-auto"
+            @click="
+              () => {
+                cancelSubscriptionId = midasSubscription.id;
+                $refs.modal_cancel.show();
+              }
+            "
+          >
+            <XIcon /> Cancel
+          </button>
+          <button
+            v-else
+            class="btn btn-purple btn-large ml-auto"
+            @click="
+              () => {
+                purchaseModalStep = 0;
+                $refs.purchaseModal.show();
+              }
+            "
+          >
+            <RightArrowIcon />
+            Subscribe
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="universal-card">
+    <ConfirmModal
+      ref="modal_confirm"
+      :title="formatMessage(deleteModalMessages.title)"
+      :description="formatMessage(deleteModalMessages.description)"
+      :proceed-label="formatMessage(deleteModalMessages.action)"
+      @proceed="removePaymentMethod(removePaymentMethodIndex)"
+    />
+    <PurchaseModal
+      ref="purchaseModal"
+      :product="midasProduct"
+      :country="country"
+      publishable-key="pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b"
+      :send-billing-request="
+        async (body) =>
+          await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
+      "
+      :on-error="
+        (err) =>
+          data.$notify({
+            group: 'main',
+            title: 'An error occurred',
+            type: 'error',
+            text: err.message ?? (err.data ? err.data.description : err),
+          })
+      "
+      :customer="customer"
+      :payment-methods="paymentMethods"
+      :return-url="`${config.public.siteUrl}/settings/billing`"
+    />
+    <NewModal ref="addPaymentMethodModal">
+      <template #title>
+        <span class="text-lg font-extrabold text-contrast">
+          {{ formatMessage(messages.paymentMethodTitle) }}
+        </span>
+      </template>
+      <div class="min-h-[16rem] md:w-[600px]">
+        <div
+          v-show="loadingPaymentMethodModal !== 2"
+          class="flex min-h-[16rem] items-center justify-center"
+        >
+          <AnimatedLogo class="w-[80px]" />
+        </div>
+        <div v-show="loadingPaymentMethodModal === 2" class="min-h-[16rem] p-1">
+          <div id="address-element"></div>
+          <div id="payment-element" class="mt-4"></div>
+        </div>
+        <div v-show="loadingPaymentMethodModal === 2" class="input-group push-right mt-auto pt-4">
+          <button class="btn" @click="$refs.addPaymentMethodModal.hide()">
+            <XIcon />
+            {{ formatMessage(commonMessages.cancelButton) }}
+          </button>
+          <button class="btn btn-primary" :disabled="loadingAddMethod" @click="submit">
+            <PlusIcon />
+            {{ formatMessage(messages.paymentMethodAdd) }}
+          </button>
+        </div>
+      </div>
+    </NewModal>
+    <div class="header__row">
+      <div class="header__title">
+        <h2 class="text-2xl">{{ formatMessage(messages.paymentMethodTitle) }}</h2>
+      </div>
+      <nuxt-link class="btn" to="/settings/billing/charges">
+        <HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
+      </nuxt-link>
+      <button class="btn" @click="addPaymentMethod">
+        <PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
+      </button>
+    </div>
+    <div
+      v-if="!paymentMethods || paymentMethods.length === 0"
+      class="universal-card recessed !mb-0"
+    >
+      {{ formatMessage(messages.paymentMethodNone) }}
+    </div>
+    <div v-else class="flex flex-col gap-4">
+      <div
+        v-for="(method, index) in paymentMethods"
+        :key="index"
+        class="universal-card recessed !mb-0 flex items-center justify-between"
+      >
+        <div class="flex gap-2">
+          <CardIcon v-if="method.type === 'card'" class="h-8 w-8" />
+          <CurrencyIcon v-else-if="method.type === 'cashapp'" class="h-8 w-8" />
+          <PayPalIcon v-else-if="method.type === 'paypal'" class="h-8 w-8" />
+          <div class="flex flex-col">
+            <div class="flex items-center gap-2">
+              <div class="font-bold text-contrast">
+                <template v-if="method.type === 'card'">
+                  {{
+                    formatMessage(messages.paymentMethodCardDisplay, {
+                      card_brand:
+                        formatMessage(paymentMethodTypes[method.card.brand]) ??
+                        formatMessage(paymentMethodTypes.unknown),
+                      last_four: method.card.last4,
+                    })
+                  }}
+                </template>
+                <template v-else>
+                  {{
+                    formatMessage(paymentMethodTypes[method.type]) ??
+                    formatMessage(paymentMethodTypes.unknown)
+                  }}
+                </template>
+              </div>
+              <div
+                v-if="primaryPaymentMethodId === method.id"
+                class="border-r-ma rounded-full bg-button-bg px-2 py-0.5 text-sm font-bold text-secondary"
+              >
+                {{ formatMessage(messages.paymentMethodPrimary) }}
+              </div>
+            </div>
+            <div v-if="method.type === 'card'" class="text-secondary">
+              {{
+                formatMessage(messages.paymentMethodCardExpiry, {
+                  month: method.card.exp_month,
+                  year: method.card.exp_year,
+                })
+              }}
+            </div>
+            <div v-else-if="method.type === 'cashapp'" class="text-secondary">
+              {{ method.cashapp.cashtag }}
+            </div>
+            <div v-else-if="method.type === 'paypal'" class="text-secondary">
+              {{ method.paypal.payer_email }}
+            </div>
+          </div>
+        </div>
+        <OverflowMenu
+          class="btn icon-only transparent"
+          :options="
+            [
+              {
+                id: 'primary',
+                action: () => editPaymentMethod(index, true),
+              },
+              {
+                id: 'remove',
+                action: () => {
+                  removePaymentMethodIndex = index;
+                  $refs.modal_confirm.show();
+                },
+                color: 'red',
+                hoverOnly: true,
+              },
+            ].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
+          "
+        >
+          <MoreVerticalIcon />
+          <template #primary>
+            <StarIcon />
+            {{ formatMessage(messages.paymentMethodMakePrimary) }}
+          </template>
+          <template #edit>
+            <EditIcon />
+            {{ formatMessage(commonMessages.editButton) }}
+          </template>
+          <template #remove>
+            <TrashIcon />
+            {{ formatMessage(commonMessages.deleteLabel) }}
+          </template>
+        </OverflowMenu>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import { ConfirmModal, NewModal, OverflowMenu, AnimatedLogo, PurchaseModal } from "@modrinth/ui";
+import {
+  PlusIcon,
+  XIcon,
+  CardIcon,
+  MoreVerticalIcon,
+  TrashIcon,
+  EditIcon,
+  StarIcon,
+  PayPalIcon,
+  CurrencyIcon,
+  CheckCircleIcon,
+  RightArrowIcon,
+  ModrinthPlusIcon,
+  UpdatedIcon,
+  HistoryIcon,
+} from "@modrinth/assets";
+import { calculateSavings, formatPrice, createStripeElements, getCurrency } from "@modrinth/utils";
+import { ref } from "vue";
+import { products } from "~/generated/state.json";
+
+definePageMeta({
+  middleware: "auth",
+});
+
+const data = useNuxtApp();
+const config = useRuntimeConfig();
+
+const vintl = useVIntl();
+const { formatMessage } = vintl;
+
+const deleteModalMessages = defineMessages({
+  title: {
+    id: "settings.billing.modal.delete.title",
+    defaultMessage: "Are you sure you want to remove this payment method?",
+  },
+  description: {
+    id: "settings.billing.modal.delete.description",
+    defaultMessage: "This will remove this payment method forever (like really forever).",
+  },
+  action: {
+    id: "settings.billing.modal.delete.action",
+    defaultMessage: "Remove this payment method",
+  },
+});
+
+const cancelModalMessages = defineMessages({
+  title: {
+    id: "settings.billing.modal.cancel.title",
+    defaultMessage: "Are you sure you want to cancel your subscription?",
+  },
+  description: {
+    id: "settings.billing.modal.cancel.description",
+    defaultMessage:
+      "This will cancel your subscription. You will retain your perks until the end of the current billing cycle.",
+  },
+  action: {
+    id: "settings.billing.modal.cancel.action",
+    defaultMessage: "Cancel subscription",
+  },
+});
+
+const messages = defineMessages({
+  subscriptionTitle: {
+    id: "settings.billing.subscription.title",
+    defaultMessage: "Subscriptions",
+  },
+  subscriptionDescription: {
+    id: "settings.billing.subscription.description",
+    defaultMessage: "Manage your Modrinth subscriptions.",
+  },
+  paymentMethodTitle: {
+    id: "settings.billing.payment_method.title",
+    defaultMessage: "Payment methods",
+  },
+  paymentMethodNone: {
+    id: "settings.billing.payment_method.none",
+    defaultMessage: "You have not added any payment methods.",
+  },
+  paymentMethodHistory: {
+    id: "settings.billing.payment_method.action.history",
+    defaultMessage: "View past charges",
+  },
+  paymentMethodAdd: {
+    id: "settings.billing.payment_method.action.add",
+    defaultMessage: "Add payment method",
+  },
+  paymentMethodPrimary: {
+    id: "settings.billing.payment_method.primary",
+    defaultMessage: "Primary",
+  },
+  paymentMethodMakePrimary: {
+    id: "settings.billing.payment_method.action.primary",
+    defaultMessage: "Make primary",
+  },
+  paymentMethodCardDisplay: {
+    id: "settings.billing.payment_method.card_display",
+    defaultMessage: "{card_brand} ending in {last_four}",
+  },
+  paymentMethodCardExpiry: {
+    id: "settings.billing.payment_method.card_expiry",
+    defaultMessage: "Expires {month}/{year}",
+  },
+});
+
+const paymentMethodTypes = defineMessages({
+  visa: {
+    id: "settings.billing.payment_method_type.visa",
+    defaultMessage: "Visa",
+  },
+  amex: { id: "settings.billing.payment_method_type.amex", defaultMessage: "American Express" },
+  diners: { id: "settings.billing.payment_method_type.diners", defaultMessage: "Diners Club" },
+  discover: { id: "settings.billing.payment_method_type.discover", defaultMessage: "Discover" },
+  eftpos: { id: "settings.billing.payment_method_type.eftpos", defaultMessage: "EFTPOS" },
+  jcb: { id: "settings.billing.payment_method_type.jcb", defaultMessage: "JCB" },
+  mastercard: {
+    id: "settings.billing.payment_method_type.mastercard",
+    defaultMessage: "MasterCard",
+  },
+  unionpay: { id: "settings.billing.payment_method_type.unionpay", defaultMessage: "UnionPay" },
+  paypal: { id: "settings.billing.payment_method_type.paypal", defaultMessage: "PayPal" },
+  cashapp: { id: "settings.billing.payment_method_type.cashapp", defaultMessage: "Cash App" },
+  amazon_pay: {
+    id: "settings.billing.payment_method_type.amazon_pay",
+    defaultMessage: "Amazon Pay",
+  },
+  unknown: {
+    id: "settings.billing.payment_method_type.unknown",
+    defaultMessage: "Unknown payment method",
+  },
+});
+
+let stripe = null;
+let elements = null;
+
+function loadStripe() {
+  try {
+    if (!stripe) {
+      stripe = Stripe(
+        "pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b",
+      );
+    }
+  } catch {}
+}
+
+const [
+  { data: paymentMethods, refresh: refreshPaymentMethods },
+  { data: customer, refresh: refreshCustomer },
+  { data: subscriptions, refresh: refreshSubscriptions },
+] = await Promise.all([
+  useAsyncData("billing/payment_methods", () =>
+    useBaseFetch("billing/payment_methods", { internal: true }),
+  ),
+  useAsyncData("billing/customer", () => useBaseFetch("billing/customer", { internal: true })),
+  useAsyncData("billing/subscriptions", () =>
+    useBaseFetch("billing/subscriptions", { internal: true }),
+  ),
+]);
+
+async function refresh() {
+  await Promise.all([refreshPaymentMethods(), refreshCustomer(), refreshSubscriptions()]);
+}
+
+const midasProduct = ref(products.find((x) => x.metadata.type === "midas"));
+const midasSubscription = computed(() =>
+  subscriptions.value.find((x) => midasProduct.value.prices.find((y) => y.id === x.price_id)),
+);
+const midasSubscriptionPrice = computed(() =>
+  midasSubscription.value
+    ? midasProduct.value.prices.find((x) => x.id === midasSubscription.value.price_id)
+    : null,
+);
+
+const purchaseModal = ref();
+const country = useUserCountry();
+const price = computed(() =>
+  midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
+);
+
+// Initialize subscription with fake data if redirected from checkout
+const route = useRoute();
+const router = useRouter();
+if (route.query.priceId && route.query.plan && route.query.redirect_status) {
+  let status;
+  if (route.query.redirect_status === "succeeded") {
+    status = "active";
+  } else if (route.query.redirect_status === "processing") {
+    status = "payment-processing";
+  } else {
+    status = "payment-failed";
+  }
+
+  subscriptions.value.push({
+    id: "temp",
+    price_id: route.query.priceId,
+    interval: route.query.plan,
+    created: Date.now(),
+    expires: route.query.plan === "yearly" ? Date.now() + 31536000000 : Date.now() + 2629746000,
+    status,
+  });
+
+  await router.replace({ query: {} });
+}
+
+const primaryPaymentMethodId = computed(() => {
+  if (
+    customer.value &&
+    customer.value.invoice_settings &&
+    customer.value.invoice_settings.default_payment_method
+  ) {
+    return customer.value.invoice_settings.default_payment_method;
+  } else if (paymentMethods.value && paymentMethods.value[0] && paymentMethods.value[0].id) {
+    return paymentMethods.value[0].id;
+  } else {
+    return null;
+  }
+});
+
+const addPaymentMethodModal = ref();
+const loadingPaymentMethodModal = ref(0);
+async function addPaymentMethod() {
+  try {
+    loadingPaymentMethodModal.value = 0;
+    addPaymentMethodModal.value.show();
+
+    const result = await useBaseFetch("billing/payment_method", {
+      internal: true,
+      method: "POST",
+    });
+
+    loadStripe();
+    const {
+      elements: elementsVal,
+      addressElement,
+      paymentElement,
+    } = createStripeElements(stripe, paymentMethods.value, {
+      clientSecret: result.client_secret,
+    });
+
+    elements = elementsVal;
+    paymentElement.on("ready", () => {
+      loadingPaymentMethodModal.value += 1;
+    });
+    addressElement.on("ready", () => {
+      loadingPaymentMethodModal.value += 1;
+    });
+  } catch (err) {
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+}
+
+const loadingAddMethod = ref(false);
+async function submit() {
+  startLoading();
+  loadingAddMethod.value = true;
+
+  loadStripe();
+  const { error } = await stripe.confirmSetup({
+    elements,
+    confirmParams: {
+      return_url: `${config.public.siteUrl}/settings/billing`,
+    },
+  });
+
+  if (error && error.type !== "validation_error") {
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: error.message,
+      type: "error",
+    });
+  } else if (!error) {
+    await refresh();
+    addPaymentMethodModal.value.close();
+  }
+  loadingAddMethod.value = false;
+  stopLoading();
+}
+
+const removePaymentMethodIndex = ref();
+
+async function editPaymentMethod(index, primary) {
+  startLoading();
+  try {
+    await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
+      internal: true,
+      method: "PATCH",
+      data: {
+        primary,
+      },
+    });
+    await refresh();
+  } catch (err) {
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+  stopLoading();
+}
+
+async function removePaymentMethod(index) {
+  startLoading();
+  try {
+    await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
+      internal: true,
+      method: "DELETE",
+    });
+    await refresh();
+  } catch (err) {
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+  stopLoading();
+}
+
+const cancelSubscriptionId = ref();
+async function cancelSubscription(id) {
+  startLoading();
+  try {
+    await useBaseFetch(`billing/subscription/${id}`, {
+      internal: true,
+      method: "DELETE",
+    });
+    await refresh();
+  } catch (err) {
+    data.$notify({
+      group: "main",
+      title: "An error occurred",
+      text: err.data ? err.data.description : err,
+      type: "error",
+    });
+  }
+  stopLoading();
+}
+</script>

apps/frontend/src/pages/user/[id].vue

@@ -121,7 +121,7 @@
         </div>
       </div>
       <div class="normal-page__content">
-        <Promotion :external="false" query-param="" />
+        <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
         <nav class="navigation-card">
           <NavRow
             :links="[

apps/frontend/src/utils/common-messages.ts

@@ -174,4 +174,8 @@ export const commonSettingsMessages = defineMessages({
     id: "settings.applications.title",
     defaultMessage: "Your applications",
   },
+  billing: {
+    id: "settings.billing.title",
+    defaultMessage: "Billing and subscriptions",
+  },
 });

apps/frontend/tailwind.config.js

@@ -21,6 +21,10 @@ module.exports = {
         dark: "var(--color-text-dark)",
         inverted: "var(--color-text-inverted)",
         heading: "var(--color-heading)",
+        red: "var(--color-red)",
+        orange: "var(--color-orange)",
+        purple: "var(--color-purple)",
+        contrast: "var(--color-contrast)",
         bg: {
           DEFAULT: "var(--color-bg)",
           red: "var(--color-red-bg)",

packages/assets/branding/modrinth-plus.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1187.17 207.25">
+  <g>
+    <path d="M146.06,109.85l-14.38,17.63-24.09,7.63-10.81-12.03-61.89,37.14c-2.94-3.78-6.36-9.13-8.54-14.27l61.69-37.02-5.63-14.91,17.62-18.1,22.27-4.8,6.45,7.94-10.27,10.4-8.95,2.82-6.4,6.57,3.14,8.72,6.36,6.75,8.96-2.39,6.39-7,13.93-4.42,4.15,9.34Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
+    <path d="M208.59,86.56l-48.91,13.2c-.75-4.66-1.64-8.88-4.34-16.06l49-13.22c2.07,5.54,3.47,10.86,4.25,16.08Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
+    <path d="M33.65,110.46c3.47,40.97,37.87,73.19,79.74,73.19,31.63,0,59.01-18.4,71.99-45.06l15.93,5.52c-15.33,33.22-48.95,56.3-87.92,56.3-51.12,0-93.04-39.72-96.55-89.95h16.81ZM17.1,93.78C22.04,44.98,63.3,6.84,113.4,6.84c53.42,0,96.79,43.37,96.79,96.79,0,8.57-1.11,16.88-3.21,24.79l-15.89-5.5c1.56-6.31,2.35-12.79,2.34-19.29,0-44.17-35.86-80.03-80.03-80.03-40.83,0-74.57,30.65-79.43,70.18h-16.87Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
+    <path d="M113.14,57.04c-25.73.02-46.61,20.92-46.61,46.66s20.91,46.66,46.66,46.66c1.3,0,2.6-.05,3.88-.16l4.66,16.31c-2.83.38-5.68.57-8.54.57-34.98,0-63.38-28.4-63.38-63.38s28.4-63.38,63.38-63.38c.87,0,1.73.02,2.59.05l-2.64,16.67ZM132.22,43.23c25.69,8.09,44.35,32.12,44.35,60.47,0,26.25-15.99,48.78-38.74,58.4l-4.64-16.24c15.76-7.49,26.67-23.56,26.67-42.16,0-19.99-12.6-37.06-30.28-43.7l2.66-16.77Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
+  </g>
+  <path d="M1090.35,115.11v-17.35h79.97v17.35h-79.97ZM1121.05,145.47v-78.06h18.56v78.06h-18.56Z" style="fill: var(--color-purple);"/>
+  <path style="fill: currentColor;" d="M362.01,74.2c11.67,0,21.07,3.31,27.85,10.1,6.79,6.97,10.27,17.06,10.27,30.64v53.27h-21.76v-50.49c0-8.18-1.74-14.27-5.4-18.45-3.65-4.01-8.7-6.1-15.49-6.1-7.31,0-13.23,2.44-17.59,7.14-4.35,4.87-6.61,11.84-6.61,20.72v47.18h-21.76v-50.49c0-8.18-1.74-14.27-5.4-18.45-3.65-4.01-8.71-6.1-15.49-6.1-7.49,0-13.23,2.44-17.59,7.14-4.35,4.7-6.61,11.66-6.61,20.72v47.18h-21.76v-92.97h20.72v11.84c3.48-4.18,7.83-7.31,13.06-9.57,5.22-2.26,10.97-3.31,17.41-3.31,6.97,0,13.23,1.22,18.63,3.83,5.4,2.79,9.57,6.61,12.71,11.67,3.83-4.88,8.71-8.71,14.8-11.49,6.09-2.61,12.71-4.01,20.02-4.01ZM470.12,169.43c-9.4,0-17.93-2.09-25.42-6.09-7.37-3.89-13.47-9.81-17.59-17.06-4.35-7.14-6.44-15.32-6.44-24.55s2.09-17.41,6.44-24.54c4.17-7.16,10.26-13.01,17.59-16.89,7.49-4,16.02-6.09,25.42-6.09s18.11,2.09,25.59,6.1c7.49,4,13.41,9.75,17.76,16.89,4.18,7.14,6.27,15.32,6.27,24.55s-2.09,17.41-6.27,24.55c-4.35,7.31-10.27,13.06-17.76,17.06-7.49,4.01-16.02,6.1-25.59,6.1h0ZM470.12,150.81c8.01,0,14.63-2.61,19.85-8.01,5.22-5.4,7.83-12.36,7.83-21.07s-2.61-15.67-7.83-21.07c-5.22-5.4-11.84-8.01-19.85-8.01s-14.62,2.61-19.67,8.01c-5.22,5.4-7.83,12.36-7.83,21.07s2.61,15.67,7.83,21.07c5.05,5.4,11.67,8.01,19.67,8.01ZM631.17,39.03v129.18h-20.89v-12.01c-3.57,4.31-8.1,7.71-13.23,9.93-5.4,2.26-11.14,3.31-17.59,3.31-8.88,0-16.89-1.92-24.03-5.92-7.14-4-12.88-9.57-16.89-16.89-4-7.14-6.09-15.49-6.09-24.9s2.09-17.76,6.1-24.9c4-7.14,9.75-12.71,16.89-16.71,7.14-4,15.14-5.92,24.03-5.92,6.09,0,11.84,1.05,16.89,3.13,5.02,2.07,9.5,5.29,13.06,9.4v-47.71h21.76ZM582.07,150.81c5.22,0,9.93-1.22,14.1-3.66,4.18-2.26,7.48-5.74,9.92-10.1,2.44-4.35,3.65-9.57,3.65-15.32s-1.22-10.97-3.65-15.32c-2.44-4.35-5.75-7.83-9.92-10.27-4.18-2.26-8.88-3.48-14.1-3.48s-9.92,1.22-14.1,3.48c-4.18,2.44-7.49,5.92-9.93,10.27-2.44,4.35-3.65,9.57-3.65,15.32s1.22,10.97,3.65,15.32c2.44,4.35,5.75,7.83,9.93,10.1,4.18,2.44,8.88,3.66,14.1,3.66ZM679.91,88.82c6.27-9.75,17.23-14.63,33.08-14.63v20.72c-1.66-.33-3.35-.5-5.05-.52-8.53,0-15.15,2.44-19.85,7.32-4.7,5.05-7.14,12.19-7.14,21.41v45.09h-21.76v-92.97h20.72v13.58h0ZM730.92,75.24h21.76v92.97h-21.76v-92.97ZM741.89,59.92c-4.01,0-7.31-1.22-9.93-3.83-2.59-2.36-4.05-5.72-4-9.23,0-3.65,1.39-6.79,4-9.4,2.61-2.44,5.92-3.65,9.93-3.65s7.31,1.22,9.92,3.48c2.61,2.44,4.01,5.4,4.01,9.05s-1.22,6.97-3.83,9.57c-2.61,2.61-6.09,4.01-10.1,4.01ZM833.47,74.2c11.67,0,21.07,3.48,28.21,10.27,7.14,6.79,10.62,17.06,10.62,30.47v53.27h-21.76v-50.49c0-8.18-1.91-14.27-5.74-18.45-3.83-4.01-9.23-6.1-16.37-6.1-8.01,0-14.27,2.44-18.98,7.14-4.7,4.87-6.96,11.84-6.96,20.89v47.01h-21.76v-92.97h20.72v12.01c3.66-4.35,8.18-7.49,13.58-9.75,5.4-2.26,11.67-3.31,18.45-3.31ZM955.34,163.17c-2.72,2.18-5.86,3.78-9.23,4.7-3.8,1.06-7.73,1.58-11.67,1.57-10.27,0-18.1-2.61-23.68-8.01-5.57-5.4-8.36-13.06-8.36-23.33v-44.75h-15.32v-17.41h15.32v-21.24h21.76v21.24h24.89v17.41h-24.9v44.22c0,4.53,1.05,8.01,3.31,10.27,2.26,2.44,5.4,3.65,9.57,3.65,4.88,0,8.88-1.22,12.19-3.83l6.09,15.49ZM1025.5,74.2c11.67,0,21.07,3.48,28.21,10.27,7.14,6.79,10.62,17.06,10.62,30.47v53.27h-21.76v-50.49c0-8.18-1.91-14.27-5.75-18.45-3.83-4.01-9.23-6.1-16.36-6.1-8.01,0-14.28,2.44-18.98,7.14-4.7,4.87-6.96,11.84-6.96,20.89v47.01h-21.76V39.03h21.76v47c3.65-3.83,8.01-6.79,13.41-8.88,5.22-1.91,11.14-2.96,17.58-2.96Z"/>
+</svg>

packages/assets/icons/card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>

packages/assets/icons/receipt-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M14 8H8"/><path d="M16 12H8"/><path d="M13 16H8"/></svg>

packages/assets/icons/sparkles.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>

packages/assets/index.ts

@@ -3,6 +3,7 @@
 // Branding
 import _ModrinthIcon from './branding/logo.svg?component'
 import _FourOhFourNotFound from './branding/404.svg?component'
+import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
 
 // External Icons
 import _SSODiscordIcon from './external/sso/discord.svg?component'
@@ -35,6 +36,7 @@ import _BookIcon from './icons/book.svg?component'
 import _BookmarkIcon from './icons/bookmark.svg?component'
 import _BoxIcon from './icons/box.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
+import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
@@ -100,6 +102,7 @@ import _PlayIcon from './icons/play.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
 import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _RadioButtonChecked from './icons/radio-button-checked.svg?component'
+import _ReceiptTextIcon from './icons/receipt-text.svg?component'
 import _ReplyIcon from './icons/reply.svg?component'
 import _ReportIcon from './icons/report.svg?component'
 import _RightArrowIcon from './icons/right-arrow.svg?component'
@@ -115,6 +118,7 @@ import _ShieldIcon from './icons/shield.svg?component'
 import _SlashIcon from './icons/slash.svg?component'
 import _SortAscendingIcon from './icons/sort-asc.svg?component'
 import _SortDescendingIcon from './icons/sort-desc.svg?component'
+import _SparklesIcon from './icons/sparkles.svg?component'
 import _StarIcon from './icons/star.svg?component'
 import _StopCircleIcon from './icons/stop-circle.svg?component'
 import _SunIcon from './icons/sun.svg?component'
@@ -157,6 +161,7 @@ import './omorphia.scss'
 
 export const ModrinthIcon = _ModrinthIcon
 export const FourOhFourNotFound = _FourOhFourNotFound
+export const ModrinthPlusIcon = _ModrinthPlusIcon
 export const SSODiscordIcon = _SSODiscordIcon
 export const SSOGitHubIcon = _SSOGitHubIcon
 export const SSOGitLabIcon = _SSOGitLabIcon
@@ -251,6 +256,7 @@ export const PlayIcon = _PlayIcon
 export const PlusIcon = _PlusIcon
 export const RadioButtonIcon = _RadioButtonIcon
 export const RadioButtonChecked = _RadioButtonChecked
+export const ReceiptTextIcon = _ReceiptTextIcon
 export const ReplyIcon = _ReplyIcon
 export const ReportIcon = _ReportIcon
 export const RightArrowIcon = _RightArrowIcon
@@ -301,3 +307,5 @@ export const TextQuoteIcon = _TextQuoteIcon
 export const Heading1Icon = _Heading1Icon
 export const Heading2Icon = _Heading2Icon
 export const Heading3Icon = _Heading3Icon
+export const CardIcon = _CardIcon
+export const SparklesIcon = _SparklesIcon

packages/assets/styles/classes.scss

@@ -426,11 +426,6 @@ a,
     --_accent-color: var(--color-gray);
   }
 
-  &.btn-large {
-    font-weight: 700;
-    min-height: 2.5rem;
-  }
-
   box-sizing: border-box;
 
   color: var(--_text-color);
@@ -470,6 +465,17 @@ a,
     box-shadow: none;
   }
 
+  &.btn-large {
+    font-weight: 700;
+    padding: 12px 16px;
+    font-size: 16px;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
   &.btn-dropdown-animation {
     svg:last-child {
       transition: transform 0.125s ease-in-out;

packages/eslint-config-custom/nuxt.js

@@ -1,6 +1,6 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path')
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json')
 
 module.exports = {
   extends: [
@@ -15,20 +15,21 @@ module.exports = {
     'turbo',
   ],
   parserOptions: {
-    sourceType: "module",
+    sourceType: 'module',
   },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  "ignorePatterns": [".nuxt/**", ".output/**", "node_modules", "dist/**"],
+  ignorePatterns: ['.nuxt/**', '.output/**', 'node_modules', 'dist/**'],
   rules: {
     'no-console': 'off',
     'vue/no-v-html': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/no-multiple-template-root': 'off',
     'import/extensions': ['error', 'always', { ignorePackages: true }],
   },
-};
+}

packages/eslint-config-custom/vue.js

@@ -28,6 +28,7 @@ module.exports = {
   rules: {
     'import/no-default-export': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/no-multiple-template-root': 'off',
     camelcase: 'off',
     'no-console': 'off',
     'no-bitwise': 'off',

packages/ui/package.json

@@ -6,24 +6,26 @@
   "types": "./index.ts",
   "scripts": {
     "lint": "eslint . && prettier --check .",
-    "fix": "eslint . --fix && prettier --write ."
+    "fix": "eslint . --fix && prettier --write .",
+    "intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
+    "@formatjs/cli": "^6.2.12",
     "@vintl/unplugin": "^1.5.1",
     "@vintl/vintl": "^4.4.1",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "vue": "^3.4.31"
   },
   "dependencies": {
-    "@modrinth/assets": "workspace:*",
-    "@modrinth/utils": "workspace:*",
     "@codemirror/commands": "^6.3.2",
     "@codemirror/lang-markdown": "^6.2.3",
     "@codemirror/language": "^6.9.3",
     "@codemirror/state": "^6.3.2",
     "@codemirror/view": "^6.22.1",
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/utils": "workspace:*",
     "@types/markdown-it": "^14.1.1",
     "apexcharts": "^3.44.0",
     "dayjs": "^1.11.10",
@@ -31,6 +33,7 @@
     "highlight.js": "^11.9.0",
     "markdown-it": "^13.0.2",
     "qrcode.vue": "^3.4.1",
+    "vue-multiselect": "3.0.0",
     "vue-select": "4.0.0-beta.6",
     "vue3-apexcharts": "^1.4.4",
     "xss": "^1.0.14"

packages/ui/src/components/base/ButtonStyled.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+    size?: 'standard' | 'large'
+    circular?: boolean
+    type?: 'standard' | 'outlined' | 'transparent'
+    colorFill?: 'auto' | 'background' | 'text' | 'none'
+    hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
+  }>(),
+  {
+    color: 'standard',
+    size: 'standard',
+    circular: false,
+    type: 'standard',
+    colorFill: 'auto',
+    hoverColorFill: 'auto',
+  },
+)
+
+const colorVar = computed(() => {
+  switch (props.color) {
+    case 'brand':
+      return 'var(--color-brand)'
+    case 'red':
+      return 'var(--color-red)'
+    case 'orange':
+      return 'var(--color-orange)'
+    case 'green':
+      return 'var(--color-green)'
+    case 'blue':
+      return 'var(--color-blue)'
+    case 'purple':
+      return 'var(--color-purple)'
+    case 'standard':
+    default:
+      return null
+  }
+})
+
+const height = computed(() => {
+  if (props.size === 'large') {
+    return '3rem'
+  }
+  return '2.25rem'
+})
+
+const width = computed(() => {
+  if (props.size === 'large') {
+    return props.circular ? '3rem' : 'auto'
+  }
+  return props.circular ? '2.25rem' : 'auto'
+})
+
+const paddingX = computed(() => {
+  let padding = props.circular ? '0.5rem' : '0.75rem'
+  if (props.size === 'large') {
+    padding = props.circular ? '0.75rem' : '1rem'
+  }
+  return `calc(${padding} - 0.125rem)`
+})
+
+const paddingY = computed(() => {
+  if (props.size === 'large') {
+    return '0.75rem'
+  }
+  return '0.5rem'
+})
+
+const gap = computed(() => {
+  if (props.size === 'large') {
+    return '0.5rem'
+  }
+  return '0.375rem'
+})
+
+const fontWeight = computed(() => {
+  if (props.size === 'large') {
+    return '800'
+  }
+  return '600'
+})
+
+const radius = computed(() => {
+  if (props.circular) {
+    return '99999px'
+  }
+
+  if (props.size === 'large') {
+    return '1rem'
+  }
+  return '0.75rem'
+})
+
+const iconSize = computed(() => {
+  if (props.size === 'large') {
+    return '1.5rem'
+  }
+  return '1.25rem'
+})
+
+function setColorFill(
+  colors: { bg: string; text: string },
+  fill: 'background' | 'text' | 'none',
+): { bg: string; text: string } {
+  if (colorVar.value) {
+    if (fill === 'background') {
+      colors.bg = colorVar.value
+      colors.text = 'var(--color-accent-contrast)'
+    } else if (fill === 'text') {
+      colors.text = colorVar.value
+    }
+  }
+  return colors
+}
+
+const colorVariables = computed(() => {
+  let colors = {
+    bg: 'var(--color-button-bg)',
+    text: 'var(--color-base)',
+  }
+  let hoverColors = JSON.parse(JSON.stringify(colors))
+
+  if (props.type === 'outlined') {
+    hoverColors.bg = 'transparent'
+  }
+
+  if (props.type === 'outlined' || props.type === 'transparent') {
+    colors.bg = 'transparent'
+    colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
+    hoverColors = setColorFill(
+      hoverColors,
+      props.hoverColorFill === 'auto' ? 'text' : props.hoverColorFill,
+    )
+  } else {
+    colors = setColorFill(colors, props.colorFill === 'auto' ? 'background' : props.colorFill)
+    hoverColors = setColorFill(
+      hoverColors,
+      props.hoverColorFill === 'auto' ? 'background' : props.hoverColorFill,
+    )
+  }
+
+  return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text};`
+})
+</script>
+
+<template>
+  <div
+    class="btn-wrapper"
+    :class="{ outline: type === 'outlined' }"
+    :style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};`"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.btn-wrapper {
+  display: contents;
+}
+
+/* Searches up to 4 children deep for valid button */
+.btn-wrapper :slotted(:is(button, a):first-child),
+.btn-wrapper :slotted(*) > :is(button, a):first-child,
+.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child,
+.btn-wrapper :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
+  @apply flex flex-row items-center justify-center border-solid border-2 border-transparent active:scale-95 hover:brightness-125 focus-visible:brightness-125 bg-[--_bg] text-[--_text] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
+  transition:
+    scale 0.125s ease-in-out,
+    background-color 0.25s ease-in-out;
+}
+
+.btn-wrapper.outline :slotted(:is(button, a):first-child),
+.btn-wrapper.outline :slotted(*) > :is(button, a):first-child,
+.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a):first-child,
+.btn-wrapper.outline :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
+  @apply border-current;
+}
+
+/*noinspection CssUnresolvedCustomProperty*/
+.btn-wrapper :slotted(:is(button, a):first-child) > svg:first-child,
+.btn-wrapper :slotted(*) > :is(button, a):first-child > svg:first-child,
+.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child > svg:first-child,
+.btn-wrapper
+  :slotted(*)
+  > *:first-child
+  > *:first-child
+  > :is(button, a):first-child
+  > svg:first-child {
+  min-width: var(--_icon-size, 1rem);
+  min-height: var(--_icon-size, 1rem);
+}
+
+/* guys, I know this is nuts, I know */
+</style>

packages/ui/src/components/billing/PurchaseModal.vue

@@ -0,0 +1,586 @@
+<template>
+  <NewModal ref="purchaseModal">
+    <template #title>
+      <span class="text-contrast text-xl font-extrabold">
+        <template v-if="product.metadata.type === 'midas'">Subscribe to Modrinth Plus!</template>
+        <template v-else>Purchase product</template>
+      </span>
+    </template>
+    <div class="flex items-center gap-1 pb-4">
+      <span
+        :class="{
+          'text-secondary': purchaseModalStep !== 0,
+          'font-bold': purchaseModalStep === 0,
+        }"
+      >
+        Select plan
+      </span>
+      <ChevronRightIcon class="h-5 w-5 text-secondary" />
+      <span
+        :class="{
+          'text-secondary': purchaseModalStep !== 1,
+          'font-bold': purchaseModalStep === 1,
+        }"
+      >
+        Payment
+      </span>
+      <ChevronRightIcon class="h-5 w-5 text-secondary" />
+      <span
+        :class="{
+          'text-secondary': purchaseModalStep !== 2,
+          'font-bold': purchaseModalStep === 2,
+        }"
+      >
+        Review
+      </span>
+    </div>
+    <div v-if="purchaseModalStep === 0" class="md:w-[600px]">
+      <div>
+        <p class="my-2 text-lg font-bold">Choose billing interval</p>
+        <div class="flex flex-col gap-4">
+          <div
+            v-for="([interval, rawPrice], index) in Object.entries(price.prices.intervals)"
+            :key="index"
+            class="flex cursor-pointer items-center gap-2"
+            @click="selectedPlan = interval"
+          >
+            <RadioButtonChecked v-if="selectedPlan === interval" class="h-8 w-8 text-brand" />
+            <RadioButtonIcon v-else class="h-8 w-8 text-secondary" />
+            <span
+              class="text-lg capitalize"
+              :class="{ 'text-secondary': selectedPlan !== interval }"
+            >
+              {{ interval }}
+            </span>
+            <span
+              v-if="interval === 'yearly'"
+              class="rounded-full bg-brand px-2 py-1 font-bold text-brand-inverted"
+            >
+              SAVE {{ calculateSavings(price.prices.intervals.monthly, rawPrice) }}%
+            </span>
+            <span class="ml-auto text-lg" :class="{ 'text-secondary': selectedPlan !== interval }">
+              {{ formatPrice(locale, rawPrice, price.currency_code) }}
+            </span>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
+          <span class="text-xl text-secondary">Total</span>
+          <div class="flex items-baseline gap-2">
+            <span class="text-2xl font-extrabold text-primary">
+              {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
+            </span>
+            <span class="text-lg text-secondary">/ {{ selectedPlan }}</span>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 pt-4">
+          <InfoIcon />
+          <span class="text-sm text-secondary">
+            Final price and currency will be based on your selected payment method.
+          </span>
+        </div>
+      </div>
+    </div>
+    <template v-if="purchaseModalStep === 1">
+      <div
+        v-show="loadingPaymentMethodModal !== 2"
+        class="flex min-h-[16rem] items-center justify-center md:w-[600px]"
+      >
+        <AnimatedLogo class="w-[80px]" />
+      </div>
+      <div v-show="loadingPaymentMethodModal === 2" class="min-h-[16rem] p-1 md:w-[600px]">
+        <div id="address-element"></div>
+        <div id="payment-element" class="mt-4"></div>
+      </div>
+    </template>
+    <div v-if="purchaseModalStep === 2" class="md:w-[650px]">
+      <div>
+        <div class="r-4 rounded-xl bg-bg p-4">
+          <p class="my-2 text-lg font-bold text-primary">Purchase details</p>
+          <div class="mb-2 flex justify-between">
+            <span class="text-secondary">Modrinth+ {{ selectedPlan }}</span>
+            <span class="text-secondary">
+              {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
+              {{ selectedPlan }}
+            </span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-secondary">Tax</span>
+            <span class="text-secondary">{{ formatPrice(locale, tax, price.currency_code) }}</span>
+          </div>
+          <div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
+            <span class="text-lg font-bold">Today's total</span>
+            <span class="text-lg font-extrabold text-primary">
+              {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
+            </span>
+          </div>
+        </div>
+        <p class="my-2 text-lg font-bold">Pay for it with</p>
+        <multiselect
+          v-model="selectedPaymentMethod"
+          placeholder="Payment method"
+          label="id"
+          track-by="id"
+          :options="selectablePaymentMethods"
+          :option-height="104"
+          :show-labels="false"
+          :searchable="false"
+          :close-on-select="true"
+          :allow-empty="false"
+          open-direction="top"
+          class="max-w-[20rem]"
+          @select="selectPaymentMethod"
+        >
+          <!-- TODO: Move this to component to remove duplicated code -->
+          <template #singleLabel="props">
+            <div class="flex items-center gap-2">
+              <CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
+              <CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
+              <PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
+
+              <span v-if="props.option.type === 'card'">
+                {{
+                  formatMessage(messages.paymentMethodCardDisplay, {
+                    card_brand:
+                      formatMessage(paymentMethodTypes[props.option.card.brand]) ??
+                      formatMessage(paymentMethodTypes.unknown),
+                    last_four: props.option.card.last4,
+                  })
+                }}
+              </span>
+              <template v-else>
+                {{
+                  formatMessage(paymentMethodTypes[props.option.type]) ??
+                  formatMessage(paymentMethodTypes.unknown)
+                }}
+              </template>
+
+              <span v-if="props.option.type === 'cashapp' && props.option.cashapp.cashtag">
+                ({{ props.option.cashapp.cashtag }})
+              </span>
+              <span v-else-if="props.option.type === 'paypal' && props.option.paypal.payer_email">
+                ({{ props.option.paypal.payer_email }})
+              </span>
+            </div>
+          </template>
+          <template #option="props">
+            <div class="flex items-center gap-2">
+              <template v-if="props.option.id === 'new'">
+                <PlusIcon class="h-8 w-8" />
+                <span class="text-secondary">Add payment method</span>
+              </template>
+              <template v-else>
+                <CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
+                <CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
+                <PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
+
+                <span v-if="props.option.type === 'card'">
+                  {{
+                    formatMessage(messages.paymentMethodCardDisplay, {
+                      card_brand:
+                        formatMessage(paymentMethodTypes[props.option.card.brand]) ??
+                        formatMessage(paymentMethodTypes.unknown),
+                      last_four: props.option.card.last4,
+                    })
+                  }}
+                </span>
+                <template v-else>
+                  {{
+                    formatMessage(paymentMethodTypes[props.option.type]) ??
+                    formatMessage(paymentMethodTypes.unknown)
+                  }}
+                </template>
+
+                <span v-if="props.option.type === 'cashapp'">
+                  ({{ props.option.cashapp.cashtag }})
+                </span>
+                <span v-else-if="props.option.type === 'paypal'">
+                  ({{ props.option.paypal.payer_email }})
+                </span>
+              </template>
+            </div>
+          </template>
+        </multiselect>
+      </div>
+      <p class="m-0 mt-9 text-sm text-secondary">
+        <strong>By clicking "Subscribe", you are purchasing a recurring subscription.</strong>
+        You'll be charged
+        {{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
+        {{ selectedPlan }} plus applicable taxes starting today, until you cancel. Cancel anytime
+        from your settings page.
+      </p>
+    </div>
+    <div class="input-group push-right pt-4">
+      <template v-if="purchaseModalStep === 0">
+        <button class="btn" @click="$refs.purchaseModal.hide()">
+          <XIcon />
+          Cancel
+        </button>
+        <button class="btn btn-primary" :disabled="paymentLoading" @click="beginPurchaseFlow(true)">
+          <RightArrowIcon />
+          Select
+        </button>
+      </template>
+      <template v-else-if="purchaseModalStep === 1">
+        <button
+          class="btn"
+          @click="
+            () => {
+              purchaseModalStep = 0
+              loadingPaymentMethodModal = 0
+              paymentLoading = false
+            }
+          "
+        >
+          Back
+        </button>
+        <button class="btn btn-primary" :disabled="paymentLoading" @click="validatePayment">
+          <RightArrowIcon />
+          Continue
+        </button>
+      </template>
+      <template v-else-if="purchaseModalStep === 2">
+        <button class="btn" @click="$refs.purchaseModal.hide()">
+          <XIcon />
+          Cancel
+        </button>
+        <button class="btn btn-primary" :disabled="paymentLoading" @click="submitPayment">
+          <CheckCircleIcon /> Subscribe
+        </button>
+      </template>
+    </div>
+  </NewModal>
+</template>
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+import NewModal from '../modal/NewModal.vue'
+import {
+  CardIcon,
+  CheckCircleIcon,
+  ChevronRightIcon,
+  CurrencyIcon,
+  InfoIcon,
+  PayPalIcon,
+  PlusIcon,
+  RadioButtonChecked,
+  RadioButtonIcon,
+  RightArrowIcon,
+  XIcon,
+} from '@modrinth/assets'
+import AnimatedLogo from '../brand/AnimatedLogo.vue'
+import { getCurrency, calculateSavings, formatPrice, createStripeElements } from '@modrinth/utils'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import { Multiselect } from 'vue-multiselect'
+
+const { locale, formatMessage } = useVIntl()
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true,
+  },
+  customer: {
+    type: Object,
+    required: true,
+  },
+  paymentMethods: {
+    type: Array,
+    required: true,
+  },
+  country: {
+    type: String,
+    required: true,
+  },
+  returnUrl: {
+    type: String,
+    required: true,
+  },
+  publishableKey: {
+    type: String,
+    required: true,
+  },
+  fetchPaymentData: {
+    type: Function,
+    default: async () => {},
+  },
+  sendBillingRequest: {
+    type: Function,
+    required: true,
+  },
+  onError: {
+    type: Function,
+    required: true,
+  },
+})
+
+const messages = defineMessages({
+  paymentMethodCardDisplay: {
+    id: 'omorphia.component.purchase_modal.payment_method_card_display',
+    defaultMessage: '{card_brand} ending in {last_four}',
+  },
+})
+
+const paymentMethodTypes = defineMessages({
+  visa: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.visa',
+    defaultMessage: 'Visa',
+  },
+  amex: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amex',
+    defaultMessage: 'American Express',
+  },
+  diners: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.diners',
+    defaultMessage: 'Diners Club',
+  },
+  discover: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.discover',
+    defaultMessage: 'Discover',
+  },
+  eftpos: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
+    defaultMessage: 'EFTPOS',
+  },
+  jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
+  mastercard: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
+    defaultMessage: 'MasterCard',
+  },
+  unionpay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
+    defaultMessage: 'UnionPay',
+  },
+  paypal: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
+    defaultMessage: 'PayPal',
+  },
+  cashapp: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
+    defaultMessage: 'Cash App',
+  },
+  amazon_pay: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
+    defaultMessage: 'Amazon Pay',
+  },
+  unknown: {
+    id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
+    defaultMessage: 'Unknown payment method',
+  },
+})
+
+let stripe = null
+let elements = null
+
+const purchaseModal = ref()
+
+const primaryPaymentMethodId = computed(() => {
+  if (
+    props.customer &&
+    props.customer.invoice_settings &&
+    props.customer.invoice_settings.default_payment_method
+  ) {
+    return props.customer.invoice_settings.default_payment_method
+  } else if (props.paymentMethods && props.paymentMethods[0] && props.paymentMethods[0].id) {
+    return props.paymentMethods[0].id
+  } else {
+    return null
+  }
+})
+
+defineExpose({
+  show: () => {
+    // eslint-disable-next-line no-undef
+    stripe = Stripe(props.publishableKey)
+
+    selectedPlan.value = 'yearly'
+
+    purchaseModalStep.value = 0
+    loadingPaymentMethodModal.value = 0
+    paymentLoading.value = false
+
+    purchaseModal.value.show()
+  },
+})
+
+const purchaseModalStep = ref(0)
+const loadingPaymentMethodModal = ref(0)
+
+const selectedPlan = ref('yearly')
+const currency = computed(() => getCurrency(props.country))
+
+const price = ref(props.product.prices.find((x) => x.currency_code === currency.value))
+
+const clientSecret = ref()
+const paymentIntentId = ref()
+const confirmationToken = ref()
+const tax = ref()
+const total = ref()
+
+const selectedPaymentMethod = ref()
+const inputtedPaymentMethod = ref()
+const selectablePaymentMethods = computed(() => {
+  const values = [
+    ...(props.paymentMethods ?? []),
+    {
+      id: 'new',
+    },
+  ]
+
+  if (inputtedPaymentMethod.value) {
+    values.unshift(inputtedPaymentMethod.value)
+  }
+
+  return values
+})
+
+const paymentLoading = ref(false)
+
+async function beginPurchaseFlow(skip = false) {
+  if (!props.customer) {
+    paymentLoading.value = true
+    await props.fetchPaymentData()
+    paymentLoading.value = false
+  }
+
+  if (primaryPaymentMethodId.value && skip) {
+    paymentLoading.value = true
+    await refreshPayment(null, primaryPaymentMethodId.value)
+    paymentLoading.value = false
+    purchaseModalStep.value = 2
+  } else {
+    try {
+      loadingPaymentMethodModal.value = 0
+      purchaseModalStep.value = 1
+
+      await nextTick()
+
+      const {
+        elements: elementsVal,
+        addressElement,
+        paymentElement,
+      } = createStripeElements(stripe, props.paymentMethods, {
+        mode: 'payment',
+        amount: price.value.prices.intervals[selectedPlan.value],
+        currency: price.value.currency_code.toLowerCase(),
+        paymentMethodCreation: 'manual',
+        setupFutureUsage: 'off_session',
+      })
+
+      elements = elementsVal
+      paymentElement.on('ready', () => {
+        loadingPaymentMethodModal.value += 1
+      })
+      addressElement.on('ready', () => {
+        loadingPaymentMethodModal.value += 1
+      })
+    } catch (err) {
+      props.onError(err)
+    }
+  }
+}
+
+async function createConfirmationToken() {
+  const { error, confirmationToken: confirmation } = await stripe.createConfirmationToken({
+    elements,
+  })
+
+  if (error) {
+    props.onError(error)
+
+    return
+  }
+
+  return confirmation.id
+}
+
+async function validatePayment() {
+  paymentLoading.value = true
+  const { error: submitError } = await elements.submit()
+
+  if (submitError) {
+    paymentLoading.value = false
+    props.onError(submitError)
+    return
+  }
+
+  await refreshPayment(await createConfirmationToken())
+
+  elements.update({ currency: price.value.currency_code.toLowerCase(), amount: total.value })
+
+  loadingPaymentMethodModal.value = 0
+  confirmationToken.value = await createConfirmationToken()
+  purchaseModalStep.value = 2
+  paymentLoading.value = false
+}
+
+async function selectPaymentMethod(paymentMethod) {
+  if (paymentMethod.id === 'new') {
+    await beginPurchaseFlow(false)
+  } else if (inputtedPaymentMethod.value && inputtedPaymentMethod.value.id === paymentMethod.id) {
+    paymentLoading.value = true
+    await refreshPayment(confirmationToken.value)
+    paymentLoading.value = false
+  } else {
+    paymentLoading.value = true
+    await refreshPayment(null, paymentMethod.id)
+    paymentLoading.value = false
+  }
+}
+
+async function refreshPayment(confirmationId, paymentMethodId) {
+  try {
+    const base = confirmationId
+      ? {
+          type: 'confirmation_token',
+          token: confirmationId,
+        }
+      : {
+          type: 'payment_method',
+          id: paymentMethodId,
+        }
+
+    const result = await props.sendBillingRequest({
+      product_id: props.product.id,
+      interval: selectedPlan.value,
+      existing_payment_intent: paymentIntentId.value,
+      ...base,
+    })
+
+    if (!paymentIntentId.value) {
+      paymentIntentId.value = result.payment_intent_id
+      clientSecret.value = result.client_secret
+    }
+
+    price.value = props.product.prices.find((x) => x.id === result.price_id)
+    currency.value = price.value.currency_code
+    tax.value = result.tax
+    total.value = result.total
+
+    if (confirmationId) {
+      confirmationToken.value = confirmationId
+      inputtedPaymentMethod.value = result.payment_method
+    }
+
+    selectedPaymentMethod.value = result.payment_method
+  } catch (err) {
+    props.onError(err)
+  }
+}
+
+async function submitPayment() {
+  paymentLoading.value = true
+  const { error } = await stripe.confirmPayment({
+    clientSecret: clientSecret.value,
+    confirmParams: {
+      confirmation_token: confirmationToken.value,
+      return_url: `${props.returnUrl}?priceId=${price.value.id}&plan=${selectedPlan.value}`,
+    },
+  })
+
+  if (error) {
+    props.onError(error)
+  }
+  paymentLoading.value = false
+}
+</script>
+<style scoped lang="scss"></style>

packages/ui/src/components/index.ts

@@ -2,6 +2,7 @@
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'
 export { default as Button } from './base/Button.vue'
+export { default as ButtonStyled } from './base/ButtonStyled.vue'
 export { default as Card } from './base/Card.vue'
 export { default as Checkbox } from './base/Checkbox.vue'
 export { default as Chips } from './base/Chips.vue'
@@ -32,9 +33,9 @@ export { default as Chart } from './chart/Chart.vue'
 export { default as CompactChart } from './chart/CompactChart.vue'
 
 // Modals
+export { default as NewModal } from './modal/NewModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
-export { default as ReportModal } from './modal/ReportModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
 
 // Navigation
@@ -47,3 +48,6 @@ export { default as NavStack } from './nav/NavStack.vue'
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchDropdown } from './search/SearchDropdown.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'
+
+// Billing
+export { default as PurchaseModal } from './billing/PurchaseModal.vue'

packages/ui/src/components/modal/NewModal.vue

@@ -0,0 +1,170 @@
+<template>
+  <div v-if="open">
+    <div
+      :class="{ shown: visible }"
+      class="tauri-overlay"
+      data-tauri-drag-region
+      @click="() => (closable ? hide() : {})"
+    />
+    <div
+      :class="{
+        shown: visible,
+        noblur: props.noblur,
+      }"
+      class="modal-overlay"
+      @click="() => (closable ? hide() : {})"
+    />
+    <div class="modal-container" :class="{ shown: visible }">
+      <div class="modal-body flex flex-col bg-bg-raised rounded-2xl p-6">
+        <div class="flex items-center pb-6 border-b-[1px] border-button-bg">
+          <div class="flex flex-grow items-center gap-3">
+            <slot name="title" />
+          </div>
+          <ButtonStyled v-if="closable" circular>
+            <button @click="hide">
+              <XIcon />
+            </button>
+          </ButtonStyled>
+        </div>
+        <div class="overflow-y-auto">
+          <slot> You just lost the game. </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else></div>
+</template>
+
+<script setup>
+import { XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+
+const props = defineProps({
+  noblur: {
+    type: Boolean,
+    default: false,
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const open = ref(false)
+const visible = ref(false)
+
+function show() {
+  open.value = true
+  setTimeout(() => {
+    visible.value = true
+  }, 50)
+}
+
+function hide() {
+  visible.value = false
+  setTimeout(() => {
+    open.value = false
+  }, 300)
+}
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+
+<style lang="scss" scoped>
+.tauri-overlay {
+  position: fixed;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  z-index: 20;
+
+  &.shown {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.modal-overlay {
+  visibility: hidden;
+  position: fixed;
+  inset: -5rem;
+  z-index: 19;
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  background: linear-gradient(to bottom, rgba(27, 48, 42, 0.52) 0%, rgba(13, 21, 26, 0.95) 100%);
+  transform: translateY(2rem) scale(0.8);
+  border-radius: 120px;
+  filter: blur(5px);
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
+  &.shown {
+    opacity: 1;
+    visibility: visible;
+    backdrop-filter: blur(5px);
+    transform: translateY(0) scale(1);
+    border-radius: 0px;
+  }
+
+  &.noblur {
+    backdrop-filter: none;
+    filter: none;
+  }
+}
+
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 21;
+  visibility: hidden;
+  pointer-events: none;
+
+  &.shown {
+    visibility: visible;
+    .modal-body {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+      scale: 1;
+    }
+  }
+
+  .modal-body {
+    position: fixed;
+    box-shadow: 4px 4px 26px 10px rgba(0, 0, 0, 0.08);
+    max-height: calc(100% - 2 * var(--gap-lg));
+    max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
+    overflow-y: auto;
+    width: fit-content;
+    pointer-events: auto;
+    scale: 0.97;
+
+    transform: translateY(1rem);
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+
+    @media screen and (max-width: 650px) {
+      width: calc(100% - 2 * var(--gap-lg));
+    }
+  }
+}
+</style>

packages/ui/src/components/modal/ReportModal.vue

@@ -1,127 +0,0 @@
-<template>
-  <Modal ref="modal" :header="`Report ${itemType}`" :noblur="noblur">
-    <div class="modal-report universal-labels">
-      <div class="markdown-body">
-        <p>
-          Modding should be safe for everyone, so we take abuse and malicious intent seriously at
-          Modrinth. We want to hear about harmful content on the site that violates our
-          <router-link to="/legal/terms">ToS</router-link> and
-          <router-link to="/legal/rules">Rules</router-link>. Rest assured, we'll keep your
-          identifying information private.
-        </p>
-        <p v-if="itemType === 'project' || itemType === 'version'">
-          Please <strong>do not</strong> use this to report bugs with the project itself. This form
-          is only for submitting a report to Modrinth staff. If the project has an Issues link or a
-          Discord invite, consider reporting it there.
-        </p>
-      </div>
-      <label for="report-type">
-        <span class="label__title">Reason</span>
-      </label>
-      <DropdownSelect
-        id="report-type"
-        v-model="reportType"
-        name="report-type"
-        :options="reportTypes"
-        :display-name="capitalizeString"
-        default-value="Choose report type"
-        class="multiselect"
-      />
-      <label for="report-body">
-        <span class="label__title">Additional information</span>
-        <span class="label__description markdown-body">
-          Please provide additional context about your report. Include links and images if possible.
-          <strong>Empty reports will be closed.</strong> This editor supports
-          <a href="https://docs.modrinth.com/markdown" target="_blank">Markdown formatting</a>.
-        </span>
-      </label>
-      <Chips v-model="bodyViewType" class="separator" :items="['source', 'preview']" />
-      <div class="text-input textarea-wrapper">
-        <textarea v-if="bodyViewType === 'source'" id="body" v-model="body" spellcheck="true" />
-        <div v-else class="preview" v-html="renderString(body)" />
-      </div>
-      <div class="input-group push-right">
-        <Button @click="cancel">
-          <XIcon />
-          Cancel
-        </Button>
-        <Button color="primary" @click="submitReport">
-          <CheckIcon />
-          Report
-        </Button>
-      </div>
-    </div>
-  </Modal>
-</template>
-<script setup>
-import { capitalizeString, renderString } from '@modrinth/utils'
-import { ref } from 'vue'
-import { CheckIcon, XIcon } from '@modrinth/assets'
-import Chips from '../base/Chips.vue'
-import DropdownSelect from '../base/DropdownSelect.vue'
-import Modal from './Modal.vue'
-
-defineProps({
-  itemType: {
-    type: String,
-    default: '',
-  },
-  itemId: {
-    type: String,
-    default: '',
-  },
-  reportTypes: {
-    type: Array,
-    default: () => [],
-  },
-  submitReport: {
-    type: Function,
-    default: () => {},
-  },
-  noblur: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const reportType = ref('')
-const body = ref('')
-const bodyViewType = ref('source')
-
-const modal = ref(null)
-
-function cancel() {
-  reportType.value = ''
-  body.value = ''
-  bodyViewType.value = 'source'
-
-  modal.value.hide()
-}
-
-function show() {
-  modal.value.show()
-}
-
-defineExpose({
-  show,
-})
-</script>
-
-<style scoped lang="scss">
-.modal-report {
-  padding: var(--gap-lg);
-
-  .textarea-wrapper {
-    height: 10rem;
-
-    :first-child {
-      max-height: 8rem;
-      transform: translateY(1rem);
-    }
-  }
-
-  .preview {
-    overflow-y: auto;
-  }
-}
-</style>

packages/ui/src/locales/en-US/index.json

@@ -76,5 +76,44 @@
   },
   "omorphia.component.environment-indicator.label.unsupported": {
     "defaultMessage": "Unsupported"
+  },
+  "omorphia.component.purchase_modal.payment_method_card_display": {
+    "defaultMessage": "{card_brand} ending in {last_four}"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.amazon_pay": {
+    "defaultMessage": "Amazon Pay"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.amex": {
+    "defaultMessage": "American Express"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.cashapp": {
+    "defaultMessage": "Cash App"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.diners": {
+    "defaultMessage": "Diners Club"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.discover": {
+    "defaultMessage": "Discover"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.eftpos": {
+    "defaultMessage": "EFTPOS"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.jcb": {
+    "defaultMessage": "JCB"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.mastercard": {
+    "defaultMessage": "MasterCard"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.paypal": {
+    "defaultMessage": "PayPal"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.unionpay": {
+    "defaultMessage": "UnionPay"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.unknown": {
+    "defaultMessage": "Unknown payment method"
+  },
+  "omorphia.component.purchase_modal.payment_method_type.visa": {
+    "defaultMessage": "Visa"
   }
 }

packages/utils/billing.ts

@@ -0,0 +1,129 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+export const getCurrency = (userCountry) => {
+  const countryCurrency = {
+    US: 'USD',
+    GB: 'GBP',
+    EU: 'EUR',
+    AT: 'EUR',
+    BE: 'EUR',
+    CY: 'EUR',
+    EE: 'EUR',
+    FI: 'EUR',
+    FR: 'EUR',
+    DE: 'EUR',
+    GR: 'EUR',
+    IE: 'EUR',
+    IT: 'EUR',
+    LV: 'EUR',
+    LT: 'EUR',
+    LU: 'EUR',
+    MT: 'EUR',
+    NL: 'EUR',
+    PT: 'EUR',
+    SK: 'EUR',
+    SI: 'EUR',
+    RU: 'RUB',
+    BR: 'BRL',
+    JP: 'JPY',
+    ID: 'IDR',
+    MY: 'MYR',
+    PH: 'PHP',
+    TH: 'THB',
+    VN: 'VND',
+    KR: 'KRW',
+    TR: 'TRY',
+    UA: 'UAH',
+    MX: 'MXN',
+    CA: 'CAD',
+    NZ: 'NZD',
+    NO: 'NOK',
+    PL: 'PLN',
+    CH: 'CHF',
+    LI: 'CHF',
+    IN: 'INR',
+    CL: 'CLP',
+    PE: 'PEN',
+    CO: 'COP',
+    ZA: 'ZAR',
+    HK: 'HKD',
+    AR: 'ARS',
+    KZ: 'KZT',
+    UY: 'UYU',
+    CN: 'CNY',
+    AU: 'AUD',
+    TW: 'TWD',
+    SA: 'SAR',
+    QA: 'QAR',
+  }
+
+  return countryCurrency[userCountry] ?? 'USD'
+}
+
+export const formatPrice = (locale, price, currency) => {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  })
+
+  const maxDigits = formatter.resolvedOptions().maximumFractionDigits
+
+  const convertedPrice = price / Math.pow(10, maxDigits)
+
+  return formatter.format(convertedPrice)
+}
+
+export const calculateSavings = (monthlyPlan, annualPlan) => {
+  const monthlyAnnualized = monthlyPlan * 12
+
+  return Math.floor(((monthlyAnnualized - annualPlan) / monthlyAnnualized) * 100)
+}
+
+export const createStripeElements = (stripe, paymentMethods, options) => {
+  const styles = getComputedStyle(document.body)
+
+  const elements = stripe.elements({
+    appearance: {
+      variables: {
+        colorPrimary: styles.getPropertyValue('--color-brand'),
+        colorBackground: styles.getPropertyValue('--color-bg'),
+        colorText: styles.getPropertyValue('--color-base'),
+        colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
+        colorDanger: styles.getPropertyValue('--color-red'),
+        fontFamily: styles.getPropertyValue('--font-standard'),
+        spacingUnit: '0.25rem',
+        borderRadius: '1rem',
+      },
+    },
+    loader: 'never',
+    ...options,
+  })
+
+  const paymentElement = elements.create('payment')
+  paymentElement.mount('#payment-element')
+
+  const addressElement = elements.create('address', {
+    mode: 'billing',
+    contacts: paymentMethods
+      ? [
+          ...new Set(
+            paymentMethods.map((x) => ({
+              address: x.billing_details.address,
+              email: x.billing_details.email,
+              name: x.billing_details.name,
+            })),
+          ),
+        ]
+      : undefined,
+  })
+  addressElement.mount('#address-element')
+
+  addressElement.on('change', (e) => {
+    if (e.value && e.value.address && e.value.address.country) {
+      elements.update({ currency: getCurrency(e.value.address.country).toLowerCase() })
+    }
+  })
+
+  return { elements, paymentElement, addressElement }
+}

packages/utils/index.ts

@@ -3,3 +3,4 @@ export * from './parse'
 export * from './projects'
 export * from './users'
 export * from './utils'
+export * from './billing'

pnpm-lock.yaml

@@ -78,8 +78,8 @@ importers:
         specifier: ^3.4.21
         version: 3.4.31(typescript@5.5.3)
       vue-multiselect:
-        specifier: 3.0.0-beta.3
+        specifier: 3.0.0
-        version: 3.0.0-beta.3
+        version: 3.0.0
       vue-router:
         specifier: 4.3.0
         version: 4.3.0(vue@3.4.31(typescript@5.5.3))
@@ -168,8 +168,8 @@ importers:
         specifier: ^7.5.4
         version: 7.6.2
       vue-multiselect:
-        specifier: 3.0.0-alpha.2
+        specifier: 3.0.0
-        version: 3.0.0-alpha.2
+        version: 3.0.0
       vue3-apexcharts:
         specifier: ^1.5.2
         version: 1.5.3(apexcharts@3.49.2)(vue@3.4.31(typescript@5.5.3))
@@ -177,6 +177,9 @@ importers:
         specifier: ^1.0.14
         version: 1.0.15
     devDependencies:
+      '@formatjs/cli':
+        specifier: ^6.2.12
+        version: 6.2.12(@vue/compiler-core@3.4.31)(vue@3.4.31(typescript@5.5.3))
       '@nuxt/devtools':
         specifier: ^1.3.3
         version: 1.3.9(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6)(terser@5.31.3))
@@ -320,6 +323,9 @@ importers:
       qrcode.vue:
         specifier: ^3.4.1
         version: 3.4.1(vue@3.4.31(typescript@5.5.3))
+      vue-multiselect:
+        specifier: 3.0.0
+        version: 3.0.0
       vue-select:
         specifier: 4.0.0-beta.6
         version: 4.0.0-beta.6(vue@3.4.31(typescript@5.5.3))
@@ -330,6 +336,9 @@ importers:
         specifier: ^1.0.14
         version: 1.0.15
     devDependencies:
+      '@formatjs/cli':
+        specifier: ^6.2.12
+        version: 6.2.12(@vue/compiler-core@3.4.31)(vue@3.4.31(typescript@5.5.3))
       '@vintl/unplugin':
         specifier: ^1.5.1
         version: 1.5.2(@vue/compiler-core@3.4.31)(rollup@3.29.4)(vite@4.5.3)(vue@3.4.31(typescript@5.5.3))(webpack@5.92.1)
@@ -1240,6 +1249,37 @@ packages:
       vue:
         optional: true
 
+  '@formatjs/cli@6.2.12':
+    resolution: {integrity: sha512-bt1NEgkeYN8N9zWcpsPu3fZ57vv+biA+NtIQBlyOZnCp1bcvh+vNTXvmwF4C5qxqDtCylpOIb3yi3Ktgp4v0JQ==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    peerDependencies:
+      '@glimmer/env': ^0.1.7
+      '@glimmer/reference': ^0.91.1 || ^0.92.0
+      '@glimmer/syntax': ^0.92.0
+      '@glimmer/validator': ^0.92.0
+      '@vue/compiler-core': ^3.4.0
+      content-tag: ^2.0.1
+      ember-template-recast: ^6.1.4
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      '@glimmer/env':
+        optional: true
+      '@glimmer/reference':
+        optional: true
+      '@glimmer/syntax':
+        optional: true
+      '@glimmer/validator':
+        optional: true
+      '@vue/compiler-core':
+        optional: true
+      content-tag:
+        optional: true
+      ember-template-recast:
+        optional: true
+      vue:
+        optional: true
+
   '@formatjs/ecma402-abstract@1.18.3':
     resolution: {integrity: sha512-J961RbhyjHWeCIv+iOceNxpoZ/qomJOs5lH+rUJCeKNa59gME4KC0LJVMeWODjHsnv/hTH8Hvd6sevzcAzjuaQ==}
 
@@ -5764,13 +5804,9 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-multiselect@3.0.0-alpha.2:
+  vue-multiselect@3.0.0:
-    resolution: {integrity: sha512-Xp9fGJECns45v+v8jXbCIsAkCybYkEg0lNwr7Z6HDUSMyx2TEIK2giipPE+qXiShEc1Ipn+ZtttH2iq9hwXP4Q==}
+    resolution: {integrity: sha512-uupKdINgz7j83lQToCL7KkgQQxvG43el++hsR39YT9pCe1DwzUGmKzPxjVP6rqskXed5P6DtUASYAlCliW740Q==}
-    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+    engines: {node: '>= 14.18.1', npm: '>= 6.14.15'}
-
-  vue-multiselect@3.0.0-beta.3:
-    resolution: {integrity: sha512-P7Fx+ovVF7WMERSZ0lw6N3p4H4bnQ3NcaY3ORjzFPv0r/6lpIqvFWmK9Xnwze9mgAvmNV1foI1VWrBmjnfBTLQ==}
-    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
 
   vue-resize@2.0.0-alpha.1:
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
@@ -6622,6 +6658,11 @@ snapshots:
     transitivePeerDependencies:
       - ts-jest
 
+  '@formatjs/cli@6.2.12(@vue/compiler-core@3.4.31)(vue@3.4.31(typescript@5.5.3))':
+    optionalDependencies:
+      '@vue/compiler-core': 3.4.31
+      vue: 3.4.31(typescript@5.5.3)
+
   '@formatjs/ecma402-abstract@1.18.3':
     dependencies:
       '@formatjs/intl-localematcher': 0.5.4
@@ -7644,7 +7685,6 @@ snapshots:
   '@types/node@20.14.11':
     dependencies:
       undici-types: 5.26.5
-    optional: true
 
   '@types/node@20.14.9':
     dependencies:
@@ -11069,7 +11109,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.14.9
+      '@types/node': 20.14.11
       long: 5.2.3
 
   protocols@2.0.1: {}
@@ -12150,9 +12190,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-multiselect@3.0.0-alpha.2: {}
+  vue-multiselect@3.0.0: {}
-
-  vue-multiselect@3.0.0-beta.3: {}
 
   vue-resize@2.0.0-alpha.1(vue@3.4.31(typescript@5.5.3)):
     dependencies: