yusmar
/
tbg-ecomm-nextjs
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
87 Commit
1 Ramo (Branch)
204 MiB
 
 
Albero (Tree): 572b6a4179
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '572b6a4179'
${ noResults }
tbg-ecomm-nextjs/pages-sections/yamaha/product/product_details.js

453 righe
21 KiB
Originale Blame Cronologia 

  1. import React, { useState, useEffect } from "react";

  2. import classNames from "classnames";

  3. import { makeStyles } from "@material-ui/core/styles";

  4. import ReactHtmlParser from "react-html-parser";

  5. import Dashboard from "@material-ui/icons/Dashboard";

  6. import Icon from "@material-ui/core/Icon";

  7. import NumberFormat from 'react-number-format';

  8. import Rating from '@material-ui/lab/Rating';

  9. import CustomTabs from "components/CustomTabs/CustomTabs.js";

  10. import Select from 'react-select';

  11. 

  12. import GridContainer from "components/Grid/GridContainer.js";

  13. import Grid from '@material-ui/core/Grid';

  14. import GridItem from "components/Grid/GridItem.js";

  15. import NavPills from "components/NavPills/NavPills.js";

  16. import Card from "components/Card/Card.js";

  17. import CardBody from "components/Card/CardBody.js";

  18. import CardHeader from "components/Card/CardHeader.js";

  19. import CardFooter from "components/Card/CardFooter.js";

  20. import Button from "components/CustomButtons/Button.js";

  21. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

  22. import Carousel from "react-slick";

  23. 

  24. const useStyles = makeStyles(styles);

  25. 

  26. const DataProduct = function ({ backend, detailproduct, ...props })  {

  27.     const classes = useStyles();

  28.     const { ...rest } = props;

  29.     const imageClasses = classNames(

  30.       classes.imgRaised,

  31.       classes.imgRoundedCircle,

  32.       classes.imgFluid

  33.     );

  34.     const settings = {

  35.       dots: true,

  36.       infinite: true,

  37.       speed: 1000,

  38.       slidesToShow: 1,

  39.       slidesToScroll: 1,

  40.       autoplay: true,

  41.       time: 5

  42.     };

  43.     const [value, setValue] = React.useState(5);

  44.     const [value5, setValue5] = React.useState(5);

  45.     const [value4, setValue4] = React.useState(4);

  46.     const [value3, setValue3] = React.useState(3);

  47.     const [value2, setValue2] = React.useState(2);

  48.     const [value1, setValue1] = React.useState(1);

  49.     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

  50.     const ProdcutImgColor = detailproduct.map((data) => {

  51.       return (

  52.         <div>

  53.         </div>

  54.       );

  55.     })

  56.     const Productdetails = detailproduct.map((data) => {

  57.       return (

  58.         <div>

  59.         <GridContainer>

  60.             <Grid fluid xs={5}>

  61.             <div className={classes.section} id="notifications">

  62.               <div className={classes.section}>

  63.                 <div className={classes.container}>

  64.                   <GridContainer>

  65.                     <GridItem className={classes.marginAuto}>

  66.                       <div className="container">

  67.                         <Carousel>

  68.                             <img src={`${backend}${data.img[0]["url"]}`}/>

  69.                             <img src={`${backend}${data.img[1]["url"]}`}/>

  70.                             <img src={`${backend}${data.img[2]["url"]}`}/>

  71.                             <img src={`${backend}${data.img[3]["url"]}`}/>

  72.                             <img src={`${backend}${data.img[4]["url"]}`}/>

  73.                             <img src={`${backend}${data.img[5]["url"]}`}/>

  74.                         </Carousel>

  75.                       </div>

  76.                       <div align="center">

  77.                         <h3><b>Pilih Harga OTR Daerah</b></h3>

  78.                         <Select

  79.                             getOptionLabel={option => `${option.name}`}

  80.                             getOptionValue={option => option.id}

  81.                             options={data.product_otrs}

  82.                             isMulti

  83.                             instanceId="name"

  84.                             placeholder="Pilih Harga OTR"

  85.                             onChange={values => handleName(values)}

  86.                         />

  87.                         <h3><b>Ulasan (17)</b></h3>

  88.                         <h5><b>{data.name}</b></h5>

  89.                         <GridContainer>

  90.                             <Grid fluid xs={5}>

  91.                               <h1><b>5.0</b></h1>

  92.                               <Rating align="center" name="read-only" value={value} readOnly/>

  93.                             </Grid>

  94.                         <Grid fluid xs={5}>

  95.                           <GridContainer>

  96.                             <Grid fluid xs={3}>

  97.                               <Rating name="read-only" value={value5} readOnly/>

  98.                             </Grid>

  99.                             <Grid fluid xs={5}>

  100.                             </Grid>

  101.                           </GridContainer>

  102.                           <GridContainer>

  103.                             <Grid fluid xs={5}>

  104.                               <Rating name="read-only" value={value4} readOnly/>

  105.                             </Grid>

  106.                             <Grid fluid xs={5}>

  107.                             </Grid>

  108.                           </GridContainer>

  109.                           <GridContainer>

  110.                             <Grid fluid xs={5}>

  111.                               <Rating name="read-only" value={value3} readOnly/>

  112.                             </Grid>

  113.                             <Grid fluid xs={5}>

  114.                             </Grid>

  115.                           </GridContainer>

  116.                           <GridContainer>

  117.                             <Grid fluid xs={5}>

  118.                               <Rating name="read-only" value={value2} readOnly/>

  119.                             </Grid>

  120.                             <Grid fluid xs={5}>

  121.                             </Grid>

  122.                           </GridContainer>

  123.                           <GridContainer>

  124.                             <Grid fluid xs={5}>

  125.                               <Rating name="read-only" value={value1} readOnly/>

  126.                             </Grid>

  127.                             <Grid fluid xs={5}>

  128.                             </Grid>

  129.                           </GridContainer>

  130.                         </Grid>

  131.                       </GridContainer>

  132.                     </div>

  133.                     {/* <Button color="info" round href={"/product_detail?s="+data.id}>

  134.                       <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart

  135.                     </Button> */}

  136.                     </GridItem>

  137.                   </GridContainer>

  138.                 </div>

  139.               </div>

  140.             </div>

  141.             </Grid>

  142.             <Grid xs={7} style={{padding:"40px", marginTop:"-60px"}}>

  143.                 <h3><b>{data.name}</b></h3>

  144.                 <Rating name="read-only" value={value} readOnly/>

  145.                 <div style={{marginTop:"-20px"}}>

  146.                   <h3><b>

  147.                     <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> s/d <NumberFormat value={data.price2} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />

  148.                   </b></h3>

  149.                 </div><br/>

  150.                 <CustomTabs

  151.                 headerColor="info"

  152.                 tabs={[

  153.                   {

  154.                     tabName: "Detail Product",

  155.                     tabContent: (

  156.                       <p className={classes.textCenter}>

  157.                         <b>{ReactHtmlParser(data.description)}</b>

  158.                       </p>

  159.                     ),

  160.                   },

  161.                   {

  162.                     tabName: "Info Penting",

  163.                     tabContent: (

  164.                       <p className={classes.textCenter}>

  165.                         <h4><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></h4>

  166.                         <ul>

  167.                           <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>

  168.                           <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>

  169.                           <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>

  170.                           <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>

  171.                         </ul>

  172. 

  173.                         <h4><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></h4>

  174.                         <h4><b>Harga</b></h4>

  175.                         <ul>

  176.                           <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>

  177.                           <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>

  178.                           <li>Harga OTR sewaktu-waktu dapat berubah.</li>

  179.                           <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>

  180.                           <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>

  181.                           <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>

  182.                         </ul>

  183. 

  184.                         <h4><b>Dokumen</b></h4>

  185.                         <ul>

  186.                           <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>

  187.                           <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>

  188.                           <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>

  189.                           <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>

  190.                           <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>

  191.                         </ul>

  192. 

  193.                         <h4><b>*tidak termasuk Sabtu dan Minggu.</b></h4>

  194.                       </p>

  195.                     ),

  196.                   },

  197.                 ]}

  198.               />

  199.             </Grid>

  200.           </GridContainer>

  201.           <NavPills

  202.               color="primary"

  203.               align="center"

  204.               alignCenter

  205.               tabs={[

  206.                 // {

  207.                 //   tabButton: "Overview",

  208.                 //   tabIcon: Dashboard,

  209.                 //   tabContent: (

  210.                 //     <div>

  211.                 //     <GridItem className={classes.marginAuto}>

  212.                 //         <div align="justify">

  213.                 //          <table>

  214.                 //             <tr>

  215.                 //               <td>

  216.                 //                 <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>

  217.                 //               </td>

  218.                 //               <td>

  219.                 //                 <img src={`${backend}${data.img_overview1["url"]}`} />

  220.                 //               </td>

  221.                 //             </tr>

  222.                 //             <tr>

  223.                 //               <td>

  224.                 //                 <img src={`${backend}${data.img_overview2["url"]}`} />

  225.                 //               </td>

  226.                 //               <td>

  227.                 //                 <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>

  228.                 //               </td>

  229.                 //             </tr>

  230.                 //             <tr>

  231.                 //               <td>

  232.                 //                 <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>

  233.                 //               </td>

  234.                 //               <td>

  235.                 //                 <img src={`${backend}${data.img_overview3["url"]}`} />

  236.                 //               </td>

  237.                 //             </tr>

  238.                 //             <tr>

  239.                 //               <td>

  240.                 //                 <img src={`${backend}${data.img_overview4["url"]}`} />

  241.                 //               </td>

  242.                 //               <td>

  243.                 //                 <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>

  244.                 //               </td>

  245.                 //             </tr>

  246.                 //             <tr>

  247.                 //               <td>

  248.                 //                 <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>

  249.                 //               </td>

  250.                 //               <td>

  251.                 //                 <img src={`${backend}${data.img_overview5["url"]}`} />

  252.                 //               </td>

  253.                 //             </tr>

  254.                 //             <tr>

  255.                 //               <td>

  256.                 //                 <img src={`${backend}${data.img_overview6["url"]}`} />

  257.                 //               </td>

  258.                 //               <td>

  259.                 //                 <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>

  260.                 //               </td>

  261.                 //             </tr>

  262.                 //             <tr>

  263.                 //               <td>

  264.                 //                 <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>

  265.                 //               </td>

  266.                 //               <td>

  267.                 //                 <img src={`${backend}${data.img_overview7["url"]}`} />

  268.                 //               </td>

  269.                 //             </tr>

  270.                 //             <tr>

  271.                 //               <td>

  272.                 //                 <img src={`${backend}${data.img_overview8["url"]}`} />

  273.                 //               </td>

  274.                 //               <td>

  275.                 //                 <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>

  276.                 //               </td>

  277.                 //             </tr>

  278.                 //             <tr>

  279.                 //               <td>

  280.                 //                 <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>

  281.                 //               </td>

  282.                 //               <td>

  283.                 //                 <img src={`${backend}${data.img_overview9["url"]}`} />

  284.                 //               </td>

  285.                 //             </tr>

  286.                 //             <tr>

  287.                 //               <td>

  288.                 //                 <img src={`${backend}${data.img_overview10["url"]}`} />

  289.                 //               </td>

  290.                 //               <td>

  291.                 //                 <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>

  292.                 //               </td>

  293.                 //             </tr>

  294.                 //           </table>

  295.                 //         </div>

  296.                 //       </GridItem>

  297.                 //     </div>

  298.                 //   ),

  299.                 // },

  300.                 {

  301.                   tabButton: "Overview",

  302.                   tabIcon: Dashboard,

  303.                   tabContent: (

  304.                     <div>

  305.                     <GridItem className={classes.marginAuto}>

  306.                         <div align="center">

  307.                          <table>

  308.                             <tr>

  309.                               <td>

  310.                                 <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>

  311.                               </td>

  312.                               <td>

  313.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240262893A2540.jpg"/>

  314.                               </td>

  315.                             </tr>

  316.                             <tr>

  317.                               <td>

  318.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120516484034670K42560.jpg"/>

  319.                               </td>

  320.                               <td>

  321.                                 <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>

  322.                               </td>

  323.                             </tr>

  324.                             <tr>

  325.                               <td>

  326.                                 <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>

  327.                               </td>

  328.                               <td>

  329.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402661202S19702.jpg"/>

  330.                               </td>

  331.                             </tr>

  332.                             <tr>

  333.                               <td>

  334.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123231136996Y5592.jpg"/>

  335.                               </td>

  336.                               <td>

  337.                                 <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>

  338.                               </td>

  339.                             </tr>

  340.                             <tr>

  341.                               <td>

  342.                                 <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>

  343.                               </td>

  344.                               <td>

  345.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173855561Z61407.jpg"/>

  346.                               </td>

  347.                             </tr>

  348.                             <tr>

  349.                               <td>

  350.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173867373B74912.jpg"/>

  351.                               </td>

  352.                               <td>

  353.                                 <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>

  354.                               </td>

  355.                             </tr>

  356.                             <tr>

  357.                               <td>

  358.                                 <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>

  359.                               </td>

  360.                               <td>

  361.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173831375M60860.jpg"/>

  362.                               </td>

  363.                             </tr>

  364.                             <tr>

  365.                               <td>

  366.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402691982X34635.jpg"/>

  367.                               </td>

  368.                               <td>

  369.                                 <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>

  370.                               </td>

  371.                             </tr>

  372.                             <tr>

  373.                               <td>

  374.                                 <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>

  375.                               </td>

  376.                               <td>

  377.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240264043F92645.jpg"/>

  378.                               </td>

  379.                             </tr>

  380.                             <tr>

  381.                               <td>

  382.                                 <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402675980Z35071.jpg"/>

  383.                               </td>

  384.                               <td>

  385.                                 <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>

  386.                               </td>

  387.                             </tr>

  388.                           </table>

  389.                         </div>

  390.                       </GridItem>

  391.                     </div>

  392.                   ),

  393.                 },

  394.                 {

  395.                   tabButton: "Specification",

  396.                   tabIcon: Dashboard,

  397.                   tabContent: (

  398.                     <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>

  399.                       <GridItem className={classes.marginAuto}>

  400.                         <div align="justify">

  401.                           <h2>Spesifikasi Mesin</h2>

  402.                           {ReactHtmlParser(data.spesifikasi_mesin)}<br/><br/>

  403. 

  404.                           <h2>Spesifikasi Dimensi</h2>

  405.                           {ReactHtmlParser(data.spesifikasi_dimensi)}<br/><br/>

  406. 

  407.                           <h2>Spesifikasi Rangka</h2>

  408.                           {ReactHtmlParser(data.spesifikasi_rangka)}<br/><br/>

  409. 

  410.                           <h2>Spesifikasi Kelistrikan</h2>

  411.                           {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br/><br/>

  412.                         </div>

  413.                       </GridItem>

  414.                     </GridContainer>

  415.                   ),

  416.                 },

  417.                 {

  418.                   tabButton: "Film",

  419.                   tabIcon: Dashboard,

  420.                   tabContent: (

  421.                     <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>

  422.                       <GridItem className={classes.marginAuto}>

  423.                         <div align="justify">

  424.                           {ReactHtmlParser(data.film)}

  425.                         </div>

  426.                       </GridItem>

  427.                     </GridContainer>

  428.                   ),

  429.                 },

  430.               ]}

  431.             />

  432.         </div>

  433.       );

  434.     })

  435.     return (

  436.       <Card className={classes.textCenter}>

  437.       <div align="center">

  438.         <CardHeader color="info">Product Detail</CardHeader>

  439.       </div>

  440.       <CardBody>

  441.           <div>

  442.             {Productdetails}

  443.           </div>

  444.       </CardBody>

  445.       <CardFooter className={classes.textMuted} textAlign="center">

  446.         © 2020 , All Right Reserved by @Thamrin Brother Company

  447.       </CardFooter>

  448.     </Card>

  449.     );

  450. }

  451. 

  452. export default DataProduct;