From 4cfbcd9c79ccc6a7d37b9d07b164daaaad9ec74b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Nov 2024 15:39:00 +0800
Subject: [PATCH] feat: add install

---
 .../plugins/marketplace/list/card-wrapper.tsx | 19 +++++++++++++++++++
 web/app/components/plugins/types.ts           |  1 +
 2 files changed, 20 insertions(+)

diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 27891ff1e6..aff253934e 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -6,6 +6,8 @@ import type { Plugin } from '@/app/components/plugins/types'
 import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Button from '@/app/components/base/button'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import { useBoolean } from 'ahooks'
 
 type CardWrapperProps = {
   plugin: Plugin
@@ -18,6 +20,12 @@ const CardWrapper = ({
   locale,
 }: CardWrapperProps) => {
   const { t } = useMixedTranslation(locale)
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: hideInstallFromMarketplace,
+  }] = useBoolean(false)
+  console.log(plugin)
+
   return (
     <div
       className='group relative rounded-xl cursor-pointer'
@@ -43,6 +51,7 @@ const CardWrapper = ({
             <Button
               variant='primary'
               className='flex-1'
+              onClick={showInstallFromMarketplace}
             >
               {t('plugin.detailPanel.operation.install')}
             </Button>
@@ -57,6 +66,16 @@ const CardWrapper = ({
           </div>
         )
       }
+      {
+        isShowInstallFromMarketplace && (
+          <InstallFromMarketplace
+            manifest={plugin as any}
+            uniqueIdentifier={plugin.latest_package_identifier}
+            onClose={hideInstallFromMarketplace}
+            onSuccess={hideInstallFromMarketplace}
+          />
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts
index 83c3eca39c..7031ec59ca 100644
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@@ -110,6 +110,7 @@ export type Plugin = {
   plugin_id: string
   version: string
   latest_version: string
+  latest_package_identifier: string
   icon: string
   verified: boolean
   label: Record<Locale, string>