fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart & checkout: apply validation based on required inputs in each service & add phone input in checkout page

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-14 23:25:08 +03:00
parent af27d1e509
commit b88cc28c89
13 changed files with 186 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/PaymentMethods/PaymentMethods.tsx
View File

@@ -1,4 +1,4 @@
import { Radio, Space } from "antd";
import { Form, Radio, Space } from "antd";
import { Group } from "antd/es/radio";
import ArabicPrice from "components/ArabicPrice";
import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
@@ -50,67 +50,69 @@ const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
return (
<ProInputCard title={t("checkout.selectedPaymentMethod")}>
<Group
className={styles.paymentMethods}
style={{
width: "100%",
}}
{...props}
size="large"
>
<Space direction="vertical" style={{ width: "100%" }}>
{options.map((option) => (
<div key={option.value}>
<Radio
key={option.value}
value={option.value}
onClick={onPaymentSelect}
style={{
height: 50,
borderRadius: 888,
border: "1px solid #DDD",
padding: 16,
}}
>
<div
<Form.Item name="paymentMethod" required rules={[{ required: true }]}>
<Group
className={styles.paymentMethods}
style={{
width: "100%",
}}
{...props}
size="large"
>
<Space direction="vertical" style={{ width: "100%" }}>
{options.map((option) => (
<div key={option.value}>
<Radio
key={option.value}
value={option.value}
onClick={onPaymentSelect}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
position: "relative",
top: -4,
height: 50,
borderRadius: 888,
border: "1px solid #DDD",
padding: 16,
}}
>
<ProText
<div
style={{
fontSize: "0.85rem",
color: ProGray1,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
position: "relative",
top: -4,
}}
>
{option.label}
</ProText>
{!option.icon ? (
<ArabicPrice
price={option.price || 0}
<ProText
style={{
fontSize: "0.75rem",
fontSize: "0.85rem",
color: ProGray1,
fontWeight: 400,
...option?.style,
position: "relative",
top: 4,
}}
/>
) : (
<>{option.icon}</>
)}
</div>
</Radio>
</div>
))}
</Space>
</Group>
>
{option.label}
</ProText>
{!option.icon ? (
<ArabicPrice
price={option.price || 0}
style={{
fontSize: "0.75rem",
color: ProGray1,
fontWeight: 400,
...option?.style,
position: "relative",
top: 4,
}}
/>
) : (
<>{option.icon}</>
)}
</div>
</Radio>
</div>
))}
</Space>
</Group>
</Form.Item>
</ProInputCard>
);
};