84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { Card, Divider, Image } from "antd";
|
|
import { EGiftCard } from "../type";
|
|
import { useGetEGiftCardsQuery } from "redux/api/others";
|
|
import LoadingSpinner from "components/LoadingSpinner/LoadingSpinner";
|
|
import ProText from "components/ProText";
|
|
import { useTranslation } from "react-i18next";
|
|
import { updateGiftDetails } from "features/order/orderSlice";
|
|
import { useAppDispatch } from "redux/hooks";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
export default function ECardList() {
|
|
const dispatch = useAppDispatch();
|
|
const navigate = useNavigate();
|
|
const { subdomain } = useParams();
|
|
const { data: eGiftCards, isLoading } = useGetEGiftCardsQuery();
|
|
const { t } = useTranslation();
|
|
console.log(eGiftCards);
|
|
const handleCardClick = (id: number) => {
|
|
dispatch(updateGiftDetails({ cardId: id.toString() }));
|
|
navigate(`/${subdomain}/card-details`);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner />;
|
|
}
|
|
|
|
return (
|
|
<Card style={{ textAlign: "center" }}>
|
|
<div style={{ paddingBottom: 12 }}>
|
|
<ProText
|
|
style={{
|
|
fontSize: 16,
|
|
fontWeight: 600,
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("eGiftCards.pickCardForYourGift")}
|
|
</ProText>
|
|
</div>
|
|
<ProText
|
|
style={{
|
|
fontFamily: "Outfit",
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: 0,
|
|
textAlign: "center",
|
|
color: "#95949C",
|
|
}}
|
|
>
|
|
{t("eGiftCards.chooseDesignToMatchTheOccasion")}
|
|
</ProText>
|
|
<Divider style={{ margin: "12px 0 16px 0" }} />
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr",
|
|
padding: "8px",
|
|
placeItems: "center",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
{eGiftCards?.map((card: EGiftCard) => (
|
|
<Image
|
|
src={card.imageURL}
|
|
alt={card.image}
|
|
width={135}
|
|
height={88}
|
|
preview={false}
|
|
onClick={() => handleCardClick(card.id)}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "cover",
|
|
borderRadius: 8,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|