checkout: add card deyails & card amount BT
This commit is contained in:
@@ -1,115 +1,181 @@
|
||||
import { Checkbox, Form, Input } from "antd";
|
||||
import { Divider, Image } from "antd";
|
||||
import ProInputCard from "components/ProInputCard/ProInputCard";
|
||||
import ProPhoneInput from "components/ProPhoneInput";
|
||||
import ProText from "components/ProText";
|
||||
import {
|
||||
selectCart,
|
||||
updateGiftDetails,
|
||||
updateOrder,
|
||||
} from "features/order/orderSlice";
|
||||
import { selectCart } from "features/order/orderSlice";
|
||||
import { EGiftCard } from "pages/CardDetails/type";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
|
||||
const { TextArea } = Input;
|
||||
import { useGetEGiftCardsQuery } from "redux/api/others";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import styles from "./GiftDetails.module.css";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import InvoiceIcon from "components/Icons/order/InvoiceIcon";
|
||||
import BackIcon from "components/Icons/BackIcon";
|
||||
import NextIcon from "components/Icons/NextIcon";
|
||||
import { useMemo } from "react";
|
||||
import CardAmountIcon from "components/Icons/CardAmountIcon";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
|
||||
export function GiftCard() {
|
||||
const { t } = useTranslation();
|
||||
const { order } = useAppSelector(selectCart);
|
||||
const dispatch = useAppDispatch();
|
||||
const { giftDetails, items } = useAppSelector(selectCart);
|
||||
const { data: cards } = useGetEGiftCardsQuery();
|
||||
const currentCard = cards?.find(
|
||||
(card: EGiftCard) => card.id == giftDetails?.cardId,
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
const { subdomain } = useParams();
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const totalItems = useMemo(() => {
|
||||
return items.length || 0;
|
||||
}, [items]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProInputCard title={t("address.giftDetails")}>
|
||||
<ProPhoneInput
|
||||
propName="receiverPhone"
|
||||
label={t("address.receiverPhone")}
|
||||
value={order?.receiverPhone}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ receiverPhone: e }));
|
||||
}}
|
||||
/>
|
||||
<div className={styles.orderNotes}>
|
||||
<Image src={currentCard?.imageURL} height={42} width={64} style={{height: 42, width: 64}} />
|
||||
<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("checkout.giftSummary")}
|
||||
</ProText>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 12,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#5F6C7B",
|
||||
}}
|
||||
>
|
||||
{t("checkout.holdayGiftCard")} - {t("checkout.messageIncluded")}
|
||||
</ProText>
|
||||
<div style={{ display: "flex", flexDirection: "row", gap: 4 }}>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 12,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#040F35",
|
||||
}}
|
||||
>
|
||||
{t("checkout.to")} :
|
||||
</ProText>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 12,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#5F6C7B",
|
||||
}}
|
||||
>
|
||||
{giftDetails?.receiverName}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
{isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
|
||||
</div>
|
||||
<Divider style={{ margin: "10px 0" }} />
|
||||
|
||||
<Form.Item name="message" label={t("address.message")}>
|
||||
<TextArea
|
||||
placeholder={t("address.message")}
|
||||
size="large"
|
||||
{giftDetails?.giftType === "items" && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
borderRadius: 10,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
rows={2}
|
||||
autoFocus={false}
|
||||
value={order?.message}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ message: e.target.value }));
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="senderName"
|
||||
label={t("address.senderName")}
|
||||
rules={[{ required: true, message: "" }]}
|
||||
colon={false}
|
||||
>
|
||||
<Input
|
||||
placeholder={t("address.senderName")}
|
||||
size="large"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
height: 50,
|
||||
}}
|
||||
autoFocus={false}
|
||||
value={order?.senderName}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ senderName: e.target.value }));
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<ProPhoneInput
|
||||
propName="senderPhone"
|
||||
label={t("address.senderPhone")}
|
||||
value={order?.senderPhone}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ senderPhone: e }));
|
||||
}}
|
||||
/>
|
||||
|
||||
<Form.Item
|
||||
name="senderEmail"
|
||||
label={t("address.senderEmail")}
|
||||
rules={[{ required: true, message: "" }]}
|
||||
colon={false}
|
||||
>
|
||||
<Input
|
||||
placeholder={t("address.senderEmail")}
|
||||
size="large"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
height: 50,
|
||||
}}
|
||||
autoFocus={false}
|
||||
value={order?.senderEmail}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ senderEmail: e.target.value }));
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="isSecret" colon={false}>
|
||||
<Checkbox
|
||||
style={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
autoFocus={false}
|
||||
checked={order?.isSecret}
|
||||
onChange={(e) => {
|
||||
dispatch(updateGiftDetails({ isSecret: e.target.checked }));
|
||||
onClick={() => {
|
||||
navigate(`/${subdomain}/cart`);
|
||||
}}
|
||||
>
|
||||
<ProText>{t("address.keepMyNameSecret")}</ProText>
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 12,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#777580",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
[isRTL ? "marginLeft" : "marginRight"]: 5,
|
||||
position: "relative",
|
||||
top: 3.5,
|
||||
}}
|
||||
>
|
||||
<InvoiceIcon />
|
||||
</span>
|
||||
{t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
|
||||
</ProText>
|
||||
{isRTL ? <BackIcon /> : <NextIcon />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{giftDetails?.giftType === "vouchers" && (
|
||||
<div className={styles.orderNotes}>
|
||||
<div
|
||||
style={{
|
||||
height: 42,
|
||||
width: 64,
|
||||
backgroundColor: "var(--background)",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<CardAmountIcon />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: 14,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#777580",
|
||||
}}
|
||||
>
|
||||
{t("checkout.giftSummary")}
|
||||
</ProText>
|
||||
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: 14,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
color: "#333333",
|
||||
}}
|
||||
>
|
||||
<ArabicPrice price={giftDetails?.amount || 0} />
|
||||
</ProText>
|
||||
</div>
|
||||
{isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
|
||||
</div>
|
||||
)}
|
||||
</ProInputCard>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user