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/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",