Restore payment details when navigating back to subscription payment page from another page

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Improved username validation.
 
+### Fixed
+
+- Restore payment details when navigating back to subscription payment page from another page.
+
 ## [1.12.0] - 2023-01-26
 
 ### Added

src/components/SubscriptionMonero.vue

@@ -132,6 +132,8 @@ import { useCurrentUser } from "@/store/user"
 import { formatDate } from "@/utils/dates"
 import { createMoneroPaymentUri } from "@/utils/monero"
 
+const INVOICE_ID_STORAGE_KEY = "invoice"
+
 /* eslint-disable-next-line no-undef */
 const props = defineProps<{
   profile: Profile,
@@ -150,6 +152,10 @@ let invoice = $ref<Invoice | null>(null)
 
 let isLoading = $ref(false)
 
+function getInvoiceIdStorageKey(): string {
+  return `${INVOICE_ID_STORAGE_KEY}_${recipient.id}`
+}
+
 onMounted(async () => {
   isLoading = true
   subscriptionOption = recipient.payment_options.find((option) => {
@@ -158,8 +164,12 @@ onMounted(async () => {
   if (subscriptionOption && sender.id !== "") {
     subscriptionDetails = await findSubscription(sender.id, recipient.id)
   }
-  if (route.query.invoice_id) {
+  const invoiceId = (
-    invoice = await getInvoice(route.query.invoice_id as string)
+    route.query.invoice_id ||
+    localStorage.getItem(getInvoiceIdStorageKey())
+  )
+  if (invoiceId) {
+    invoice = await getInvoice(invoiceId as string)
     if (invoice && invoice.status !== "forwarded") {
       watchInvoice()
     }
@@ -239,6 +249,7 @@ async function onCreateInvoice() {
     "",
     `${window.location.pathname}?invoice_id=${invoice.id}`,
   )
+  localStorage.setItem(getInvoiceIdStorageKey(), invoice.id)
   isLoading = false
   watchInvoice()
 }
@@ -267,6 +278,7 @@ function closeInvoice() {
     "",
     window.location.pathname,
   )
+  localStorage.removeItem(getInvoiceIdStorageKey())
 }
 
 function getPaymentUri(invoice: Invoice): string {

src/utils/monero.ts

@@ -1,3 +1,4 @@
+// https://github.com/monero-project/monero/wiki/URI-Formatting
 export function createMoneroPaymentUri(
   address: string,
   amount?: number,