- {typeof predictedPrice === 'string' && ( - -

- - - {Math.ceil(Number(predictedPrice))} - -

- - )} + {hasAttachInput && ( <> {!blocked && ( @@ -0,0 +1,41 @@ +.predictPrice { + display: flex; + align-items: center; + justify-content: center; + padding: 4px 14px; + border-radius: 16px; + margin-right: 8px; + gap: 4px; + color: #7f7df3; + background-color: #7f7df31a; + + :global(svg path) { + fill: currentColor; + } + + &--low { + color: #10b981; + background-color: rgba(16, 185, 129, 0.12); + } + + &--mid { + color: #f59e0b; + background-color: rgba(245, 158, 11, 0.12); + } + + &--high { + color: #f15179; + background-color: rgba(241, 81, 121, 0.12); + } +} + +.generationIcon { + margin-top: 3px; + color: inherit; +} + +.value { + font-size: 14px; + font-weight: 600; + line-height: 1; +} @@ -0,0 +1,31 @@ +import { TooltipCustom } from '#/shared' +import { SvgIcon } from '#/shared/ui/svg' + +import classes from './predict-price.module.scss' + +const HIGH_COST_TOOLTIP = + 'Генерация может выйти очень дорогой, т.к вы ввели очень большой запрос или в чате накопились большие сообщения. Если хотите снизить стоимость генерации, создайте новый чат или уменьшите количество запросов' + +function tierModifierClass(token: number): string { + if (token < 75) return classes['predictPrice--low'] + if (token < 150) return classes['predictPrice--mid'] + return classes['predictPrice--high'] +} + +export function PredictPrice({ token }: { token: number }) { + const modifier = tierModifierClass(token) + const isHighCost = token >= 150 + + return ( + +

+ + {token} +

+ + ) +} @@ -3,7 +3,6 @@ import { Provider } from 'react-redux' import { StyledEngineProvider, ThemeProvider } from '@mui/material' import { NextPage } from 'next' import type { AppProps } from 'next/app' -import { Raleway } from 'next/font/google' import { SessionProvider } from 'next-auth/react' import { appWithTranslation } from 'next-i18next' import { NextStep, NextStepProvider } from 'nextstepjs' @@ -11,6 +10,7 @@ import { FlagProvider, UnleashClient } from '@unleash/proxy-client-react' import { store } from '#/app/store/store' import { Error } from '#/shared' +import { LowBalanceOfferTrigger } from '#/features/low-balance-offer' import { TourManager, getTourSteps, TourCard, setTourCompleted } from '#/features/nextstep-tour' import { pingFangFont } from '#/shared/lib/constants/font/font' import { getDeviceType } from '#/shared/lib/helpers' @@ -27,8 +27,6 @@ import '#/app/styles/styles-pages/system.scss' setupAxios() -const inter = Raleway({ subsets: ['latin'] }) - export type NextPageWithLayout

= NextPage & { getLayout?: (page: ReactElement) => ReactNode dynamicProps?: DP @@ -74,7 +72,8 @@ function AppContent({ {Component.getLayout ? Component.getLayout() : } - + + @@ -118,7 +117,6 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLa return ( <> - {unleashClient ? ( @@ -74,7 +74,7 @@ export const accountApi = { password_2: string, current_password: string ): Promise<{status:number,data:{detail:string}}>{ - + const response= await axios.put( getApiUrl() + '/auth/reset-pass', { @@ -90,7 +90,7 @@ export const accountApi = { ) return response - + }, async getApiKeys(token: string | null): Promise { @@ -146,4 +146,12 @@ export const accountApi = { return null } }, + + revokeRecurringPayment(token: string) { + return axios.post(getApiUrl() + '/payments/revoke-recurring-payment', {}, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + }, } @@ -22,7 +22,7 @@ export function setupAxios() { const session = await getSession() - if (!session || session.error) { + if (session?.error) { await signOut({ callbackUrl: '/login' }) } @@ -1,4 +1,4 @@ export const baseColor = '#7F7DF3' -export const errorColor = '#F15179;' +export const errorColor = '#F15179' export const colorLight = '#5E5E5E' export const colorDark = '#A6A5A5' @@ -34,3 +34,13 @@ export function formatDate( const formatter = Intl.DateTimeFormat("ru", options) return formatter.format(date) } + +export function getDaysLeft(iso: string | null | undefined): number | null { + if (!iso?.trim()) return null + const target = new Date(iso) + if (Number.isNaN(target.getTime())) return null + + const now = new Date() + const msDiff = target.getTime() - now.getTime() + return Math.max(0, Math.ceil(msDiff / (1000 * 60 * 60 * 24))) +} @@ -1,6 +1,5 @@ import React, { forwardRef } from 'react' import { FieldError } from 'react-hook-form' -import { Raleway } from 'next/font/google' import styles from './common-textarea.module.scss' @@ -18,8 +17,6 @@ export interface CommonTextAreaProps extends React.TextareaHTMLAttributes { return { @@ -63,10 +60,7 @@ export const CommonTextArea = forwardRef void children?: ReactNode + /** Доп. стили для Paper — например minWidth на десктопе */ + paperSx?: SxProps<Theme> + /** Растянуть диалог по ширине (по умолчанию фиксированная ширина 408px у корневого sx) */ + wide?: boolean } -export const Modal: FC<ModalProps> = ({ open, onClose, children }) => { +export const Modal: FC<ModalProps> = ({ open, onClose, children, paperSx, wide = false }) => { return ( <Dialog className={styles.modal} - sx={{ - width: '408px', - margin: '0 auto', - textAlign: 'center', - }} + sx={ + wide + ? { margin: '0 auto', textAlign: 'center', width: '100%', maxWidth: '100vw' } + : { + width: '408px', + margin: '0 auto', + textAlign: 'center', + } + } PaperProps={{ style: { borderRadius: 20, - backgroundColor: '#373737', }, + sx: [{ backgroundColor: '#373737' }, ...(paperSx ? [paperSx] : [])] as SxProps<Theme>, }} open={open} onClose={onClose} @@ -32,3 +41,4 @@ export const Modal: FC<ModalProps> = ({ open, onClose, children }) => { </Dialog> ) } + \ No newline at end of file @@ -0,0 +1,2 @@ +export { SubscriptionDaysBadge } from './subscription-days-badge' + @@ -0,0 +1,39 @@ +.badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + border-radius: 16px; + background: rgba(130, 128, 255, 0.16); + color: #8280ff; + + &_expiring { + background: #B01E1E26; + color: #B01E1E; + } +} + +.icon { + font-size: 24px !important; +} + +.text { + font-size: 15px; + font-weight: 600; + white-space: nowrap; + + &_highlight { + font-weight: 700; + } +} + +@media (max-width: 900px) { + .badge { + padding: 6px 10px; + } + + .text { + font-size: 14px; + } +} + @@ -0,0 +1,41 @@ +import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined' + +import styles from './subscription-days-badge.module.scss' + +interface SubscriptionDaysBadgeProps { + days: number +} + +function declineDays(days: number): string { + const abs = Math.abs(days) % 100 + const last = abs % 10 + + if (abs > 10 && abs < 20) return 'дней' + if (last > 1 && last < 5) return 'дня' + if (last === 1) return 'день' + return 'дней' +} + +export const SubscriptionDaysBadge = ({ days }: SubscriptionDaysBadgeProps) => { + const normalizedDays = Number.isFinite(days) ? Math.max(0, Math.trunc(days)) : 0 + const isExpiring = normalizedDays <= 3 + + return ( + <div className={isExpiring ? styles.badge_expiring + ' ' + styles.badge : styles.badge}> + <AccessTimeOutlinedIcon className={styles.icon} /> + <span className={styles.text}> + {normalizedDays === 0 ? ( + <>Истекает сегодня</> + ) : ( + <> + Истечет через{' '} + <b className={styles.text_highlight}> + {normalizedDays} {declineDays(normalizedDays)} + </b> + </> + )} + </span> + </div> + ) +} + @@ -25,6 +25,7 @@ export { Search } from './ui/search/search' export { SelectUI as Select } from './ui/select' export { Slider } from './ui/slider/slider' export { SwitchCustom } from './ui/switch/switch' +export { SubscriptionDaysBadge } from './ui/subscription-days-badge' export { TooltipCustom } from './ui/tooltip/tooltip' export { TooltipFreeTokens } from './ui/tooltip-free-tokens' export { useModel } from '#/shared/api/models/endpoints' @@ -38,7 +38,7 @@ export const AudioModelsPage: NextPageWithLayout = () => { alignItems: 'center', }} > - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Музыка</Typography> + <Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Музыка</Typography> </Box> <Box className={styles.cards} sx={{ position: 'relative', marginRight: desktop ? '60px' : '0px' }}> {models ? ( @@ -32,7 +32,7 @@ const Page: NextPageWithLayout = () => { alignItems: 'center', }} > - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Чат-боты</Typography> + <Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Чат-боты</Typography> </Box> <div className={styles.cards}> {bots ? ( @@ -30,7 +30,7 @@ export const ImageModelsPage: NextPageWithLayout = () => { alignItems: 'center', }} > - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Изображения</Typography> + <Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Изображения</Typography> </Box> <div className={styles.cards}> {bots ? ( @@ -0,0 +1,72 @@ +import { Box, LinearProgress, linearProgressClasses, Stack, styled, Typography } from '@mui/material' + +import { commaSeparated } from '#/shared' +import { formatPlanPrice } from '#/shared/lib/helpers/format-plan-price' +import { declineToken } from '#/shared/lib/helpers/get-token' + +import styles from '../subscription.module.scss' + +const BorderLinearProgress = styled(LinearProgress)(() => ({ + height: 18, + borderRadius: 6, + [`&.${linearProgressClasses.colorPrimary}`]: { + backgroundColor: '#EFF0F2', + }, + [`& .${linearProgressClasses.bar}`]: { + borderRadius: 6, + backgroundColor: '#8280FF', + }, +})) + +interface CurrentPlanAndBalanceLegacyProps { + balance: number + planTokenLimit: string + planPrice: string + isIndividual: boolean +} + +export const CurrentPlanAndBalanceLegacy = ({ + balance, + planTokenLimit, + planPrice, + isIndividual, +}: CurrentPlanAndBalanceLegacyProps) => { + const formatterdPlanPrice = formatPlanPrice(planPrice, isIndividual) + const planTokenLimitNumber = Number(planTokenLimit) + const percentage = planTokenLimitNumber > 0 ? Math.min(100, Math.max(0, (balance / planTokenLimitNumber) * 100)) : 0 + + return ( + <Stack className={styles.balanceContainer} gap={'20px'}> + <Box className={styles.balanceBox}> + <Typography + className={styles.subTitle} + sx={{ marginBottom: '15px', visibility: !formatterdPlanPrice.includes('₽') ? 'hidden' : 'visible' }} + > + Последняя оплата + </Typography> + <Stack> + <Typography className={styles.title} sx={{ marginBottom: '10px' }}> + {commaSeparated(Math.round(Number(planTokenLimit)))} токенов + </Typography> + <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} className={styles.planInfoRow}> + <Typography className={styles.subTitle}>{formatterdPlanPrice}</Typography> + </Stack> + </Stack> + </Box> + <Box className={styles.balanceBox}> + <Typography className={styles.subTitle}>Мой баланс</Typography> + <Box + sx={{ marginTop: '15px', marginBottom: '10px' }} + width='100%' + display='flex' + alignItems='center' + justifyContent='space-between' + > + <Typography sx={{ fontWeight: 600 }}>{declineToken(balance.toString())}</Typography> + <Typography className='color-gray'>{Math.round(percentage)} %</Typography> + </Box> + <BorderLinearProgress variant='determinate' value={percentage} /> + </Box> + </Stack> + ) +} @@ -0,0 +1,93 @@ +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' +import { Box, MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/material' + +import { IFeatures } from '../../api' +import { categoryIconMap } from '../../lib/category-icon-map' +import { formatFeatureValue } from '../../lib/format-feature-value' + +import styles from '../subscription.module.scss' + +interface FeaturesSectionLegacyProps { + currentTokenLimitUID: string + onCurrentTokenLimitUIDChange: (limit: string) => void + features: IFeatures[] | null + tokenLimits: Array<{ value: string; label: string }> +} + +export const FeaturesSectionLegacy = ({ + currentTokenLimitUID, + onCurrentTokenLimitUIDChange, + features, + tokenLimits, +}: FeaturesSectionLegacyProps) => { + return ( + <Box width='100%' textAlign='start' marginTop={'50px'}> + <Stack direction={'row'} justifyContent={'start'} alignItems={'center'} className={styles.selectContainer}> + <Typography className={styles.title}></Typography> + <Select + value={currentTokenLimitUID} + onChange={(e: SelectChangeEvent<string>) => onCurrentTokenLimitUIDChange(e.target.value)} + IconComponent={KeyboardArrowDownIcon} + MenuProps={{ + PaperProps: { + className: styles.selectMenuPaper, + }, + MenuListProps: { + className: styles.selectMenuList, + }, + }} + className={styles.tokenSelect} + > + {tokenLimits.map((limit) => ( + <MenuItem key={limit.value} value={limit.value} className={styles.selectMenuItem}> + {limit.label} + </MenuItem> + ))} + </Select> + </Stack> + <Box className={styles.blocksMapper}> + {features?.map((featureGroup, idx) => ( + <Box key={idx} className={styles.featureBlock}> + <Stack direction='row' alignItems='center' spacing={2} className={styles.featureHeader}> + {categoryIconMap[featureGroup.name] && ( + <Box className={styles.featureIcon}>{categoryIconMap[featureGroup.name]}</Box> + )} + <Typography className={styles.featureTitle}>{featureGroup.name}</Typography> + </Stack> + <Box component='hr' className={styles.featureDivider} /> + <Stack spacing={2}> + {featureGroup.features.map((feature, featureIdx) => { + let { number, unit, more } = formatFeatureValue(feature.quantity, feature.measurement_unit) + + return ( + <Box key={featureIdx} className={styles.featureItem}> + <Typography className={styles.featureText}>{feature.name}</Typography> + <Box sx={{ display: 'flex', alignItems: 'baseline' }}> + <Typography className={styles.featureText}> + {number == '-' ? ( + <Box sx={{ border: '1px solid white', width: '30px' }}></Box> + ) : ( + <> + {' '} + <span className={styles.featureUnit}>{more}</span> {number} + <span className={styles.featureUnit}> {unit}</span> + </> + )} + </Typography> + </Box> + </Box> + ) + })} + </Stack> + </Box> + ))} + </Box> + <Typography className={styles.infoText}> + <Box className={styles.infoIcon} /> + Для каждой отдельной модели указано примерное количество генераций, как если бы вы пользовались{' '} + <span className={styles.infoUnderText}>только</span> ей. <br /> + Количество генераций может варьироваться в зависимости от используемых параметров каждой конкретной модели. + </Typography> + </Box> + ) +} @@ -0,0 +1,101 @@ +import React from 'react' +import { Box } from '@mui/material' +import Router from 'next/router' +import { useSession } from 'next-auth/react' + +import LightningSvg from '#/assets/svg/lightning.svg?react' +import { accountApi } from '#/shared/api/account-endpoints' +import { commaSeparated } from '#/shared/lib/helpers' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' +import { IFeatures, IOffer, formatFeatureValue } from '#/views/subscription' + +import styles from '../offer.module.scss' + +interface IOfferLegacyProps extends IOffer { + device: 'desktop' | 'mobile' + isCurrentSubscription?: boolean + index?: number +} + +const OfferLegacy: React.FC<IOfferLegacyProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index }) => { + const { data } = useSession() + const { showMessage } = useShowDataStore() + + const unitMap: Record<string, string> = { + Изображения: 'изображений', + 'Чат-боты': 'страниц текста', + Видео: 'видео', + Аудио: 'аудиозаписей', + } + + const formatFeatures = (groupedFeatures: IFeatures[] | undefined): string[] => { + if (!groupedFeatures || !Array.isArray(groupedFeatures)) { + return [] + } + + return groupedFeatures.flatMap((group) => { + if (!group?.features || !Array.isArray(group.features)) { + return [] + } + + const limit = group.name === 'Изображения' ? 2 : 1 + const featuresToShow = group.features.slice(0, limit) + + return featuresToShow + .filter((feature) => feature.quantity !== 0) + .map((feature) => { + const groupName = unitMap[group.name] || group.name + const { number, more } = formatFeatureValue(feature.quantity, feature.measurement_unit) + return `${more ? more + ' ' : ''}${number} ${groupName} в ${feature.name}` + }) + }) + } + + const formattedFeatures = formatFeatures(grouped_features) + + const pay = async (planUid: string) => { + try { + const urlForPay = await accountApi.payProduct(data!.access, planUid) + if (urlForPay) await Router.push(urlForPay) + } catch (err) { + const message = err instanceof Error ? err.message : 'Ошибка оплаты' + showMessage(message) + } + } + + return ( + <Box className={`${styles.tarif} ${index === 1 ? styles.tarif_bg_1 : ''} ${index === 2 ? styles.tarif_bg_2 : ''}`}> + <Box> + <Box className={styles.tarif_header}> + <Box className={styles.tarif_badge}> + <LightningSvg color='#8280FF' width={16} height={24} /> + <span>{commaSeparated(Math.round(Number(tokens_per_plan)))} токенов</span> + </Box> + <Box className={styles.tarif_blur_area}></Box> + </Box> + + <ul className={styles.tarif_list}> + {formattedFeatures.map((feature, idx) => ( + <li key={idx} className={styles.point}> + {feature} + </li> + ))} + </ul> + </Box> + <Box> + <p className={styles.tarif_price}>{commaSeparated(parseInt(price) ?? 0)} ₽</p> + <Box + className={`${styles.tarif_btn} ${isCurrentSubscription ? styles.tarif_btn_current : ''}`} + onClick={(e) => { + e.stopPropagation() + pay(uid) + }} + > + Оплатить + </Box> + </Box> + </Box> + ) +} + +export default OfferLegacy @@ -0,0 +1,32 @@ +import { Box } from '@mui/material' + +import { IOffer } from '../../api' + +import OfferLegacy from './offer-legacy' + +import styles from '../subscription.module.scss' + +interface PlansSectionLegacyProps { + offers: IOffer[] | null + currentOfferUID: string +} + +export const PlansSectionLegacy = ({ offers, currentOfferUID: _currentOfferUID }: PlansSectionLegacyProps) => { + return ( + <Box width='100%' textAlign='start' marginTop={'50px'}> + <Box className={styles.blocksMapper}> + {offers?.map((offer, idx) => { + return ( + <OfferLegacy + {...offer} + device={'desktop'} + isCurrentSubscription={false} + index={idx} + key={offer.uid} + /> + ) + })} + </Box> + </Box> + ) +} @@ -0,0 +1,84 @@ +import { useEffect, useState } from 'react' +import { Box, Typography } from '@mui/material' +import { useSession } from 'next-auth/react' + +import { useAppSelector } from '#/app/store/store' +import { commaSeparated } from '#/shared' +import { accountApi } from '#/shared/api/account-endpoints' +import { balanceSelector } from '#/shared/lib/selectors' + +import { IFeatures, IOffer } from '../../api' + +import { FaqSection } from '../faq-section' +import { CurrentPlanAndBalanceLegacy } from './current-plan-and-balance-legacy' +import { FeaturesSectionLegacy } from './features-section-legacy' +import { PlansSectionLegacy } from './plans-section-legacy' + +import styles from '../subscription.module.scss' + +export const SubscriptionLegacyPage = () => { + const [offers, setOffers] = useState<IOffer[] | null>(null) + const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('') + const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([]) + const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([]) + const { + uid: paymentPlanUid, + tokens_per_plan: planTokenLimit, + price: planPrice, + individual: isIndividual, + } = useAppSelector((state) => state.user.payment_plan.plan) + const balance = useAppSelector(balanceSelector) + const { data } = useSession() + + useEffect(() => { + if (data?.access) { + accountApi.getPaymentsPlans(data?.access).then((res) => { + if (res) { + setOffers(res) + setCurrentTokenLimitUID(res[0].uid) + setTokenLimits( + res.map((offer) => ({ + value: offer.uid, + label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`, + })) + ) + } + }) + } + }, [data?.access]) + + useEffect(() => { + if (offers && currentTokenLimitUID) { + const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID) + if (foundOffer) { + setCurrentFeatures(foundOffer.grouped_features) + } + } + }, [currentTokenLimitUID, offers]) + + return ( + <Box className={styles.container}> + <Box sx={{ marginTop: '20px', marginBottom: '20px' }}> + <Typography sx={{ fontSize: 35, fontWeight: '600' }}>Оплата</Typography> + </Box> + + <CurrentPlanAndBalanceLegacy + balance={balance} + planPrice={planPrice} + planTokenLimit={planTokenLimit} + isIndividual={isIndividual} + /> + + <PlansSectionLegacy offers={offers} currentOfferUID={paymentPlanUid} /> + + <FeaturesSectionLegacy + tokenLimits={tokenLimits} + currentTokenLimitUID={currentTokenLimitUID} + onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID} + features={currentFeatures} + /> + + <FaqSection /> + </Box> + ) +} @@ -1,62 +0,0 @@ -import { useState } from 'react' -import { Box, Button, Typography } from '@mui/material' - -import { Modal } from '#/shared' - -import styles from './subscription.module.scss' - -export const CancelSubscriptionButton = () => { - const [isModalOpen, setIsModalOpen] = useState(false) - - const handleOpenModal = () => { - setIsModalOpen(true) - } - - const handleCloseModal = () => { - setIsModalOpen(false) - } - - const handleCancelSubscription = () => { - // Здесь будет логика отмены подписки - handleCloseModal() - } - - return ( - <> - <Box className={styles.cancelSubscriptionButtonWrapper}> - <Button - className={styles.cancelSubscriptionButton} - fullWidth - onClick={handleOpenModal} - > - Отменить подписку - </Button> - </Box> - - <Modal open={isModalOpen} onClose={handleCloseModal}> - <Typography className={styles.cancelSubscriptionModalTitle}> - Отмена подписки - </Typography> - - <Typography className={styles.cancelSubscriptionModalText}> - Внимание! Вы отменяете подписку на тариф 10 000 токенов. Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения его срока. - </Typography> - - <Box className={styles.cancelSubscriptionModalButtons}> - <Button - onClick={handleCloseModal} - className={styles.cancelSubscriptionButtonKeep} - > - Не отменять - </Button> - <Button - onClick={handleCancelSubscription} - className={styles.cancelSubscriptionButtonCancel} - > - Отменить - </Button> - </Box> - </Modal> - </> - ) -} \ No newline at end of file @@ -1,6 +1,7 @@ import { Box, LinearProgress, linearProgressClasses, Stack, styled, Typography } from '@mui/material' -import { commaSeparated } from '#/shared' +import { commaSeparated, SubscriptionDaysBadge } from '#/shared' +import { formatDate, getDaysLeft } from '#/shared/lib/helpers/date-helper' import { formatPlanPrice } from '#/shared/lib/helpers/format-plan-price' import { declineToken } from '#/shared/lib/helpers/get-token' @@ -23,28 +24,56 @@ interface CurrentPlanAndBalanceProps { planTokenLimit: string planPrice: string isIndividual: boolean + isRecurring: boolean + nextPaymentAt?: string | null } -export const CurrentPlanAndBalance = ({ balance, planTokenLimit, planPrice, isIndividual }: CurrentPlanAndBalanceProps) => { +function formatNextPaymentLabel(iso: string | null | undefined): string | null { + if (!iso?.trim()) return null + const d = new Date(iso) + if (Number.isNaN(d.getTime())) return null + return formatDate(d, { day: '2-digit', month: '2-digit', year: 'numeric' }) +} + +export const CurrentPlanAndBalance = ({ + balance, + planTokenLimit, + planPrice, + isIndividual, + isRecurring, + nextPaymentAt, +}: CurrentPlanAndBalanceProps) => { const formatterdPlanPrice = formatPlanPrice(planPrice, isIndividual) + const isDemoPlan = !formatterdPlanPrice.includes('₽') + const nextPaymentFormatted = formatNextPaymentLabel(nextPaymentAt) + const daysLeft = getDaysLeft(nextPaymentAt) + const nextPaymentLabel = nextPaymentFormatted + ? `${isRecurring ? 'Следующее списание' : 'Дата окончания'}: ${nextPaymentFormatted}` + : 'Без даты окончания' const planTokenLimitNumber = Number(planTokenLimit) const percentage = planTokenLimitNumber > 0 ? Math.min(100, Math.max(0, (balance / planTokenLimitNumber) * 100)) : 0 return ( <Stack className={styles.balanceContainer} gap={'20px'}> <Box className={styles.balanceBox}> - <Typography - className={styles.subTitle} - sx={{ marginBottom: '15px', visibility: !formatterdPlanPrice.includes('₽') ? 'hidden' : 'visible' }} - > - Последняя оплата - </Typography> + <Stack direction='row' justifyContent='space-between' alignItems='flex-start' sx={{ marginBottom: '15px' }}> + <Typography + className={styles.subTitle} + sx={{ visibility: !formatterdPlanPrice.includes('₽') ? 'hidden' : 'visible' }} + > + Мой тариф + </Typography> + {daysLeft !== null ? <SubscriptionDaysBadge days={daysLeft} /> : null} + </Stack> <Stack> <Typography className={styles.title} sx={{ marginBottom: '10px' }}> {commaSeparated(Math.round(Number(planTokenLimit)))} токенов </Typography> <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} className={styles.planInfoRow}> - <Typography className={styles.subTitle}>{formatterdPlanPrice}</Typography> + <Typography className={styles.subTitle}>{isDemoPlan ? 'Демо доступ' : `${formatterdPlanPrice} / мес`}</Typography> + <Typography className={styles.subTitle} sx={{ textAlign: 'right' }}> + {nextPaymentLabel} + </Typography> </Stack> </Stack> </Box> @@ -18,7 +18,7 @@ export const FeaturesSection = ({ currentTokenLimitUID, onCurrentTokenLimitUIDCh return ( <Box width='100%' textAlign='start' marginTop={'50px'}> <Stack direction={'row'} justifyContent={'start'} alignItems={'center'} className={styles.selectContainer}> - <Typography className={styles.title}></Typography> + <Typography className={styles.title}>Возможности с подпиской</Typography> <Select value={currentTokenLimitUID} onChange={(e: SelectChangeEvent<string>) => onCurrentTokenLimitUIDChange(e.target.value)} @@ -48,7 +48,6 @@ background-color: transparent; border: 3px solid #FFFFFF; color: #FFFFFF; - cursor: default; } } @@ -3,10 +3,10 @@ import { Box } from '@mui/material' import Router from 'next/router' import { useSession } from 'next-auth/react' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' import LightningSvg from '#/assets/svg/lightning.svg?react' import { accountApi } from '#/shared/api/account-endpoints' import { commaSeparated } from '#/shared/lib/helpers' -import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' import { IFeatures, IOffer, formatFeatureValue } from '#/views/subscription' import styles from './offer.module.scss' @@ -15,9 +15,10 @@ interface IOfferProps extends IOffer { device: 'desktop' | 'mobile' isCurrentSubscription?: boolean index?: number + currentPlanTokens?: number } -const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index }) => { +const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index, currentPlanTokens = 0 }) => { const { data } = useSession() const { showMessage } = useShowDataStore() @@ -53,16 +54,22 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea const formattedFeatures = formatFeatures(grouped_features) - const pay = async (uid: string) => { + + const pay = async (planUid: string) => { try { - const urlForPay = await accountApi.payProduct(data!.access, uid) - if (urlForPay) await Router.push(urlForPay) - } catch (err) { - const message = err instanceof Error ? err.message : 'Ошибка оплаты' + const urlForPay = await accountApi.payProduct(data!.access, planUid) + urlForPay ? await Router.push(urlForPay) : null + } catch (err: any) { + const detail = err?.response?.data?.detail + const message = detail ?? 'Произошла ошибка при оплате'; showMessage(message) } } + const handlePayClick = () => { + pay(uid) + } + return ( <Box className={`${styles.tarif} ${index === 1 ? styles.tarif_bg_1 : ''} ${index === 2 ? styles.tarif_bg_2 : ''}`}> <Box> @@ -88,10 +95,10 @@ const Offer: React.FC<IOfferProps> = ({ uid, tokens_per_plan, price, grouped_fea className={`${styles.tarif_btn} ${isCurrentSubscription ? styles.tarif_btn_current : ''}`} onClick={(e) => { e.stopPropagation() - pay(uid) + handlePayClick() }} > - Оплатить + {isCurrentSubscription ? 'Текущая подписка' : 'Оплатить'} </Box> </Box> </Box> @@ -8,12 +8,14 @@ import styles from './subscription.module.scss' interface PlansSectionProps { offers: IOffer[] | null - currentOfferUID:string + currentOfferUID: string + currentPlanTokens: number } export const PlansSection = ({ offers, - currentOfferUID + currentOfferUID, + currentPlanTokens, }: PlansSectionProps) => { return ( @@ -24,9 +26,10 @@ export const PlansSection = ({ <Offer {...offer} device={'desktop'} - isCurrentSubscription={false} + isCurrentSubscription={offer.uid === currentOfferUID} index={idx} key={offer.uid} + currentPlanTokens={currentPlanTokens} /> ) })} @@ -0,0 +1,182 @@ +import { useEffect, useState } from 'react' +import { Box, Button, Typography } from '@mui/material' +import { useSession } from 'next-auth/react' + +import { useAppDispatch, useAppSelector } from '#/app/store/store' +import { getAllInfo } from '#/entities/user-account/model/user-type-slice' +import { commaSeparated, Modal, TooltipCustom } from '#/shared' +import { accountApi } from '#/shared/api/account-endpoints' +import { balanceSelector } from '#/shared/lib/selectors' +import { useShowDataStore } from '#/shared/lib/hooks/use-show-data' + +import { IFeatures, IOffer } from '../api' + +import { CurrentPlanAndBalance } from './current-plan-and-balance' +import { FaqSection } from './faq-section' +import { FeaturesSection } from './features-section' +import { PlansSection } from './plans-section' + +import styles from './subscription.module.scss' + +export const SubscriptionRecurrentPage = () => { + const [offers, setOffers] = useState<IOffer[] | null>(null) + const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('') + const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([]) + const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([]) + const { + uid: paymentPlanUid, + tokens_per_plan: planTokenLimit, + price: planPrice, + individual: isIndividual, + } = useAppSelector((state) => state.user.payment_plan.plan) + const nextPaymentAt = useAppSelector((state) => state.user.payment_plan.next_payment_at) + const isRecurring = useAppSelector((state) => state.user.payment_plan?.is_recurring) ?? false + const balance = useAppSelector(balanceSelector) + const dispatch = useAppDispatch() + const { data } = useSession() + const { showMessage } = useShowDataStore() + const [isCancelSubscriptionModalOpen, setIsCancelSubscriptionModalOpen] = useState(false) + const isDemoPlan = Number(planPrice) <= 0 + + const handleOpenCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(true) + const handleCloseCancelSubscriptionModal = () => setIsCancelSubscriptionModalOpen(false) + + const handleCancelSubscription = async () => { + if (!data?.access) { + showMessage(`Не удалось отменить подписку: не удалось определить сессию`) + return + } + try { + await accountApi.revokeRecurringPayment(data.access) + await dispatch(getAllInfo(data.access)).unwrap() + showMessage('Автопродление подписки отменено', 'success') + handleCloseCancelSubscriptionModal() + } catch (e: unknown) { + const detail = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail + const errMsg = + detail ?? (e instanceof Error ? e.message : typeof e === 'string' ? e : 'Неизвестная ошибка') + showMessage(`Не удалось отменить подписку: ${errMsg}`) + } + } + + useEffect(() => { + if (data?.access) { + accountApi.getPaymentsPlans(data?.access).then((res) => { + if (res) { + setOffers(res) + setCurrentTokenLimitUID(res[0].uid) + setTokenLimits( + res.map((offer) => ({ + value: offer.uid, + label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`, + })) + ) + } + }) + } + }, [data?.access]) + + useEffect(() => { + if (offers && currentTokenLimitUID) { + const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID) + if (foundOffer) { + setCurrentFeatures(foundOffer.grouped_features) + } + } + }, [currentTokenLimitUID, offers]) + + const planTokensFormatted = commaSeparated(Math.round(Number(planTokenLimit) || 0)) + + return ( + <Box className={styles.container}> + <Box sx={{ marginTop: '20px', marginBottom: '20px' }}> + <Typography sx={{ fontSize: 35, fontWeight: '600' }}>Подписка</Typography> + </Box> + + <CurrentPlanAndBalance + balance={balance} + planPrice={planPrice} + planTokenLimit={planTokenLimit} + isIndividual={isIndividual} + isRecurring={isRecurring} + nextPaymentAt={nextPaymentAt} + /> + + <PlansSection offers={offers} currentOfferUID={paymentPlanUid} currentPlanTokens={Number(planTokenLimit)} /> + + <FeaturesSection + tokenLimits={tokenLimits} + currentTokenLimitUID={currentTokenLimitUID} + onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID} + features={currentFeatures} + /> + + <FaqSection /> + + {!isDemoPlan ? ( + <Box className={styles.cancelSubscriptionButtonWrapper}> + {isIndividual || !isRecurring ? ( + <TooltipCustom + title={!isRecurring ? 'Подписка уже была отменена' : isIndividual ? 'Нельзя отменить индивидуальный план' : ''} + placement="top" + > + <span className={styles.cancelSubscriptionButtonTooltipTarget}> + <Button + variant="outlined" + className={styles.cancelSubscriptionButton} + fullWidth + disabled + onClick={handleOpenCancelSubscriptionModal} + > + Отмена подписки + </Button> + </span> + </TooltipCustom> + ) : ( + <Button + variant="outlined" + className={styles.cancelSubscriptionButton} + fullWidth + onClick={handleOpenCancelSubscriptionModal} + > + Отмена подписки + </Button> + )} + </Box> + ) : null} + + <Modal + open={isCancelSubscriptionModalOpen} + onClose={handleCloseCancelSubscriptionModal} + paperSx={{ backgroundColor: '#151518' }} + > + <Box className={styles.cancelSubscriptionModalContainer}> + <Typography className={styles.cancelSubscriptionModalTitle}>Отмена подписки</Typography> + + <Typography className={styles.cancelSubscriptionModalText} component="p"> + Внимание! Вы отменяете подписку на тариф{' '} + <Typography component="span" className={styles.cancelSubscriptionModalTextEmphasis}> + {planTokensFormatted} токенов + </Typography> + . Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения + его срока. + </Typography> + + <Box className={styles.cancelSubscriptionModalButtons}> + <Button onClick={handleCloseCancelSubscriptionModal} fullWidth className={styles.cancelSubscriptionButtonKeep}> + Не отменять + </Button> + <Button + onClick={() => void handleCancelSubscription()} + fullWidth + variant="outlined" + className={styles.cancelSubscriptionButtonCancel} + > + Да, отменить + </Button> + </Box> + </Box> + </Modal> + </Box> + ) +} @@ -237,88 +237,121 @@ margin-top: 50px; } +/* обёртка для Tooltip + disabled Button (MUI) */ +.cancelSubscriptionButtonTooltipTarget { + display: inline-flex; + width: 100%; +} + .cancelSubscriptionButton { - background-color: #b01e1e1a; - padding: 15px 0; + background-color: #B01E1E1A; + padding: 15px 24px; font-weight: 600; font-style: Semi Bold; font-size: 20px; line-height: 100%; - letter-spacing: -1%; - text-align: right; + text-align: center; vertical-align: middle; color: #b01e1e; text-transform: none; - border-radius: 0; + border-radius: 12px; + border: 1px solid #b01e1e; + box-shadow: none; &:hover { - background-color: #b01e1e1a; + background-color: transparent; + border-color: #b01e1e; + border: 1px solid #b01e1e; + color: #b01e1e; + box-shadow: none; + } + + // поверх стилей MuiButton-outlined + &:global(.MuiButton-outlined) { + color: #b01e1e; + border-color: #b01e1e; + background-color: #B01E1E1A; + + &:hover { + color: #b01e1e; + border-color: #b01e1e; + background-color: transparent; + } + + &:global(.Mui-disabled) { + color: rgba(176, 30, 30, 0.42); + border-color: rgba(176, 30, 30, 0.28); + background-color: #B01E1E1A; + cursor: not-allowed; + } } } +.cancelSubscriptionModalContainer { + width: 100%; +} + .cancelSubscriptionModalTitle { - font-size: 30px; + color: var(--new-ui-text-color); + font-size: 20px; + font-style: normal; font-weight: 600; - line-height: 100%; - letter-spacing: -0.02em; - vertical-align: bottom; - margin-bottom: 20px; + line-height: 120%; + margin-bottom: 16px; text-align: left; } .cancelSubscriptionModalText { - font-size: 15px; - font-weight: 700; - line-height: 150%; - letter-spacing: -0.01em; - vertical-align: bottom; - color: #868686; - margin-bottom: 30px; + color: rgba(255, 255, 255, 0.8); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 140%; + margin-bottom: 16px; text-align: left; + width: 100%; + margin-top: 0; +} + +.cancelSubscriptionModalTextEmphasis { + font-weight: 800; + font-size: inherit; + line-height: inherit; + text-wrap: nowrap; + color: inherit; } .cancelSubscriptionModalButtons { display: flex; - gap: 8px; - justify-content: flex-start; - margin-top: 20px; + gap: 16px; + margin-top: 16px; + + @media (max-width: 600px) { + flex-direction: column-reverse; + gap: 8px; + } } .cancelSubscriptionButtonKeep { - font-weight: 500; - font-style: Medium; - font-size: 14px; - line-height: 140%; - letter-spacing: -0.01em; - vertical-align: middle; - color: #ffffff; - background-color: #8280ff; - border: none; - border-radius: 12px; - padding: 15px 25px; - text-transform: none; + background-color: #7f7df3 !important; + color: white !important; + border-radius: 8px; + text-transform: none !important; &:hover { - background-color: #6d6ae6; + background-color: #6b69e0 !important; } } .cancelSubscriptionButtonCancel { - font-weight: 500; - font-style: Medium; - font-size: 14px; - line-height: 140%; - letter-spacing: -0.01em; - vertical-align: middle; - color: #ffffff; - background-color: #5d5a5a; - border: none; - border-radius: 12px; - padding: 15px 25px; - text-transform: none; + border-color: rgba(255, 255, 255, 0.3) !important; + color: white !important; + border-radius: 8px; + text-transform: none !important; &:hover { - background-color: #4a4747; + border-color: rgba(255, 255, 255, 0.5) !important; + background-color: rgba(255, 255, 255, 0.1) !important; } } @@ -1,85 +1,19 @@ -import { useEffect, useState } from 'react' -import { Box, Typography } from '@mui/material' -import { useSession } from 'next-auth/react' - -import { useAppSelector } from '#/app/store/store' import { NextPageWithLayout } from '#/pages/_app' -import { commaSeparated } from '#/shared' -import { accountApi } from '#/shared/api/account-endpoints' -import { balanceSelector } from '#/shared/lib/selectors' - -import { IFeatures, IOffer } from '../api' +import { useFeatureFlag } from '#/shared/lib/hooks/use-feature-flag' -import { CurrentPlanAndBalance } from './current-plan-and-balance' -import { FaqSection } from './faq-section' -import { FeaturesSection } from './features-section' -import { PlansSection } from './plans-section' +import { SubscriptionLegacyPage } from './legacy/subscription-legacy' +import { SubscriptionRecurrentPage } from './subscription-recurrent' -import styles from './subscription.module.scss' +const RECURRENT_PAYMENTS_FLAG = 'recurrent-payments-enabled' const SubscriptionPage: NextPageWithLayout = () => { - const [offers, setOffers] = useState<IOffer[] | null>(null) - const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState<string>('') - const [tokenLimits, setTokenLimits] = useState<Array<{ value: string; label: string }>>([]) - const [currentFeatures, setCurrentFeatures] = useState<IFeatures[]>([]) - const { - uid: paymentPlanUid, - tokens_per_plan: planTokenLimit, - price: planPrice, - individual: isIndividual, - } = useAppSelector((state) => state.user.payment_plan.plan) - const balance = useAppSelector(balanceSelector) - const { data } = useSession() - - useEffect(() => { - if (data?.access) { - accountApi.getPaymentsPlans(data?.access).then((res) => { - if (res) { - setOffers(res) - setCurrentTokenLimitUID(res[0].uid) - setTokenLimits( - res.map((offer) => ({ - value: offer.uid, - label: `${commaSeparated(Math.round(Number(offer.tokens_per_plan)))} токенов`, - })) - ) - } - }) - } - }, [data?.access]) - - useEffect(() => { - if (offers && currentTokenLimitUID) { - const foundOffer = offers.find((offer) => offer.uid === currentTokenLimitUID) - if (foundOffer) { - setCurrentFeatures(foundOffer.grouped_features) - } - } - }, [currentTokenLimitUID, offers]) - - return ( - <Box className={styles.container}> - <Box sx={{ marginTop: '20px', marginBottom: '20px' }}> - <Typography sx={{ fontSize: 35, fontWeight: '600' }}>Оплата</Typography> - </Box> - - <CurrentPlanAndBalance balance={balance} planPrice={planPrice} planTokenLimit={planTokenLimit} isIndividual={isIndividual} /> - - <PlansSection offers={offers} currentOfferUID={paymentPlanUid} /> - - <FeaturesSection - tokenLimits={tokenLimits} - currentTokenLimitUID={currentTokenLimitUID} - onCurrentTokenLimitUIDChange={setCurrentTokenLimitUID} - features={currentFeatures} - /> + const recurrentPaymentsEnabled = useFeatureFlag(RECURRENT_PAYMENTS_FLAG) - <FaqSection /> + if (recurrentPaymentsEnabled) { + return <SubscriptionRecurrentPage /> + } - {/* ПОКА НЕ ИСПОЛЬЗУЙЕТСЯ. НЕ ВЫПИЛИВАТЬ!! */} - {/* <CancelSubscriptionButton /> */} - </Box> - ) + return <SubscriptionLegacyPage /> } export default SubscriptionPage @@ -36,7 +36,7 @@ export const VideoModelsPage: NextPageWithLayout = () => { display: 'flex', alignItems: 'center', }}> - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}> + <Typography sx={{ fontSize: 24, fontWeight: 'bold' }}> Видео </Typography> </Box> @@ -3,7 +3,6 @@ import { Box } from '@mui/material' import Image from 'next/image' import styles from './voice-clone-mobile.module.scss' -import { ModelInput } from '#/features/model-input' export function VoiceCloneMobile() { const steps = [ @@ -11,7 +10,6 @@ export function VoiceCloneMobile() { { label: 'Шаг 2', src: '/voice-clone/voice-selector-mobile.png', alt: 'Выбор голоса' }, { label: 'Шаг 3', src: '/voice-clone/message-preview-mobile.png', alt: 'Предпросмотр сообщения' }, ] - const inputTypes = [{ type: 'text', required: true, versions: [] }] return ( <Box className='mt-15'> @@ -39,18 +37,6 @@ export function VoiceCloneMobile() { </div> ))} </div> - - <div className={styles.footerInputWrap}> - <ModelInput - loading={false} - desktop={false} - sendMessage={() => false} - styles='chats' - viewMobileSettings={() => {}} - currentVersion='' - input_types={inputTypes} - /> - </div> </section> </Box> </Box> @@ -16,7 +16,7 @@ export const VoiceClonePage: NextPageWithLayout = () => { {desktop && ( <> <Box sx={{ display: 'flex', alignItems: 'center' }}> - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Войсклон</Typography> + <Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Войсклон</Typography> </Box> <Box sx={{ marginTop: 3 }}> @@ -223,7 +223,6 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { const generationsInitialLoading = loading && offset.current === 0 const mobileScrollAreaHeight = `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 110px'})` const compactPlaygroundEmpty = scope === 'playground' && !hasGenerations - /** Меню + отступы layout + шапка страницы + табы — чтобы основной блок доходил до низа экрана без серой полосы */ const mobileVoiceCompactMinHeight = 'calc(100dvh - 200px)' return ( @@ -389,7 +388,12 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { sx={{ position: 'relative', ...(compactPlaygroundEmpty - ? { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } + ? { + height: mobileVoiceCompactMinHeight, + display: 'flex', + flexDirection: 'column', + minHeight: 0, + } : {}), }} > @@ -415,7 +419,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => { position: 'relative', borderRadius: '13px', ...(compactPlaygroundEmpty - ? { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } + ? { height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 } : {}), }} > @@ -38,7 +38,7 @@ export const VoiceCloningModelsPage: NextPageWithLayout = () => { alignItems: 'center', }} > - <Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Клонирование голоса</Typography> + <Typography sx={{ fontSize: 24, fontWeight: 'bold'}}>Клонирование голоса</Typography> </Box> <Box className={styles.cards} sx={{ position: 'relative', marginRight: desktop ? '60px' : '0px' }}> {models ? ( @@ -3,3 +3,116 @@ border: 0; cursor: pointer; } + +// Обёртка сообщения +.messageWrapper { + display: flex; + align-items: center; + margin-top: 16px; + margin-bottom: 16px; +} + +// Аватар +.avatar { + margin-right: 8px; +} + +// Контейнер контента +.contentContainer { + padding-left: 0; + width: fit-content; + max-width: 68%; + margin-right: auto; + + @media (max-width: 768px) { + max-width: 95%; + } +} + +// Пузырь сообщения +.bubble { + overflow-y: auto; + position: relative; + padding: 15px 23px; + border: 1px solid #303035; + color: #a6a5a5; + box-shadow: none; + line-height: 22.5px; + font-size: 15px; + margin-top: 4px; + text-align: left; + font-family: Raleway, sans-serif; + border-radius: 13px; + + p { + color: inherit; + font-style: inherit; + } +} + +// Пузырь с файлом +.bubbleFile { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 12px; + color: #7f7df3 !important; + font-weight: 600 !important; + line-height: 140%; + letter-spacing: 0.2px; + cursor: pointer; +} + +// Кнопка меню +.menuButton { + position: sticky; + top: 20px; +} + +// Меню +.menu { + :global(.MuiMenu-list) { + background-color: #303035; + color: #8280ff; + border-radius: 15px; + } + + :global(.MuiPopover-paper) { + background-color: #303035; + border-radius: 15px; + } +} + +// Пункт меню +.menuItem { + font-size: 15px; + font-weight: 500; + display: flex; + align-items: center; + gap: 10px; +} + +.menuItemDelete { + font-size: 15px; + font-weight: 500; + display: flex; + align-items: center; + gap: 5px; +} + +// Имя модели и время +.metaText { + color: #a6a5a5; + line-height: 16.8px; + font-size: 13px; + font-weight: 600; + margin-right: 16px; +} + +.metaTime { + color: #a6a5a5; + line-height: 19.6px; + font-size: 13px; + font-weight: 600; + margin-right: 32px; +} @@ -1,5 +1,5 @@ import React, { useEffect } from 'react' -import { Box, Menu, MenuItem, Slide, Typography } from '@mui/material' +import { Box, Menu, MenuItem, Typography } from '@mui/material' import Stack from '@mui/material/Stack' import Image from 'next/image' @@ -12,7 +12,6 @@ import { FullscreenIcon } from './icons/fullscreen-icon' import { FullscreenMessageModal } from './fullscreen-message-modal' export function BotMessage(props: any) { - // const LazyCode = dynamic(() => import('src/widgets/chat-gpt-field/ui/code')) const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null) const open = Boolean(anchorEl) const [markdownMessage, setMarkDownMessage] = React.useState<string>('') @@ -21,9 +20,11 @@ export function BotMessage(props: any) { const copy = (text: string) => { navigator.clipboard.writeText(text) } + const handleClick = (event: React.MouseEvent<HTMLElement>) => { setAnchorEl(event.currentTarget) } + const handleClose = () => { setAnchorEl(null) } @@ -46,100 +47,41 @@ export function BotMessage(props: any) { } }, [props]) - const flexStyle = props.message.file - ? { - display: 'flex', - alignItems: 'center', - justifyContent: 'start', - gap: '12px', - color: '#7f7df3 !important', - fontWeight: '600 !important', - lineHeight: '140%', - letterSpacing: '0.2px', - cursor: 'pointer', - } - : {} - return ( - // <Slide direction='right' in={props.isNewMessage} mountOnEnter unmountOnExit> <Box> - <Box - sx={{ - display: 'flex', - alignItems: 'center', - marginTop: 2, - marginBottom: 2, - }} - > + {/* Обёртка сообщения */} + <Box className={styles.messageWrapper}> + + {/* Аватар (только десктоп) */} {props.desktop && ( - <Box sx={{ marginRight: 1 }}> + <Box className={styles.avatar}> <Image height={36} width={36} src='/svg/chatgpt/avatar.svg' alt={''} /> </Box> )} - <Box - sx={{ - paddingLeft: 0, - width: 'fit-content', - maxWidth: props.desktop ? '68%' : '95%', - marginRight: 'auto', - }} - > + + {/* Контейнер контента */} + <Box className={`${styles.contentContainer} ${!props.desktop ? styles.contentContainerMobile : ''}`}> <Stack direction='row' justifyContent='space-between'> - <Typography - variant='body2' - sx={{ - color: '#A6A5A5', - lineHeight: '16.8px', - fontSize: '13px', - fontWeight: '600', - marginRight: 2, - }} - > + <Typography variant='body2' className={styles.metaText}> {props.modelTitle} </Typography> - <Typography - variant='body2' - sx={{ - color: '#A6A5A5', - lineHeight: '19.6px', - fontSize: '13px', - fontWeight: '600', - marginRight: 4, - }} - > + <Typography variant='body2' className={styles.metaTime}> {formatDate(props.message.created_at, { hour: 'numeric', minute: 'numeric', })} </Typography> </Stack> - <Box display={'flex'} width='100%'> + + <Box display='flex' width='100%'> + {/* Пузырь сообщения */} <Box onClick={() => { if (props.message.file) { window.open(props.message.file, '_blank') } }} - className='smallScroll' - sx={{ - overflowY: 'auto', - position: 'relative', - padding: '15px 23px', - border: `1px solid #303035`, - color: '#A6A5A5', - boxShadow: 'none', - lineHeight: '22.5px', - fontSize: '15px', - marginTop: 0.5, - textAlign: 'left', - fontFamily: 'Raleway,sans-serif', - borderRadius: '13px', - '& p': { - color: 'inherit', - fontStyle: 'inherit', - }, - ...flexStyle, - }} + className={`smallScroll ${styles.bubble} ${props.message.file ? styles.bubbleFile : ''}`} > {props.message.file ? ( <svg width='16' height='18' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'> @@ -150,20 +92,17 @@ export function BotMessage(props: any) { fill='#7f7df3' /> </svg> - ) : ( - '' - )} + ) : null} <Markdown content={props.message.file ? props.message.file.match(/(.+)\/(.+)\?/)[2] : props.message.content} /> </Box> + + {/* Кнопка меню */} <Box marginLeft={1}> <Box + className={styles.menuButton} aria-controls={open ? 'message-menu' : undefined} aria-haspopup='true' aria-expanded={open ? 'true' : undefined} - sx={{ - position: 'sticky', - top: '20px', - }} > <TooltipCustom title={'Открыть меню'}> <button className={styles.button} onClick={handleClick}> @@ -176,6 +115,7 @@ export function BotMessage(props: any) { </button> </TooltipCustom> </Box> + <Menu autoFocus={false} open={open} @@ -183,84 +123,35 @@ export function BotMessage(props: any) { id='message-menu' onClose={handleClose} onClick={handleClose} - sx={{ - '& .MuiMenu-list': { - backgroundColor: '#303035', - color: '#8280FF', - borderRadius: '15px', - }, - '& .MuiPopover-paper': { - backgroundColor: '#303035', - borderRadius: '15px', - }, - }} + className={styles.menu} > <MenuItem autoFocus={false} - sx={{ - fontSize: '15px', - fontWeight: '500', - display: 'flex', - alignItems: 'center', - gap: '10px', - }} - onClick={() => { - setFullscreenModalOpen(true) - }} + className={styles.menuItem} + onClick={() => setFullscreenModalOpen(true)} > <FullscreenIcon /> На весь экран </MenuItem> + <MenuItem autoFocus={false} - sx={{ - fontSize: '15px', - fontWeight: '500', - display: 'flex', - alignItems: 'center', - gap: '10px', - }} - onClick={() => { - copy(props.message.content ? props.message.content : props.message.file.split('/')[4].split('?')[0]) - }} + className={styles.menuItem} + onClick={() => copy(props.message.content ? props.message.content : props.message.file.split('/')[4].split('?')[0])} > <svg width='14' height='14' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'> - <g id='Group 29094'> - <rect - id='Rectangle 3340' - x='0.85' - y='3.85' - width='14.3' - height='14.3' - rx='2.15' - fill='transparent' - stroke='#8280FF' - strokeWidth='1.7' - /> - <path - id='Vector 40' - d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5' - stroke='#8280FF' - strokeWidth='1.7' - strokeLinecap='round' - strokeLinejoin='round' - /> + <g> + <rect x='0.85' y='3.85' width='14.3' height='14.3' rx='2.15' fill='transparent' stroke='#8280FF' strokeWidth='1.7' /> + <path d='M6.5 1H15C16.6569 1 18 2.34315 18 4V12.5' stroke='#8280FF' strokeWidth='1.7' strokeLinecap='round' strokeLinejoin='round' /> </g> </svg> Копировать </MenuItem> + <MenuItem autoFocus={false} - sx={{ - fontSize: '15px', - fontWeight: '500', - display: 'flex', - alignItems: 'center', - gap: '5px', - }} - onClick={() => { - props.deleteMessage(props.message.uid) - }} + className={styles.menuItemDelete} + onClick={() => props.deleteMessage(props.message.uid)} > <svg width='21' height='14' viewBox='0 0 60 42' fill='none' xmlns='http://www.w3.org/2000/svg'> <path @@ -277,6 +168,7 @@ export function BotMessage(props: any) { </Box> </Box> </Box> + <FullscreenMessageModal open={fullscreenModalOpen} onClose={() => setFullscreenModalOpen(false)} @@ -12,6 +12,8 @@ import { PreviewView } from '#/widgets/messages' import { IsNextDay } from '#/widgets/messages/ui/is-next-day' import { makeThinScrollbar } from '#/shared/lib/constants/styles' +import styles from './chat-messages.module.scss' + interface IMessagesList { device: 'mobile' | 'desktop' modelType: string @@ -27,18 +29,20 @@ interface IMessagesList { loading: boolean } +const SCROLL_THRESHOLD = 5 + export const ChatMessagesList: React.FC<IMessagesList> = memo( ({ messageResponse, onLoadImage, setResendValue, modelTitle, device, modelType, botParams, getMessagesPagination, deleteMessage, loading }) => { const paginationScroll = React.useRef<any>() const [isPaginating, setIsPaginating] = React.useState(false) const [chatScrollHeight, setChatScrollHeight] = React.useState(0) - const [scrollBottom, setScrollBottom] = React.useState(0) + const lastScrollTop = useRef(0) + const [showScrollDown, setShowScrollDown] = useState(false) const desktop = device === 'desktop' const { status } = useSession() const [modal, setModal] = useState<boolean>(false) const [isNewMessage, setIsNewMessage] = useState(false) - const [currentSrc, setCurrentSrc] = useState<string | null>(null) const onlyImageMessage = useMemo(() => { @@ -62,17 +66,15 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo( const time = setTimeout(() => { if (block) { - //@ts-ignore block.scrollTo({ top: block.scrollHeight, - behavior: 'smooth', // добавляем плавную прокрутку + behavior: 'smooth', }) } }, 250) return () => clearTimeout(time) } else if (messageResponse != undefined && isPaginating) { if (block) { - //@ts-ignore block.scrollTop = block.scrollHeight - chatScrollHeight setChatScrollHeight(paginationScroll.current.scrollHeight) } @@ -85,15 +87,31 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo( }, [messageResponse]) const handleScroll = () => { - setScrollBottom(paginationScroll.current?.scrollHeight - paginationScroll.current?.scrollTop - paginationScroll.current?.clientHeight) - - if (paginationScroll.current && messageResponse?.length !== 0) { - const { scrollTop, scrollHeight, clientHeight } = paginationScroll.current - if (scrollTop === 0) { - if (getMessagesPagination) { - setIsPaginating(true) - getMessagesPagination() - } + const block = paginationScroll.current + if (!block) return + + const { scrollTop, scrollHeight, clientHeight } = block + const distanceFromBottom = scrollHeight - scrollTop - clientHeight + + const isScrollingDown = scrollTop > lastScrollTop.current + SCROLL_THRESHOLD + const isScrollingUp = scrollTop < lastScrollTop.current - SCROLL_THRESHOLD + + if (isScrollingDown) { + setShowScrollDown(true) + } else if (isScrollingUp) { + setShowScrollDown(false) + } + + if (distanceFromBottom < 50) { + setShowScrollDown(false) + } + + lastScrollTop.current = scrollTop + + if (scrollTop === 0 && messageResponse?.length !== 0) { + if (getMessagesPagination) { + setIsPaginating(true) + getMessagesPagination() } } } @@ -128,25 +146,18 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo( ref={paginationScroll} onScroll={handleScroll} > - {scrollBottom > 500 && ( + {showScrollDown && ( <Box - sx={{ - position: 'absolute', - left: 0, - right: 0, - width: 'fit-content', - cursor: 'pointer', - margin: '0 auto', - bottom: '150px', - zIndex: 10, - }} + className={styles.scrollDownButton} + sx={{ + left: 0, + right: 0 + }} onClick={() => { - //@ts-ignore const block = paginationScroll.current - block.scrollTo({ top: block.scrollHeight, - behavior: 'smooth', // добавляем плавную прокрутку + behavior: 'smooth', }) }} > @@ -156,22 +167,16 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo( {loading && ( <Box - sx={{ - position: 'absolute', + className={styles.loadingIndicator} + sx={{ left: 0, - right: 0, - width: 'fit-content', - margin: '0 auto', - top: '10px', - zIndex: 10, + right: 0 }} > <CircularProgress size={18} thickness={3} - sx={{ - color: '#7F7DF3', - }} + className={styles.circularProgress} /> </Box> )} @@ -205,4 +210,4 @@ export const ChatMessagesList: React.FC<IMessagesList> = memo( } ) -ChatMessagesList.displayName = 'ChatMessagesList' +ChatMessagesList.displayName = 'ChatMessagesList' \ No newline at end of file @@ -0,0 +1,20 @@ +.scrollDownButton { + position: absolute; + width: fit-content; + cursor: pointer; + margin: 0 auto; + bottom: 150px; + z-index: 10; +} + +.loadingIndicator { + position: absolute; + width: fit-content; + margin: 0 auto; + top: 10px; + z-index: 10; +} + +.circularProgress { + color: #7F7DF3; +} \ No newline at end of file @@ -1,16 +1,16 @@ .closeIcon { cursor: pointer; position: absolute; - top: 22px; + top: 45px; right: 25px; @media (min-width: 400px) and (max-width: 550px) { - top: 20px; + top: 35px; right: 20px; } @media (max-width: 768px) { - top: 20px; + top: 30px; right: 20px; } } @@ -53,10 +53,48 @@ } .markdownContent { + font-weight: 400; + font-style: normal; + color: #ffffff; + text-align: left; + + p, li, td, blockquote { + font-size: var(--fs-base) !important; + } + + h1 { + font-size: var(--fs-h1) !important; + font-weight: 700; + margin-top: 16px; + margin-bottom: 6px; + } + + h2 { + font-size: var(--fs-h2) !important; + font-weight: 700; + margin-top: 14px; + margin-bottom: 6px; + } + + h3 { + font-size: var(--fs-h3) !important; + font-weight: 600; + margin-top: 12px; + margin-bottom: 5px; + } + + strong { + font-weight: 700; + } + + code { + font-size: var(--fs-code) !important; + } + ul, ol { - padding-left: 1.5em; - margin: 0.5em 0; + padding-left: 24px; + margin: 8px 0; } ul { @@ -68,38 +106,29 @@ } li { - margin: 0.25em 0; + margin: 4px 0; } } .content { - height: 500px; overflow-y: auto; - margin-bottom: 20px; flex: 1; min-height: 0; + padding-top: 20px; + padding-right: 8px; + padding-left: 20px; @media (min-width: 769px) and (max-height: 767px) { - height: auto; flex: 1; - margin-bottom: 15px; + padding-top: 15px; + padding-left: 15px; } @media (max-width: 768px) { - height: calc(100vh - 150px); - flex: 0 0 auto; - margin-bottom: 15px; - } - - &.macos { - @media (max-width: 768px) { - @media (max-width: 450px) { - height: calc(100vh - 200px); - margin-bottom: 15px; - } - } + flex: 1; + padding-top: 15px; + padding-left: 15px; } - } .footer { @@ -108,31 +137,30 @@ display: flex; align-items: center; gap: 10px; - margin: auto 0 0 -30px; - padding: 0 30px; flex-shrink: 0; + margin: auto -30px 0; + padding: 0 30px; @media (min-width: 769px) and (max-height: 767px) { height: 70px; - margin: auto 0 0 -25px; + margin: auto -25px 0; padding: 0 25px; } @media (max-width: 768px) { - height: 50px; + height: 60px; + margin: auto -20px 0; padding: 0 20px; gap: 8px; - margin: 0; - - @media (max-width: 450px) { - flex-direction: column; - height: auto; - margin: 0; - padding: 5px; - gap: 15px; - align-items: stretch; - } - } + + @media (max-width: 450px) { + flex-direction: column; + height: auto; + padding: 12px 20px; + gap: 12px; + align-items: stretch; + } + } } .zoomButtonsContainer { @@ -262,4 +290,4 @@ @media (max-width: 768px) { gap: 8px; } -} +} \ No newline at end of file @@ -27,10 +27,9 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ const [fontSize, setFontSize] = useState<number>(16) const contentRef = useRef<HTMLDivElement>(null) const markdownRef = useRef<HTMLDivElement>(null) - - // Проверка на macOS - const isMacOS = typeof navigator !== 'undefined' && - (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || + + const isMacOS = typeof navigator !== 'undefined' && + (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || (navigator.userAgent.includes('Mac') && !navigator.userAgent.includes('iPhone') && !navigator.userAgent.includes('iPad'))) const handleFontChange = (event: SelectChangeEvent<string>) => { @@ -47,26 +46,21 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ const copyIconRef = useRef<SVGSVGElement>(null) - // Функция для создания отформатированного HTML для Word const createFormattedHtml = useCallback((htmlContent: string) => { - // Создаем временный контейнер для обработки HTML const tempDiv = document.createElement('div') tempDiv.innerHTML = htmlContent - - // Добавляем inline стили ко всем элементам через setAttribute + const allElements = tempDiv.querySelectorAll('*') allElements.forEach((el) => { const htmlEl = el as HTMLElement - // Получаем текущий style или создаем новый const currentStyle = htmlEl.getAttribute('style') || '' const newStyle = `${currentStyle ? currentStyle + '; ' : ''}font-family: ${fontFamily}; font-size: ${fontSize}pt;` htmlEl.setAttribute('style', newStyle) }) - - // Также применяем к самому контейнеру + const containerStyle = `font-family: ${fontFamily}; font-size: ${fontSize}pt;` tempDiv.setAttribute('style', containerStyle) - + return `<!DOCTYPE html> <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head> @@ -83,7 +77,6 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ </html>` }, [fontFamily, fontSize]) - // Функция для смены иконки на галочку const showCopySuccess = () => { const svg = copyIconRef.current if (!svg) return @@ -100,8 +93,7 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ /> ` svg.style.animation = 'pulse 0.3s ease' - - // Добавляем анимацию (только один раз) + if (!document.querySelector('#copy-icon-animation')) { const style = document.createElement('style') style.id = 'copy-icon-animation' @@ -113,8 +105,7 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ ` document.head.appendChild(style) } - - // Возвращаем исходную иконку через 1.5 секунды + setTimeout(() => { if (svg) { svg.innerHTML = originalHTML @@ -123,7 +114,6 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ }, 1500) } - // Обработка копирования Ctrl+C только когда модалка открыта и выделение внутри неё useEffect(() => { if (!open) return @@ -147,7 +137,6 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ return () => document.removeEventListener('copy', handleCopy) }, [open, createFormattedHtml]) - // Обработка копирования по клику на иконку const handleCopy = async (e?: React.MouseEvent) => { if (e) { e.preventDefault() @@ -161,10 +150,9 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ const formattedHtml = createFormattedHtml(htmlContent) try { - // Используем правильную кодировку UTF-8 для Blob const htmlBlob = new Blob([formattedHtml], { type: 'text/html;charset=utf-8' }) const textBlob = new Blob([textContent], { type: 'text/plain;charset=utf-8' }) - + const clipboardItem = new ClipboardItem({ 'text/html': htmlBlob, 'text/plain': textBlob, @@ -172,9 +160,7 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ await navigator.clipboard.write([clipboardItem]) showCopySuccess() } catch { - // Fallback для старых браузеров и Windows - используем метод через execCommand с правильно форматированным HTML try { - // Создаем временный div с полным HTML документом для Word const tempDiv = document.createElement('div') tempDiv.style.position = 'absolute' tempDiv.style.left = '-9999px' @@ -188,13 +174,12 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ if (selection) { selection.removeAllRanges() selection.addRange(range) - - // Используем execCommand для копирования + const success = document.execCommand('copy') - + selection.removeAllRanges() document.body.removeChild(tempDiv) - + if (success) { showCopySuccess() } @@ -202,12 +187,10 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ document.body.removeChild(tempDiv) } } catch { - // Последняя попытка - просто скопировать текст без форматирования try { await navigator.clipboard.writeText(textContent) showCopySuccess() } catch { - // Игнорируем ошибки } } } @@ -287,16 +270,14 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({ <Box ref={markdownRef} className={styles.markdownContent} - sx={{ + style={{ fontFamily: fontFamily, - fontWeight: 400, - fontStyle: 'normal', - color: '#FFFFFF', - textAlign: 'left', - '& *': { - fontSize: `${fontSize}px !important`, - }, - }} + '--fs-base': `${fontSize}px`, + '--fs-h1': `${Math.round(fontSize * 1.5)}px`, + '--fs-h2': `${Math.round(fontSize * 1.2)}px`, + '--fs-h3': `${Math.round(fontSize * 1.0)}px`, + '--fs-code': `${Math.round(fontSize * 0.9)}px`, + } as React.CSSProperties} > <Markdown content={messageContent} /> </Box> @@ -1 +1 @@ -export { Search as NavigationSearch } from './search' +export {} @@ -1,130 +0,0 @@ -import React, { useEffect, useMemo } from 'react' -import { Autocomplete, Box, Stack, TextField, Typography } from '@mui/material' -import Image from 'next/image' -import { KeyForSearch } from './key-for-search' -import { useNavigationSearchChatLinks, useNavigationSearchModel } from '../model' -import { staticLinks } from '../config' -import { InputStyleDark, InputStyleLight, useConcat } from '#/shared' -import { useRouter } from 'next/router' -import { NavigationSearchLink } from '../api/types' -import { useNavigationSearchMediaLinks } from '../model/use-media-links' - -interface SearchProps { - device: string -} - -export const Search = ({ device }: SearchProps) => { - const desktop = device === 'desktop' - - const { push } = useRouter() - - const { fetchChatLinks, visibleChatLinks } = useNavigationSearchChatLinks() - - const { fetchMediaLinks, visibleMediaLinks } = useNavigationSearchMediaLinks() - - const links = useConcat<NavigationSearchLink[]>(visibleChatLinks, visibleMediaLinks, staticLinks) - - const { search, setSearch, searchOpen, setSearchOpen, searchRef, filteredLinks } = useNavigationSearchModel(links) - - useEffect(() => { - fetchChatLinks() - fetchMediaLinks() - }, []) - - return ( - <> - <Stack> - <Autocomplete - disablePortal - freeSolo - sx={{ width: '457px' }} - noOptionsText={'Не найдено'} - options={filteredLinks} - filterOptions={(x) => x} - groupBy={(link) => link.category} - renderGroup={(params) => ( - <li key={params.key}> - <div> - <Typography - sx={{ - fontSize: '16px', - fontWeight: 600, - color: '#A4AAB5', - marginLeft: '10px', - }} - > - {params.group} - </Typography> - </div> - <ul>{params.children}</ul> - </li> - )} - open={searchOpen} - onOpen={() => setSearchOpen(true)} - onClose={() => setSearchOpen(false)} - getOptionLabel={(label: any) => (label as NavigationSearchLink).label} - renderOption={(option, state) => ( - <Typography - {...option} - key={state.uid ?? state.label} - sx={{ - display: 'flex', - alignItems: 'center', - fontSize: '18px', - fontWeight: 500, - }} - > - <span style={{ marginLeft: '20px' }}>{state.label}</span> - </Typography> - )} - onChange={async (event, value: any) => { - if (!value) { - return - } - if (value.external) { - return window.open(value.url, '_blank') - } - push('/' + value.url) - }} - renderInput={(params) => ( - <TextField - inputRef={searchRef} - {...params} - fullWidth - sx={{ - ...InputStyleDark, - '& input': { - fontSize: '18px !important', - fontWeight: 500, - }, - }} - className='bg-color-block' - size='small' - value={search} - onChange={(e: any) => setSearch(e.target.value)} - placeholder='Поиск по платформе' - InputProps={{ - ...params.InputProps, - startAdornment: ( - <Image - src={'/search.svg'} - width={15} - height={15} - alt='Поиск' - style={{ - marginLeft: '8px', - marginRight: '4px', - marginTop: '2px', - transform: 'scaleX(-1)', - }} - /> - ), - endAdornment: <KeyForSearch userAgent={navigator.userAgent} />, - }} - /> - )} - /> - </Stack> - </> - ) -} @@ -2,7 +2,7 @@ import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, - integrations: [Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false })], + integrations: [Sentry.replayIntegration({ maskAllText: false, maskAllInputs: false, blockAllMedia: false })], replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, sendDefaultPii: true, @@ -8,7 +8,6 @@ export async function register() { if (process.env.NEXT_RUNTIME === "edge") { await import("../sentry.edge.config"); } - } export const onRequestError = Sentry.captureRequestError; @@ -1,4 +1,4 @@ - +desktop.ini /node_modules /.pnp .pnp.js @@ -3,96 +3,62 @@ stages: - Deploy default: - image: docker:latest + image: docker:cli before_script: - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" $CI_REGISTRY --password-stdin -build_staging: +build: stage: Build - image: docker:cli script: - - export RELEASE="$(date -Iseconds)" - - echo -e "\nRELEASE=$RELEASE\nNEXT_PUBLIC_RELEASE=$RELEASE\nCI=true" >> $ENV - - cp $ENV .env - - docker compose --env-file $ENV build - - docker compose push - environment: - name: Staging - url: https://staging.air.fail - deployment_tier: staging - services: - - docker:dind + - cp $BUILD_ENV .env + - docker compose build --push only: + - main - staging + when: on_success -deploy_staging: +.deploy_template: &default_deploy_job stage: Deploy - image: docker:cli + services: + - docker:dind variables: - DOCKER_HOST: tcp://$STAGING_CLUSTER_HOST:2376 + ENVIRONMENT: $CI_ENVIRONMENT_TIER DOCKER_TLS_VERIFY: 1 DOCKER_CERT_PATH: "/certs" - services: - - docker:dind - environment: - name: Staging - url: https://staging.air.fail - deployment_tier: staging - only: - - staging + COMPOSE_ENV_FILES: $ENV + COMPOSE_REMOVE_ORPHANS: true + COMPOSE_PROJECT_NAME: $CI_PROJECT_NAME + when: on_success before_script: - - export RELEASE="$(date -Iseconds)" - - echo -e "\nRELEASE=$RELEASE\nNEXT_PUBLIC_RELEASE=$RELEASE" >> $ENV - - cp $ENV .env - mkdir -p $DOCKER_CERT_PATH - - echo "$STAGING_CLUSTER_CA" > $DOCKER_CERT_PATH/ca.pem - - echo "$STAGING_CLUSTER_CERT" > $DOCKER_CERT_PATH/cert.pem - - echo "$STAGING_CLUSTER_KEY" > $DOCKER_CERT_PATH/key.pem + - export ENVNAME=$(echo ${ENVIRONMENT} | tr '[:lower:]' '[:upper:]') + - export DOCKER_HOST="tcp://$(printenv "${ENVNAME}_CLUSTER_HOST"):2376" + - cp "$(printenv ${ENVNAME}_CLUSTER_CA)" $DOCKER_CERT_PATH/ca.pem + - cp "$(printenv ${ENVNAME}_CLUSTER_CERT)" $DOCKER_CERT_PATH/cert.pem + - cp "$(printenv ${ENVNAME}_CLUSTER_KEY)" $DOCKER_CERT_PATH/key.pem - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" $CI_REGISTRY --password-stdin script: - - docker compose pull - - docker compose --env-file $ENV --project-name air-ui-web up -d + - sort -u -t '=' -k 1,1 $ENV $BUILD_ENV <(echo "RELEASE=$(echo -n $(date '+%D %X'))") > .env + - if [ "$(docker info --format '{{.Swarm.LocalNodeState}}' 2>/dev/null)" = "active" ]; then + docker stack deploy --prune --with-registry-auth -c <(docker compose config | grep -v "^name:") $COMPOSE_PROJECT_NAME; + else + docker compose up -d; + fi -build_production: - stage: Build - script: - - export RELEASE="$(date -Iseconds)" - - echo -e "\nRELEASE=$RELEASE\nNEXT_PUBLIC_RELEASE=$RELEASE\nCI=true" >> $ENV - - cp $ENV .env - - docker compose -f stack.yml --env-file $ENV build - - docker compose -f stack.yml push +deploy_staging: + <<: *default_deploy_job environment: - name: Production - url: https://app.air.fail - deployment_tier: production - services: - - docker:dind + name: Staging + deployment_tier: staging + url: $DOMAIN only: - - main + - staging deploy_production: - stage: Deploy - image: docker:cli - variables: - DOCKER_HOST: tcp://$PRODUCTION_CLUSTER_HOST:2376 - DOCKER_TLS_VERIFY: 1 - DOCKER_CERT_PATH: "/certs" - services: - - docker:dind + <<: *default_deploy_job environment: name: Production - url: https://app.air.fail deployment_tier: production + url: $DOMAIN only: - - main - before_script: - - export RELEASE="$(date -Iseconds)" - - echo -e "\nRELEASE=$RELEASE\nNEXT_PUBLIC_RELEASE=$RELEASE" >> $ENV - - cp $ENV .env - - mkdir -p $DOCKER_CERT_PATH - - echo "$PRODUCTION_CLUSTER_CA" > $DOCKER_CERT_PATH/ca.pem - - echo "$PRODUCTION_CLUSTER_CERT" > $DOCKER_CERT_PATH/cert.pem - - echo "$PRODUCTION_CLUSTER_KEY" > $DOCKER_CERT_PATH/key.pem - - echo "$CI_REGISTRY_PASSWORD" | docker login -u "$CI_REGISTRY_USER" $CI_REGISTRY --password-stdin - script: - - docker stack deploy --prune --with-registry-auth --resolve-image=always --compose-file stack.yml --detach frontend \ No newline at end of file + - main \ No newline at end of file @@ -1,3 +0,0 @@ - -[auth] -token=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 @@ -1,26 +1,36 @@ -FROM node:alpine as dependencies +FROM node:22.22-alpine3.22 AS dependencies WORKDIR /app -COPY package.json ./package.json -RUN --mount=type=cache,target=/root/.npm npm install +COPY package.json package-lock.json ./ +RUN npm ci --no-audit --no-fund -FROM node:alpine as builder +FROM node:22.22-alpine3.22 AS builder WORKDIR /app COPY . . COPY --from=dependencies /app/node_modules ./node_modules RUN npm run build -FROM node:alpine as final +FROM node:22.22-alpine3.22 AS production WORKDIR /app COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json +COPY --from=builder /app/package-lock.json ./package-lock.json COPY --from=builder /app/.next ./.next COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/next.config.js ./next.config.js COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js +CMD ["npm", "run", "start"] -CMD ["npm", "run", "start"] \ No newline at end of file + +FROM node:22.22-alpine3.22 AS dev + +WORKDIR /app + +COPY . . +RUN npm install + +CMD ["npm", "run", "dev"] \ No newline at end of file @@ -1,9 +0,0 @@ -FROM node:alpine as dependencies - -WORKDIR /app - -COPY . . -RUN npm install - - -CMD ["npm", "run", "dev"] \ No newline at end of file @@ -1,23 +0,0 @@ -.DEFAULT_GOAL=start - -# Setup environment commands by specific shell (Powershell or Bash) -ifeq ($(OS),Windows_NT) - COPY_ENV=xcopy .env.dist .env /D /I - WSL=wsl -else - COPY_ENV=cp -n .env.dist .env -endif - -start: - $(COPY_ENV) - $(WSL) docker compose -f docker-compose.debug.yml up -.PHONY=start - -rebuild: - $(COPY_ENV) - $(WSL) docker compose -f docker-compose.debug.yml up --build -.PHONY=rebuild - -stop: - $(WSL) docker compose -f docker-compose.debug.yml down --remove-orphans -v -.PHONY=stop \ No newline at end of file @@ -1,17 +0,0 @@ -services: - app: - build: - context: . - dockerfile: Dockerfile.dev - container_name: frontend - restart: unless-stopped - volumes: - - .:/app - ports: - - '3000:3000' - env_file: - - .env - -networks: - default: - name: 'air' @@ -0,0 +1,6 @@ +services: + app: + build: + target: dev + ports: + - "3000:3000" \ No newline at end of file @@ -1,34 +1,49 @@ services: app: - image: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA + image: ${CI_REGISTRY_IMAGE:-air/ui/web}:${CI_COMMIT_SHA:-latest} build: context: . dockerfile: Dockerfile + target: production + env_file: ${ENV:-.env} restart: unless-stopped - networks: - - infrastructure - env_file: - - .env - labels: + labels: &app-labels - traefik.enable=true - - traefik.docker.network=infrastructure + - traefik.${PROVIDER:-docker}.network=${PROXY_NETWORK:-infrastructure} - - traefik.http.routers.frontend-web-http.rule=Host(`$DOMAIN`) + - traefik.http.routers.frontend-web-http.rule=HostRegexp(`$DOMAIN`) - traefik.http.routers.frontend-web-http.entrypoints=web - traefik.http.routers.frontend-web-http.tls=false - traefik.http.routers.frontend-web-http.service=frontend - traefik.http.routers.frontend-web-http.middlewares=sts-header@file,https-redirect@file - - traefik.http.routers.frontend-web-https.rule=Host(`$DOMAIN`) + - traefik.http.routers.frontend-web-https.rule=HostRegexp(`$DOMAIN`) - traefik.http.routers.frontend-web-https.entrypoints=websecure - traefik.http.routers.frontend-web-https.tls=true - traefik.http.routers.frontend-web-https.tls.certresolver=defaultresolver - traefik.http.routers.frontend-web-https.service=frontend - traefik.http.services.frontend.loadbalancer.server.port=3000 + deploy: + replicas: ${REPLICAS:-1} + labels: *app-labels + update_config: + parallelism: 1 + delay: 10s + order: start-first + restart_policy: + condition: on-failure + delay: 5s + max_attempts: 3 + window: 30s + placement: + constraints: + - node.role == worker + - node.labels.type != observer + networks: + - infrastructure networks: infrastructure: + name: ${PROXY_NETWORK:-infrastructure} external: true - tracing: - external: true \ No newline at end of file @@ -50,5 +50,6 @@ const { withSentryConfig } = require("@sentry/nextjs"); module.exports = withSentryConfig(analyzerConfig, { silent: !process.env.CI, widenClientFileUpload: true, - tunnelRoute: "/monitoring" + tunnelRoute: process.env.SENTRY_TUNNEL_PATH ?? '/monitoring', + debug: process.env.SENTRY_DEBUG ?? false }); @@ -9,8 +9,7 @@ "start": "next start", "build": "next build", "dev": "next dev", - "lint": "next lint", - "prepare": "husky" + "lint": "next lint" }, "engines": { "node": ">=12.0.0" @@ -1,48 +0,0 @@ -services: - app: - image: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA - build: - context: . - dockerfile: Dockerfile - networks: - - infrastructure - deploy: - replicas: 1 - update_config: - parallelism: 1 - delay: 10s - order: start-first - restart_policy: - condition: on-failure - delay: 5s - max_attempts: 3 - window: 30s - placement: - constraints: - - node.role == worker - labels: - - traefik.enable=true - - traefik.swarm.network=infrastructure - - - traefik.http.routers.frontend-web-http.rule=Host(`$DOMAIN`) - - traefik.http.routers.frontend-web-http.entrypoints=web - - traefik.http.routers.frontend-web-http.tls=false - - traefik.http.routers.frontend-web-http.service=frontend - - traefik.http.routers.frontend-web-http.middlewares=sts-header@file,https-redirect@file,fallback@file - - - traefik.http.routers.frontend-web-https.rule=Host(`$DOMAIN`) - - traefik.http.routers.frontend-web-https.entrypoints=websecure - - traefik.http.routers.frontend-web-https.tls=true - - traefik.http.routers.frontend-web-https.tls.certresolver=defaultresolver - - traefik.http.routers.frontend-web-https.service=frontend - - - traefik.http.routers.frontend-web-https.middlewares=fallback@file - - - traefik.http.services.frontend.loadbalancer.server.port=3000 - env_file: - - .env - -networks: - infrastructure: - name: infrastructure - external: true