Skip to content

Commit af821c6

Browse files
petro97petro97
authored
MT-2841 Purchase History page (#44)
* Create Purchase History page * Create Order Details page * Update styles on Order Details page * Remove unused code * Fixed typos
1 parent 5892750 commit af821c6

File tree

14 files changed

+375
-13
lines changed

14 files changed

+375
-13
lines changed

‎src/AccountDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { useState} from 'react';
33
import {Link, useHistory} from 'react-router-dom';
44
import useOnclickOutside from 'react-cool-onclickoutside';
5-
import { useCustomerData, useTranslation } from './app-state';
5+
import {useCustomerData, useTranslation} from './app-state';
66
import { createAccountUrl } from './routes';
77
import { LoginDialog } from './LoginDialog';
88
import { ReactComponent as AccountIcon } from './images/icons/ic_account.svg';

‎src/AppHeader.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
33
// @ts-ignore
44
import { Offline } from 'react-detect-offline';
55
import { ImageContainer } from './ImageContainer';
6-
import { useTranslation } from './app-state';
6+
import {useCustomerData, useTranslation} from './app-state';
77
import { LanguageDropdown } from './LanguageDropdown';
88
import { SearchBar } from './SearchBar';
99
import { AccountDropdown } from './AccountDropdown';
@@ -15,6 +15,8 @@ import './AppHeader.scss';
1515

1616
export const AppHeader: React.FC = () => {
1717
const { t } = useTranslation();
18+
const { id } = useCustomerData();
19+
1820
return (
1921
<div className="appheader">
2022
<div className="appheader__container">
@@ -30,7 +32,10 @@ export const AppHeader: React.FC = () => {
3032
<LanguageDropdown />
3133
</div>
3234
<div className="appheader__moltincartcontainer">
33-
<span className="moltin-cart-button"></span>
35+
<span
36+
className="moltin-cart-button"
37+
key={id}
38+
></span>
3439
</div>
3540
<div className="appheader__account">
3641
<AccountDropdown />

‎src/OrderDetails.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import './theme/common';
2+
3+
.orderdetail {
4+
width: 100%;
5+
padding: 40px;
6+
7+
&__link {
8+
text-decoration: none;
9+
font-size: 16px;
10+
11+
&:hover {
12+
text-decoration: underline;
13+
}
14+
}
15+
16+
&__title {
17+
font-weight: bold;
18+
font-size: 22px;
19+
margin: 30px 0;
20+
21+
&.--main {
22+
text-align: center;
23+
}
24+
}
25+
26+
&__details {
27+
display: flex;
28+
flex-wrap: wrap;
29+
margin: 40px 0;
30+
}
31+
32+
&__body {
33+
flex: auto;
34+
color: #4C5666;
35+
}
36+
37+
&__table {
38+
width: 100%;
39+
}
40+
41+
&__tr {
42+
padding: 10px 0;
43+
44+
&:nth-child(2n-1) {
45+
background-color: $firstComplimentBackground;
46+
}
47+
}
48+
49+
&__td {
50+
padding: 10px;
51+
}
52+
53+
&__block {
54+
padding: 10px 0;
55+
}
56+
57+
&__addresses {
58+
margin-right: 40px;
59+
display: inline-block;
60+
}
61+
}

‎src/OrderDetails.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import { useLocation } from 'react-router-dom';
3+
import { Link } from 'react-router-dom';
4+
import { ReactComponent as ArrowLeft } from './images/icons/arrow_left.svg';
5+
import { useTranslation } from './app-state';
6+
7+
import './OrderDetails.scss';
8+
9+
interface LocationState {
10+
order: any;
11+
}
12+
13+
export const OrderDetails: React.FC = () => {
14+
const { t } = useTranslation();
15+
const location = useLocation<LocationState>();
16+
const orderData = location?.state?.order;
17+
18+
return (
19+
<div className="orderdetail">
20+
<Link to="/account/purchase-history" className="orderdetail__link">
21+
<ArrowLeft />
22+
{t('back')}
23+
</Link>
24+
<h1 className="orderdetail__title --main">{t('purchase-details')}</h1>
25+
{orderData && (
26+
<div className="orderdetail__details">
27+
<div className="orderdetail__body">
28+
<div className="orderdetail__title">{t('summary')}</div>
29+
<table className="orderdetail__table">
30+
<tbody>
31+
<tr className="orderdetail__tr">
32+
<td className="orderdetail__td">{t('status')}:</td>
33+
<td className="orderdetail__td">{orderData.status}</td>
34+
</tr>
35+
<tr className="orderdetail__tr">
36+
<td className="orderdetail__td">{t('order-tax-total')}:</td>
37+
<td className="orderdetail__td">
38+
{orderData.meta.display_price.tax.formatted}
39+
</td>
40+
</tr>
41+
<tr className="orderdetail__tr">
42+
<td className="orderdetail__td">{t('order-purchase-date')}:</td>
43+
<td className="orderdetail__td">
44+
{orderData.meta.timestamps.created_at}
45+
</td>
46+
</tr>
47+
<tr className="py-4">
48+
<td className="orderdetail__td">{t('order-total')}:</td>
49+
<td className="orderdetail__td">
50+
{orderData.meta.display_price.with_tax.formatted}
51+
</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
<div className="orderdetail__details">
56+
<div className="orderdetail__addresses">
57+
<span className="orderdetail__title">{t('shipping-address')}</span>
58+
<div className="orderdetail__block">
59+
<div>
60+
{orderData.shipping_address.first_name}{' '}
61+
{orderData.shipping_address.last_name}
62+
</div>
63+
<div>{orderData.shipping_address.line_1}</div>
64+
<div>
65+
{orderData.shipping_address.city},{' '}
66+
{orderData.shipping_address.county},{' '}
67+
{orderData.shipping_address.country}
68+
</div>
69+
<div>{orderData.shipping_address.postcode}</div>
70+
</div>
71+
</div>
72+
<div className="orderdetail__addresses">
73+
<span className="orderdetail__title">{t('billing-address')}</span>
74+
<div className="orderdetail__block">
75+
<div>
76+
{orderData.billing_address.first_name}{' '}
77+
{orderData.billing_address.last_name}
78+
</div>
79+
<div>{orderData.billing_address.line_1}</div>
80+
<div>
81+
{orderData.billing_address.city},{' '}
82+
{orderData.billing_address.county},{' '}
83+
{orderData.billing_address.country}
84+
</div>
85+
<div>{orderData.billing_address.postcode}</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
)}
92+
</div>
93+
)
94+
};

‎src/PurchaseHistory.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import './theme/common';
2+
3+
.purchasehistory {
4+
5+
&__title {
6+
font-weight: bold;
7+
font-size: 26px;
8+
}
9+
10+
&__table {
11+
table-layout: auto;
12+
width: 100%;
13+
}
14+
15+
&__tr {
16+
background-color: $fourthComplimentBackground;
17+
}
18+
19+
&__link {
20+
font-weight: bold;
21+
22+
&:hover {
23+
text-decoration: underline;
24+
}
25+
}
26+
27+
&__th {
28+
font-weight: bold;
29+
padding: 16px;
30+
border: 1px solid $fourthComplimentBackground;
31+
text-align: center;
32+
}
33+
34+
&__td {
35+
text-align: center;
36+
padding: 20px;
37+
border: 1px solid $fourthComplimentBackground;
38+
}
39+
}

‎src/PurchaseHistory.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { useOrdersData, useTranslation } from './app-state';
4+
import { Purchase as IPurchase } from './service';
5+
6+
import './PurchaseHistory.scss';
7+
8+
export const PurchaseHistory: React.FC = () => {
9+
const { t } = useTranslation();
10+
const { ordersData } = useOrdersData();
11+
12+
return (
13+
<div className="purchasehistory">
14+
<h1 className="purchasehistory__title">{t('purchase-history')}</h1>
15+
16+
<div>
17+
{ordersData && ordersData.length ? (
18+
<table className="purchasehistory__table">
19+
<thead>
20+
<tr className="purchasehistory__tr">
21+
<th className="purchasehistory__th">{t('date')}</th>
22+
<th className="purchasehistory__th">{t('status')}</th>
23+
<th className="purchasehistory__th">{t('total')}</th>
24+
<th className="purchasehistory__th">{t('payment')}</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
{ordersData.map((order: IPurchase)=> (
29+
<tr key={order.id}>
30+
<td className="purchasehistory__td">
31+
<Link
32+
to={{
33+
pathname: `/orderdetails/${order.id}`,
34+
state: { order }
35+
}}
36+
className="purchasehistory__link"
37+
>
38+
{order.meta.timestamps.created_at}
39+
</Link>
40+
</td>
41+
<td className="purchasehistory__td">
42+
{order.status}
43+
</td>
44+
<td className="purchasehistory__td">
45+
{order.meta.display_price.with_tax.formatted}
46+
</td>
47+
<td className="purchasehistory__td">
48+
{order.payment}
49+
</td>
50+
</tr>
51+
))}
52+
</tbody>
53+
</table>
54+
) : (
55+
<div>
56+
{t('no-purchase-message')}
57+
</div>
58+
)}
59+
</div>
60+
</div>
61+
)
62+
};

‎src/SideMenu.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import React, {useState} from 'react';
33
import { Link, useLocation } from 'react-router-dom';
44
import useOnclickOutside from 'react-cool-onclickoutside';
55
import { useTranslation } from "./app-state";
6-
import {createAccountUrl, createAddressUrl} from './routes';
6+
import { createAccountUrl, createAddressUrl, createPurchaseHistoryUrl } from './routes';
77

88
import './SideMenu.scss'
99

1010
export const SideMenu: React.FC = (props) => {
1111
const { t } = useTranslation();
1212
const accountUrl = createAccountUrl();
1313
const addressUrl = createAddressUrl();
14+
const purchaseHistoryUrl = createPurchaseHistoryUrl();
1415
const location = useLocation();
1516

1617
const [isOpen, setIsOpen] = useState(false);
@@ -29,7 +30,8 @@ export const SideMenu: React.FC = (props) => {
2930

3031
const sideMenuItems = [
3132
{ to: accountUrl, children: 'my-account' },
32-
{ to: addressUrl, children: 'addresses' }
33+
{ to: addressUrl, children: 'addresses' },
34+
{ to: purchaseHistoryUrl, children: 'purchase-history' }
3335
];
3436

3537
sideMenuItems.push();

0 commit comments

Comments
 (0)