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,129 +95,225 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -93,129 +95,225 @@ const DetailTransaksi = ({ idTransaksi }) => {
KELOLA TRANSAKSI KELOLA TRANSAKSI
</div> </div>
</div> </div>
<div <br></br><br></br>
css={css` <Container>
font-size: 1.5rem; <Row style={{paddingBottom:8}}>
display: flex; <Col md="4">
align-content: space-between; <div
`} css={css`
> margin-right: 1rem;
<div font-size: 1.5rem;
css={css` display: flex;
display: flex; align-content: space-between;
`} font-weight: bold;
> `}
<div >
Kode Transaksi
</div>
</Col>
<Col md="3">
<div
css={css`
margin-right: 1rem;
font-size: 1.5rem;
display: flex;
align-content: space-between;
font-weight: bold;
`}
>
<div>: {transaction.transaction_number}</div>
</div>
</Col>
<Col md="5">
{transaction.transaction_status !== "005" &&
transaction.transaction_status !== "006" &&
transaction.transaction_status !== "007" && (
<FormStatus
{...{
idTransaksi,
defaultStatus: transaction.transaction_status,
paymentMethod: transaction.payment_method,
}}
/>
)}
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="4">
<div
css={css` css={css`
margin-right: 1rem; margin-right: 1rem;
font-size: 1.5rem;
`} `}
> >
Kode Transaksi: Status
</div> </div>
<div>{transaction.transaction_number}</div> </Col>
</div> <Col md="8">
{transaction.transaction_status !== "005" && <div
transaction.transaction_status !== "006" && css={css`
transaction.transaction_status !== "007" && (
<FormStatus
{...{
idTransaksi,
defaultStatus: transaction.transaction_status,
paymentMethod: transaction.payment_method,
}}
/>
)}
</div>
<div
css={css`
font-size: 1.5rem;
display: flex;
`}
>
<div
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>
<div </Col>
css={css` </Row>
font-size: 1.2rem; <Row style={{paddingBottom:8}}>
display: flex; <Col md="4">
`} <div
> css={css`
<div font-size: 1.2rem;
css={css` margin-right: 0.5rem;
margin-right: 0.5rem; `}
`} >
> Tanggal Pembuatan
Tanggal Pembuatan:{" "} </div>
</div> </Col>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.created_at} />}</div> <Col md="8">
</div> <div
<div css={css`
css={css` font-size: 1.2rem;
font-size: 1.2rem; margin-right: 0.5rem;
display: flex; `}
`} >
> : {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.created_at} />}
<div </div>
css={css` </Col>
margin-right: 0.5rem; </Row>
`} <Row style={{paddingBottom:8}}>
> <Col md="4">
Tanggal Update:{" "} <div
</div> css={css`
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={transaction.updated_at} />}</div> font-size: 1.2rem;
</div> margin-right: 0.5rem;
<div `}
css={css` >
display: flex; Tanggal Pembaruan
font-size: 1.2rem; </div>
align-items: baseline; </Col>
`} <Col md="8">
> <div
<PersonIcon style={{ color: "FFC80A" }} /> css={css`
<Link to={`/pengguna/${transaction.user}`}> font-size: 1.2rem;
{transaction.user_full_name} / {transaction.user_username} margin-right: 0.5rem;
</Link> `}
</div> >
: {<Moment format={"DD MMMM YYYY HH:mm"} tz="Asia/Jakarta" date={transaction.updated_at} />}
<div </div>
css={css` </Col>
display: flex; </Row> <br></br>
font-size: 1.2rem; <Row style={{paddingBottom:8}}>
align-items: baseline; <Col>
`} <div
> css={css`
<PhoneIcon style={{ color: "FFC80A" }} /> margin-right: 1rem;
<div>{transaction.user_phone_number}</div> font-size: 1.5rem;
</div> display: flex;
<div align-content: space-between;
css={css` font-weight: bold;
display: flex; `}
flex-direction: column; >
`} Identitas Pembeli
> </div>
<div </Col>
css={css` </Row>
font-size: 1.2rem; <Row style={{paddingBottom:8}}>
`} <Col md="1">
> <div
<ContactsIcon style={{ color: "FFC80A", marginRight: "4px" }} /> css={css`
{`${transaction.shipping_address}, font-size: 1.2rem;
RT ${transaction.shipping_neighborhood}, align-items: baseline;
RW ${transaction.shipping_hamlet}, `}
Kelurahan ${transaction.shipping_urban_village}, >
Kecamatan ${transaction.shipping_sub_district}`} <PersonIcon style={{ color: "2C5EDD" }} />
</div> </div>
</div> </Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<Link to={`/pengguna/${transaction.user}`}>
{transaction.user_full_name} / {transaction.user_username}
</Link>
</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
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<div>{transaction.user_phone_number}</div>
</div>
</Col>
</Row>
<Row style={{paddingBottom:8}}>
<Col md="1">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<LocationOnIcon style={{ color: "2C5EDD" }} />
</div>
</Col>
<Col md="11">
<div
css={css`
font-size: 1.2rem;
align-items: baseline;
`}
>
<div>
{`${transaction.shipping_address},
RT ${transaction.shipping_neighborhood},
RW ${transaction.shipping_hamlet},
Kelurahan ${transaction.shipping_urban_village},
Kecamatan ${transaction.shipping_sub_district}`}
</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,133 +368,163 @@ const DetailTransaksi = ({ idTransaksi }) => { ...@@ -270,133 +368,163 @@ 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" && (
<div <div
css={css` css={css`
font-size: 1.3rem; font-size: 1.3rem;
`} `}
> >
Jenis Pembayaran: Transfer {transaction.proof_of_payment === null ? (
<div> <div>
{transaction.proof_of_payment === null ? ( <Row style={{paddingBottom:8}}>
<div>User belum mengirimkan bukti pembayaran</div> <Col md="3">
) : ( Jenis Pembayaran
<div </Col>
<Col md="6">
: Transfer
</Col>
</Row>
<Row><Col style={{color:"red"}}>
<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
css={css`
margin-right: 1rem;
font-size: 1.2rem;
`}
>
Nama Pengirim
</div>
</Col>
<Col md="6">
<div <div
css={css` css={css`
display: flex; margin-right: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
<div : {transaction.user_bank_account_name}
css={css`
margin-right: 1rem;
`}
>
Nama Pengirim:{" "}
</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;
`} `}
> >
<div Nama Bank Pengirim
css={css`
margin-right: 1rem;
`}
>
Nama Bank Pengirim:{" "}
</div>
<div>{transaction.user_bank_account_name}</div>
</div> </div>
</Col>
<Col md="6">
<div <div
css={css` css={css`
display: flex; margin-right: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
align-items: baseline;
`} `}
> >
<div : {transaction.user_bank_name}