refactor: replace Modal with PlanUpgradeModal in TriggerEventsLimitModal

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

@@ -1,29 +0,0 @@
-.surface {
-  border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
-  background:
-    linear-gradient(109deg, var(--color-background-section, #f9fafb) 0%, var(--color-background-section-burn, #f2f4f7) 100%),
-    var(--color-components-panel-bg, #fff);
-}
-
-.heroOverlay {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
-  background-size: 54px 54px;
-  background-position: 31px -23px;
-  background-repeat: repeat;
-  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
-  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
-}
-
-.icon {
-  border: 0.5px solid transparent;
-  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);
-}
-
-.highlight {
-  background: linear-gradient(97deg, var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%, var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}

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

@@ -2,12 +2,9 @@
 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 styles from './index.module.css'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 
 type Props = {
   show: boolean
@@ -29,57 +26,25 @@ const TriggerEventsLimitModal: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow={show}
+    <PlanUpgradeModal
+      show={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`}
+      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='px-8 pt-8'>
-          <div className={`${styles.icon} flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]`}>
-            <TriggerAll className='size-6 text-text-primary-on-surface' />
-          </div>
-          <div className='mt-6 space-y-2'>
-            <div className={`${styles.highlight} title-3xl-semi-bold`}>
-              {t('billing.triggerLimitModal.title')}
-            </div>
-            <div className='system-md-regular text-text-tertiary'>
-              {t('billing.triggerLimitModal.description')}
-            </div>
-          </div>
-          <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>
-      </div>
-
-      <div className='mb-8 mt-10 flex justify-end space-x-2 px-8'>
-        <Button
-          onClick={onClose}
-        >
-          {t('billing.triggerLimitModal.dismiss')}
-        </Button>
-        <UpgradeBtn
-          isShort
-          onClick={onUpgrade}
-          className='!h-8 !rounded-lg'
-          labelKey='billing.triggerLimitModal.upgrade'
-          loc='trigger-events-limit-modal'
-        />
-      </div>
-    </Modal>
+      )}
+    />
   )
 }