282 lines
15 KiB
JavaScript
282 lines
15 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import Sidebar from '../../partials/Sidebar';
|
|
import Header from '../../partials/Header';
|
|
|
|
import ProductImage01 from '../../images/related-product-01.jpg';
|
|
import ProductImage02 from '../../images/related-product-02.jpg';
|
|
import ProductImage03 from '../../images/related-product-03.jpg';
|
|
|
|
function Cart3() {
|
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
|
|
{/* Sidebar */}
|
|
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
{/* Content area */}
|
|
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
|
|
|
{/* Site header */}
|
|
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
<main>
|
|
<div className="lg:relative lg:flex">
|
|
|
|
{/* Content */}
|
|
<div className="px-4 sm:px-6 lg:px-8 py-8 lg:grow lg:pr-8 xl:pr-16 2xl:ml-[80px]">
|
|
<div className="lg:max-w-[640px] lg:mx-auto">
|
|
|
|
{/* Cart items */}
|
|
<div className="mb-6 lg:mb-0">
|
|
<div className="mb-3">
|
|
<div className="flex text-sm font-medium text-slate-400 space-x-2">
|
|
<span className="text-slate-500">Review</span>
|
|
<span>-></span>
|
|
<span className="text-slate-500">Payment</span>
|
|
<span>-></span>
|
|
<span className="text-indigo-500">Confirm</span>
|
|
</div>
|
|
</div>
|
|
<header className="mb-6">
|
|
{/* Title */}
|
|
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold mb-2">Thank you for your order ✨</h1>
|
|
<p>You will soon receive a confirmation email with details of your order and a link to download the files.</p>
|
|
</header>
|
|
{/* Billing Information */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-4">Billing Information</div>
|
|
<form>
|
|
<div className="space-y-4">
|
|
{/* 1st row */}
|
|
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-name">
|
|
Name
|
|
</label>
|
|
<input id="card-name" className="form-input w-full" type="text" defaultValue="Patrick" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-surname">
|
|
Surname
|
|
</label>
|
|
<input id="card-surname" className="form-input w-full" type="text" defaultValue="Sullivan" />
|
|
</div>
|
|
</div>
|
|
{/* 2nd row */}
|
|
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-address">
|
|
Address
|
|
</label>
|
|
<input id="card-address" className="form-input w-full" type="text" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-city">
|
|
Town/City
|
|
</label>
|
|
<input id="card-city" className="form-input w-full" type="text" />
|
|
</div>
|
|
</div>
|
|
{/* 3rd row */}
|
|
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-state">
|
|
State/Country
|
|
</label>
|
|
<input id="card-state" className="form-input w-full" type="text" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-country">
|
|
Country <span className="text-rose-500">*</span>
|
|
</label>
|
|
<select id="card-country" className="form-select w-full">
|
|
<option>Italy</option>
|
|
<option>USA</option>
|
|
<option>United Kingdom</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{/* 4th row */}
|
|
<div className="md:flex space-y-4 md:space-y-0 md:space-x-4">
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-postcode">
|
|
Postcode
|
|
</label>
|
|
<input id="card-postcode" className="form-input w-full" type="text" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="block text-sm font-medium mb-1" htmlFor="card-vat">
|
|
VAT ID
|
|
</label>
|
|
<input id="card-vat" className="form-input w-full" type="text" />
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<button type="submit" className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500">
|
|
Download Invoice
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{/* Divider */}
|
|
<hr className="my-6 border-t border-slate-200" />
|
|
{/* Billing footer */}
|
|
<div className="bg-white rounded border border-slate-200 p-4">
|
|
<div className="text-center md:text-left md:flex md:items-center md:justify-between space-y-2 md:space-y-0 md:space-x-2">
|
|
<div className="text-sm">
|
|
Enjoy a <span className="font-medium text-slate-800">20% OFF</span> discount on your next order 🎉
|
|
</div>
|
|
<div className="relative inline-flex text-center px-3 py-1 rounded bg-emerald-500">
|
|
<div
|
|
className="absolute w-3 h-3 rounded-full bg-white left-0 -translate-x-1/2 top-1/2 -translate-y-1/2"
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="absolute w-3 h-3 rounded-full bg-white right-0 translate-x-1/2 top-1/2 -translate-y-1/2"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="text-sm text-emerald-50 font-medium uppercase">XMAS22</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div>
|
|
<div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[320px] xl:w-[352px] 2xl:w-[calc(352px+80px)] lg:h-[calc(100vh-64px)]">
|
|
<div className="py-8 px-4 lg:px-8 2xl:px-12">
|
|
<div className="max-w-sm mx-auto lg:max-w-none">
|
|
<h2 className="text-2xl text-slate-800 font-bold mb-6">Order Summary</h2>
|
|
<div className="space-y-6">
|
|
|
|
{/* Order Details */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-2">Order Details</div>
|
|
{/* Cart items */}
|
|
<ul>
|
|
{/* Cart item */}
|
|
<li className="flex items-center py-3 border-b border-slate-200">
|
|
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
|
<img className="w-16 xl:w-20" src={ProductImage01} width="200" height="142" alt="Product 01" />
|
|
</a>
|
|
<div className="grow">
|
|
<a href="#0">
|
|
<h4 className="text-sm font-medium text-slate-800 leading-tight">The Complete Front-End Development Course!</h4>
|
|
</a>
|
|
</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
|
</li>
|
|
{/* Cart item */}
|
|
<li className="flex items-center py-3 border-b border-slate-200">
|
|
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
|
<img className="w-16 xl:w-20" src={ProductImage02} width="200" height="142" alt="Product 02" />
|
|
</a>
|
|
<div className="grow">
|
|
<a href="#0">
|
|
<h4 className="text-sm font-medium text-slate-800 leading-tight">Web Development Ultimate Course 2021</h4>
|
|
</a>
|
|
</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
|
</li>
|
|
{/* Cart item */}
|
|
<li className="flex items-center py-3 border-b border-slate-200">
|
|
<a className="block mr-2 xl:mr-4 shrink-0" href="#0">
|
|
<img className="w-16 xl:w-20" src={ProductImage03} width="200" height="142" alt="Product 03" />
|
|
</a>
|
|
<div className="grow">
|
|
<a href="#0">
|
|
<h4 className="text-sm font-medium text-slate-800 leading-tight">Full-Stack JavaScript Course!</h4>
|
|
</a>
|
|
</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">$69</div>
|
|
</li>
|
|
</ul>
|
|
{/* Fees, discount and total */}
|
|
<ul>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="text-sm">Subtotal</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">$205</div>
|
|
</li>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="text-sm">Taxes</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">$48</div>
|
|
</li>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="flex items-center">
|
|
<span className="text-sm mr-2">Discount</span>
|
|
<span className="text-xs inline-flex whitespace-nowrap font-medium uppercase bg-slate-200 text-slate-500 rounded-full text-center px-2.5 py-1">
|
|
XMAS22
|
|
</span>
|
|
</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">-$25</div>
|
|
</li>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="text-sm">Total</div>
|
|
<div className="text-sm font-medium text-emerald-600 ml-2">$205</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Payment Details */}
|
|
<div>
|
|
<div className="text-slate-800 font-semibold mb-4">Payment Details</div>
|
|
<div className="text-sm rounded border border-slate-200 p-3">
|
|
<div className="flex items-center justify-between space-x-2">
|
|
{/* CC details */}
|
|
<div className="flex items-center">
|
|
{/* Mastercard icon */}
|
|
<svg className="shrink-0 mr-3" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
|
|
<rect fill="#1E293B" width="32" height="24" rx="3" />
|
|
<ellipse fill="#E61C24" cx="12.522" cy="12" rx="5.565" ry="5.647" />
|
|
<ellipse fill="#F99F1B" cx="19.432" cy="12" rx="5.565" ry="5.647" />
|
|
<path
|
|
d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
|
|
fill="#F26622"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
Ending with <span className="text-slate-800">2478</span>
|
|
</div>
|
|
</div>
|
|
{/* Expiry */}
|
|
<div className="italic ml-2">Expires 12/23</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<div className="mb-4">
|
|
<Link to="/ecommerce/pay" className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">
|
|
View Your Order
|
|
</Link>
|
|
</div>
|
|
<div className="text-xs text-slate-500 italic text-center">
|
|
Should you ever change your mind, we offer a 14-day, no-questions-asked refund policy.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Cart3; |