From e2c2912375d24a866f1eb805d325d29792aa8ffe Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Fri, 19 Jul 2024 18:30:59 +0700
Subject: [PATCH] feat: continue payment flow after registration

---
 .../account/activation/AccountActivate.vue    |  37 ++-
 components/account/login/LoginForm.vue        |  26 +-
 components/account/login/LoginModal.vue       |  17 --
 components/account/signup/SignupAccount.vue   | 188 +++++++------
 components/account/signup/SignupAddress.vue   | 262 +++++++++---------
 .../signup/SignupCustomerInformation.vue      | 156 ++++++-----
 components/account/signup/SignupForm.vue      |   9 +
 .../payment-method/PaymentMethodSelection.vue |  51 ++--
 components/integration/IntegrationDetails.vue |   9 +-
 composables/redirect-url.ts                   |  40 +++
 locales/en.json                               |   3 +-
 package.json                                  |   2 +-
 pages/checkout/pay.vue                        |   6 +
 pnpm-lock.yaml                                |  10 +-
 14 files changed, 450 insertions(+), 366 deletions(-)
 delete mode 100644 components/account/login/LoginModal.vue
 create mode 100644 composables/redirect-url.ts

diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
index e66b3a54..43561f3f 100644
--- a/components/account/activation/AccountActivate.vue
+++ b/components/account/activation/AccountActivate.vue
@@ -10,7 +10,9 @@ const { uid, token } = route.params;
 const validating = ref(true);
 const isValid = ref(false);
 
-const { getAccount } = useMainStore();
+const mainStore = useMainStore();
+const { getAccount } = mainStore;
+const { account } = storeToRefs(mainStore);
 const logger = useLogger();
 
 async function validateToken() {
@@ -33,6 +35,22 @@ onBeforeMount(async () => {
     await getAccount();
 });
 const { t } = useI18n();
+
+const { getLastRedirectUrl } = useRedirectUrl();
+
+const lastPaymentLink = computed(() => {
+  const accountVal = get(account);
+  if (accountVal && accountVal.username)
+    return getLastRedirectUrl(accountVal.username);
+
+  return undefined;
+});
+
+function redirectToPaymentLink() {
+  const paymentLink = get(lastPaymentLink);
+  if (paymentLink)
+    window.location.href = paymentLink;
+}
 </script>
 
 <template>
@@ -80,6 +98,23 @@ const { t } = useI18n();
             {{ t('common.here') }}
           </ButtonLink>
         </div>
+        <div
+          v-if="lastPaymentLink"
+          class="text-body-1 text-rui-text-secondary border-t pt-3"
+        >
+          <span>
+            {{ t('auth.activation.success.continue_payment') }}
+          </span>
+          <RuiButton
+            :to="lastPaymentLink"
+            color="primary"
+            class="inline-flex py-0 !px-1 !text-[1em]"
+            variant="text"
+            @click="redirectToPaymentLink()"
+          >
+            {{ t('common.here') }}
+          </RuiButton>
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index fbdeab61..fb46befd 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -4,13 +4,6 @@ import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useMainStore } from '~/store';
 
-const props = withDefaults(defineProps<{ modal?: boolean }>(), {
-  modal: false,
-});
-
-const emit = defineEmits<{ (e: 'complete'): void }>();
-
-const { modal } = toRefs(props);
 const username = ref<string>('');
 const password = ref<string>('');
 const loading = ref<boolean>(false);
@@ -34,6 +27,7 @@ const v$ = useVuelidate(
 );
 
 const { login } = useMainStore();
+const route = useRoute();
 
 async function performLogin() {
   set(loading, true);
@@ -47,14 +41,14 @@ async function performLogin() {
   set(loading, false);
 
   if (!get(error)) {
-    if (get(modal))
-      emit('complete');
+    const { redirectUrl } = route.query;
+    if (redirectUrl)
+      window.location.href = decodeURIComponent(redirectUrl as string);
     else
       await navigateTo('/home/subscription');
   }
-  else {
-    set(hadError, true);
-  }
+
+  else { set(hadError, true); }
 }
 
 const { t } = useI18n();
@@ -136,7 +130,10 @@ const { t } = useI18n();
         {{ t('auth.login.first_time_premium') }}
       </span>
       <ButtonLink
-        to="/signup"
+        :to="{
+          path: '/signup',
+          query: route.query,
+        }"
         inline
         color="primary"
       >
@@ -146,8 +143,7 @@ const { t } = useI18n();
   </div>
   <div
     v-if="hadError"
-    class="max-w-full"
-    :class="modal ? 'w-[360px] mt-8' : 'w-[660px] mt-14'"
+    class="max-w-full w-[660px] mt-14"
   >
     <RuiAlert
       type="error"
diff --git a/components/account/login/LoginModal.vue b/components/account/login/LoginModal.vue
deleted file mode 100644
index f6822d9e..00000000
--- a/components/account/login/LoginModal.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const modelValue = defineModel<boolean>({ required: true });
-</script>
-
-<template>
-  <RuiDialog
-    v-model="modelValue"
-    max-width="430"
-  >
-    <RuiCard class="p-4">
-      <LoginForm
-        modal
-        @complete="modelValue = false"
-      />
-    </RuiCard>
-  </RuiDialog>
-</template>
diff --git a/components/account/signup/SignupAccount.vue b/components/account/signup/SignupAccount.vue
index 5f7eb287..2fe1ca62 100644
--- a/components/account/signup/SignupAccount.vue
+++ b/components/account/signup/SignupAccount.vue
@@ -59,105 +59,109 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="space-y-8 grow">
-    <div class="text-h4 text-center">
-      {{ t('auth.signup.account.title') }}
-    </div>
-    <div class="space-y-5">
-      <RuiTextField
-        id="username"
-        :model-value="modelValue.username"
-        variant="outlined"
-        color="primary"
-        dense
-        :label="t('auth.common.username')"
-        :hint="t('auth.signup.account.form.username_hint')"
-        autocomplete="username"
-        :error-messages="toMessages(v$.username)"
-        @update:model-value="updateValue('username', $event)"
-      />
-      <RuiTextField
-        id="email"
-        :model-value="modelValue.email"
-        variant="outlined"
-        color="primary"
-        dense
-        autocomplete="email"
-        :label="t('auth.common.email')"
-        :hint="t('auth.signup.account.form.email_hint')"
-        :error-messages="toMessages(v$.email)"
-        @update:model-value="updateValue('email', $event)"
-      />
-      <div class="space-y-1">
+  <form>
+    <div class="space-y-8 grow">
+      <div class="text-h4 text-center">
+        {{ t('auth.signup.account.title') }}
+      </div>
+      <div class="space-y-5">
         <RuiTextField
-          id="password"
-          type="password"
-          :model-value="modelValue.password"
+          id="username"
+          :model-value="modelValue.username"
           variant="outlined"
+          autofocus
           color="primary"
           dense
+          :label="t('auth.common.username')"
+          :hint="t('auth.signup.account.form.username_hint')"
+          autocomplete="username"
+          :error-messages="toMessages(v$.username)"
+          @update:model-value="updateValue('username', $event)"
+        />
+        <RuiTextField
+          id="email"
+          :model-value="modelValue.email"
+          variant="outlined"
+          color="primary"
+          dense
+          autocomplete="email"
+          :label="t('auth.common.email')"
+          :hint="t('auth.signup.account.form.email_hint')"
+          :error-messages="toMessages(v$.email)"
+          @update:model-value="updateValue('email', $event)"
+        />
+        <div class="space-y-1">
+          <RuiTextField
+            id="password"
+            type="password"
+            :model-value="modelValue.password"
+            variant="outlined"
+            color="primary"
+            dense
+            autocomplete="new-password"
+            :label="t('auth.common.password')"
+            hide-details
+            :error-messages="toMessages(v$.password).length > 0 ? [''] : []"
+            @update:model-value="updateValue('password', $event)"
+          />
+          <ul
+            class="ml-4 list-disc text-caption"
+            :class="
+              toMessages(v$.password).length > 0
+                ? 'text-rui-error'
+                : 'text-rui-text-secondary'
+            "
+          >
+            <li>
+              {{ t('auth.common.password_hint.line_1') }}
+            </li>
+            <li>
+              {{ t('auth.common.password_hint.line_2') }}
+            </li>
+            <li>
+              {{ t('auth.common.password_hint.line_3') }}
+            </li>
+            <li>
+              {{ t('auth.common.password_hint.line_4') }}
+            </li>
+          </ul>
+        </div>
+        <RuiTextField
+          id="password-confirmation"
+          type="password"
+          :model-value="modelValue.confirmPassword"
+          variant="outlined"
+          color="primary"
           autocomplete="new-password"
-          :label="t('auth.common.password')"
-          hide-details
-          :error-messages="toMessages(v$.password).length > 0 ? [''] : []"
-          @update:model-value="updateValue('password', $event)"
+          dense
+          :label="t('auth.signup.account.form.confirm_password')"
+          :hint="t('auth.common.confirm_hint')"
+          :error-messages="toMessages(v$.confirmPassword)"
+          @update:model-value="updateValue('confirmPassword', $event)"
         />
-        <ul
-          class="ml-4 list-disc text-caption"
-          :class="
-            toMessages(v$.password).length > 0
-              ? 'text-rui-error'
-              : 'text-rui-text-secondary'
-          "
-        >
-          <li>
-            {{ t('auth.common.password_hint.line_1') }}
-          </li>
-          <li>
-            {{ t('auth.common.password_hint.line_2') }}
-          </li>
-          <li>
-            {{ t('auth.common.password_hint.line_3') }}
-          </li>
-          <li>
-            {{ t('auth.common.password_hint.line_4') }}
-          </li>
-        </ul>
       </div>
-      <RuiTextField
-        id="password-confirmation"
-        type="password"
-        :model-value="modelValue.confirmPassword"
-        variant="outlined"
+    </div>
+    <div class="mt-16 grid md:grid-cols-2 gap-4">
+      <RuiButton
+        type="button"
+        class="w-full row-start-2 md:row-start-auto"
+        size="lg"
+        data-cy="back-button"
+        @click="emit('back')"
+      >
+        {{ t('actions.back') }}
+      </RuiButton>
+      <RuiButton
+        data-cy="next-button"
+        :disabled="v$.$invalid"
         color="primary"
-        autocomplete="new-password"
-        dense
-        :label="t('auth.signup.account.form.confirm_password')"
-        :hint="t('auth.common.confirm_hint')"
-        :error-messages="toMessages(v$.confirmPassword)"
-        @update:model-value="updateValue('confirmPassword', $event)"
-      />
+        class="w-full"
+        size="lg"
+        type="submit"
+        @click="emit('next')"
+      >
+        {{ t('actions.continue') }}
+      </RuiButton>
     </div>
-  </div>
-  <div class="mt-16 grid md:grid-cols-2 gap-4">
-    <RuiButton
-      type="button"
-      class="w-full row-start-2 md:row-start-auto"
-      size="lg"
-      data-cy="back-button"
-      @click="emit('back')"
-    >
-      {{ t('actions.back') }}
-    </RuiButton>
-    <RuiButton
-      data-cy="next-button"
-      :disabled="v$.$invalid"
-      color="primary"
-      class="w-full"
-      size="lg"
-      @click="emit('next')"
-    >
-      {{ t('actions.continue') }}
-    </RuiButton>
-  </div>
+  </form>
 </template>
diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
index 4150c6e6..4e259681 100644
--- a/components/account/signup/SignupAddress.vue
+++ b/components/account/signup/SignupAddress.vue
@@ -97,137 +97,141 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="space-y-8 grow">
-    <div class="text-h4 text-center">
-      Address
+  <form>
+    <div class="space-y-8 grow">
+      <div class="text-h4 text-center">
+        Address
+      </div>
+      <div class="space-y-5">
+        <RuiTextField
+          id="address-1"
+          maxlength="128"
+          :model-value="modelValue.address1"
+          variant="outlined"
+          color="primary"
+          autocomplete="address-line1"
+          autofocus
+          dense
+          :label="t('auth.signup.address.form.address_line_1')"
+          :hint="t('auth.common.required')"
+          :error-messages="toMessages(v$.address1)"
+          @update:model-value="updateValue('address1', $event)"
+          @blur="v$.address1.$touch()"
+        />
+        <RuiTextField
+          id="address-2"
+          maxlength="128"
+          :model-value="modelValue.address2"
+          variant="outlined"
+          color="primary"
+          autocomplete="address-line2"
+          dense
+          :label="t('auth.signup.address.form.address_line_2')"
+          :hint="t('auth.common.optional')"
+          :error-messages="toMessages(v$.address2)"
+          @update:model-value="updateValue('address2', $event)"
+          @blur="v$.address2.$touch()"
+        />
+        <RuiTextField
+          id="city"
+          :model-value="modelValue.city"
+          variant="outlined"
+          color="primary"
+          autocomplete="address-level2"
+          dense
+          :label="t('auth.signup.address.form.city')"
+          :hint="t('auth.common.required')"
+          :error-messages="toMessages(v$.city)"
+          @update:model-value="updateValue('city', $event)"
+          @blur="v$.city.$touch()"
+        />
+        <RuiTextField
+          id="postal"
+          data-cy="postal"
+          :model-value="modelValue.postcode"
+          variant="outlined"
+          color="primary"
+          autocomplete="postal-code"
+          dense
+          :label="t('auth.signup.address.form.postal_code')"
+          :hint="t('auth.common.required')"
+          :error-messages="toMessages(v$.postcode)"
+          @update:model-value="updateValue('postcode', $event)"
+          @blur="v$.postcode.$touch()"
+        />
+
+        <CountrySelect
+          :model-value="modelValue.country"
+          :error-messages="toMessages(v$.country)"
+          dense
+          :hint="t('auth.common.required')"
+          @blur="v$.country.$touch()"
+          @update:model-value="updateValue('country', $event)"
+        />
+        <Recaptcha
+          id="signup-captcha"
+          :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
+          @error="onError()"
+          @expired="onExpired()"
+          @success="onSuccess($event)"
+          @update:captcha-id="setCaptchaId($event)"
+        />
+
+        <RuiCheckbox
+          id="tos"
+          v-model="terms"
+          color="primary"
+        >
+          <i18n-t
+            keypath="auth.signup.address.form.tos"
+            scope="global"
+          >
+            <template #tos>
+              <ButtonLink
+                to="/tos"
+                inline
+                color="primary"
+                external
+              >
+                {{ t('navigation_menu.tos') }}
+              </ButtonLink>
+            </template>
+            <template #privacy_policy>
+              <ButtonLink
+                to="/privacy-policy"
+                inline
+                color="primary"
+                external
+              >
+                {{ t('navigation_menu.privacy_policy') }}
+              </ButtonLink>
+            </template>
+          </i18n-t>
+        </RuiCheckbox>
+      </div>
     </div>
-    <div class="space-y-5">
-      <RuiTextField
-        id="address-1"
-        maxlength="128"
-        :model-value="modelValue.address1"
-        variant="outlined"
-        color="primary"
-        autocomplete="address-line1"
-        dense
-        :label="t('auth.signup.address.form.address_line_1')"
-        :hint="t('auth.common.required')"
-        :error-messages="toMessages(v$.address1)"
-        @update:model-value="updateValue('address1', $event)"
-        @blur="v$.address1.$touch()"
-      />
-      <RuiTextField
-        id="address-2"
-        maxlength="128"
-        :model-value="modelValue.address2"
-        variant="outlined"
-        color="primary"
-        autocomplete="address-line2"
-        dense
-        :label="t('auth.signup.address.form.address_line_2')"
-        :hint="t('auth.common.optional')"
-        :error-messages="toMessages(v$.address2)"
-        @update:model-value="updateValue('address2', $event)"
-        @blur="v$.address2.$touch()"
-      />
-      <RuiTextField
-        id="city"
-        :model-value="modelValue.city"
-        variant="outlined"
-        color="primary"
-        autocomplete="address-level2"
-        dense
-        :label="t('auth.signup.address.form.city')"
-        :hint="t('auth.common.required')"
-        :error-messages="toMessages(v$.city)"
-        @update:model-value="updateValue('city', $event)"
-        @blur="v$.city.$touch()"
-      />
-      <RuiTextField
-        id="postal"
-        data-cy="postal"
-        :model-value="modelValue.postcode"
-        variant="outlined"
-        color="primary"
-        autocomplete="postal-code"
-        dense
-        :label="t('auth.signup.address.form.postal_code')"
-        :hint="t('auth.common.required')"
-        :error-messages="toMessages(v$.postcode)"
-        @update:model-value="updateValue('postcode', $event)"
-        @blur="v$.postcode.$touch()"
-      />
-
-      <CountrySelect
-        :model-value="modelValue.country"
-        :error-messages="toMessages(v$.country)"
-        dense
-        :hint="t('auth.common.required')"
-        @blur="v$.country.$touch()"
-        @update:model-value="updateValue('country', $event)"
-      />
-      <Recaptcha
-        id="signup-captcha"
-        :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
-        @error="onError()"
-        @expired="onExpired()"
-        @success="onSuccess($event)"
-        @update:captcha-id="setCaptchaId($event)"
-      />
-
-      <RuiCheckbox
-        id="tos"
-        v-model="terms"
+    <div class="mt-16 grid md:grid-cols-2 gap-4">
+      <RuiButton
+        data-cy="back-button"
+        type="button"
+        class="w-full row-start-2 md:row-start-auto"
+        size="lg"
+        @click="emit('back')"
+      >
+        {{ t('actions.back') }}
+      </RuiButton>
+      <RuiButton
+        data-cy="submit-button"
+        :disabled="v$.$invalid || !recaptchaPassed || loading"
         color="primary"
+        class="w-full"
+        size="lg"
+        type="submit"
+        :loading="loading"
+        @click="finish()"
       >
-        <i18n-t
-          keypath="auth.signup.address.form.tos"
-          scope="global"
-        >
-          <template #tos>
-            <ButtonLink
-              to="/tos"
-              inline
-              color="primary"
-              external
-            >
-              {{ t('footer_legalese.tos') }}
-            </ButtonLink>
-          </template>
-          <template #privacy_policy>
-            <ButtonLink
-              to="/privacy-policy"
-              inline
-              color="primary"
-              external
-            >
-              {{ t('footer_legalese.privacy_policy') }}
-            </ButtonLink>
-          </template>
-        </i18n-t>
-      </RuiCheckbox>
+        {{ t('auth.signup.create_account') }}
+      </RuiButton>
     </div>
-  </div>
-  <div class="mt-16 grid md:grid-cols-2 gap-4">
-    <RuiButton
-      data-cy="back-button"
-      type="button"
-      class="w-full row-start-2 md:row-start-auto"
-      size="lg"
-      @click="emit('back')"
-    >
-      {{ t('actions.back') }}
-    </RuiButton>
-    <RuiButton
-      data-cy="submit-button"
-      :disabled="v$.$invalid || !recaptchaPassed || loading"
-      color="primary"
-      class="w-full"
-      size="lg"
-      :loading="loading"
-      @click="finish()"
-    >
-      {{ t('auth.signup.create_account') }}
-    </RuiButton>
-  </div>
+  </form>
 </template>
diff --git a/components/account/signup/SignupCustomerInformation.vue b/components/account/signup/SignupCustomerInformation.vue
index 56171508..0a5e263f 100644
--- a/components/account/signup/SignupCustomerInformation.vue
+++ b/components/account/signup/SignupCustomerInformation.vue
@@ -54,83 +54,87 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="space-y-8 grow">
-    <div class="text-h4 text-center">
-      {{ t('auth.signup.customer_information.title') }}
+  <form>
+    <div class="space-y-8 grow">
+      <div class="text-h4 text-center">
+        {{ t('auth.signup.customer_information.title') }}
+      </div>
+      <div class="space-y-5">
+        <RuiTextField
+          id="first-name"
+          :model-value="modelValue.firstName"
+          variant="outlined"
+          autofocus
+          color="primary"
+          autocomplete="given-name"
+          dense
+          :label="t('auth.signup.customer_information.form.first_name')"
+          :hint="t('auth.signup.customer_information.form.name_hint')"
+          :error-messages="toMessages(v$.firstName)"
+          @update:model-value="updateValue('firstName', $event)"
+          @blur="v$.firstName.$touch()"
+        />
+        <RuiTextField
+          id="last-name"
+          :model-value="modelValue.lastName"
+          variant="outlined"
+          color="primary"
+          autocomplete="family-name"
+          dense
+          :label="t('auth.signup.customer_information.form.last_name')"
+          :hint="t('auth.signup.customer_information.form.name_hint')"
+          :error-messages="toMessages(v$.lastName)"
+          @update:model-value="updateValue('lastName', $event)"
+          @blur="v$.lastName.$touch()"
+        />
+        <RuiTextField
+          id="company-name"
+          :model-value="modelValue.companyName"
+          variant="outlined"
+          color="primary"
+          autocomplete="organization"
+          dense
+          :label="t('auth.signup.customer_information.form.company')"
+          :hint="t('auth.signup.customer_information.form.company_hint')"
+          :error-messages="toMessages(v$.companyName)"
+          @update:model-value="updateValue('companyName', $event)"
+          @blur="v$.companyName.$touch()"
+        />
+        <RuiTextField
+          id="vat-id"
+          :model-value="modelValue.vatId"
+          variant="outlined"
+          color="primary"
+          dense
+          :label="t('auth.signup.customer_information.form.vat_id')"
+          :hint="t('auth.signup.customer_information.form.vat_id_hint')"
+          :error-messages="toMessages(v$.vatId)"
+          @update:model-value="updateValue('vatId', $event)"
+          @blur="v$.vatId.$touch()"
+        />
+      </div>
     </div>
-    <div class="space-y-5">
-      <RuiTextField
-        id="first-name"
-        :model-value="modelValue.firstName"
-        variant="outlined"
+    <div class="mt-16 grid md:grid-cols-2 gap-4">
+      <RuiButton
+        type="button"
+        class="w-full row-start-2 md:row-start-auto"
+        size="lg"
+        data-cy="back-button"
+        @click="emit('back')"
+      >
+        {{ t('actions.back') }}
+      </RuiButton>
+      <RuiButton
+        data-cy="next-button"
+        :disabled="v$.$invalid"
         color="primary"
-        autocomplete="given-name"
-        dense
-        :label="t('auth.signup.customer_information.form.first_name')"
-        :hint="t('auth.signup.customer_information.form.name_hint')"
-        :error-messages="toMessages(v$.firstName)"
-        @update:model-value="updateValue('firstName', $event)"
-        @blur="v$.firstName.$touch()"
-      />
-      <RuiTextField
-        id="last-name"
-        :model-value="modelValue.lastName"
-        variant="outlined"
-        color="primary"
-        autocomplete="family-name"
-        dense
-        :label="t('auth.signup.customer_information.form.last_name')"
-        :hint="t('auth.signup.customer_information.form.name_hint')"
-        :error-messages="toMessages(v$.lastName)"
-        @update:model-value="updateValue('lastName', $event)"
-        @blur="v$.lastName.$touch()"
-      />
-      <RuiTextField
-        id="company-name"
-        :model-value="modelValue.companyName"
-        variant="outlined"
-        color="primary"
-        autocomplete="organization"
-        dense
-        :label="t('auth.signup.customer_information.form.company')"
-        :hint="t('auth.signup.customer_information.form.company_hint')"
-        :error-messages="toMessages(v$.companyName)"
-        @update:model-value="updateValue('companyName', $event)"
-        @blur="v$.companyName.$touch()"
-      />
-      <RuiTextField
-        id="vat-id"
-        :model-value="modelValue.vatId"
-        variant="outlined"
-        color="primary"
-        dense
-        :label="t('auth.signup.customer_information.form.vat_id')"
-        :hint="t('auth.signup.customer_information.form.vat_id_hint')"
-        :error-messages="toMessages(v$.vatId)"
-        @update:model-value="updateValue('vatId', $event)"
-        @blur="v$.vatId.$touch()"
-      />
+        class="w-full"
+        size="lg"
+        type="submit"
+        @click="emit('next')"
+      >
+        {{ t('actions.continue') }}
+      </RuiButton>
     </div>
-  </div>
-  <div class="mt-16 grid md:grid-cols-2 gap-4">
-    <RuiButton
-      type="button"
-      class="w-full row-start-2 md:row-start-auto"
-      size="lg"
-      data-cy="back-button"
-      @click="emit('back')"
-    >
-      {{ t('actions.back') }}
-    </RuiButton>
-    <RuiButton
-      data-cy="next-button"
-      :disabled="v$.$invalid"
-      color="primary"
-      class="w-full"
-      size="lg"
-      @click="emit('next')"
-    >
-      {{ t('actions.continue') }}
-    </RuiButton>
-  </div>
+  </form>
 </template>
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index 47fcf062..c36fe2e4 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -2,6 +2,7 @@
 import { get, set } from '@vueuse/core';
 import { FetchError } from 'ofetch';
 import { fetchWithCsrf } from '~/utils/api';
+import { useRedirectUrl } from '~/composables/redirect-url';
 import type {
   SignupAccountPayload,
   SignupAddressPayload,
@@ -39,6 +40,10 @@ const addressForm = ref<SignupAddressPayload>({
 const loading = ref<boolean>(false);
 const externalResults = ref<ValidationErrors>({});
 
+const route = useRoute();
+
+const { saveRedirectUrl } = useRedirectUrl();
+
 async function signup({
   recaptchaToken,
 }: {
@@ -64,6 +69,10 @@ async function signup({
       },
     });
     if (result) {
+      const { redirectUrl } = route.query;
+      if (redirectUrl)
+        saveRedirectUrl(payload.username, decodeURIComponent(redirectUrl as string));
+
       await navigateTo({ path: '/activation' });
     }
     else if (typeof message === 'object') {
diff --git a/components/checkout/payment-method/PaymentMethodSelection.vue b/components/checkout/payment-method/PaymentMethodSelection.vue
index 6f0bee61..81c8fe0a 100644
--- a/components/checkout/payment-method/PaymentMethodSelection.vue
+++ b/components/checkout/payment-method/PaymentMethodSelection.vue
@@ -26,7 +26,6 @@ const { paymentMethodId } = usePaymentMethodParam();
 const { identifier } = toRefs(props);
 const { authenticated } = storeToRefs(store);
 
-const loginRequired = ref(false);
 const method = ref<PaymentMethod>(get(paymentMethodId));
 const processing = ref<boolean>(false);
 
@@ -65,39 +64,42 @@ async function back() {
   });
 }
 
+const router = useRouter();
+
 async function next() {
-  if (get(authenticated)) {
-    set(processing, true);
-    const selectedMethod = get(selected);
-    assert(selectedMethod);
-    const { name, id: method } = selectedMethod;
+  set(processing, true);
+  const selectedMethod = get(selected);
+  assert(selectedMethod);
+  const { name, id: method } = selectedMethod;
+
+  const { href } = router.resolve({
+    name,
+    query: {
+      plan: get(plan),
+      id: get(identifier),
+      method,
+    },
+  });
 
+  if (get(authenticated)) {
     if (method === PaymentMethod.CARD) {
       // For card payments we use href instead of router to trigger a server reload
       // This need to happen due to the CSP policy required for 3DSecure v2
-      const queryString = new URLSearchParams({
-        plan: get(plan).toString(),
-        id: get(identifier) ?? '',
-        method: method.toString(),
-      });
-      const url = new URL(
-        `${window.location.origin}/checkout/pay/card?${queryString}`,
-      );
-      window.location.href = url.toString();
+      window.location.href = new URL(
+        `${window.location.origin}${href}`,
+      ).toString();
     }
     else {
-      await navigateTo({
-        name,
-        query: {
-          plan: get(plan),
-          id: get(identifier),
-          method,
-        },
-      });
+      await navigateTo(href);
     }
   }
   else {
-    set(loginRequired, true);
+    await navigateTo({
+      path: '/login',
+      query: {
+        redirectUrl: encodeURIComponent(href),
+      },
+    });
   }
 }
 
@@ -152,7 +154,6 @@ function select(m: PaymentMethod) {
         {{ t('actions.continue') }}
       </RuiButton>
     </div>
-    <LoginModal v-model="loginRequired" />
   </div>
 </template>
 
diff --git a/components/integration/IntegrationDetails.vue b/components/integration/IntegrationDetails.vue
index 0317b4f6..cff97950 100644
--- a/components/integration/IntegrationDetails.vue
+++ b/components/integration/IntegrationDetails.vue
@@ -110,10 +110,11 @@ const { isMdAndUp } = useBreakpoint();
         leave-to-class="opacity-0"
         class="flex-1 flex flex-col gap-10"
       >
-        <ReuseNotFound
-          v-if="isAllSelected && total === 0"
-          :keyword="searchDebounced"
-        />
+        <div v-if="isAllSelected && total === 0">
+          <ReuseNotFound
+            :keyword="searchDebounced"
+          />
+        </div>
         <template
           v-for="(datum, key) in data"
           v-else
diff --git a/composables/redirect-url.ts b/composables/redirect-url.ts
new file mode 100644
index 00000000..aa9af769
--- /dev/null
+++ b/composables/redirect-url.ts
@@ -0,0 +1,40 @@
+import { get, set } from '@vueuse/core';
+
+interface StoredUrl {
+  username: string;
+  url: string;
+}
+
+export function useRedirectUrl() {
+  const storedRedirectUrl = useLocalStorage<StoredUrl>('rotki.redirect_url', null, {
+    serializer: {
+      read: (v: any) => JSON.parse(v),
+      write: (v: any) => JSON.stringify(v),
+    },
+  });
+
+  const getLastRedirectUrl = (username: string): string | undefined => {
+    const stored = get(storedRedirectUrl);
+    if (stored && stored.username === username)
+      return stored.url;
+
+    return undefined;
+  };
+
+  const saveRedirectUrl = (username: string, url: string) => {
+    set(storedRedirectUrl, {
+      url,
+      username,
+    });
+  };
+
+  const removeStoredRedirectUrl = () => {
+    set(storedRedirectUrl, null);
+  };
+
+  return {
+    getLastRedirectUrl,
+    removeStoredRedirectUrl,
+    saveRedirectUrl,
+  };
+}
diff --git a/locales/en.json b/locales/en.json
index f7339bd2..7f3d888b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -7,7 +7,8 @@
       },
       "success": {
         "title": "Welcome to rotki",
-        "message": "Your rotki account has been successfully activated. To see your dashboard click"
+        "message": "Your rotki account has been successfully activated. To see your dashboard click",
+        "continue_payment": "Or continue your payment"
       }
     },
     "common": {
diff --git a/package.json b/package.json
index 45ab95e0..97b9f61f 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@nuxtjs/sitemap": "5.1.5",
     "@rotki/eslint-config": "2.9.1",
     "@rotki/eslint-plugin": "0.4.0",
-    "@rotki/ui-library": "1.0.0-beta.9",
+    "@rotki/ui-library": "1.0.0-beta.10",
     "@types/braintree-web": "3.96.11",
     "@types/paypal-checkout-components": "4.0.8",
     "@types/qrcode": "1.5.5",
diff --git a/pages/checkout/pay.vue b/pages/checkout/pay.vue
index 6f907b95..cc715344 100644
--- a/pages/checkout/pay.vue
+++ b/pages/checkout/pay.vue
@@ -39,6 +39,12 @@ const step = computed(() => {
   return index + 1;
 });
 
+const { removeStoredRedirectUrl } = useRedirectUrl();
+
+onBeforeMount(() => {
+  removeStoredRedirectUrl();
+});
+
 onMounted(async () => {
   await store.getPlans();
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e01e119..1de252ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,8 +98,8 @@ importers:
         specifier: 0.4.0
         version: 0.4.0(eslint@8.57.0)(typescript@5.4.5)
       '@rotki/ui-library':
-        specifier: 1.0.0-beta.9
-        version: 1.0.0-beta.9(@vueuse/core@10.9.0(vue@3.4.26(typescript@5.4.5)))(@vueuse/shared@10.9.0(vue@3.4.26(typescript@5.4.5)))(vue@3.4.26(typescript@5.4.5))
+        specifier: 1.0.0-beta.10
+        version: 1.0.0-beta.10(@vueuse/core@10.9.0(vue@3.4.26(typescript@5.4.5)))(@vueuse/shared@10.9.0(vue@3.4.26(typescript@5.4.5)))(vue@3.4.26(typescript@5.4.5))
       '@types/braintree-web':
         specifier: 3.96.11
         version: 3.96.11
@@ -1481,8 +1481,8 @@ packages:
     peerDependencies:
       eslint: ^8.0.0 || ^9.0.0
 
-  '@rotki/ui-library@1.0.0-beta.9':
-    resolution: {integrity: sha512-rGXH9Hn9NSw1/v4yhM3aK6qV2lzQb9/8f1i2hmQ20eV5SzOvd8Vps+Ju1AE9OL4Nkl5dd03KybXFLHwGht8Awg==}
+  '@rotki/ui-library@1.0.0-beta.10':
+    resolution: {integrity: sha512-O1WtowbH0Ebsvh+2Ep+luoPQI+svxSjBDCqcN6HTSWeS0xf6sroR8vbvKtcTt8IGvtr2d0CvS7hkDC2OfTKIUQ==}
     engines: {pnpm: '>=9 <10'}
     peerDependencies:
       '@vueuse/core': '>10.0.0'
@@ -8897,7 +8897,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@rotki/ui-library@1.0.0-beta.9(@vueuse/core@10.9.0(vue@3.4.26(typescript@5.4.5)))(@vueuse/shared@10.9.0(vue@3.4.26(typescript@5.4.5)))(vue@3.4.26(typescript@5.4.5))':
+  '@rotki/ui-library@1.0.0-beta.10(@vueuse/core@10.9.0(vue@3.4.26(typescript@5.4.5)))(@vueuse/shared@10.9.0(vue@3.4.26(typescript@5.4.5)))(vue@3.4.26(typescript@5.4.5))':
     dependencies:
       '@vueuse/core': 10.9.0(vue@3.4.26(typescript@5.4.5))
       '@vueuse/shared': 10.9.0(vue@3.4.26(typescript@5.4.5))