yusmar
/
tbg-ecomm-nextjs
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
96 Коміти
1 Гілка
204 MiB
 
 
Дерево: 71c681c78f
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з '71c681c78f'
${ noResults }
tbg-ecomm-nextjs/pages-sections/yamaha/product/product_details.js

455 рядки
21 KiB
Неформатований Звинувачення Історія 

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

  2. import classNames from "classnames";

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

  4. 

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

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

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

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

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

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

  11. import Select from 'react-select';

  12. 

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

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

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

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

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

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

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

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

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

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

  23. import Carousel from "react-slick";

  24. 

  25. const useStyles = makeStyles(styles);

  26. 

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

  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: 1000,

  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 ProdcutImgColor = detailproduct.map((data) => {

  52.       return (

  53.         <div>

  54.         </div>

  55.       );

  56.     })

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

  58.       return (

  59.         <div>

  60.         <GridContainer>

  61.             <Grid fluid xs={5}>

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

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

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

  65.                   <GridContainer>

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

  67.                       <div className="container">

  68.                         <Carousel>

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

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

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

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

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

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

  75.                         </Carousel>

  76.                       </div>

  77.                       <div align="center">

  78.                         <p style={{fontSize:"2vw", marginTop:"20px"}}><b>Pilih Harga OTR Daerah</b></p>

  79.                         <Select

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

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

  82.                             options={data.product_otrs}

  83.                             isMulti

  84.                             instanceId="name"

  85.                             placeholder="Pilih Harga OTR"

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

  87.                         />

  88.                         <p style={{fontSize:"2vw", marginTop:"20px"}}><b>Ulasan (17)</b></p>

  89.                         <p style={{fontSize:"2vw", marginTop:"20px"}}><b>{data.name}</b></p >

  90.                         <GridContainer>

  91.                             <Grid fluid xs={5}>

  92.                               <h1><b>5.0</b></h1>

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

  94.                             </Grid>

  95.                         <Grid fluid xs={5}>

  96.                           <GridContainer>

  97.                             <Grid fluid xs={3}>

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

  99.                             </Grid>

  100.                             <Grid fluid xs={5}>

  101.                             </Grid>

  102.                           </GridContainer>

  103.                           <GridContainer>

  104.                             <Grid fluid xs={5}>

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

  106.                             </Grid>

  107.                             <Grid fluid xs={5}>

  108.                             </Grid>

  109.                           </GridContainer>

  110.                           <GridContainer>

  111.                             <Grid fluid xs={5}>

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

  113.                             </Grid>

  114.                             <Grid fluid xs={5}>

  115.                             </Grid>

  116.                           </GridContainer>

  117.                           <GridContainer>

  118.                             <Grid fluid xs={5}>

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

  120.                             </Grid>

  121.                             <Grid fluid xs={5}>

  122.                             </Grid>

  123.                           </GridContainer>

  124.                           <GridContainer>

  125.                             <Grid fluid xs={5}>

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

  127.                             </Grid>

  128.                             <Grid fluid xs={5}>

  129.                             </Grid>

  130.                           </GridContainer>

  131.                         </Grid>

  132.                       </GridContainer>

  133.                     </div>

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

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

  136.                     </Button> */}

  137.                     </GridItem>

  138.                   </GridContainer>

  139.                 </div>

  140.               </div>

  141.             </div>

  142.             </Grid>

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

  144.                 <p style={{fontSize:"2vw", marginTop:"20px"}}><b>{data.name}</b></p>

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

  146.                 <div>

  147.                   <p style={{fontSize:"2vw"}}><b>

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

  149.                   </b></p>

  150.                 </div><br/>

  151.                 <CustomTabs

  152.                 headerColor="info"

  153.                 tabs={[

  154.                   {

  155.                     tabName: "Detail Product",

  156.                     tabContent: (

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

  158.                         <b>Stock Available : {data.stock}</b><br/>

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

  160.                       </p>

  161.                     ),

  162.                   },

  163.                   {

  164.                     tabName: "Info Penting",

  165.                     tabContent: (

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

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

  168.                         <ul>

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

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

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

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

  173.                         </ul>

  174. 

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

  176.                         <h4><b>Harga</b></h4>

  177.                         <ul>

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

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

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

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

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

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

  184.                         </ul>

  185. 

  186.                         <h4><b>Dokumen</b></h4>

  187.                         <ul>

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

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

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

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

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

  193.                         </ul>

  194. 

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

  196.                       </p>

  197.                     ),

  198.                   },

  199.                 ]}

  200.               />

  201.             </Grid>

  202.           </GridContainer>

  203.           <NavPills

  204.               color="primary"

  205.               align="center"

  206.               alignCenter

  207.               tabs={[

  208.                 {

  209.                   tabButton: "Overview",

  210.                   tabIcon: Dashboard,

  211.                   tabContent: (

  212.                     <div>

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

  214.                         <div align="justify">

  215.                          <table>

  216.                             <tr>

  217.                               <td>

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

  219.                               </td>

  220.                               <td>

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

  222.                               </td>

  223.                             </tr>

  224.                             <tr>

  225.                               <td>

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

  227.                               </td>

  228.                               <td>

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

  230.                               </td>

  231.                             </tr>

  232.                             <tr>

  233.                               <td>

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

  235.                               </td>

  236.                               <td>

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

  238.                               </td>

  239.                             </tr>

  240.                             <tr>

  241.                               <td>

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

  243.                               </td>

  244.                               <td>

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

  246.                               </td>

  247.                             </tr>

  248.                             <tr>

  249.                               <td>

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

  251.                               </td>

  252.                               <td>

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

  254.                               </td>

  255.                             </tr>

  256.                             <tr>

  257.                               <td>

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

  259.                               </td>

  260.                               <td>

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

  262.                               </td>

  263.                             </tr>

  264.                             <tr>

  265.                               <td>

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

  267.                               </td>

  268.                               <td>

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

  270.                               </td>

  271.                             </tr>

  272.                             <tr>

  273.                               <td>

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

  275.                               </td>

  276.                               <td>

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

  278.                               </td>

  279.                             </tr>

  280.                             <tr>

  281.                               <td>

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

  283.                               </td>

  284.                               <td>

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

  286.                               </td>

  287.                             </tr>

  288.                             <tr>

  289.                               <td>

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

  291.                               </td>

  292.                               <td>

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

  294.                               </td>

  295.                             </tr>

  296.                           </table>

  297.                         </div>

  298.                       </GridItem>

  299.                     </div>

  300.                   ),

  301.                 },

  302.                 // {

  303.                 //   tabButton: "Overview",

  304.                 //   tabIcon: Dashboard,

  305.                 //   tabContent: (

  306.                 //     <div>

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

  308.                 //         <div align="center">

  309.                 //          <table>

  310.                 //             <tr>

  311.                 //               <td>

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

  313.                 //               </td>

  314.                 //               <td>

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

  316.                 //               </td>

  317.                 //             </tr>

  318.                 //             <tr>

  319.                 //               <td>

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

  321.                 //               </td>

  322.                 //               <td>

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

  324.                 //               </td>

  325.                 //             </tr>

  326.                 //             <tr>

  327.                 //               <td>

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

  329.                 //               </td>

  330.                 //               <td>

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

  332.                 //               </td>

  333.                 //             </tr>

  334.                 //             <tr>

  335.                 //               <td>

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

  337.                 //               </td>

  338.                 //               <td>

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

  340.                 //               </td>

  341.                 //             </tr>

  342.                 //             <tr>

  343.                 //               <td>

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

  345.                 //               </td>

  346.                 //               <td>

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

  348.                 //               </td>

  349.                 //             </tr>

  350.                 //             <tr>

  351.                 //               <td>

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

  353.                 //               </td>

  354.                 //               <td>

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

  356.                 //               </td>

  357.                 //             </tr>

  358.                 //             <tr>

  359.                 //               <td>

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

  361.                 //               </td>

  362.                 //               <td>

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

  364.                 //               </td>

  365.                 //             </tr>

  366.                 //             <tr>

  367.                 //               <td>

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

  369.                 //               </td>

  370.                 //               <td>

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

  372.                 //               </td>

  373.                 //             </tr>

  374.                 //             <tr>

  375.                 //               <td>

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

  377.                 //               </td>

  378.                 //               <td>

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

  380.                 //               </td>

  381.                 //             </tr>

  382.                 //             <tr>

  383.                 //               <td>

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

  385.                 //               </td>

  386.                 //               <td>

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

  388.                 //               </td>

  389.                 //             </tr>

  390.                 //           </table>

  391.                 //         </div>

  392.                 //       </GridItem>

  393.                 //     </div>

  394.                 //   ),

  395.                 // },

  396.                 {

  397.                   tabButton: "Specification",

  398.                   tabIcon: Dashboard,

  399.                   tabContent: (

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

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

  402.                         <div align="justify">

  403.                           <h2>Spesifikasi Mesin</h2>

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

  405. 

  406.                           <h2>Spesifikasi Dimensi</h2>

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

  408. 

  409.                           <h2>Spesifikasi Rangka</h2>

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

  411. 

  412.                           <h2>Spesifikasi Kelistrikan</h2>

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

  414.                         </div>

  415.                       </GridItem>

  416.                     </GridContainer>

  417.                   ),

  418.                 },

  419.                 {

  420.                   tabButton: "Video",

  421.                   tabIcon: Dashboard,

  422.                   tabContent: (

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

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

  425.                         <div align="justify">

  426.                           {ReactHtmlParser(data.film)}

  427.                         </div>

  428.                       </GridItem>

  429.                     </GridContainer>

  430.                   ),

  431.                 },

  432.               ]}

  433.             />

  434.         </div>

  435.       );

  436.     })

  437.     return (

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

  439.       <div align="center">

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

  441.       </div>

  442.       <CardBody>

  443.           <div>

  444.             {Productdetails}

  445.           </div>

  446.       </CardBody>

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

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

  449.       </CardFooter>

  450.     </Card>

  451.     );

  452. }

  453. 

  454. export default DataProduct;