fix: sign-in/sign-up form shows success even if API was not sent successfully [SPMVP-6214]

.github/workflows/chromatic.yml

@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 0 # disable shallow checkout, chromatic need git history
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - name: Install dependencies
         run: yarn

.github/workflows/release-please.yml

@@ -30,7 +30,7 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - name: publish package
         run: |
@@ -46,7 +46,7 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - name: publish package
         run: |

.github/workflows/static-analyzer.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - run: yarn
 

.github/workflows/unit-test.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'yarn'
       - run: yarn
       - run: yarn test --coverage

src/PaywallSystem.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ApolloError } from '@apollo/client/core'
 import { useEventBus, useVModel } from '@vueuse/core'
 import { computed, provide, ref, watch } from 'vue'
 import type {
@@ -91,11 +92,15 @@ const profile = computed(() => {
 async function handleSignup(email: string, customArticleType?: string) {
   const checkExistEmailAndShowDialog = async (showDialogType: UserDialogType) => {
     const result = await onSignup(email)
-    if (result && result?.data.signUpSubscriber) {
+    if (result instanceof ApolloError) {
+      const result = await onLogin({ email })
+      if (!result) dialogType.value = 'error'
+      modalVisible.value = true
+    } else if (result && result?.data.signUpSubscriber) {
       dialogType.value = showDialogType
       visible.value = true
     } else {
-      onLogin({ email })
+      dialogType.value = 'error'
       modalVisible.value = true
     }
   }
@@ -201,6 +206,8 @@ function onConfirmModal() {
       dialogType.value = 'shareToTwitter'
       modalVisible.value = true
     }, 300)
+  } else if (dialogType.value === 'error') {
+    dialogType.value = 'welcome'
   }
 }
 

src/components/UserDialog/UserDialog.vue

@@ -77,6 +77,7 @@ const dialogMap: Record<UserDialogType | '', Component | undefined> = {
   subscribe: AccountDetail,
   confirmation: OnlyButton,
   shareToTwitter: undefined,
+  error: undefined,
   '': undefined,
 }
 

src/components/UserDialog/definition.ts

@@ -11,6 +11,7 @@ export type UserDialogType =
   | 'subscribe'
   | 'confirmation'
   | 'shareToTwitter'
+  | 'error'
 
 export interface SubscriberInput {
   email?: string

src/composables/auth.ts

@@ -2,6 +2,7 @@ import { useMutation } from '@vue/apollo-composable'
 import { useStorage } from '@vueuse/core'
 import gql from 'graphql-tag'
 import { type Ref, computed } from 'vue'
+import { ApolloError } from '@apollo/client/core'
 
 export type AuthAPI = ReturnType<typeof useAuth>
 
@@ -58,6 +59,12 @@ export function useAuth(tokenRef: Ref<string | null> = useStorage('test-token',
         return result
       }
     } catch (e) {
+      if (e instanceof ApolloError) {
+        const errorMessage = e.graphQLErrors[0]?.message
+        if (errorMessage === 'Bad Request.') {
+          return e
+        }
+      }
       // eslint-disable-next-line no-console
       console.log('e: ', e)
     }

src/modal-text.ts

@@ -23,4 +23,9 @@ export const modalTexts: Record<string, ModalText> = {
     title: 'Spread the word',
     sub: 'If you want to help __PUBLICATION_NAME__ even more, share your reason for subscribing.',
   },
+  error: {
+    title: 'An error occurred',
+    sub: 'Please retry later.',
+    button: 'Close',
+  },
 }