yusmar
/
tbg-ecomm-nextjs
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
86 Cometimentos
1 Ramo
204 MiB
 
 
Árvore: 8cee501ea4
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '8cee501ea4'
${ noResults }
tbg-ecomm-nextjs/pages-sections/yamaha/product/product_details.js

450 linhas
21 KiB
Em bruto Responsabilidade Histórico 

  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.   console.log(detailproduct);

  28.     const classes = useStyles();

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

  30.     const imageClasses = classNames(

  31.       classes.imgRaised,

  32.       classes.imgRoundedCircle,

  33.       classes.imgFluid

  34.     );

  35.     const settings = {

  36.       dots: true,

  37.       infinite: true,

  38.       speed: 500,

  39.       slidesToShow: 1,

  40.       slidesToScroll: 1,

  41.       autoplay: true,

  42.       time: 5

  43.     };

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

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

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

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

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

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

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

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

  52.       return (

  53.         <div>

  54.         <GridContainer>

  55.             <Grid fluid xs={5}>

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

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

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

  59.                   <GridContainer>

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

  61.                       <div className="container">

  62.                         <Carousel>

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

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

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

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

  67.                         </Carousel>

  68.                       </div>

  69.                       <div align="center">

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

  71.                         <Select

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

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

  74.                             options={data.product_otrs}

  75.                             isMulti

  76.                             instanceId="name"

  77.                             placeholder="Pilih Harga OTR"

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

  79.                         />

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

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

  82.                         <GridContainer>

  83.                             <Grid fluid xs={5}>

  84.                               <h1><b>5.0</b></h1>

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

  86.                             </Grid>

  87.                         <Grid fluid xs={5}>

  88.                           <GridContainer>

  89.                             <Grid fluid xs={3}>

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

  91.                             </Grid>

  92.                             <Grid fluid xs={5}>

  93.                             </Grid>

  94.                           </GridContainer>

  95.                           <GridContainer>

  96.                             <Grid fluid xs={5}>

  97.                               <Rating name="read-only" value={value4} 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={value3} 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={value2} 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={value1} readOnly/>

  119.                             </Grid>

  120.                             <Grid fluid xs={5}>

  121.                             </Grid>

  122.                           </GridContainer>

  123.                         </Grid>

  124.                       </GridContainer>

  125.                     </div>

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

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

  128.                     </Button> */}

  129.                     </GridItem>

  130.                   </GridContainer>

  131.                 </div>

  132.               </div>

  133.             </div>

  134.             </Grid>

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

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

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

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

  139.                   <h3><b>

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

  141.                   </b></h3>

  142.                 </div><br/>

  143.                 <CustomTabs

  144.                 headerColor="info"

  145.                 tabs={[

  146.                   {

  147.                     tabName: "Detail Product",

  148.                     tabContent: (

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

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

  151.                       </p>

  152.                     ),

  153.                   },

  154.                   {

  155.                     tabName: "Info Penting",

  156.                     tabContent: (

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

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

  159.                         <ul>

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

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

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

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

  164.                         </ul>

  165. 

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

  167.                         <h4><b>Harga</b></h4>

  168.                         <ul>

  169.                           <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>

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

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

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

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

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

  175.                         </ul>

  176. 

  177.                         <h4><b>Dokumen</b></h4>

  178.                         <ul>

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

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

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

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

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

  184.                         </ul>

  185. 

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

  187.                       </p>

  188.                     ),

  189.                   },

  190.                 ]}

  191.               />

  192.             </Grid>

  193.           </GridContainer>

  194.         <GridContainer justify="center">

  195.           <GridItem>

  196.           <NavPills

  197.               color="primary"

  198.               align="center"

  199.               alignCenter

  200.               tabs={[

  201.                 // {

  202.                 //   tabButton: "Overview",

  203.                 //   tabIcon: Dashboard,

  204.                 //   tabContent: (

  205.                 //     <div>

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

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

  208.                 //          <table>

  209.                 //             <tr>

  210.                 //               <td>

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

  212.                 //               </td>

  213.                 //               <td>

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

  215.                 //               </td>

  216.                 //             </tr>

  217.                 //             <tr>

  218.                 //               <td>

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

  220.                 //               </td>

  221.                 //               <td>

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

  223.                 //               </td>

  224.                 //             </tr>

  225.                 //             <tr>

  226.                 //               <td>

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

  228.                 //               </td>

  229.                 //               <td>

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

  231.                 //               </td>

  232.                 //             </tr>

  233.                 //             <tr>

  234.                 //               <td>

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

  236.                 //               </td>

  237.                 //               <td>

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

  239.                 //               </td>

  240.                 //             </tr>

  241.                 //             <tr>

  242.                 //               <td>

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

  244.                 //               </td>

  245.                 //               <td>

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

  247.                 //               </td>

  248.                 //             </tr>

  249.                 //             <tr>

  250.                 //               <td>

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

  252.                 //               </td>

  253.                 //               <td>

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

  255.                 //               </td>

  256.                 //             </tr>

  257.                 //             <tr>

  258.                 //               <td>

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

  260.                 //               </td>

  261.                 //               <td>

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

  263.                 //               </td>

  264.                 //             </tr>

  265.                 //             <tr>

  266.                 //               <td>

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

  268.                 //               </td>

  269.                 //               <td>

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

  271.                 //               </td>

  272.                 //             </tr>

  273.                 //             <tr>

  274.                 //               <td>

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

  276.                 //               </td>

  277.                 //               <td>

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

  279.                 //               </td>

  280.                 //             </tr>

  281.                 //             <tr>

  282.                 //               <td>

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

  284.                 //               </td>

  285.                 //               <td>

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

  287.                 //               </td>

  288.                 //             </tr>

  289.                 //           </table>

  290.                 //         </div>

  291.                 //       </GridItem>

  292.                 //     </div>

  293.                 //   ),

  294.                 // },

  295.                 {

  296.                   tabButton: "Overview",

  297.                   tabIcon: Dashboard,

  298.                   tabContent: (

  299.                     <div>

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

  301.                         <div align="center">

  302.                          <table>

  303.                             <tr>

  304.                               <td>

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

  306.                               </td>

  307.                               <td>

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

  309.                               </td>

  310.                             </tr>

  311.                             <tr>

  312.                               <td>

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

  314.                               </td>

  315.                               <td>

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

  317.                               </td>

  318.                             </tr>

  319.                             <tr>

  320.                               <td>

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

  322.                               </td>

  323.                               <td>

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

  325.                               </td>

  326.                             </tr>

  327.                             <tr>

  328.                               <td>

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

  330.                               </td>

  331.                               <td>

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

  333.                               </td>

  334.                             </tr>

  335.                             <tr>

  336.                               <td>

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

  338.                               </td>

  339.                               <td>

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

  341.                               </td>

  342.                             </tr>

  343.                             <tr>

  344.                               <td>

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

  346.                               </td>

  347.                               <td>

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

  349.                               </td>

  350.                             </tr>

  351.                             <tr>

  352.                               <td>

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

  354.                               </td>

  355.                               <td>

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

  357.                               </td>

  358.                             </tr>

  359.                             <tr>

  360.                               <td>

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

  362.                               </td>

  363.                               <td>

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

  365.                               </td>

  366.                             </tr>

  367.                             <tr>

  368.                               <td>

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

  370.                               </td>

  371.                               <td>

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

  373.                               </td>

  374.                             </tr>

  375.                             <tr>

  376.                               <td>

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

  378.                               </td>

  379.                               <td>

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

  381.                               </td>

  382.                             </tr>

  383.                           </table>

  384.                         </div>

  385.                       </GridItem>

  386.                     </div>

  387.                   ),

  388.                 },

  389.                 {

  390.                   tabButton: "Specification",

  391.                   tabIcon: Dashboard,

  392.                   tabContent: (

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

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

  395.                         <div align="justify">

  396.                           <h2>Spesifikasi Mesin</h2>

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

  398. 

  399.                           <h2>Spesifikasi Dimensi</h2>

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

  401. 

  402.                           <h2>Spesifikasi Rangka</h2>

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

  404. 

  405.                           <h2>Spesifikasi Kelistrikan</h2>

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

  407.                         </div>

  408.                       </GridItem>

  409.                     </GridContainer>

  410.                   ),

  411.                 },

  412.                 {

  413.                   tabButton: "Film",

  414.                   tabIcon: Dashboard,

  415.                   tabContent: (

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

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

  418.                         <div align="justify">

  419.                           {ReactHtmlParser(data.film)}

  420.                         </div>

  421.                       </GridItem>

  422.                     </GridContainer>

  423.                   ),

  424.                 },

  425.               ]}

  426.             />

  427.           </GridItem>

  428.         </GridContainer>

  429.         </div>

  430.       );

  431.     })

  432.     return (

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

  434.       <div align="center">

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

  436.       </div>

  437.       <CardBody>

  438.           <div>

  439.             {Productdetails}

  440.           </div>

  441.       </CardBody>

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

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

  444.       </CardFooter>

  445.     </Card>

  446.     );

  447. }

  448. 

  449. export default DataProduct;