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.
This commit is contained in:
chamikaJ
@@ -1,5 +1,5 @@
|
||||
import { Button, Card, Col, Divider, Form, Input, notification, Row, Select } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Card, Col, Divider, Form, Input, Row, Select } from '@/shared/antd-imports';
|
||||
import React, { useEffect, useState, useMemo, useCallback } from 'react';
|
||||
import { RootState } from '../../../app/store';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { IBillingConfigurationCountry } from '@/types/admin-center/country.types';
|
||||
@@ -7,14 +7,15 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
|
||||
import { IBillingConfiguration } from '@/types/admin-center/admin-center.types';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
const Configuration: React.FC = () => {
|
||||
const Configuration: React.FC = React.memo(() => {
|
||||
const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
|
||||
|
||||
const [countries, setCountries] = useState<IBillingConfigurationCountry[]>([]);
|
||||
const [configuration, setConfiguration] = useState<IBillingConfiguration>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const fetchCountries = async () => {
|
||||
|
||||
const fetchCountries = useCallback(async () => {
|
||||
try {
|
||||
const res = await adminCenterApiService.getCountries();
|
||||
if (res.done) {
|
||||
@@ -23,61 +24,85 @@ const Configuration: React.FC = () => {
|
||||
} catch (error) {
|
||||
logger.error('Error fetching countries:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const fetchConfiguration = async () => {
|
||||
const fetchConfiguration = useCallback(async () => {
|
||||
const res = await adminCenterApiService.getBillingConfiguration();
|
||||
if (res.done) {
|
||||
setConfiguration(res.body);
|
||||
form.setFieldsValue(res.body);
|
||||
}
|
||||
};
|
||||
}, [form]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCountries();
|
||||
fetchConfiguration();
|
||||
}, []);
|
||||
}, [fetchCountries, fetchConfiguration]);
|
||||
|
||||
const handleSave = async (values: any) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await adminCenterApiService.updateBillingConfiguration(values);
|
||||
if (res.done) {
|
||||
fetchConfiguration();
|
||||
const handleSave = useCallback(
|
||||
async (values: any) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await adminCenterApiService.updateBillingConfiguration(values);
|
||||
if (res.done) {
|
||||
fetchConfiguration();
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error updating configuration:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error updating configuration:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
[fetchConfiguration]
|
||||
);
|
||||
|
||||
const countryOptions = countries.map(country => ({
|
||||
label: country.name,
|
||||
value: country.id,
|
||||
}));
|
||||
const countryOptions = useMemo(
|
||||
() =>
|
||||
countries.map(country => ({
|
||||
label: country.name,
|
||||
value: country.id,
|
||||
})),
|
||||
[countries]
|
||||
);
|
||||
|
||||
const titleStyle = useMemo(
|
||||
() => ({
|
||||
color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
}),
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
const dividerTitleStyle = useMemo(
|
||||
() => ({
|
||||
color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
}),
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
|
||||
const colStyle = useMemo(() => ({ padding: '0 12px', height: '86px' }), []);
|
||||
const dividerStyle = useMemo(() => ({ margin: '16px 0' }), []);
|
||||
const buttonColStyle = useMemo(() => ({ paddingLeft: '12px' }), []);
|
||||
|
||||
const handlePhoneInput = useCallback((e: React.FormEvent<HTMLInputElement>) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
input.value = input.value.replace(/[^0-9]/g, '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
Billing Details
|
||||
</span>
|
||||
}
|
||||
style={{ marginTop: '16px' }}
|
||||
>
|
||||
<Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
|
||||
<Form form={form} initialValues={configuration} onFinish={handleSave}>
|
||||
<Row>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
@@ -88,10 +113,10 @@ const Configuration: React.FC = () => {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="Name" />
|
||||
<Input placeholder="Name" disabled />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="Email Address"
|
||||
@@ -102,10 +127,10 @@ const Configuration: React.FC = () => {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="Name" disabled />
|
||||
<Input placeholder="Email Address" disabled />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="Contact Number"
|
||||
@@ -117,58 +142,34 @@ const Configuration: React.FC = () => {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Phone Number"
|
||||
maxLength={10}
|
||||
onInput={e => {
|
||||
const input = e.target as HTMLInputElement; // Type assertion to access 'value'
|
||||
input.value = input.value.replace(/[^0-9]/g, ''); // Restrict non-numeric input
|
||||
}}
|
||||
/>
|
||||
<Input placeholder="Phone Number" maxLength={10} onInput={handlePhoneInput} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Divider orientation="left" style={{ margin: '16px 0' }}>
|
||||
<span
|
||||
style={{
|
||||
color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
Company Details
|
||||
</span>
|
||||
<Divider orientation="left" style={dividerStyle}>
|
||||
<span style={dividerTitleStyle}>Company Details</span>
|
||||
</Divider>
|
||||
|
||||
<Row>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="company_name" label="Company Name" layout="vertical">
|
||||
<Input placeholder="Company Name" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="address_line_1" label="Address Line 01" layout="vertical">
|
||||
<Input placeholder="Address Line 01" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="address_line_2" label="Address Line 02" layout="vertical">
|
||||
<Input placeholder="Address Line 02" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
padding: '0 12px',
|
||||
height: '86px',
|
||||
scrollbarColor: 'red',
|
||||
}}
|
||||
>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="country" label="Country" layout="vertical">
|
||||
<Select
|
||||
dropdownStyle={{ maxHeight: 256, overflow: 'auto' }}
|
||||
@@ -181,28 +182,28 @@ const Configuration: React.FC = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="city" label="City" layout="vertical">
|
||||
<Input placeholder="City" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="state" label="State" layout="vertical">
|
||||
<Input placeholder="State" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={8} style={{ padding: '0 12px', height: '86px' }}>
|
||||
<Col span={8} style={colStyle}>
|
||||
<Form.Item name="postal_code" label="Postal Code" layout="vertical">
|
||||
<Input placeholder="Postal Code" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col style={{ paddingLeft: '12px' }}>
|
||||
<Col style={buttonColStyle}>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
Save
|
||||
</Button>
|
||||
</Form.Item>
|
||||
@@ -212,6 +213,8 @@ const Configuration: React.FC = () => {
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
Configuration.displayName = 'Configuration';
|
||||
|
||||
export default Configuration;
|
||||
|
||||
Reference in New Issue
Block a user