@@ -0,0 +1,5 @@
+
\ No newline at end of file
@@ -21,3 +21,16 @@ export function formatAndSortDates(inputArray: { date: string; value: number }[]
return el
})
}
+
+export function formatDate(
+ date: string | number | Date,
+ options: Intl.DateTimeFormatOptions,
+ lang?: string
+) {
+ if (typeof date !== "object") {
+ date = new Date(typeof date === "number" ? date : Date.parse(date))
+ }
+
+ const formatter = Intl.DateTimeFormat("ru", options)
+ return formatter.format(date)
+}
@@ -0,0 +1,3 @@
+export const getRandomImage = (): string => {
+ return String(Math.floor(Math.random() * 29) + 1) + '.png'
+}
@@ -1,7 +1,10 @@
import { GetServerSidePropsContext } from 'next'
-import { Device, DeviceOs } from '@/src/shared/lib/types/entities'
+import { Device, DeviceOs } from '#/shared/lib/types/entities'
+/**
+ * @deprecated
+ */
export const getTypeDevice = (context: GetServerSidePropsContext): Device => {
const UA = context.req.headers['user-agent']
@@ -14,6 +17,22 @@ export const getTypeDevice = (context: GetServerSidePropsContext): Device => {
return isMobile ? 'mobile' : 'desktop'
}
+export const getDeviceType = (): Device => {
+ const UA = navigator.userAgent
+
+ if (!UA) {
+ return 'desktop'
+ }
+
+ const isMobile = Boolean(UA.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i))
+
+ return isMobile ? 'mobile' : 'desktop'
+}
+
+
+/**
+ * @deprecated
+ */
export const getDeviceOs = (context: GetServerSidePropsContext): DeviceOs => {
const UA = context.req.headers['user-agent']
@@ -25,3 +44,15 @@ export const getDeviceOs = (context: GetServerSidePropsContext): DeviceOs => {
return isIos ? 'ios' : 'android'
}
+
+export const getOs = (): DeviceOs => {
+ const UA = navigator.userAgent
+
+ if (!UA) {
+ return 'android'
+ }
+
+ const isIos = UA.includes('iPhone') || UA.includes('iPad')
+
+ return isIos ? 'ios' : 'android'
+}
@@ -12,7 +12,20 @@ export function getCurrentTimeAndGreeting(userName: string) {
greeting = 'Добрый вечер'
}
- const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+ const months = [
+ 'января',
+ 'февраля',
+ 'марта',
+ 'апреля',
+ 'мая',
+ 'июня',
+ 'июля',
+ 'августа',
+ 'сентября',
+ 'октября',
+ 'ноября',
+ 'декабря',
+ ]
const formattedDate = `Сегодня, ${day} ${months[monthIndex]} ${year}`
const greetingMessage = `${greeting}, ${userName}! 👋`
@@ -1,3 +1,7 @@
export { getAccessToken } from './get-token'
export { getTypeDevice } from './get-type-device'
export { useConcat } from './reactive-concat'
+export * from './get-type-device'
+export * from './get-random-image'
+export * from './string'
+export * from './date-helper'
@@ -7,7 +7,7 @@ export class LocalStorageHelper {
this.modelTitle = key.toLowerCase()
}
- public readonly getSettingFromLS = (key: string, defaultValue: any, availableModels?:any[]) => {
+ public readonly getSettingFromLS = (key: string, defaultValue: any, availableModels?: any[]) => {
const finalKey = this.modelTitle + ': ' + key
if (typeof localStorage !== 'undefined') {
@@ -0,0 +1,3 @@
+export function c(...args: Array) {
+ return args.filter(Boolean).join(" ")
+}
@@ -0,0 +1,16 @@
+.badge {
+ display: inline-block;
+ padding: 3px 10px;
+ &_primary{
+ color: var(--air-color);
+ font-weight: 500;
+ background-color: rgba($color: #8280ff, $alpha: 0.1);
+ border-radius: 5px;
+ }
+
+ &_outline{
+ color: rgba($color: #A4AAB5, $alpha: 0.6);
+ border: 1px solid rgba($color: #A4AAB5, $alpha: 0.6);
+ border-radius: 10px;
+ }
+}
\ No newline at end of file
@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './common-badge.module.scss'
+import { c } from '@/src/shared/lib/helpers'
+
+export type CommonBagdeVariant = 'primary' | 'outline'
+
+interface CommonBagdeProps extends React.HTMLAttributes {
+ variant?: CommonBagdeVariant
+ className?: string
+}
+
+export const CommonBagde = ({
+ variant = 'primary',
+ children,
+ className,
+ ...props
+}: CommonBagdeProps) => {
+ return (
+
+ {children}
+
+ )
+}
@@ -0,0 +1 @@
+export * from './common-badge'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -0,0 +1,57 @@
+.button {
+ border: none;
+ outline: none;
+ background-color: transparent;
+ padding: 15px 25px;
+ cursor: pointer;
+
+ &_outline {
+ border-radius: 15px;
+ border: 1px solid white;
+ color: white;
+ font-weight: 600;
+ transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+ font-size: 15px;
+
+ &:hover {
+ background-color: white;
+ color: black;
+ }
+
+ &_disabled {
+ opacity: 0.5;
+
+ &:hover {
+ background-color: transparent;
+ color: white;
+ }
+ }
+ }
+
+ &_primary-outline {
+ border-radius: 15px;
+ border: 1px solid var(--air-color);
+ color: var(--air-color);
+ font-weight: 600;
+ transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+ font-size: 15px;
+
+ &:hover {
+ background-color: var(--air-color);
+ color: white;
+ }
+ }
+
+ &_primary {
+ background-color: var(--air-color);
+ color: white;
+ border-radius: 12px;
+ font-weight: 500;
+ font-size: 15px;
+ transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+ &:hover {
+ background-color: var(--text-color-purple);
+ color: white;
+ }
+ }
+}
@@ -0,0 +1,32 @@
+import { c } from '@/src/shared/lib/helpers'
+import styles from './common-button.module.scss'
+
+export type ButtonVariant = 'outline' | 'primary' | 'primary-outline'
+
+export interface CommonButtonProps extends React.ButtonHTMLAttributes {
+ children?: React.ReactNode
+ variant?: ButtonVariant
+}
+
+export const CommonButton = ({
+ children,
+ variant = 'outline',
+ className,
+ disabled,
+ ...props
+}: CommonButtonProps) => {
+ return (
+
+ )
+}
@@ -0,0 +1 @@
+export * from './common-button'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -1,6 +1,15 @@
import React, { useEffect, useMemo, useState } from 'react'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, MenuItem, Stack, Typography } from '@mui/material'
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Box,
+ Button,
+ MenuItem,
+ Stack,
+ Typography,
+} from '@mui/material'
import Router, { useRouter } from 'next/router'
import { useSession } from 'next-auth/react'
@@ -18,6 +27,8 @@ export interface IOffer {
tokens_per_plan: string
title: string
duration: string
+ accessed_models: string[]
+ points: string[]
}
interface IPaymentsProps {
@@ -69,37 +80,52 @@ export const Payment: React.FC = ({ device, changeClose })
{offers?.map((offer) => {
return (
setSelectedOffer(uid)}
- uid={offer.uid}
- price={offer.price}
- tokens_per_plan={offer.tokens_per_plan}
key={offer.uid}
/>
)
})}
- {messages && (
-
-
- История
- {messages.map((el) => (
-
- ))}
-
-
- )}
+ {/* {messages && (
+
+
+ История
+ {messages.map((el) => (
+
+ ))}
+
+
+ )} */}
@@ -107,7 +133,10 @@ export const Payment: React.FC = ({ device, changeClose })
{info.map((el) => {
return (
-
+
p': {
@@ -146,7 +175,11 @@ const HistoryMessage: React.FC = ({ tokens, time, price }) => {
}
return (
-
+
Оплата
{price} ₽, {Math.floor(+tokens)} токенов
@@ -0,0 +1,61 @@
+.tarif {
+ background-color: var(--new-ui-main-color);
+ padding: 30px;
+ border-radius: 15px;
+ width: 100%;
+ display: flex;
+ text-align: left;
+ flex-direction: column;
+ &__header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 45px;
+ }
+
+ &__badge {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ width: max-content;
+ span {
+ font-size: 36px;
+ font-weight: 700;
+ }
+ }
+
+ &__quote {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--new-ui-gray-color);
+ }
+
+ &__price {
+ font-weight: 700;
+ font-size: 25px;
+ letter-spacing: -2%;
+ margin-bottom: 8px;
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding-left: 20px;
+ gap: 4px;
+ margin-bottom: 45px;
+ }
+
+ &__btn {
+ border-color: var(--air-color);
+ color: var(--air-color);
+ }
+}
+
+.point {
+ color: var(--new-ui-text-color);
+ text-align: left;
+ &::marker {
+ color: var(--new-ui-gray-color) !important;
+ }
+}
@@ -1,46 +1,62 @@
import React from 'react'
-import { Box, Typography } from '@mui/material'
-import Button from '@mui/material/Button'
-import { Balance } from '@/src/shared'
-import { useThemeAndDevice } from '@/src/shared/lib/hooks'
import { IOffer } from '@/src/widgets/payment/model/payment'
-import styles from '@/src/widgets/payment/ui/payment.module.scss'
+import styles from './offer.module.scss'
+import { CommonBagde } from '@/src/shared/ui/badge'
+import LightningSvg from '@/src/assets/svg/lightning.svg?react'
+import { CommonButton } from '@/src/shared/ui/button'
+import { c } from '@/src/shared/lib/helpers'
interface IOfferProps extends IOffer {
pickOffer: (uid: string) => void
selectedOffer: string
device: 'desktop' | 'mobile'
pay: (uid: string) => void
+ centered: boolean
}
-const duration = {
- month: 'мес',
- year: 'год',
-}
-
-const Offer: React.FC = ({ pickOffer, uid, tokens_per_plan, price, selectedOffer, title, duration: dur, pay }) => {
+const Offer: React.FC = ({
+ pickOffer,
+ uid,
+ tokens_per_plan,
+ price,
+ centered,
+ points,
+ pay,
+}) => {
return (
- pickOffer(uid)}>
- {title}
-
-
- {Math.floor(+price)} ₽
-
-
-
-
- -
- {Math.floor(+tokens_per_plan)} токенов
+
pickOffer(uid)}
+ >
+
+
+
+
+ {Math.round(Number(tokens_per_plan))}
+
+
+
токенов
+
+
+
+ {points.map((el, idx) => (
+ -
+ {el}
-
-
-
-
-
-
+ ))}
+
+
+
{price}₽
+
+
pay(uid)}
+ className={c(!centered && styles.tarif__btn)}
+ variant={centered ? 'primary' : 'outline'}
+ >
+ Подключить
+
+