gift: update UI and voucher & items BS
This commit is contained in:
83
src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx
Normal file
83
src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
|
||||
import { updateGiftType } from "features/order/orderSlice";
|
||||
import { useAppDispatch } from "redux/hooks";
|
||||
import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon";
|
||||
import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon";
|
||||
import GiftItemsAndBalanceBtnIcon from "components/Icons/GiftItemsAndBalanceBtnIcon";
|
||||
import ProText from "components/ProText";
|
||||
|
||||
interface GiftTypeBottomSheetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave?: () => void;
|
||||
}
|
||||
|
||||
export function GiftTypeBottomSheet({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSave,
|
||||
}: GiftTypeBottomSheetProps) {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const handleSave = (value: string) => {
|
||||
dispatch(updateGiftType(value));
|
||||
onClose();
|
||||
onSave?.();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const textStyle: React.CSSProperties = {
|
||||
fontWeight: 500,
|
||||
fontStyle: "Medium",
|
||||
fontSize: 14,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
textAlign: "center",
|
||||
color: "#86858E",
|
||||
};
|
||||
return (
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={handleCancel}
|
||||
title={t("gift.selectGiftType")}
|
||||
showCloseButton={false}
|
||||
initialSnap={1}
|
||||
height={260}
|
||||
snapPoints={[260]}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
justifyContent: "space-between",
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: 60 }} onClick={() => handleSave("items")}>
|
||||
<GiftItemsBtnIcon />
|
||||
<br />
|
||||
<ProText style={textStyle}>{t("gift.items")}</ProText>
|
||||
</div>
|
||||
<div style={{ width: 60 }} onClick={() => handleSave("vouchers")}>
|
||||
<GiftBalanceBtnIcon />
|
||||
<br />
|
||||
<ProText style={textStyle}>{t("gift.balance")}</ProText>
|
||||
</div>
|
||||
<div
|
||||
style={{ width: 60 }}
|
||||
onClick={() => handleSave("itemsAndVouchers")}
|
||||
>
|
||||
<GiftItemsAndBalanceBtnIcon />
|
||||
<br />
|
||||
<ProText style={textStyle}>{t("gift.itemsAndBalance")}</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
);
|
||||
}
|
||||
60
src/components/Icons/GiftBalanceBtnIcon.tsx
Normal file
60
src/components/Icons/GiftBalanceBtnIcon.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
interface GiftBalanceBtnIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
dimension?: string;
|
||||
}
|
||||
|
||||
const GiftBalanceBtnIcon = ({
|
||||
className,
|
||||
onClick,
|
||||
dimension,
|
||||
}: GiftBalanceBtnIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width={dimension || "60"}
|
||||
height={dimension || "60"}
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="59"
|
||||
height="59"
|
||||
rx="29.5"
|
||||
stroke="url(#paint0_linear_1528_31202)"
|
||||
/>
|
||||
<path
|
||||
d="M16.25 30C16.25 24.8149 16.25 22.2216 17.8615 20.6115C19.473 19.0014 22.0649 19 27.25 19H32.75C37.9351 19 40.5284 19 42.1385 20.6115C43.7486 22.223 43.75 24.8149 43.75 30C43.75 35.1851 43.75 37.7784 42.1385 39.3885C40.527 40.9986 37.9351 41 32.75 41H27.25C22.0649 41 19.4716 41 17.8615 39.3885C16.2514 37.777 16.25 35.1851 16.25 30Z"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M27.25 35.5H21.75M32.75 35.5H30.6875M16.25 27.25H43.75"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1528_31202"
|
||||
x1="60"
|
||||
y1="-2.86102e-06"
|
||||
x2="-132"
|
||||
y2="194"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFFCF5" />
|
||||
<stop offset="0.454842" stopColor="#FFD466" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftBalanceBtnIcon;
|
||||
74
src/components/Icons/GiftItemsAndBalanceBtnIcon.tsx
Normal file
74
src/components/Icons/GiftItemsAndBalanceBtnIcon.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
interface GiftItemsAndBalanceBtnIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
dimension?: string;
|
||||
}
|
||||
|
||||
const GiftItemsAndBalanceBtnIcon = ({
|
||||
className,
|
||||
onClick,
|
||||
dimension,
|
||||
}: GiftItemsAndBalanceBtnIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width={dimension || "60"}
|
||||
height={dimension || "60"}
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="59"
|
||||
height="59"
|
||||
rx="29.5"
|
||||
stroke="url(#paint0_linear_1528_31188)"
|
||||
/>
|
||||
<path
|
||||
d="M35.1562 40.6562C33.9374 40.6563 32.7305 40.4162 31.6045 39.9498C30.4784 39.4833 29.4553 38.7997 28.5934 37.9378C27.7316 37.076 27.0479 36.0528 26.5815 34.9268C26.1151 33.8007 25.875 32.5938 25.875 31.375C25.875 30.1562 26.1151 28.9493 26.5815 27.8232C27.0479 26.6972 27.7316 25.674 28.5934 24.8122C29.4553 23.9503 30.4784 23.2667 31.6045 22.8002C32.7305 22.3338 33.9374 22.0937 35.1562 22.0938"
|
||||
stroke="#FFC600"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.6875 22.0938V27.25M19.6875 40.6562V30.3438M17.1094 27.25H22.2656M22.7812 22.0938V26.5818C22.7812 31.5978 16.5938 31.5978 16.5938 26.5818V22.0938"
|
||||
stroke="#FFC600"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M31.375 31.25C31.375 28.6574 31.375 27.3608 32.1807 26.5557C32.9865 25.7507 34.2824 25.75 36.875 25.75H39.625C42.2176 25.75 43.5142 25.75 44.3192 26.5557C45.1243 27.3615 45.125 28.6574 45.125 31.25C45.125 33.8426 45.125 35.1392 44.3192 35.9442C43.5135 36.7493 42.2176 36.75 39.625 36.75H36.875C34.2824 36.75 32.9858 36.75 32.1807 35.9442C31.3757 35.1385 31.375 33.8426 31.375 31.25Z"
|
||||
stroke="#FFC600"
|
||||
/>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
d="M36.875 34H34.125ZM39.625 34H38.5938ZM31.375 29.875H45.125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M36.875 34H34.125M39.625 34H38.5938M31.375 29.875H45.125"
|
||||
stroke="#FFC600"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1528_31188"
|
||||
x1="60"
|
||||
y1="-2.86102e-06"
|
||||
x2="-132"
|
||||
y2="194"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFFCF5" />
|
||||
<stop offset="0.454842" stopColor="#FFD466" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftItemsAndBalanceBtnIcon;
|
||||
67
src/components/Icons/GiftItemsBtnIcon.tsx
Normal file
67
src/components/Icons/GiftItemsBtnIcon.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
interface GiftItemsBtnIconType {
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
dimension?: string;
|
||||
}
|
||||
|
||||
const GiftItemsBtnIcon = ({
|
||||
className,
|
||||
onClick,
|
||||
dimension,
|
||||
}: GiftItemsBtnIconType) => {
|
||||
return (
|
||||
<svg
|
||||
width={dimension || "60"}
|
||||
height={dimension || "60"}
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
<rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="59"
|
||||
height="59"
|
||||
rx="29.5"
|
||||
stroke="url(#paint0_linear_1528_12064)"
|
||||
/>
|
||||
<path
|
||||
d="M42.375 36.875C40.5516 36.875 38.803 36.1507 37.5136 34.8614C36.2243 33.572 35.5 31.8234 35.5 30C35.5 28.1766 36.2243 26.428 37.5136 25.1386C38.803 23.8493 40.5516 23.125 42.375 23.125"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M42.375 42.375C40.7499 42.375 39.1407 42.0549 37.6393 41.433C36.1379 40.8111 34.7737 39.8996 33.6246 38.7504C32.4754 37.6013 31.5639 36.2371 30.942 34.7357C30.3201 33.2343 30 31.6251 30 30C30 28.3749 30.3201 26.7657 30.942 25.2643C31.5639 23.7629 32.4754 22.3987 33.6246 21.2496C34.7737 20.1004 36.1379 19.1889 37.6393 18.567C39.1407 17.9451 40.7499 17.625 42.375 17.625"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.75 17.625V24.5M21.75 42.375V28.625M18.3125 24.5H25.1875M25.875 17.625V23.609C25.875 30.297 17.625 30.297 17.625 23.609V17.625"
|
||||
stroke="#FFC600"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1528_12064"
|
||||
x1="60"
|
||||
y1="-2.86102e-06"
|
||||
x2="-132"
|
||||
y2="194"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFFCF5" />
|
||||
<stop offset="0.454842" stopColor="#FFD466" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftItemsBtnIcon;
|
||||
Reference in New Issue
Block a user