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

Resolved phone inputs IO-722

Browse Source
This commit is contained in:
Patrick Fic
2021-03-02 08:58:09 -08:00
parent 53aa301bb5
commit b88f5b3561
14 changed files with 66 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.7.1" version="1.2">
<babeledit_project version="1.2" be_version="2.7.1">
<!--
BabelEdit project file
@@ -22505,6 +22505,32 @@
</concept_node>
</children>
</folder_node>
<folder_node>
<name>errors</name>
<children>
<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>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>

51
client/package-lock.json generated
View File

@@ -45,7 +45,6 @@
"react-i18next": "^11.8.7",
"react-icons": "^4.2.0",
"react-number-format": "^4.4.4",
"react-phone-input-2": "^2.13.9",
"react-redux": "^7.2.2",
"react-resizable": "^1.11.0",
"react-router-dom": "^5.2.0",
@@ -14484,21 +14483,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
"node_modules/lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
},
"node_modules/lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
},
"node_modules/lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
},
"node_modules/lodash.template": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -19037,23 +19026,6 @@
"react-dom": ">=16.3.0"
}
},
"node_modules/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==",
"dependencies": {
"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"
},
"peerDependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
},
"node_modules/react-prop-toggle": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz",
@@ -36891,21 +36863,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
"lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
},
"lodash.sortby": {
"version": "4.7.0",
"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",
@@ -40467,19 +40429,6 @@
"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-prop-toggle": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz",

1
client/package.json
View File

@@ -41,7 +41,6 @@
"react-i18next": "^11.8.7",
"react-icons": "^4.2.0",
"react-number-format": "^4.4.4",
"react-phone-input-2": "^2.13.9",
"react-redux": "^7.2.2",
"react-resizable": "^1.11.0",
"react-router-dom": "^5.2.0",

18
client/src/components/chat-open-button/chat-open-button.component.jsx
View File

@@ -1,17 +1,33 @@
import { MessageFilled } from "@ant-design/icons";
import { notification } from "antd";
import parsePhoneNumber from "libphonenumber-js";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
const mapDispatchToProps = (dispatch) => ({
openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
});
export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
const { t } = useTranslation();
return (
<MessageFilled
style={{ margin: 4 }}
onClick={(e) => {
e.stopPropagation();
openChatByPhone({ phone_num: phone, jobid: jobid });
const p = parsePhoneNumber(phone, "CA");
console.log(
"🚀 ~ file: chat-open-button.component.jsx ~ line 21 ~ p",
p
);
if (p && p.isValid()) {
openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
} else {
notification["error"]({ message: t("messaging.error.invalidphone") });
}
}}
/>
);

2
client/src/components/form-items-formatted/currency-form-item.component.jsx
View File

@@ -6,6 +6,8 @@ function FormItemCurrency(props, ref) {
{...props}
ref={ref}
style={{ width: "initial" }}
formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
// formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
// parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
precision={2}

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

@@ -1,17 +1,13 @@
import { Input } from "antd";
import i18n from "i18next";
import parsePhoneNumber from "libphonenumber-js";
import React, { forwardRef } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/high-res.css";
import "./phone-form-item.styles.scss";
function FormItemPhone(props, ref) {
return (
<PhoneInput
country="ca"
onlyCountries={["ca", "us"]}
ref={ref}
className="ant-input"
<Input
// country="ca" ref={ref} className="ant-input"
{...props}
/>
);
@@ -21,30 +17,15 @@ export default forwardRef(FormItemPhone);
export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
async validator(rule, value) {
if (!getFieldValue(name)) {
if (!value) {
return Promise.resolve();
} else {
const p = parsePhoneNumber(getFieldValue(name), "CA");
if (p) {
const p = parsePhoneNumber(value, "CA");
if (p.isValid()) {
return Promise.resolve();
} else {
return Promise.reject(i18n.t("general.validation.invalidphone"));
}
}
// PhoneInput({
// value: getFieldValue(name),
// isValid: async (value, country) => {
// console.log("value", value);
// if (value.match(/12345/)) {
// } else if (value.match(/1234/)) {
// return false;
// } else {
// return Promise.resolve();
// }
// },
// });
},
});

2
client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
View File

@@ -78,7 +78,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
]}
>
<FormItemPhone customInput={Input} />
<FormItemPhone />
</Form.Item>
<Form.Item
label={t("jobs.fields.ins_ea")}

2
client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
View File

@@ -144,7 +144,7 @@ export default function JobsCreateOwnerInfoNewComponent() {
),
]}
>
<FormItemPhone customInput={Input} disabled={!state.owner.new} />
<FormItemPhone disabled={!state.owner.new} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow grow>

2
client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
View File

@@ -79,7 +79,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
]}
>
<FormItemPhone customInput={Input} disabled={jobRO} />
<FormItemPhone disabled={jobRO} />
</Form.Item>
<Form.Item
label={t("jobs.fields.ins_ea")}

2
client/src/components/owner-detail-form/owner-detail-form.component.jsx
View File

@@ -128,7 +128,7 @@ export default function OwnerDetailFormComponent({ form, loading }) {
PhoneItemFormatterValidation(getFieldValue, "ownr_ph1"),
]}
>
<FormItemPhone customInput={Input} />
<FormItemPhone />
</Form.Item>
<Form.Item
label={t("owners.fields.preferred_contact")}

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

@@ -1343,6 +1343,9 @@
"link": "Link to Job",
"new": "New Conversation"
},
"errors": {
"invalidphone": "The phone number is invalid. Unable to open conversation. "
},
"labels": {
"maxtenimages": "You can only select up to a maximum of 10 images at a time.",
"messaging": "Messaging",

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

@@ -1343,6 +1343,9 @@
"link": "",
"new": ""
},
"errors": {
"invalidphone": ""
},
"labels": {
"maxtenimages": "",
"messaging": "Mensajería",

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

@@ -1343,6 +1343,9 @@
"link": "",
"new": ""
},
"errors": {
"invalidphone": ""
},
"labels": {
"maxtenimages": "",
"messaging": "Messagerie",

2
client/src/utils/PhoneFormatter.jsx
View File

@@ -4,5 +4,5 @@ import React from "react";
export default function PhoneNumberFormatter(props) {
const p = parsePhoneNumber(props.children || "", "CA");
return p ? <span>{p.formatInternational()}</span> : null;
return p ? <span>{p.formatNational()}</span> : null;
}