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

checkout: UI + styles enhacnements

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-30 23:50:42 +03:00
parent 3ed5c4d5d6
commit 5d523e2508
24 changed files with 355 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/PaymentMethods/PaymentMethods.module.css
View File

@@ -27,4 +27,78 @@
top: 1px
}
.eCardIcon {
position: relative;
top: 3px;
margin-right: 4px;
}
/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
.circleCheckbox :global(.ant-checkbox-inner) {
width: 24px;
height: 24px;
border-radius: 50% !important;
border: 1.5px solid #D5D8DA;
background: transparent;
}
.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
border-radius: 50% !important;
background: transparent;
border-color: #ffb700;
}
/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
.circleCheckbox :global(.ant-checkbox-inner::after) {
content: "";
border: 0 !important;
transform: none !important;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
width: 18px;
height: 18px;
margin-left: -9px;
margin-top: -9px;
border-radius: 50%;
background: #ffb700;
}
/* Apply same circular style to Radio buttons */
.circleCheckbox :global(.ant-radio-inner) {
width: 24px;
height: 24px;
border-radius: 50% !important;
border: 1.5px solid #D5D8DA;
background: transparent;
}
.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) {
border-radius: 50% !important;
background: transparent;
border-color: #ffb700;
}
.circleCheckbox :global(.ant-radio-inner::after) {
content: "";
border: 0 !important;
transform: none !important;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
width: 18px;
height: 18px;
margin-left: -9px;
margin-top: -9px;
border-radius: 50%;
background: #ffb700;
}

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

@@ -14,15 +14,17 @@ import { colors, ProGray1 } from "../../ThemeConstants";
import ProInputCard from "../ProInputCard/ProInputCard";
import styles from "./PaymentMethods.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";
import RCardIcon from "components/Icons/RCardIcon";
const PaymentMethods = () => {
const { t } = useTranslation();
const { paymentMethod, orderType } = useAppSelector(selectCart);
const dispatch = useAppDispatch();
const grandTotal = useAppSelector(selectGrandTotal);
const { isRTL } = useAppSelector((state) => state.locale);
const options: {
label: string;
label: React.ReactNode;
value: string;
price?: string;
icon?: React.ReactNode;
@@ -32,23 +34,40 @@ const PaymentMethods = () => {
...(orderType !== OrderType.Gift
? [
{
label: t("checkout.cash"),
label: (
<>
<ProText
style={{
color: "#E8B400",
[isRTL ? "marginLeft" : "marginRight"]: 4,
}}
>
$
</ProText>
<ProText style={{color: '#5F6C7B'}}>{t("checkout.cash")}</ProText>
</>
),
value: "cash",
price: grandTotal.toString(),
price: grandTotal.toFixed(2),
style: {
color: colors.primary,
},
},
]
: []),
// {
// label: t("checkout.creditDebitCard"),
// value: "creditDebitCard",
// price: t("checkout.expiresIn") + ":12/26",
// hideCurrency: true,
// },
// {
// label: t("checkout.creditDebitCard"),
// value: "creditDebitCard",
// price: t("checkout.expiresIn") + ":12/26",
// hideCurrency: true,
// },
{
label: t("checkout.differentCard"),
label: (
<>
<RCardIcon className={styles.eCardIcon} />
<ProText style={{color: '#5F6C7B'}}>{t("checkout.differentCard")}</ProText>
</>
),
value: "differentCard",
icon: (
<div className={styles.differentCardIcon}>
@@ -56,7 +75,7 @@ const PaymentMethods = () => {
</div>
),
hideCurrency: true,
}
},
// {
// label: t("checkout.fascanoWallet"),
// value: "fascanoWallet",
@@ -95,6 +114,7 @@ const PaymentMethods = () => {
key={option.value}
value={option.value}
onClick={() => onPaymentSelect(option.value)}
className={styles.circleCheckbox}
style={{
height: 48,
borderRadius: 888,