購入が完了しました
13 |
22 |
20 |
22 | );
23 | };
24 |
25 | export { TimelineLoading };
26 |
--------------------------------------------------------------------------------
/isucari/webapp/frontend/src/containers/BuyerTransactionContainer.tsx:
--------------------------------------------------------------------------------
1 | import { AppState } from '../index';
2 | import { connect } from 'react-redux';
3 | import { TransactionBuyer } from '../components/TransactionBuyer';
4 | import { postCompleteAction } from '../actions/postCompleteAction';
5 | import { ThunkDispatch } from 'redux-thunk';
6 | import { ActionTypes } from '../actions/actionTypes';
7 |
8 | const mapStateToProps = (state: AppState) => ({});
9 | const mapDispatchToProps = (
10 | dispatch: ThunkDispatch
23 |
25 |
22 |
24 |
24 |
26 |
40 |
49 |
50 | );
51 | }
52 | }
53 |
54 | export const LoadingButton = withStyles(styles)(BaseLoadingButton);
55 |
--------------------------------------------------------------------------------
/isucari/webapp/frontend/src/components/ItemFooter/ItemFooter.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import { ItemFooter } from '.';
4 | import { Typography } from '@material-ui/core';
5 | import { ReactElement } from 'react';
6 |
7 | const stories = storiesOf('components/ItemFooter', module);
8 |
9 | const getMockButton = (
10 | text: string,
11 | disabled: boolean,
12 | tooltip?: ReactElement,
13 | ) => ({
14 | onClick: (e: React.MouseEvent) => {},
15 | buttonText: text,
16 | disabled,
17 | tooltip,
18 | });
19 |
20 | const mockProps = {
21 | price: 1000,
22 | buttons: [getMockButton('購入', false)],
23 | };
24 |
25 | stories
26 | .add('single button', () => 
39 | 
43 | 
4 |
5 | ISUCARIは椅子を売りたい人／買いたい人をつなげるフリマアプリです。
6 | 従来のECサービスと比べて以下の特徴があります。
7 |
8 | * 安心安全の決済基盤
9 | * 匿名配送により住所を伝えなくても取引が可能に
10 | * 買いたい／売りたいと思った時にすぐに使えるシンプルさ
11 |
12 | ## ISUCARIの使い方
13 |
14 | ### 椅子を売ろう！
15 |
16 | #### まずは椅子を出品しよう！
17 |
18 | 1. 椅子の情報をいれよう！
19 | - タイムラインページの右下の出品ボタンを押すと出品画面にいくよ！
20 | - シンプルなフォームに情報を入力すれば即出品♪
21 | - 
22 | 1. 売れるのを待とう！
23 | - あなたの椅子が買われるのを楽しみに待とう♪
24 | 1. 椅子を発送しよう！
25 | - 無事購入されたら椅子を発送しよう！
26 | - 商品ページかマイページから取引画面に行こう👀
27 |
28 | #### 売れた椅子を発送しよう！
29 |
30 | 1. 集荷予約をしよう！
31 | - 集荷予約をして椅子を送る準備をしよう😤
32 | - 集荷予約は取引画面からできるぞ！
33 | - 
34 | 1. 配達員に椅子をわたそう！
35 | - 配達員が来たらQRコードを見せよう📱
36 | - 椅子を渡したら発送完了ボタンを押そう♪
37 | - 
38 | 1. 購入者の受け取りを待とう！
39 | - 椅子が届くのをまとう♪
40 | - 届いたかどうかは取引画面で確認できるぞ！
41 | - 購入者が椅子を受け取ったら取引完了♪
42 |
43 | ### 椅子を買おう！
44 |
45 | 1. ほしい椅子を探そう！
46 | - タイムライン、カテゴリタイムラインから好みの椅子を探そう👀
47 | - カテゴリタイムラインへはサイドバーからいけるよ！
48 | - 
49 | 1. 椅子を買おう！
50 | - 運命の椅子を見つけたら購入しよう😎
51 | - カード番号を入力して簡単1ステップ購入！
52 | - 
53 | 1. 椅子が届くのを待とう⏱
54 | - 出品者が発送するのを待とう！
55 | - 発送されたかどうかは取引画面で確認できるぞ！
56 | 1. 取引を完了しよう！
57 | - 椅子が届いたら「取引完了」をしよう！
58 | - これで取引完了♪
59 |
60 | ## キャンペーン機能について
61 |
62 | マニュアルを参照
63 |
64 | ## 外部サービスの仕様
65 |
66 | [外部サービス仕様書](EXTERNAL_SERVICE_SPEC.md) を参照
67 |
68 | ## ISUCARI ステータス遷移表
69 |
70 | | | WHO | items | transaction_evidences | shippings |
71 | |------------------------|:------:|:--------:|:---------------------:|:-------------------:|
72 | | /sell （出品） | 出品者 | on_sale | - | - |
73 | | /buy （購入） | 購入者 | trading | wait_shipping | initial |
74 | | /ship （集荷予約） | 出品者 | ↓ | ↓ | wait_pickup |
75 | | /ship_done （発送完了）| 出品者 | ↓ | wait_done | shipping or done |
76 | | /complete （取引完了） | 購入者 | sold_out | done | done |
77 |
--------------------------------------------------------------------------------
/isucari/webapp/frontend/src/reducers/pageReducuer.ts:
--------------------------------------------------------------------------------
1 | import {
2 | FETCH_ITEM_FAIL,
3 | FETCH_ITEM_START,
4 | FETCH_ITEM_SUCCESS,
5 | } from '../actions/fetchItemAction';
6 | import {
7 | FETCH_SETTINGS_FAIL,
8 | FETCH_SETTINGS_START,
9 | FETCH_SETTINGS_SUCCESS,
10 | } from '../actions/settingsAction';
11 | import {
12 | FETCH_TIMELINE_FAIL,
13 | FETCH_TIMELINE_SUCCESS,
14 | } from '../actions/fetchTimelineAction';
15 | import {
16 | FETCH_USER_PAGE_DATA_FAIL,
17 | FETCH_USER_PAGE_DATA_START,
18 | FETCH_USER_PAGE_DATA_SUCCESS,
19 | } from '../actions/fetchUserPageDataAction';
20 | import { PATH_NAME_CHANGE } from '../actions/locationChangeAction';
21 | import { ActionTypes } from '../actions/actionTypes';
22 |
23 | export interface PageState {
24 | isLoading: boolean;
25 | isItemLoading: boolean;
26 | isTimelineLoading: boolean;
27 | isUserPageLoading: boolean;
28 | }
29 |
30 | const initialState: PageState = {
31 | isLoading: true,
32 | isItemLoading: true,
33 | isTimelineLoading: true,
34 | isUserPageLoading: true,
35 | };
36 |
37 | const pathChangeState: PageState = {
38 | isLoading: false, // Settings取得時しかtrueにならない
39 | isItemLoading: true,
40 | isTimelineLoading: true,
41 | isUserPageLoading: true,
42 | };
43 |
44 | const page = (
45 | state: PageState = initialState,
46 | action: ActionTypes,
47 | ): PageState => {
48 | switch (action.type) {
49 | // Item page
50 | case FETCH_ITEM_START:
51 | return { ...state, isItemLoading: true };
52 | case FETCH_ITEM_SUCCESS:
53 | case FETCH_ITEM_FAIL:
54 | return { ...state, isItemLoading: false };
55 | // Timeline
56 | case FETCH_TIMELINE_SUCCESS:
57 | case FETCH_TIMELINE_FAIL:
58 | return { ...state, isTimelineLoading: false };
59 | // Settings
60 | case FETCH_SETTINGS_START:
61 | return { ...state, isLoading: true };
62 | case FETCH_SETTINGS_SUCCESS:
63 | case FETCH_SETTINGS_FAIL:
64 | return { ...state, isLoading: false };
65 | // User page
66 | case FETCH_USER_PAGE_DATA_START:
67 | return { ...state, isUserPageLoading: true };
68 | case FETCH_USER_PAGE_DATA_SUCCESS:
69 | case FETCH_USER_PAGE_DATA_FAIL:
70 | return { ...state, isUserPageLoading: false };
71 | // Location change
72 | case PATH_NAME_CHANGE:
73 | return pathChangeState;
74 | default:
75 | return { ...state };
76 | }
77 | };
78 |
79 | export default page;
80 |
--------------------------------------------------------------------------------
/isucari/webapp/frontend/src/components/TransactionComponent/TransactionComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Card from '@material-ui/core/Card';
3 | import makeStyles from '@material-ui/core/styles/makeStyles';
4 | import { TransactionItem } from '../../dataObjects/item';
5 | import CardMedia from '@material-ui/core/CardMedia/CardMedia';
6 | import CardContent from '@material-ui/core/CardContent/CardContent';
7 | import Typography from '@material-ui/core/Typography/Typography';
8 | import { TransactionLabel } from '../TransactionLabel';
9 | import { Theme } from '@material-ui/core';
10 | import CardActionArea from '@material-ui/core/CardActionArea';
11 |
12 | const MAX_ITEM_NAME_LENGTH = 30;
13 |
14 | const useStyles = makeStyles((theme: Theme) => ({
15 | card: {
16 | display: 'flex',
17 | justifyContent: 'flex-start',
18 | flexDirection: 'row',
19 | },
20 | detail: {
21 | display: 'flex',
22 | flexDirection: 'column',
23 | },
24 | itemTitle: {
25 | paddingLeft: theme.spacing(1),
26 | paddingRight: theme.spacing(3),
27 | paddingBottom: theme.spacing(2),
28 | },
29 | img: {
30 | width: '130px',
31 | height: '130px',
32 | },
33 | }));
34 |
35 | interface Props {
36 | item: TransactionItem;
37 | onClickCard: (item: TransactionItem) => void;
38 | }
39 |
40 | const TransactionComponent: React.FC
56 |
57 |
62 | {item.name.length > MAX_ITEM_NAME_LENGTH
63 | ? item.name.substr(0, MAX_ITEM_NAME_LENGTH) + '...'
64 | : item.name}
65 |
66 |
68 |
69 |
70 |
71 |
72 | {labelName}
73 |
74 |
75 |
76 | );
77 | };
78 |
79 | export { TransactionLabel };
80 |
--------------------------------------------------------------------------------
/isucari/webapp/frontend/src/actions/postBumpAction.ts:
--------------------------------------------------------------------------------
1 | import AppClient from '../httpClients/appClient';
2 | import { ThunkAction, ThunkDispatch } from 'redux-thunk';
3 | import { Action } from 'redux';
4 | import { ErrorRes, BumpReq, BumpRes } from '../types/appApiTypes';
5 | import { AppResponseError } from '../errors/AppResponseError';
6 | import { AppState } from '../index';
7 | import { SnackBarAction } from './actionTypes';
8 |
9 | export const POST_BUMP_START = 'POST_BUMP_START';
10 | export const POST_BUMP_SUCCESS = 'POST_BUMP_SUCCESS';
11 | export const POST_BUMP_FAIL = 'POST_BUMP_FAIL';
12 |
13 | export type PostBumpActions =
14 | | PostBumpStartAction
15 | | PostBumpSuccessAction
16 | | PostBumpFailAction;
17 |
18 | type ThunkResult
48 | 出品されている商品はありません
49 |
51 | );
52 | }
53 |
54 | const lastItem = items[items.length - 1];
55 | const loadMoreItems = loadMore.bind(
56 | null,
57 | lastItem.createdAt,
58 | lastItem.id,
59 | );
60 | return (
61 |
62 |
65 | );
66 | };
67 |
68 | return (
69 |
52 | 
53 |
84 |
53 |
54 |
55 | 椅子限定のフリマサイト ついにリリース！
56 |
57 |
62 | 安心安全にあなただけの椅子を手に入れよう！
63 |
64 |
65 |
74 |
83 |
58 | ✔ 安全なカード決済
59 | ✔ お互い匿名で安心配送
60 |
61 |
72 | 住所
73 | {address}
75 |
76 |
77 | 出品数
78 | {numSellItems}
80 |
81 |