feat: custom webapp logo (#1766)

2023-12-18 16:25:37 +08:00
parent 65fd4b39ce
commit 5bb841935e
40 changed files with 888 additions and 24 deletions
--- a/web/app/components/custom/custom-app-header-brand/index.tsx
+++ b/web/app/components/custom/custom-app-header-brand/index.tsx
@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import Button from '@/app/components/base/button'
+import { Grid01 } from '@/app/components/base/icons/src/vender/solid/layout'
+import { Container, Database01 } from '@/app/components/base/icons/src/vender/line/development'
+import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+
+const CustomAppHeaderBrand = () => {
+  const { t } = useTranslation()
+  const { plan } = useProviderContext()
+
+  return (
+    <div className='py-3'>
+      <div className='mb-2 text-sm font-medium text-gray-900'>{t('custom.app.title')}</div>
+      <div className='relative mb-4 rounded-xl bg-gray-100 border-[0.5px] border-black/[0.08] shadow-xs'>
+        <div className={`${s.mask} absolute inset-0 rounded-xl`}></div>
+        <div className='flex items-center pl-5 h-14 rounded-t-xl'>
+          <div className='relative flex items-center mr-[199px] w-[120px] h-10 bg-[rgba(217,45,32,0.12)]'>
+            <div className='ml-[1px] mr-[3px] w-[34px] h-[34px] border-8 border-black/[0.16] rounded-full'></div>
+            <div className='text-[13px] font-bold text-black/[0.24]'>YOUR LOGO</div>
+            <div className='absolute top-0 bottom-0 left-0.5 w-[0.5px] bg-[#F97066] opacity-50'></div>
+            <div className='absolute top-0 bottom-0 right-0.5 w-[0.5px] bg-[#F97066] opacity-50'></div>
+            <div className='absolute left-0 right-0 top-0.5 h-[0.5px] bg-[#F97066] opacity-50'></div>
+            <div className='absolute left-0 right-0 bottom-0.5 h-[0.5px] bg-[#F97066] opacity-50'></div>
+          </div>
+          <div className='flex items-center mr-3 px-3 h-7 rounded-xl bg-white shadow-xs'>
+            <Grid01 className='shrink-0 mr-2 w-4 h-4 text-[#155eef]' />
+            <div className='w-12 h-1.5 rounded-[5px] bg-[#155eef] opacity-80'></div>
+          </div>
+          <div className='flex items-center mr-3 px-3 h-7'>
+            <Container className='shrink-0 mr-2 w-4 h-4 text-gray-500' />
+            <div className='w-[50px] h-1.5 rounded-[5px] bg-gray-300'></div>
+          </div>
+          <div className='flex items-center px-3 h-7'>
+            <Database01 className='shrink-0 mr-2 w-4 h-4 text-gray-500' />
+            <div className='w-14 h-1.5 rounded-[5px] bg-gray-300 opacity-80'></div>
+          </div>
+        </div>
+        <div className='h-8 border-t border-t-gray-200 rounded-b-xl'></div>
+      </div>
+      <div className='flex items-center mb-2'>
+        <Button
+          className={`
+            !h-8 !px-3 bg-white !text-[13px] 
+            ${plan.type === Plan.sandbox ? 'opacity-40' : ''}
+          `}
+          disabled={plan.type === Plan.sandbox}
+        >
+          <ImagePlus className='mr-2 w-4 h-4' />
+          {t('custom.upload')}
+        </Button>
+        <div className='mx-2 h-5 w-[1px] bg-black/5'></div>
+        <Button
+          className={`
+            !h-8 !px-3 bg-white !text-[13px] 
+            ${plan.type === Plan.sandbox ? 'opacity-40' : ''}
+          `}
+          disabled={plan.type === Plan.sandbox}
+        >
+          {t('custom.restore')}
+        </Button>
+      </div>
+      <div className='text-xs text-gray-500'>{t('custom.app.changeLogoTip')}</div>
+    </div>
+  )
+}
+
+export default CustomAppHeaderBrand
--- a/web/app/components/custom/custom-app-header-brand/style.module.css
+++ b/web/app/components/custom/custom-app-header-brand/style.module.css
@@ -0,0 +1,3 @@
+.mask {
+  background: linear-gradient(95deg, rgba(255, 255, 255, 0.00) 43.9%, rgba(255, 255, 255, 0.80) 95.76%);  ;
+}
--- a/web/app/components/custom/custom-page/index.tsx
+++ b/web/app/components/custom/custom-page/index.tsx
@@ -0,0 +1,52 @@
+import { useTranslation } from 'react-i18next'
+import CustomWebAppBrand from '../custom-web-app-brand'
+import CustomAppHeaderBrand from '../custom-app-header-brand'
+import s from '../style.module.css'
+import GridMask from '@/app/components/base/grid-mask'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import { contactSalesUrl } from '@/app/components/billing/config'
+
+const CustomPage = () => {
+  const { t } = useTranslation()
+  const { plan } = useProviderContext()
+
+  return (
+    <div className='flex flex-col'>
+      {
+        plan.type === Plan.sandbox && (
+          <GridMask canvasClassName='!rounded-xl'>
+            <div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
+              <div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
+                <div>{t('custom.upgradeTip.prefix')}</div>
+                <div>{t('custom.upgradeTip.suffix')}</div>
+              </div>
+              <UpgradeBtn />
+            </div>
+          </GridMask>
+        )
+      }
+      <CustomWebAppBrand />
+      {
+        plan.type === Plan.sandbox && (
+          <>
+            <div className='my-2 h-[0.5px] bg-gray-100'></div>
+            <CustomAppHeaderBrand />
+          </>
+        )
+      }
+      {
+        (plan.type === Plan.professional || plan.type === Plan.team) && (
+          <div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
+            {t('custom.customize.prefix')}
+            <a className='text-[#155EEF]' href={contactSalesUrl} target='_blank'>{t('custom.customize.contactUs')}</a>
+            {t('custom.customize.suffix')}
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default CustomPage
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -0,0 +1,234 @@
+import type { ChangeEvent } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import LogoSite from '@/app/components/base/logo/logo-site'
+import Switch from '@/app/components/base/switch'
+import Button from '@/app/components/base/button'
+import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
+import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'
+import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import { imageUpload } from '@/app/components/base/image-uploader/utils'
+import type {} from '@/app/components/base/image-uploader/utils'
+import { useToastContext } from '@/app/components/base/toast'
+import {
+  updateCurrentWorkspace,
+} from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { API_PREFIX } from '@/config'
+
+const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
+
+const CustomWebAppBrand = () => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { plan } = useProviderContext()
+  const {
+    currentWorkspace,
+    mutateCurrentWorkspace,
+    isCurrentWorkspaceManager,
+  } = useAppContext()
+  const [fileId, setFileId] = useState('')
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const isSandbox = plan.type === Plan.sandbox
+  const uploading = uploadProgress > 0 && uploadProgress < 100
+  const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
+  const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+
+    if (!file)
+      return
+
+    if (file.size > 5 * 1024 * 1024) {
+      notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerLimit', { size: 5 }) })
+      return
+    }
+
+    imageUpload({
+      file,
+      onProgressCallback: (progress) => {
+        setUploadProgress(progress)
+      },
+      onSuccessCallback: (res) => {
+        setUploadProgress(100)
+        setFileId(res.id)
+      },
+      onErrorCallback: () => {
+        notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
+        setUploadProgress(-1)
+      },
+    }, false, '/workspaces/custom-config/webapp-logo/upload')
+  }
+
+  const handleApply = async () => {
+    await updateCurrentWorkspace({
+      url: '/workspaces/custom-config',
+      body: {
+        remove_webapp_brand: webappBrandRemoved,
+        replace_webapp_logo: fileId,
+      },
+    })
+    mutateCurrentWorkspace()
+    setFileId('')
+  }
+
+  const handleRestore = async () => {
+    await updateCurrentWorkspace({
+      url: '/workspaces/custom-config',
+      body: {
+        remove_webapp_brand: false,
+        replace_webapp_logo: null,
+      },
+    })
+    mutateCurrentWorkspace()
+  }
+
+  const handleSwitch = async (checked: boolean) => {
+    await updateCurrentWorkspace({
+      url: '/workspaces/custom-config',
+      body: {
+        remove_webapp_brand: checked,
+        replace_webapp_logo: webappLogo,
+      },
+    })
+    mutateCurrentWorkspace()
+  }
+
+  const handleCancel = () => {
+    setFileId('')
+    setUploadProgress(0)
+  }
+
+  return (
+    <div className='py-4'>
+      <div className='mb-2 text-sm font-medium text-gray-900'>{t('custom.webapp.title')}</div>
+      <div className='relative mb-4 pl-4 pb-6 pr-[119px] rounded-xl border-[0.5px] border-black/[0.08] shadow-xs bg-gray-50 overflow-hidden'>
+        <div className={`${s.mask} absolute top-0 left-0 w-full -bottom-2 z-10`}></div>
+        <div className='flex items-center -mt-2 mb-4 p-6 bg-white rounded-xl'>
+          <div className='flex items-center px-4 w-[125px] h-9 rounded-lg bg-primary-600 border-[0.5px] border-primary-700 shadow-xs'>
+            <MessageDotsCircle className='shrink-0 mr-2 w-4 h-4 text-white' />
+            <div className='grow h-2 rounded-sm bg-white opacity-50' />
+          </div>
+        </div>
+        <div className='flex items-center h-5 justify-between'>
+          <div className='w-[369px] h-1.5 rounded-sm bg-gray-200 opacity-80' />
+          {
+            !webappBrandRemoved && (
+              <div className='flex items-center text-[10px] font-medium text-gray-400'>
+                POWERED BY
+                {
+                  webappLogo
+                    ? <img key={webappLogo} src={`${API_PREFIX.slice(0, -12)}/files/workspaces/${currentWorkspace.id}/webapp-logo`} alt='logo' className='ml-2 block w-auto h-5' />
+                    : <LogoSite className='ml-2 !h-5' />
+                }
+              </div>
+            )
+          }
+        </div>
+      </div>
+      <div className='flex items-center justify-between mb-2 px-4 h-14 rounded-xl border-[0.5px] border-gray-200 bg-gray-50 text-sm font-medium text-gray-900'>
+        {t('custom.webapp.removeBrand')}
+        <Switch
+          size='l'
+          defaultValue={webappBrandRemoved}
+          disabled={isSandbox || !isCurrentWorkspaceManager}
+          onChange={handleSwitch}
+        />
+      </div>
+      <div className={`
+        flex items-center justify-between px-4 py-3 rounded-xl border-[0.5px] border-gray-200 bg-gray-50
+        ${webappBrandRemoved && 'opacity-30'}
+      `}>
+        <div>
+          <div className='leading-5 text-sm font-medium text-gray-900'>{t('custom.webapp.changeLogo')}</div>
+          <div className='leading-[18px] text-xs text-gray-500'>{t('custom.webapp.changeLogoTip')}</div>
+        </div>
+        <div className='flex items-center'>
+          {
+            !uploading && (
+              <Button
+                className={`
+                  relative mr-2 !h-8 !px-3 bg-white !text-[13px] 
+                  ${isSandbox ? 'opacity-40' : ''}
+                `}
+                disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
+              >
+                <ImagePlus className='mr-2 w-4 h-4' />
+                {
+                  (webappLogo || fileId)
+                    ? t('custom.change')
+                    : t('custom.upload')
+                }
+                <input
+                  className={`
+                    absolute block inset-0 opacity-0 text-[0] w-full
+                    ${(isSandbox || webappBrandRemoved) ? 'cursor-not-allowed' : 'cursor-pointer'}
+                  `}
+                  onClick={e => (e.target as HTMLInputElement).value = ''}
+                  type='file'
+                  accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
+                  onChange={handleChange}
+                  disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
+                />
+              </Button>
+            )
+          }
+          {
+            uploading && (
+              <Button
+                className='relative mr-2 !h-8 !px-3 bg-white !text-[13px] opacity-40'
+                disabled={true}
+              >
+                <Loading02 className='animate-spin mr-2 w-4 h-4' />
+                {t('custom.uploading')}
+              </Button>
+            )
+          }
+          {
+            fileId && (
+              <>
+                <Button
+                  type='primary'
+                  className='mr-2 !h-8 !px-3 !py-0 !text-[13px]'
+                  onClick={handleApply}
+                  disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
+                >
+                  {t('custom.apply')}
+                </Button>
+                <Button
+                  className='mr-2 !h-8 !px-3 !text-[13px] bg-white'
+                  onClick={handleCancel}
+                  disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
+                >
+                  {t('common.operation.cancel')}
+                </Button>
+              </>
+            )
+          }
+          <div className='mr-2 h-5 w-[1px] bg-black/5'></div>
+          <Button
+            className={`
+              !h-8 !px-3 bg-white !text-[13px] 
+              ${isSandbox ? 'opacity-40' : ''}
+            `}
+            disabled={isSandbox || (!webappLogo && !webappBrandRemoved) || webappBrandRemoved || !isCurrentWorkspaceManager}
+            onClick={handleRestore}
+          >
+            {t('custom.restore')}
+          </Button>
+        </div>
+      </div>
+      {
+        uploadProgress === -1 && (
+          <div className='mt-2 text-xs text-[#D92D20]'>{t('custom.uploadedFail')}</div>
+        )
+      }
+    </div>
+  )
+}
+
+export default CustomWebAppBrand
--- a/web/app/components/custom/custom-web-app-brand/style.module.css
+++ b/web/app/components/custom/custom-web-app-brand/style.module.css
@@ -0,0 +1,3 @@
+.mask {
+  background: linear-gradient(273deg, rgba(255, 255, 255, 0.00) 51.75%, rgba(255, 255, 255, 0.80) 115.32%);
+}
--- a/web/app/components/custom/style.module.css
+++ b/web/app/components/custom/style.module.css
@@ -0,0 +1,6 @@
+.textGradient {
+  background: linear-gradient(92deg, #2250F2 -29.55%, #0EBCF3 75.22%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}