Skip to content

Commit 786df31

Browse files
filipKovachevfilipKovachev
committed
add payment details
1 parent 27fff6b commit 786df31

File tree

6 files changed

+200
-306
lines changed

6 files changed

+200
-306
lines changed

‎examples/kendo-react-e-commerce-astro-app/src/components/PaymentDetails.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import { Layout } from "../components/Layout";
3+
import CardNumber from "../components/CardNumber";
4+
import ExpiryDate from "../components/ExpiryDate";
5+
import PasswordInput from "../components/PasswordInput";
6+
import CardHolder from "../components/CardHolder";
7+
import { Button } from "@progress/kendo-react-buttons";
8+
9+
import {
10+
Form,
11+
Field,
12+
FormElement,
13+
FieldWrapper,
14+
} from "@progress/kendo-react-form";
15+
import {
16+
RadioButton,
17+
} from "@progress/kendo-react-inputs";
18+
import {
19+
Label,
20+
} from "@progress/kendo-react-labels";
21+
22+
const PaymentDetails: React.FC = () => {
23+
const onSubmitClick = () => {
24+
window.location.href = "/thankyou";
25+
};
26+
27+
return (
28+
<Layout>
29+
<div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4 k-gap-10">
30+
<div className="k-d-grid k-grid-cols-12 k-gap-8 k-w-full">
31+
<div className="k-col-span-6 k-col-start-1">
32+
<h1>Payment Details</h1>
33+
<p>Please, submit your payment details</p>
34+
<div className="k-d-flex k-flex-col k-align-items-start k-gap-4">
35+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
36+
<RadioButton value="creditCard" label="Credit Card" />
37+
</div>
38+
<img
39+
src="/creditCards.png"
40+
alt="Credit card options"
41+
className="k-mb-4"
42+
style={{ width: 'auto', height: 'auto', maxWidth: '100%' }}
43+
/>
44+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
45+
<RadioButton value="bankTransfer" label="Bank Transfer" />
46+
</div>
47+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
48+
<RadioButton value="applePay" label="Apple Pay" />
49+
</div>
50+
</div>
51+
<Form
52+
render={() => (
53+
<FormElement>
54+
<div className="k-form-layout k-d-grid k-gap-y-6 k-gap-x-4">
55+
<FieldWrapper className="k-col-span-1">
56+
<Label> Card Number </Label>
57+
<Field name="cardNumber" component={CardNumber} />
58+
</FieldWrapper>
59+
<div className="k-d-flex k-gap-4 k-w-full">
60+
<FieldWrapper className="k-col-span-1 k-w-1/2">
61+
<Label> Expiry Date </Label>
62+
<Field name="expiryDate" component={ExpiryDate} />
63+
</FieldWrapper>
64+
<FieldWrapper className="k-col-span-1 k-w-1/2">
65+
<Label> CVV* </Label>
66+
<Field name="cvv" component={PasswordInput} />
67+
</FieldWrapper>
68+
</div>
69+
<FieldWrapper className="k-col-span-1">
70+
<Label> Cardholder </Label>
71+
<Field name="cardHolder" component={CardHolder} />
72+
</FieldWrapper>
73+
</div>
74+
</FormElement>
75+
)}
76+
/>
77+
<Button className="k-mt-6" onClick={onSubmitClick} themeColor={"primary"}>
78+
Submit Order
79+
</Button>
80+
</div>
81+
82+
<div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
83+
<h2 className="k-mb-4">Sub total</h2>
84+
<p>US Dollars</p>
85+
<h3 className="k-mb-2">VAT</h3>
86+
<p>US Dollars</p>
87+
<h3 className="k-mb-2 k-mt-4">Shipping Method</h3>
88+
<p>Standard Free Delivery</p>
89+
<h3 className="k-mb-2 k-mt-4">Gift Wrapping</h3>
90+
<p>Included Gift Wrapping</p>
91+
<h3 className="k-mb-2 k-mt-4">Total</h3>
92+
<p>US Dollars</p>
93+
</div>
94+
</div>
95+
</div>
96+
</Layout>
97+
);
98+
};
99+
100+
export default PaymentDetails;

‎examples/kendo-react-e-commerce-astro-app/src/components/ProductDetails.tsx‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,42 @@
1-
import React from "react";
2-
import { addToCart } from "../helpers/useCart";
3-
import { ProductCard } from "../components/ProductCard";
4-
import { listData } from "../data/listData";
5-
import { Layout } from "../components/Layout";
6-
import { CategoryList } from "../components/CategoryList";
7-
import { CardDescriptor } from "../data/types";
8-
import { CustomSection } from "../components/CustomizedSection";
1+
import React from 'react';
2+
import { ProductCard } from '../components/ProductCard';
3+
import { listData } from '../data/listData';
4+
import { Layout } from '../components/Layout';
5+
import { CategoryList } from '../components/CategoryList';
6+
import { CustomSection } from '../components/CustomizedSection';
97

108
interface ProductDetailsProps {
11-
id: string;
9+
id: string;
1210
}
1311

1412
export const ProductDetails: React.FC<ProductDetailsProps> = ({ id }) => {
15-
const productId = parseInt(id, 10);
16-
17-
console.log("Raw ID from props:", id);
18-
console.log("Parsed Product ID:", productId);
19-
console.log("List Data:", listData);
20-
13+
const productId = parseInt(id, 10);
2114
const productToAdd = listData.find((item) => item.id === productId);
2215

23-
console.log("Matched Product:", productToAdd);
24-
25-
const descriptionText =
26-
"Elegant wedding bands featuring lustrous pearls, beautifully set in sleek, timeless bands.";
27-
2816
const handleAddToCart = () => {
2917
if (productToAdd) {
30-
addToCart(productToAdd);
18+
const existingCart = JSON.parse(localStorage.getItem('cart') || '[]');
19+
const updatedCart = [...existingCart, productToAdd];
20+
localStorage.setItem('cart', JSON.stringify(updatedCart));
21+
console.log('Product added:', productToAdd);
22+
window.location.href = '/shoppingcart';
23+
} else {
24+
console.error('Product not found');
3125
}
32-
window.location.href = "/shoppingcart";
3326
};
3427

3528
const data: CardDescriptor[] = [
3629
{
37-
img: "/homemadePinkDiamondRing.jpg",
38-
collectionText: "Handmade Pink Diamond Ring",
30+
img: '/homemadePinkDiamondRing.jpg',
31+
collectionText: 'Handmade Pink Diamond Ring',
3932
},
4033
{
41-
img: "/diamondRingPinkRuby.jpg",
42-
collectionText: "Diamond Ring with Pink Ruby",
34+
img: '/diamondRingPinkRuby.jpg',
35+
collectionText: 'Diamond Ring with Pink Ruby',
4336
},
4437
{
45-
img: "/whiteSandDiamondRing.jpg",
46-
collectionText: "White Sand Diamond Ring",
38+
img: '/whiteSandDiamondRing.jpg',
39+
collectionText: 'White Sand Diamond Ring',
4740
},
4841
];
4942

@@ -56,14 +49,14 @@ export const ProductDetails: React.FC<ProductDetailsProps> = ({ id }) => {
5649
image={productToAdd.img}
5750
subtitle="In Platinum with Natural Diamond"
5851
breadCrumbItem={[
59-
{ text: "Home" },
60-
{ text: "Jewelry" },
52+
{ text: 'Home' },
53+
{ text: 'Jewelry' },
6154
{ text: productToAdd.category },
6255
]}
6356
rating={productToAdd.rating}
6457
reviews="208 reviews"
6558
price={productToAdd.newPrice}
66-
description={descriptionText}
59+
description="Elegant wedding bands featuring lustrous pearls."
6760
addToCart={handleAddToCart}
6861
/>
6962
) : (

0 commit comments

Comments
 (0)