Feat/pay modal (#889)

web/app/(commonLayout)/apps/Apps.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
@@ -10,6 +11,8 @@ import type { AppListResponse } from '@/models/app'
 import { fetchAppList } from '@/service/apps'
 import { useAppContext, useSelector } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
+import Confirm from '@/app/components/base/confirm/common'
 
 const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -24,6 +27,11 @@ const Apps = () => {
   const loadingStateRef = useRef(false)
   const pageContainerRef = useSelector(state => state.pageContainerRef)
   const anchorRef = useRef<HTMLAnchorElement>(null)
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const payProviderName = searchParams.get('provider_name')
+  const payStatus = searchParams.get('payment_result')
+  const [showPayStatusModal, setShowPayStatusModal] = useState(false)
 
   useEffect(() => {
     document.title = `${t('app.title')} -  Dify`
@@ -31,6 +39,8 @@ const Apps = () => {
       localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
       mutate()
     }
+    if (payProviderName === ProviderEnum.anthropic && (payStatus === 'succeeded' || payStatus === 'cancelled'))
+      setShowPayStatusModal(true)
   }, [])
 
   useEffect(() => {
@@ -51,6 +61,11 @@ const Apps = () => {
     return () => pageContainerRef.current?.removeEventListener('scroll', onScroll)
   }, [])
 
+  const handleCancelShowPayStatusModal = () => {
+    setShowPayStatusModal(false)
+    router.replace('/', { forceOptimisticNavigation: false })
+  }
+
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
       {data?.map(({ data: apps }) => apps.map(app => (
@@ -58,6 +73,27 @@ const Apps = () => {
       )))}
       { isCurrentWorkspaceManager
       && <NewAppCard ref={anchorRef} onSuccess={mutate} />}
+      {
+        showPayStatusModal && (
+          <Confirm
+            isShow
+            onCancel={handleCancelShowPayStatusModal}
+            onConfirm={handleCancelShowPayStatusModal}
+            type={
+              payStatus === 'succeeded'
+                ? 'success'
+                : 'danger'
+            }
+            title={
+              payStatus === 'succeeded'
+                ? t('common.actionMsg.paySucceeded')
+                : t('common.actionMsg.payCancelled')
+            }
+            showOperateCancel={false}
+            confirmText={(payStatus === 'cancelled' && t('common.operation.ok')) || ''}
+          />
+        )
+      }
     </nav>
   )
 }