bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

expand sub tasks

Browse Source
This commit is contained in:
chamiakJ
2025-07-03 01:31:05 +05:30
parent 3bef18901a
commit ecd4d29a38
435 changed files with 13150 additions and 11087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
worklenz-frontend/src/components/admin-center/billing/account-storage/account-storage.tsx
View File

@@ -18,7 +18,9 @@ const AccountStorage = ({ themeMode }: IAccountStorageProps) => {
const dispatch = useAppDispatch();
const [subscriptionType, setSubscriptionType] = useState<string>(SUBSCRIPTION_STATUS.TRIALING);
const { loadingBillingInfo, billingInfo, storageInfo } = useAppSelector(state => state.adminCenterReducer);
const { loadingBillingInfo, billingInfo, storageInfo } = useAppSelector(
state => state.adminCenterReducer
);
const formatBytes = useMemo(
() =>

13
worklenz-frontend/src/components/admin-center/billing/current-bill.tsx
View File

@@ -10,7 +10,10 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
import { useMediaQuery } from 'react-responsive';
import { useTranslation } from 'react-i18next';
import { fetchBillingInfo, fetchFreePlanSettings } from '@/features/admin-center/admin-center.slice';
import {
fetchBillingInfo,
fetchFreePlanSettings,
} from '@/features/admin-center/admin-center.slice';
import CurrentPlanDetails from './current-plan-details/current-plan-details';
import AccountStorage from './account-storage/account-storage';
@@ -68,10 +71,7 @@ const CurrentBill: React.FC = () => {
</div>
<div style={{ marginTop: '1.5rem' }}>
<Card
title={<span style={titleStyle}>{t('invoices')}</span>}
style={{ marginTop: '16px' }}
>
<Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
<InvoicesTable />
</Card>
</div>
@@ -92,7 +92,8 @@ const CurrentBill: React.FC = () => {
) : (
renderMobileView()
)}
{currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE && renderChargesAndInvoices()}
{currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
renderChargesAndInvoices()}
</div>
);
};

138
worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
View File

@@ -7,7 +7,20 @@ import {
} 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 {
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,
@@ -44,8 +57,9 @@ const CurrentPlanDetails = () => {
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 }));
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') => {
@@ -127,8 +141,10 @@ const CurrentPlanDetails = () => {
const shouldShowAddSeats = () => {
if (!billingInfo) return false;
return billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE;
return (
billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
);
};
const renderExtra = () => {
@@ -199,13 +215,13 @@ const CurrentPlanDetails = () => {
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()) {
@@ -230,14 +246,13 @@ const CurrentPlanDetails = () => {
</Typography.Text>
<Tooltip title={formatDate(new Date(trialExpireDate))}>
<Typography.Text>
{isExpired
{isExpired
? t('trialExpired', {
trial_expire_string: getExpirationMessage(trialExpireDate)
trial_expire_string: getExpirationMessage(trialExpireDate),
})
: t('trialInProgress', {
trial_expire_string: getExpirationMessage(trialExpireDate)
})
}
trial_expire_string: getExpirationMessage(trialExpireDate),
})}
</Typography.Text>
</Tooltip>
</Flex>
@@ -268,25 +283,24 @@ const CurrentPlanDetails = () => {
{billingInfo?.billing_type === 'year'
? billingInfo.unit_price_per_month
: billingInfo?.unit_price}
&nbsp;{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}
<Statistic
title={t('totalSeats')}
value={billingInfo.total_seats}
valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
/>
</Col>
<Col span={8}>
<Button
type="primary"
icon={<PlusOutlined />}
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleAddMoreSeats}
style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
>
@@ -294,9 +308,9 @@ const CurrentPlanDetails = () => {
</Button>
</Col>
<Col span={6}>
<Statistic
title={t('availableSeats')}
value={calculateRemainingSeats()}
<Statistic
title={t('availableSeats')}
value={calculateRemainingSeats()}
valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
/>
</Col>
@@ -308,16 +322,24 @@ const CurrentPlanDetails = () => {
};
const renderCreditSubscriptionInfo = () => {
return <Flex vertical>
<Typography.Text strong>{t('creditPlan','Credit Plan')}</Typography.Text>
</Flex>
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 (
<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 (
@@ -326,7 +348,6 @@ const CurrentPlanDetails = () => {
title={
<Typography.Text
style={{
color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
fontWeight: 500,
fontSize: '16px',
@@ -340,12 +361,16 @@ const CurrentPlanDetails = () => {
>
<Flex vertical>
<div style={{ marginBottom: '14px' }}>
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL && renderLtdDetails()}
{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()}
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
renderPaddleSubscriptionInfo()}
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
renderCreditSubscriptionInfo()}
{billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
renderCustomSubscriptionInfo()}
</div>
{shouldShowRedeemButton() && (
@@ -370,7 +395,7 @@ const CurrentPlanDetails = () => {
>
{browserTimeZone === 'Asia/Colombo' ? <UpgradePlansLKR /> : <UpgradePlans />}
</Modal>
<Modal
title={t('addMoreSeats')}
open={isMoreSeatsModalVisible}
@@ -380,18 +405,22 @@ const CurrentPlanDetails = () => {
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
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})}
{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.')}
{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>
@@ -402,28 +431,25 @@ const CurrentPlanDetails = () => {
style={{ width: '300px' }}
/>
</div>
<Flex justify="end">
{selectedSeatCount.toString() !== '100+' ? (
<Button
type="primary"
<Button
type="primary"
loading={addingSeats}
onClick={handlePurchaseMoreSeats}
style={{
minWidth: '100px',
style={{
minWidth: '100px',
backgroundColor: '#1890ff',
borderColor: '#1890ff',
borderRadius: '2px'
borderRadius: '2px',
}}
>
{t('purchase','Purchase')}
{t('purchase', 'Purchase')}
</Button>
) : (
<Button
type="primary"
size="middle"
>
{t('contactSales','Contact sales')}
<Button type="primary" size="middle">
{t('contactSales', 'Contact sales')}
</Button>
)}
</Flex>

39
worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
View File

@@ -1,5 +1,17 @@
import { useEffect, useState } from 'react';
import { Button, Card, Col, Flex, Form, Row, Select, Tag, Tooltip, Typography, message } from 'antd/es';
import {
Button,
Card,
Col,
Flex,
Form,
Row,
Select,
Tag,
Tooltip,
Typography,
message,
} from 'antd/es';
import { useTranslation } from 'react-i18next';
import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
@@ -106,7 +118,7 @@ const UpgradePlans = () => {
const handlePaddleCallback = (data: any) => {
console.log('Paddle event:', data);
switch (data.event) {
case 'Checkout.Loaded':
setSwitchingToPaddlePlan(false);
@@ -144,13 +156,13 @@ const UpgradePlans = () => {
const initializePaddle = (data: IUpgradeSubscriptionPlanResponse) => {
setPaddleLoading(true);
setPaddleError(null);
// Check if Paddle is already loaded
if (window.Paddle) {
configurePaddle(data);
return;
}
const script = document.createElement('script');
script.src = 'https://cdn.paddle.com/paddle/paddle.js';
script.type = 'text/javascript';
@@ -159,7 +171,7 @@ const UpgradePlans = () => {
script.onload = () => {
configurePaddle(data);
};
script.onerror = () => {
setPaddleLoading(false);
setPaddleError('Failed to load Paddle checkout');
@@ -169,7 +181,7 @@ const UpgradePlans = () => {
document.getElementsByTagName('head')[0].appendChild(script);
};
const configurePaddle = (data: IUpgradeSubscriptionPlanResponse) => {
try {
if (data.sandbox) Paddle.Environment.set('sandbox');
@@ -193,7 +205,7 @@ const UpgradePlans = () => {
setSwitchingToPaddlePlan(true);
setPaddleLoading(true);
setPaddleError(null);
if (billingInfo?.trial_in_progress && billingInfo.status === SUBSCRIPTION_STATUS.TRIALING) {
const res = await billingApiService.upgradeToPaidPlan(planId, selectedSeatCount);
if (res.done) {
@@ -264,7 +276,6 @@ const UpgradePlans = () => {
const isSelected = (cardIndex: IPaddlePlans) =>
selectedPlan === cardIndex ? { border: '2px solid #1890ff' } : {};
const cardStyles = {
title: {
color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
@@ -363,7 +374,6 @@ const UpgradePlans = () => {
title={<span style={cardStyles.title}>{t('freePlan')}</span>}
onClick={() => setSelectedCard(paddlePlans.FREE)}
>
<div style={cardStyles.priceContainer}>
<Flex justify="space-between" align="center">
<Typography.Title level={1}>$ 0.00</Typography.Title>
@@ -389,7 +399,6 @@ const UpgradePlans = () => {
<Card
style={{ ...isSelected(paddlePlans.ANNUAL), height: '100%' }}
hoverable
title={
<span style={cardStyles.title}>
{t('annualPlan')}{' '}
@@ -401,7 +410,6 @@ const UpgradePlans = () => {
onClick={() => setSelectedCard(paddlePlans.ANNUAL)}
>
<div style={cardStyles.priceContainer}>
<Flex justify="space-between" align="center">
<Typography.Title level={1}>$ {plans.annual_price}</Typography.Title>
<Typography.Text>seat / month</Typography.Text>
@@ -442,7 +450,6 @@ const UpgradePlans = () => {
hoverable
title={<span style={cardStyles.title}>{t('monthlyPlan')}</span>}
onClick={() => setSelectedCard(paddlePlans.MONTHLY)}
>
<div style={cardStyles.priceContainer}>
<Flex justify="space-between" align="center">
@@ -501,7 +508,9 @@ const UpgradePlans = () => {
onClick={continueWithPaddlePlan}
disabled={billingInfo?.plan_id === plans.annual_plan_id}
>
{billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE ? t('changeToPlan', {plan: t('annualPlan')}) : t('continueWith', {plan: t('annualPlan')})}
{billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
? t('changeToPlan', { plan: t('annualPlan') })
: t('continueWith', { plan: t('annualPlan') })}
</Button>
)}
{selectedPlan === paddlePlans.MONTHLY && (
@@ -512,7 +521,9 @@ const UpgradePlans = () => {
onClick={continueWithPaddlePlan}
disabled={billingInfo?.plan_id === plans.monthly_plan_id}
>
{billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE ? t('changeToPlan', {plan: t('monthlyPlan')}) : t('continueWith', {plan: t('monthlyPlan')})}
{billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
? t('changeToPlan', { plan: t('monthlyPlan') })
: t('continueWith', { plan: t('monthlyPlan') })}
</Button>
)}
</Row>

9
worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
View File

@@ -39,7 +39,7 @@ const Configuration: React.FC = () => {
}, []);
const handleSave = async (values: any) => {
try {
try {
setLoading(true);
const res = await adminCenterApiService.updateBillingConfiguration(values);
if (res.done) {
@@ -75,11 +75,7 @@ const Configuration: React.FC = () => {
}
style={{ marginTop: '16px' }}
>
<Form
form={form}
initialValues={configuration}
onFinish={handleSave}
>
<Form form={form} initialValues={configuration} onFinish={handleSave}>
<Row>
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
<Form.Item
@@ -180,7 +176,6 @@ const Configuration: React.FC = () => {
showSearch
placeholder="Country"
optionFilterProp="label"
allowClear
options={countryOptions}
/>

27
worklenz-frontend/src/components/admin-center/teams/settings-drawer/settings-drawer.tsx
View File

@@ -68,11 +68,11 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
const body = {
name: values.name,
teamMembers: teamData?.team_members || []
teamMembers: teamData?.team_members || [],
};
const response = await adminCenterApiService.updateTeam(teamId, body);
if (response.done) {
setIsSettingDrawerOpen(false);
}
@@ -108,7 +108,7 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
if (value === 'Owner') {
return;
}
// Update the team member's role in teamData
if (teamData && teamData.team_members) {
const updatedMembers = teamData.team_members.map(member => {
@@ -117,20 +117,21 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
}
return member;
});
setTeamData({
...teamData,
team_members: updatedMembers
team_members: updatedMembers,
});
}
};
const isDisabled = record.role_name === 'Owner' || record.pending_invitation;
const tooltipTitle = record.role_name === 'Owner'
? t('cannotChangeOwnerRole')
: record.pending_invitation
? t('pendingInvitation')
: '';
const tooltipTitle =
record.role_name === 'Owner'
? t('cannotChangeOwnerRole')
: record.pending_invitation
? t('pendingInvitation')
: '';
const selectComponent = (
<Select
@@ -145,9 +146,7 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
return (
<div>
{isDisabled ? (
<Tooltip title={tooltipTitle}>
{selectComponent}
</Tooltip>
<Tooltip title={tooltipTitle}>{selectComponent}</Tooltip>
) : (
selectComponent
)}