карточки тарифов, ссылки на оферту и персональные данные кнопочка тестовая публикация

This commit is contained in:
Tamara 2024-01-16 21:58:39 +03:00
parent b59112ab35
commit 772c64a33a
13 changed files with 187 additions and 83 deletions

@ -122,7 +122,7 @@ export default function Component() {
<Button
variant="text"
sx={{ fontSize: "16px", fontWeight: 500, color: "white" }}
href={"https://docs.pena.digital/docs"}
href={"https://shub.pena.digital/docs/oferta"}
>
Пользовательское соглашение
</Button>

@ -66,15 +66,15 @@ export default function Component() {
шаблоны квизов с легкой установкой на любой сайт и социальные сети
</Typography>
</Box>
<Button
component={Link}
to={"/signin"}
state={{ backgroundLocation: location }}
variant="contained"
>
Попробуйте бесплатно
</Button>
component={Link}
to={"/signin"}
state={{ backgroundLocation: location }}
variant="contained"
>
Попробуйте бесплатно
</Button>
<Box
component={"img"}

@ -1,19 +1,18 @@
import { Tab } from "@mui/material"
import { styled } from "@mui/material"
import { Tab } from "@mui/material";
import { styled } from "@mui/material";
export const CustomTab = styled(Tab)(({ theme }) => ({
...theme.typography.body2,
color: theme.palette.primary.main,
padding: "15px",
minWidth: 0,
"&.Mui-selected": {
color: "#7e2aea",
textUnderlinePosition: "under",
textDecoration: "underline",
textUnderlineOffset: "3px",
},
"&:first-of-type": {
paddingLeft: 0,
}
}))
...theme.typography.body2,
color: theme.palette.primary.main,
padding: "15px",
minWidth: 0,
"&.Mui-selected": {
color: "#7e2aea",
textUnderlinePosition: "under",
textDecoration: "underline",
textUnderlineOffset: "3px",
},
"&:first-of-type": {
paddingLeft: 0,
},
}));

@ -1,5 +1,5 @@
import { Tabs as MuiTabs } from "@mui/material"
import { CustomTab } from "./CustomTab"
import { Tabs as MuiTabs } from "@mui/material";
import { CustomTab } from "./CustomTab";
type TabsProps = {
names: string[];
@ -8,20 +8,25 @@ type TabsProps = {
setSelectedItem: (num: "count" | "day") => void;
};
export const Tabs = ({ items, names, selectedItem, setSelectedItem }: TabsProps) => (
<MuiTabs
sx={{m:"25px"}}
TabIndicatorProps={{ sx: { display: "none" } }}
value={selectedItem}
onChange={(event, newValue: "count" | "day") => {
console.log(newValue)
setSelectedItem(newValue)
}}
variant="scrollable"
scrollButtons={false}
>
{items.map((item, index) => (
<CustomTab key={item + index} value={item} label={names[index]} />
))}
</MuiTabs>
)
export const Tabs = ({
items,
names,
selectedItem,
setSelectedItem,
}: TabsProps) => (
<MuiTabs
sx={{ m: "25px" }}
TabIndicatorProps={{ sx: { display: "none" } }}
value={selectedItem}
onChange={(event, newValue: "count" | "day") => {
console.log(newValue);
setSelectedItem(newValue);
}}
variant="scrollable"
scrollButtons={false}
>
{items.map((item, index) => (
<CustomTab key={item + index} value={item} label={names[index]} />
))}
</MuiTabs>
);

@ -67,12 +67,12 @@ function TariffPage() {
method: "GET",
url: `https://squiz.pena.digital/strator/tariff?page=${page}&limit=100`,
});
console.log(page)
console.log(page);
tariffsList.push(...tariffsResult.tariffs);
}
console.log("это то что мы отдаём перед концом",tariffsList)
console.log("это то что мы отдаём перед концом", tariffsList);
return tariffsList;
};
@ -88,7 +88,7 @@ function TariffPage() {
url: "https://squiz.pena.digital/price/discounts",
});
setUser(user);
console.log("это то что мы получили в самом конце",tariffsList)
console.log("это то что мы получили в самом конце", tariffsList);
setTariffs(tariffsList);
setDiscounts(discounts.Discounts);
let c = currencyFormatter.format(Number(user.wallet.cash) / 100);
@ -140,7 +140,7 @@ function TariffPage() {
const purchasesAmount = user?.wallet.purchasesAmount ?? 0;
const isUserNko = user?.status === "nko";
console.log(tariffs)
console.log(tariffs);
const filteredTariffs = tariffs.filter((tariff) => {
return (
tariff.privileges[0].serviceKey === "squiz" &&
@ -149,7 +149,7 @@ function TariffPage() {
tariff.privileges[0]?.type === selectedItem
);
});
console.log(filteredTariffs)
console.log(filteredTariffs);
async function handleLogoutClick() {
const [, logoutError] = await logout();
@ -209,9 +209,13 @@ function TariffPage() {
/>
</Box>
</Container>
<Tabs names={Object.values(StepperText)} items={Object.keys(StepperText)} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
<Tabs
names={Object.values(StepperText)}
items={Object.keys(StepperText)}
selectedItem={selectedItem}
setSelectedItem={setSelectedItem}
/>
<Box
sx={{
justifyContent: "left",

@ -1,33 +1,97 @@
import Typography from "@mui/material/Typography";
import TariffCard from "./TariffCard";
import NumberIcon from "@icons/NumberIcon";
import { useTheme } from "@mui/material";
import { Box, useTheme } from "@mui/material";
export default function FreeTariffCard() {
const theme = useTheme();
return (
<TariffCard
icon={<NumberIcon number={0} color="#7e2aea" backgroundColor="white" />}
discount={""}
headerText="бесплатно"
text="Первые 14 дней после регистрации, вы можете пользоваться полным функционалом сервиса совершенно бесплатно"
price={
<Typography variant="price" color="white">
0 руб.
</Typography>
}
// <TariffCard
// icon={<NumberIcon number={0} color="#7e2aea" backgroundColor="white" />}
// discount={""}
// headerText="бесплатно"
// text="Каждому пользователю все наши продукты в первые 14 дней доступны совершенно бесплатно (кроме доп.услуг)"
// price={
// <Typography variant="price" color="white">
// 0 руб.
// </Typography>
// }
// sx={{
// backgroundColor: "#7e2aea",
// color: "white",
// }}
// />
<Box
sx={{
width: "100%",
minHeight: "250px",
backgroundColor: "#7e2aea",
color: "white",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
alignItems: "start",
p: "20px",
}}
buttonProps={{
text: "Выбрать",
sx: {
color: "white",
borderColor: "white",
},
}}
/>
>
<Box
sx={{
position: "relative",
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "16px",
}}
>
<NumberIcon number={0} color="#7e2aea" backgroundColor="white" />
<Box
sx={{
display: "flex",
alignItems: "baseline",
flexWrap: "wrap",
columnGap: "10px",
rowGap: 0,
}}
>
<Typography
sx={{
fontWeight: 500,
fontSize: "20px",
lineHeight: "24px",
}}
color="white"
>
{" "}
0 руб{" "}
</Typography>
</Box>
</Box>
<Typography
variant="h5"
sx={{
mt: "14px",
mb: "10px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
width: "100%",
}}
>
Бесплатно 14 дней
</Typography>
<Box
sx={{
width: "100%",
mb: "auto",
}}
>
<Typography sx={{ overflow: "hidden", textOverflow: "ellipsis" }}>
Каждому пользователю все наши продукты в первые 14 дней доступны
совершенно бесплатно (кроме доп.услуг)
</Typography>
</Box>
</Box>
);
}

@ -131,9 +131,22 @@ export default function TariffCard({
{buttonProps && (
<Button
onClick={buttonProps.onClick}
variant="pena-outlined-purple"
variant="outlined"
sx={{
mt: "10px",
color: "#7e2aea",
minWidth: "180px",
background: "transparent",
"&:hover": {
color: "#7E2AEA",
backgroundColor: "#F2F3F7",
border: "1px solid #7E2AEA",
},
"&:active": {
color: "#FFFFFF",
backgroundColor: " #581CA7",
border: "1px solid #581CA7",
},
...buttonProps.sx,
}}
>

@ -53,11 +53,25 @@ export const createTariffElements = (
price={
<>
{priceBeforeDiscounts !== priceAfterDiscounts && (
<Typography variant="oldPrice">
<Typography
sx={{
textDecorationLine: "line-through",
color: "#FB5607",
fontSize: "15px",
lineHeight: "21px",
}}
>
{currencyFormatter.format(priceBeforeDiscounts / 100)}
</Typography>
)}
<Typography variant="price">
<Typography
sx={{
fontWeight: 500,
fontSize: "20px",
lineHeight: "24px",
color: "#4D4D4D",
}}
>
{currencyFormatter.format(priceAfterDiscounts / 100)}
</Typography>
</>

@ -222,9 +222,15 @@ export const ContactForm = ({
/>
<Typography sx={{ color: theme.palette.text.primary }}>
С&ensp;
<Link> Положением об обработке персональных данных </Link>
<Link href={"https://shub.pena.digital/ppdd"}>
{" "}
Положением об обработке персональных данных{" "}
</Link>
&ensp;и&ensp;
<Link> Политикой конфиденциальности </Link>
<Link href={"https://shub.pena.digital/docs/privacy"}>
{" "}
Политикой конфиденциальности{" "}
</Link>
&ensp;ознакомлен
</Typography>
</Box>

@ -61,7 +61,7 @@ export default function EditPage({
const navigate = useNavigate();
const currentStep = useQuizStore((state) => state.currentStep);
const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const quizConfig = quiz?.config;
// const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);

@ -9,7 +9,6 @@ import { useEffect, useRef, useState } from "react";
import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
import arrowRightIcon from "../../assets/icons/arrow_right.svg";
export default function StepOne() {
const quiz = useCurrentQuiz();
const config = quiz?.config;

@ -55,7 +55,7 @@ export default function Steptwo() {
sx={{
paddingBottom: "15px",
"&::-webkit-scrollbar": { width: 0 },
position: "relative"
position: "relative",
}}
>
<Box
@ -138,7 +138,7 @@ export default function Steptwo() {
left: "0",
top: "55%",
width: "40px",
top: "calc(50% - 40px)"
top: "calc(50% - 40px)",
}}
src={arrowLeftIcon}
/>
@ -149,7 +149,7 @@ export default function Steptwo() {
right: "0",
top: "55%",
width: "40px",
top: "calc(50% - 40px)"
top: "calc(50% - 40px)",
}}
src={arrowRightIcon}
/>

@ -37,7 +37,7 @@ export const ButtonTestPublication = () => {
lineHeight: "18px",
height: "34px",
whiteSpace: "nowrap",
minWidth: "116px",
minWidth: "146px",
}}
onClick={() =>
Object.keys(whyCantCreatePublic).length === 0