diff --git a/src/app/actions/action.ts b/src/app/actions/action.ts index 5074f5e..73898a3 100644 --- a/src/app/actions/action.ts +++ b/src/app/actions/action.ts @@ -1,4 +1,5 @@ 'use server' + import { getSessionData, deleteSession } from '@/app/actions/session'; import { testUserData, API_BASE_URL } from '@/app/actions/definitions'; import { redirect } from 'next/navigation'; diff --git a/src/app/styles/payment-container.scss b/src/app/styles/payment-container.scss index ef88cb8..58e220c 100644 --- a/src/app/styles/payment-container.scss +++ b/src/app/styles/payment-container.scss @@ -214,6 +214,7 @@ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; overflow: visible; + max-width: 350px; .plan-header { text-align: center; diff --git a/src/app/ui/payment/payment-tab-tariffs.tsx b/src/app/ui/payment/payment-tab-tariffs.tsx index 3f47487..e400b12 100644 --- a/src/app/ui/payment/payment-tab-tariffs.tsx +++ b/src/app/ui/payment/payment-tab-tariffs.tsx @@ -3,6 +3,7 @@ import { useEffect } from 'react'; import { getUserData } from '@/app/actions/action'; import { useQuery } from '@tanstack/react-query'; +import { convertBytes } from '@/app/lib/convertBytes'; export default function PaymentTabTariffs() { const { @@ -17,14 +18,9 @@ export default function PaymentTabTariffs() { } }); - useEffect(() => { - console.log('show => userData'); - console.log(userData); - }, []) - return (
-
+
-
-
-
🚀
-

СТАРТ

-
900₽
-
в месяц
-
100 токенов включено
-
-
    -
  • - ✓ - 100 файлов в месяц -
    • -
  • - ✓ - 1 ГБ хранилища -
    • -
  • - ✓ - До 10 МБ на файл -
    • -
  • - ✓ - Базовые модули защиты -
    • -
  • - ✓ - Поддержка 24/7 -
    • -
  • - ✗ - API доступ -
    • -
-
-
-
-
🚀
-

ПРЕМИУМ

-
3500₽
-
в месяц
-
100 токенов включено
-
-
    -
  • - ✓ - 100 файлов в месяц -
    • -
  • - ✓ - 1 ГБ хранилища -
    • -
  • - ✓ - До 10 МБ на файл -
    • -
  • - ✓ - Базовые модули защиты -
    • -
  • - ✓ - Поддержка 24/7 -
    • -
  • - ✗ - API доступ -
    • -
-
-
-
-
🚀
-

ПРОФИ

-
9500₽
-
в месяц
-
100 токенов включено
-
-
    -
  • - ✓ - 100 файлов в месяц -
    • -
  • - ✓ - 1 ГБ хранилища -
    • -
  • - ✓ - До 10 МБ на файл -
    • -
  • - ✓ - Базовые модули защиты -
    • -
  • - ✓ - Поддержка 24/7 -
    • -
  • - ✗ - API доступ -
    • -
-
+ + {userData.tariffs?.map(((item: { + id: number, + name: string, + price: number, + tokens: number, + maxFilesCount: number, + diskSize: number + }) => { + return ( +
+
+
🚀
+

+ {item.name} +

+
+ {item.price} +
+
в месяц
+
+ {item.tokens} токенов включено
+
+
    +
  • + ✓ + {item.maxFilesCount} файлов в месяц +
    • +
  • + ✓ + {convertBytes(item.diskSize)} хранилища +
    • +
  • + ✓ + Базовые модули защиты +
    • +
  • + ✓ + Поддержка 24/7 +
    • +
  • + ✗ + API доступ +
    • +
+
+ ) + }))}
) diff --git a/src/app/ui/payment/user-usage.tsx b/src/app/ui/payment/user-usage.tsx index 0669b1c..4e22e38 100644 --- a/src/app/ui/payment/user-usage.tsx +++ b/src/app/ui/payment/user-usage.tsx @@ -1,28 +1,47 @@ +'use client' + +import { getUserData } from '@/app/actions/action'; +import { useQuery } from '@tanstack/react-query'; +import { useEffect } from 'react'; +import {convertBytes} from '@/app/lib/convertBytes'; + export default function UserUsage() { + const { + data: userData, + isLoading, + isError, + error + } = useQuery({ + queryKey: ['userData'], + queryFn: () => { + return getUserData(); + } + }); + return (

- 📊 Ваше использование + Ваше использование

-
0 / 2,000
+
0 / {userData?.tariffInfo?.tariff?.maxFilesCount}
Файлов в месяц
-
0 / 20 ГБ
+
0 / {convertBytes(userData?.tariffInfo?.tariff?.diskSize)}
Объём хранилища
@@ -32,7 +51,9 @@ export default function UserUsage() {
Токенов на балансе
-
ПРОФИ
+
+ {userData?.tariffInfo?.tariff?.name} +
Текущий план
diff --git a/src/app/ui/settings/personal-data-settings.tsx b/src/app/ui/settings/personal-data-settings.tsx index 02e6993..c8ed0ed 100644 --- a/src/app/ui/settings/personal-data-settings.tsx +++ b/src/app/ui/settings/personal-data-settings.tsx @@ -1,7 +1,9 @@ 'use client' import { useTranslations } from 'next-intl'; -import { useActionState, useState } from 'react' +import { useActionState, useState, useEffect } from 'react'; +import { getUserData } from '@/app/actions/action'; +import { useQuery } from '@tanstack/react-query'; export default function PersonalDataSettings() { const [errorMessage, formAction, isPending] = useActionState( @@ -11,6 +13,23 @@ export default function PersonalDataSettings() { undefined ); + const { + data: userData, + isLoading, + isError, + error + } = useQuery({ + queryKey: ['userData'], + queryFn: () => { + return getUserData(); + } + }); + + useEffect(() => { + console.log('show => userData'); + console.log(userData); + }, []) + const [selectedValue, setSelectedValue] = useState('male'); const t = useTranslations('Global'); @@ -26,19 +45,37 @@ export default function PersonalDataSettings() { - -
-
- - +
+ {userData.company && ( +
+ + +
+ )}
- + {t('email-cant-change')} @@ -47,7 +84,12 @@ export default function PersonalDataSettings() { - +