extract promocode field component
This commit is contained in:
nflnkr
parent
5f5ff2d0c4
commit
a424a8030e
122
src/pages/Payment/CollapsiblePromocodeField.tsx
Normal file
122
src/pages/Payment/CollapsiblePromocodeField.tsx
Normal file
@ -0,0 +1,122 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Collapse,
|
||||
TextField,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import SimpleArrowDown from "@root/components/icons/SimpleArrowDown";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
interface Props {
|
||||
fieldValue: string;
|
||||
onFieldChange: (value: string) => void;
|
||||
onPromocodeApply: () => void;
|
||||
}
|
||||
|
||||
export default function CollapsiblePromocodeField({ fieldValue, onFieldChange, onPromocodeApply }: Props) {
|
||||
const theme = useTheme();
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const [isPromocodeFieldOpen, setIsPromocodeFieldOpen] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
}}>
|
||||
<Button
|
||||
variant="pena-text"
|
||||
onClick={() => setIsPromocodeFieldOpen(p => !p)}
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
textUnderlineOffset: "1px",
|
||||
".MuiButton-endIcon": {
|
||||
mr: 0,
|
||||
ml: "15px",
|
||||
},
|
||||
}}
|
||||
endIcon={
|
||||
<SimpleArrowDown sx={{
|
||||
transform: isPromocodeFieldOpen ? "scaleY(-1)" : undefined,
|
||||
transition: "transform 0.3s ease",
|
||||
}} />
|
||||
}
|
||||
>У меня есть промокод</Button>
|
||||
<Collapse
|
||||
in={isPromocodeFieldOpen}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: upSm ? "407px" : "100%",
|
||||
mt: "20px",
|
||||
display: "flex",
|
||||
flexDirection: upSm ? "row" : "column",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Введите промокод"
|
||||
value={fieldValue}
|
||||
onChange={e => onFieldChange(e.target.value)}
|
||||
sx={{
|
||||
height: "48px",
|
||||
"& .MuiInputBase-root": {
|
||||
height: "100%",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
...(upSm ? {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
} : {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
color: "#7E2AEA",
|
||||
backgroundColor: "#7E2AEA1A",
|
||||
height: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "8px",
|
||||
py: 0,
|
||||
...(upSm ? {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
} : {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="pena-contained-dark"
|
||||
onClick={onPromocodeApply}
|
||||
sx={{
|
||||
px: "25px",
|
||||
minWidth: 0,
|
||||
...(upSm ? {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
} : {
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
}),
|
||||
}}
|
||||
>Применить</Button>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -1,38 +1,34 @@
|
||||
import SectionWrapper from "@components/SectionWrapper";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Collapse,
|
||||
Grow,
|
||||
IconButton,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import SectionWrapper from "@components/SectionWrapper";
|
||||
import PaymentMethodCard from "./PaymentMethodCard";
|
||||
import umoneyLogo from "@root/assets/bank-logo/umaney.png";
|
||||
import { activatePromocode } from "@root/api/promocode";
|
||||
import { sendPayment, sendRSPayment } from "@root/api/wallet";
|
||||
import b2bLogo from "@root/assets/bank-logo/b2b.png";
|
||||
import spbLogo from "@root/assets/bank-logo/spb.png";
|
||||
import sberpayLogo from "@root/assets/bank-logo/sberpay.png";
|
||||
import tinkoffLogo from "@root/assets/bank-logo/logo-tinkoff.png";
|
||||
import rsPayLogo from "@root/assets/bank-logo/rs-pay.png";
|
||||
import { cardShadow } from "@root/utils/theme";
|
||||
import { useEffect, useLayoutEffect, useState } from "react";
|
||||
import sberpayLogo from "@root/assets/bank-logo/sberpay.png";
|
||||
import spbLogo from "@root/assets/bank-logo/spb.png";
|
||||
import umoneyLogo from "@root/assets/bank-logo/umaney.png";
|
||||
import InputTextfield from "@root/components/InputTextfield";
|
||||
import { sendPayment, sendRSPayment } from "@root/api/wallet";
|
||||
import { getMessageFromFetchError } from "@frontend/kitui";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { currencyFormatter } from "@root/utils/currencyFormatter";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
|
||||
import { useUserStore } from "@root/stores/user";
|
||||
import { VerificationStatus } from "@root/model/account";
|
||||
import { WarnModal } from "./WarnModal";
|
||||
import { useUserStore } from "@root/stores/user";
|
||||
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 { useLocation, useNavigate } from "react-router-dom";
|
||||
import CollapsiblePromocodeField from "./CollapsiblePromocodeField";
|
||||
import PaymentMethodCard from "./PaymentMethodCard";
|
||||
import { SorryModal } from "./SorryModal";
|
||||
import SimpleArrowDown from "@root/components/icons/SimpleArrowDown";
|
||||
import PromocodeTextField from "./PromocodeTextField";
|
||||
import { activatePromocode } from "@root/api/promocode";
|
||||
import { WarnModal } from "./WarnModal";
|
||||
|
||||
type PaymentMethod = {
|
||||
label: string;
|
||||
@ -57,7 +53,6 @@ export default function Payment() {
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const [promocodeField, setPromocodeField] = useState<string>("");
|
||||
const [isPromocodeFieldOpen, setIsPromocodeFieldOpen] = useState<boolean>(false);
|
||||
const [selectedPaymentMethod, setSelectedPaymentMethod] =
|
||||
useState<PaymentMethodType | null>("");
|
||||
const [warnModalOpen, setWarnModalOpen] = useState<boolean>(false);
|
||||
@ -266,45 +261,11 @@ export default function Payment() {
|
||||
unpopular={false}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
}}>
|
||||
<Button
|
||||
variant="pena-text"
|
||||
onClick={() => setIsPromocodeFieldOpen(p => !p)}
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "18px",
|
||||
lineHeight: "21.33px",
|
||||
textUnderlineOffset: "1px",
|
||||
".MuiButton-endIcon": {
|
||||
mr: 0,
|
||||
ml: "15px",
|
||||
},
|
||||
}}
|
||||
endIcon={
|
||||
<SimpleArrowDown sx={{
|
||||
transform: isPromocodeFieldOpen ? "scaleY(-1)" : undefined,
|
||||
transition: "transform 0.3s ease",
|
||||
}} />
|
||||
}
|
||||
>У меня есть промокод</Button>
|
||||
<Collapse
|
||||
in={isPromocodeFieldOpen}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<PromocodeTextField
|
||||
value={promocodeField}
|
||||
onChange={e => setPromocodeField(e.target.value)}
|
||||
onApplyClick={handleApplyPromocode}
|
||||
<CollapsiblePromocodeField
|
||||
fieldValue={promocodeField}
|
||||
onFieldChange={setPromocodeField}
|
||||
onPromocodeApply={handleApplyPromocode}
|
||||
/>
|
||||
</Collapse>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
import { Box, Button, TextField, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
|
||||
interface Props {
|
||||
value?: string;
|
||||
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
|
||||
onApplyClick?: () => void;
|
||||
}
|
||||
|
||||
export default function PromocodeTextField({ value, onChange, onApplyClick }: Props) {
|
||||
const theme = useTheme();
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: upSm ? "407px" : "100%",
|
||||
mt: "20px",
|
||||
display: "flex",
|
||||
flexDirection: upSm ? "row" : "column",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Введите промокод"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
sx={{
|
||||
height: "48px",
|
||||
"& .MuiInputBase-root": {
|
||||
height: "100%",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
...(upSm ? {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
} : {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
color: "#7E2AEA",
|
||||
backgroundColor: "#7E2AEA1A",
|
||||
height: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "8px",
|
||||
py: 0,
|
||||
...(upSm ? {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
} : {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="pena-contained-dark"
|
||||
onClick={onApplyClick}
|
||||
sx={{
|
||||
px: "25px",
|
||||
minWidth: 0,
|
||||
...(upSm ? {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
} : {
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
}),
|
||||
}}
|
||||
>Применить</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user