Merge branch 'dev' into 'staging'

Dev

See merge request frontend/marketplace!209

src/components/CustomSlider.tsx

@@ -20,6 +20,7 @@ export const CustomSlider = ({
 	const [step, setStep] = useState<number>(1)
 
 	useEffect(() => {
+		if (firstStep === 1) return setStep(1)
 		if (value <= firstStep) {
 			return setStep(firstStep)
 		}

src/components/Drawers.tsx

@@ -20,6 +20,7 @@ import { withErrorBoundary } from "react-error-boundary";
 import { handleComponentError } from "@root/utils/handleComponentError";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { setNotEnoughMoneyAmount, useCartStore } from "@root/stores/cart";
+import { useDiffMoney } from "@root/stores/diffMoney";
 
 function Drawers() {
     const [openNotificationsModal, setOpenNotificationsModal] = useState<boolean>(false);
@@ -35,6 +36,7 @@ function Drawers() {
     const userAccount = useUserStore((state) => state.userAccount);
     const tickets = useTicketStore((state) => state.tickets);
     const notEnoughMoneyAmount = useCartStore(state => state.notEnoughMoneyAmount);
+    const { setNewDiff } = useDiffMoney()
 
     const notificationsCount = tickets.filter(
         ({ user, top_message }) => user !== top_message.user_id && top_message.shown.me !== 1
@@ -67,6 +69,9 @@ function Drawers() {
 
     function handleReplenishWallet() {
         setIsDrawerOpen(false);
+        if (location.pathname.includes("/payment")) {
+            setNewDiff(notEnoughMoneyAmount)
+        }
         navigate("/payment", { state: { notEnoughMoneyAmount } });
     }
 

src/pages/Payment/Payment.tsx

@@ -25,13 +25,15 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 import { cardShadow } from "@root/utils/theme";
 import { enqueueSnackbar } from "notistack";
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import CollapsiblePromocodeField from "./CollapsiblePromocodeField";
 import PaymentMethodCard from "./PaymentMethodCard";
 import { SorryModal } from "./SorryModal";
 import { WarnModal } from "./WarnModal";
 import { mutate } from "swr";
+import { useCartStore } from "@root/stores/cart";
+import { useDiffMoney } from "@root/stores/diffMoney";
 
 type PaymentMethod = {
   label: string;
@@ -66,11 +68,14 @@ export default function Payment() {
   const [fromSquiz, setIsFromSquiz] = useState<boolean>(false);
   const location = useLocation();
   console.log("location", location);
+  console.log("location", location.state);
   const verificationStatus = useUserStore((state) => state.verificationStatus);
   const userId = useUserStore((state) => state.userId);
   const navigate = useNavigate();
   const handleCustomBackNavigation = useHistoryTracker();
 
+  const {diffMoney, setNewDiff} = useDiffMoney()
+
   const notEnoughMoneyAmount =
     (location.state?.notEnoughMoneyAmount as number) ?? 0;
 
@@ -78,6 +83,14 @@ export default function Payment() {
     bigDecimal.multiply(parseFloat(paymentValueField), 100)
   );
 
+    useEffect(() => {
+      console.log(diffMoney)
+      if (diffMoney > 0) {
+        setNewDiff(0)
+        setPaymentValueField((diffMoney / 100).toString())
+      }
+    }, [diffMoney])
+
   useLayoutEffect(() => {
     setPaymentValueField((notEnoughMoneyAmount / 100).toString());
     const params = new URLSearchParams(window.location.search);
@@ -89,7 +102,7 @@ export default function Payment() {
     navigate(`/payment`, {
       replace: true,
     });
-  }, []);
+  }, [   ]);
 
   async function handleChoosePaymentClick() {
     if (!selectedPaymentMethod) {

src/pages/TariffConstructor/TariffItem.tsx

@@ -16,10 +16,11 @@ const sliderSettingsByType = {
     день: { max: 365, min: 0 },
     шаблон: { max: 5000, min: 0 },
     МБ: { max: 5000, min: 0 },
-    заявка: { max: 5000, min: 0 }
+    заявка: { max: 5000, min: 0 },
+    шт: {max: 100, min: 0}
 };
 
-type PrivilegeName = "день" | "шаблон" | "МБ" | "заявка";
+type PrivilegeName = "день" | "шаблон" | "МБ" | "заявка" | "шт";
 
 interface Props {
     privilege: CustomPrivilege;
@@ -52,6 +53,8 @@ export default function TariffPrivilegeSlider({ privilege }: Props) {
     );
 
     function handleSliderChange(measurement: PrivilegeName) {
+        console.log(measurement)
+        console.log(sliderSettingsByType)
         return (value: number | number[]) => {
 
             if (Number(value) < Number(sliderSettingsByType[measurement]?.min)) {
@@ -165,7 +168,16 @@ export default function TariffPrivilegeSlider({ privilege }: Props) {
                     min={sliderSettingsByType[privilege.value]?.min}
                     max={sliderSettingsByType[privilege.value]?.max || 100}
                     onChange={handleSliderChange(privilege.value)}
-                    firstStep={privilege.value === "день" ? 30 : 100}
+                    firstStep={
+                        (
+                            privilege.value !== "день" &&
+                            privilege.value !== "МБ" &&
+                            privilege.value !== "заявка" &&
+                            privilege.value !== "шаблон" 
+                        ) ? 1
+                        :
+                        privilege.value === "день" ? 30 : 100
+                    }
                 />
                 {!upMd && quantityElement}
             </Box>

src/stores/diffMoney.ts

@@ -0,0 +1,14 @@
+import { HistoryRecord, HistoryRecord2 } from "@root/api/history";
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+
+
+type DiffMoneyType = {
+    diffMoney: number;
+    setNewDiff: (diff: number) => void
+};
+
+export const useDiffMoney = create<DiffMoneyType>((set) => ({
+    diffMoney: 0,
+    setNewDiff: (diff: number) => set({diffMoney: diff})
+  }));