redeem: initial commit
This commit is contained in:
33
src/components/Icons/CopyIcon.tsx
Normal file
33
src/components/Icons/CopyIcon.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
interface CopyIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const CopyIcon = ({ className, onClick }: CopyIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<path
|
||||
d="M5.83203 8.05453C5.83203 7.46509 6.06619 6.89979 6.48299 6.48299C6.89979 6.06619 7.46509 5.83203 8.05453 5.83203H15.2762C15.5681 5.83203 15.8571 5.88952 16.1267 6.00121C16.3964 6.1129 16.6414 6.27661 16.8477 6.48299C17.0541 6.68936 17.2178 6.93437 17.3295 7.20402C17.4412 7.47366 17.4987 7.76267 17.4987 8.05453V15.2762C17.4987 15.5681 17.4412 15.8571 17.3295 16.1267C17.2178 16.3964 17.0541 16.6414 16.8477 16.8477C16.6414 17.0541 16.3964 17.2178 16.1267 17.3295C15.8571 17.4412 15.5681 17.4987 15.2762 17.4987H8.05453C7.76267 17.4987 7.47366 17.4412 7.20402 17.3295C6.93437 17.2178 6.68936 17.0541 6.48299 16.8477C6.27661 16.6414 6.1129 16.3964 6.00121 16.1267C5.88952 15.8571 5.83203 15.5681 5.83203 15.2762V8.05453Z"
|
||||
stroke="#A4A3AA"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.34333 13.9475C3.0875 13.8021 2.87471 13.5916 2.72658 13.3374C2.57846 13.0832 2.50028 12.7942 2.5 12.5V4.16667C2.5 3.25 3.25 2.5 4.16667 2.5H12.5C13.125 2.5 13.465 2.82083 13.75 3.33333"
|
||||
stroke="#A4A3AA"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyIcon;
|
||||
25
src/components/Icons/DirectionsIcon.tsx
Normal file
25
src/components/Icons/DirectionsIcon.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
interface DirectionsIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const DirectionsIcon = ({ className, onClick }: DirectionsIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<path
|
||||
d="M7.5 9H10.125V9.975C10.125 10.15 10.2 10.2687 10.35 10.3312C10.5 10.3938 10.6375 10.3625 10.7625 10.2375L12.225 8.775C12.375 8.625 12.45 8.45 12.45 8.25C12.45 8.05 12.375 7.875 12.225 7.725L10.7625 6.2625C10.6375 6.1375 10.5 6.10625 10.35 6.16875C10.2 6.23125 10.125 6.35 10.125 6.525V7.5H6.75C6.5375 7.5 6.3595 7.572 6.216 7.716C6.0725 7.86 6.0005 8.038 6 8.25V10.5C6 10.7125 6.072 10.8907 6.216 11.0347C6.36 11.1788 6.538 11.2505 6.75 11.25C6.962 11.2495 7.14025 11.1775 7.28475 11.034C7.42925 10.8905 7.501 10.7125 7.5 10.5V9ZM9 16.5C8.8125 16.5 8.62825 16.4625 8.44725 16.3875C8.26625 16.3125 8.1005 16.2 7.95 16.05L1.95 10.05C1.8 9.9 1.6875 9.73425 1.6125 9.55275C1.5375 9.37125 1.5 9.187 1.5 9C1.5 8.813 1.5375 8.62875 1.6125 8.44725C1.6875 8.26575 1.8 8.1 1.95 7.95L7.95 1.95C8.1 1.8 8.26575 1.6875 8.44725 1.6125C8.62875 1.5375 8.813 1.5 9 1.5C9.187 1.5 9.3715 1.5375 9.5535 1.6125C9.7355 1.6875 9.901 1.8 10.05 1.95L16.05 7.95C16.2 8.1 16.3125 8.26575 16.3875 8.44725C16.4625 8.62875 16.5 8.813 16.5 9C16.5 9.187 16.4625 9.3715 16.3875 9.5535C16.3125 9.7355 16.2 9.901 16.05 10.05L10.05 16.05C9.9 16.2 9.73425 16.3125 9.55275 16.3875C9.37125 16.4625 9.187 16.5 9 16.5ZM6 12L9 15L15 9L9 3L3 9L6 12Z"
|
||||
fill="#E8B400"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default DirectionsIcon;
|
||||
45
src/components/Icons/GiftIcon.tsx
Normal file
45
src/components/Icons/GiftIcon.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
interface GiftIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const GiftIcon = ({ className, onClick }: GiftIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<path
|
||||
d="M13 4.67188H3C2.44772 4.67188 2 5.11959 2 5.67187V13.0052C2 13.5575 2.44772 14.0052 3 14.0052H13C13.5523 14.0052 14 13.5575 14 13.0052V5.67187C14 5.11959 13.5523 4.67188 13 4.67188Z"
|
||||
stroke="#7950E6"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 10.6719H14V13.0052C14 13.2704 13.8946 13.5248 13.7071 13.7123C13.5196 13.8999 13.2652 14.0052 13 14.0052H3C2.73478 14.0052 2.48043 13.8999 2.29289 13.7123C2.10536 13.5248 2 13.2704 2 13.0052V10.6719Z"
|
||||
stroke="#7950E6"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.33464 4.66927C7.25511 4.66927 8.0013 3.92308 8.0013 3.0026C8.0013 2.08213 7.25511 1.33594 6.33464 1.33594C5.41416 1.33594 4.66797 2.08213 4.66797 3.0026C4.66797 3.92308 5.41416 4.66927 6.33464 4.66927Z"
|
||||
stroke="#7950E6"
|
||||
/>
|
||||
<path
|
||||
d="M9.33333 4.66667C10.0697 4.66667 10.6667 4.06971 10.6667 3.33333C10.6667 2.59695 10.0697 2 9.33333 2C8.59695 2 8 2.59695 8 3.33333C8 4.06971 8.59695 4.66667 9.33333 4.66667Z"
|
||||
stroke="#7950E6"
|
||||
/>
|
||||
<path
|
||||
d="M5.66797 6.67188L8.0013 4.67188L10.3346 6.67188"
|
||||
stroke="#7950E6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftIcon;
|
||||
@@ -25,7 +25,7 @@ export default function OrderSummary() {
|
||||
const { useLoyaltyPoints, splitBillAmount } = useAppSelector(selectCart);
|
||||
const { subdomain } = useParams();
|
||||
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
|
||||
const { orderType } = useAppSelector(selectCart);
|
||||
const { orderType, tip } = useAppSelector(selectCart);
|
||||
const dispatch = useAppDispatch();
|
||||
const subtotal = useAppSelector(selectCartTotal);
|
||||
const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
|
||||
@@ -82,25 +82,62 @@ export default function OrderSummary() {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.discount")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={discountAmount}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.tax")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={taxAmount || 0}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
{splitBillAmount > 0 && (
|
||||
{orderType !== OrderType.Redeem && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.discount")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={discountAmount}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderType !== OrderType.Redeem && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.tip")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={tip || 0}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderType === OrderType.Redeem && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.giftedItems")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={0}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderType === OrderType.Redeem && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.voucherApplied")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={0}
|
||||
style={{ ...titlesStyle, color: "#32AD6D" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderType !== OrderType.Redeem && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("cart.tax")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={taxAmount || 0}
|
||||
style={{ ...titlesStyle, color: "#434E5C" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderType !== OrderType.Redeem && splitBillAmount > 0 && (
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText type="secondary" style={titlesStyle}>
|
||||
{t("splitBill.splitBillAmount")}
|
||||
@@ -124,7 +161,9 @@ export default function OrderSummary() {
|
||||
color: "#333333",
|
||||
}}
|
||||
>
|
||||
{t("cart.totalAmount")}
|
||||
{orderType === OrderType.Redeem
|
||||
? t("cart.remainingToPay")
|
||||
: t("cart.totalAmount")}
|
||||
</ProText>
|
||||
<ArabicPrice
|
||||
price={grandTotal}
|
||||
@@ -140,27 +179,32 @@ export default function OrderSummary() {
|
||||
</div>
|
||||
</Space>
|
||||
|
||||
{isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
|
||||
<>
|
||||
<Checkbox
|
||||
checked={useLoyaltyPoints}
|
||||
onChange={(value) => {
|
||||
dispatch(updateUseLoyaltyPoints(value.target.checked));
|
||||
}}
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
{t("cart.useLoyaltyPoints")}
|
||||
</Checkbox>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isHasLoyaltyGift && loyaltyValidation.errorMessage && (
|
||||
<div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
|
||||
{t(loyaltyValidation.errorMessage)}
|
||||
</div>
|
||||
)}
|
||||
{isHasLoyaltyGift &&
|
||||
restaurant?.is_loyalty_enabled === 1 &&
|
||||
orderType !== OrderType.Redeem && (
|
||||
<>
|
||||
<Checkbox
|
||||
checked={useLoyaltyPoints}
|
||||
onChange={(value) => {
|
||||
dispatch(updateUseLoyaltyPoints(value.target.checked));
|
||||
}}
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
{t("cart.useLoyaltyPoints")}
|
||||
</Checkbox>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isHasLoyaltyGift &&
|
||||
loyaltyValidation.errorMessage &&
|
||||
orderType !== OrderType.Redeem && (
|
||||
<div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
|
||||
{t(loyaltyValidation.errorMessage)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isHasLoyaltyGift &&
|
||||
orderType !== OrderType.Redeem &&
|
||||
useLoyaltyPoints &&
|
||||
highestLoyaltyItem &&
|
||||
restaurant?.is_loyalty_enabled === 1 && (
|
||||
|
||||
Reference in New Issue
Block a user