chore: Advance the timing of the dataset payment prompt (#29497)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/billing/plan-upgrade-modal/index.spec.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import PlanUpgradeModal from './index'
+
+const mockSetShowPricingModal = jest.fn()
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+jest.mock('@/app/components/base/modal', () => {
+  const MockModal = ({ isShow, children }: { isShow: boolean; children: React.ReactNode }) => (
+    isShow ? <div data-testid="plan-upgrade-modal">{children}</div> : null
+  )
+  return {
+    __esModule: true,
+    default: MockModal,
+  }
+})
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+}))
+
+const baseProps = {
+  title: 'Upgrade Required',
+  description: 'You need to upgrade your plan.',
+  show: true,
+  onClose: jest.fn(),
+}
+
+const renderComponent = (props: Partial<React.ComponentProps<typeof PlanUpgradeModal>> = {}) => {
+  const mergedProps = { ...baseProps, ...props }
+  return render(<PlanUpgradeModal {...mergedProps} />)
+}
+
+describe('PlanUpgradeModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering and props-driven content
+  it('should render modal with provided content when visible', () => {
+    // Arrange
+    const extraInfoText = 'Additional upgrade details'
+    renderComponent({
+      extraInfo: <div>{extraInfoText}</div>,
+    })
+
+    // Assert
+    expect(screen.getByText(baseProps.title)).toBeInTheDocument()
+    expect(screen.getByText(baseProps.description)).toBeInTheDocument()
+    expect(screen.getByText(extraInfoText)).toBeInTheDocument()
+    expect(screen.getByText('billing.triggerLimitModal.dismiss')).toBeInTheDocument()
+    expect(screen.getByText('billing.triggerLimitModal.upgrade')).toBeInTheDocument()
+  })
+
+  // Guard against rendering when modal is hidden
+  it('should not render content when show is false', () => {
+    // Act
+    renderComponent({ show: false })
+
+    // Assert
+    expect(screen.queryByText(baseProps.title)).not.toBeInTheDocument()
+    expect(screen.queryByText(baseProps.description)).not.toBeInTheDocument()
+  })
+
+  // User closes the modal from dismiss button
+  it('should call onClose when dismiss button is clicked', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    const onClose = jest.fn()
+    renderComponent({ onClose })
+
+    // Act
+    await user.click(screen.getByText('billing.triggerLimitModal.dismiss'))
+
+    // Assert
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  // Upgrade path uses provided callback over pricing modal
+  it('should call onUpgrade and onClose when upgrade button is clicked with onUpgrade provided', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    const onClose = jest.fn()
+    const onUpgrade = jest.fn()
+    renderComponent({ onClose, onUpgrade })
+
+    // Act
+    await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
+
+    // Assert
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(onUpgrade).toHaveBeenCalledTimes(1)
+    expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+  })
+
+  // Fallback upgrade path opens pricing modal when no onUpgrade is supplied
+  it('should open pricing modal when upgrade button is clicked without onUpgrade', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    const onClose = jest.fn()
+    renderComponent({ onClose, onUpgrade: undefined })
+
+    // Act
+    await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
+
+    // Assert
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+})

web/app/components/billing/plan-upgrade-modal/index.tsx

@@ -0,0 +1,87 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import styles from './style.module.css'
+import { SquareChecklist } from '../../base/icons/src/vender/other'
+import { useModalContext } from '@/context/modal-context'
+
+type Props = {
+  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  title: string
+  description: string
+  extraInfo?: React.ReactNode
+  show: boolean
+  onClose: () => void
+  onUpgrade?: () => void
+}
+
+const PlanUpgradeModal: FC<Props> = ({
+  Icon = SquareChecklist,
+  title,
+  description,
+  extraInfo,
+  show,
+  onClose,
+  onUpgrade,
+}) => {
+  const { t } = useTranslation()
+  const { setShowPricingModal } = useModalContext()
+
+  const handleUpgrade = useCallback(() => {
+    onClose()
+    onUpgrade ? onUpgrade() : setShowPricingModal()
+  }, [onClose, onUpgrade, setShowPricingModal])
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onClose}
+      closable={false}
+      clickOutsideNotClose
+      className={`${styles.surface} w-[580px] rounded-2xl !p-0`}
+    >
+      <div className='relative'>
+        <div
+          aria-hidden
+          className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
+        />
+        <div className='px-8 pt-8'>
+          <div className={`${styles.icon} flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]`}>
+            <Icon className='size-6 text-text-primary-on-surface' />
+          </div>
+          <div className='mt-6 space-y-2'>
+            <div className={`${styles.highlight} title-3xl-semi-bold`}>
+              {title}
+            </div>
+            <div className='system-md-regular text-text-tertiary'>
+              {description}
+            </div>
+          </div>
+          {extraInfo}
+        </div>
+      </div>
+
+      <div className='mb-8 mt-10 flex justify-end space-x-2 px-8'>
+        <Button
+          onClick={onClose}
+        >
+          {t('billing.triggerLimitModal.dismiss')}
+        </Button>
+        <UpgradeBtn
+          size='custom'
+          isShort
+          onClick={handleUpgrade}
+          className='!h-8 !rounded-lg px-2'
+          labelKey='billing.triggerLimitModal.upgrade'
+          loc='trigger-events-limit-modal'
+        />
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(PlanUpgradeModal)

web/app/components/billing/plan-upgrade-modal/style.module.css

@@ -19,7 +19,6 @@
   background:
     linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
     var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
-  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
 }
 
 .highlight {

web/app/components/billing/trigger-events-limit-modal/index.tsx

@@ -2,27 +2,22 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
 import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import UsageInfo from '@/app/components/billing/usage-info'
-import UpgradeBtn from '@/app/components/billing/upgrade-btn'
-import type { Plan } from '@/app/components/billing/type'
-import styles from './index.module.css'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 
 type Props = {
   show: boolean
-  onDismiss: () => void
+  onClose: () => void
   onUpgrade: () => void
   usage: number
   total: number
   resetInDays?: number
-  planType: Plan
 }
 
 const TriggerEventsLimitModal: FC<Props> = ({
   show,
-  onDismiss,
+  onClose,
   onUpgrade,
   usage,
   total,
@@ -31,59 +26,25 @@ const TriggerEventsLimitModal: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow={show}
-      onClose={onDismiss}
-      closable={false}
-      clickOutsideNotClose
-      className={`${styles.surface} flex h-[360px] w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
-    >
-      <div className='relative flex w-full flex-1 items-stretch justify-center'>
-        <div
-          aria-hidden
-          className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
+    <PlanUpgradeModal
+      show={show}
+      onClose={onClose}
+      onUpgrade={onUpgrade}
+      Icon={TriggerAll as React.ComponentType<React.SVGProps<SVGSVGElement>>}
+      title={t('billing.triggerLimitModal.title')}
+      description={t('billing.triggerLimitModal.description')}
+      extraInfo={(
+        <UsageInfo
+          className='mt-4 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
+          Icon={TriggerAll}
+          name={t('billing.triggerLimitModal.usageTitle')}
+          usage={usage}
+          total={total}
+          resetInDays={resetInDays}
+          hideIcon
         />
-        <div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
-          <div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
-            <TriggerAll className='h-5 w-5 text-text-primary-on-surface' />
-          </div>
-          <div className='flex flex-col items-start gap-2'>
-            <div className={`${styles.highlight} title-lg-semi-bold`}>
-              {t('billing.triggerLimitModal.title')}
-            </div>
-            <div className='body-md-regular text-text-secondary'>
-              {t('billing.triggerLimitModal.description')}
-            </div>
-          </div>
-          <UsageInfo
-            className='mb-5 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
-            Icon={TriggerAll}
-            name={t('billing.triggerLimitModal.usageTitle')}
-            usage={usage}
-            total={total}
-            resetInDays={resetInDays}
-            hideIcon
-          />
-        </div>
-      </div>
-
-      <div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
-        <Button
-          className='h-8 w-[77px] min-w-[72px] !rounded-lg !border-[0.5px] px-3 py-2'
-          onClick={onDismiss}
-        >
-          {t('billing.triggerLimitModal.dismiss')}
-        </Button>
-        <UpgradeBtn
-          isShort
-          onClick={onUpgrade}
-          className='flex w-[93px] items-center justify-center !rounded-lg !px-2'
-          style={{ height: 32 }}
-          labelKey='billing.triggerLimitModal.upgrade'
-          loc='trigger-events-limit-modal'
-        />
-      </div>
-    </Modal>
+      )}
+    />
   )
 }
 

web/app/components/billing/upgrade-btn/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   className?: string
   style?: CSSProperties
   isFull?: boolean
-  size?: 'md' | 'lg'
+  size?: 's' | 'm' | 'custom'
   isPlain?: boolean
   isShort?: boolean
   onClick?: () => void
@@ -21,6 +21,7 @@ type Props = {
 
 const UpgradeBtn: FC<Props> = ({
   className,
+  size = 'm',
   style,
   isPlain = false,
   isShort = false,
@@ -62,7 +63,7 @@ const UpgradeBtn: FC<Props> = ({
 
   return (
     <PremiumBadge
-      size='m'
+      size={size}
       color='blue'
       allowHover={true}
       onClick={onClick}