|
@@ -1,10 +1,20 @@ |
|
|
import React from 'react'; |
|
|
import React from 'react'; |
|
|
import * as Icon from 'react-feather'; |
|
|
import * as Icon from 'react-feather'; |
|
|
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
|
Accordion, |
|
|
|
|
|
AccordionItem, |
|
|
|
|
|
AccordionItemHeading, |
|
|
|
|
|
AccordionItemPanel, |
|
|
|
|
|
AccordionItemButton |
|
|
|
|
|
} from 'react-accessible-accordion'; |
|
|
|
|
|
|
|
|
//library yarn |
|
|
//library yarn |
|
|
import NumberFormat from 'react-number-format'; |
|
|
import NumberFormat from 'react-number-format'; |
|
|
|
|
|
|
|
|
const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
|
|
|
|
|
|
const CheckoutContent = function ({ backend, checkout_product, user, ...props }) { |
|
|
|
|
|
|
|
|
|
|
|
console.log(user); |
|
|
|
|
|
|
|
|
// const Checkout = checkout_product.map((data) => { |
|
|
// const Checkout = checkout_product.map((data) => { |
|
|
// return ( |
|
|
// return ( |
|
@@ -29,90 +39,92 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
<div className="row"> |
|
|
<div className="row"> |
|
|
<div className="col-lg-6 col-md-12"> |
|
|
<div className="col-lg-6 col-md-12"> |
|
|
<div className="billing-details"> |
|
|
<div className="billing-details"> |
|
|
<h3 className="title">Billing Details</h3> |
|
|
|
|
|
|
|
|
<h3 className="title">Alamat Pengiriman</h3> |
|
|
|
|
|
|
|
|
<div className="row"> |
|
|
<div className="row"> |
|
|
<div className="col-lg-12 col-md-12"> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Country <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
|
|
|
<div className="select-box"> |
|
|
|
|
|
<select className="form-select"> |
|
|
|
|
|
<option value="1">United Arab Emirates</option> |
|
|
|
|
|
<option value="2">China</option> |
|
|
|
|
|
<option value="3">United Kingdom</option> |
|
|
|
|
|
<option value="4">Germany</option> |
|
|
|
|
|
<option value="5">France</option> |
|
|
|
|
|
<option value="6">Japan</option> |
|
|
|
|
|
</select> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<label>Nama Lengkap <span className="required">*</span></label> |
|
|
|
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>First Name <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
<label>Nomer Telpon <span className="required">*</span></label> |
|
|
<input type="text" className="form-control" /> |
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Last Name <span className="required">*</span></label> |
|
|
|
|
|
<input type="text" className="form-control" /> |
|
|
|
|
|
|
|
|
<label>Email <span className="required">*</span></label> |
|
|
|
|
|
<input type="email" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-12"> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Company Name</label> |
|
|
|
|
|
<input type="text" className="form-control" /> |
|
|
|
|
|
|
|
|
<label>Alamat Sebagai <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
|
|
|
<div className="select-box"> |
|
|
|
|
|
<select className="form-select"> |
|
|
|
|
|
<option value="1">Rumah</option> |
|
|
|
|
|
<option value="2">Kantor</option> |
|
|
|
|
|
</select> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-6"> |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-12"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Address <span className="required">*</span></label> |
|
|
|
|
|
<input type="text" className="form-control" /> |
|
|
|
|
|
|
|
|
<label>Alamat Lengkap <span className="required">*</span></label> |
|
|
|
|
|
<textarea name="notes" id="notes" cols="30" rows="4" className="form-control"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-6"> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Town / City <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
<label>Kelurahan / Desa <span className="required">*</span></label> |
|
|
<input type="text" className="form-control" /> |
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>State / County <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
<label>Kecamatan <span className="required">*</span></label> |
|
|
<input type="text" className="form-control" /> |
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Postcode / Zip <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
<label>Kabupaten / Kota <span className="required">*</span></label> |
|
|
<input type="text" className="form-control" /> |
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Email Address <span className="required">*</span></label> |
|
|
|
|
|
<input type="email" className="form-control" /> |
|
|
|
|
|
|
|
|
<label>Provinsi <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
|
|
|
<div className="select-box"> |
|
|
|
|
|
<select className="form-select"> |
|
|
|
|
|
<option value="1">Indonesia</option> |
|
|
|
|
|
</select> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="col-lg-6 col-md-6"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
|
<label>Phone <span className="required">*</span></label> |
|
|
|
|
|
|
|
|
<label>Postcode / Zip <span className="required">*</span></label> |
|
|
<input type="text" className="form-control" /> |
|
|
<input type="text" className="form-control" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-12"> |
|
|
|
|
|
|
|
|
{/* <div className="col-lg-12 col-md-12"> |
|
|
<div className="form-check"> |
|
|
<div className="form-check"> |
|
|
<input type="checkbox" className="form-check-input" id="create-an-account" /> |
|
|
<input type="checkbox" className="form-check-input" id="create-an-account" /> |
|
|
<label className="form-check-label" htmlFor="create-an-account">Create an account?</label> |
|
|
<label className="form-check-label" htmlFor="create-an-account">Create an account?</label> |
|
@@ -124,7 +136,7 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
<input type="checkbox" className="form-check-input" id="ship-different-address" /> |
|
|
<input type="checkbox" className="form-check-input" id="ship-different-address" /> |
|
|
<label className="form-check-label" htmlFor="ship-different-address">Ship to a different address?</label> |
|
|
<label className="form-check-label" htmlFor="ship-different-address">Ship to a different address?</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
|
<div className="col-lg-12 col-md-12"> |
|
|
<div className="col-lg-12 col-md-12"> |
|
|
<div className="form-group"> |
|
|
<div className="form-group"> |
|
@@ -135,24 +147,103 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-12"> |
|
|
|
|
|
|
|
|
<div className="col-lg-6 col-md-6"> |
|
|
|
|
|
<div className="order-details"> |
|
|
|
|
|
<h3 className="title">Metode Pengiriman</h3> |
|
|
|
|
|
|
|
|
|
|
|
<div className="order-table table-responsive"> |
|
|
|
|
|
<div className="services-details"> |
|
|
|
|
|
<div className="services-details-desc"> |
|
|
|
|
|
<div className="services-details-accordion"> |
|
|
|
|
|
<Accordion allowZeroExpanded preExpanded={['a']}> |
|
|
|
|
|
<AccordionItem uuid="a"> |
|
|
|
|
|
<AccordionItemHeading> |
|
|
|
|
|
<AccordionItemButton> |
|
|
|
|
|
<span> JNE </span><br /> |
|
|
|
|
|
<p style={{ marginLeft: "25px" }}> |
|
|
|
|
|
Akan diterima pada tanggal 13 - 16 Nov <br /> |
|
|
|
|
|
</p> |
|
|
|
|
|
</AccordionItemButton> |
|
|
|
|
|
</AccordionItemHeading> |
|
|
|
|
|
<AccordionItemPanel> |
|
|
|
|
|
<p>Pilih Waktu Pengiriman</p> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Setiap Saat </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
</AccordionItemPanel> |
|
|
|
|
|
</AccordionItem> |
|
|
|
|
|
|
|
|
|
|
|
<AccordionItem uuid="b"> |
|
|
|
|
|
<AccordionItemHeading> |
|
|
|
|
|
<AccordionItemButton> |
|
|
|
|
|
<span> Kargo - JNE Trucking (JTR) </span><br /> |
|
|
|
|
|
<p style={{ marginLeft: "25px" }}> |
|
|
|
|
|
Akan diterima pada tanggal 14 - 17 Nov <br /> |
|
|
|
|
|
</p> |
|
|
|
|
|
</AccordionItemButton> |
|
|
|
|
|
</AccordionItemHeading> |
|
|
|
|
|
<AccordionItemPanel> |
|
|
|
|
|
<p>Pilih Waktu Pengiriman</p> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Setiap Saat </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
</AccordionItemPanel> |
|
|
|
|
|
</AccordionItem> |
|
|
|
|
|
|
|
|
|
|
|
<AccordionItem uuid="c"> |
|
|
|
|
|
<AccordionItemHeading> |
|
|
|
|
|
<AccordionItemButton> |
|
|
|
|
|
<span> Next Day </span><br /> |
|
|
|
|
|
<p style={{ marginLeft: "25px" }}> |
|
|
|
|
|
Akan diterima pada tanggal 13 - 14 Nov <br /> </p> |
|
|
|
|
|
</AccordionItemButton> |
|
|
|
|
|
</AccordionItemHeading> |
|
|
|
|
|
<AccordionItemPanel> |
|
|
|
|
|
<p>Pilih Waktu Pengiriman</p> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Setiap Saat </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
<input type="radio" id="kantor" name="radio-group" defaultChecked /> |
|
|
|
|
|
<span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br /> |
|
|
|
|
|
<span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br /> |
|
|
|
|
|
</AccordionItemPanel> |
|
|
|
|
|
</AccordionItem> |
|
|
|
|
|
</Accordion> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<br /> |
|
|
<div className="order-details"> |
|
|
<div className="order-details"> |
|
|
<h3 className="title">Your Order</h3> |
|
|
|
|
|
|
|
|
<h3 className="title">Pesanan Anda</h3> |
|
|
|
|
|
|
|
|
<div className="order-table table-responsive"> |
|
|
<div className="order-table table-responsive"> |
|
|
<table className="table table-bordered"> |
|
|
<table className="table table-bordered"> |
|
|
<thead> |
|
|
|
|
|
|
|
|
<thead align="center"> |
|
|
<tr> |
|
|
<tr> |
|
|
<th scope="col">Product Name</th> |
|
|
|
|
|
|
|
|
<th scope="col">Nama Produk</th> |
|
|
|
|
|
<th scope="col">Jumlah</th> |
|
|
<th scope="col">Total</th> |
|
|
<th scope="col">Total</th> |
|
|
</tr> |
|
|
</tr> |
|
|
</thead> |
|
|
</thead> |
|
|
|
|
|
|
|
|
<tbody> |
|
|
|
|
|
|
|
|
<tbody align="center"> |
|
|
{checkout_product.length ? checkout_product.map(data => ( |
|
|
{checkout_product.length ? checkout_product.map(data => ( |
|
|
<tr key={data.id}> |
|
|
<tr key={data.id}> |
|
|
<td className="product-name"> |
|
|
<td className="product-name"> |
|
|
<a href="#">{data.product_name}</a> |
|
|
|
|
|
|
|
|
<a>{data.product_name}</a> |
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
|
|
<td className="product-name"> |
|
|
|
|
|
<a>{data.product_quantity} Unit</a> |
|
|
</td> |
|
|
</td> |
|
|
|
|
|
|
|
|
<td className="product-total"> |
|
|
<td className="product-total"> |
|
@@ -173,12 +264,16 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
)} |
|
|
)} |
|
|
|
|
|
|
|
|
</tbody> |
|
|
</tbody> |
|
|
<tbody> |
|
|
|
|
|
<tr> |
|
|
|
|
|
|
|
|
<tbody align="center"> |
|
|
|
|
|
<tr align="center"> |
|
|
<td className="order-subtotal"> |
|
|
<td className="order-subtotal"> |
|
|
<span>Cart Subtotal</span> |
|
|
<span>Cart Subtotal</span> |
|
|
</td> |
|
|
</td> |
|
|
|
|
|
|
|
|
|
|
|
<td className="shipping-price"> |
|
|
|
|
|
<span></span> |
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
<td className="order-subtotal-price"> |
|
|
<td className="order-subtotal-price"> |
|
|
<span className="order-subtotal-amount">$210.00</span> |
|
|
<span className="order-subtotal-amount">$210.00</span> |
|
|
</td> |
|
|
</td> |
|
@@ -189,6 +284,10 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
</td> |
|
|
</td> |
|
|
|
|
|
|
|
|
<td className="shipping-price"> |
|
|
<td className="shipping-price"> |
|
|
|
|
|
<span></span> |
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
|
|
|
<td className="shipping-price"> |
|
|
<span>$5.00</span> |
|
|
<span>$5.00</span> |
|
|
</td> |
|
|
</td> |
|
|
</tr> |
|
|
</tr> |
|
@@ -197,6 +296,10 @@ const CheckoutContent = function ({ backend, checkout_product, ...props }) { |
|
|
<span>Order Total</span> |
|
|
<span>Order Total</span> |
|
|
</td> |
|
|
</td> |
|
|
|
|
|
|
|
|
|
|
|
<td className="shipping-price"> |
|
|
|
|
|
<span></span> |
|
|
|
|
|
</td> |
|
|
|
|
|
|
|
|
<td className="product-subtotal"> |
|
|
<td className="product-subtotal"> |
|
|
<span className="subtotal-amount">$215.00</span> |
|
|
<span className="subtotal-amount">$215.00</span> |
|
|
</td> |
|
|
</td> |
|
|