68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { Button, Form, Switch } from "antd";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
|
import { selectCart, updateUseLoyaltyPoints } from "features/order/orderSlice";
|
|
import ProText from "components/ProText";
|
|
import styles from "./EarnLoyaltyPointsCard.module.css";
|
|
|
|
export default function EarnLoyaltyPointsCard() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { useLoyaltyPoints } = useAppSelector(selectCart);
|
|
|
|
return (
|
|
<>
|
|
<ProInputCard title={t("cart.loyalty")}>
|
|
<Form.Item name="useLoyaltyPoints">
|
|
<div className={styles.useLoyaltyPointsContainer}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 4,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("cart.useLoyaltyPoints")}
|
|
</ProText>
|
|
|
|
<ProText
|
|
style={{
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#777580",
|
|
}}
|
|
>
|
|
{t(
|
|
"cart.applyYourAvailableRewardsToGetDiscountsOnItemsInYourCart",
|
|
)}
|
|
</ProText>
|
|
</div>
|
|
<Switch
|
|
autoFocus={false}
|
|
checked={useLoyaltyPoints}
|
|
onClick={() => {
|
|
dispatch(updateUseLoyaltyPoints(!useLoyaltyPoints));
|
|
}}
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
</>
|
|
);
|
|
}
|