gift: update UI and voucher & items BS

src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx

@@ -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>
+  );
+}