feat(antd-imports): establish centralized import rules for Ant Design components

- Introduced a new rules file for Ant Design component imports, enforcing the use of centralized imports from `@antd-imports` to enhance tree-shaking, maintainability, and performance. - Updated various components to replace direct imports from 'antd' and '@ant-design/icons' with the centralized import path. - Refactored existing components to utilize memoization and callbacks for improved performance and readability. - Enhanced the billing and configuration components with updated styles and improved user experience.
2025-07-23 10:33:55 +05:30
parent a6286eb2b8
commit 80f5febb51
8 changed files with 639 additions and 278 deletions
--- a/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import {
  evt_billing_pause_plan,
@@ -17,10 +17,9 @@ import {
  Typography,
  Statistic,
  Select,
-  Form,
  Row,
  Col,
-} from 'antd/es';
+} from '@/shared/antd-imports';
 import RedeemCodeDrawer from '../drawers/redeem-code-drawer/redeem-code-drawer';
 import {
  fetchBillingInfo,
@@ -38,6 +37,21 @@ 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';

+type SubscriptionAction = 'pause' | 'resume';
+type SeatOption = { label: string; value: number | string };
+
+const SEAT_COUNT_LIMIT = '100+';
+const BILLING_DELAY_MS = 8000;
+const LTD_USER_LIMIT = 50;
+const BUTTON_STYLE = {
+  backgroundColor: '#1890ff',
+  borderColor: '#1890ff',
+};
+const STATISTIC_VALUE_STYLE = {
+  fontSize: '24px',
+  fontWeight: 'bold' as const,
+};
+
 const CurrentPlanDetails = () => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation('admin-center/current-bill');
@@ -47,7 +61,7 @@ const CurrentPlanDetails = () => {
  const [cancellingPlan, setCancellingPlan] = useState(false);
  const [addingSeats, setAddingSeats] = useState(false);
  const [isMoreSeatsModalVisible, setIsMoreSeatsModalVisible] = useState(false);
-  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(5);
+  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(1);

  const themeMode = useAppSelector(state => state.themeReducer.mode);
  const { loadingBillingInfo, billingInfo, freePlanSettings, isUpgradeModalOpen } = useAppSelector(
@@ -55,14 +69,16 @@ const CurrentPlanDetails = () => {
  );

  const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  
+  const seatCountOptions: SeatOption[] = useMemo(() => {
+    const options: 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 }));
+    options.push({ label: SEAT_COUNT_LIMIT, value: SEAT_COUNT_LIMIT });
+    return options;
+  }, []);

-  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 handleSubscriptionAction = useCallback(async (action: SubscriptionAction) => {
    const isResume = action === 'resume';
    const setLoadingState = isResume ? setCancellingPlan : setPausingPlan;
    const apiMethod = isResume
@@ -78,21 +94,21 @@ const CurrentPlanDetails = () => {
          setLoadingState(false);
          dispatch(fetchBillingInfo());
          trackMixpanelEvent(eventType);
-        }, 8000);
-        return; // Exit function to prevent finally block from executing
+        }, BILLING_DELAY_MS);
+        return;
      }
    } catch (error) {
      logger.error(`Error ${action}ing subscription`, error);
-      setLoadingState(false); // Only set to false on error
+      setLoadingState(false);
    }
-  };
+  }, [dispatch, trackMixpanelEvent]);

-  const handleAddMoreSeats = () => {
+  const handleAddMoreSeats = useCallback(() => {
    setIsMoreSeatsModalVisible(true);
-  };
+  }, []);

-  const handlePurchaseMoreSeats = async () => {
-    if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
+  const handlePurchaseMoreSeats = useCallback(async () => {
+    if (selectedSeatCount.toString() === SEAT_COUNT_LIMIT || !billingInfo?.total_seats) return;

    try {
      setAddingSeats(true);
@@ -108,51 +124,75 @@ const CurrentPlanDetails = () => {
    } finally {
      setAddingSeats(false);
    }
-  };
+  }, [selectedSeatCount, billingInfo?.total_seats, dispatch, trackMixpanelEvent]);

-  const calculateRemainingSeats = () => {
+  const calculateRemainingSeats = useMemo(() => {
    if (billingInfo?.total_seats && billingInfo?.total_used) {
      return billingInfo.total_seats - billingInfo.total_used;
    }
    return 0;
-  };
+  }, [billingInfo?.total_seats, billingInfo?.total_used]);

-  const checkSubscriptionStatus = (allowedStatuses: any[]) => {
+  // Calculate intelligent default for seat selection based on current usage
+  const getDefaultSeatCount = useMemo(() => {
+    const currentUsed = billingInfo?.total_used || 0;
+    const availableSeats = calculateRemainingSeats;
+    
+    // If only 1 user and no available seats, suggest 1 additional seat
+    if (currentUsed === 1 && availableSeats === 0) {
+      return 1;
+    }
+    
+    // If they have some users but running low on seats, suggest enough for current users
+    if (availableSeats < currentUsed && currentUsed > 0) {
+      return Math.max(1, currentUsed - availableSeats);
+    }
+    
+    // Default fallback
+    return Math.max(1, Math.min(5, currentUsed || 1));
+  }, [billingInfo?.total_used, calculateRemainingSeats]);
+
+  // Update selected seat count when billing info changes
+  useEffect(() => {
+    setSelectedSeatCount(getDefaultSeatCount);
+  }, [getDefaultSeatCount]);
+
+  const checkSubscriptionStatus = useCallback((allowedStatuses: string[]) => {
    if (!billingInfo?.status || billingInfo.is_ltd_user) return false;
    return allowedStatuses.includes(billingInfo.status);
-  };
+  }, [billingInfo?.status, billingInfo?.is_ltd_user]);

-  const shouldShowRedeemButton = () => {
+  const shouldShowRedeemButton = useMemo(() => {
    if (billingInfo?.trial_in_progress) return true;
-    return billingInfo?.ltd_users ? billingInfo.ltd_users < 50 : false;
-  };
+    return billingInfo?.ltd_users ? billingInfo.ltd_users < LTD_USER_LIMIT : false;
+  }, [billingInfo?.trial_in_progress, billingInfo?.ltd_users]);

-  const showChangeButton = () => {
+  const showChangeButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);

-  const showPausePlanButton = () => {
+  const showPausePlanButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);

-  const showResumePlanButton = () => {
+  const showResumePlanButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.PAUSED]);
-  };
+  }, [checkSubscriptionStatus]);

-  const shouldShowAddSeats = () => {
+  const shouldShowAddSeats = useMemo(() => {
    if (!billingInfo) return false;
    return (
      billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
      billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
    );
-  };
+  }, [billingInfo]);

-  const renderExtra = () => {
+  const renderExtra = useCallback(() => {
    if (!billingInfo || billingInfo.is_custom) return null;

    return (
      <Space>
-        {showPausePlanButton() && (
+        {showPausePlanButton && (
          <Button
            type="link"
            danger
@@ -163,7 +203,7 @@ const CurrentPlanDetails = () => {
          </Button>
        )}

-        {showResumePlanButton() && (
+        {showResumePlanButton && (
          <Button
            type="primary"
            loading={cancellingPlan}
@@ -179,7 +219,7 @@ const CurrentPlanDetails = () => {
          </Button>
        )}

-        {showChangeButton() && (
+        {showChangeButton && (
          <Button
            type="primary"
            loading={pausingPlan || cancellingPlan}
@@ -190,9 +230,19 @@ const CurrentPlanDetails = () => {
        )}
      </Space>
    );
-  };
+  }, [
+    billingInfo,
+    showPausePlanButton,
+    showResumePlanButton,
+    showChangeButton,
+    pausingPlan,
+    cancellingPlan,
+    handleSubscriptionAction,
+    dispatch,
+    t,
+  ]);

-  const renderLtdDetails = () => {
+  const renderLtdDetails = useCallback(() => {
    if (!billingInfo || billingInfo.is_custom) return null;
    return (
      <Flex vertical>
@@ -200,41 +250,41 @@ const CurrentPlanDetails = () => {
        <Typography.Text>{t('ltdUsers', { ltd_users: billingInfo.ltd_users })}</Typography.Text>
      </Flex>
    );
-  };
+  }, [billingInfo, t]);

-  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 checkIfTrialExpired = useCallback(() => {
+    if (!billingInfo?.trial_expire_date) return false;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const trialExpireDate = new Date(billingInfo.trial_expire_date);
+    trialExpireDate.setHours(0, 0, 0, 0);
+    return today > trialExpireDate;
+  }, [billingInfo?.trial_expire_date]);

-    const getExpirationMessage = (expireDate: string) => {
-      const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+  const getExpirationMessage = useCallback((expireDate: string) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);

-      const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
+    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
+    const expDate = new Date(expireDate);
+    expDate.setHours(0, 0, 0, 0);

-      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);
-      }
-    };
+    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);
+    }
+  }, [t]);

+  const renderTrialDetails = useCallback(() => {
    const isExpired = checkIfTrialExpired();
    const trialExpireDate = billingInfo?.trial_expire_date || '';

@@ -257,9 +307,9 @@ const CurrentPlanDetails = () => {
        </Tooltip>
      </Flex>
    );
-  };
+  }, [billingInfo?.trial_expire_date, checkIfTrialExpired, getExpirationMessage, t]);

-  const renderFreePlan = () => (
+  const renderFreePlan = useCallback(() => (
    <Flex vertical>
      <Typography.Text strong>{t('freePlan')}</Typography.Text>
      <Typography.Text>
@@ -271,9 +321,9 @@ const CurrentPlanDetails = () => {
        <br />- {freePlanSettings?.free_tier_storage} MB {t('storage')}
      </Typography.Text>
    </Flex>
-  );
+  ), [freePlanSettings, t]);

-  const renderPaddleSubscriptionInfo = () => {
+  const renderPaddleSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{billingInfo?.plan_name}</Typography.Text>
@@ -287,14 +337,14 @@ const CurrentPlanDetails = () => {
          </Typography.Text>
        </Flex>

-        {shouldShowAddSeats() && billingInfo?.total_seats && (
+        {shouldShowAddSeats && billingInfo?.total_seats && (
          <div style={{ marginTop: '16px' }}>
            <Row gutter={16} align="middle">
              <Col span={6}>
                <Statistic
-                  title={t('totalSeats')}
+                  title={t('totalSeats') as string}
                  value={billingInfo.total_seats}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                />
              </Col>
              <Col span={8}>
@@ -302,16 +352,16 @@ const CurrentPlanDetails = () => {
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={handleAddMoreSeats}
-                  style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
+                  style={BUTTON_STYLE}
                >
                  {t('addMoreSeats')}
                </Button>
              </Col>
              <Col span={6}>
                <Statistic
-                  title={t('availableSeats')}
-                  value={calculateRemainingSeats()}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  title={t('availableSeats') as string}
+                  value={calculateRemainingSeats}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                />
              </Col>
            </Row>
@@ -319,17 +369,17 @@ const CurrentPlanDetails = () => {
        )}
      </Flex>
    );
-  };
+  }, [billingInfo, shouldShowAddSeats, handleAddMoreSeats, calculateRemainingSeats, t]);

-  const renderCreditSubscriptionInfo = () => {
+  const renderCreditSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
      </Flex>
    );
-  };
+  }, [t]);

-  const renderCustomSubscriptionInfo = () => {
+  const renderCustomSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
@@ -340,7 +390,36 @@ const CurrentPlanDetails = () => {
        </Typography.Text>
      </Flex>
    );
-  };
+  }, [billingInfo?.valid_till_date, t]);
+
+  const renderSubscriptionContent = useCallback(() => {
+    if (!billingInfo) return null;
+
+    switch (billingInfo.subscription_type) {
+      case ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL:
+        return renderLtdDetails();
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return renderTrialDetails();
+      case ISUBSCRIPTION_TYPE.FREE:
+        return renderFreePlan();
+      case ISUBSCRIPTION_TYPE.PADDLE:
+        return renderPaddleSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CREDIT:
+        return renderCreditSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return renderCustomSubscriptionInfo();
+      default:
+        return null;
+    }
+  }, [
+    billingInfo,
+    renderLtdDetails,
+    renderTrialDetails,
+    renderFreePlan,
+    renderPaddleSubscriptionInfo,
+    renderCreditSubscriptionInfo,
+    renderCustomSubscriptionInfo,
+  ]);

  return (
    <Card
@@ -361,19 +440,10 @@ const CurrentPlanDetails = () => {
    >
      <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()}
+          {renderSubscriptionContent()}
        </div>

-        {shouldShowRedeemButton() && (
+        {shouldShowRedeemButton && (
          <>
            <Button
              type="link"
@@ -408,17 +478,28 @@ const CurrentPlanDetails = () => {
            <Typography.Paragraph
              style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
            >
-              {t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")}
+              {billingInfo?.total_used === 1 
+                ? t('purchaseSeatsTextSingle', "Add more seats to invite team members to your workspace.")
+                : 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,
              })}
+              {billingInfo?.total_used === 1 && (
+                <span style={{ color: '#666', marginLeft: '8px' }}>
+                  ({t('singleUserNote', 'Currently used by 1 team member')})
+                </span>
+              )}
            </Typography.Paragraph>

            <Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
-              {t('selectSeatsText', 'Please select the number of additional seats to purchase.')}
+              {billingInfo?.total_used === 1
+                ? t('selectSeatsTextSingle', 'Select how many additional seats you need for new team members.')
+                : t('selectSeatsText', 'Please select the number of additional seats to purchase.')
+              }
            </Typography.Paragraph>

            <div style={{ marginBottom: '24px' }}>
@@ -430,18 +511,18 @@ const CurrentPlanDetails = () => {
                options={seatCountOptions}
                style={{ width: '300px' }}
              />
+
            </div>

            <Flex justify="end">
-              {selectedSeatCount.toString() !== '100+' ? (
+              {selectedSeatCount.toString() !== SEAT_COUNT_LIMIT ? (
                <Button
                  type="primary"
                  loading={addingSeats}
                  onClick={handlePurchaseMoreSeats}
                  style={{
                    minWidth: '100px',
-                    backgroundColor: '#1890ff',
-                    borderColor: '#1890ff',
+                    ...BUTTON_STYLE,
                    borderRadius: '2px',
                  }}
                >