Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/Add add email, phone fields rule in lead form #804

Closed
wants to merge 1 commit into from
Closed

Feat/Add add email, phone fields rule in lead form #804

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions frontend/src/forms/LeadForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import useLanguage from '@/locale/useLanguage';

export default function LeadForm() {
const translate = useLanguage();

return (
<>
<Form.Item
label={translate('first name')}
name="firstName"
name='firstName'
rules={[
{
required: true,
Expand All @@ -20,7 +21,7 @@ export default function LeadForm() {

<Form.Item
label={translate('last name')}
name="lastName"
name='lastName'
rules={[
{
required: true,
Expand All @@ -32,9 +33,10 @@ export default function LeadForm() {

<Form.Item
label={translate('email')}
name="email"
name='email'
rules={[
{
type: 'email',
required: true,
},
]}
Expand All @@ -44,19 +46,20 @@ export default function LeadForm() {

<Form.Item
label={translate('phone')}
name="phone"
name='phone'
rules={[
{
required: true,
pattern: new RegExp(/\d+/g)
Copy link
Contributor Author

@tommm2 tommm2 Nov 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is another way i try:

<Form.Item
    label={translate('phone')}
    name='phone'
    rules={[
      {
           required: true,
      },
    ]}
    normalize={(value) => value.replace(/\D/g, '')}
>
    <Input type='tel' />
</Form.Item>

it Allows you to enter only numeric strings in the phone field.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With each national, there is a different pattern. Can you handle it

Copy link
Contributor Author

@tommm2 tommm2 Dec 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can add a util function like this, It can be used elsewhere.：

 const getPhoneValidationPattern = (lang) => {
    switch (lang) {
      case 'zh-TW':
        return /^[0-9]{10}$/;
      case 'en':
        return /^[0-9]{9}$/;

     // etc...
      default:
        return /\d+/g;
    }
  };

Then I thought that the phone validation message should have an additional "phone_message" in the translation, because the default message is not very user-friendly.
截圖 2023-12-13 11 21 25

@affkjuhyt What do you think？

},
]}
>
<Input type="tel" />
<Input type='tel' />
</Form.Item>

<Form.Item
label={translate('company')}
name="company"
name='company'
rules={[
{
required: true,
Expand All @@ -68,7 +71,7 @@ export default function LeadForm() {

<Form.Item
label={translate('position in company')}
name="jobTitle"
name='jobTitle'
rules={[
{
required: true,
Expand All @@ -78,23 +81,23 @@ export default function LeadForm() {
<Input />
</Form.Item>

<Form.Item label={translate('address')} name="address">
<Form.Item label={translate('address')} name='address'>
<Input />
</Form.Item>

<Form.Item label={translate('country')} name="country">
<Form.Item label={translate('country')} name='country'>
<Input />
</Form.Item>

<Form.Item
label={translate('status')}
name="status"
name='status'
rules={[
{
required: false,
},
]}
initialValue={'new'}
initialValue='new'
>
<Select
options={[
Expand All @@ -106,12 +109,12 @@ export default function LeadForm() {
></Select>
</Form.Item>

<Form.Item label={translate('note')} name="note">
<Form.Item label={translate('note')} name='note'>
<Input />
</Form.Item>

<Form.Item label={translate('source')} name="source">
<Input placeholder="ex: linkedin, website, ads..." />
<Form.Item label={translate('source')} name='source'>
<Input placeholder='ex: linkedin, website, ads...' />
</Form.Item>
</>
);
Expand Down