Fakultas Ilmu Komputer UI

Commit 4b0f0c52 authored by Ilma Ainur Rohma's avatar Ilma Ainur Rohma
Browse files

Merge branch 'ilmarohma/35/redesign-detail-transaksi' into 'dev'

PBI 12 : Redesign Detail Transaksi

Closes #35

See merge request !22
parents ec303d40 86af42d0
Pipeline #80341 passed with stages
in 4 minutes and 40 seconds
This diff is collapsed.
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
"react-moment": "^0.9.7", "react-moment": "^0.9.7",
"react-number-format": "^4.4.1", "react-number-format": "^4.4.1",
"react-promise-tracker": "^2.1.0", "react-promise-tracker": "^2.1.0",
"react-toastify": "^7.0.3" "react-toastify": "^7.0.3",
"reactstrap": "^8.9.0"
}, },
"scripts": { "scripts": {
"start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html", "start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html",
...@@ -80,8 +81,8 @@ ...@@ -80,8 +81,8 @@
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"jest-sonar-reporter": "^2.0.0", "jest-sonar-reporter": "^2.0.0",
"mutationobserver-shim": "^0.3.5", "mutationobserver-shim": "^0.3.5",
"parcel": "1.12.3", "parcel": "^2.0.0-beta.2",
"parcel-bundler": "1.12.3", "parcel-bundler": "^1.12.5",
"prettier": "^2.0.5", "prettier": "^2.0.5",
"regenerator-runtime": "^0.13.5" "regenerator-runtime": "^0.13.5"
}, },
......
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import "./index.css"; import "./index.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./App"; import App from "./App";
ReactDOM.render(<App />, document.getElementById("root")); ReactDOM.render(<App />, document.getElementById("root"));
...@@ -3,8 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData"; ...@@ -3,8 +3,8 @@ import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core"; import { css } from "@emotion/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import PhoneIcon from "@material-ui/icons/Phone"; import PhoneIcon from "@material-ui/icons/Phone";
import PhotoIcon from "@material-ui/icons/Photo"; import ImageIcon from '@material-ui/icons/Image';
import ContactsIcon from "@material-ui/icons/Contacts"; import LocationOnIcon from '@material-ui/icons/LocationOn';
import { Link, navigate } from "@reach/router"; import { Link, navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person"; import PersonIcon from "@material-ui/icons/Person";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
...@@ -23,9 +23,12 @@ import DialogActions from "@material-ui/core/DialogActions"; ...@@ -23,9 +23,12 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent"; import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle"; import DialogTitle from "@material-ui/core/DialogTitle";
import FormStatus from "./FormStatus"; import FormStatus from "./FormStatus";
import { Container, Row, Col } from 'reactstrap';
import "moment-timezone"; import "moment-timezone";
import Moment from "react-moment"; import Moment from "react-moment";
const DetailTransaksi = ({ idTransaksi }) => { const DetailTransaksi = ({ idTransaksi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`; const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
const [transaction, error] = useFetchSingleData(url); const [transaction, error] = useFetchSingleData(url);
...@@ -62,7 +65,6 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -62,7 +65,6 @@ const DetailTransaksi = ({ idTransaksi }) => {
margin: 2rem 3rem 3rem 3rem; margin: 2rem 3rem 3rem 3rem;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 125vh;
`} `}
> >
{error && <ErrorDiv>Something error</ErrorDiv>} {error && <ErrorDiv>Something error</ErrorDiv>}
...@@ -93,27 +95,36 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -93,27 +95,36 @@ const DetailTransaksi = ({ idTransaksi }) => {
KELOLA TRANSAKSI KELOLA TRANSAKSI
</div> </div>
</div> </div>
<br></br><br></br>
<Container>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
margin-right: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
display: flex; display: flex;
align-content: space-between; align-content: space-between;
font-weight: bold;
`} `}
> >
<div Kode Transaksi
css={css` </div>
display: flex; </Col>
`} <Col md="3">
>
<div <div
css={css` css={css`
margin-right: 1rem; margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`} `}
> >
Kode Transaksi: <div>: {transaction.transaction_number}</div>
</div>
<div>{transaction.transaction_number}</div>
</div> </div>
</Col>
<Col md="5">
{transaction.transaction_status !== "005" && {transaction.transaction_status !== "005" &&
transaction.transaction_status !== "006" && transaction.transaction_status !== "006" &&
transaction.transaction_status !== "007" && ( transaction.transaction_status !== "007" && (
...@@ -125,90 +136,158 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -125,90 +136,158 @@ const DetailTransaksi = ({ idTransaksi }) => {
}} }}
/> />
)} )}
</div> </Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
margin-right: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
display: flex;
`} `}
> >
Status
</div>
</Col>
<Col md="8">
<div <div
css={css` css={css`
margin-right: 1rem; margin-right: 1rem;
font-size: 1.5rem;
display: flex;
`} `}
> > :{" "}
Status:{" "}
</div>
<Status <Status
label={transaction.readable_transaction_status} label={transaction.readable_transaction_status}
status={transaction.transaction_status} status={transaction.transaction_status}
/> />
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
font-size: 1.2rem; font-size: 1.2rem;
display: flex; margin-right: 0.5rem;
`} `}
> >
Tanggal Pembuatan
</div>
</Col>
<Col md="8">
<div <div
css={css` css={css`
font-size: 1.2rem;
margin-right: 0.5rem; margin-right: 0.5rem;
`} `}
> >
Tanggal Pembuatan:{" "} : {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.created_at} />}
</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.created_at} />}</div>
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
font-size: 1.2rem; font-size: 1.2rem;
display: flex; margin-right: 0.5rem;
`} `}
> >
Tanggal Pembaruan
</div>
</Col>
<Col md="8">
<div <div
css={css` css={css`
font-size: 1.2rem;
margin-right: 0.5rem; margin-right: 0.5rem;
`} `}
> >
Tanggal Update:{" "} : {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.updated_at} />}
</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.updated_at} />}</div>
</div> </div>
</Col>
</Row> <br></br>
<Row style={{paddingBottom:8}}>
<Col>
<div <div
css={css` css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex; display: flex;
align-content: space-between;
font-weight: bold;
`}
>
Identitas Pembeli
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<PersonIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline; align-items: baseline;
`} `}
> >
<PersonIcon style={{ color: "FFC80A" }} />
<Link to={`/pengguna/${transaction.user}`}> <Link to={`/pengguna/${transaction.user}`}>
{transaction.user_full_name} / {transaction.user_username} {transaction.user_full_name} / {transaction.user_username}
</Link> </Link>
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<PhoneIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div <div
css={css` css={css`
display: flex;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline; align-items: baseline;
`} `}
> >
<PhoneIcon style={{ color: "FFC80A" }} />
<div>{transaction.user_phone_number}</div> <div>{transaction.user_phone_number}</div>
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div <div
css={css` css={css`
display: flex; font-size: 1.2rem;
flex-direction: column; align-items: baseline;
`} `}
> >
<LocationOnIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div <div
css={css` css={css`
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
<ContactsIcon style={{ color: "FFC80A", marginRight: "4px" }} /> <div>
{`${transaction.shipping_address}, {`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood}, RT ${transaction.shipping_neighborhood},
RW ${transaction.shipping_hamlet}, RW ${transaction.shipping_hamlet},
...@@ -216,6 +295,25 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -216,6 +295,25 @@ const DetailTransaksi = ({ idTransaksi }) => {
Kecamatan ${transaction.shipping_sub_district}`} Kecamatan ${transaction.shipping_sub_district}`}
</div> </div>
</div> </div>
</Col>
</Row> <br></br>
<Row style={{paddingBottom:8}}>
<Col>
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
Detail Pembayaran
</div>
</Col>
</Row>
</Container>
<br></br>
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table aria-label="simple table"> <Table aria-label="simple table">
<TableHead> <TableHead>
...@@ -270,29 +368,22 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -270,29 +368,22 @@ const DetailTransaksi = ({ idTransaksi }) => {
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer> <br></br>
<div <Container>
css={css`
display: flex;
flex-direction: column;
`}
>
{" "}
<div
css={css`
font-size: 1.4rem;
font-weight: bold;
`}
>
Detail Pembayaran
</div>
{transaction.payment_method === "COD" && ( {transaction.payment_method === "COD" && (
<div <div
css={css` css={css`
font-size: 1.3rem; font-size: 1.3rem;
`} `}
> >
Jenis Pembayaran: Cash On Delivery <Row style={{paddingBottom:8}}>
<Col md="4">
Jenis Pembayaran:
</Col>
<Col md="8">
: Cash On Delivery
</Col>
</Row>
</div> </div>
)} )}
{transaction.payment_method === "TRF" && ( {transaction.payment_method === "TRF" && (
...@@ -301,102 +392,139 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -301,102 +392,139 @@ const DetailTransaksi = ({ idTransaksi }) => {
font-size: 1.3rem; font-size: 1.3rem;
`} `}
> >
Jenis Pembayaran: Transfer
<div>
{transaction.proof_of_payment === null ? ( {transaction.proof_of_payment === null ? (
<div>User belum mengirimkan bukti pembayaran</div> <div>
) : ( <Row style={{paddingBottom:8}}>
<Col md="3">
Jenis Pembayaran
</Col>
<Col md="6">
: Transfer
</Col>
</Row>
<Row><Col style={{color:"red"}}>
<div <div
css={css` css={css`
display: flex; font-size: 1rem;
flex-direction: column;
`} `}
> >
User belum mengirimkan bukti pembayaran
</div>
</Col></Row>
</div>
):(
<div>
<Row style={{paddingBottom:8}}>
<Col md="4">
Jenis Pembayaran
</Col>
<Col md="6">
: Transfer
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
display: flex; margin-right: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
Nama Pengirim
</div>
</Col>
<Col md="6">
<div <div
css={css` css={css`
margin-right: 1rem; margin-right: 1rem;
font-size: 1.2rem;
`} `}
> >
Nama Pengirim:{" "} : {transaction.user_bank_account_name}
</div>
<div>{transaction.user_bank_account_name}</div>
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
display: flex; margin-right: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
Nama Bank Pengirim
</div>
</Col>
<Col md="6">
<div <div
css={css` css={css`
margin-right: 1rem; margin-right: 1rem;
font-size: 1.2rem;
`} `}
> >
Nama Bank Pengirim:{" "} : {transaction.user_bank_name}
</div>
<div>{transaction.user_bank_account_name}</div>
</div> </div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div <div
css={css` css={css`
display: flex; margin-right: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
Rekening Tujuan
</div>
</Col>
<Col md="6">
<div <div