feat: try app support review (#31716)

web/app/components/apps/index.tsx

@@ -105,6 +105,7 @@ const Apps = () => {
         {isShowTryAppPanel && (
           <TryApp
             appId={currentTryAppParams?.appId || ''}
+            app={currentTryAppParams?.app}
             category={currentTryAppParams?.app?.category}
             onClose={hideTryAppPanel}
             onCreate={handleShowFromTryApp}

web/app/components/explore/app-card/index.tsx

@@ -74,17 +74,15 @@ const AppCard = ({
       </div>
       {isExplore && (canCreate || isTrialApp) && (
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-          <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', isTrialApp && 'grid-cols-2')}>
+          <div className={cn('grid h-8 w-full grid-cols-2 space-x-2')}>
             <Button variant="primary" className="h-7" onClick={() => onCreate()}>
               <PlusIcon className="mr-1 h-4 w-4" />
               <span className="text-xs">{t('appCard.addToWorkspace', { ns: 'explore' })}</span>
             </Button>
-            {isTrialApp && (
-              <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
-                <RiInformation2Line className="mr-1 size-4" />
-                <span>{t('appCard.try', { ns: 'explore' })}</span>
-              </Button>
-            )}
+            <Button className="h-7" onClick={showTryAPPPanel(app.app_id)}>
+              <RiInformation2Line className="mr-1 size-4" />
+              <span>{t('appCard.try', { ns: 'explore' })}</span>
+            </Button>
           </div>
         </div>
       )}

web/app/components/explore/app-list/index.tsx

@@ -251,6 +251,7 @@ const Apps = ({
       {isShowTryAppPanel && (
         <TryApp
           appId={appParams?.appId || ''}
+          app={appParams?.app}
           category={appParams?.app?.category}
           onClose={hideTryAppPanel}
           onCreate={handleShowFromTryApp}

web/app/components/explore/try-app/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable style/multiline-ternary */
 'use client'
 import type { FC } from 'react'
+import type { App as AppType } from '@/models/explore'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/index'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetTryAppInfo } from '@/service/use-try-app'
 import Button from '../../base/button'
 import App from './app'
@@ -15,6 +17,7 @@ import Tab, { TypeEnum } from './tab'
 
 type Props = {
   appId: string
+  app?: AppType
   category?: string
   onClose: () => void
   onCreate: () => void
@@ -22,13 +25,23 @@ type Props = {
 
 const TryApp: FC<Props> = ({
   appId,
+  app,
   category,
   onClose,
   onCreate,
 }) => {
-  const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
+  const { systemFeatures } = useGlobalPublicStore()
+  const isTrialApp = !!(app && app.can_trial && systemFeatures.enable_trial_app)
+  const [type, setType] = useState<TypeEnum>(() => (app && !isTrialApp ? TypeEnum.DETAIL : TypeEnum.TRY))
   const { data: appDetail, isLoading } = useGetTryAppInfo(appId)
 
+  React.useEffect(() => {
+    if (app && !isTrialApp && type !== TypeEnum.DETAIL)
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setType(TypeEnum.DETAIL)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app, isTrialApp])
+
   return (
     <Modal
       isShow
@@ -45,6 +58,7 @@ const TryApp: FC<Props> = ({
             <Tab
               value={type}
               onChange={setType}
+              disableTry={app ? !isTrialApp : false}
             />
             <Button
               size="large"

web/app/components/explore/try-app/tab.tsx

@@ -12,15 +12,17 @@ export enum TypeEnum {
 type Props = {
   value: TypeEnum
   onChange: (value: TypeEnum) => void
+  disableTry?: boolean
 }
 
 const Tab: FC<Props> = ({
   value,
   onChange,
+  disableTry,
 }) => {
   const { t } = useTranslation()
   const tabs = [
-    { id: TypeEnum.TRY, name: t('tryApp.tabHeader.try', { ns: 'explore' }) },
+    { id: TypeEnum.TRY, name: t('tryApp.tabHeader.try', { ns: 'explore' }), disabled: disableTry },
     { id: TypeEnum.DETAIL, name: t('tryApp.tabHeader.detail', { ns: 'explore' }) },
   ]
   return (

web/i18n/en-US/explore.json

@@ -36,5 +36,5 @@
   "tryApp.requirements": "Requirements",
   "tryApp.tabHeader.detail": "Orchestration Details",
   "tryApp.tabHeader.try": "Try it",
-  "tryApp.tryInfo": "This is a sample app. You can try up to 5 messages. To keep using it, click \"Create form this sample app\" and set it up!"
+  "tryApp.tryInfo": "This is a sample app. You can try up to 5 messages. To keep using it, click \"Create from this sample app\" and set it up!"
 }