@@ -24,11 +24,11 @@ | |||
"static/runtime/polyfills.js", | |||
"static/runtime/polyfills.js.map" | |||
], | |||
"/suzuki/home": [ | |||
"/yamaha/cart/checkout": [ | |||
"static/runtime/webpack.js", | |||
"static/runtime/main.js" | |||
], | |||
"/suzuki/product/product_detail": [ | |||
"/yamaha/product/product": [ | |||
"static/runtime/webpack.js", | |||
"static/runtime/main.js" | |||
] | |||
@@ -1 +1 @@ | |||
{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/suzuki/home":"static/development/pages/suzuki/home.js","/suzuki/product/product_detail":"static/development/pages/suzuki/product/product_detail.js"} | |||
{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/yamaha/cart/checkout":"static/development/pages/yamaha/cart/checkout.js","/yamaha/product/product":"static/development/pages/yamaha/product/product.js"} |
@@ -1,266 +1,246 @@ | |||
/*! | |||
========================================================= | |||
* NextJS Material Kit - v1.1.0 based on Material Kit - v2.0.2 and Material Kit React - v1.8.0 | |||
========================================================= | |||
* Product Page: https://www.creative-tim.com/product/nextjs-material-kit | |||
* Copyright 2020 Creative Tim (https://www.creative-tim.com) | |||
* Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md) | |||
========================================================= | |||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | |||
*/ | |||
// ############################## | |||
// // // Variables - Styles that are used on more than one component | |||
// ############################# | |||
const hexColorToRGB = function(hexColor) { | |||
let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000 | |||
hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) { | |||
return r + r + g + g + b + b; | |||
}); | |||
const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff | |||
return hex_array | |||
? { | |||
r: parseInt(hex_array[1], 16), // 0-255 | |||
g: parseInt(hex_array[2], 16), // 0-255 | |||
b: parseInt(hex_array[3], 16) // 0-255 | |||
} | |||
: null; | |||
}; | |||
const hexToRGBAlpha = function(hexColor, alpha) { | |||
let rgb = hexColorToRGB(hexColor); | |||
return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`; | |||
}; | |||
const drawerWidth = 260; | |||
const transition = { | |||
transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)" | |||
}; | |||
const conatinerFluid = { | |||
paddingRight: "15px", | |||
paddingLeft: "15px", | |||
marginRight: "auto", | |||
marginLeft: "auto", | |||
width: "100%" | |||
}; | |||
const container = { | |||
...conatinerFluid, | |||
"@media (min-width: 576px)": { | |||
maxWidth: "540px" | |||
}, | |||
"@media (min-width: 768px)": { | |||
maxWidth: "720px" | |||
}, | |||
"@media (min-width: 992px)": { | |||
maxWidth: "960px" | |||
}, | |||
"@media (min-width: 1200px)": { | |||
maxWidth: "1140px" | |||
} | |||
}; | |||
const boxShadow = { | |||
boxShadow: | |||
"0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)" | |||
}; | |||
const card = { | |||
display: "inline-block", | |||
position: "relative", | |||
width: "100%", | |||
margin: "25px 0", | |||
boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)", | |||
borderRadius: "3px", | |||
color: "rgba(0, 0, 0, 0.87)", | |||
background: "#fff" | |||
}; | |||
const defaultFont = { | |||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', | |||
fontWeight: "300", | |||
lineHeight: "1.5em" | |||
}; | |||
const primaryColor = "#9c27b0"; | |||
const warningColor = "#ff9800"; | |||
const dangerColor = "#f44336"; | |||
const successColor = "#4caf50"; | |||
const infoColor = "#00acc1"; | |||
const roseColor = "#e91e63"; | |||
const grayColor = "#999999"; | |||
const primaryBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
primaryColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
primaryColor, | |||
0.2 | |||
)}` | |||
}; | |||
const infoBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
infoColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
infoColor, | |||
0.2 | |||
)}` | |||
}; | |||
const successBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
successColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
successColor, | |||
0.2 | |||
)}` | |||
}; | |||
const warningBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
warningColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
warningColor, | |||
0.2 | |||
)}` | |||
}; | |||
const dangerBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
dangerColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
dangerColor, | |||
0.2 | |||
)}` | |||
}; | |||
const roseBoxShadow = { | |||
boxShadow: `0 4px 20px 0px ${hexToRGBAlpha( | |||
"#000", | |||
0.14 | |||
)}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}` | |||
}; | |||
const warningCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ffa726, #fb8c00)", | |||
...warningBoxShadow | |||
}; | |||
const successCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #66bb6a, #43a047)", | |||
...successBoxShadow | |||
}; | |||
const dangerCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ef5350, #e53935)", | |||
...dangerBoxShadow | |||
}; | |||
const infoCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #26c6da, #00acc1)", | |||
...infoBoxShadow | |||
}; | |||
const primaryCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ab47bc, #8e24aa)", | |||
...primaryBoxShadow | |||
}; | |||
const roseCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ec407a, #d81b60)", | |||
...roseBoxShadow | |||
}; | |||
const cardActions = { | |||
margin: "0 20px 10px", | |||
paddingTop: "10px", | |||
borderTop: "1px solid #eeeeee", | |||
height: "auto", | |||
...defaultFont | |||
}; | |||
const cardHeader = { | |||
margin: "-30px 15px 0", | |||
borderRadius: "3px", | |||
padding: "15px" | |||
}; | |||
const defaultBoxShadow = { | |||
border: "0", | |||
borderRadius: "3px", | |||
boxShadow: | |||
"0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", | |||
padding: "10px 0", | |||
transition: "all 150ms ease 0s" | |||
}; | |||
const title = { | |||
color: "#3C4858", | |||
margin: "1.75rem 0 0.875rem", | |||
textDecoration: "none", | |||
fontWeight: "700", | |||
fontFamily: `"Roboto Slab", "Times New Roman", serif` | |||
}; | |||
const cardTitle = { | |||
...title, | |||
marginTop: ".625rem" | |||
}; | |||
const cardLink = { | |||
"& + $cardLink": { | |||
marginLeft: "1.25rem" | |||
} | |||
}; | |||
const cardSubtitle = { | |||
marginBottom: "0", | |||
marginTop: "-.375rem" | |||
}; | |||
export { | |||
hexToRGBAlpha, | |||
//variables | |||
drawerWidth, | |||
transition, | |||
container, | |||
conatinerFluid, | |||
boxShadow, | |||
card, | |||
defaultFont, | |||
primaryColor, | |||
warningColor, | |||
dangerColor, | |||
successColor, | |||
infoColor, | |||
roseColor, | |||
grayColor, | |||
primaryBoxShadow, | |||
infoBoxShadow, | |||
successBoxShadow, | |||
warningBoxShadow, | |||
dangerBoxShadow, | |||
roseBoxShadow, | |||
warningCardHeader, | |||
successCardHeader, | |||
dangerCardHeader, | |||
infoCardHeader, | |||
primaryCardHeader, | |||
roseCardHeader, | |||
cardActions, | |||
cardHeader, | |||
defaultBoxShadow, | |||
title, | |||
cardTitle, | |||
cardLink, | |||
cardSubtitle | |||
}; | |||
const hexColorToRGB = function(hexColor) { | |||
let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000 | |||
hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) { | |||
return r + r + g + g + b + b; | |||
}); | |||
const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff | |||
return hex_array | |||
? { | |||
r: parseInt(hex_array[1], 16), // 0-255 | |||
g: parseInt(hex_array[2], 16), // 0-255 | |||
b: parseInt(hex_array[3], 16) // 0-255 | |||
} | |||
: null; | |||
}; | |||
const hexToRGBAlpha = function(hexColor, alpha) { | |||
let rgb = hexColorToRGB(hexColor); | |||
return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`; | |||
}; | |||
const drawerWidth = 260; | |||
const transition = { | |||
transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)" | |||
}; | |||
const conatinerFluid = { | |||
paddingRight: "15px", | |||
paddingLeft: "15px", | |||
marginRight: "auto", | |||
marginLeft: "auto", | |||
width: "100%" | |||
}; | |||
const container = { | |||
...conatinerFluid, | |||
"@media (min-width: 576px)": { | |||
maxWidth: "540px" | |||
}, | |||
"@media (min-width: 768px)": { | |||
maxWidth: "720px" | |||
}, | |||
"@media (min-width: 992px)": { | |||
maxWidth: "960px" | |||
}, | |||
"@media (min-width: 1200px)": { | |||
maxWidth: "1140px" | |||
} | |||
}; | |||
const boxShadow = { | |||
boxShadow: | |||
"0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)" | |||
}; | |||
const card = { | |||
display: "inline-block", | |||
position: "relative", | |||
width: "100%", | |||
margin: "25px 0", | |||
boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)", | |||
borderRadius: "3px", | |||
color: "rgba(0, 0, 0, 0.87)", | |||
background: "#fff" | |||
}; | |||
const defaultFont = { | |||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', | |||
fontWeight: "300", | |||
lineHeight: "1.5em" | |||
}; | |||
const primaryColor = "#9c27b0"; | |||
const warningColor = "#ff9800"; | |||
const dangerColor = "#f44336"; | |||
const successColor = "#4caf50"; | |||
const infoColor = "#00acc1"; | |||
const roseColor = "#e91e63"; | |||
const grayColor = "#999999"; | |||
const primaryBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
primaryColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
primaryColor, | |||
0.2 | |||
)}` | |||
}; | |||
const infoBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
infoColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
infoColor, | |||
0.2 | |||
)}` | |||
}; | |||
const successBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
successColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
successColor, | |||
0.2 | |||
)}` | |||
}; | |||
const warningBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
warningColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
warningColor, | |||
0.2 | |||
)}` | |||
}; | |||
const dangerBoxShadow = { | |||
boxShadow: `0 12px 20px -10px ${hexToRGBAlpha( | |||
dangerColor, | |||
0.28 | |||
)}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha( | |||
dangerColor, | |||
0.2 | |||
)}` | |||
}; | |||
const roseBoxShadow = { | |||
boxShadow: `0 4px 20px 0px ${hexToRGBAlpha( | |||
"#000", | |||
0.14 | |||
)}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}` | |||
}; | |||
const warningCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ffa726, #fb8c00)", | |||
...warningBoxShadow | |||
}; | |||
const successCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #66bb6a, #43a047)", | |||
...successBoxShadow | |||
}; | |||
const dangerCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ef5350, #e53935)", | |||
...dangerBoxShadow | |||
}; | |||
const infoCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #26c6da, #00acc1)", | |||
...infoBoxShadow | |||
}; | |||
const primaryCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ab47bc, #8e24aa)", | |||
...primaryBoxShadow | |||
}; | |||
const roseCardHeader = { | |||
color: "#fff", | |||
background: "linear-gradient(60deg, #ec407a, #d81b60)", | |||
...roseBoxShadow | |||
}; | |||
const cardActions = { | |||
margin: "0 20px 10px", | |||
paddingTop: "10px", | |||
borderTop: "1px solid #eeeeee", | |||
height: "auto", | |||
...defaultFont | |||
}; | |||
const cardHeader = { | |||
margin: "-30px 15px 0", | |||
borderRadius: "3px", | |||
padding: "15px" | |||
}; | |||
const defaultBoxShadow = { | |||
border: "0", | |||
borderRadius: "3px", | |||
boxShadow: | |||
"0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", | |||
padding: "10px 0", | |||
transition: "all 150ms ease 0s" | |||
}; | |||
const title = { | |||
color: "#3C4858", | |||
margin: "1.75rem 0 0.875rem", | |||
textDecoration: "none", | |||
fontWeight: "700", | |||
fontFamily: `"Roboto Slab", "Times New Roman", serif` | |||
}; | |||
const cardTitle = { | |||
...title, | |||
marginTop: ".625rem" | |||
}; | |||
const cardLink = { | |||
"& + $cardLink": { | |||
marginLeft: "1.25rem" | |||
} | |||
}; | |||
const cardSubtitle = { | |||
marginBottom: "0", | |||
marginTop: "-.375rem" | |||
}; | |||
export { | |||
hexToRGBAlpha, | |||
//variables | |||
drawerWidth, | |||
transition, | |||
container, | |||
conatinerFluid, | |||
boxShadow, | |||
card, | |||
defaultFont, | |||
primaryColor, | |||
warningColor, | |||
dangerColor, | |||
successColor, | |||
infoColor, | |||
roseColor, | |||
grayColor, | |||
primaryBoxShadow, | |||
infoBoxShadow, | |||
successBoxShadow, | |||
warningBoxShadow, | |||
dangerBoxShadow, | |||
roseBoxShadow, | |||
warningCardHeader, | |||
successCardHeader, | |||
dangerCardHeader, | |||
infoCardHeader, | |||
primaryCardHeader, | |||
roseCardHeader, | |||
cardActions, | |||
cardHeader, | |||
defaultBoxShadow, | |||
title, | |||
cardTitle, | |||
cardLink, | |||
cardSubtitle | |||
}; |
@@ -7,6 +7,7 @@ import { makeStyles } from "@material-ui/core/styles"; | |||
import List from "@material-ui/core/List"; | |||
import ListItem from "@material-ui/core/ListItem"; | |||
import Icon from "@material-ui/core/Icon"; | |||
// import People from "@material-ui/core/People"; | |||
import Chart from "@material-ui/icons/LocalGroceryStore"; | |||
// @material-ui/icons | |||
@@ -73,7 +74,7 @@ export default function HeaderLinks(props) { | |||
<Icon className={classes.icons}>wallet_travel</Icon> Career | |||
</Button> | |||
</ListItem> | |||
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> | |||
{/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}> | |||
<CustomDropdown | |||
noLiPadding | |||
navDropdown | |||
@@ -96,7 +97,7 @@ export default function HeaderLinks(props) { | |||
<a href="https://www.hino.co.id/" className={classes.dropdownLink}>Ketty Resto</a>, | |||
]} | |||
/> | |||
</ListItem> | |||
</ListItem> */} | |||
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> | |||
<Button | |||
href="/yamaha/abous_us/aboutus" | |||
@@ -107,6 +108,15 @@ export default function HeaderLinks(props) { | |||
</Button> | |||
</ListItem> | |||
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> | |||
<Button | |||
href="/yamaha/profile/profile" | |||
color="transparent" | |||
className={classes.navLink} | |||
> | |||
<Icon className={classes.icons}>people</Icon> Profile | |||
</Button> | |||
</ListItem> | |||
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> | |||
<Button href="/yamaha/cart/cart" color="transparent" className={classes.navLink}> | |||
<Chart className={classes.icons} /> | |||
</Button> | |||
@@ -1,20 +1,15 @@ | |||
import React from 'react'; | |||
import { makeStyles } from '@material-ui/core/styles'; | |||
import { MDBJumbotron, MDBContainer } from "mdbreact"; | |||
import clsx from 'clsx'; | |||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||
import Button1 from "components/CustomButtons/Button.js"; | |||
import image1 from "../../../assets/img/mail.png" | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import Card from "components/Card/Card.js"; | |||
import classNames from "classnames"; | |||
import Icon from "@material-ui/core/Icon"; | |||
import Stepper from '@material-ui/core/Stepper'; | |||
import Step from '@material-ui/core/Step'; | |||
import StepLabel from '@material-ui/core/StepLabel'; | |||
import StepContent from '@material-ui/core/StepContent'; | |||
import Paper from '@material-ui/core/Paper'; | |||
import Grid from '@material-ui/core/Grid'; | |||
import TextField from '@material-ui/core/TextField'; | |||
import Button from '@material-ui/core/Button'; | |||
@@ -33,8 +28,13 @@ import Radio from '@material-ui/core/Radio'; | |||
import RadioGroup from '@material-ui/core/RadioGroup'; | |||
import FormControlLabel from '@material-ui/core/FormControlLabel'; | |||
import FormControl from '@material-ui/core/FormControl'; | |||
import FormLabel from '@material-ui/core/FormLabel'; | |||
import value from '@material-ui/core/FormLabel'; | |||
import Select from '@material-ui/core/Select'; | |||
import MenuItem from '@material-ui/core/MenuItem'; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import CardHeader from "components/Card/CardHeader.js"; | |||
import CardFooter from "components/Card/CardFooter.js"; | |||
const useStyles = makeStyles((theme) => ({ | |||
root: { | |||
@@ -97,10 +97,6 @@ const useStyles = makeStyles((theme) => ({ | |||
}, | |||
})); | |||
function getSteps() { | |||
return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran']; | |||
} | |||
function StyledRadio(props) { | |||
const classes = useStyles(); | |||
return ( | |||
@@ -121,31 +117,13 @@ const Transition = React.forwardRef(function Transition(props, ref) { | |||
const DataCheckout = function ({ backend, checkoutproduct, ...props }) { | |||
const classes = useStyles(); | |||
const [activeStep, setActiveStep] = React.useState(0); | |||
const steps = getSteps(); | |||
const handleNext = () => { | |||
setActiveStep((prevActiveStep) => prevActiveStep + 1); | |||
}; | |||
const handleBack = () => { | |||
setActiveStep((prevActiveStep) => prevActiveStep - 1); | |||
}; | |||
const handleReset = () => { | |||
setActiveStep(0); | |||
}; | |||
const [open, setOpen] = React.useState(false); | |||
const handleClickOpen = () => { | |||
setOpen(true); | |||
}; | |||
const handleClose = () => { | |||
setOpen(false); | |||
}; | |||
const { ...rest } = props; | |||
const imageClasses = classNames( | |||
classes.imgRaised, | |||
@@ -154,201 +132,254 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) { | |||
); | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const CartAlamat = checkoutproduct.map((data) => { | |||
const CheckoutAlamat = checkoutproduct.map((data) => { | |||
return ( | |||
<div align="center"> | |||
<img src={image1} style={{width:"1100px"}}/><br></br> | |||
<h4>Alamat Pengiriman</h4> | |||
<hr></hr> | |||
<h5>Yusmar</h5> | |||
<h5>087797315685</h5> | |||
<h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<Typography variant="h6" align="left" className={classes.title}> | |||
Alamat Pengiriman | |||
</Typography><br></br> | |||
<img src={image1} style={{width:"1100px"}}/><br></br> | |||
<h5>Yusmar</h5> | |||
<h5>087797315685</h5> | |||
<h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5> | |||
<Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}> | |||
<Icon className={classes.icons}>cached</Icon> | |||
Ubah Alamat | |||
</Button1> | |||
<Button1 color="info" href={"/yamaha/profile/profile"}> | |||
<Icon className={classes.icons}>cached</Icon> | |||
Ubah Alamat | |||
</Button1> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const CartProdukPesanan = checkoutproduct.map((data) => { | |||
const CheckoutProdukPesanan = checkoutproduct.map((data) => { | |||
const handleChange = (event) => { | |||
setAge(event.target.value); | |||
}; | |||
const [age, setAge] = React.useState(''); | |||
return ( | |||
<div align="center"> | |||
<GridContainer> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Produk Dipesan</h4> | |||
<img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4></h4><br></br><br></br><br></br><br></br> | |||
<h5>{data.name}</h5> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Harga Satuan</h4><br></br><br></br><br></br> | |||
<h5>Rp.{data.price}</h5> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Jumlah Unit</h4><br></br><br></br><br></br> | |||
<h5>1 Unit</h5> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Sub Total Produk</h4><br></br><br></br><br></br> | |||
<h5>Total Rp.{data.price}</h5> | |||
</div> | |||
</Grid> | |||
</GridContainer> | |||
<GridContainer style={{padding:"20px"}}> | |||
<Grid item xs style={{padding:"20px"}}> | |||
<TextField | |||
id="outlined-full-width" | |||
label="Pesan" | |||
style={{ margin: 8 }} | |||
placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer" | |||
fullWidth | |||
margin="normal" | |||
InputLabelProps={{ | |||
shrink: true, | |||
}} | |||
variant="outlined" | |||
/> | |||
</Grid> | |||
<Grid item xs style={{padding:"20px"}}><br></br> | |||
<Button variant="outlined" color="primary" onClick={handleClickOpen}> | |||
Pilih Opsi Pengiriman | |||
</Button> | |||
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}> | |||
<AppBar className={classes.appBar}> | |||
<Toolbar> | |||
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close"> | |||
<CloseIcon /> | |||
</IconButton> | |||
<Typography variant="h6" className={classes.title}> | |||
Pilih Opsi Pengiriman | |||
</Typography> | |||
<Button autoFocus color="inherit" onClick={handleClose}> | |||
Pilih | |||
</Button> | |||
</Toolbar> | |||
</AppBar> | |||
<List> | |||
<ListItem button> | |||
<ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" /> | |||
</ListItem> | |||
<Divider /> | |||
<ListItem button> | |||
<ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" /> | |||
</ListItem> | |||
<ListItem button> | |||
<ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" /> | |||
</ListItem> | |||
</List> | |||
</Dialog> | |||
</Grid> | |||
<Grid item xs align="right" style={{padding:"20px"}}><br></br> | |||
Total Rp. {data.price} | |||
</Grid> | |||
</GridContainer> | |||
</div> | |||
); | |||
}) | |||
const CartMetodePembayaran = checkoutproduct.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center"> | |||
<Typography variant="h6" className={classes.title}> | |||
Pilih Metode Pembayaran | |||
</Typography><br></br> | |||
<FormControl component="fieldset"> | |||
<RadioGroup defaultValue="female" aria-label="gender"> | |||
<GridContainer justify="center" style={{marginTop:"-50px"}}> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/> | |||
<h4>Bank BCA</h4> | |||
</div> | |||
</Card> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<Typography variant="h6" align="left" className={classes.title}> | |||
Pesanan Produk | |||
</Typography><br></br><hr></hr> | |||
<GridContainer> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Produk Dipesan</h4> | |||
<img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||
</div> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/> | |||
<h4>Bank BRI</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4></h4><br></br><br></br><br></br><br></br> | |||
<h5>{data.name}</h5> | |||
</div> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/> | |||
<h4>Bank Mandiri</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Warna</h4><br></br><br></br><br></br> | |||
<FormControl className={classes.formControl}> | |||
<Select | |||
labelId="demo-simple-select-label" | |||
id="demo-simple-select" | |||
value={age} | |||
onChange={handleChange} | |||
> | |||
<MenuItem value={10}>Hitam</MenuItem> | |||
<MenuItem value={20}>Merah</MenuItem> | |||
<MenuItem value={30}>Biru</MenuItem> | |||
<MenuItem value={30}>Putih</MenuItem> | |||
</Select> | |||
</FormControl> | |||
</div> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/> | |||
<h4>Bank BNI</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Harga Satuan</h4><br></br><br></br><br></br> | |||
<h5>Rp.{data.price}</h5> | |||
</div> | |||
</Grid> | |||
</GridContainer> | |||
<GridContainer justify="center" style={{marginTop:"-50px"}}> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/> | |||
<h4>Bank BSI</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Jumlah Unit</h4><br></br><br></br><br></br> | |||
<FormControl className={classes.formControl}> | |||
<TextField | |||
id="outlined-number" | |||
type="number" | |||
align="center" | |||
InputLabelProps={{ | |||
shrink: true, | |||
}} | |||
/> | |||
</FormControl> | |||
</div> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/> | |||
<h4>Bank Permata</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs> | |||
<div align="center"> | |||
<h4>Sub Total Produk</h4><br></br><br></br><br></br> | |||
<h5>Total Rp.{data.price}</h5> | |||
</div> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/> | |||
<h4>Bank Danamon</h4> | |||
</div> | |||
</Card> | |||
</GridContainer> | |||
<GridContainer style={{padding:"20px"}}> | |||
<Grid item xs style={{padding:"20px"}}> | |||
<TextField | |||
id="outlined-full-width" | |||
label="Pesan" | |||
style={{ margin: 8 }} | |||
placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer" | |||
fullWidth | |||
margin="normal" | |||
InputLabelProps={{ | |||
shrink: true, | |||
}} | |||
variant="outlined" | |||
/> | |||
</Grid> | |||
<Grid item xs style={{padding:"20px"}}><br></br> | |||
<Button variant="outlined" color="primary" onClick={handleClickOpen}> | |||
Pilih Opsi Pengiriman | |||
</Button> | |||
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}> | |||
<AppBar className={classes.appBar}> | |||
<Toolbar> | |||
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close"> | |||
<CloseIcon /> | |||
</IconButton> | |||
<Typography variant="h6" className={classes.title}> | |||
Pilih Opsi Pengiriman | |||
</Typography> | |||
<Button autoFocus color="inherit" onClick={handleClose}> | |||
Pilih | |||
</Button> | |||
</Toolbar> | |||
</AppBar> | |||
<List> | |||
<ListItem button> | |||
<ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" /> | |||
</ListItem> | |||
<Divider /> | |||
<ListItem button> | |||
<ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" /> | |||
</ListItem> | |||
<ListItem button> | |||
<ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" /> | |||
</ListItem> | |||
</List> | |||
</Dialog> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/> | |||
<h4>Bank Maybank</h4> | |||
</div> | |||
</Card> | |||
<Grid item xs align="right" style={{padding:"20px"}}><br></br> | |||
Total Rp. {data.price} | |||
</Grid> | |||
</GridContainer> | |||
</RadioGroup> | |||
</FormControl> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const CheckoutMetodePembayaran = checkoutproduct.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center"> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<Typography variant="h6" align="left" className={classes.title}> | |||
Pilih Metode Pembayaran | |||
</Typography><br></br><hr></hr> | |||
<FormControl component="fieldset"> | |||
<RadioGroup defaultValue="female" aria-label="gender"> | |||
<GridContainer justify="center" style={{marginTop:"-50px"}}> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/> | |||
<h4>Bank BCA</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/> | |||
<h4>Bank BRI</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/> | |||
<h4>Bank Mandiri</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/> | |||
<h4>Bank BNI</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
</GridContainer> | |||
<GridContainer justify="center" style={{marginTop:"-50px"}}> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/> | |||
<h4>Bank BSI</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/> | |||
<h4>Bank Permata</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/> | |||
<h4>Bank Danamon</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
<Grid style={{padding:"25px"}}> | |||
<Card style={{width: "200px"}}> | |||
<div align="center"> | |||
<FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br> | |||
<img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/> | |||
<h4>Bank Maybank</h4> | |||
</div> | |||
</Card> | |||
</Grid> | |||
</GridContainer> | |||
</RadioGroup> | |||
</FormControl> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
</div> | |||
); | |||
@@ -357,56 +388,35 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) { | |||
return ( | |||
<div style={{padding:"50px"}}> | |||
<div align="center" className={classes.section} id="notifications"> | |||
<SnackbarContent | |||
message={ | |||
<h2><b>Checkout</b></h2> | |||
} | |||
align="center" | |||
color="danger" | |||
/> | |||
</div> | |||
<Stepper activeStep={activeStep} orientation="vertical"> | |||
{steps.map((label, index) => ( | |||
<Step key={label}> | |||
<StepLabel>{label}</StepLabel> | |||
<StepContent> | |||
<Typography>{CartMetodePembayaran}</Typography> | |||
<div className={classes.actionsContainer}> | |||
<div> | |||
<Button | |||
disabled={activeStep === 0} | |||
onClick={handleBack} | |||
className={classes.button} | |||
> | |||
Back | |||
</Button> | |||
<Button | |||
variant="contained" | |||
color="primary" | |||
onClick={handleNext} | |||
className={classes.button} | |||
> | |||
{activeStep === steps.length - 1 ? 'Buat Pesanan' : 'Next'} | |||
</Button> | |||
</div> | |||
</div> | |||
</StepContent> | |||
</Step> | |||
))} | |||
</Stepper> | |||
{activeStep === steps.length && ( | |||
<Paper square elevation={0} className={classes.resetContainer}> | |||
<Typography>Semua Langkah Sudah Selesai !!!</Typography> | |||
<Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}> | |||
<Icon className={classes.icons}>shopping_cart</Icon> | |||
Checkout | |||
</Button1> | |||
<Button1 onClick={handleReset} color="info"> | |||
<Icon className={classes.icons}>restore</Icon> | |||
Reset | |||
</Button1> | |||
</Paper> | |||
)} | |||
<SnackbarContent | |||
message={ | |||
<h2><b>Checkout</b></h2> | |||
} | |||
align="center" | |||
color="danger" | |||
/> | |||
</div> | |||
<div> | |||
{CheckoutAlamat} | |||
</div> | |||
<div> | |||
{CheckoutProdukPesanan} | |||
</div> | |||
<div> | |||
{CheckoutMetodePembayaran} | |||
</div> | |||
<div> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<Button1 color="info" href={"/yamaha/profile/profile"} style={{width:"100%"}}> | |||
<Icon className={classes.icons}>shop</Icon> | |||
Buat Pesanan | |||
</Button1> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
</div> | |||
); | |||
} | |||
@@ -43,7 +43,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<Button | |||
<Button | |||
color="info" round | |||
href={"/yamaha/cart/checkout?s="+data.id} | |||
> | |||
@@ -0,0 +1,352 @@ | |||
import React from "react"; | |||
import classNames from "classnames"; | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import Select from 'react-select'; | |||
import People from "@material-ui/icons/People"; | |||
import LocationOn from "@material-ui/icons/LocationOn"; | |||
import Lock from "@material-ui/icons/Lock"; | |||
import image1 from "../../../assets/img/mail.png" | |||
import CustomInput from "components/CustomInput/CustomInput.js"; | |||
import InputAdornment from "@material-ui/core/InputAdornment"; | |||
import Button from "components/CustomButtons/Button.js"; | |||
import Icon from "@material-ui/core/Icon"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||
import NavPills from "components/NavPills/NavPills.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js"; | |||
import Grid from '@material-ui/core/Grid'; | |||
import Paper from '@material-ui/core/Paper'; | |||
const useStyles = makeStyles((theme) => ({ | |||
root: { | |||
flexGrow: 1, | |||
}, | |||
paper: { | |||
padding: theme.spacing(2), | |||
textAlign: 'center', | |||
color: theme.palette.text.secondary, | |||
}, | |||
})); | |||
const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) { | |||
const [pass, setPass] = React.useState(""); | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
const imageClasses = classNames( | |||
classes.imgRaised, | |||
classes.imgRoundedCircle, | |||
classes.imgFluid | |||
); | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
return ( | |||
<div> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div align="center"> | |||
<div align="center" className={classes.section} id="notifications" style={{marginTop:"-50px"}}> | |||
<SnackbarContent | |||
message={ | |||
<h4>Profile</h4> | |||
} | |||
align="center" | |||
color="info" | |||
/> | |||
</div> | |||
<GridContainer justify="center" style={{padding: "10px"}}> | |||
<NavPills | |||
color="info" | |||
horizontal={{ | |||
tabsGrid: { xs: 4, sm: 3, md: 3 }, | |||
contentGrid: { xs: 14, sm: 9, md: 9 } | |||
}} | |||
tabs={[ | |||
{ | |||
tabButton: "Profile", | |||
tabIcon: People, | |||
tabContent: ( | |||
<Grid container> | |||
<Grid item xs={12}> | |||
<div align="left"> | |||
<h3>Profile Saya</h3> | |||
<span>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</span><hr></hr> | |||
</div> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Username | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: Yusmar15 | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Nama | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: Yusmar | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: yusmardianto@thamrin.co.id | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Nomer Telpon | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: 087797315685 | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Jenis Kelamin | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: Laki - Laki | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Button | |||
color="info" round | |||
href={"/yamaha/product/product_detail?s="} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Edit Profile | |||
</Button> | |||
</Grid> | |||
) | |||
}, | |||
{ | |||
tabButton: "Alamat", | |||
tabIcon: LocationOn, | |||
tabContent: ( | |||
<Grid container> | |||
<Grid item xs={12}> | |||
<div align="left"> | |||
<h3>Alamat Saya</h3> | |||
<span>Kelola informasi Alamat Anda untuk Proses Pengirim Barang</span> | |||
</div><hr></hr> | |||
</Grid> | |||
<img src={image1} style={{width:"920px"}}/><br></br> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Nama | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: Yusmar | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Telpon | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: 087797315685 | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
Alamat | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
: Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114 | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Button | |||
color="info" round | |||
href={"/yamaha/product/product_detail?s="} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Edit Alamat | |||
</Button> | |||
</Grid> | |||
) | |||
}, | |||
{ | |||
tabButton: "Ubah Password", | |||
tabIcon: Lock, | |||
tabContent: ( | |||
<Grid container> | |||
<Grid item xs={12}> | |||
<div align="left"> | |||
<h3>Ubah Password</h3> | |||
<span>Untuk keamanan akun Anda, mohon untuk tidak menyebarkan password Anda ke orang lain</span> | |||
</div><hr></hr> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
<br></br> | |||
Password Saat Ini | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
<CustomInput | |||
labelText="Password Saat Ini" | |||
id="pass" | |||
value={pass} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
onChange: (event) => setPass(event.target.value), | |||
type: "password", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Icon className={classes.inputIconsColor}> | |||
lock_outline | |||
</Icon> | |||
</InputAdornment> | |||
), | |||
autoComplete: "off", | |||
}} | |||
/> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
<br></br> | |||
Password Baru | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
<CustomInput | |||
labelText="Password Baru" | |||
id="pass" | |||
value={pass} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
onChange: (event) => setPass(event.target.value), | |||
type: "password", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Icon className={classes.inputIconsColor}> | |||
lock_outline | |||
</Icon> | |||
</InputAdornment> | |||
), | |||
autoComplete: "off", | |||
}} | |||
/> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Grid container style={{padding:"10px"}}> | |||
<Grid item xs> | |||
<div align="left"> | |||
<br></br> | |||
Konfirmasi Password | |||
</div> | |||
</Grid> | |||
<Grid item xs={6}> | |||
<div align="left"> | |||
<CustomInput | |||
labelText="Konfirmasi Password" | |||
id="pass" | |||
value={pass} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
onChange: (event) => setPass(event.target.value), | |||
type: "password", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Icon className={classes.inputIconsColor}> | |||
lock_outline | |||
</Icon> | |||
</InputAdornment> | |||
), | |||
autoComplete: "off", | |||
}} | |||
/> | |||
</div> | |||
</Grid> | |||
<Grid item xs> | |||
</Grid> | |||
</Grid> | |||
<Button | |||
color="info" round | |||
href={"/yamaha/product/product_detail?s="} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon> Simpan | |||
</Button> | |||
</Grid> | |||
) | |||
} | |||
]} | |||
/> | |||
</GridContainer> | |||
</div><br></br><br></br> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
} | |||
export default DataApparel; |
@@ -3,7 +3,7 @@ import Router from "next/router"; | |||
export default class Index extends Component { | |||
componentDidMount = () => { | |||
Router.push("/yamaha/home"); | |||
Router.push("/suzuki/home"); | |||
}; | |||
render() { | |||
@@ -50,7 +50,7 @@ const Home = function ({ | |||
/> | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<DataSnackbarContent /> | |||
<CoreValue /> | |||
{/* <CoreValue /> */} | |||
<DataCarousel carousel={carousel} backend={backend} /> | |||
<DataService service={service} backend={backend} /> | |||
<DataFeature /> | |||
@@ -91,12 +91,12 @@ export async function getServerSideProps(context) { | |||
businessPartners = res["DATA"]["businessPartners"]; | |||
} | |||
var res = await Getservices.Getservices(); | |||
var res = await Getservices.GetservicesYamaha(); | |||
if (res["STATUS"] === 1) { | |||
service = res["DATA"]["services"]; | |||
} | |||
var res = await Getcarousels.GetCarousels(); | |||
var res = await Getcarousels.GetCarouselsYamaha(); | |||
if (res["STATUS"] === 1) { | |||
carousel = res["DATA"]["carousels"]; | |||
} | |||
@@ -86,7 +86,7 @@ export default function LoginPage(props) { | |||
{error} | |||
</Alert> | |||
</Collapse> | |||
<Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> | |||
{/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */} | |||
<div | |||
className={classes.pageHeader} | |||
style={{ | |||
@@ -97,42 +97,13 @@ export default function LoginPage(props) { | |||
> | |||
<div className={classes.container}> | |||
<GridContainer justify="center"> | |||
<GridItem xs={12} sm={6} md={4}> | |||
<GridItem xs={6}> | |||
<Card className={classes[cardAnimaton]}> | |||
<form onSubmit={submitHandler} className={classes.form}> | |||
<CardHeader color="info" className={classes.cardHeader}> | |||
<h4>Login</h4> | |||
<div className={classes.socialLine}> | |||
<Button | |||
justIcon | |||
href="#pablo" | |||
target="_blank" | |||
color="transparent" | |||
onClick={(e) => e.preventDefault()} | |||
> | |||
<i className={"fab fa-twitter"} /> | |||
</Button> | |||
<Button | |||
justIcon | |||
href="#pablo" | |||
target="_blank" | |||
color="transparent" | |||
onClick={(e) => e.preventDefault()} | |||
> | |||
<i className={"fab fa-facebook"} /> | |||
</Button> | |||
<Button | |||
justIcon | |||
href="#pablo" | |||
target="_blank" | |||
color="transparent" | |||
onClick={(e) => e.preventDefault()} | |||
> | |||
<i className={"fab fa-google-plus-g"} /> | |||
</Button> | |||
</div> | |||
</CardHeader> | |||
<p className={classes.divider}>Welcome to Thamrin Brothers</p> | |||
<p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p> | |||
<CardBody> | |||
<CustomInput | |||
labelText="Email..." | |||
@@ -176,6 +147,9 @@ export default function LoginPage(props) { | |||
<Button type="submit" color="info" size="lg"> | |||
Login | |||
</Button> | |||
<Button href="/yamaha/register" color="info" size="lg"> | |||
Register | |||
</Button> | |||
</CardFooter> | |||
</form> | |||
</Card> | |||
@@ -0,0 +1,47 @@ | |||
import React from "react"; | |||
import classNames from "classnames"; | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||
import Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
import Footer from "components/Footer/Footer.js"; | |||
import DataProfile from "../../../pages-sections/yamaha/profile/profile.js" | |||
import Cookies from "cookies"; | |||
const useStyles = makeStyles(styles); | |||
const Home = function ({ | |||
backend, | |||
businessPartners, | |||
service, | |||
carousel, | |||
...props | |||
}) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
return ( | |||
<div> | |||
<Header | |||
rightLinks={<HeaderLinks username={props.user} />} | |||
fixed | |||
color="info" | |||
changeColorOnScroll={{ | |||
height: 400, | |||
color: "white", | |||
}} | |||
{...rest} | |||
/> | |||
<Parallax | |||
image={require("assets/img/Promotion_2-1.jpg")} | |||
styles={{ marginTop: "50px" }} | |||
/> | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<DataProfile/> | |||
</div> | |||
<Footer /> | |||
</div> | |||
); | |||
}; | |||
export default Home; |
@@ -0,0 +1,218 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import InputAdornment from "@material-ui/core/InputAdornment"; | |||
import Icon from "@material-ui/core/Icon"; | |||
// @material-ui/icons | |||
import Email from "@material-ui/icons/Email"; | |||
import Event from "@material-ui/icons/Event"; | |||
import People from "@material-ui/icons/People"; | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||
import Footer from "components/Footer/Footer.js"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import Button from "components/CustomButtons/Button.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import CardHeader from "components/Card/CardHeader.js"; | |||
import CardFooter from "components/Card/CardFooter.js"; | |||
import CustomInput from "components/CustomInput/CustomInput.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js"; | |||
import image from "assets/img/bgtbg.jpg"; | |||
import Collapse from "@material-ui/core/Collapse"; | |||
import Alert from "@material-ui/lab/Alert"; | |||
import IconButton from "@material-ui/core/IconButton"; | |||
import CloseIcon from "@material-ui/icons/Close"; | |||
import { useRouter } from "next/router"; | |||
const useStyles = makeStyles(styles); | |||
export default function RegisterPage(props) { | |||
const [cardAnimaton, setCardAnimation] = React.useState("cardHidden"); | |||
const [first_name] = React.useState(""); | |||
const [last_name] = React.useState(""); | |||
const [date_birth, setDate] = React.useState(""); | |||
const [email, setEmail] = React.useState(""); | |||
const [pass, setPass] = React.useState(""); | |||
const [open, setOpen] = React.useState(false); | |||
const [error, setError] = React.useState(""); | |||
const router = useRouter(); | |||
setTimeout(function () { | |||
setCardAnimation(""); | |||
}, 700); | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
const submitHandler = async (event) => { | |||
event.preventDefault(); | |||
const res = await fetch("../api/auth/login", { | |||
body: JSON.stringify({ | |||
partner: "yamaha", | |||
first_name: first_name, | |||
last_name: last_name, | |||
date_birth: date_birth, | |||
email: email, | |||
pass: pass, | |||
}), | |||
headers: { | |||
"Content-Type": "application/json", | |||
}, | |||
method: "POST", | |||
}); | |||
// console.log("res", res.S); | |||
if (res.ok) { | |||
router.push("/yamaha/home"); | |||
} else { | |||
setError(await res.text()); | |||
setOpen(true); | |||
} | |||
}; | |||
return ( | |||
<div> | |||
<Collapse className={classes.collapsible} in={open}> | |||
<Alert | |||
severity="error" | |||
action={ | |||
<IconButton | |||
aria-label="close" | |||
color="inherit" | |||
size="small" | |||
onClick={() => { | |||
setOpen(false); | |||
}} | |||
> | |||
<CloseIcon fontSize="inherit" /> | |||
</IconButton> | |||
} | |||
> | |||
{error} | |||
</Alert> | |||
</Collapse> | |||
{/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */} | |||
<div | |||
className={classes.pageHeader} | |||
style={{ | |||
backgroundImage: "url(" + image + ")", | |||
backgroundSize: "cover", | |||
backgroundPosition: "top center", | |||
}} | |||
> | |||
<div className={classes.container}> | |||
<GridContainer justify="center"> | |||
<GridItem xs={6}> | |||
<Card className={classes[cardAnimaton]}> | |||
<form onSubmit={submitHandler} className={classes.form}> | |||
<CardHeader color="info" className={classes.cardHeader}> | |||
<h4>Register</h4> | |||
</CardHeader> | |||
<p className={classes.divider}>Selamat Datang di Halaman Register Thamrin Brothers</p> | |||
<CardBody> | |||
<CustomInput | |||
labelText="Nama Depan" | |||
id="first_name" | |||
value={first_name} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
type: "text", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<People className={classes.inputIconsColor} /> | |||
</InputAdornment> | |||
), | |||
}} | |||
/> | |||
<CustomInput | |||
labelText="Nama Belakang" | |||
id="last_name" | |||
value={last_name} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
type: "text", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<People className={classes.inputIconsColor} /> | |||
</InputAdornment> | |||
), | |||
}} | |||
/> | |||
{/* <CustomInput | |||
labelText="Tanggal Lahir" | |||
id="date_birth" | |||
value={date_birth} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
type: "date", | |||
onChange: (event) => setDate(event.target.value), | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Event className={classes.inputIconsColor} /> | |||
</InputAdornment> | |||
), | |||
}} | |||
/> */} | |||
<CustomInput | |||
labelText="Email..." | |||
id="email" | |||
value={email} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
type: "email", | |||
onChange: (event) => setEmail(event.target.value), | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Email className={classes.inputIconsColor} /> | |||
</InputAdornment> | |||
), | |||
}} | |||
/> | |||
<CustomInput | |||
labelText="Password" | |||
id="pass" | |||
value={pass} | |||
formControlProps={{ | |||
fullWidth: true, | |||
}} | |||
inputProps={{ | |||
onChange: (event) => setPass(event.target.value), | |||
type: "password", | |||
endAdornment: ( | |||
<InputAdornment position="end"> | |||
<Icon className={classes.inputIconsColor}> | |||
lock_outline | |||
</Icon> | |||
</InputAdornment> | |||
), | |||
autoComplete: "off", | |||
}} | |||
/> | |||
</CardBody> | |||
<div align="center"> | |||
<a href="/yamaha/login">Sudah Punya Akun ? Silahkan Login</a> | |||
</div><br></br> | |||
<CardFooter className={classes.cardFooter}> | |||
<Button type="submit" color="info" size="lg"> | |||
Register | |||
</Button> | |||
</CardFooter> | |||
</form> | |||
</Card> | |||
</GridItem> | |||
</GridContainer> | |||
</div> | |||
</div> | |||
</div> | |||
); | |||
} |