119 lines
4.2 KiB
TypeScript
119 lines
4.2 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-04-14 12:28:23
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-04-21 15:46:35
|
|
*/
|
|
|
|
import { useState, forwardRef, useImperativeHandle } from 'react';
|
|
import { Flex, Divider } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import clsx from 'clsx';
|
|
|
|
import RbModal from '@/components/RbModal';
|
|
import type { Subscription } from './index'
|
|
import { billingUnits } from '@/views/Package/constant'
|
|
import { useI18n } from '@/store/locale'
|
|
import { UnitWrapper } from '@/views/Package'
|
|
|
|
export interface SubscriptionDetailModalRef {
|
|
handleOpen: (subscription: Subscription | null) => void;
|
|
}
|
|
|
|
const SubscriptionDetailModal = forwardRef<SubscriptionDetailModalRef>((_props, ref) => {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
const { language } = useI18n()
|
|
const [detail, setDetail] = useState<Subscription | null>(null);
|
|
|
|
const handleOpen = (subscription: Subscription | null) => {
|
|
setOpen(true)
|
|
setDetail(subscription);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
handleOpen,
|
|
}));
|
|
|
|
const getKeyWithLanguage = (key: string) => {
|
|
return (language === 'en' ? `${key}_en` : key) as keyof Subscription['package_plan']
|
|
}
|
|
|
|
return (
|
|
<RbModal
|
|
title={[t('package.packageDetail'), detail?.package_plan?.[getKeyWithLanguage('name')]].filter(item => item).join(' - ')}
|
|
open={open}
|
|
onCancel={handleCancel}
|
|
footer={null}
|
|
>
|
|
{/* Header */}
|
|
<h3 className="rb:text-[18px] rb:font-bold rb:text-[MiSans-Bold]" style={{ color: detail?.package_plan?.theme_color }}>
|
|
{String(detail?.package_plan?.[getKeyWithLanguage('name')] ?? '')}
|
|
</h3>
|
|
|
|
{/* Subtitle */}
|
|
<p className="rb:text-[#5B6167] rb:mb-3">
|
|
{String(detail?.package_plan?.[getKeyWithLanguage('core_value')] ?? '')}
|
|
</p>
|
|
|
|
{/* Price */}
|
|
<div className="rb:h-10">
|
|
{detail?.package_plan?.billing_cycle !== 'permanent_free' && <>
|
|
<span className="rb:text-[#5B6167] rb:inline-block rb:leading-5 rb:pt-3.25 rb:pb-1.75 rb:mr-1">¥</span>
|
|
<span className="rb:text-[28px] rb:text-[MiSans-Bold] rb:font-bold rb:leading-10">{detail?.package_plan?.price}</span>
|
|
</>}
|
|
{detail?.package_plan?.billing_cycle && (
|
|
<span className={clsx({
|
|
'rb:text-[28px] rb:text-[MiSans-Bold] rb:font-bold rb:leading-10': detail?.package_plan?.billing_cycle === 'permanent_free',
|
|
'rb:text-[#5B6167] rb:inline-block rb:leading-5 rb:pt-3.25 rb:pb-1.75 rb:ml-1': detail?.package_plan?.billing_cycle !== 'permanent_free'
|
|
})}>
|
|
{detail?.package_plan?.billing_cycle !== 'permanent_free' && ' /'}
|
|
{t(`package.${detail?.package_plan?.billing_cycle}`)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<Divider className="rb:my-4" />
|
|
|
|
{/* Features */}
|
|
<Flex gap={12} vertical className="rb:space-y-3 rb:mb-4 rb:h-[calc(100vh-341px)]! rb:overflow-y-auto">
|
|
{billingUnits.map(({ key, unit, icon }) => {
|
|
const value = detail?.quotas?.[key as keyof Subscription['quotas']];
|
|
return (
|
|
<UnitWrapper
|
|
key={key}
|
|
titleKey={key}
|
|
value={value}
|
|
unit={unit}
|
|
icon={icon}
|
|
theme_color={detail?.package_plan?.theme_color}
|
|
/>
|
|
)
|
|
})}
|
|
{detail?.package_plan?.tech_support && detail?.package_plan?.[getKeyWithLanguage('tech_support')] && (
|
|
<UnitWrapper
|
|
titleKey="tech_support"
|
|
value={String(detail?.package_plan?.[getKeyWithLanguage('tech_support')] ?? '')}
|
|
icon="technical_support"
|
|
theme_color={detail?.package_plan?.theme_color}
|
|
/>
|
|
)}
|
|
{detail?.package_plan?.sla_compliance && detail?.package_plan?.[getKeyWithLanguage('sla_compliance')] && (
|
|
<UnitWrapper
|
|
titleKey="sla"
|
|
value={String(detail?.package_plan?.[getKeyWithLanguage('sla_compliance')] ?? '')}
|
|
icon="sla"
|
|
theme_color={detail?.package_plan?.theme_color}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</RbModal>
|
|
);
|
|
});
|
|
|
|
export default SubscriptionDetailModal;
|