Skip to content
This repository was archived by the owner on Nov 4, 2024. It is now read-only.

Commit 32cfae1

Browse files
NawfalAhmedNawfalAhmed
committed
feat: design changes for subscriptions
1 parent 1ef0847 commit 32cfae1

17 files changed

+866
-110
lines changed

‎src/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { messages as paragonMessages } from '@edx/paragon';
1717
import messages from './i18n';
1818
import configureStore from './store';
1919
import NotFoundPage from './components/NotFoundPage';
20-
import { ConnectedOrderHistoryPage } from './order-history';
20+
import { OrdersAndSubscriptionsPage } from './orders-and-subscriptions';
2121

2222
import './index.scss';
2323

@@ -27,7 +27,7 @@ subscribe(APP_READY, () => {
2727
<Header />
2828
<main>
2929
<Switch>
30-
<Route path="/orders" component={ConnectedOrderHistoryPage} />
30+
<Route path="/orders" component={OrdersAndSubscriptionsPage} />
3131
<Route path="/notfound" component={NotFoundPage} />
3232
<Route path="*" component={NotFoundPage} />
3333
</Switch>

‎src/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $fa-font-path: "~font-awesome/fonts";
1111
@import "~@edx/frontend-component-footer/dist/footer";
1212

1313
@import "./order-history/style";
14+
@import "./orders-and-subscriptions/style";
1415

1516
.word-break-all {
1617
word-break: break-all !important;

‎src/order-history/OrderHistoryPage.jsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -182,33 +182,37 @@ class OrderHistoryPage extends React.Component {
182182
} = this.props;
183183
const loaded = !loading && !loadingError;
184184
const hasOrders = orders.length > 0;
185+
const heading = this.props.intl.formatMessage(
186+
messages['ecommerce.order.history.page.heading'],
187+
);
185188

186189
return (
187-
<div className="page__order-history container-fluid py-5">
188-
<h1>
189-
{this.props.intl.formatMessage(messages['ecommerce.order.history.page.heading'])}
190-
</h1>
191-
{loadingError ? this.renderError() : null}
192-
{loaded && hasOrders ? (
193-
<>
194-
<MediaQuery query="(max-width: 768px)">
195-
{this.renderMobileOrdersTable()}
196-
</MediaQuery>
197-
<MediaQuery query="(min-width: 769px)">
198-
{this.renderOrdersTable()}
199-
</MediaQuery>
200-
{this.renderPagination()}
201-
</>
202-
) : null}
203-
{loaded && !hasOrders ? this.renderEmptyMessage() : null}
204-
{loading ? this.renderLoading() : null}
205-
</div>
190+
<section className="page__order-history">
191+
{this.props.isB2CSubsEnabled ? <h2>{heading}</h2> : <h1>{heading}</h1>}
192+
<div>
193+
{loadingError ? this.renderError() : null}
194+
{loaded && hasOrders ? (
195+
<>
196+
<MediaQuery query="(max-width: 768px)">
197+
{this.renderMobileOrdersTable()}
198+
</MediaQuery>
199+
<MediaQuery query="(min-width: 769px)">
200+
{this.renderOrdersTable()}
201+
</MediaQuery>
202+
{this.renderPagination()}
203+
</>
204+
) : null}
205+
{loaded && !hasOrders ? this.renderEmptyMessage() : null}
206+
{loading ? this.renderLoading() : null}
207+
</div>
208+
</section>
206209
);
207210
}
208211
}
209212

210213
OrderHistoryPage.propTypes = {
211214
intl: intlShape.isRequired,
215+
isB2CSubsEnabled: PropTypes.bool.isRequired,
212216
orders: PropTypes.arrayOf(PropTypes.shape({
213217
datePlaced: PropTypes.string,
214218
total: PropTypes.string,

‎src/order-history/OrderHistoryPage.test.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const storeMocks = {
1212
ordersLoaded: require('./__mocks__/ordersLoaded.mockStore'),
1313
};
1414
const requiredOrderHistoryPageProps = {
15+
isB2CSubsEnabled: false,
1516
fetchOrders: () => {},
1617
};
1718

‎src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap‎

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,98 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<OrderHistoryPage /> Renders correctly in various states renders orders table with pagination 1`] = `
4-
<div
5-
className="page__order-history container-fluid py-5"
4+
<section
5+
className="page__order-history"
66
>
77
<h1>
88
Order History
99
</h1>
10-
<nav
11-
aria-label="pagination navigation"
12-
className="pagination-default"
13-
>
14-
<div
15-
aria-atomic={true}
16-
aria-live="polite"
17-
aria-relevant="text"
18-
className="sr-only"
10+
<div>
11+
<nav
12+
aria-label="pagination navigation"
13+
className="pagination-default"
1914
>
20-
Page 2, Current Page, of 10
21-
</div>
22-
<ul
23-
className="pagination"
24-
>
25-
<li
26-
className="page-item"
15+
<div
16+
aria-atomic={true}
17+
aria-live="polite"
18+
aria-relevant="text"
19+
className="sr-only"
20+
>
21+
Page 2, Current Page, of 10
22+
</div>
23+
<ul
24+
className="pagination"
2725
>
28-
<button
29-
aria-label="Previous, Page 1"
30-
className="previous page-link btn btn-primary"
31-
disabled={false}
32-
onClick={[Function]}
33-
type="button"
26+
<li
27+
className="page-item"
3428
>
35-
<div>
36-
<span
37-
className="pgn__icon"
38-
>
39-
<svg
40-
aria-hidden={true}
41-
fill="none"
42-
focusable={false}
43-
height={24}
44-
role="img"
45-
viewBox="0 0 24 24"
46-
width={24}
47-
xmlns="http://www.w3.org/2000/svg"
29+
<button
30+
aria-label="Previous, Page 1"
31+
className="previous page-link btn btn-primary"
32+
disabled={false}
33+
onClick={[Function]}
34+
type="button"
35+
>
36+
<div>
37+
<span
38+
className="pgn__icon"
4839
>
49-
<path
50-
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"
51-
fill="currentColor"
52-
/>
53-
</svg>
54-
</span>
55-
Previous
56-
</div>
57-
</button>
58-
</li>
59-
<li
60-
className="page-item"
61-
>
62-
<button
63-
aria-label="Next, Page 3"
64-
className="next page-link btn btn-primary"
65-
disabled={false}
66-
onClick={[Function]}
67-
type="button"
40+
<svg
41+
aria-hidden={true}
42+
fill="none"
43+
focusable={false}
44+
height={24}
45+
role="img"
46+
viewBox="0 0 24 24"
47+
width={24}
48+
xmlns="http://www.w3.org/2000/svg"
49+
>
50+
<path
51+
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"
52+
fill="currentColor"
53+
/>
54+
</svg>
55+
</span>
56+
Previous
57+
</div>
58+
</button>
59+
</li>
60+
<li
61+
className="page-item"
6862
>
69-
<div>
70-
Next
71-
<span
72-
className="pgn__icon"
73-
>
74-
<svg
75-
aria-hidden={true}
76-
fill="none"
77-
focusable={false}
78-
height={24}
79-
role="img"
80-
viewBox="0 0 24 24"
81-
width={24}
82-
xmlns="http://www.w3.org/2000/svg"
63+
<button
64+
aria-label="Next, Page 3"
65+
className="next page-link btn btn-primary"
66+
disabled={false}
67+
onClick={[Function]}
68+
type="button"
69+
>
70+
<div>
71+
Next
72+
<span
73+
className="pgn__icon"
8374
>
84-
<path
85-
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
86-
fill="currentColor"
87-
/>
88-
</svg>
89-
</span>
90-
</div>
91-
</button>
92-
</li>
93-
</ul>
94-
</nav>
95-
</div>
75+
<svg
76+
aria-hidden={true}
77+
fill="none"
78+
focusable={false}
79+
height={24}
80+
role="img"
81+
viewBox="0 0 24 24"
82+
width={24}
83+
xmlns="http://www.w3.org/2000/svg"
84+
>
85+
<path
86+
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
87+
fill="currentColor"
88+
/>
89+
</svg>
90+
</span>
91+
</div>
92+
</button>
93+
</li>
94+
</ul>
95+
</nav>
96+
</div>
97+
</section>
9698
`;

‎src/order-history/index.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import ConnectedOrderHistoryPage from './OrderHistoryPage';
1+
import OrderHistoryPage from './OrderHistoryPage';
22
import reducer from './reducer';
33
import saga from './saga';
44
import { storeName } from './selectors';
55

6-
export {
7-
ConnectedOrderHistoryPage,
8-
reducer,
9-
saga,
10-
storeName,
11-
};
6+
export default OrderHistoryPage;
7+
export { reducer, saga, storeName };

‎src/orders-and-subscriptions/OrdersAndSubscriptionsPage.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useEffect } from 'react';
2+
import { FormattedMessage } from '@edx/frontend-platform/i18n';
3+
4+
import Subscriptions from '../subscriptions';
5+
import OrderHistory from '../order-history';
6+
7+
const OrdersAndSubscriptionsPage = () => {
8+
// TODO: get from waffle-flag
9+
const isB2CSubsEnabled = true;
10+
11+
useEffect(() => {
12+
if (isB2CSubsEnabled) {
13+
document.title = 'Orders and Subscriptions | edX';
14+
}
15+
}, [isB2CSubsEnabled]);
16+
17+
if (!isB2CSubsEnabled) {
18+
return (
19+
<div className="page__orders-and-subscriptions container-fluid py-5">
20+
<OrderHistory isB2CSubsEnabled={false} />
21+
</div>
22+
);
23+
}
24+
25+
return (
26+
<div className="page__orders-and-subscriptions container-fluid py-4.5">
27+
<div className="section">
28+
<FormattedMessage
29+
id="ecommerce.order.history.main.heading"
30+
defaultMessage="My orders and subscriptions"
31+
description="Heading for orders and subscriptions page."
32+
>
33+
{(text) => <h1 className="text-primary-700">{text}</h1>}
34+
</FormattedMessage>
35+
<FormattedMessage
36+
id="ecommerce.order.history.main.subtitle"
37+
defaultMessage="Manage your program subscriptions and view your order history."
38+
description="Subtitle of Heading for orders and subscriptions page."
39+
>
40+
{(text) => <span className="text-dark-900">{text}</span>}
41+
</FormattedMessage>
42+
</div>
43+
<Subscriptions />
44+
<OrderHistory isB2CSubsEnabled />
45+
</div>
46+
);
47+
};
48+
49+
export default OrdersAndSubscriptionsPage;

‎src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* eslint-disable global-require */
2+
import React from 'react';
3+
import renderer from 'react-test-renderer';
4+
import { Provider } from 'react-redux';
5+
import { IntlProvider } from '@edx/frontend-platform/i18n';
6+
import configureMockStore from 'redux-mock-store';
7+
8+
import OrdersAndSubscriptionsPage from './OrdersAndSubscriptionsPage';
9+
10+
const mockStore = configureMockStore();
11+
const storeMocks = {
12+
ordersLoaded: require('../order-history/__mocks__/ordersLoaded.mockStore'),
13+
};
14+
15+
describe('<OrdersAndSubscriptions />', () => {
16+
describe('Renders correctly in various states', () => {
17+
it('renders with orders and subscriptions', () => {
18+
const tree = renderer
19+
.create(
20+
<IntlProvider locale="en">
21+
<Provider store={mockStore(storeMocks.ordersLoaded)}>
22+
<OrdersAndSubscriptionsPage />
23+
</Provider>
24+
</IntlProvider>,
25+
)
26+
.toJSON();
27+
expect(tree).toMatchSnapshot();
28+
});
29+
});
30+
});

0 commit comments

Comments
 (0)