Skip to content

Commit 330089e

Browse files
dusanradovanovicdusanradovanovic
authored
Added support for i18n (#23)
1 parent 8943bef commit 330089e

22 files changed

+430
-113
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@types/react": "^16.9.0",
99
"@types/react-dom": "^16.9.0",
1010
"@types/react-router-dom": "^5.1.5",
11+
"app-localizer": "^1.2.2",
1112
"constate": "^2.0.0",
1213
"css-reset-and-normalize": "^2.1.0",
1314
"eslint-plugin-jsx-a11y": "^6.3.1",
@@ -26,7 +27,8 @@
2627
"build": "EXTEND_ESLINT=true GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=true react-scripts build",
2728
"test": "EXTEND_ESLINT=true react-scripts test",
2829
"eject": "react-scripts eject",
29-
"serve": "serve -c serve.json"
30+
"serve": "serve -c serve.json",
31+
"pseudo-translate": "node utils/pseudo-translate.js"
3032
},
3133
"eslintConfig": {
3234
"extends": "react-app"

‎src/AboutUsPage.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11

22
import React from 'react';
3+
import { useTranslation } from './app-state';
34

45
function AboutUsPage() {
6+
const { t } = useTranslation();
7+
58
return (
69
<div className="viewport ui-container static-ui-container" data-region="viewPortRegion">
710
<div>
@@ -12,14 +15,14 @@ function AboutUsPage() {
1215
<div className="static-title-container">
1316
<div>
1417
<h1 className="view-title">
15-
About Us
18+
{t('about-us')}
1619
</h1>
1720
</div>
1821
</div>
1922
<div className="static-main-container">
2023
<div className="static-container">
2124
<span className="static-message">
22-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
25+
{t('lorem-ipsum')}
2326
</span>
2427
</div>
2528
</div>

‎src/App.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
flex: 0 0 48px;
1818
background-color: black;
1919
text-align: center;
20+
display: flex;
21+
flex-direction: row;
22+
justify-content: center;
2023
padding-left: $maxScrollWidth;
2124
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
2225
}

‎src/AppFooter.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import { useTranslation } from './app-state';
34

45
import './AppFooter.scss';
56

@@ -8,6 +9,8 @@ import { ReactComponent as InstagramIcon } from './images/icons/ic_instagram.svg
89
import { ReactComponent as TwitterIcon } from './images/icons/ic_twitter.svg';
910

1011
export const AppFooter: React.FC = (props) => {
12+
const { t } = useTranslation();
13+
1114
const linkTo = {
1215
aboutus: '/aboutus',
1316
contactus: '/contactus',
@@ -17,68 +20,69 @@ export const AppFooter: React.FC = (props) => {
1720
shareTwitter: '/',
1821
shareInstagram: '/',
1922
};
23+
2024
return (
2125
<div className="container">
2226
<div className="app-footer">
2327
<div className="first-row">
2428
<div className="footer-column">
2529
<div className="title">
26-
BelleVie
30+
{t('bellvie')}
2731
</div>
2832
<div className="content">
29-
Commerce software that powers the next generation of digital experience
33+
{t('footer-1-content')}
3034
</div>
3135
</div>
3236
<div className="footer-column">
3337
<div className="title">
34-
Assistance
38+
{t('assistance')}
3539
</div>
3640
<div className="content">
3741
<Link to={linkTo.aboutus}>
38-
About Us
42+
{t('about-us')}
3943
</Link>
4044
<Link to={linkTo.contactus}>
41-
Contact
45+
{t('contact')}
4246
</Link>
4347
<Link to={linkTo.shippingreturns}>
44-
Shipping & Returns
48+
{t('shipping-and-returns')}
4549
</Link>
4650
<Link to={linkTo.termsandconditions}>
47-
Terms & Conditions
51+
{t('terms-and-conditions')}
4852
</Link>
4953
</div>
5054
</div>
5155
<div className="footer-column social">
5256
<div className="title">
53-
Find us Online
57+
{t('find-us-online')}
5458
</div>
5559
<div className="content">
56-
<Link to={linkTo.shareFacebook} aria-label="share facebook">
60+
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
5761
<FacebookIcon className="share-icon" />
58-
facebook
62+
{t('facebook')}
5963
</Link>
60-
<Link to={linkTo.shareTwitter} aria-label="share twitter">
64+
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
6165
<TwitterIcon className="share-icon" />
62-
twitter
66+
{t('twitter')}
6367
</Link>
64-
<Link to={linkTo.shareInstagram} aria-label="share instagram">
68+
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
6569
<InstagramIcon className="share-icon" />
66-
instagram
70+
{t('instagram')}
6771
</Link>
6872
</div>
6973
</div>
7074
</div>
7175
<div className="second-row">
7276
<div className="title">
73-
Find us Online
77+
{t('find-us-online')}
7478
</div>
75-
<Link to={linkTo.shareFacebook} aria-label="share facebook">
79+
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
7680
<FacebookIcon className="share-icon" />
7781
</Link>
78-
<Link to={linkTo.shareTwitter} aria-label="share twitter">
82+
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
7983
<TwitterIcon className="share-icon" />
8084
</Link>
81-
<Link to={linkTo.shareInstagram} aria-label="share instagram">
85+
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
8286
<InstagramIcon className="share-icon" />
8387
</Link>
8488
</div>

‎src/AppHeader.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@
77

88
&__logo {
99
flex: 1;
10-
padding-left: 60px;
10+
padding-left: 40px;
11+
}
12+
13+
&__language {
14+
margin-right: 20px;
1115
}
1216

1317
&__moltincartcontainer {

‎src/AppHeader.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import React from 'react';
22
import { Link } from "react-router-dom";
3+
import { ImageContainer } from './ImageContainer';
4+
import { useTranslation } from './app-state';
35

46
import './AppHeader.scss';
57
import headerLogo from './images/site-images/Company-Logo.svg';
6-
import { ImageContainer } from './ImageContainer';
78

89

910
export const AppHeader: React.FC = () => {
11+
const { t, selectedLanguage, setLanguage } = useTranslation();
12+
13+
const onChangeLang = (e: React.FocusEvent<HTMLSelectElement>) => {
14+
setLanguage(e.target.value);
15+
};
16+
1017
return (
1118
<div className="appheader">
1219
<div className="appheader__logo">
13-
<Link to="/" aria-label="logo image">
20+
<Link to="/" aria-label={t('bellvie-logo')}>
1421
<ImageContainer imgUrl={headerLogo} imgClassName="logo-image" alt="logoImage"/>
1522
</Link>
1623
</div>
24+
<div className="appheader__language">
25+
<select value={selectedLanguage} aria-label={t('language')} onChange={onChangeLang} onBlur={onChangeLang}>
26+
<option value="en">{t('english')}</option>
27+
<option value="fr">{t('french')}</option>
28+
</select>
29+
</div>
1730
<div className="appheader__moltincartcontainer">
1831
<span className="moltin-cart-button"></span>
1932
</div>

‎src/CompareCheck.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { useCompareProducts } from './app-state';
33
import { Product } from './service';
4+
import { useTranslation } from './app-state';
45

56
import './CompareCheck.scss';
67

@@ -11,6 +12,7 @@ interface CompareCheckProps {
1112

1213
export const CompareCheck: React.FC<CompareCheckProps> = (props) => {
1314
const { isComparing, isCompareEnabled, addToCompare, removeFromCompare } = useCompareProducts();
15+
const { t } = useTranslation();
1416

1517
const handleCompareClicked = () => {
1618
if (isComparing(props.product.id)) {
@@ -29,7 +31,7 @@ export const CompareCheck: React.FC<CompareCheckProps> = (props) => {
2931
checked={isComparing(props.product.id)}
3032
onChange={handleCompareClicked}
3133
/>
32-
<span>Compare</span>
34+
<span>{t('compare')}</span>
3335
</label>
3436
</div>
3537
);

‎src/CompareOverlay.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useHistory, useRouteMatch } from 'react-router-dom';
3-
import { useCompareProducts } from './app-state';
3+
import { useCompareProducts, useTranslation } from './app-state';
44
import { createCompareProductsUrl } from './routes';
55
import { ProductMainImage } from './ProductMainImage';
66
import { Product } from './service';
@@ -15,6 +15,7 @@ export const CompareOverlay: React.FC = (props) => {
1515
const compareUrl = createCompareProductsUrl();
1616
const compareUrlMatch = useRouteMatch(compareUrl);
1717
const isShowingOverlay = compareProducts.length > 0 && !compareUrlMatch;
18+
const { t } = useTranslation();
1819

1920
const handleCompareClicked = () => {
2021
history.push(compareUrl);
@@ -41,7 +42,7 @@ export const CompareOverlay: React.FC = (props) => {
4142
<div className="compareoverlay__productprice">{product.meta.display_price.without_tax.formatted}</div>
4243
</div>
4344
<div className="compareoverlay__removeproduct">
44-
<button className="epbtn --small" aria-label="Remove product from comparison" onClick={() => handleRemoveProduct(product)}>
45+
<button className="epbtn --small" aria-label={t('remove-from-comparison')} onClick={() => handleRemoveProduct(product)}>
4546
<svg fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
4647
<path d="M6 18L18 6M6 6l12 12"></path>
4748
</svg>
@@ -51,8 +52,8 @@ export const CompareOverlay: React.FC = (props) => {
5152
))}
5253
</div>
5354
<div className="compareoverlay__btns">
54-
<button className="epbtn --primary" aria-label="Compare" disabled={!compareEnabled} onClick={handleCompareClicked}>Compare</button>
55-
<button className="epbtn --shading" aria-label="Remove All" onClick={handleRemoveAllClicked}>Remove All</button>
55+
<button className="epbtn --primary" disabled={!compareEnabled} onClick={handleCompareClicked}>{t('compare')}</button>
56+
<button className="epbtn --shading" onClick={handleRemoveAllClicked}>{t('remove-all')}</button>
5657
</div>
5758
</div>
5859
);

‎src/CompareProducts.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { useCompareProducts } from './app-state';
2+
import { useCompareProducts, useTranslation } from './app-state';
33
import { ProductMainImage } from './ProductMainImage';
44
import { Product } from './service';
55

@@ -8,23 +8,20 @@ import './CompareProducts.scss';
88

99
export const CompareProducts: React.FC = () => {
1010
const { compareProducts, removeFromCompare } = useCompareProducts();
11+
const { t } = useTranslation();
1112

1213
const handleRemoveItem = (product: Product) => {
1314
removeFromCompare(product.id);
1415
};
1516

1617
return (
1718
<div className="compareproducts">
18-
<h1 className="compareproducts__title">Products comparison</h1>
19+
<h1 className="compareproducts__title">{t('products-comparison')}</h1>
1920
{compareProducts.length === 0
2021
? (
2122
<div className="compareproducts__noproducts">
22-
<p>
23-
There are no products for comparison.
24-
</p>
25-
<p>
26-
Try adding some products by clicking on the compare link.
27-
</p>
23+
<p>{t('no-comparison-products-1')}</p>
24+
<p>{t('no-comparison-products-2')}</p>
2825
</div>
2926
)
3027
: (
@@ -44,7 +41,7 @@ export const CompareProducts: React.FC = () => {
4441
<td key={product.id}>
4542
<div className="compareproducts__name">{product.name}</div>
4643
<div className="compareproducts__price">{product.meta.display_price.without_tax.formatted}</div>
47-
<div className="compareproducts__availability">{product.meta.stock.availability === 'in-stock' ? 'Available' : 'Out of stock'}</div>
44+
<div className="compareproducts__availability">{product.meta.stock.availability === 'in-stock' ? t('available') : t('out-of-stock')}</div>
4845
<div className="compareproducts__addtocart">
4946
<span
5047
className="moltin-buy-button"
@@ -55,31 +52,31 @@ export const CompareProducts: React.FC = () => {
5552
))}
5653
</tr>
5754
<tr className="compareproducts__datarow">
58-
<td>Bulb</td>
55+
<td>{t('bulb')}</td>
5956
{compareProducts.map(product => (
6057
<td key={product.id}>{product.bulb}</td>
6158
))}
6259
</tr>
6360
<tr className="compareproducts__datarow">
64-
<td>Wattage</td>
61+
<td>{t('wattage')}</td>
6562
{compareProducts.map(product => (
6663
<td key={product.id}>{product.max_watt}</td>
6764
))}
6865
</tr>
6966
<tr className="compareproducts__datarow">
70-
<td>Bulb Qty</td>
67+
<td>{t('bulb-qty')}</td>
7168
{compareProducts.map(product => (
7269
<td key={product.id}>{product.bulb_qty}</td>
7370
))}
7471
</tr>
7572
<tr className="compareproducts__datarow">
76-
<td>Material</td>
73+
<td>{t('material')}</td>
7774
{compareProducts.map(product => (
7875
<td key={product.id}>{product.material}</td>
7976
))}
8077
</tr>
8178
<tr className="compareproducts__datarow">
82-
<td>Finish</td>
79+
<td>{t('finish')}</td>
8380
{compareProducts.map(product => (
8481
<td key={product.id}>{product.finish}</td>
8582
))}
@@ -89,7 +86,7 @@ export const CompareProducts: React.FC = () => {
8986
{compareProducts.map(product => (
9087
<td key={product.id}>
9188
<button onClick={() => handleRemoveItem(product)} className="epbtn --small">
92-
Remove
89+
{t('remove')}
9390
</button>
9491
</td>
9592
))}

‎src/ContactUsPage.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11

22
import React from 'react';
3+
import { useTranslation } from './app-state';
34

45
function ContactUsPage() {
6+
const { t } = useTranslation();
7+
58
return (
69
<div className="viewport ui-container static-ui-container" data-region="viewPortRegion">
710
<div>
@@ -12,14 +15,14 @@ function ContactUsPage() {
1215
<div className="static-title-container">
1316
<div>
1417
<h1 className="view-title">
15-
Contact Us
18+
{t('contact-us')}
1619
</h1>
1720
</div>
1821
</div>
1922
<div className="static-main-container">
2023
<div className="static-container">
2124
<span className="static-message">
22-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
25+
{t('lorem-ipsum')}
2326
</span>
2427
</div>
2528
</div>

0 commit comments

Comments
 (0)