yusmar
/
tbg-ecomm-nextjs
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

merge login, checkout page, register page

master
Yusmardianto 4 years ago
parent
1cc301ac1e
commit
224fe6d575
13 changed files with 1156 additions and 565 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      .next/build-manifest.json
  2. +1
    -1
      .next/server/pages-manifest.json
  3. BIN
      .next/static/images/dekstop_pandemi-d7beff3bb7a1936b9ec2e925a2fb4345.jpg
  4. +246
    -266
      assets/jss/nextjs-material-kit.js
  5. +12
    -2
      components/Header/HeaderLinks.js
  6. +267
    -257
      pages-sections/yamaha/cart/checkout.js
  7. +1
    -1
      pages-sections/yamaha/product/product.js
  8. +352
    -0
      pages-sections/yamaha/profile/profile.js
  9. +1
    -1
      pages/_(index).js
  10. +3
    -3
      pages/yamaha/home.js
  11. +6
    -32
      pages/yamaha/login.js
  12. +47
    -0
      pages/yamaha/profile/profile.js
  13. +218
    -0
      pages/yamaha/register.js

+ 2
- 2
.next/build-manifest.json View File

@@ -24,11 +24,11 @@
"static/runtime/polyfills.js", "static/runtime/polyfills.js",
"static/runtime/polyfills.js.map" "static/runtime/polyfills.js.map"
], ],
"/suzuki/home": [
"/yamaha/cart/checkout": [
"static/runtime/webpack.js", "static/runtime/webpack.js",
"static/runtime/main.js" "static/runtime/main.js"
], ],
"/suzuki/product/product_detail": [
"/yamaha/product/product": [
"static/runtime/webpack.js", "static/runtime/webpack.js",
"static/runtime/main.js" "static/runtime/main.js"
] ]


+ 1
- 1
.next/server/pages-manifest.json View File

@@ -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"}

BIN
.next/static/images/dekstop_pandemi-d7beff3bb7a1936b9ec2e925a2fb4345.jpg View File

Before After
Width: 3840  |  Height: 1500  |  Size: 312 KiB

+ 246
- 266
assets/jss/nextjs-material-kit.js View File

@@ -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
};

+ 12
- 2
components/Header/HeaderLinks.js View File

@@ -7,6 +7,7 @@ import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List"; import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
import Icon from "@material-ui/core/Icon"; import Icon from "@material-ui/core/Icon";
// import People from "@material-ui/core/People";
import Chart from "@material-ui/icons/LocalGroceryStore"; import Chart from "@material-ui/icons/LocalGroceryStore";


// @material-ui/icons // @material-ui/icons
@@ -73,7 +74,7 @@ export default function HeaderLinks(props) {
<Icon className={classes.icons}>wallet_travel</Icon> Career <Icon className={classes.icons}>wallet_travel</Icon> Career
</Button> </Button>
</ListItem> </ListItem>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
{/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<CustomDropdown <CustomDropdown
noLiPadding noLiPadding
navDropdown navDropdown
@@ -96,7 +97,7 @@ export default function HeaderLinks(props) {
<a href="https://www.hino.co.id/" className={classes.dropdownLink}>Ketty Resto</a>, <a href="https://www.hino.co.id/" className={classes.dropdownLink}>Ketty Resto</a>,
]} ]}
/> />
</ListItem>
</ListItem> */}
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Button <Button
href="/yamaha/abous_us/aboutus" href="/yamaha/abous_us/aboutus"
@@ -107,6 +108,15 @@ export default function HeaderLinks(props) {
</Button> </Button>
</ListItem> </ListItem>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}> <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}> <Button href="/yamaha/cart/cart" color="transparent" className={classes.navLink}>
<Chart className={classes.icons} /> <Chart className={classes.icons} />
</Button> </Button>


+ 267
- 257
pages-sections/yamaha/cart/checkout.js View File

@@ -1,20 +1,15 @@
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { MDBJumbotron, MDBContainer } from "mdbreact";
import clsx from 'clsx'; import clsx from 'clsx';


import SnackbarContent from "components/Snackbar/SnackbarContent.js"; import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Button1 from "components/CustomButtons/Button.js"; import Button1 from "components/CustomButtons/Button.js";
import image1 from "../../../assets/img/mail.png" import image1 from "../../../assets/img/mail.png"
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import classNames from "classnames"; import classNames from "classnames";


import Icon from "@material-ui/core/Icon"; 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 Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button'; 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 RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl'; 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) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@@ -97,10 +97,6 @@ const useStyles = makeStyles((theme) => ({
}, },
})); }));


function getSteps() {
return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran'];
}

function StyledRadio(props) { function StyledRadio(props) {
const classes = useStyles(); const classes = useStyles();
return ( return (
@@ -121,31 +117,13 @@ const Transition = React.forwardRef(function Transition(props, ref) {


const DataCheckout = function ({ backend, checkoutproduct, ...props }) { const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
const classes = useStyles(); 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 [open, setOpen] = React.useState(false);

const handleClickOpen = () => { const handleClickOpen = () => {
setOpen(true); setOpen(true);
}; };

const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
}; };

const { ...rest } = props; const { ...rest } = props;
const imageClasses = classNames( const imageClasses = classNames(
classes.imgRaised, classes.imgRaised,
@@ -154,201 +132,254 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
); );
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);


const CartAlamat = checkoutproduct.map((data) => {
const CheckoutAlamat = checkoutproduct.map((data) => {
return ( return (
<div align="center"> <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> </div>
); );
}) })


const CartProdukPesanan = checkoutproduct.map((data) => {
const CheckoutProdukPesanan = checkoutproduct.map((data) => {
const handleChange = (event) => {
setAge(event.target.value);
};
const [age, setAge] = React.useState('');
return ( return (
<div align="center"> <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>
<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>
<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>
<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> </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>
<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>
<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>
<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> </Grid>
</GridContainer> </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>
</div> </div>
); );
@@ -357,56 +388,35 @@ const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
return ( return (
<div style={{padding:"50px"}}> <div style={{padding:"50px"}}>
<div align="center" className={classes.section} id="notifications"> <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> </div>
); );
} }


+ 1
- 1
pages-sections/yamaha/product/product.js View File

@@ -43,7 +43,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
> >
<Icon className={classes.icons}>open_in_new</Icon>Detail Product <Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button> </Button>
<Button
<Button
color="info" round color="info" round
href={"/yamaha/cart/checkout?s="+data.id} href={"/yamaha/cart/checkout?s="+data.id}
> >


+ 352
- 0
pages-sections/yamaha/profile/profile.js View File

@@ -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">
Email
</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;

+ 1
- 1
pages/_(index).js View File

@@ -3,7 +3,7 @@ import Router from "next/router";


export default class Index extends Component { export default class Index extends Component {
componentDidMount = () => { componentDidMount = () => {
Router.push("/yamaha/home");
Router.push("/suzuki/home");
}; };


render() { render() {


+ 3
- 3
pages/yamaha/home.js View File

@@ -50,7 +50,7 @@ const Home = function ({
/> />
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<DataSnackbarContent /> <DataSnackbarContent />
<CoreValue />
{/* <CoreValue /> */}
<DataCarousel carousel={carousel} backend={backend} /> <DataCarousel carousel={carousel} backend={backend} />
<DataService service={service} backend={backend} /> <DataService service={service} backend={backend} />
<DataFeature /> <DataFeature />
@@ -91,12 +91,12 @@ export async function getServerSideProps(context) {
businessPartners = res["DATA"]["businessPartners"]; businessPartners = res["DATA"]["businessPartners"];
} }


var res = await Getservices.Getservices();
var res = await Getservices.GetservicesYamaha();
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
service = res["DATA"]["services"]; service = res["DATA"]["services"];
} }


var res = await Getcarousels.GetCarousels();
var res = await Getcarousels.GetCarouselsYamaha();
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
carousel = res["DATA"]["carousels"]; carousel = res["DATA"]["carousels"];
} }


+ 6
- 32
pages/yamaha/login.js View File

@@ -86,7 +86,7 @@ export default function LoginPage(props) {
{error} {error}
</Alert> </Alert>
</Collapse> </Collapse>
<Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} />
{/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
<div <div
className={classes.pageHeader} className={classes.pageHeader}
style={{ style={{
@@ -97,42 +97,13 @@ export default function LoginPage(props) {
> >
<div className={classes.container}> <div className={classes.container}>
<GridContainer justify="center"> <GridContainer justify="center">
<GridItem xs={12} sm={6} md={4}>
<GridItem xs={6}>
<Card className={classes[cardAnimaton]}> <Card className={classes[cardAnimaton]}>
<form onSubmit={submitHandler} className={classes.form}> <form onSubmit={submitHandler} className={classes.form}>
<CardHeader color="info" className={classes.cardHeader}> <CardHeader color="info" className={classes.cardHeader}>
<h4>Login</h4> <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> </CardHeader>
<p className={classes.divider}>Welcome to Thamrin Brothers</p>
<p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p>
<CardBody> <CardBody>
<CustomInput <CustomInput
labelText="Email..." labelText="Email..."
@@ -176,6 +147,9 @@ export default function LoginPage(props) {
<Button type="submit" color="info" size="lg"> <Button type="submit" color="info" size="lg">
Login Login
</Button> </Button>
<Button href="/yamaha/register" color="info" size="lg">
Register
</Button>
</CardFooter> </CardFooter>
</form> </form>
</Card> </Card>


+ 47
- 0
pages/yamaha/profile/profile.js View File

@@ -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;

+ 218
- 0
pages/yamaha/register.js View File

@@ -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>
);
}

Write Preview
Loading…
Cancel
Save