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.

366 righe
22 KiB

  1. import React, { useState } from 'react'
  2. //component
  3. import PageBanner from '@/components/Common/PageBanner';
  4. import * as Icon from 'react-feather'
  5. import { useSelector, useDispatch } from 'react-redux'
  6. import { useRouter } from 'next/router'
  7. import { useToasts } from 'react-toast-notifications'
  8. //addon library
  9. import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
  10. resetIdCounter();
  11. import dynamic from 'next/dynamic'
  12. const OwlCarousel = dynamic(import('react-owl-carousel3'))
  13. //library yarn
  14. import NumberFormat from 'react-number-format';
  15. import ReactHtmlParser from "react-html-parser";
  16. //sweet alert
  17. import swal from 'sweetalert';
  18. const options = {
  19. loop: true,
  20. nav: true,
  21. dots: false,
  22. autoplay: true,
  23. items: 1,
  24. smartSpeed: 1000,
  25. autoplayTimeout: 5000,
  26. navText: [
  27. "<i class='bx bx-chevron-left'></i>",
  28. "<i class='bx bx-chevron-right'></i>"
  29. ],
  30. };
  31. const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
  32. const [formValue, setFormValue] = React.useState({
  33. product_img: "",
  34. product_name: "",
  35. product_color: "",
  36. product_price: "",
  37. });
  38. const [OTRProduct, setProductOTR] = useState('');
  39. console.log("otr :", OTRProduct);
  40. const router = useRouter();
  41. const MotorDetail = detailproduct.map((data) => {
  42. // handleChange = ({ target }) => {
  43. // this.setState({
  44. // selectedOption: target.value,
  45. // });
  46. // }
  47. return (
  48. <div>
  49. <PageBanner pageTitle={data.name} />
  50. <div className="shop-details-area ptb-80">
  51. <div className="container">
  52. <div className="row align-items-center">
  53. <div className="col-lg-5">
  54. <OwlCarousel
  55. className="products-details-image products-details-image-slides owl-carousel owl-theme"
  56. {...options}
  57. >
  58. <img src={`${backend}${data.img[0]["url"]}`} />
  59. <img src={`${backend}${data.img[1]["url"]}`} />
  60. <img src={`${backend}${data.img[2]["url"]}`} />
  61. <img src={`${backend}${data.img[3]["url"]}`} />
  62. <img src={`${backend}${data.img[4]["url"]}`} />
  63. <img src={`${backend}${data.img[5]["url"]}`} />
  64. </OwlCarousel>
  65. </div>
  66. <div className="col-lg-7">
  67. <div className="products-details">
  68. <h5>
  69. <NumberFormat value={OTRProduct} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  70. </h5>
  71. {/* <h3>
  72. <NumberFormat value={data.product_otrs[0].price - data.product_otrs[0].price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  73. </h3>
  74. <h5>
  75. <div className="price" style={{ marginTop: "20px" }}>
  76. <NumberFormat
  77. style={{ color: "#EB1928" }}
  78. displayType={'text'}
  79. prefix={'%'}
  80. decimalScale={2}
  81. value={data.discount * 100}
  82. />
  83. <NumberFormat value={data.product_otrs[0].price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  84. </div>
  85. </h5> */}
  86. {/* <p>{this.state.selectedOption}</p> */}
  87. <ul className="rating">
  88. <li><i className="flaticon-star-1"></i></li>
  89. <li><i className="flaticon-star-1"></i></li>
  90. <li><i className="flaticon-star-1"></i></li>
  91. <li><i className="flaticon-star-1"></i></li>
  92. <li><i className="flaticon-star-1"></i></li>
  93. </ul>
  94. <div className="availability">
  95. Availability: <span>{data.stock}</span>
  96. </div>
  97. <form
  98. onSubmit={async (e) => {
  99. e.preventDefault();
  100. var newformValue = {
  101. ...formValue,
  102. product_name: detailproduct[0].name,
  103. }
  104. setFormValue(newformValue)
  105. console.log(JSON.stringify(newformValue));
  106. const response = await fetch(
  107. "/api/transaction/AddToCart",
  108. {
  109. method: "POST",
  110. headers: {
  111. 'Content-Type': 'application/json'
  112. },
  113. body: JSON.stringify(newformValue),
  114. }
  115. );
  116. if (response.ok) {
  117. var res = await response.json();
  118. console.log("cek response :", res);
  119. if (res["STATUS"] === 1) {
  120. res["DATA"]["cart"];
  121. swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
  122. router.push("/yamaha/Shop/Cart");
  123. }
  124. else {
  125. swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
  126. }
  127. } else {
  128. swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
  129. }
  130. return false;
  131. }}
  132. >
  133. <label>Product Harga OTR <span className="required">*</span></label>
  134. <div className="select-box" placeholder="Pilih Harga OTR">
  135. <select className="form-select"
  136. name="product_otr"
  137. onInput={(e) => {
  138. setFormValue({
  139. ...formValue,
  140. product_price: e.target.value.toString(),
  141. })
  142. }}
  143. onChange={e => setProductOTR(e.target.value)}
  144. >
  145. <option value="0">- Pilih Product OTR -</option>
  146. {detailproduct[0]["product_otrs"].map((option) => (
  147. <option value={option.price}>{option.name}</option>
  148. ))}
  149. </select>
  150. </div>
  151. <br />
  152. {/* <label>Product Color <span className="required">*</span></label>
  153. <div className="select-box" placeholder="Pilih Harga OTR">
  154. <select className="form-select"
  155. name="product_color"
  156. onInput={(e) => {
  157. setFormValue({
  158. ...formValue,
  159. product_color: e.target.value.toString()
  160. })
  161. }}
  162. >
  163. <option value="0">- Pilih Product Color -</option>
  164. {detailproduct[0]["product_otrs"].map((option) => (
  165. <option value={option.name}>{option.name}</option>
  166. ))}
  167. </select>
  168. </div>
  169. <br /> */}
  170. {/* <button type="submit">Add to Cart</button> */}
  171. <a href="#" className="add-to-wishlist-btn" title="Add to Wishlist">
  172. <Icon.Heart />
  173. </a>
  174. </form>
  175. <div className="custom-payment-options">
  176. <span>Metode Pembayaran : </span>
  177. <div className="payment-methods">
  178. <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
  179. <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
  180. <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
  181. <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
  182. <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
  183. <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
  184. <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
  185. </div>
  186. </div>
  187. <div className="products-share-social">
  188. <span>Share:</span>
  189. <ul>
  190. <li>
  191. <a href="#" className="facebook" target="_blank">
  192. <Icon.Facebook />
  193. </a>
  194. </li>
  195. <li>
  196. <a href="#" className="twitter" target="_blank">
  197. <Icon.Twitter />
  198. </a>
  199. </li>
  200. <li>
  201. <a href="#" className="instagram" target="_blank">
  202. <Icon.Instagram />
  203. </a>
  204. </li>
  205. </ul>
  206. </div>
  207. </div>
  208. </div>
  209. <div className="col-lg-12 col-md-12">
  210. <div className="products-details-tabs">
  211. <Tabs>
  212. <TabList>
  213. <Tab>Deskripsi</Tab>
  214. <Tab>Info Penting</Tab>
  215. <Tab>Additional Information</Tab>
  216. {/* <Tab>Review</Tab> */}
  217. </TabList>
  218. <TabPanel>
  219. <div className="products-description" align="left">
  220. <p>{ReactHtmlParser(data.description)}</p>
  221. </div>
  222. </TabPanel>
  223. <TabPanel>
  224. <div className="products-description" align="left">
  225. <p>
  226. <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
  227. <ul>
  228. <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
  229. <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
  230. <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
  231. <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
  232. </ul>
  233. <p><b>Harga</b></p>
  234. <ul>
  235. <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>
  236. <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
  237. <li>Harga OTR sewaktu-waktu dapat berubah.</li>
  238. <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
  239. <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan diinformasikan oleh pihak Dealer.</li>
  240. <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
  241. </ul>
  242. <p><b>Dokumen</b></p>
  243. <ul>
  244. <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
  245. <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
  246. <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
  247. <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
  248. <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
  249. </ul>
  250. <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
  251. </p>
  252. </div>
  253. </TabPanel>
  254. <TabPanel>
  255. <div className="products-description">
  256. <ul className="additional-information">
  257. <h2>Spesifikasi Mesin</h2>
  258. {ReactHtmlParser(data.spesifikasi_mesin)}<br /><br />
  259. <h2>Spesifikasi Dimensi</h2>
  260. {ReactHtmlParser(data.spesifikasi_dimensi)}<br /><br />
  261. <h2>Spesifikasi Rangka</h2>
  262. {ReactHtmlParser(data.spesifikasi_rangka)}<br /><br />
  263. <h2>Spesifikasi Kelistrikan</h2>
  264. {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br /><br />
  265. </ul>
  266. </div>
  267. </TabPanel>
  268. {/* <TabPanel>
  269. <div className="products-reviews">
  270. <h3>Customer Reviews</h3>
  271. <p>There are no reviews yet.</p>
  272. <form className="review-form">
  273. <p>Rate this item:</p>
  274. <div className="star-rating">
  275. <i className='bx bxs-star'></i>
  276. <i className='bx bxs-star'></i>
  277. <i className='bx bxs-star'></i>
  278. <i className='bx bxs-star'></i>
  279. <i className='bx bxs-star'></i>
  280. <p>Very good product!</p>
  281. </div>
  282. <div className="row">
  283. <div className="col-lg-12">
  284. <div className="form-group">
  285. <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
  286. </div>
  287. </div>
  288. <div className="col-lg-6 col-md-6">
  289. <div className="form-group">
  290. <input type="text" placeholder="Name*" className="form-control" />
  291. </div>
  292. </div>
  293. <div className="col-lg-6 col-md-6">
  294. <div className="form-group">
  295. <input type="email" placeholder="Email*" className="form-control" />
  296. </div>
  297. </div>
  298. <div className="col-lg-12 col-md-12">
  299. <button type="submit" className="btn btn-primary">Submit</button>
  300. </div>
  301. </div>
  302. </form>
  303. </div>
  304. </TabPanel> */}
  305. </Tabs>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. );
  313. })
  314. return (
  315. <>
  316. {MotorDetail}
  317. </>
  318. )
  319. }
  320. export default ProductDetails;