first commit
This commit is contained in:
mukesh13
344
components/shop/Checkout.jsx
Normal file
344
components/shop/Checkout.jsx
Normal file
@ -0,0 +1,344 @@
|
||||
"use client";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import Link from "next/link";
|
||||
import DropdownSelect from "../common/DropdownSelect";
|
||||
export default function Checkout() {
|
||||
const {
|
||||
cartProducts,
|
||||
|
||||
totalPrice,
|
||||
} = useContextElement();
|
||||
|
||||
return (
|
||||
<div className="checkout-product tf-spacing-40">
|
||||
<div className="tf-container">
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<div className="left">
|
||||
<form
|
||||
className="form-checkout"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="mb_33">
|
||||
<h6 className="mb_12">Contact information</h6>
|
||||
<p className="text-body-2 mb_18">
|
||||
We’ll use this email to send you details and updates about
|
||||
your order
|
||||
</p>
|
||||
<fieldset>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
id="email"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="mb_34">
|
||||
<h6 className="mb_12">Billing address</h6>
|
||||
<p className="text-body-2 mb_18">
|
||||
Enter the billing address that matches your payment method
|
||||
</p>
|
||||
<div className="tf-select-tranform-lable mb_24">
|
||||
<span className="select-label">Country/Region</span>
|
||||
<select id="countrySelect" name="region-choose">
|
||||
<option />
|
||||
<option
|
||||
value="United States"
|
||||
data-provinces="[['Alabama','Alabama'],['Alaska','Alaska'],['American Samoa','American Samoa'],['Arizona','Arizona'],['Arkansas','Arkansas'],['Armed Forces Americas','Armed Forces Americas'],['Armed Forces Europe','Armed Forces Europe'],['Armed Forces Pacific','Armed Forces Pacific'],['California','California'],['Colorado','Colorado'],['Connecticut','Connecticut'],['Delaware','Delaware'],['District of Columbia','Washington DC'],['Federated States of Micronesia','Micronesia'],['Florida','Florida'],['Georgia','Georgia'],['Guam','Guam'],['Hawaii','Hawaii'],['Idaho','Idaho'],['Illinois','Illinois'],['Indiana','Indiana'],['Iowa','Iowa'],['Kansas','Kansas'],['Kentucky','Kentucky'],['Louisiana','Louisiana'],['Maine','Maine'],['Marshall Islands','Marshall Islands'],['Maryland','Maryland'],['Massachusetts','Massachusetts'],['Michigan','Michigan'],['Minnesota','Minnesota'],['Mississippi','Mississippi'],['Missouri','Missouri'],['Montana','Montana'],['Nebraska','Nebraska'],['Nevada','Nevada'],['New Hampshire','New Hampshire'],['New Jersey','New Jersey'],['New Mexico','New Mexico'],['New York','New York'],['North Carolina','North Carolina'],['North Dakota','North Dakota'],['Northern Mariana Islands','Northern Mariana Islands'],['Ohio','Ohio'],['Oklahoma','Oklahoma'],['Oregon','Oregon'],['Palau','Palau'],['Pennsylvania','Pennsylvania'],['Puerto Rico','Puerto Rico'],['Rhode Island','Rhode Island'],['South Carolina','South Carolina'],['South Dakota','South Dakota'],['Tennessee','Tennessee'],['Texas','Texas'],['Utah','Utah'],['Vermont','Vermont'],['Virgin Islands','U.S. Virgin Islands'],['Virginia','Virginia'],['Washington','Washington'],['West Virginia','West Virginia'],['Wisconsin','Wisconsin'],['Wyoming','Wyoming']]"
|
||||
>
|
||||
United States
|
||||
</option>
|
||||
<option
|
||||
value="Australia"
|
||||
data-provinces="[['Australian Capital Territory','Australian Capital Territory'],['New South Wales','New South Wales'],['Northern Territory','Northern Territory'],['Queensland','Queensland'],['South Australia','South Australia'],['Tasmania','Tasmania'],['Victoria','Victoria'],['Western Australia','Western Australia']]"
|
||||
>
|
||||
Australia
|
||||
</option>
|
||||
<option value="Austria" data-provinces="[]">
|
||||
Austria
|
||||
</option>
|
||||
<option value="Belgium" data-provinces="[]">
|
||||
Belgium
|
||||
</option>
|
||||
<option
|
||||
value="Canada"
|
||||
data-provinces="[['Alberta','Alberta'],['British Columbia','British Columbia'],['Manitoba','Manitoba'],['New Brunswick','New Brunswick'],['Newfoundland and Labrador','Newfoundland and Labrador'],['Northwest Territories','Northwest Territories'],['Nova Scotia','Nova Scotia'],['Nunavut','Nunavut'],['Ontario','Ontario'],['Prince Edward Island','Prince Edward Island'],['Quebec','Quebec'],['Saskatchewan','Saskatchewan'],['Yukon','Yukon']]"
|
||||
>
|
||||
Canada
|
||||
</option>
|
||||
<option value="Czech Republic" data-provinces="[]">
|
||||
Czechia
|
||||
</option>
|
||||
<option value="Denmark" data-provinces="[]">
|
||||
Denmark
|
||||
</option>
|
||||
<option value="Finland" data-provinces="[]">
|
||||
Finland
|
||||
</option>
|
||||
<option value="France" data-provinces="[]">
|
||||
France
|
||||
</option>
|
||||
<option value="Germany" data-provinces="[]">
|
||||
Germany
|
||||
</option>
|
||||
<option
|
||||
value="Hong Kong"
|
||||
data-provinces="[['Hong Kong Island','Hong Kong Island'],['Kowloon','Kowloon'],['New Territories','New Territories']]"
|
||||
>
|
||||
Hong Kong SAR
|
||||
</option>
|
||||
<option
|
||||
value="Ireland"
|
||||
data-provinces="[['Carlow','Carlow'],['Cavan','Cavan'],['Clare','Clare'],['Cork','Cork'],['Donegal','Donegal'],['Dublin','Dublin'],['Galway','Galway'],['Kerry','Kerry'],['Kildare','Kildare'],['Kilkenny','Kilkenny'],['Laois','Laois'],['Leitrim','Leitrim'],['Limerick','Limerick'],['Longford','Longford'],['Louth','Louth'],['Mayo','Mayo'],['Meath','Meath'],['Monaghan','Monaghan'],['Offaly','Offaly'],['Roscommon','Roscommon'],['Sligo','Sligo'],['Tipperary','Tipperary'],['Waterford','Waterford'],['Westmeath','Westmeath'],['Wexford','Wexford'],['Wicklow','Wicklow']]"
|
||||
>
|
||||
Ireland
|
||||
</option>
|
||||
<option value="Israel" data-provinces="[]">
|
||||
Israel
|
||||
</option>
|
||||
<option
|
||||
value="Italy"
|
||||
data-provinces="[['Agrigento','Agrigento'],['Alessandria','Alessandria'],['Ancona','Ancona'],['Aosta','Aosta Valley'],['Arezzo','Arezzo'],['Ascoli Piceno','Ascoli Piceno'],['Asti','Asti'],['Avellino','Avellino'],['Bari','Bari'],['Barletta-Andria-Trani','Barletta-Andria-Trani'],['Belluno','Belluno'],['Benevento','Benevento'],['Bergamo','Bergamo'],['Biella','Biella'],['Bologna','Bologna'],['Bolzano','South Tyrol'],['Brescia','Brescia'],['Brindisi','Brindisi'],['Cagliari','Cagliari'],['Caltanissetta','Caltanissetta'],['Campobasso','Campobasso'],['Carbonia-Iglesias','Carbonia-Iglesias'],['Caserta','Caserta'],['Catania','Catania'],['Catanzaro','Catanzaro'],['Chieti','Chieti'],['Como','Como'],['Cosenza','Cosenza'],['Cremona','Cremona'],['Crotone','Crotone'],['Cuneo','Cuneo'],['Enna','Enna'],['Fermo','Fermo'],['Ferrara','Ferrara'],['Firenze','Florence'],['Foggia','Foggia'],['Forlì-Cesena','Forlì-Cesena'],['Frosinone','Frosinone'],['Genova','Genoa'],['Gorizia','Gorizia'],['Grosseto','Grosseto'],['Imperia','Imperia'],['Isernia','Isernia'],['L'Aquila','L’Aquila'],['La Spezia','La Spezia'],['Latina','Latina'],['Lecce','Lecce'],['Lecco','Lecco'],['Livorno','Livorno'],['Lodi','Lodi'],['Lucca','Lucca'],['Macerata','Macerata'],['Mantova','Mantua'],['Massa-Carrara','Massa and Carrara'],['Matera','Matera'],['Medio Campidano','Medio Campidano'],['Messina','Messina'],['Milano','Milan'],['Modena','Modena'],['Monza e Brianza','Monza and Brianza'],['Napoli','Naples'],['Novara','Novara'],['Nuoro','Nuoro'],['Ogliastra','Ogliastra'],['Olbia-Tempio','Olbia-Tempio'],['Oristano','Oristano'],['Padova','Padua'],['Palermo','Palermo'],['Parma','Parma'],['Pavia','Pavia'],['Perugia','Perugia'],['Pesaro e Urbino','Pesaro and Urbino'],['Pescara','Pescara'],['Piacenza','Piacenza'],['Pisa','Pisa'],['Pistoia','Pistoia'],['Pordenone','Pordenone'],['Potenza','Potenza'],['Prato','Prato'],['Ragusa','Ragusa'],['Ravenna','Ravenna'],['Reggio Calabria','Reggio Calabria'],['Reggio Emilia','Reggio Emilia'],['Rieti','Rieti'],['Rimini','Rimini'],['Roma','Rome'],['Rovigo','Rovigo'],['Salerno','Salerno'],['Sassari','Sassari'],['Savona','Savona'],['Siena','Siena'],['Siracusa','Syracuse'],['Sondrio','Sondrio'],['Taranto','Taranto'],['Teramo','Teramo'],['Terni','Terni'],['Torino','Turin'],['Trapani','Trapani'],['Trento','Trentino'],['Treviso','Treviso'],['Trieste','Trieste'],['Udine','Udine'],['Varese','Varese'],['Venezia','Venice'],['Verbano-Cusio-Ossola','Verbano-Cusio-Ossola'],['Vercelli','Vercelli'],['Verona','Verona'],['Vibo Valentia','Vibo Valentia'],['Vicenza','Vicenza'],['Viterbo','Viterbo']]"
|
||||
>
|
||||
Italy
|
||||
</option>
|
||||
<option
|
||||
value="Japan"
|
||||
data-provinces="[['Aichi','Aichi'],['Akita','Akita'],['Aomori','Aomori'],['Chiba','Chiba'],['Ehime','Ehime'],['Fukui','Fukui'],['Fukuoka','Fukuoka'],['Fukushima','Fukushima'],['Gifu','Gifu'],['Gunma','Gunma'],['Hiroshima','Hiroshima'],['Hokkaidō','Hokkaido'],['Hyōgo','Hyogo'],['Ibaraki','Ibaraki'],['Ishikawa','Ishikawa'],['Iwate','Iwate'],['Kagawa','Kagawa'],['Kagoshima','Kagoshima'],['Kanagawa','Kanagawa'],['Kumamoto','Kumamoto'],['Kyōto','Kyoto'],['Kōchi','Kochi'],['Mie','Mie'],['Miyagi','Miyagi'],['Miyazaki','Miyazaki'],['Nagano','Nagano'],['Nagasaki','Nagasaki'],['Nara','Nara'],['Niigata','Niigata'],['Okayama','Okayama'],['Okinawa','Okinawa'],['Saga','Saga'],['Saitama','Saitama'],['Shiga','Shiga'],['Shimane','Shimane'],['Shizuoka','Shizuoka'],['Tochigi','Tochigi'],['Tokushima','Tokushima'],['Tottori','Tottori'],['Toyama','Toyama'],['Tōkyō','Tokyo'],['Wakayama','Wakayama'],['Yamagata','Yamagata'],['Yamaguchi','Yamaguchi'],['Yamanashi','Yamanashi'],['Ōita','Oita'],['Ōsaka','Osaka']]"
|
||||
>
|
||||
Japan
|
||||
</option>
|
||||
<option
|
||||
value="Malaysia"
|
||||
data-provinces="[['Johor','Johor'],['Kedah','Kedah'],['Kelantan','Kelantan'],['Kuala Lumpur','Kuala Lumpur'],['Labuan','Labuan'],['Melaka','Malacca'],['Negeri Sembilan','Negeri Sembilan'],['Pahang','Pahang'],['Penang','Penang'],['Perak','Perak'],['Perlis','Perlis'],['Putrajaya','Putrajaya'],['Sabah','Sabah'],['Sarawak','Sarawak'],['Selangor','Selangor'],['Terengganu','Terengganu']]"
|
||||
>
|
||||
Malaysia
|
||||
</option>
|
||||
<option value="Netherlands" data-provinces="[]">
|
||||
Netherlands
|
||||
</option>
|
||||
<option
|
||||
value="New Zealand"
|
||||
data-provinces="[['Auckland','Auckland'],['Bay of Plenty','Bay of Plenty'],['Canterbury','Canterbury'],['Chatham Islands','Chatham Islands'],['Gisborne','Gisborne'],['Hawke's Bay','Hawke’s Bay'],['Manawatu-Wanganui','Manawatū-Whanganui'],['Marlborough','Marlborough'],['Nelson','Nelson'],['Northland','Northland'],['Otago','Otago'],['Southland','Southland'],['Taranaki','Taranaki'],['Tasman','Tasman'],['Waikato','Waikato'],['Wellington','Wellington'],['West Coast','West Coast']]"
|
||||
>
|
||||
New Zealand
|
||||
</option>
|
||||
<option value="Norway" data-provinces="[]">
|
||||
Norway
|
||||
</option>
|
||||
<option value="Poland" data-provinces="[]">
|
||||
Poland
|
||||
</option>
|
||||
<option
|
||||
value="Portugal"
|
||||
data-provinces="[['Aveiro','Aveiro'],['Açores','Azores'],['Beja','Beja'],['Braga','Braga'],['Bragança','Bragança'],['Castelo Branco','Castelo Branco'],['Coimbra','Coimbra'],['Faro','Faro'],['Guarda','Guarda'],['Leiria','Leiria'],['Lisboa','Lisbon'],['Madeira','Madeira'],['Portalegre','Portalegre'],['Porto','Porto'],['Santarém','Santarém'],['Setúbal','Setúbal'],['Viana do Castelo','Viana do Castelo'],['Vila Real','Vila Real'],['Viseu','Viseu'],['Évora','Évora']]"
|
||||
>
|
||||
Portugal
|
||||
</option>
|
||||
<option value="Singapore" data-provinces="[]">
|
||||
Singapore
|
||||
</option>
|
||||
<option
|
||||
value="South Korea"
|
||||
data-provinces="[['Busan','Busan'],['Chungbuk','North Chungcheong'],['Chungnam','South Chungcheong'],['Daegu','Daegu'],['Daejeon','Daejeon'],['Gangwon','Gangwon'],['Gwangju','Gwangju City'],['Gyeongbuk','North Gyeongsang'],['Gyeonggi','Gyeonggi'],['Gyeongnam','South Gyeongsang'],['Incheon','Incheon'],['Jeju','Jeju'],['Jeonbuk','North Jeolla'],['Jeonnam','South Jeolla'],['Sejong','Sejong'],['Seoul','Seoul'],['Ulsan','Ulsan']]"
|
||||
>
|
||||
South Korea
|
||||
</option>
|
||||
<option
|
||||
value="Spain"
|
||||
data-provinces="[['A Coruña','A Coruña'],['Albacete','Albacete'],['Alicante','Alicante'],['Almería','Almería'],['Asturias','Asturias Province'],['Badajoz','Badajoz'],['Balears','Balears Province'],['Barcelona','Barcelona'],['Burgos','Burgos'],['Cantabria','Cantabria Province'],['Castellón','Castellón'],['Ceuta','Ceuta'],['Ciudad Real','Ciudad Real'],['Cuenca','Cuenca'],['Cáceres','Cáceres'],['Cádiz','Cádiz'],['Córdoba','Córdoba'],['Girona','Girona'],['Granada','Granada'],['Guadalajara','Guadalajara'],['Guipúzcoa','Gipuzkoa'],['Huelva','Huelva'],['Huesca','Huesca'],['Jaén','Jaén'],['La Rioja','La Rioja Province'],['Las Palmas','Las Palmas'],['León','León'],['Lleida','Lleida'],['Lugo','Lugo'],['Madrid','Madrid Province'],['Melilla','Melilla'],['Murcia','Murcia'],['Málaga','Málaga'],['Navarra','Navarra'],['Ourense','Ourense'],['Palencia','Palencia'],['Pontevedra','Pontevedra'],['Salamanca','Salamanca'],['Santa Cruz de Tenerife','Santa Cruz de Tenerife'],['Segovia','Segovia'],['Sevilla','Seville'],['Soria','Soria'],['Tarragona','Tarragona'],['Teruel','Teruel'],['Toledo','Toledo'],['Valencia','Valencia'],['Valladolid','Valladolid'],['Vizcaya','Biscay'],['Zamora','Zamora'],['Zaragoza','Zaragoza'],['Álava','Álava'],['Ávila','Ávila']]"
|
||||
>
|
||||
Spain
|
||||
</option>
|
||||
<option value="Sweden" data-provinces="[]">
|
||||
Sweden
|
||||
</option>
|
||||
<option value="Switzerland" data-provinces="[]">
|
||||
Switzerland
|
||||
</option>
|
||||
<option
|
||||
value="United Arab Emirates"
|
||||
data-provinces="[['Abu Dhabi','Abu Dhabi'],['Ajman','Ajman'],['Dubai','Dubai'],['Fujairah','Fujairah'],['Ras al-Khaimah','Ras al-Khaimah'],['Sharjah','Sharjah'],['Umm al-Quwain','Umm al-Quwain']]"
|
||||
>
|
||||
United Arab Emirates
|
||||
</option>
|
||||
<option
|
||||
value="United Kingdom"
|
||||
data-provinces="[['British Forces','British Forces'],['England','England'],['Northern Ireland','Northern Ireland'],['Scotland','Scotland'],['Wales','Wales']]"
|
||||
>
|
||||
United Kingdom
|
||||
</option>
|
||||
<option value="Vietnam" data-provinces="[]">
|
||||
Vietnam
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid-2 mb_24">
|
||||
<fieldset>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First name"
|
||||
id="first-name"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last name"
|
||||
id="last-name"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<fieldset className="mb_22">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Address"
|
||||
id="address"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<a href="#" className="link text-body-2 mb_18">
|
||||
+ Add apartment, suit, etc.
|
||||
</a>
|
||||
<div className="grid-2 mb_24">
|
||||
<fieldset>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="City"
|
||||
id="city"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="tf-select-tranform-lable">
|
||||
<span className="select-label">State</span>
|
||||
<select name="region-choose" id="state">
|
||||
<option />
|
||||
<option value="California">California</option>
|
||||
<option value="Alabama">Alabam</option>
|
||||
<option value="Alaska">Alaska</option>
|
||||
<option value="Arizona">Arizona</option>
|
||||
<option value="Arkansas">Arkansas</option>
|
||||
<option value="Florida">Florida</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Hawaii">Hawaii</option>
|
||||
<option value="Washington">Washington</option>
|
||||
<option value="Texas">Texas</option>
|
||||
<option value="Iowa">Iowa</option>
|
||||
<option value="Nevada">Nevada</option>
|
||||
<option value="Illinois">Illinois</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-2">
|
||||
<fieldset>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zip Code"
|
||||
id="zip-code"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Phone (optional)"
|
||||
id="phone"
|
||||
className="rounded-cycle"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb_33">
|
||||
<h6 className="title mb_16">Payment options</h6>
|
||||
<div className="notification d-flex gap_16">
|
||||
<div className="icon">
|
||||
<i className="icon-info-circle-solid" />
|
||||
</div>
|
||||
<p className="text-body-2 text_mono-gray-6">
|
||||
There are no payment methods available. This may be an
|
||||
error on our side. Please contact us if you need any
|
||||
<br />
|
||||
help placing your order.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bot">
|
||||
<div className="align-items-center d-flex gap_8 mb_29">
|
||||
<fieldset className="fieldset-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="brand"
|
||||
className="tf-check"
|
||||
id="add"
|
||||
defaultChecked=""
|
||||
/>
|
||||
</fieldset>
|
||||
<label className="h6" htmlFor="add">
|
||||
Add a note to your order
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-body-2 mb_41">
|
||||
By proceeding with your purchase you agree to our Terms and
|
||||
Conditions and Privacy Policy
|
||||
</p>
|
||||
<div className="wrap-btn d-flex align-items-center justify-content-between">
|
||||
<Link
|
||||
href={`/cart`}
|
||||
className="link d-flex align-items-center gap_20 text-body-1"
|
||||
>
|
||||
<i className="icon-long-arrow-alt-left-solid" />
|
||||
Back to cart
|
||||
</Link>
|
||||
<a href="#" className="tf-btn btn-primary2 height-2">
|
||||
<span>Place Order</span>
|
||||
<span className="bg-effect" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="cart-totals v2">
|
||||
<h2 className="title">Cart totals</h2>
|
||||
<div className="wrap-info">
|
||||
{cartProducts.map((product, i) => (
|
||||
<div key={i} className="info sub-heading d-flex">
|
||||
<div className="name">{product.title}</div>
|
||||
<span>x{product.quantity}</span>{" "}
|
||||
<div className="price sub-heading">
|
||||
${(product.price * product.quantity).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<DropdownSelect
|
||||
defaultOption={"Add a coupon"}
|
||||
options={["coupon 10%", "coupon 20%"]}
|
||||
addtionalParentClass="h6 text_black px-0"
|
||||
/>
|
||||
<div className="sub-total d-flex justify-content-between align-items-center h6">
|
||||
<span>Discount</span>
|
||||
<span>-{totalPrice ? "$1.796" : 0}</span>
|
||||
</div>
|
||||
<div className="total h4 d-flex justify-content-between align-items-center">
|
||||
<span>Total</span>
|
||||
<span>${totalPrice ? (totalPrice - 1.796).toFixed(2) : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user