✨ feat: VerifyCustomerAccountMutation

:%s

framework/vendure/schema.d.ts

@@ -3095,6 +3095,36 @@ export type LoginMutation = { __typename?: 'Mutation' } & {
       >)
 }
 
+export type VerifyCustomerAccountVariables = Exact<{
+  token: Scalars['String']
+  password?: Maybe<Scalars['String']>
+}>
+
+export type VerifyCustomerAccountMutation = { __typename?: 'Mutation' } & {
+  verifyCustomerAccount:
+    | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
+    | ({ __typename: 'VerificationTokenInvalidError' } & Pick<
+      VerificationTokenInvalidError,
+      'errorCode' | 'message'
+    >)
+    | ({ __typename: 'VerificationTokenExpiredError' } & Pick<
+      VerificationTokenExpiredError,
+      'errorCode' | 'message'
+    >)
+    | ({ __typename: 'MissingPasswordError' } & Pick<
+      MissingPasswordError,
+      'errorCode' | 'message'
+    >)
+    | ({ __typename: 'PasswordAlreadySetError' } & Pick<
+      PasswordAlreadySetError,
+      'errorCode' | 'message'
+    >)
+    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+      NativeAuthStrategyError,
+      'errorCode' | 'message'
+    >)
+}
+
 export type LogoutMutationVariables = Exact<{ [key: string]: never }>
 
 export type LogoutMutation = { __typename?: 'Mutation' } & {

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/verify.tsx

@@ -1,34 +1,8 @@
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import { Layout } from 'src/components/common'
-import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
-import { useVerifyCustomer } from 'src/components/hooks'
+import { VerifyCustomerAccount } from 'src/components/modules/verify-customer'
 
 export default function VerifyCustomer() {
-    const router = useRouter()
-    const { error, loading, verify } = useVerifyCustomer()
-
-    useEffect(() => {
-        const { token } = router.query
-        console.log("token: ", token)
-        if (token) {
-            verify({ token: token.toString() })
-        }
-    }, [])
-
-    return (
-        <div>
-            {
-                loading ? <>
-                    <LoadingCommon />
-                    Verifing your account ....
-                </> : <div className="error">
-                    {error?.message}
-                </div>
-            }
-        </div>
-    )
+  return <VerifyCustomerAccount />
 }
 
-
 VerifyCustomer.Layout = Layout

src/components/common/LoadingCommon/LoadingCommon.tsx

@@ -1,15 +1,17 @@
-import React from "react";
+import React from 'react'
 import s from './LoadingCommon.module.scss'
 
-const LoadingCommon = () => {
+interface Props {
+  description?: string
+}
 
-    return (
-        <div className={s.wrapper}>
-            <div className={s.loadingCommon}>
-            </div>
-            <p className={s.text}>Loading...</p>
-        </div>
-    )
+const LoadingCommon = ({ description = 'Loading...' }: Props) => {
+  return (
+    <div className={s.wrapper}>
+      <div className={s.loadingCommon}></div>
+      <p className={s.text}>{description}</p>
+    </div>
+  )
 }
 
 export default LoadingCommon

src/components/hooks/useProduct.tsx

@@ -0,0 +1 @@
+// here

src/components/hooks/useVerifyCustomer.tsx

@@ -1,4 +1,4 @@
-import { LoginMutation } from '@framework/schema'
+import { VerifyCustomerAccountMutation } from '@framework/schema'
 import { useState } from 'react'
 import { CommonError } from 'src/domains/interfaces/CommonError'
 import rawFetcher from 'src/utils/rawFetcher'
@@ -13,28 +13,40 @@ interface VerifyInput {
 const useVerifyCustomer = () => {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<CommonError | null>(null)
-  // const { mutate } = useActiveCustomer()
+  const { mutate } = useActiveCustomer()
 
-  const verify = (options: VerifyInput) => {
+  const verify = (
+    options: VerifyInput,
+    fCallBack?: (isSuccess: boolean) => void
+  ) => {
     setError(null)
     setLoading(true)
-    rawFetcher<LoginMutation>({
+    rawFetcher<VerifyCustomerAccountMutation>({
       query: VERIFY_CUSTOMER_ACCOUNT,
       variables: options,
     })
       .then(({ data, headers }) => {
-        console.log("data: ", data)
-        // if (data.login.__typename !== 'CurrentUser') {
-        //   throw CommonError.create(data.login.message, data.login.errorCode)
-        // }
-        // const authToken = headers.get('vendure-auth-token')
-        // if (authToken != null) {
-        //   localStorage.setItem('token', authToken)
-        //   return mutate()
-        // }
+        if (data.verifyCustomerAccount.__typename !== 'CurrentUser') {
+          throw CommonError.create(
+            data.verifyCustomerAccount.message,
+            data.verifyCustomerAccount.errorCode
+          )
+        }
+        fCallBack && fCallBack(true)
+
+        const authToken = headers.get('vendure-auth-token')
+        if (authToken != null) {
+          localStorage.setItem('token', authToken)
+          return mutate()
+        }
+      })
+      .catch((err) => {
+        setError(err)
+        fCallBack && fCallBack(false)
+      })
+      .finally(() => {
+        setLoading(false)
       })
-      .catch(setError)
-      .finally(() => setLoading(false))
   }
 
   return { loading, verify, error }

src/components/modules/verify-customer/index.tsx

@@ -0,0 +1,2 @@
+export { default as VerifyCustomerAccount } from './VerifyCustomerAccount/VerifyCustomerAccount'
+

src/graphql/mutation/user.mutation.ts

@@ -2,15 +2,19 @@ import { gql } from 'graphql-request'
 
 
 export const VERIFY_CUSTOMER_ACCOUNT = gql`
-mutation verifyCustomerAccount(token: String!, password: String) {
+mutation verifyCustomerAccount($token: String!, $password: String) {
   verifyCustomerAccount( token: $token, password: $password) {
+      __typename
       ...on CurrentUser {
           id
           identifier
       }
-      ...ErrorResult
+      ... on ErrorResult {
+        errorCode
+        message
+      }
+    }
   }
-}
 `
 
 

src/utils/fetcher.ts

@@ -10,11 +10,11 @@ interface QueryOptions {
 
 const fetcher = async <T>(options: QueryOptions): Promise<T> => {
   const { query, variables } = options
-  console.log('query')
-  console.log(options)
+  // console.log('query')
+  // console.log(options)
   const token = localStorage.getItem('token')
-  console.log('token')
-  console.log(token)
+  // console.log('token')
+  // console.log(token)
   const res = await request<T>(
     process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string,
     query,