Skip to content

Commit fb9fddb

Browse files
filipKovachevfilipKovachev
committed
add payment details
1 parent 91e6f48 commit fb9fddb

File tree

8 files changed

+213
-8
lines changed

8 files changed

+213
-8
lines changed

‎examples/ecommerce-jewellery-store/package-lock.json‎

Lines changed: 55 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/ecommerce-jewellery-store/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@
1515
"@progress/kendo-licensing": "^1.3.5",
1616
"@progress/kendo-react-buttons": "^8.5.0",
1717
"@progress/kendo-react-common": "^8.5.0",
18+
"@progress/kendo-react-dateinputs": "^8.5.0",
1819
"@progress/kendo-react-dropdowns": "^8.5.0",
20+
"@progress/kendo-react-form": "^8.5.0",
1921
"@progress/kendo-react-indicators": "^8.5.0",
2022
"@progress/kendo-react-inputs": "^8.5.0",
2123
"@progress/kendo-react-intl": "^8.5.0",
2224
"@progress/kendo-react-layout": "^8.5.0",
2325
"@progress/kendo-react-notification": "^8.5.0",
2426
"@progress/kendo-react-progressbars": "^8.5.0",
2527
"@progress/kendo-react-treeview": "^8.5.0",
26-
"@progress/kendo-svg-icons": "^3.1.0",
28+
"@progress/kendo-svg-icons": "^3.3.0",
2729
"@progress/kendo-theme-default": "^9.1.0",
2830
"@progress/kendo-theme-utils": "^9.1.0",
2931
"react": "^18.3.1",

‎examples/ecommerce-jewellery-store/src/assets/creditCards.png‎

5.03 KB
Loading

‎examples/ecommerce-jewellery-store/src/components/CardHolder.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
3+
import { TextBox } from '@progress/kendo-react-inputs';
4+
5+
const CardNumber = () => {
6+
return (
7+
<TextBox placeholder='Glen Stracke'/>
8+
9+
);
10+
};
11+
12+
export default CardNumber;

‎examples/ecommerce-jewellery-store/src/components/CardNumber.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react';
2+
3+
import { MaskedTextBox } from '@progress/kendo-react-inputs';
4+
5+
const CardNumber = () => {
6+
return (
7+
<MaskedTextBox
8+
width={200}
9+
mask="0000-0000-0000-0000"
10+
defaultValue="── ── ── ──"
11+
/>
12+
);
13+
};
14+
15+
export default CardNumber;

‎examples/ecommerce-jewellery-store/src/components/ExpiryDate.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
3+
import { DateInput } from "@progress/kendo-react-dateinputs";
4+
5+
const ExpiryDate = () => {
6+
return (
7+
<DateInput/>
8+
);
9+
};
10+
11+
export default ExpiryDate;

‎examples/ecommerce-jewellery-store/src/components/PasswordInput.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react';
2+
import { TextBox, TextBoxChangeEvent } from '@progress/kendo-react-inputs';
3+
import { Button } from '@progress/kendo-react-buttons';
4+
import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
5+
6+
const PasswordInput: React.FC = () => {
7+
const [value, setValue] = React.useState<string>('');
8+
const [textboxType, setTextboxType] = React.useState<'password' | 'text'>('password');
9+
const [iconName, setIconName] = React.useState<typeof eyeIcon | typeof eyeSlashIcon>(eyeIcon);
10+
11+
const handleClick = () => {
12+
setTextboxType(textboxType === 'password' ? 'text' : 'password');
13+
setIconName(iconName === eyeIcon ? eyeSlashIcon : eyeIcon);
14+
};
15+
16+
const handleChange = (ev: TextBoxChangeEvent) => {
17+
setValue(ev.target.value as string);
18+
};
19+
20+
return (
21+
<div>
22+
<TextBox
23+
style={{ width: 150 }}
24+
value={value}
25+
onChange={handleChange}
26+
type={textboxType}
27+
suffix={() => (
28+
<Button svgIcon={iconName} onClick={handleClick} fillMode="flat" />
29+
)}
30+
/>
31+
</div>
32+
);
33+
};
34+
35+
export default PasswordInput;

‎examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx‎

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,89 @@
11
import React from 'react';
2+
import { Layout } from "@/components/Layout";
3+
import { CustomSection } from "@/components/CustomizedSection";
4+
import CardNumber from "@/components/CardNumber";
5+
import ExpiryDate from "@/components/ExpiryDate";
6+
import PasswordInput from "@/components/PasswordInput";
7+
import CardHolder from "@/components/CardHolder";
8+
9+
import {
10+
Form,
11+
Field,
12+
FormElement,
13+
FormRenderProps,
14+
FieldWrapper,
15+
} from "@progress/kendo-react-form";
16+
import {
17+
RadioButton,
18+
} from "@progress/kendo-react-inputs";
19+
import {
20+
Label,
21+
} from "@progress/kendo-react-labels";
22+
23+
import creditCards from '../assets/creditCards.png';
224

325
const PaymentDetails: React.FC = () => {
426
return (
5-
<>
6-
Payment Details
7-
</>
27+
<Layout>
28+
<div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4 k-gap-10">
29+
<div className="k-d-grid k-grid-cols-12 k-gap-8 k-w-full">
30+
<div className="k-col-span-6 k-col-start-1">
31+
<h1>Payment Details</h1>
32+
<p>Please, submit your payment details</p>
33+
<div className="k-d-flex k-flex-col k-align-items-start k-gap-4">
34+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
35+
<RadioButton value="creditCard" label="Credit Card" />
36+
</div>
37+
<img src={creditCards} alt="Credit card options" className="k-mb-4" style={{ width: 'auto', height: 'auto', maxWidth: '100%' }} />
38+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
39+
<RadioButton value="bankTransfer" label="Bank Transfer" />
40+
</div>
41+
<div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
42+
<RadioButton value="applePay" label="Apple Pay" />
43+
</div>
44+
</div>
45+
<Form
46+
render={(formRenderProps: FormRenderProps) => (
47+
<FormElement>
48+
<div className="k-form-layout k-d-grid k-gap-y-6 k-gap-x-4">
49+
<FieldWrapper className="k-col-span-1">
50+
<Label> Card Number </Label>
51+
<Field name="cardNumber" component={CardNumber} />
52+
</FieldWrapper>
53+
<div className="k-d-flex k-gap-4 k-w-full">
54+
<FieldWrapper className="k-col-span-1 k-w-1/2">
55+
<Label> Expiry Date </Label>
56+
<Field name="expiryDate" component={ExpiryDate} />
57+
</FieldWrapper>
58+
<FieldWrapper className="k-col-span-1 k-w-1/2">
59+
<Label> CVV* </Label>
60+
<Field name="cvv" component={PasswordInput} />
61+
</FieldWrapper>
62+
</div>
63+
<FieldWrapper className="k-col-span-1">
64+
<Label> Cardholder </Label>
65+
<Field name="cardHolder" component={CardHolder} />
66+
</FieldWrapper>
67+
</div>
68+
</FormElement>
69+
)}
70+
/>
71+
</div>
72+
<div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
73+
<h2 className="k-mb-4">Sub total</h2>
74+
<p>US Dollars</p>
75+
<h3 className="k-mb-2">VAT</h3>
76+
<p>US Dollars</p>
77+
<h3 className="k-mb-2 k-mt-4">Shipping Method</h3>
78+
<p>Standard Free Delivery</p>
79+
<h3 className="k-mb-2 k-mt-4">Gift Wrapping</h3>
80+
<p>Included Gift Wrapping</p>
81+
<h3 className="k-mb-2 k-mt-4">Total</h3>
82+
<p>US Dollars</p>
83+
</div>
84+
</div>
85+
</div>
86+
</Layout>
887
);
988
};
1089

0 commit comments

Comments
 (0)