Merge branch 'feat/drive-valid' into develop

apps/builder/src/page/App/components/Actions/ActionList/listWithNewButton.tsx

@@ -1,4 +1,4 @@
-import { getIconFromResourceType } from "@illa-public/icon"
+import { UpgradeIcon, getIconFromResourceType } from "@illa-public/icon"
 import {
  ILLA_MIXPANEL_BUILDER_PAGE_NAME,
  ILLA_MIXPANEL_EVENT_TYPE,
@@ -22,6 +22,9 @@ import {
  ActionGenerator,
  ResourceGeneratorProvider,
 } from "@illa-public/resource-generator"
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
 import { isCloudVersion } from "@illa-public/utils"
 import { isEqual } from "lodash-es"
 import { FC, useCallback, useContext, useState } from "react"
@@ -65,9 +68,11 @@ import {
  actionListEmptyStyle,
  addNewActionButtonStyle,
  createDropListItemContainerStyle,
+ dropListWithUpgradeIconStyle,
  listContainerStyle,
  listStyle,
  prefixIconContainerStyle,
+ upgradeContainerStyle,
 } from "./style"
 
 export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
@@ -81,6 +86,8 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
  const [currentActionType, setCurrentActionType] =
  useState<ActionType | null>()
  const actionList = useSelector(getActionMixedList)
+ const teamInfo = useSelector(getCurrentTeamInfo)!
+ const upgradeModal = useUpgradeModal()
 
  const searchList = actionList.filter((value) => {
  return value.displayName
@@ -167,6 +174,13 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
  break
  }
  case "illadrive": {
+ if (!isSubscribeForUseDrive(teamInfo)) {
+ upgradeModal({
+ modalType: "upgrade",
+ from: "drive_action",
+ })
+ return
+ }
  const displayName = DisplayNameGenerator.generateDisplayName(type)
  const initialContent = getInitialContent(type)
  const baseData = generateBaseActionItem(displayName, "")
@@ -302,11 +316,19 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
  key="illaDrive"
  value="illaDrive"
  title={
- <div css={createDropListItemContainerStyle}>
- <span css={prefixIconContainerStyle}>
- {getIconFromResourceType("illadrive", "16px")}
- </span>
- ILLA Drive
+ <div css={dropListWithUpgradeIconStyle}>
+ <div css={createDropListItemContainerStyle}>
+ <span css={prefixIconContainerStyle}>
+ {getIconFromResourceType("illadrive", "16px")}
+ </span>
+ ILLA Drive
+ </div>
+ {!isSubscribeForUseDrive(teamInfo) && (
+ <div css={upgradeContainerStyle}>
+ <UpgradeIcon />
+ <span>{t("Upgrade")}</span>
+ </div>
+ )}
  </div>
  }
  onClick={handleClickActionType("illadrive")}

apps/builder/src/page/App/components/Actions/ActionList/style.ts

@@ -48,3 +48,19 @@ export const prefixIconContainerStyle = css`
  align-items: center;
  justify-content: center;
 `
+
+export const dropListWithUpgradeIconStyle = css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`
+
+export const upgradeContainerStyle = css`
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: ${getColor("techPurple", "03")};
+ font-size: 12px;
+ font-style: normal;
+ line-height: 20px;
+`

apps/builder/src/page/App/components/ComponentPanel/ComponentItem.tsx

@@ -1,4 +1,8 @@
+import { UpgradeIcon } from "@illa-public/icon"
 import { DEFAULT_MOBILE_BODY_COLUMNS_NUMBER } from "@illa-public/public-configs"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
+import { isCloudVersion } from "@illa-public/utils"
 import { FC, memo } from "react"
 import { useDrag } from "react-dnd"
 import { useSelector } from "react-redux"
@@ -16,14 +20,20 @@ import {
  DRAG_EFFECT,
  DragInfo,
 } from "../ScaleSquare/components/DragContainer/interface"
-import { iconStyle, itemContainerStyle, nameStyle } from "./style"
+import {
+ iconStyle,
+ itemContainerStyle,
+ nameStyle,
+ upgradeIconStyle,
+} from "./style"
 
 export const ComponentItem: FC<ComponentItemProps> = memo(
  (props: ComponentItemProps) => {
- const { widgetName, widgetType, icon, displayName } = props
+ const { widgetName, widgetType, icon, displayName, isPremiumWidget } = props
 
  const isEditMode = useSelector(getIsILLAEditMode)
  const isGuideOpen = useSelector(getGuideStatus)
+ const teamInfo = useSelector(getCurrentTeamInfo)!
 
  const [, dragRef] = useDrag<DragInfo, DropResultInfo>(
  () => ({
@@ -81,6 +91,13 @@ export const ComponentItem: FC<ComponentItemProps> = memo(
  css={iconStyle}
  {...(isGuideOpen ? { "data-onboarding-icon": widgetType } : {})}
  >
+ {isPremiumWidget &&
+ isCloudVersion &&
+ !isSubscribeForUseDrive(teamInfo) && (
+ <span css={upgradeIconStyle}>
+ <UpgradeIcon />
+ </span>
+ )}
  {icon}
  </span>
  <span css={nameStyle}>{widgetName}</span>

apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx

@@ -27,6 +27,7 @@ export const ComponentSession = memo((props: ComponentSessionProps) => {
  widgetType={item.widgetType}
  widgetName={item.widgetName}
  displayName={item.displayName}
+ isPremiumWidget={item.isPremiumWidget}
  />
  ))}
  </div>

apps/builder/src/page/App/components/ComponentPanel/componentListBuilder.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/widgetLibrary/widgetBuilder"
 
 export const DEPRECATED_WIDGETS = ["CHART", "TABLE_WIDGET"]
+export const PREMIUM_WIDGETS = ["DRIVE_PICKER_WIDGET"]
 
 export type SessionType = keyof typeof sessionTypeMapSessionNameKey
 
@@ -70,6 +71,7 @@ const translateChildren = (componentConfigs: WidgetConfig[]) => {
  widgetName,
  icon: item.icon,
  displayName,
+ isPremiumWidget: PREMIUM_WIDGETS.includes(type),
  }
  if (COMMONLY_WIDGET.has(type as string)) {
  sessionConfigs.COMMON.push(childrenConfig)

apps/builder/src/page/App/components/ComponentPanel/interface.ts

@@ -12,6 +12,7 @@ export interface WidgetCardInfo {
  widgetName: string
  widgetType: string
  icon: ReactNode
+ isPremiumWidget: boolean
 }
 
 export type ComponentSessionProps = {
@@ -29,4 +30,5 @@ export interface ComponentItemProps {
  displayName: string
  widgetType: string
  icon: ReactNode
+ isPremiumWidget: boolean
 }

apps/builder/src/page/App/components/ComponentPanel/style.tsx

@@ -1,5 +1,5 @@
 import { css } from "@emotion/react"
-import { globalColor, illaPrefix } from "@illa-design/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/react"
 
 export const componentContainerStyle = css`
  border-top: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)};
@@ -70,7 +70,8 @@ export const iconStyle = css`
  color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
  transition: background-color 200ms ease-in-out;
  padding: 8px;
-
+ position: relative;
+ overflow: hidden;
  &:hover {
  background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
  }
@@ -95,3 +96,15 @@ export const emptyContainerStyle = css`
  align-items: center;
  justify-content: center;
 `
+
+export const upgradeIconStyle = css`
+ position: absolute;
+ padding: 2px 8px;
+ top: 0;
+ left: 0;
+ color: ${getColor("techPurple", "03")};
+ background-color: ${getColor("techPurple", "08")};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/components/SourceHeader/index.tsx

@@ -1,3 +1,4 @@
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
 import { FC, useContext } from "react"
 import Folder from "@/assets/drive/panelFolder.svg?react"
 import { DriveFileSelectContext } from "@/components/DriveFileSelect"
@@ -12,13 +13,26 @@ interface SourceHeaderProps {
  labelName?: string
  labelDesc?: string
  showSelect: boolean
+ canUseDrive: boolean
 }
 const SourceHeader: FC<SourceHeaderProps> = ({
  labelName,
  labelDesc,
  showSelect,
+ canUseDrive,
 }) => {
+ const upgradeModal = useUpgradeModal()
  const { setModalVisible } = useContext(DriveFileSelectContext)
+ const handleClickSelect = () => {
+ if (canUseDrive) {
+ setModalVisible(true)
+ } else {
+ upgradeModal({
+ modalType: "upgrade",
+ from: "panel_setter_select",
+ })
+ }
+ }
  return (
  <div css={sourceHeaderContainerStyle}>
  <PanelLabel
@@ -27,12 +41,7 @@ const SourceHeader: FC<SourceHeaderProps> = ({
  labelSize="medium"
  />
  {showSelect && (
- <div
- css={fileSelectContainerStyle}
- onClick={() => {
- setModalVisible(true)
- }}
- >
+ <div css={fileSelectContainerStyle} onClick={handleClickSelect}>
  <span css={folderIconStyle}>
  <Folder />
  </span>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/components/UploadInput/index.tsx

@@ -1,3 +1,4 @@
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
 import { FC, useContext } from "react"
 import { FolderOperateModalContext } from "@/components/FolderOperateModal/context"
 import { FileUploadContext } from "@/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/provider/FileUploadProvider"
@@ -6,18 +7,26 @@ import { uploadContainerStyle, uploadIconStyle, uploadNameStyle } from "./style"
 
 interface UploadModeProps {
  widgetType: string
+ canUseDrive: boolean
 }
-const UploadMode: FC<UploadModeProps> = ({ widgetType }) => {
+const UploadMode: FC<UploadModeProps> = ({ widgetType, canUseDrive }) => {
  const placeholderInfo = getUploadModeInfo(widgetType)
-
+ const upgradeModal = useUpgradeModal()
  const { uploadName, isUpLoading } = useContext(FileUploadContext)
  const { setFolderOperateVisible } = useContext(FolderOperateModalContext)
+ const handleClickUpload = () => {
+ if (canUseDrive) {
+ setFolderOperateVisible(true)
+ } else {
+ upgradeModal({
+ modalType: "upgrade",
+ from: "panel_setter_upload",
+ })
+ }
+ }
 
  return (
- <div
- css={uploadContainerStyle(isUpLoading)}
- onClick={() => setFolderOperateVisible(true)}
- >
+ <div css={uploadContainerStyle(isUpLoading)} onClick={handleClickUpload}>
  <span css={uploadIconStyle}>{placeholderInfo?.icon}</span>
  <span css={uploadNameStyle}>{uploadName || placeholderInfo?.name}</span>
  </div>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/index.tsx

@@ -1,13 +1,18 @@
+import { UpgradeIcon } from "@illa-public/icon"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
 import { get } from "lodash-es"
 import { FC, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { RadioGroup } from "@illa-design/react"
+import { useSelector } from "react-redux"
+import { RadioGroup, getColor } from "@illa-design/react"
 import FilesModal, { ROOT_PATH } from "@/components/DriveFileSelect"
 import FolderOperateModal from "@/components/FolderOperateModal"
 import {
  applyRadioGroupWrapperStyle,
  baseRadioGroupContainerStyle,
  radioGroupStyle,
+ uploadButtonStyle,
 } from "@/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/style"
 import SourceHeader from "./components/SourceHeader"
 import URLModeInput from "./components/URLModeInput"
@@ -31,14 +36,21 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
  } = props
 
  const { t } = useTranslation()
+ const teamInfo = useSelector(getCurrentTeamInfo)!
+ const canUseDrive = isSubscribeForUseDrive(teamInfo)
 
  const options = [
  {
  label: t("widget.public.select_options.url"),
  value: DRIVE_SOURCE_MODE.URL,
  },
  {
- label: t("widget.public.select_options.upload"),
+ label: (
+ <span css={uploadButtonStyle}>
+ {!canUseDrive && <UpgradeIcon color={getColor("techPurple", "03")} />}
+ <span>{t("widget.public.select_options.upload")}</span>
+ </span>
+ ),
  value: DRIVE_SOURCE_MODE.UPLOAD,
  },
  ]
@@ -93,6 +105,7 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
  labelDesc={labelDesc}
  labelName={labelName}
  showSelect={selectMode === DRIVE_SOURCE_MODE.URL}
+ canUseDrive={canUseDrive}
  />
  <div css={applyRadioGroupWrapperStyle(isSetterSingleRow)}>
  <RadioGroup
@@ -115,7 +128,7 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
  />
  )}
  {selectMode === DRIVE_SOURCE_MODE.UPLOAD && (
- <UploadMode widgetType={widgetType} />
+ <UploadMode widgetType={widgetType} canUseDrive={canUseDrive} />
  )}
  </div>
  </div>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/style.ts

@@ -41,3 +41,11 @@ export const baseRadioGroupContainerStyle = (
  width: 100%;
  `
 }
+
+export const uploadButtonStyle = css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ gap: 4px;
+`

apps/builder/src/utils/action/premiumActionHandler.ts

@@ -0,0 +1,28 @@
+import { ActionType } from "@illa-public/public-types"
+import { createUpgradeModal } from "@illa-public/upgrade-modal"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
+import { isCloudVersion } from "@illa-public/utils"
+import { getIsILLAProductMode } from "@/redux/config/configSelector"
+import store from "@/store"
+
+export const PREMIUM_ACTIONS = ["illadrive"]
+
+export const isNeedPreventForPremium = (actionType: ActionType): boolean => {
+ const isProductionMode = getIsILLAProductMode(store.getState())
+ if (isProductionMode) {
+ return false
+ }
+ if (isCloudVersion && PREMIUM_ACTIONS.includes(actionType)) {
+ const teamInfo = getCurrentTeamInfo(store.getState())!
+ const upgradeModal = createUpgradeModal()
+ if (!isSubscribeForUseDrive(teamInfo)) {
+ upgradeModal({
+ modalType: "upgrade",
+ from: "drive_run_action",
+ })
+ return true
+ }
+ }
+ return false
+}