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

gift: working on UI ans styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-31 14:28:11 +03:00
parent 38c83d5143
commit 71e1d71c96
22 changed files with 720 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/me.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fascano | Restaurant</title> <title>Fascano | Restaurant</title>
</head> </head>

16
src/assets/locals/ar.json
View File

@@ -459,5 +459,21 @@
"balance": "هدية الرصيد", "balance": "هدية الرصيد",
"itemsAndBalance": "العناصر والرصيد", "itemsAndBalance": "العناصر والرصيد",
"selectGiftType": "اختر نوع الهدية" "selectGiftType": "اختر نوع الهدية"
},
"eGiftCards": {
"title": "بطاقات الهدية",
"pickCardForYourGift": "اختر بطاقة لهديتك",
"chooseDesignToMatchTheOccasion": "اختر تصميم ليتناسب مع المناسبة. يمكنك إضافة ملاحظة لاحقاً."
},
"cardDetails": {
"title": "تفاصيل البطاقة",
"addGiftDetails": "أضف تفاصيل الهدية",
"description": "اضف تفاصيل الهدية بالرسالة، ووقت التوصيل، وتفاصيل المستلم.",
"checkout": "الدفع",
"yourName": "اسمك",
"yourPhone": "رقم هاتفك",
"keepMyNameSecret": "الاحتفاظ باسمي مخفياً",
"receiverInformation": "تفاصيل المستلم",
"costumeAmount": "مبلغ البطاقة"
} }
} }

16
src/assets/locals/en.json
View File

@@ -471,5 +471,21 @@
"balance": "Gift Balance", "balance": "Gift Balance",
"itemsAndBalance": "Items and Balance", "itemsAndBalance": "Items and Balance",
"selectGiftType": "Select Gift Type" "selectGiftType": "Select Gift Type"
},
"eGiftCards": {
"title": "Gift Cards",
"pickCardForYourGift": "Pick a card for your gift",
"chooseDesignToMatchTheOccasion": "Choose a design to match the occasion. You can add a message next."
},
"cardDetails": {
"title": "Card Details",
"addGiftDetails": "Add Gift Details",
"description": "Personalize your gift with a message, delivery timing, and recipient details.",
"checkout": "Checkout",
"yourName": "Your Name",
"yourPhone": "Your Phone",
"keepMyNameSecret": "Keep my name secret",
"receiverInformation": "Receiver Information",
"costumeAmount": "Costume amount"
} }
} }

5
src/components/Icons/EditIcon.tsx
View File

@@ -1,9 +1,10 @@
interface EditIconType { interface EditIconType {
className?: string; className?: string;
onClick?: () => void; onClick?: () => void;
color?: string;
} }
const EditIcon = ({ className, onClick }: EditIconType) => { const EditIcon = ({ className, onClick, color }: EditIconType) => {
return ( return (
<svg <svg
width="16" width="16"
@@ -17,7 +18,7 @@ const EditIcon = ({ className, onClick }: EditIconType) => {
<g clipPath="url(#clip0_1571_6925)"> <g clipPath="url(#clip0_1571_6925)">
<path <path
d="M7.33203 2.66617H4.53203C3.41193 2.66617 2.85187 2.66617 2.42405 2.88415C2.04773 3.0759 1.74176 3.38186 1.55002 3.75819C1.33203 4.18601 1.33203 4.74606 1.33203 5.86617V11.4662C1.33203 12.5863 1.33203 13.1463 1.55002 13.5741C1.74176 13.9505 2.04773 14.2564 2.42405 14.4482C2.85187 14.6662 3.41193 14.6662 4.53203 14.6662H10.132C11.2521 14.6662 11.8122 14.6662 12.24 14.4482C12.6163 14.2564 12.9223 13.9505 13.114 13.5741C13.332 13.1463 13.332 12.5863 13.332 11.4662V8.66617M5.33201 10.6662H6.44838C6.7745 10.6662 6.93756 10.6662 7.09101 10.6293C7.22706 10.5967 7.35711 10.5428 7.47641 10.4697C7.61097 10.3872 7.72627 10.2719 7.95687 10.0413L14.332 3.66617C14.8843 3.11388 14.8843 2.21845 14.332 1.66617C13.7797 1.11388 12.8843 1.11388 12.332 1.66617L5.95685 8.04133C5.72625 8.27193 5.61095 8.38723 5.52849 8.52179C5.45539 8.64108 5.40152 8.77114 5.36885 8.90719C5.33201 9.06064 5.33201 9.2237 5.33201 9.54982V10.6662Z" d="M7.33203 2.66617H4.53203C3.41193 2.66617 2.85187 2.66617 2.42405 2.88415C2.04773 3.0759 1.74176 3.38186 1.55002 3.75819C1.33203 4.18601 1.33203 4.74606 1.33203 5.86617V11.4662C1.33203 12.5863 1.33203 13.1463 1.55002 13.5741C1.74176 13.9505 2.04773 14.2564 2.42405 14.4482C2.85187 14.6662 3.41193 14.6662 4.53203 14.6662H10.132C11.2521 14.6662 11.8122 14.6662 12.24 14.4482C12.6163 14.2564 12.9223 13.9505 13.114 13.5741C13.332 13.1463 13.332 12.5863 13.332 11.4662V8.66617M5.33201 10.6662H6.44838C6.7745 10.6662 6.93756 10.6662 7.09101 10.6293C7.22706 10.5967 7.35711 10.5428 7.47641 10.4697C7.61097 10.3872 7.72627 10.2719 7.95687 10.0413L14.332 3.66617C14.8843 3.11388 14.8843 2.21845 14.332 1.66617C13.7797 1.11388 12.8843 1.11388 12.332 1.66617L5.95685 8.04133C5.72625 8.27193 5.61095 8.38723 5.52849 8.52179C5.45539 8.64108 5.40152 8.77114 5.36885 8.90719C5.33201 9.06064 5.33201 9.2237 5.33201 9.54982V10.6662Z"
stroke="#B58D00" stroke={color || "#B58D00"}
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />

11
src/features/order/orderSlice.ts
View File

@@ -77,7 +77,6 @@ interface CartState {
visibleServices: number; visibleServices: number;
fee: number; fee: number;
giftType: string; giftType: string;
} }
// localStorage keys // localStorage keys
@@ -475,8 +474,14 @@ const orderSlice = createSlice({
); );
} }
}, },
updateGiftDetails(state, action: PayloadAction<GiftDetailsType | null>) { updateGiftDetails(
state.giftDetails = action.payload; state,
action: PayloadAction<Partial<GiftDetailsType> | null>,
) {
state.giftDetails = {
...state.giftDetails,
...action.payload,
} as GiftDetailsType;
// Sync to localStorage // Sync to localStorage
if (typeof window !== "undefined") { if (typeof window !== "undefined") {

76
src/pages/CardDetails/CardDetails.module.css Normal file
View File

@@ -0,0 +1,76 @@
.checkoutContainer {
display: flex;
flex-direction: column;
padding: 16px;
gap: 16px;
overflow: auto;
scrollbar-width: none;
}
.carouselContainer {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
margin-bottom: 24px;
}
.cardWrapper {
display: flex;
align-items: center;
justify-content: center;
}
.cardImage {
width: 205px;
height: 134px;
object-fit: cover;
border-radius: 8px;
}
.arrowButton {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.arrowButton:hover {
background: rgba(0, 0, 0, 0.04);
border-radius: 50%;
}
/* CheckoutButton Styles */
.checkoutButtonContainer {
width: 100%;
padding: 16px 16px 0;
position: sticky;
bottom: 0;
left: 0;
height: 80px;
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 1rem;
background-color: var(--secondary-background);
box-shadow: none;
z-index: 999;
}
/* Dark theme styles for checkout */
:global(.darkApp) .checkoutButtonContainer {
background-color: #000000 !important;
}
.checkoutButton {
width: 100%;
height: 48px;
margin-bottom: 16px;
box-shadow: none;
}

153
src/pages/CardDetails/CardDetails.tsx Normal file
View File

@@ -0,0 +1,153 @@
import { Layout, Image, Button, Form, Skeleton } from "antd";
import ProHeader from "components/ProHeader/ProHeader";
import { useTranslation } from "react-i18next";
import styles from "./CardDetails.module.css";
import ProText from "components/ProText";
import { useGetEGiftCardsQuery } from "redux/api/others";
import { selectCart } from "features/order/orderSlice";
import { useAppSelector } from "redux/hooks";
import { useState, useEffect, useCallback } from "react";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import cardStyles from "./CardDetails.module.css";
import ReceivernformationCard from "./components/ReceivernformationCard/ReceivernformationCard";
import SenderformationCard from "./components/SenderformationCard/SenderformationCard";
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
import { useNavigate, useParams } from "react-router-dom";
import GiftAmountCard from "./components/GiftAmountCard/GiftAmountCard";
export default function CardDetailsPage() {
const { t } = useTranslation();
const { data: cards, isLoading } = useGetEGiftCardsQuery();
const { giftDetails } = useAppSelector(selectCart);
const { isRTL } = useAppSelector((state) => state.locale);
const [currentIndex, setCurrentIndex] = useState(0);
const { subdomain } = useParams();
const navigate = useNavigate();
// Find the initial index based on selected cardId from gift details
useEffect(() => {
if (cards && giftDetails?.cardId) {
const index = cards.findIndex(
(card) => card.id.toString() === giftDetails.cardId,
);
if (index !== -1) {
setCurrentIndex(index);
}
}
}, [cards, giftDetails?.cardId]);
const handlePrevious = () => {
if (cards && cards.length > 0) {
setCurrentIndex((prev) => (prev === 0 ? cards.length - 1 : prev - 1));
}
};
const handleNext = () => {
if (cards && cards.length > 0) {
setCurrentIndex((prev) => (prev === cards.length - 1 ? 0 : prev + 1));
}
};
const currentCard = cards && cards.length > 0 ? cards[currentIndex] : null;
const handleCheckout = useCallback(() => {
navigate(`/${subdomain}/checkout`);
}, [subdomain]);
return (
<Layout>
<ProHeader>{t("cardDetails.title")}</ProHeader>
<Layout.Content className={styles.checkoutContainer}>
<div
style={{
textAlign: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
margin: "50px 28px 35px 28px",
gap: 8,
}}
>
<ProText style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}>
{t("cardDetails.addGiftDetails")}
</ProText>
<ProText style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}>
{t("cardDetails.description")}
</ProText>
</div>
{isLoading || !currentCard ? (
<div className={cardStyles.carouselContainer}>
<Skeleton.Avatar
active
size={40}
shape="circle"
style={{ flexShrink: 0 }}
/>
<div className={cardStyles.cardWrapper}>
<Skeleton.Image
active
style={{
width: 205,
height: 134,
borderRadius: 8,
}}
/>
</div>
<Skeleton.Avatar
active
size={40}
shape="circle"
style={{ flexShrink: 0 }}
/>
</div>
) : (
<div className={cardStyles.carouselContainer}>
<Button
type="text"
className={cardStyles.arrowButton}
onClick={isRTL ? handleNext : handlePrevious}
icon={<BackIcon iconSize={24} />}
/>
<div className={cardStyles.cardWrapper}>
<Image
src={currentCard.imageURL}
alt={currentCard.image}
width={205}
height={134}
className={cardStyles.cardImage}
/>
</div>
<Button
type="text"
className={cardStyles.arrowButton}
onClick={isRTL ? handlePrevious : handleNext}
icon={<NextIcon iconSize={24} />}
/>
</div>
)}
<Form
layout="vertical"
style={{ display: "flex", flexDirection: "column", gap: 16 }}
>
<GiftAmountCard />
<ReceivernformationCard />
<SenderformationCard />
<TimeEstimateCard />
</Form>
</Layout.Content>
<Layout.Footer className={styles.checkoutButtonContainer}>
<Button
type="primary"
shape="round"
className={styles.checkoutButton}
onClick={handleCheckout}
>
{t("cardDetails.checkout")}
</Button>
</Layout.Footer>
</Layout>
);
}

81
src/pages/CardDetails/components/ECardList.tsx Normal file
View File

@@ -0,0 +1,81 @@
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",
}}
>
{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>
);
}

18
src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.module.css Normal file
View File

@@ -0,0 +1,18 @@
.customerInformationCard {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.customerInformationCard > * {
min-width: 0;
width: 100%;
}
/* Reduce gap on small screens to prevent overflow */
@media (max-width: 480px) {
.customerInformationCard {
gap: 8px;
}
}

106
src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx Normal file
View File

@@ -0,0 +1,106 @@
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
import styles from "./GiftAmountCard.module.css";
import ArabicPrice from "components/ArabicPrice";
import ProText from "components/ProText";
import EditIcon from "components/Icons/EditIcon";
export default function GiftAmountCard() {
const { t } = useTranslation();
return (
<ProInputCard title={t("cardDetails.eGiftCardAmount")}>
<div className={styles.customerInformationCard}>
<Button
style={{
borderRadius: 100,
height: 40,
border: "none",
backgroundColor: "#5F6C7B0D",
}}
>
<ArabicPrice
price={10.00}
textStyle={{
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#5F6C7B",
}}
/>
</Button>
<Button
style={{
borderRadius: 100,
height: 40,
border: "none",
backgroundColor: "#5F6C7B0D",
}}
>
<ArabicPrice
price={20.00}
textStyle={{
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#5F6C7B",
}}
/>
</Button>
<Button
style={{
borderRadius: 100,
height: 40,
border: "none",
backgroundColor: "#5F6C7B0D",
}}
>
<ArabicPrice
price={30.00}
textStyle={{
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
textAlign: "center",
color: "#5F6C7B",
}}
/>
</Button>
</div>
<Button
style={{
marginTop: 16,
borderRadius: 100,
width: "100%",
height: 40,
border: "none",
backgroundColor: "#030014",
}}
icon={<EditIcon className={styles.editIcon} color="#FFF" />}
iconPlacement="start"
>
<ProText
style={{
color: "#FFF",
fontWeight: 500,
fontStyle: "Medium",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
}}
>
{t("cardDetails.costumeAmount")}
</ProText>
</Button>
</ProInputCard>
);
}

5
src/pages/CardDetails/components/ReceivernformationCard/ReceivernformationCard.module.css Normal file
View File

@@ -0,0 +1,5 @@
.customerInformationCard {
display: flex;
flex-direction: column;
gap: 16px;
}

56
src/pages/CardDetails/components/ReceivernformationCard/ReceivernformationCard.tsx Normal file
View File

@@ -0,0 +1,56 @@
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProPhoneInput from "components/ProPhoneInput";
import { selectCart, updateGiftDetails } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { Form, Input } from "antd";
import styles from "./ReceivernformationCard.module.css";
import TextArea from "antd/es/input/TextArea";
export default function ReceivernformationCard() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { giftDetails } = useAppSelector(selectCart);
return (
<ProInputCard title={t("cardDetails.receiverInformation")}>
<div className={styles.customerInformationCard}>
<Form.Item name="receiverName">
<Input
placeholder={t("cardDetails.receiverName")}
size="large"
autoFocus={false}
style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
value={giftDetails?.receiverName}
onChange={(e) => {
dispatch(updateGiftDetails({ receiverName: e.target.value }));
}}
/>
</Form.Item>
<ProPhoneInput
propName="receiverPhone"
value={giftDetails?.receiverPhone}
onChange={(e) => {
dispatch(updateGiftDetails({ receiverPhone: e }));
}}
/>
<Form.Item name="message">
<TextArea
placeholder={t("address.message")}
size="large"
style={{
fontSize: 14,
borderRadius: 10,
}}
rows={2}
autoFocus={false}
value={giftDetails?.message}
onChange={(e) => {
dispatch(updateGiftDetails({ message: e.target.value }));
}}
/>
</Form.Item>
</div>
</ProInputCard>
);
}

5
src/pages/CardDetails/components/SenderformationCard/SenderformationCard.module.css Normal file
View File

@@ -0,0 +1,5 @@
.customerInformationCard {
display: flex;
flex-direction: column;
gap: 16px;
}

55
src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx Normal file
View File

@@ -0,0 +1,55 @@
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProPhoneInput from "components/ProPhoneInput";
import { selectCart, updateGiftDetails } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { Checkbox, Form, Input } from "antd";
import styles from "./SenderformationCard.module.css";
import TextArea from "antd/es/input/TextArea";
import ProText from "components/ProText";
export default function SenderformationCard() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { giftDetails } = useAppSelector(selectCart);
return (
<ProInputCard title={t("cardDetails.receiverInformation")}>
<div className={styles.customerInformationCard}>
<Form.Item name="receiverName">
<Input
placeholder={t("cardDetails.yourName")}
size="large"
autoFocus={false}
style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
value={giftDetails?.senderName}
onChange={(e) => {
dispatch(updateGiftDetails({ senderName: e.target.value }));
}}
/>
</Form.Item>
<ProPhoneInput
propName="yourPhone"
value={giftDetails?.senderPhone}
onChange={(e) => {
dispatch(updateGiftDetails({ senderPhone: e }));
}}
/>
<Form.Item name="isSecret" colon={false}>
<Checkbox
style={{
fontSize: 14,
}}
autoFocus={false}
checked={giftDetails?.isSecret}
onChange={(e) => {
dispatch(updateGiftDetails({ isSecret: e.target.checked }));
}}
>
<ProText>{t("cardDetails.keepMyNameSecret")}</ProText>
</Checkbox>
</Form.Item>
</div>
</ProInputCard>
);
}

9
src/pages/CardDetails/type.ts Normal file
View File

@@ -0,0 +1,9 @@
export interface EGiftCard {
id: number;
image: string;
restorant_id: number | null;
is_available: number;
created_at: string;
updated_at: string;
imageURL: string;
}

13
src/pages/EGiftCards/EGiftCards.tsx
View File

@@ -1,24 +1,19 @@
import { Layout, Spin } from "antd"; import { Layout } from "antd";
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader"; import ProHeader from "components/ProHeader/ProHeader";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "../address/address.module.css"; import styles from "../address/address.module.css";
import ECardButton from "./components/ECardButton";
import { useGetEGiftCardsQuery } from "redux/api/others";
import ECardList from "./components/ECardList"; import ECardList from "./components/ECardList";
export default function EGiftCardsPage() { export default function EGiftCardsPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const { data: eGiftCards, isLoading } = useGetEGiftCardsQuery();
return ( return (
<Layout> <Layout>
<ProHeader>{t("checkout.title")}</ProHeader> <ProHeader>{t("eGiftCards.title")}</ProHeader>
<Layout.Content className={styles.checkoutContainer}> <Layout.Content className={styles.checkoutContainer}>
<PaymentMethods /> <ECardList />
{isLoading ? <Spin /> : <ECardList eGiftCards={eGiftCards || []} />}
</Layout.Content> </Layout.Content>
<ECardButton /> {/* <ECardButton /> */}
</Layout> </Layout>
); );
} }

37
src/pages/EGiftCards/components/ECardButton.tsx
View File

@@ -1,37 +0,0 @@
import { Button, Layout, message } from "antd";
import { useTranslation } from "react-i18next";
import styles from "../../address/address.module.css";
import { useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { selectCart } from "features/order/orderSlice";
import { useAppSelector } from "redux/hooks";
export default function ECardButton() {
const { t } = useTranslation();
const { subdomain } = useParams();
const navigate = useNavigate();
const { giftDetails } = useAppSelector(selectCart);
const handleSelectCard = useCallback(() => {
if (giftDetails?.cardId) {
navigate(`/${subdomain}/cardDetails/${giftDetails?.cardId}`);
} else {
message.error(t("gift.pleaseSelectCard"));
}
}, [navigate, subdomain, giftDetails?.cardId]);
return (
<>
<Layout.Footer className={styles.checkoutButtonContainer}>
<Button
type="primary"
shape="round"
className={styles.placeOrderButton}
onClick={handleSelectCard}
>
{t("checkout.placeOrder")}
</Button>
</Layout.Footer>
</>
);
}

83
src/pages/EGiftCards/components/ECardList.tsx
View File

@@ -1,14 +1,81 @@
import { Card, Image } from "antd"; import { Card, Divider, Image } from "antd";
import { EGiftCard } from "../type"; 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 />;
}
export default function ECardList({ eGiftCards }: { eGiftCards: EGiftCard[] }) {
return ( return (
<> <Card style={{ textAlign: "center" }}>
{eGiftCards.map((card: EGiftCard) => ( <div style={{ paddingBottom: 12 }}>
<Card key={card.id}> <ProText
<Image src={card.imageURL} alt={card.image} /> style={{
</Card> 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",
}}
>
{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>
); );
} }

26
src/pages/cart/components/cartFooter/CartFooter.tsx
View File

@@ -13,9 +13,8 @@ interface CartFooterProps {
export default function CartFooter({ form }: CartFooterProps) { export default function CartFooter({ form }: CartFooterProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const { items } = useAppSelector(selectCart); const { items, orderType } = useAppSelector(selectCart);
const { subdomain } = useParams(); const { subdomain } = useParams();
const orderType = localStorage.getItem("orderType");
const navigate = useNavigate(); const navigate = useNavigate();
const handleCheckoutClick = async () => { const handleCheckoutClick = async () => {
@@ -23,7 +22,11 @@ export default function CartFooter({ form }: CartFooterProps) {
else { else {
try { try {
await form.validateFields(); await form.validateFields();
if (orderType === OrderType.Gift) {
navigate(`/${subdomain}/e-gift-cards`);
} else {
navigate(`/${subdomain}/checkout`); navigate(`/${subdomain}/checkout`);
}
} catch (error) { } catch (error) {
message.warning(t("cart.checkRequiredFields")); message.warning(t("cart.checkRequiredFields"));
console.log("Form validation failed:", error); console.log("Form validation failed:", error);
@@ -33,25 +36,6 @@ export default function CartFooter({ form }: CartFooterProps) {
return ( return (
<Layout.Footer className={styles.cartFooter}> <Layout.Footer className={styles.cartFooter}>
<Link
to={`/${subdomain}/menu?${orderType ? `orderType=${orderType}` : ""}`}
style={{
width: "100%",
}}
>
<Button
style={{
borderRadius: 100,
height: 50,
borderColor: "black",
width: "100%",
fontSize: 16,
}}
>
{t("cart.addItem")}
</Button>
</Link>
<Button <Button
style={{ style={{
backgroundColor: colors.primary, backgroundColor: colors.primary,

18
src/pages/checkout/components/GiftCard.tsx
View File

@@ -2,7 +2,11 @@ import { Checkbox, Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard"; import ProInputCard from "components/ProInputCard/ProInputCard";
import ProPhoneInput from "components/ProPhoneInput"; import ProPhoneInput from "components/ProPhoneInput";
import ProText from "components/ProText"; import ProText from "components/ProText";
import { selectCart, updateOrder } from "features/order/orderSlice"; import {
selectCart,
updateGiftDetails,
updateOrder,
} from "features/order/orderSlice";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks"; import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -20,7 +24,7 @@ export function GiftCard() {
label={t("address.receiverPhone")} label={t("address.receiverPhone")}
value={order?.receiverPhone} value={order?.receiverPhone}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, receiverPhone: e })); dispatch(updateGiftDetails({ receiverPhone: e }));
}} }}
/> />
@@ -36,7 +40,7 @@ export function GiftCard() {
autoFocus={false} autoFocus={false}
value={order?.message} value={order?.message}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, message: e.target.value })); dispatch(updateGiftDetails({ message: e.target.value }));
}} }}
/> />
</Form.Item> </Form.Item>
@@ -57,7 +61,7 @@ export function GiftCard() {
autoFocus={false} autoFocus={false}
value={order?.senderName} value={order?.senderName}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, senderName: e.target.value })); dispatch(updateGiftDetails({ senderName: e.target.value }));
}} }}
/> />
</Form.Item> </Form.Item>
@@ -67,7 +71,7 @@ export function GiftCard() {
label={t("address.senderPhone")} label={t("address.senderPhone")}
value={order?.senderPhone} value={order?.senderPhone}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, senderPhone: e })); dispatch(updateGiftDetails({ senderPhone: e }));
}} }}
/> />
@@ -87,7 +91,7 @@ export function GiftCard() {
autoFocus={false} autoFocus={false}
value={order?.senderEmail} value={order?.senderEmail}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, senderEmail: e.target.value })); dispatch(updateGiftDetails({ senderEmail: e.target.value }));
}} }}
/> />
</Form.Item> </Form.Item>
@@ -100,7 +104,7 @@ export function GiftCard() {
autoFocus={false} autoFocus={false}
checked={order?.isSecret} checked={order?.isSecret}
onChange={(e) => { onChange={(e) => {
dispatch(updateOrder({ ...order, isSecret: e.target.checked })); dispatch(updateGiftDetails({ isSecret: e.target.checked }));
}} }}
> >
<ProText>{t("address.keepMyNameSecret")}</ProText> <ProText>{t("address.keepMyNameSecret")}</ProText>

2
src/redux/api/others.ts
View File

@@ -165,7 +165,7 @@ export const branchApi = baseApi.injectEndpoints({
getEGiftCards: builder.query<EGiftCard[], void>({ getEGiftCards: builder.query<EGiftCard[], void>({
query: () => ({ query: () => ({
url: EGIFT_CARDS_URL, url: EGIFT_CARDS_URL,
method: "GET", method: "POST",
}), }),
transformResponse: (response: any) => { transformResponse: (response: any) => {
return response.result; return response.result;

16
src/routes/routes.tsx
View File

@@ -4,8 +4,10 @@ import { PrivateRoute } from "components/privateRoute/PrivateRoute";
import { AppLayout } from "layouts"; import { AppLayout } from "layouts";
import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer"; import HeaderMenuDrawer from "layouts/app/HeaderMenuDrawer";
import AddressPage from "pages/address/page"; import AddressPage from "pages/address/page";
import CardDetailsPage from "pages/CardDetails/CardDetails";
import CartPage from "pages/cart/page"; import CartPage from "pages/cart/page";
import CheckoutPage from "pages/checkout/page"; import CheckoutPage from "pages/checkout/page";
import EGiftCardsPage from "pages/EGiftCards/EGiftCards";
import { Error400Page, ErrorPage } from "pages/errors"; import { Error400Page, ErrorPage } from "pages/errors";
import LoginPage from "pages/login/page"; import LoginPage from "pages/login/page";
import MenuPage from "pages/menu/page"; import MenuPage from "pages/menu/page";
@@ -149,9 +151,19 @@ export const router = createHashRouter([
element: <PageWrapper children={<OrderDetails />} />, element: <PageWrapper children={<OrderDetails />} />,
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
}, },
// {
// path: "pay",
// element: <PageWrapper children={<PayPage />} />,
// errorElement: <ErrorPage />,
// },
{ {
path: "pay", path: "e-gift-cards",
element: <PageWrapper children={<PayPage />} />, element: <PageWrapper children={<EGiftCardsPage />} />,
errorElement: <ErrorPage />,
},
{
path: "card-details",
element: <PageWrapper children={<CardDetailsPage />} />,
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
}, },
{ {