admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Phone Field Changes for IO-414

Browse Source
This commit is contained in:
Patrick Fic
2020-12-07 19:54:19 -08:00
parent 3506f61711
commit c4e0804130
8 changed files with 93 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.7.1">
<babeledit_project be_version="2.7.1" version="1.2">
<!--
BabelEdit project file
@@ -10529,6 +10529,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>invalidphone</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>required</name>
<definition_loaded>false</definition_loaded>

18
client/package-lock.json generated
View File

@@ -12829,6 +12829,11 @@
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
},
"lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
},
"lodash.template": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -16535,6 +16540,19 @@
"warning": "^4.0.3"
}
},
"react-phone-input-2": {
"version": "2.13.9",
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.13.9.tgz",
"integrity": "sha512-2sP7fAYBEw30S0FaI5VbuhjLQEdfJ4voq7C3iqWW8RiXxxWBtIQ+0SiQxDjvadbSS3C8P0KHIUIAnrgVOzOz1g==",
"requires": {
"classnames": "^2.2.6",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.reduce": "^4.6.0",
"lodash.startswith": "^4.2.1",
"prop-types": "^15.7.2"
}
},
"react-popopo": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/react-popopo/-/react-popopo-2.1.9.tgz",

1
client/package.json
View File

@@ -46,6 +46,7 @@
"react-icons": "^3.11.0",
"react-moment": "^1.0.0",
"react-number-format": "^4.4.1",
"react-phone-input-2": "^2.13.9",
"react-redux": "^7.2.2",
"react-resizable": "^1.11.0",
"react-router-dom": "^5.2.0",

39
client/src/components/form-items-formatted/phone-form-item.component.jsx
View File

@@ -1,7 +1,44 @@
import i18n from "i18next";
import React, { forwardRef } from "react";
import NumberFormat from "react-number-format";
import phone from "phone";
import PhoneInput from "react-phone-input-2";
//import "react-phone-input-2/lib/style.css";
import "react-phone-input-2/lib/plain.css";
function FormItemPhone(props, ref) {
return <NumberFormat {...props} className='ant-input' ref={ref} type="tel" format="###-###-####" />;
return (
<PhoneInput country={"ca"} {...props} ref={ref} className="ant-input" />
);
// return (
// <NumberFormat
// {...props}
// className="ant-input"
// ref={ref}
// type="tel"
// format="###-###-####"
// />
// );
}
export default forwardRef(FormItemPhone);
export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
async validator(rule, value) {
PhoneInput({
value: getFieldValue(name),
isValid: async (value, country) => {
console.log("value", value);
if (value.match(/12345/)) {
return Promise.reject(i18n.t("general.validation.invalidphone"));
} else if (value.match(/1234/)) {
return false;
} else {
return Promise.resolve();
}
},
});
},
});

13
client/src/components/vendors-form/vendors-form.component.jsx
View File

@@ -12,7 +12,9 @@ import React from "react";
import { useTranslation } from "react-i18next";
import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
import PhoneFormItem, {
PhoneItemFormatterValidation,
} from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function VendorsFormComponent({
@@ -53,7 +55,14 @@ export default function VendorsFormComponent({
>
<FormItemEmail email={getFieldValue("email")} />
</Form.Item>
<Form.Item label={t("vendors.fields.phone")} name="phone">
<Form.Item
label={t("vendors.fields.phone")}
name="phone"
rules={[
({ getFieldValue }) =>
PhoneItemFormatterValidation(getFieldValue, "phone"),
]}
>
<PhoneFormItem />
</Form.Item>
</LayoutFormRow>

1
client/src/translations/en_us/common.json
View File

@@ -689,6 +689,7 @@
},
"validation": {
"invalidemail": "Please enter a valid email.",
"invalidphone": "Please enter a valid phone number.",
"required": "This field is required. "
}
},

1
client/src/translations/es/common.json
View File

@@ -689,6 +689,7 @@
},
"validation": {
"invalidemail": "Por favor introduzca una dirección de correo electrónico válida.",
"invalidphone": "",
"required": "Este campo es requerido."
}
},

1
client/src/translations/fr/common.json
View File

@@ -689,6 +689,7 @@
},
"validation": {
"invalidemail": "S'il vous plaît entrer un email valide.",
"invalidphone": "",
"required": "Ce champ est requis."
}
},