mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
ConversationPage, OrderPage, SalesConversationPage
This commit is contained in:
Vesa Luusua
parent
068d61b3af
commit
3c41b0cebe
7 changed files with 270 additions and 0 deletions
|
|
@ -3,11 +3,14 @@ import { Match, Miss, Redirect } from 'react-router';
|
|||
import {
|
||||
AuthenticationPage,
|
||||
CheckoutPage,
|
||||
ConversationPage,
|
||||
InboxPage,
|
||||
LandingPage,
|
||||
ListingPage,
|
||||
OrderPage,
|
||||
ProfilePage,
|
||||
EditProfilePage,
|
||||
SalesConversationPage,
|
||||
SearchPage,
|
||||
NotFoundPage,
|
||||
} from './containers';
|
||||
|
|
@ -102,6 +105,36 @@ class Routes extends React.Component {
|
|||
pattern="/sales"
|
||||
component={ (props) => <InboxPage { ...props } filter="sales" /> } />
|
||||
|
||||
{/* Order/Conversation and mobile views */}
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/conversation/:id"
|
||||
component={ ConversationPage } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id"
|
||||
component={ (props) => <OrderPage { ...props } tab="discussion" /> } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id/discussion"
|
||||
component={ (props) => <OrderPage { ...props } tab="discussion" /> } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id/details"
|
||||
component={ (props) => <OrderPage { ...props } tab="details" /> } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="discussion" /> } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id/discussion"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="discussion" /> } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id/details"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="details" /> } />
|
||||
|
||||
<Miss component={ NotFoundPage } />
|
||||
|
||||
</div>
|
||||
|
|
|
|||
11
src/containers/ConversationPage/ConversationPage.js
Normal file
11
src/containers/ConversationPage/ConversationPage.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Conversation page">
|
||||
<p>Conversation id: { params.id }</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
17
src/containers/OrderPage/OrderPage.js
Normal file
17
src/containers/OrderPage/OrderPage.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Order page" >
|
||||
<p>Order id: { params.id }</p>
|
||||
<Link to={ `/order/${params.id}/discussion` }>Discussion tab</Link>
|
||||
<br />
|
||||
<Link to={ `/order/${params.id}/details` }>Details tab</Link>
|
||||
<p>Mobile layout needs different views for discussion and details.</p>
|
||||
<p>Discussion view is the default if route doesn't specify mobile tab (e.g. <i>/order/1234</i>)</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
16
src/containers/OrderPage/OrderPage.test.js
Normal file
16
src/containers/OrderPage/OrderPage.test.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import OrderPage from './OrderPage';
|
||||
|
||||
describe('OrderPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
<BrowserRouter>
|
||||
<OrderPage params={{ id: 1234 }} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
170
src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
Normal file
170
src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
exports[`OrderPage matches snapshot 1`] = `
|
||||
<div
|
||||
className={undefined}>
|
||||
<div
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/s"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Search
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/l/Bike-Pelago-12345"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Listing page
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/u/Bikerrs"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Profile
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/u/Bikerrs/edit"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Edit profile
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/checkout/lid1234"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Checkout
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/inbox"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Inbox
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/orders"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/sales"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Sales
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/password/forgotten"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Request password
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/password/change"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Change password
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/listings"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Manage listings
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Account settings
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account/contact-details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Contact details
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account/notifications"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Notification settings
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account/payment-methods"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Payment methods
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account/payout-preferences"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Payout preferences
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/account/security"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Order page
|
||||
</h1>
|
||||
<p>
|
||||
Order id:
|
||||
1234
|
||||
</p>
|
||||
<a
|
||||
className=""
|
||||
href="/order/1234/discussion"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Discussion tab
|
||||
</a>
|
||||
<br />
|
||||
<a
|
||||
className=""
|
||||
href="/order/1234/details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Details tab
|
||||
</a>
|
||||
<p>
|
||||
Mobile layout needs different views for discussion and details.
|
||||
</p>
|
||||
<p>
|
||||
Discussion view is the default if route doesn\'t specify mobile tab (e.g.
|
||||
<i>
|
||||
/order/1234
|
||||
</i>
|
||||
)
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Sales conversation page" >
|
||||
<p>Sale id: { params.id }</p>
|
||||
<Link to={ `/sale/${params.id}/discussion` }>Discussion tab</Link>
|
||||
<br />
|
||||
<Link to={ `/sale/${params.id}/details` }>Details tab</Link>
|
||||
<p>Mobile layout needs different views for discussion and details.</p>
|
||||
<p>Discussion view is the default if route doesn't specify mobile tab (e.g. <i>/order/1234</i>)</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,21 +1,27 @@
|
|||
import AuthenticationPage from './AuthenticationPage/AuthenticationPage';
|
||||
import CheckoutPage from './CheckoutPage/CheckoutPage';
|
||||
import ConversationPage from './ConversationPage/ConversationPage';
|
||||
import EditProfilePage from './EditProfilePage/EditProfilePage';
|
||||
import InboxPage from './InboxPage/InboxPage';
|
||||
import LandingPage from './LandingPage/LandingPage';
|
||||
import ListingPage from './ListingPage/ListingPage';
|
||||
import OrderPage from './OrderPage/OrderPage';
|
||||
import ProfilePage from './ProfilePage/ProfilePage';
|
||||
import SalesConversationPage from './SalesConversationPage/SalesConversationPage';
|
||||
import SearchPage from './SearchPage/SearchPage';
|
||||
import NotFoundPage from './NotFoundPage/NotFoundPage';
|
||||
|
||||
export {
|
||||
AuthenticationPage,
|
||||
CheckoutPage,
|
||||
ConversationPage,
|
||||
EditProfilePage,
|
||||
InboxPage,
|
||||
LandingPage,
|
||||
ListingPage,
|
||||
OrderPage,
|
||||
ProfilePage,
|
||||
SalesConversationPage,
|
||||
SearchPage,
|
||||
NotFoundPage,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue