- {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} +

+ + ) +} @@ -7,10 +7,11 @@ import { Raleway } from 'next/font/google' import { SessionProvider } from 'next-auth/react' import { appWithTranslation } from 'next-i18next' import { NextStep, NextStepProvider } from 'nextstepjs' -import { FlagProvider } from '@unleash/proxy-client-react' +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' @@ -74,7 +75,8 @@ function AppContent({ {Component.getLayout ? Component.getLayout() : } - + + @@ -88,30 +90,56 @@ function AppContent({ function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) { useBlockTelegram() - const { env } = useEnv() + const { env, loading: envLoading } = useEnv() const unleashUrl = env?.NEXT_PUBLIC_UNLEASH_URL || process.env.NEXT_PUBLIC_UNLEASH_URL || '' const unleashClientKey = env?.NEXT_PUBLIC_UNLEASH_CLIENT_KEY || process.env.NEXT_PUBLIC_UNLEASH_CLIENT_KEY || '' const unleashAppName = env?.NEXT_PUBLIC_UNLEASH_APP_NAME || process.env.NEXT_PUBLIC_UNLEASH_APP_NAME || '' + const unleashClient = React.useMemo(() => { + if (envLoading) return null + if (!unleashUrl || !unleashClientKey || !unleashAppName) return null + return new UnleashClient({ + url: unleashUrl, + clientKey: unleashClientKey, + appName: unleashAppName, + }) + }, [envLoading, unleashAppName, unleashClientKey, unleashUrl]) + + React.useEffect(() => { + if (!unleashClient) return + unleashClient.start() + return () => { + unleashClient.stop?.() + } + }, [unleashClient]) + + if (envLoading) { + return null + } + return ( <> - + {unleashClient ? ( + + + + + + ) : ( + Component={Component} + pageProps={{ session, ...pageProps }} + refetchInterval={Number(env?.NEXT_PUBLIC_REFETCH_INTERVAL) || undefined} + /> - + )} ) } @@ -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,7 @@ import { FC, ReactNode } from 'react' import { Box } from '@mui/material' import Dialog from '@mui/material/Dialog' +import type { SxProps, Theme } from '@mui/material/styles' import Image from 'next/image' import styles from './modal.module.scss' @@ -8,21 +9,29 @@ export interface ModalProps { open: boolean onClose: (e?: any) => void children?: ReactNode + /** Доп. стили для Paper — например minWidth на десктопе */ + paperSx?: SxProps + /** Растянуть диалог по ширине (по умолчанию фиксированная ширина 408px у корневого sx) */ + wide?: boolean } -export const Modal: FC = ({ open, onClose, children }) => { +export const Modal: FC = ({ open, onClose, children, paperSx, wide = false }) => { return ( ) } + \ 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 ( +

+ + + {normalizedDays === 0 ? ( + <>Истекает сегодня + ) : ( + <> + Истечет через{' '} + + {normalizedDays} {declineDays(normalizedDays)} + + + )} + +

+ ) +} + @@ -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' @@ -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 ( + + + + Последняя оплата + + + + {commaSeparated(Math.round(Number(planTokenLimit)))} токенов + + + {formatterdPlanPrice} + + + + + Мой баланс + + {declineToken(balance.toString())} + {Math.round(percentage)} % + + + + + ) +} @@ -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 ( + + + + + + + {features?.map((featureGroup, idx) => ( + + + {categoryIconMap[featureGroup.name] && ( + {categoryIconMap[featureGroup.name]} + )} + {featureGroup.name} + + + + {featureGroup.features.map((feature, featureIdx) => { + let { number, unit, more } = formatFeatureValue(feature.quantity, feature.measurement_unit) + + return ( + + {feature.name} + + + {number == '-' ? ( + + ) : ( + <> + {' '} + {more} {number} + {unit} + + )} + + + + ) + })} + + + ))} + + + + Для каждой отдельной модели указано примерное количество генераций, как если бы вы пользовались{' '} + только ей.
+ Количество генераций может варьироваться в зависимости от используемых параметров каждой конкретной модели. + + + ) +} @@ -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 = ({ uid, tokens_per_plan, price, grouped_features, isCurrentSubscription, index }) => { + const { data } = useSession() + const { showMessage } = useShowDataStore() + + const unitMap: Record = { + Изображения: 'изображений', + 'Чат-боты': 'страниц текста', + Видео: 'видео', + Аудио: 'аудиозаписей', + } + + 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 ( + + + + + + {commaSeparated(Math.round(Number(tokens_per_plan)))} токенов + + + + +

+ {feature} +

+ + +

{commaSeparated(parseInt(price) ?? 0)} ₽

+ { + e.stopPropagation() + pay(uid) + }} + > + Оплатить + + + + ) +} + +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 ( + + + {offers?.map((offer, idx) => { + return ( + + ) + })} + + + ) +} @@ -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(null) + const [currentTokenLimitUID, setCurrentTokenLimitUID] = useState('') + const [tokenLimits, setTokenLimits] = useState>([]) + const [currentFeatures, setCurrentFeatures] = useState([]) + 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 ( + + + Оплата + + + + + + + + + + + ) +} @@ -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 ( - <> - - - - - - - Отмена подписки - - - - Внимание! Вы отменяете подписку на тариф 10 000 токенов. Следующее списание будет отменено, вы можете продолжать пользоваться возможностями тарифа до истечения его срока. - - - - - - - - - ) -} \ 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 ( - - Последняя оплата - + + + Мой тариф + + {daysLeft !== null ? : null} + {commaSeparated(Math.round(Number(planTokenLimit)))} токенов - {formatterdPlanPrice} + {isDemoPlan ? 'Демо доступ' : `${formatterdPlanPrice} / мес`} + + {nextPaymentLabel} + @@ -18,7 +18,7 @@ export const FeaturesSection = ({ currentTokenLimitUID, onCurrentTokenLimitUIDCh return ( - + Возможности с подпиской