/
GeneralTaxSettings.js
95 lines (84 loc) · 3.55 KB
/
GeneralTaxSettings.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { Component } from "react";
import PropTypes from "prop-types";
import { uniqueId } from "lodash";
import { Form } from "reacto-form";
import { i18next } from "/client/api";
import Button from "@reactioncommerce/components/Button/v1";
import ErrorsBlock from "@reactioncommerce/components/ErrorsBlock/v1";
import Field from "@reactioncommerce/components/Field/v1";
import Select from "@reactioncommerce/components/Select/v1";
import TextInput from "@reactioncommerce/components/TextInput/v1";
export default class GeneralTaxSettings extends Component {
static propTypes = {
onSubmit: PropTypes.func.isRequired,
settingsDoc: PropTypes.shape({
primaryTaxServiceName: PropTypes.string,
fallbackTaxServiceName: PropTypes.string,
defaultTaxCode: PropTypes.string
}),
taxServices: PropTypes.arrayOf(PropTypes.shape({
displayName: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})),
validator: PropTypes.func
};
uniqueInstanceIdentifier = uniqueId("GeneralTaxSettings");
handleSave = () => {
if (this.form) {
this.form.submit();
}
};
enableFallbackTaxSelect = (currentSettings) => {
if (currentSettings.primaryTaxServiceName) return false;
return true;
}
get taxServicesOptions() {
const { taxServices } = this.props;
const options = (taxServices || []).map(({ displayName, name }) => ({
label: displayName,
value: name
}));
options.unshift({ label: "None", value: "" });
return options;
}
render() {
const { onSubmit, settingsDoc, validator } = this.props;
const primaryTaxServiceNameInputId = `primaryTaxServiceName_${this.uniqueInstanceIdentifier}`;
const fallbackTaxServiceNameInputId = `fallbackTaxServiceName_${this.uniqueInstanceIdentifier}`;
const defaultTaxCodeInputId = `defaultTaxCode_${this.uniqueInstanceIdentifier}`;
return (
<div className="clearfix">
<Form ref={(formRef) => { this.form = formRef; }} onSubmit={onSubmit} validator={validator} value={settingsDoc}>
<Field name="primaryTaxServiceName" label={i18next.t("admin.taxSettings.primaryTaxServiceName")} labelFor={primaryTaxServiceNameInputId}>
<Select
id={primaryTaxServiceNameInputId}
name="primaryTaxServiceName"
options={this.taxServicesOptions}
placeholder={i18next.t("admin.taxSettings.primaryTaxServiceNamePlaceholder")}
/>
<ErrorsBlock names={["primaryTaxServiceName"]} />
</Field>
<Field name="fallbackTaxServiceName" label={i18next.t("admin.taxSettings.fallbackTaxServiceName")} labelFor={fallbackTaxServiceNameInputId}>
<Select
id={fallbackTaxServiceNameInputId}
name="fallbackTaxServiceName"
options={this.taxServicesOptions}
placeholder={i18next.t("admin.taxSettings.fallbackTaxServiceNamePlaceholder")}
isReadOnly={this.enableFallbackTaxSelect}
/>
<ErrorsBlock names={["fallbackTaxServiceName"]} />
</Field>
<Field name="defaultTaxCode" label={i18next.t("admin.taxSettings.defaultTaxCode")} labelFor={defaultTaxCodeInputId}>
<TextInput id={defaultTaxCodeInputId} name="defaultTaxCode" />
<ErrorsBlock names={["defaultTaxCode"]} />
</Field>
</Form>
<div className="clearfix">
<div className="pull-right">
<Button onClick={this.handleSave}>{i18next.t("app.saveChanges")}</Button>
</div>
</div>
</div>
);
}
}