Merge branch 'dev' into 'main'

Dev

See merge request frontend/marketplace!64

src/components/Footer.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
 import PenaLogo from "./PenaLogo";
 import SectionWrapper from "./SectionWrapper";
+import { Link } from "react-router-dom";
 
 export default function Footer() {
   const theme = useTheme();
@@ -27,6 +28,9 @@ export default function Footer() {
         sx={{
           display: "flex",
           flexDirection: upMd ? "row" : "column",
+          width: "100%",
+          justifyContent: "space-between",
+          alignItems: "center"
         }}
       >
         <Box
@@ -53,15 +57,17 @@ export default function Footer() {
             },
           }}
         >
+          <Link to="https://docs.pena.digital/docs">
+          <Button variant="pena-navitem-dark">Оферта</Button>
+          </Link>
+          {/* <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
           <Button variant="pena-navitem-dark">Меню 1</Button>
-          <Button variant="pena-navitem-dark">Меню 1</Button>
+          <Button variant="pena-navitem-dark">Меню 1</Button> */}
-          <Button variant="pena-navitem-dark">Меню 1</Button>
-          <Button variant="pena-navitem-dark">Меню 1</Button>
         </Box>
         <Typography
           variant="body2"
@@ -71,18 +77,9 @@ export default function Footer() {
             mb: upMd ? undefined : "36px",
           }}
         >
-          Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрач
+          ООО Пена© 2023 {new Date().getFullYear() === 2023 ? "" : " - " + new Date().getFullYear()}
         </Typography>
       </Box>
-      {!upMd && <Divider sx={{ width: "100%", bgcolor: "white", borderColor: "#00000000" }} />}
-      <Typography
-        variant="body2"
-        sx={{
-          mt: "25px",
-        }}
-      >
-        Конструктор маркетинговых решений. © 2022
-      </Typography>
     </SectionWrapper>
   );
 }

src/components/Menu.tsx

@@ -16,19 +16,8 @@ export default function Menu() {
   const color = location.pathname === "/" ? "white" : "black";
 
   const arrayMenu: MenuItem[] = [
-    {
+    { name: "Наши продукты", url: "/faq" },
-      name: "Тарифы",
+    { name: "Наши услуги", url: "/cart" }
-      url: "/tariffs",
-      subMenu: [
-        { name: "Тарифы на время", url: "/tariffs/time" },
-        { name: "Тарифы на объём", url: "/tariffs/volume" },
-        { name: "Кастомный тариф", url: "/tariffconstructor" },
-      ],
-    },
-    { name: "Вопросы и ответы", url: "/faq" },
-    { name: "Корзина", url: "/cart" },
-    { name: "Поддержка", url: "/support" },
-    { name: "История", url: "/history" },
   ];
 
   return (

src/components/NavbarOld/DialogMenu.tsx

@@ -10,18 +10,8 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
 
 
 const arrayMenu = [
-  { name: "Главная", url: "/" },
+  { name: "Наши продукты", url: "/" },
-  { name: "Профиль", url: "/settings" },
+  { name: "Наши услуги", url: "/" },
-  { name: "Тарифы", url: "/tariffs" },
-  { name: "Тарифы на время", url: "/tariffs/time" },
-  { name: "Тарифы на объём", url: "/tariffs/volume" },
-  { name: "Кастомный тариф", url: "/tariffconstructor" },
-  { name: "Вопросы и ответы", url: "/faq" },
-  { name: "История", url: "/history" },
-  { name: "Оплата", url: "/payment" },
-  { name: "Поддержка", url: "/support" },
-  { name: "Оплата", url: "/wallet" },
-  { name: "Корзина", url: "/cart" },
 ];
 
 const Transition = React.forwardRef(function Transition(
@@ -54,8 +44,7 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
       sx={{
         width: isTablet ? "100%" : "320px",
         ml: "auto",
-        mt: "50px",
+        mt: isTablet ? "50px" : "80px",
-        height: "100%",
         ".MuiBackdrop-root.MuiModal-backdrop": {
           background: "transparent",
         },
@@ -94,7 +83,8 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
               variant="text"
               sx={{
                 fontWeight: "500",
-                color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
+                // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
+                color: "white",
                 height: "20px",
                 textTransform: "none",
                 marginBottom: "25px",
@@ -116,22 +106,10 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
           component={Link}
           to={user ? "/tariffs" : "/signin"}
           state={user ? undefined : { backgroundLocation: location }}
-            variant="outlined"
+          variant="pena-contained-dark"
-            sx={{
+          sx={{px: "30px",  ml: "40px" ,  width: "245px"}}
-              width: "188px",
-              color: "white",
-              border: "1px solid white",
-              ml: "40px",
-              mt: isMobileHeight ? "0" : "35px",
-              textTransform: "none",
-              fontWeight: "400",
-              fontSize: "18px",
-              lineHeight: "24px",
-              borderRadius: "8px",
-              padding: "8px 17px",
-            }}
         >
-            Личный кабинет
+          Регистрация / Войти
         </Button>
         ) : (
           <Box
@@ -164,26 +142,6 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
         )
       ) : (
         <>
-          <Button
-            component={Link}
-            to={user ? "/tariffs" : "/signin"}
-            state={user ? undefined : { backgroundLocation: location }}
-            variant="outlined"
-            sx={{
-              width: "188px",
-              color: "white",
-              border: "1px solid white",
-              margin: "35px 0 0 126px",
-              textTransform: "none",
-              fontWeight: "400",
-              fontSize: "18px",
-              lineHeight: "24px",
-              borderRadius: "8px",
-              padding: "8px 17px",
-            }}
-          >
-            Личный кабинет
-          </Button>
           <Box
             sx={{
               position: "absolute",

src/components/NavbarOld/NavbarFull.tsx

@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import SectionWrapper from "../SectionWrapper";
 import LogoutIcon from "../icons/LogoutIcon";
+import DialogMenu from "./DialogMenu";
 import WalletIcon from "../icons/WalletIcon";
 import CustomAvatar from "./Avatar";
 import Drawers from "../Drawers";
@@ -138,22 +139,26 @@ export default function NavbarFull({ isLoggedIn }: Props) {
           gap: "50px",
         }}
       >
+        <Box width="457px" justifyContent="space-between" display="inline-flex" alignItems="center" >
         <PenaLogo width={150}  color="white" />
         {!isTablet ? null : <Menu />}
+
+        </Box>
         <Button
           component={Link}
           to={user ? "/tariffs" : "/signin"}
           state={user ? undefined : { backgroundLocation: location }}
-          variant="pena-outlined-dark"
+          variant="pena-contained-dark"
-          sx={{ px: "4px", ml: !isTablet ? "auto" : "none" }}
+          sx={{px: "30px", ml: !isTablet ? "auto" : "none" }}
         >
-          Личный кабинет
+          Регистрация / Войти
         </Button>
         <BurgerButton
           onClick={() => setOpen(!open)}
           sx={{ color: "white", display: !isTablet ? "block" : "none" }}
         />
       </SectionWrapper>
+      <DialogMenu open={open} handleClose={() => setOpen(false)} />
     </>
   );
 }

src/components/SectionWrapper.tsx

@@ -5,6 +5,7 @@ interface Props {
   component?: ElementType;
   outerContainerSx?: SxProps<Theme>;
   sx?: SxProps<Theme>;
+  innerSx?: SxProps<Theme>;
   maxWidth?: false | Breakpoint;
   children?: React.ReactNode;
 }

src/components/wideTemplCard.tsx

@@ -6,9 +6,11 @@ import { Link as RouterLink } from "react-router-dom";
 interface Props {
   light?: boolean;
   sx?: SxProps<Theme>;
+  name?: string;
+  desc?: string;
 }
 
-export default function WideTemplCard({ light = true, sx }: Props) {
+export default function WideTemplCard({ light = true, sx, name="Шаблонизатор", desc="тект заполнитель это текст который имеет" }: Props) {
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
@@ -32,25 +34,10 @@ export default function WideTemplCard({ light = true, sx }: Props) {
           alignItems: "start",
         }}
       >
-        <Typography variant="h5">Шаблонизатор</Typography>
+        <Typography variant="h5">{name}</Typography>
         <Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
-          Текст- это текст, который имеет некоторые характеристики реального письменного текс
+          {desc}
         </Typography>
-        {light ? (
-          <Button variant="pena-contained-light" sx={{ mt: "28px" }}>
-            Подробнее
-          </Button>
-        ) : (
-          <PenaLink
-            component={RouterLink}
-            to="/"
-            sx={{
-              mt: "auto",
-            }}
-          >
-            Подробнее
-          </PenaLink>
-        )}
       </Box>
       <img
         src={cardImageBig}

src/pages/History/AccordionWrapper.tsx

@@ -35,7 +35,10 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
   content[0].Value[0].forEach((item) => {
     valuesByKey[item.Key] = item.Value;
   });
-  
+  console.log(content)
+  console.log(content[0])
+  console.log(content[0].Value)
+  console.log(valuesByKey)
   const extractDateFromString = (tariffName: string) => {
     const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
     return dateMatch ? dateMatch[0] : null;
@@ -104,7 +107,7 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
                   whiteSpace: "nowrap",
                 }}
               >
-                {extractDateFromString(createdAt)}
+                {createdAt}
               </Typography>
 
               <Typography

src/pages/History/index.tsx

@@ -25,6 +25,11 @@ export default function History() {
 
   const handleCustomBackNavigation = useHistoryTracker();
 
+  const extractDateFromString = (tariffName: string) => {
+    const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
+    return dateMatch ? dateMatch[0] : "";
+  };
+
   return (
     <SectionWrapper
       maxWidth="lg"
@@ -63,7 +68,10 @@ export default function History() {
         <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
       )}
       {historyData?.records
-      .filter((e) => (e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)))
+      .filter((e) => {
+        e.createdAt = extractDateFromString(e.createdAt)
+        return(!e.isDeleted && e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)
+      )})
       .map(( e, index) => {
         return (
         <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
@@ -71,6 +79,7 @@ export default function History() {
             first={index === 0}
             last={index === historyData?.records.length - 1}
             content={e.rawDetails}
+            key={e.id}
             createdAt={e.createdAt}
           />
         </Box>

src/pages/Landing/PromoCard.tsx

@@ -9,6 +9,9 @@ interface Props {
   text: string;
   textOrientation: "row" | "column";
   sx?: SxProps<Theme>;
+  sxBoxText?: SxProps<Theme>;
+  sxHeader?: SxProps<Theme>;
+  sxText?: SxProps<Theme>;
   small?: boolean;
 }
 
@@ -20,6 +23,9 @@ export default function PromoCard({
   backgroundPosition,
   textOrientation,
   sx,
+  sxHeader,
+  sxBoxText,
+  sxText,
   width,
   small = false,
 }: Props) {
@@ -64,15 +70,15 @@ export default function PromoCard({
           sx={{
             display: "grid",
             gridTemplate: small || textOrientation === "column" ? "auto auto / auto" : "2.5em / 30% 50%",
+            ...sxBoxText
           }}
         >
           <Box
             sx={{
-              maxWidth: "140px",
               mb: "20px",
             }}
           >
-            <Typography variant="h5" sx={{ maxWidth: "75%", whiteSpace: isMobile ? "nowrap" : "normal" }}>
+            <Typography variant="h5" sx={{ maxWidth: "180px", whiteSpace: isMobile ? "nowrap" : "normal", ...sxHeader}}>
               {headerText}
             </Typography>
           </Box>
@@ -81,6 +87,7 @@ export default function PromoCard({
               overflow: "hidden",
               maxWidth: "200px",
               maxHeight: "5.92em",
+              ...sxText
             }}
           >
             {text}

src/pages/Landing/Section1.tsx

@@ -25,7 +25,7 @@ export default function Section1() {
         display: "flex",
         pt: upMd ? "20px" : "20px",
         px: !isTablet ? (upMd ? "40px" : "18px") : "20px",
-        pb: "0px",
+        pb: "10px",
         flexDirection: upMd ? "row" : "column",
       }}
     >
@@ -42,16 +42,16 @@ export default function Section1() {
         }}
       >
         <Typography sx={{ maxWidth: !isTablet ? "500px" : "100%" }} variant="h2">
-          Сервисы прокачки маркетинга
+          Сервисы прокачки маркетинга и бизнеса
         </Typography>
 
-        <Typography mt="35px" maxWidth="560px">
+        <Typography mt="35px" maxWidth="380px">
-          Покажут эффективность рекламы. Соберут все обращения клиентов. Повысят конверсию сайта
+          Автоматизация и новые источники трафика в единой экосистеме
         </Typography>
-        <Typography mt="11.5px">И все это в едином кабинете</Typography>
+        {/*<Typography mt="11.5px">И все это в едином кабинете</Typography>*/}
-        <Button variant="pena-contained-dark" sx={{ mt: "40px" }}>
+        {/*<Button variant="pena-contained-dark" sx={{ mt: "40px" }}>*/}
-          Подробнее
+        {/*  Подробнее*/}
-        </Button>
+        {/*</Button>*/}
       </Box>
       <Box
         sx={{

src/pages/Landing/Section2.tsx

@@ -39,7 +39,7 @@ export default function Section2() {
             maxWidth: "50%",
           }}
         >
-          Интеграции, избавляющие <br /> от рутины
+          Хватит сливать бюджет!
         </Typography>
         <Box
           sx={{
@@ -53,44 +53,14 @@ export default function Section2() {
           }}
         >
           <Typography sx={{ fontSize: upMd ? "18px" : "17px" }} maxWidth="560px">
-            Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и
+          Надежные сервисы, которые не подведут. Увеличение эффективности рекламной кампании и увеличение ROI и ROMI на десятки процентов при использовании всех наших продуктов.
-            эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
           </Typography>
-          <PenaLink component={RouterLink} to="/">
-            Подробнее
-          </PenaLink>
         </Box>
       </Box>
-      {upMd ? <WideTemplCard light={false} sx={{ marginTop: "73px" }} /> : <TemplCardPhonePink />}
+      {upMd ? <WideTemplCard name="PenaDoc" desc="Сервис автоматизации, избавляющий от рутины 
+в документообороте. 1 раз делаешь шаблон и используешь всю жизнь " light={false} sx={{ marginTop: "126px" }} /> : <TemplCardPhonePink />}
+
       
-      {/*<Box sx={{*/}
-      {/*    mt: upMd ? "93px" : "55px",*/}
-      {/*    display: "flex",*/}
-      {/*    flexWrap: "wrap",*/}
-      {/*    justifyContent: "space-evenly",*/}
-      {/*    columnGap: "40px",*/}
-      {/*    rowGap: "50px",*/}
-      {/*}}>*/}
-      {/*    <CardWithLink*/}
-      {/*        headerText="Шаблонизатор"*/}
-      {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
-      {/*        linkHref="#"*/}
-      {/*        image={card1Image}*/}
-      {/*        isHighlighted={!upMd}*/}
-      {/*    />*/}
-      {/*    <CardWithLink*/}
-      {/*        headerText="Опросник"*/}
-      {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
-      {/*        linkHref="#"*/}
-      {/*        image={card2Image}*/}
-      {/*    />*/}
-      {/*    <CardWithLink*/}
-      {/*        headerText="Сокращатель ссылок"*/}
-      {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
-      {/*        linkHref="#"*/}
-      {/*        image={card3Image}*/}
-      {/*    />*/}
-      {/*</Box>*/}
     </SectionWrapper>
   );
 }

src/pages/Landing/Section3.tsx

@@ -52,69 +52,73 @@ export default function Section3() {
           variant="h4"
           sx={{
             mb: upMd ? "67px" : "30px",
+            width: isMobile ? "340px" : "562px"
           }}
         >
-          Узнайте, как наши сервисы решают ваши задачи
+          Не знаете, подходят ли наши продукты для вашего бизнеса?
         </Typography>
         <Box
           sx={{
             mb: upMd ? "20px" : "30px",
           }}
         >
-          <Typography>Покажут эффективность рекламы</Typography>
+          <Typography>Зарегистрируйтесь и напишите в тех поддержку, </Typography>
-          <Typography>Соберут все обращения клиентов</Typography>
+          <Typography>наши опытные операторы проконсультируют </Typography>
-          <Typography>Повысят конверсию сайта</Typography>
+          <Typography>вас по всем вопросам, в том числе и как мы можем увеличить эффективность вашего бизнеса</Typography>
         </Box>
-        <PenaLink component={RouterLink} to="/">
-          Подробнее
-        </PenaLink>
       </Box>
       <PromoCard
         width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
-        headerText="Общий кабинет"
+        headerText="Оплата в один клик"
-        text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
+        text="Формируй корзину сколько удобно, плати за минуту"
         textOrientation="column"
         small={downXs}
         backgroundSize={isTablet ? "contain" : "100% 300px"}
         backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground1}
-        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"}
+        backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right -165px"}
         sx={{
           alignSelf: "center",
           maxWidth: isTablet ? "100%" : "500px",
           marginRight: isTablet ? (upMd ? "120px" : "0") : "0",
         }}
+        sxHeader={{maxWidth: "166px"}}
       />
       <PromoCard
         width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
-        headerText="Общий кабинет"
+        headerText="Собери свой тариф сам"
-        text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
+        text="Только вы знаете реальные потребности своего бизнеса, не нужно переплачивать"
         textOrientation="row"
         small={downXs}
         backgroundSize={"contain"}
         backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground2}
-        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right 0px"}
+        backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right 0px"}
         sx={{
           alignSelf: "center",
           marginLeft: isTablet ? (upMd ? "120px" : "0") : "0",
           mt: isTablet ? null : "-82px",
           maxWidth: isTablet ? "100%" : "500px",
         }}
+        sxBoxText={{display: "flex", flexDirection: isMobile ? "column" : "row"}}
+        sxHeader={{maxWidth: "190px"}}
+        sxText={{maxWidth: "241px"}}
       />
       <PromoCard
         width={isTablet ? (upMd ? "85%" : "100%") : "43.1%"}
-        headerText="Гибкие тарифы"
+        headerText="Все продукты в одном месте"
-        text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
+        text="Больше не нужно искать и покупать на разных сайтах"
         textOrientation="column"
         small={downXs}
         backgroundSize={isTablet ? "contain" : "100% 300px"}
         backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground3}
-        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"}
+        backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right -165px"}
         sx={{
           mt: isTablet ? null : "82px",
           alignSelf: "center",
           maxWidth: isTablet ? "100%" : "500px",
           marginRight: isTablet ? (upMd ? "100px" : "0") : "0",
         }}
+        sxText={{maxWidth: "183px"}}
+        sxHeader={{whiteSpace: "normal"}}
       />
     </SectionWrapper>
   );

src/pages/Landing/Section4.tsx

@@ -27,12 +27,12 @@ export default function Section4() {
         pb: upMd ? "112px" : "76px",
       }}
     >
-      <Infographics flex={itemsFlex} bigText="9" text="лет на рынке" />
+      <Infographics flex={itemsFlex} bigText="4" text="года на рынке" />
-      <Infographics flex={itemsFlex} bigText="18" text="инструментов в едином кабинете" />
+      <Infographics flex={itemsFlex} bigText="+103 %" text="к эффективности вашего бизнеса" />
       <Infographics flex={itemsFlex} bigText="5 467" text="клиентов с нами" />
-      <Infographics flex={itemsFlex} bigText="15" text="минут на подключение" />
+      <Infographics flex={itemsFlex} bigText="1" text="минута на подключение" />
-      <Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержка" />
+      <Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержки" />
-      <Infographics flex={itemsFlex} bigText="1 000" text="рублей в месяц минимальный тариф" />
+      <Infographics flex={itemsFlex} bigText="500" text="рублей в месяц минимальный тариф" />
     </SectionWrapper>
   );
 }

src/pages/Landing/Section5.tsx

@@ -26,7 +26,7 @@ export default function Section5() {
         }}
       >
         <Typography variant="h4" sx={{ mb: upMd ? "62px" : "30px" }}>
-          Остались вопросы?
+        Хотите свой IT продукт?
         </Typography>
         <Typography
           sx={{
@@ -36,8 +36,8 @@ export default function Section5() {
             mb: upMd ? undefined : "50px",
           }}
         >
-          Сервисы помогают предпринимателям, маркетологам и агентствам {upMd ? <br /> : null}сделать интернет-маркетинг
+          Закажите разработку любого продукта на любом этапе. У высококлассной команды специалистов 
-          прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
+с обширным опытом и компетенциями, получить продукт мечты еще никогда не было так просто.
         </Typography>
         <Box
           sx={{
@@ -47,11 +47,8 @@ export default function Section5() {
             gap: upMd ? "24px" : "20px",
           }}
         >
-          <Button sx={{ width: "180px" }} variant="pena-outlined-dark">
+          <Button sx={{ width: "180px", height: "44px", p: 0 }} variant="pena-contained-light">
-            Подробнее
+            Наши услуги
-          </Button>
-          <Button sx={{ width: "180px" }} variant="pena-contained-light">
-            Подробнее
           </Button>
         </Box>
       </Box>