Skip to content

Commit a608f67

Browse files
author
DarkSmile92
committed
Translation of settings page
1 parent 471805f commit a608f67

File tree

14 files changed

+442
-54
lines changed

14 files changed

+442
-54
lines changed

‎app/components/settings/General.jsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,26 @@ class General extends Component {
2626
}
2727

2828
render() {
29+
const { t } = this.props;
2930
return (
3031
<div>
3132
<div className="row">
3233
<div className="col-md-6">
3334
<div className="pageItem">
34-
<label className="itemLabel">Sound</label>
35+
<label className="itemLabel">{t('settings:general:sound:heading')}</label>
3536
<select
3637
name="sound"
3738
value={this.state.sound}
3839
onChange={this.handleInputChange}
3940
>
40-
<option value="default">Default</option>
41-
<option value="cs">Counter Strike</option>
41+
<option value="default">{t('settings:general:sound:default')}</option>
42+
<option value="cs">{t('settings:general:sound:counterstrike')}</option>
4243
</select>
4344
</div>
4445
</div>
4546
<div className="col-md-6">
4647
<div className="pageItem">
47-
<label className="itemLabel">Mute Sound?</label>
48+
<label className="itemLabel">{t('settings:general:sound:mute')}</label>
4849
<label className="switch">
4950
<input
5051
name="muted"
@@ -60,20 +61,20 @@ class General extends Component {
6061
<div className="row">
6162
<div className="col-md-6">
6263
<div className="pageItem">
63-
<label className="itemLabel">Auto Check For Update</label>
64+
<label className="itemLabel">{t('settings:general:checkupdates:heading')}</label>
6465
<select
6566
name="checkUpdate"
6667
value={this.state.checkUpdate}
6768
onChange={this.handleInputChange}
6869
>
69-
<option value="daily">Everyday (Recommended)</option>
70-
<option value="weekly">Once A Week</option>
70+
<option value="daily">{t('settings:general:checkupdates:daily')}</option>
71+
<option value="weekly">{t('settings:general:checkupdates:weekly')}</option>
7172
</select>
7273
</div>
7374
</div>
7475
<div className="col-md-6">
7576
<div className="pageItem">
76-
<label className="itemLabel">Auto Preview PDF</label>
77+
<label className="itemLabel">{t('settings:general:autopreviewpdf')}</label>
7778
<label className="switch">
7879
<input
7980
name="previewPDF"
@@ -89,16 +90,16 @@ class General extends Component {
8990
<div className="row">
9091
<div className="col-md-6">
9192
<div className="pageItem">
92-
<label className="itemLabel">Language</label>
93+
<label className="itemLabel">{t('settings:general:language:heading')}</label>
9394
<select
9495
name="language"
9596
value={this.state.language}
9697
onChange={this.handleInputChange}
9798
>
98-
<option value="en">English</option>
99-
<option value="de">German</option>
100-
<option value="fr">French</option>
101-
<option value="vi">Vietnamese</option>
99+
<option value="en">{t('settings:general:language:english')}</option>
100+
<option value="de">{t('settings:general:language:german')}</option>
101+
<option value="fr">{t('settings:general:language:french')}</option>
102+
<option value="vi">{t('settings:general:language:vietnamese')}</option>
102103
</select>
103104
</div>
104105
</div>

‎app/components/settings/Invoice.jsx

+23-22
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,15 @@ class Invoice extends Component {
4242
this.handleInputChange = this.handleInputChange.bind(this);
4343
this.handleTaxChange = this.handleTaxChange.bind(this);
4444
this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
45+
this.t = this.props.t;
4546
}
4647

4748
componentDidMount() {
4849
ipc.on('no-access-directory', (event, message) => {
4950
openDialog({
5051
type: 'warning',
51-
title: 'No Access Permisison',
52-
message: `${message}. Please choose a different directory!`,
52+
title: this.t('settings:invoice:noaccess:title'),
53+
message: message + this.t('settings:invoice:noaccess:message'),
5354
});
5455
});
5556

@@ -146,23 +147,23 @@ class Invoice extends Component {
146147
} = this.state;
147148
return (
148149
<div>
149-
<label className="itemLabel">Tax Settings</label>
150+
<label className="itemLabel">{this.t('settings:invoice:tax:heading')}</label>
150151
<Section>
151152
<Row>
152153
<Field>
153-
<label className="itemLabel">Tax ID</label>
154+
<label className="itemLabel">{this.t('settings:invoice:tax:taxid')}</label>
154155
<input
155156
name="tin"
156157
type="text"
157158
value={tax.tin}
158159
onChange={this.handleTaxChange}
159-
placeholder="Registration Number"
160+
placeholder={this.t('settings:invoice:tax:taxidplaceholder')}
160161
/>
161162
</Field>
162163
</Row>
163164
<Row>
164165
<Field>
165-
<label className="itemLabel">Tax Amount</label>
166+
<label className="itemLabel">{this.t('settings:invoice:tax:amount')}</label>
166167
<input
167168
name="amount"
168169
type="number"
@@ -173,24 +174,24 @@ class Invoice extends Component {
173174
/>
174175
</Field>
175176
<Field>
176-
<label className="itemLabel">Tax Method</label>
177+
<label className="itemLabel">{this.t('settings:invoice:tax:method:heading')}</label>
177178
<select
178179
name="method"
179180
value={tax.method}
180181
onChange={this.handleTaxChange}
181182
>
182-
<option value="default">Default</option>
183-
<option value="reverse">Reverse Charge</option>
183+
<option value="default">{this.t('settings:invoice:tax:method:default')}</option>
184+
<option value="reverse">{this.t('settings:invoice:tax:method:reverse')}</option>
184185
</select>
185186
</Field>
186187
</Row>
187188
</Section>
188189

189-
<label className="itemLabel">Required Fields</label>
190+
<label className="itemLabel">{this.t('settings:invoice:reqfields:heading')}</label>
190191
<Section>
191192
<Row>
192193
<Field>
193-
<label className="itemLabel">Due Date</label>
194+
<label className="itemLabel">{this.t('settings:invoice:reqfields:duedate')}</label>
194195
<label className="switch">
195196
<input
196197
name="dueDate"
@@ -202,7 +203,7 @@ class Invoice extends Component {
202203
</label>
203204
</Field>
204205
<Field>
205-
<label className="itemLabel">Currency</label>
206+
<label className="itemLabel">{this.t('settings:common:currency')}</label>
206207
<label className="switch">
207208
<input
208209
name="currency"
@@ -215,7 +216,7 @@ class Invoice extends Component {
215216
</Field>
216217

217218
<Field>
218-
<label className="itemLabel">Discount</label>
219+
<label className="itemLabel">{this.t('settings:invoice:reqfields:discount')}</label>
219220
<label className="switch">
220221
<input
221222
name="discount"
@@ -227,7 +228,7 @@ class Invoice extends Component {
227228
</label>
228229
</Field>
229230
<Field>
230-
<label className="itemLabel">Tax</label>
231+
<label className="itemLabel">{this.t('settings:invoice:reqfields:tax')}</label>
231232
<label className="switch">
232233
<input
233234
name="tax"
@@ -239,7 +240,7 @@ class Invoice extends Component {
239240
</label>
240241
</Field>
241242
<Field>
242-
<label className="itemLabel">Note</label>
243+
<label className="itemLabel">{this.t('settings:invoice:reqfields:note')}</label>
243244
<label className="switch">
244245
<input
245246
name="note"
@@ -253,11 +254,11 @@ class Invoice extends Component {
253254
</Row>
254255
</Section>
255256

256-
<label className="itemLabel">Other</label>
257+
<label className="itemLabel">{this.t('settings:invoice:other:heading')}</label>
257258
<Section>
258259
<Row>
259260
<Field>
260-
<label className="itemLabel">Currency</label>
261+
<label className="itemLabel">{this.t('settings:common:currency')}</label>
261262
<select
262263
name="currency"
263264
value={currency}
@@ -267,20 +268,20 @@ class Invoice extends Component {
267268
</select>
268269
</Field>
269270
<Field>
270-
<label className="itemLabel">Template</label>
271+
<label className="itemLabel">{this.t('settings:invoice:other:template:heading')}</label>
271272
<select
272273
name="template"
273274
value={template}
274275
onChange={this.handleInputChange}
275276
>
276-
<option value="minimal">Minimal</option>
277-
<option value="business">Business</option>
277+
<option value="minimal">{this.t('settings:invoice:other:template:minimal')}</option>
278+
<option value="business">{this.t('settings:invoice:other:template:business')}</option>
278279
</select>
279280
</Field>
280281
</Row>
281282
<Row>
282283
<Field>
283-
<label className="itemLabel">Date Format</label>
284+
<label className="itemLabel">{this.t('settings:invoice:other:dateformat')}</label>
284285
<select
285286
name="dateFormat"
286287
value={dateFormat}
@@ -315,7 +316,7 @@ class Invoice extends Component {
315316
</select>
316317
</Field>
317318
<Field>
318-
<label className="itemLabel">PDF Export Directory</label>
319+
<label className="itemLabel">{this.t('settings:invoice:other:exportdir')}</label>
319320
<div className="input-group">
320321
<input
321322
className="form-control"

‎app/components/settings/Profile.jsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,20 @@ class Profile extends Component {
4242
}
4343

4444
render() {
45+
const { t } = this.props;
4546
return (
4647
<div>
4748
<div className="pageItem">
48-
<label className="itemLabel">Logo</label>
49-
<Hint>Accepts PNG, JPEG & SVG</Hint>
49+
<label className="itemLabel">{t('settings:profile:logo')}</label>
50+
<Hint>{t('settings:profile:filetypes')}</Hint>
5051
<Logo
5152
logo={this.state.logo}
5253
handleLogoChange={this.handleLogoChange}
5354
/>
5455
</div>
5556
<div className="row">
5657
<div className="pageItem col-md-6">
57-
<label className="itemLabel">Full Name</label>
58+
<label className="itemLabel">{t('settings:profile:fullname')}</label>
5859
<input
5960
name="fullname"
6061
type="text"
@@ -64,7 +65,7 @@ class Profile extends Component {
6465
</div>
6566

6667
<div className="pageItem col-md-6">
67-
<label className="itemLabel">Company</label>
68+
<label className="itemLabel">{t('settings:profile:company')}</label>
6869
<input
6970
name="company"
7071
type="text"
@@ -76,7 +77,7 @@ class Profile extends Component {
7677

7778
<div className="row">
7879
<div className="pageItem col-md-6">
79-
<label className="itemLabel">Address</label>
80+
<label className="itemLabel">{t('settings:profile:address')}</label>
8081
<input
8182
name="address"
8283
type="text"
@@ -86,7 +87,7 @@ class Profile extends Component {
8687
</div>
8788

8889
<div className="pageItem col-md-6">
89-
<label className="itemLabel">Email</label>
90+
<label className="itemLabel">{t('settings:profile:email')}</label>
9091
<input
9192
name="email"
9293
type="text"
@@ -98,7 +99,7 @@ class Profile extends Component {
9899

99100
<div className="row">
100101
<div className="pageItem col-md-6">
101-
<label className="itemLabel">Phone Number</label>
102+
<label className="itemLabel">{t('settings:profile:phone')}</label>
102103
<input
103104
name="phone"
104105
type="text"
@@ -108,7 +109,7 @@ class Profile extends Component {
108109
</div>
109110

110111
<div className="pageItem col-md-6">
111-
<label className="itemLabel">Website</label>
112+
<label className="itemLabel">{t('settings:profile:website')}</label>
112113
<input
113114
name="website"
114115
type="text"

‎app/containers/Settings.jsx

+12-8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
44
import { compose } from 'recompose';
55
import { connect } from 'react-redux';
66
import { isEqual } from 'lodash';
7+
import { translate } from 'react-i18next';
78

89
// Selectors
910
import {
@@ -59,14 +60,16 @@ class Settings extends Component {
5960
renderSettingsContent() {
6061
const { profile, general, invoice } = this.props.currentSettings;
6162
const { updateSettings } = this.props.boundActionCreators;
63+
// Translation
64+
const { t } = this.props;
6265
return (
6366
<PageWrapper>
6467
<PageHeader>
65-
<PageHeaderTitle>Settings</PageHeaderTitle>
68+
<PageHeaderTitle>{t('settings:general:heading')}</PageHeaderTitle>
6669
{!this.settingsSaved() && (
6770
<PageHeaderActions>
6871
<Button primary onClick={this.saveSettingsState}>
69-
Save
72+
{t('settings:general:btns:save')}
7073
</Button>
7174
</PageHeaderActions>
7275
)}
@@ -78,32 +81,32 @@ class Settings extends Component {
7881
className={this.state.visibleTab === 1 ? 'active' : ''}
7982
onClick={() => this.changeTab(1)}
8083
>
81-
Profile
84+
{t('settings:profile:heading')}
8285
</Tab>
8386
<Tab
8487
href="#"
8588
className={this.state.visibleTab === 2 ? 'active' : ''}
8689
onClick={() => this.changeTab(2)}
8790
>
88-
Invoice
91+
{t('settings:invoice:heading')}
8992
</Tab>
9093
<Tab
9194
href="#"
9295
className={this.state.visibleTab === 3 ? 'active' : ''}
9396
onClick={() => this.changeTab(3)}
9497
>
95-
General
98+
{t('settings:general:heading')}
9699
</Tab>
97100
</Tabs>
98101
<TabContent>
99102
{this.state.visibleTab === 1 && (
100-
<Profile profile={profile} updateSettings={updateSettings} />
103+
<Profile profile={profile} updateSettings={updateSettings} t={t} />
101104
)}
102105
{this.state.visibleTab === 2 && (
103-
<Invoice invoice={invoice} updateSettings={updateSettings} />
106+
<Invoice invoice={invoice} updateSettings={updateSettings} t={t} />
104107
)}
105108
{this.state.visibleTab === 3 && (
106-
<General general={general} updateSettings={updateSettings} />
109+
<General general={general} updateSettings={updateSettings} t={t} />
107110
)}
108111
</TabContent>
109112
</PageContent>
@@ -139,5 +142,6 @@ const mapStateToProps = state => ({
139142

140143
export default compose(
141144
connect(mapStateToProps, mapDispatchToProps),
145+
translate('settings'),
142146
_withFadeInAnimation
143147
)(Settings);

0 commit comments

Comments
 (0)