464 lines
15 KiB
TypeScript
464 lines
15 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
|
|
import {
|
|
evt_billing_pause_plan,
|
|
evt_billing_resume_plan,
|
|
evt_billing_add_more_seats,
|
|
} from '@/shared/worklenz-analytics-events';
|
|
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
|
import logger from '@/utils/errorLogger';
|
|
import {
|
|
Button,
|
|
Card,
|
|
Flex,
|
|
Modal,
|
|
Space,
|
|
Tooltip,
|
|
Typography,
|
|
Statistic,
|
|
Select,
|
|
Form,
|
|
Row,
|
|
Col,
|
|
} from 'antd/es';
|
|
import RedeemCodeDrawer from '../drawers/redeem-code-drawer/redeem-code-drawer';
|
|
import {
|
|
fetchBillingInfo,
|
|
toggleRedeemCodeDrawer,
|
|
toggleUpgradeModal,
|
|
} from '@/features/admin-center/admin-center.slice';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { WarningTwoTone, PlusOutlined } from '@ant-design/icons';
|
|
import { calculateTimeGap } from '@/utils/calculate-time-gap';
|
|
import { formatDate } from '@/utils/timeUtils';
|
|
import UpgradePlansLKR from '../drawers/upgrade-plans-lkr/upgrade-plans-lkr';
|
|
import UpgradePlans from '../drawers/upgrade-plans/upgrade-plans';
|
|
import { ISUBSCRIPTION_TYPE, SUBSCRIPTION_STATUS } from '@/shared/constants';
|
|
import { billingApiService } from '@/api/admin-center/billing.api.service';
|
|
|
|
const CurrentPlanDetails = () => {
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation('admin-center/current-bill');
|
|
const { trackMixpanelEvent } = useMixpanelTracking();
|
|
|
|
const [pausingPlan, setPausingPlan] = useState(false);
|
|
const [cancellingPlan, setCancellingPlan] = useState(false);
|
|
const [addingSeats, setAddingSeats] = useState(false);
|
|
const [isMoreSeatsModalVisible, setIsMoreSeatsModalVisible] = useState(false);
|
|
const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(5);
|
|
|
|
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
|
const { loadingBillingInfo, billingInfo, freePlanSettings, isUpgradeModalOpen } = useAppSelector(
|
|
state => state.adminCenterReducer
|
|
);
|
|
|
|
const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
type SeatOption = { label: string; value: number | string };
|
|
const seatCountOptions: SeatOption[] = [
|
|
1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
|
|
].map(value => ({ label: value.toString(), value }));
|
|
seatCountOptions.push({ label: '100+', value: '100+' });
|
|
|
|
const handleSubscriptionAction = async (action: 'pause' | 'resume') => {
|
|
const isResume = action === 'resume';
|
|
const setLoadingState = isResume ? setCancellingPlan : setPausingPlan;
|
|
const apiMethod = isResume
|
|
? adminCenterApiService.resumeSubscription
|
|
: adminCenterApiService.pauseSubscription;
|
|
const eventType = isResume ? evt_billing_resume_plan : evt_billing_pause_plan;
|
|
|
|
try {
|
|
setLoadingState(true);
|
|
const res = await apiMethod();
|
|
if (res.done) {
|
|
setTimeout(() => {
|
|
setLoadingState(false);
|
|
dispatch(fetchBillingInfo());
|
|
trackMixpanelEvent(eventType);
|
|
}, 8000);
|
|
return; // Exit function to prevent finally block from executing
|
|
}
|
|
} catch (error) {
|
|
logger.error(`Error ${action}ing subscription`, error);
|
|
setLoadingState(false); // Only set to false on error
|
|
}
|
|
};
|
|
|
|
const handleAddMoreSeats = () => {
|
|
setIsMoreSeatsModalVisible(true);
|
|
};
|
|
|
|
const handlePurchaseMoreSeats = async () => {
|
|
if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
|
|
|
|
try {
|
|
setAddingSeats(true);
|
|
const totalSeats = Number(selectedSeatCount) + (billingInfo?.total_seats || 0);
|
|
const res = await billingApiService.purchaseMoreSeats(totalSeats);
|
|
if (res.done) {
|
|
setIsMoreSeatsModalVisible(false);
|
|
dispatch(fetchBillingInfo());
|
|
trackMixpanelEvent(evt_billing_add_more_seats);
|
|
}
|
|
} catch (error) {
|
|
logger.error('Error adding more seats', error);
|
|
} finally {
|
|
setAddingSeats(false);
|
|
}
|
|
};
|
|
|
|
const calculateRemainingSeats = () => {
|
|
if (billingInfo?.total_seats && billingInfo?.total_used) {
|
|
return billingInfo.total_seats - billingInfo.total_used;
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
const checkSubscriptionStatus = (allowedStatuses: any[]) => {
|
|
if (!billingInfo?.status || billingInfo.is_ltd_user) return false;
|
|
return allowedStatuses.includes(billingInfo.status);
|
|
};
|
|
|
|
const shouldShowRedeemButton = () => {
|
|
if (billingInfo?.trial_in_progress) return true;
|
|
return billingInfo?.ltd_users ? billingInfo.ltd_users < 50 : false;
|
|
};
|
|
|
|
const showChangeButton = () => {
|
|
return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
|
|
};
|
|
|
|
const showPausePlanButton = () => {
|
|
return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
|
|
};
|
|
|
|
const showResumePlanButton = () => {
|
|
return checkSubscriptionStatus([SUBSCRIPTION_STATUS.PAUSED]);
|
|
};
|
|
|
|
const shouldShowAddSeats = () => {
|
|
if (!billingInfo) return false;
|
|
return (
|
|
billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
|
|
billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
|
|
);
|
|
};
|
|
|
|
const renderExtra = () => {
|
|
if (!billingInfo || billingInfo.is_custom) return null;
|
|
|
|
return (
|
|
<Space>
|
|
{showPausePlanButton() && (
|
|
<Button
|
|
type="link"
|
|
danger
|
|
loading={pausingPlan}
|
|
onClick={() => handleSubscriptionAction('pause')}
|
|
>
|
|
{t('pausePlan')}
|
|
</Button>
|
|
)}
|
|
|
|
{showResumePlanButton() && (
|
|
<Button
|
|
type="primary"
|
|
loading={cancellingPlan}
|
|
onClick={() => handleSubscriptionAction('resume')}
|
|
>
|
|
{t('resumePlan')}
|
|
</Button>
|
|
)}
|
|
|
|
{billingInfo.trial_in_progress && (
|
|
<Button type="primary" onClick={() => dispatch(toggleUpgradeModal())}>
|
|
{t('upgradePlan')}
|
|
</Button>
|
|
)}
|
|
|
|
{showChangeButton() && (
|
|
<Button
|
|
type="primary"
|
|
loading={pausingPlan || cancellingPlan}
|
|
onClick={() => dispatch(toggleUpgradeModal())}
|
|
>
|
|
{t('changePlan')}
|
|
</Button>
|
|
)}
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
const renderLtdDetails = () => {
|
|
if (!billingInfo || billingInfo.is_custom) return null;
|
|
return (
|
|
<Flex vertical>
|
|
<Typography.Text strong>{billingInfo.plan_name}</Typography.Text>
|
|
<Typography.Text>{t('ltdUsers', { ltd_users: billingInfo.ltd_users })}</Typography.Text>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const renderTrialDetails = () => {
|
|
const checkIfTrialExpired = () => {
|
|
if (!billingInfo?.trial_expire_date) return false;
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0); // Set to start of day for comparison
|
|
const trialExpireDate = new Date(billingInfo.trial_expire_date);
|
|
trialExpireDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
|
|
return today > trialExpireDate;
|
|
};
|
|
|
|
const getExpirationMessage = (expireDate: string) => {
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0); // Set to start of day for comparison
|
|
|
|
const tomorrow = new Date(today);
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
|
|
const expDate = new Date(expireDate);
|
|
expDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
|
|
|
|
if (expDate.getTime() === today.getTime()) {
|
|
return t('expirestoday', 'today');
|
|
} else if (expDate.getTime() === tomorrow.getTime()) {
|
|
return t('expirestomorrow', 'tomorrow');
|
|
} else if (expDate < today) {
|
|
const diffTime = Math.abs(today.getTime() - expDate.getTime());
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
|
|
} else {
|
|
return calculateTimeGap(expireDate);
|
|
}
|
|
};
|
|
|
|
const isExpired = checkIfTrialExpired();
|
|
const trialExpireDate = billingInfo?.trial_expire_date || '';
|
|
|
|
return (
|
|
<Flex vertical>
|
|
<Typography.Text strong>
|
|
{t('trialPlan')}
|
|
{isExpired && <WarningTwoTone twoToneColor="#faad14" style={{ marginLeft: 8 }} />}
|
|
</Typography.Text>
|
|
<Tooltip title={formatDate(new Date(trialExpireDate))}>
|
|
<Typography.Text>
|
|
{isExpired
|
|
? t('trialExpired', {
|
|
trial_expire_string: getExpirationMessage(trialExpireDate),
|
|
})
|
|
: t('trialInProgress', {
|
|
trial_expire_string: getExpirationMessage(trialExpireDate),
|
|
})}
|
|
</Typography.Text>
|
|
</Tooltip>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const renderFreePlan = () => (
|
|
<Flex vertical>
|
|
<Typography.Text strong>{t('freePlan')}</Typography.Text>
|
|
<Typography.Text>
|
|
<br />-{' '}
|
|
{freePlanSettings?.team_member_limit === 0
|
|
? t('unlimitedTeamMembers')
|
|
: `${freePlanSettings?.team_member_limit} ${t('teamMembers')}`}
|
|
<br />- {freePlanSettings?.projects_limit} {t('projects')}
|
|
<br />- {freePlanSettings?.free_tier_storage} MB {t('storage')}
|
|
</Typography.Text>
|
|
</Flex>
|
|
);
|
|
|
|
const renderPaddleSubscriptionInfo = () => {
|
|
return (
|
|
<Flex vertical>
|
|
<Typography.Text strong>{billingInfo?.plan_name}</Typography.Text>
|
|
<Flex>
|
|
<Typography.Text>{billingInfo?.default_currency}</Typography.Text>
|
|
<Typography.Text>
|
|
{billingInfo?.billing_type === 'year'
|
|
? billingInfo.unit_price_per_month
|
|
: billingInfo?.unit_price}
|
|
{t('perMonthPerUser')}
|
|
</Typography.Text>
|
|
</Flex>
|
|
|
|
{shouldShowAddSeats() && billingInfo?.total_seats && (
|
|
<div style={{ marginTop: '16px' }}>
|
|
<Row gutter={16} align="middle">
|
|
<Col span={6}>
|
|
<Statistic
|
|
title={t('totalSeats')}
|
|
value={billingInfo.total_seats}
|
|
valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={handleAddMoreSeats}
|
|
style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
|
|
>
|
|
{t('addMoreSeats')}
|
|
</Button>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Statistic
|
|
title={t('availableSeats')}
|
|
value={calculateRemainingSeats()}
|
|
valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const renderCreditSubscriptionInfo = () => {
|
|
return (
|
|
<Flex vertical>
|
|
<Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const renderCustomSubscriptionInfo = () => {
|
|
return (
|
|
<Flex vertical>
|
|
<Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
|
|
<Typography.Text>
|
|
{t('planValidTill', 'Your plan is valid till {{date}}', {
|
|
date: billingInfo?.valid_till_date,
|
|
})}
|
|
</Typography.Text>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
style={{ height: '100%' }}
|
|
title={
|
|
<Typography.Text
|
|
style={{
|
|
color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
|
|
fontWeight: 500,
|
|
fontSize: '16px',
|
|
}}
|
|
>
|
|
{t('currentPlanDetails')}
|
|
</Typography.Text>
|
|
}
|
|
loading={loadingBillingInfo}
|
|
extra={renderExtra()}
|
|
>
|
|
<Flex vertical>
|
|
<div style={{ marginBottom: '14px' }}>
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL &&
|
|
renderLtdDetails()}
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.TRIAL && renderTrialDetails()}
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.FREE && renderFreePlan()}
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
|
|
renderPaddleSubscriptionInfo()}
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
|
|
renderCreditSubscriptionInfo()}
|
|
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
|
|
renderCustomSubscriptionInfo()}
|
|
</div>
|
|
|
|
{shouldShowRedeemButton() && (
|
|
<>
|
|
<Button
|
|
type="link"
|
|
style={{ margin: 0, padding: 0, width: '90px' }}
|
|
onClick={() => dispatch(toggleRedeemCodeDrawer())}
|
|
>
|
|
{t('redeemCode')}
|
|
</Button>
|
|
<RedeemCodeDrawer />
|
|
</>
|
|
)}
|
|
<Modal
|
|
open={isUpgradeModalOpen}
|
|
onCancel={() => dispatch(toggleUpgradeModal())}
|
|
width={1000}
|
|
centered
|
|
okButtonProps={{ hidden: true }}
|
|
cancelButtonProps={{ hidden: true }}
|
|
>
|
|
{browserTimeZone === 'Asia/Colombo' ? <UpgradePlansLKR /> : <UpgradePlans />}
|
|
</Modal>
|
|
|
|
<Modal
|
|
title={t('addMoreSeats')}
|
|
open={isMoreSeatsModalVisible}
|
|
onCancel={() => setIsMoreSeatsModalVisible(false)}
|
|
footer={null}
|
|
width={500}
|
|
centered
|
|
>
|
|
<Flex vertical gap="middle" style={{ marginTop: '8px' }}>
|
|
<Typography.Paragraph
|
|
style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
|
|
>
|
|
{t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")}
|
|
</Typography.Paragraph>
|
|
|
|
<Typography.Paragraph style={{ margin: '0 0 16px 0' }}>
|
|
{t('currentSeatsText', 'You currently have {{seats}} seats available.', {
|
|
seats: billingInfo?.total_seats,
|
|
})}
|
|
</Typography.Paragraph>
|
|
|
|
<Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
|
|
{t('selectSeatsText', 'Please select the number of additional seats to purchase.')}
|
|
</Typography.Paragraph>
|
|
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<span style={{ color: '#ff4d4f', marginRight: '4px' }}>*</span>
|
|
<span style={{ marginRight: '8px' }}>Seats:</span>
|
|
<Select
|
|
value={selectedSeatCount}
|
|
onChange={setSelectedSeatCount}
|
|
options={seatCountOptions}
|
|
style={{ width: '300px' }}
|
|
/>
|
|
</div>
|
|
|
|
<Flex justify="end">
|
|
{selectedSeatCount.toString() !== '100+' ? (
|
|
<Button
|
|
type="primary"
|
|
loading={addingSeats}
|
|
onClick={handlePurchaseMoreSeats}
|
|
style={{
|
|
minWidth: '100px',
|
|
backgroundColor: '#1890ff',
|
|
borderColor: '#1890ff',
|
|
borderRadius: '2px',
|
|
}}
|
|
>
|
|
{t('purchase', 'Purchase')}
|
|
</Button>
|
|
) : (
|
|
<Button type="primary" size="middle">
|
|
{t('contactSales', 'Contact sales')}
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
</Modal>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CurrentPlanDetails;
|