Apple pay support, fix publish key (#2171)

* Apple pay support, fix publish key

* fix api url

apps/frontend/nuxt.config.ts

@@ -350,6 +350,11 @@ export default defineNuxtConfig({
         "unknown",
 
       turnstile: { siteKey: "0x4AAAAAAAW3guHM6Eunbgwu" },
+
+      stripePublishableKey:
+        process.env.RATE_LIMIT_IGNORE_KEY ||
+        globalThis.STRIPE_PUBLISHABLE_KEY ||
+        "pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b",
     },
   },
   typescript: {

apps/frontend/src/components/ui/Badge.vue

@@ -6,6 +6,7 @@
     <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
     <template v-else-if="type === 'moderator'"> <ModeratorIcon /> Moderator</template>
     <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
+    <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
 
     <!-- Project statuses -->
     <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
@@ -36,6 +37,7 @@
 
 <script setup>
 import ModrinthIcon from "~/assets/images/logo.svg?component";
+import PlusIcon from "~/assets/images/utils/plus.svg?component";
 import ModeratorIcon from "~/assets/images/sidebar/admin.svg?component";
 import CreatorIcon from "~/assets/images/utils/box.svg?component";
 import ListIcon from "~/assets/images/utils/list.svg?component";
@@ -114,6 +116,7 @@ defineProps({
   }
 
   &.type--unlisted,
+  &.type--plus,
   &.purple {
     --badge-color: var(--color-purple);
   }

apps/frontend/src/pages/plus.vue

@@ -3,7 +3,7 @@
     ref="purchaseModal"
     :product="midasProduct"
     :country="country"
-    publishable-key="pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b"
+    :publishable-key="config.public.stripePublishableKey"
     :send-billing-request="
       async (body) =>
         await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
@@ -73,7 +73,9 @@
         <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.
+          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">

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

@@ -34,7 +34,10 @@
             <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>
+              <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" />
@@ -163,7 +166,7 @@
       ref="purchaseModal"
       :product="midasProduct"
       :country="country"
-      publishable-key="pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b"
+      :publishable-key="config.public.stripePublishableKey"
       :send-billing-request="
         async (body) =>
           await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
@@ -457,9 +460,7 @@ let elements = null;
 function loadStripe() {
   try {
     if (!stripe) {
-      stripe = Stripe(
-        "pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b",
-      );
+      stripe = Stripe(props.publishableKey);
     }
   } catch {}
 }

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

@@ -40,6 +40,7 @@
           </div>
           <div class="sidebar__item">
             <Badge v-if="tags.staffRoles.includes(user.role)" :type="user.role" />
+            <Badge v-else-if="isPermission(user.badges, 1 << 0)" type="plus" />
             <Badge v-else-if="projects.length > 0" type="creator" />
           </div>
           <span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>