feat: add errors

.env

@@ -1,5 +1,8 @@
 NEXT_PUBLIC_SERVER_BASE_URL=https://api.bbuddy.expert/api
 NEXT_PUBLIC_AGORA_APPID=ed90c9dc42634e5687d4e2e0766b363f
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LVB3LK5pVGxNPeKk4gedt5NW4cb8k7BVXvgOMPTK4x1nnbGTD8BCqDqgInboT6N72YwrTl4tOsVz8rAjbUadX1m00y4Aq5qE8
+STRIPE_SECRET_KEY=sk_test_51LVB3LK5pVGxNPeK6j0wCsPqYMoGfcuwf1LpwGEBsr1dUx4NngukyjYL2oMZer5EOlW3lqnVEPjNDruN0OkUohIf00fWFUHN5O
+STRIPE_PAYMENT_DESCRIPTION='BBuddy services'
 
 NEXT_PUBLIC_CONTENTFUL_SPACE_ID = voxpxjq7y7vf
 NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN = s99GWKfpDKkNwiEJ3pN7US_tmqsGvDlaex-sOJwpzuc

package.json

@@ -13,10 +13,13 @@
     "@ant-design/icons": "^5.2.6",
     "@ant-design/nextjs-registry": "^1.0.0",
     "@contentful/rich-text-react-renderer": "^15.22.9",
+    "@stripe/react-stripe-js": "^2.7.3",
+    "@stripe/stripe-js": "^4.1.0",
     "agora-rtc-react": "^2.1.0",
     "agora-rtc-sdk-ng": "^4.20.2",
     "antd": "^5.12.1",
     "antd-img-crop": "^4.21.0",
+    "antd-style": "^3.6.2",
     "axios": "^1.6.5",
     "contentful": "^10.13.3",
     "dayjs": "^1.11.10",
@@ -26,7 +29,9 @@
     "react": "^18",
     "react-dom": "^18",
     "react-slick": "^0.29.0",
+    "react-stripe-js": "^1.1.5",
     "slick-carousel": "^1.8.1",
+    "stripe": "^16.2.0",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {

src/actions/experts.ts

@@ -1,5 +1,5 @@
-import { GeneralFilter, ExpertsData, ExpertDetails } from '../types/experts';
 import { apiRequest } from './helpers';
+import { GeneralFilter, ExpertsData, ExpertDetails, ExpertScheduler, ExpertSchedulerSession, SignupSessionData } from '../types/experts';
 
 export const getExpertsList = (locale: string, filter?: GeneralFilter): Promise<ExpertsData> => apiRequest({
     url: '/home/coachsearch1',
@@ -14,3 +14,18 @@ export const getExpertById = (id: string, locale: string): Promise<ExpertDetails
     data: { id },
     locale
 });
+
+export const getSchedulerByExpertId = (id: string, locale: string): Promise<ExpertScheduler> => apiRequest({
+    url: '/home/sessionsignupdata',
+    method: 'post',
+    data: { id },
+    locale
+});
+
+export const getSchedulerSession = (data: SignupSessionData, locale: string, token: string): Promise<ExpertSchedulerSession> => apiRequest({
+    url: '/home/sessionsignupsubmit',
+    method: 'post',
+    data,
+    locale,
+    token
+});

src/actions/sessions.ts

@@ -91,3 +91,11 @@ export const finishSession = (locale: string, token: string, sessionId: number):
     locale,
     token
 });
+
+export const sessionPaymentConfirm = (locale: string, token: string, sessionId: number): Promise<Session> => apiRequest({
+    url: '/home/session_pay_confirm',
+    method: 'post',
+    data: { id: sessionId },
+    locale,
+    token
+});

src/actions/stripe.ts

@@ -0,0 +1,79 @@
+"use server";
+
+import { Stripe } from "stripe";
+
+import { headers } from "next/headers";
+
+import { formatAmountForStripe } from "../utils/stripe-helpers";
+import { stripe } from "../lib/stripe";
+
+export async function createCheckoutSession(
+    data: FormData,
+): Promise<{ client_secret: string | null; url: string | null }> {
+    const ui_mode = data.get(
+        "uiMode",
+    ) as Stripe.Checkout.SessionCreateParams.UiMode;
+    console.log('DATA', data)
+    const origin: string = headers().get("origin") as string;
+
+    const checkoutSession: Stripe.Checkout.Session =
+        await stripe.checkout.sessions.create({
+            mode: "payment",
+            submit_type: "donate",
+            line_items: [
+                {
+                    quantity: 1,
+                    price_data: {
+                        currency: 'eur',
+                        product_data: {
+                            name: "Custom amount donation",
+                        },
+                        unit_amount: formatAmountForStripe(
+                            Number(data.get("customDonation") as string),
+                            'eur',
+                        ),
+                    },
+                },
+            ],
+            ...(ui_mode === "hosted" && {
+                success_url: `${origin}/payment/with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+                cancel_url: `${origin}/with-checkout`,
+            }),
+            ...(ui_mode === "embedded" && {
+                return_url: `${origin}/payment/with-embedded-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+            }),
+            ui_mode,
+        });
+
+    return {
+        client_secret: checkoutSession.client_secret,
+        url: checkoutSession.url,
+    };
+}
+
+export async function createPaymentIntent(
+    data: { amount: number, sessionId?: string },
+): Promise<{ client_secret: string }> {
+
+    const params = {
+        amount: formatAmountForStripe(
+            data.amount,
+            'eur',
+        ),
+        automatic_payment_methods: { enabled: true },
+        currency: 'eur',
+    } as Stripe.PaymentIntentCreateParams;
+
+    if (data?.sessionId){
+        params.metadata = {
+            sessionId : data.sessionId
+        }
+    }
+
+    const paymentIntent: Stripe.PaymentIntent =
+        await stripe.paymentIntents.create(params);
+
+    return { client_secret: paymentIntent.client_secret as string };
+}
+
+export const getStripePaymentStatus = async (payment_intent: string): Promise<Stripe.PaymentIntent> => await stripe.paymentIntents.retrieve(payment_intent);

src/app/[locale]/(main)/@news/page.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useTranslations } from 'next-intl';
+// import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { i18nText } from '../../../../i18nKeys';
-import {fetchBlogPosts} from "../../../../lib/contentful/blogPosts";
+import { fetchBlogPosts } from '../../../../lib/contentful/blogPosts';
-import Link from "next/link";
 
 export default async function News({params: {locale}}: { params: { locale: string } }) {
     unstable_setRequestLocale(locale);

src/app/[locale]/(main)/layout.tsx

@@ -15,7 +15,8 @@ import React, { ReactNode } from 'react';
 export default function MainLayout({ children, news, experts }: {
     children: ReactNode,
     news: ReactNode,
-    experts: ReactNode
+    experts: ReactNode,
+    payment: ReactNode
 }) {
     return (
         <>
@@ -24,4 +25,4 @@ export default function MainLayout({ children, news, experts }: {
             {experts}
         </>
     );
-};
+}

src/app/[locale]/account/(account)/expert-profile/page.tsx

@@ -57,7 +57,7 @@ export default function ExpertProfilePage({ params: { locale } }: { params: { lo
         }
     }, [jwt]);
 
-    return (
+    return data ? (
         <Loader isLoading={loading}>
             <ExpertProfile
                 isFull={isFull}
@@ -66,5 +66,5 @@ export default function ExpertProfilePage({ params: { locale } }: { params: { lo
                 updateData={setData}
             />
         </Loader>
-    );
+    ) : null;
 };

src/app/[locale]/account/(simple)/sessions/[...slug]/page.tsx

@@ -26,7 +26,7 @@ export default function SessionDetailItem({ params: { locale, slug } }: { params
             <Suspense fallback={<p>Loading...</p>}>
                 <SessionDetails
                     locale={locale}
-                    sessionId={sessionId}
+                    sessionId={sessionId as number}
                     activeType={sessionType as SessionType}
                 />
             </Suspense>

src/app/[locale]/bb-expert/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
 import { GeneralTopSection } from '../../../components/Page';
-import { ScreenCarousel } from '../../../components/Page/ScreenCarousel/index';
+import { ScreenCarousel } from '../../../components/Page/ScreenCarousel';
 
 export const metadata: Metadata = {
     title: 'Bbuddy - Become a BB expert',

src/app/[locale]/blog/page.tsx

@@ -9,7 +9,6 @@ import {CustomPagination} from "../../../components/view/CustomPagination";
 import {DEFAULT_PAGE_SIZE} from "../../../constants/common";
 import {BlogPosts} from "../../../components/BlogPosts/BlogPosts";
 
-
 interface BlogPostPageParams {
     slug: string
 }

src/app/[locale]/experts/[expertId]/page.tsx

@@ -6,7 +6,6 @@ import { getExpertById, getExpertsList } from '../../../../actions/experts';
 import {
     ExpertCard,
     ExpertCertificate,
-    ExpertInformation,
     ExpertPractice
 } from '../../../../components/Experts/ExpertDetails';
 import { Details } from '../../../../types/education';
@@ -82,8 +81,7 @@ export default async function ExpertItem({ params: { expertId = '', locale } }:
                         </BackButton>
                     </Suspense>
                 </div>
-                <ExpertCard expert={expert} locale={locale} />
+                <ExpertCard expert={expert} locale={locale} expertId={expertId}/>
-                <ExpertInformation expert={expert} locale={locale} />
 
                 <h2 className="title-h2">{i18nText('expertBackground', locale)}</h2>
                 <p className="base-text">

src/app/[locale]/layout.tsx

@@ -42,4 +42,4 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
             </ConfigProvider>
         </AntdRegistry>
     );
-};
+}

src/app/api/webhooks/route.ts

@@ -0,0 +1,66 @@
+import type { Stripe } from "stripe";
+
+import { NextResponse } from "next/server";
+
+import { stripe } from "../../../lib/stripe";
+
+export async function POST(req: Request) {
+    let event: Stripe.Event;
+
+    try {
+        event = stripe.webhooks.constructEvent(
+            await (await req.blob()).text(),
+            req.headers.get("stripe-signature") as string,
+            process.env.STRIPE_WEBHOOK_SECRET as string,
+        );
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Unknown error";
+        // On error, log and return the error message.
+        if (err! instanceof Error) console.log(err);
+        console.log(`❌ Error message: ${errorMessage}`);
+        return NextResponse.json(
+            { message: `Webhook Error: ${errorMessage}` },
+            { status: 400 },
+        );
+    }
+
+    // Successfully constructed event.
+    console.log("✅ Success:", event.id);
+
+    const permittedEvents: string[] = [
+        "checkout.session.completed",
+        "payment_intent.succeeded",
+        "payment_intent.payment_failed",
+    ];
+
+    if (permittedEvents.includes(event.type)) {
+        let data;
+
+        try {
+            switch (event.type) {
+                case "checkout.session.completed":
+                    data = event.data.object as Stripe.Checkout.Session;
+                    console.log(`💰 CheckoutSession status: ${data.payment_status}`);
+                    break;
+                case "payment_intent.payment_failed":
+                    data = event.data.object as Stripe.PaymentIntent;
+                    console.log(`❌ Payment failed: ${data.last_payment_error?.message}`);
+                    break;
+                case "payment_intent.succeeded":
+                    data = event.data.object as Stripe.PaymentIntent;
+                    console.log(`💰 PaymentIntent status: ${data.status}`);
+                    break;
+                default:
+                    throw new Error(`Unhandled event: ${event.type}`);
+            }
+        } catch (error) {
+            console.log(error);
+            return NextResponse.json(
+                { message: "Webhook handler failed" },
+                { status: 500 },
+            );
+        }
+    }
+    // Return a response to acknowledge receipt of the event.
+    return NextResponse.json({ message: "Received" }, { status: 200 });
+}

src/components/Experts/ExpertDetails.tsx

@@ -1,19 +1,25 @@
 'use client';
 
-import React, { FC } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import Image from 'next/image';
-import { Tag, Image as AntdImage, Space } from 'antd';
+import { Tag, Image as AntdImage, Space, Button } from 'antd';
 import { ZoomInOutlined, ZoomOutOutlined, StarFilled } from '@ant-design/icons';
+import { SignupSessionData } from '../../types/experts';
 import { ExpertDetails, Practice, ThemeGroup } from '../../types/experts';
 import { ExpertDocument } from '../../types/file';
 import { Locale } from '../../types/locale';
 import { CustomRate } from '../view/CustomRate';
 import { i18nText } from '../../i18nKeys';
 import { FilledYellowButton } from '../view/FilledButton';
+import { getStorageValue } from '../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY, SESSION_DATA } from '../../constants/common';
+import { ScheduleModal } from '../Modals/ScheduleModal';
+import { ScheduleModalResult } from '../Modals/ScheduleModalResult';
 
 type ExpertDetailsProps = {
     expert: ExpertDetails;
     locale?: string;
+    expertId?: string;
 };
 
 type ExpertPracticeProps = {
@@ -22,10 +28,46 @@ type ExpertPracticeProps = {
     locale?: string;
 };
 
-export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale }) => {
+export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale, expertId }) => {
     const { publicCoachDetails } = expert || {};
+    const [showSchedulerModal, setShowSchedulerModal] = useState<boolean>(false);
+    const [mode, setMode] = useState<'data' | 'time' | 'pay' | 'finish'>('data');
+    const { publicCoachDetails: { tags = [], sessionCost = 0, sessionDuration = 0, coachLanguages = [] } } = expert || {};
+    const isRus = locale === Locale.ru;
+
+    const checkSession = (data?: SignupSessionData) => {
+        if (data?.startAtUtc && data?.tagId) {
+            const jwt = getStorageValue(AUTH_TOKEN_KEY, '');
+            sessionStorage?.setItem(SESSION_DATA, JSON.stringify(data));
+            if (jwt) {
+                setMode('pay');
+            } else {
+                setShowSchedulerModal(false);
+                const showAuth = new Event('show_auth_enter');
+                document.dispatchEvent(showAuth);
+            }
+        }
+    }
+
+    const handleShowPayForm = () => {
+        setShowSchedulerModal(true);
+        setMode('pay');
+    }
+
+    useEffect(() => {
+        document.addEventListener('show_pay_form', handleShowPayForm);
+        return () => {
+            document.removeEventListener('show_pay_form', handleShowPayForm);
+        };
+    }, []);
+
+    const onSchedulerHandle = () => {
+        setMode('data');
+        setShowSchedulerModal(true);
+    };
 
     return (
+        <>
             <div className="expert-card">
                 <div className="expert-card__wrap">
                     <div className="expert-card__avatar">
@@ -45,10 +87,10 @@ export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale }) => {
                     </div>
                 </div>
                 <div className="expert-card__wrap-btn">
-                <a href="#" className="btn-apply">
+                    <Button className="btn-apply" onClick={onSchedulerHandle}>
                         <img src="/images/calendar-outline.svg" className="" alt="" />
                         {i18nText('schedule', locale)}
-                </a>
+                    </Button>
                     {/*
                         <a href="#" className="btn-video">
                             <img src="/images/videocam-outline.svg" className="" alt=""/>
@@ -57,15 +99,6 @@ export const ExpertCard: FC<ExpertDetailsProps> = ({ expert, locale }) => {
                     */}
                 </div>
             </div>
-    );
-};
-
-export const ExpertInformation: FC<ExpertDetailsProps> = ({ expert, locale }) => {
-    const { publicCoachDetails: { tags = [], sessionCost = 0, sessionDuration = 0, coachLanguages = [] } } = expert || {};
-    const isRus = locale === Locale.ru;
-
-    return (
-        <>
             <div className="expert-info">
                 {/* <h2 className="title-h2">{}</h2> */}
                 <div className="skills__list">
@@ -91,11 +124,22 @@ export const ExpertInformation: FC<ExpertDetailsProps> = ({ expert, locale }) =>
                 {tags?.map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
             </div>
             <div className="wrap-btn-prise">
-                <FilledYellowButton onClick={() => console.log('schedule')}>{i18nText('signUp', locale)}</FilledYellowButton>
+                <FilledYellowButton onClick={onSchedulerHandle}>{i18nText('signUp', locale)}</FilledYellowButton>
                 <div className="wrap-btn-prise__text">
                     {`${sessionCost}€`} <span>/ {`${sessionDuration}${isRus ? 'мин' : 'min'}`}</span>
                 </div>
             </div>
+            <ScheduleModal
+                open={showSchedulerModal}
+                handleCancel={() => setShowSchedulerModal(false)}
+                updateMode={setMode}
+                mode={mode}
+                expertId={expertId as string}
+                locale={locale as string}
+                sessionCost={sessionCost}
+                checkSession={checkSession}
+            />
+            <ScheduleModalResult locale={locale as string} />
         </>
     );
 };

src/components/Experts/Filter.tsx

@@ -114,7 +114,6 @@ export const ExpertsFilter = ({
             ...getObjectByAdditionalFilter(searchParams)
         };
         const search = getSearchParamsString(newFilter);
-        console.log('basePath', basePath);
 
         router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`);
 

src/components/Modals/ScheduleModal.tsx

@@ -0,0 +1,312 @@
+'use client';
+
+import React, {FC, useEffect, useState} from 'react';
+import classNames from 'classnames';
+import { Modal, Menu, Calendar, Radio, Button, Input, message, Form } from 'antd';
+import type { CalendarProps, MenuProps } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
+import locale_ru from 'antd/lib/calendar/locale/ru_RU';
+import locale_en from 'antd/lib/calendar/locale/en_GB';
+import locale_de from 'antd/lib/calendar/locale/de_DE';
+import locale_it from 'antd/lib/calendar/locale/it_IT';
+import locale_es from 'antd/lib/calendar/locale/es_ES';
+import locale_fr from 'antd/lib/calendar/locale/fr_FR';
+import dayjs, { Dayjs } from 'dayjs';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/en';
+import 'dayjs/locale/de';
+import 'dayjs/locale/it';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
+import { AUTH_TOKEN_KEY, SESSION_DATA } from '../../constants/common';
+import { ExpertScheduler, SignupSessionData } from '../../types/experts';
+import { Tag } from '../../types/tags';
+import { getSchedulerByExpertId, getSchedulerSession } from '../../actions/experts';
+import { StripeElementsForm } from '../stripe/StripeElementsForm';
+import { i18nText } from '../../i18nKeys';
+import { CustomSelect } from '../../components/view/CustomSelect';
+import { Loader } from '../view/Loader';
+import { getStorageValue } from '../../hooks/useLocalStorage';
+
+type ScheduleModalProps = {
+    open: boolean;
+    handleCancel: () => void;
+    mode: 'data' | 'time' | 'pay' | 'finish';
+    updateMode: (mode: 'data' | 'time' | 'pay' | 'finish') => void;
+    sessionCost: number;
+    expertId: string;
+    locale: string;
+    checkSession: (data?: SignupSessionData) => void;
+};
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const getLocale = (locale: string) => {
+    if (locale) {
+        switch (locale) {
+            case 'ru':
+                return locale_ru;
+            case 'de':
+                return locale_de;
+            case 'fr':
+                return locale_fr;
+            case 'it':
+                return locale_it;
+            case 'es':
+                return locale_es;
+            default:
+                return locale_en;
+        }
+    }
+
+    return locale_en;
+};
+
+const getCalendarMenu = (start: Dayjs): MenuItem[] => Array.from({ length: 3 })
+    .map((_: unknown, index: number) => {
+        const date = index ? start.add(index, 'M') : start.clone();
+        return {
+            label: <span className="b-calendar-month">{date.format('MMMM')}</span>,
+            key: date.format('YYYY-MM-DD')
+        }
+    });
+
+export const ScheduleModal: FC<ScheduleModalProps> = ({
+    open,
+    handleCancel,
+    mode,
+    updateMode,
+    sessionCost,
+    locale,
+    expertId,
+    checkSession,
+}) => {
+    const [selectDate, setSelectDate] = useState<Dayjs>(dayjs());
+    const [dates, setDates] = useState<Record<string, { startTime: string, endTime: string }[]> | undefined>();
+    const [tags, setTags] = useState<Tag[] | undefined>();
+    const [rawScheduler, setRawScheduler] = useState<ExpertScheduler | null>(null);
+    const [isPayLoading, setIsPayLoading] = useState<boolean>(false);
+    const [sessionId, setSessionId] = useState<string>('');
+    const [form] = Form.useForm<{ clientComment?: string, startAtUtc?: string, tagId?: number }>();
+
+    dayjs.locale(locale);
+
+    const signupSession = () => {
+        const data = sessionStorage?.getItem(SESSION_DATA);
+        const jwt = getStorageValue(AUTH_TOKEN_KEY, '');
+
+        if (jwt && data) {
+            const parseData = JSON.parse(data);
+            setIsPayLoading(true);
+            getSchedulerSession(parseData as SignupSessionData, locale || 'en', jwt)
+                .then((session) => {
+                    setSessionId(session?.sessionId);
+                    console.log(session?.sessionId);
+                })
+                .catch((err) => {
+                    console.log(err);
+                    message.error('Не удалось провести оплату')
+                })
+                .finally(() => {
+                    sessionStorage?.removeItem(SESSION_DATA);
+                    setIsPayLoading(false);
+                })
+        }
+    };
+
+    useEffect(()=> {
+        if (open && mode !== 'pay') {
+            getSchedulerByExpertId(expertId as string, locale as string)
+                .then((data) => {
+                    setRawScheduler(data);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        }
+
+        if (!open) {
+            form.resetFields();
+        }
+    }, [open]);
+
+    useEffect(() => {
+        if (open && mode === 'pay') {
+            signupSession();
+        }
+    }, [mode]);
+
+    useEffect(() => {
+        const map = {} as any
+        rawScheduler?.availableSlots.forEach((el) => {
+            const key = dayjs(el.startTime).format('YYYY-MM-DD');
+            if (!map[key]){
+                map[key] = []
+            }
+            map[key].push(el);
+        })
+        setDates(map);
+        setTags(rawScheduler?.tags)
+    }, [rawScheduler]);
+
+    const onPanelChange = (value: Dayjs) => setSelectDate(value);
+
+    const onDateChange: CalendarProps<Dayjs>['onSelect'] = (value, selectInfo) => {
+        if (selectInfo.source === 'date') {
+            setSelectDate(value);
+            updateMode('time');
+        }
+    };
+
+    const disabledDate = (currentDate: Dayjs) => !dates || !dates[currentDate.format('YYYY-MM-DD')];
+
+    const cellRender: CalendarProps<Dayjs>['fullCellRender'] = (date, info) => {
+        const isWeekend = date.day() === 6 || date.day() === 0;
+        return React.cloneElement(info.originNode, {
+            ...info.originNode.props,
+            className: classNames('b-calendar-cell', {
+                ['b-calendar-cell__select']: selectDate.isSame(date, 'date'),
+                ['b-calendar-cell__today']: date.isSame(dayjs(), 'date'),
+                ['b-calendar-cell__weekend']: isWeekend,
+            }),
+            children: (
+                <div>
+                    <span>
+                        {date.get('date')}
+                    </span>
+                </div>
+            ),
+        });
+    };
+
+    const onValidate = () => {
+        form.validateFields()
+            .then((values) => {
+                checkSession({ coachId: +expertId, ...values });
+            })
+    }
+
+    return (
+        <Modal
+            className="b-modal"
+            open={open}
+            title={undefined}
+            onOk={undefined}
+            onCancel={handleCancel}
+            footer={false}
+            width={498}
+            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
+        >
+            {mode === 'data' && (
+                <Calendar
+                    className="b-calendar"
+                    fullscreen={false}
+                    onPanelChange={onPanelChange}
+                    fullCellRender={cellRender}
+                    onSelect={onDateChange}
+                    value={selectDate}
+                    disabledDate={disabledDate}
+                    locale={getLocale(locale)}
+                    validRange={[selectDate.startOf('M'), selectDate.endOf('M')]}
+                    headerRender={({ onChange }) => {
+                        const start = dayjs().startOf('M');
+                        const [activeMonth, setActiveMonth] = useState<string>(start.format('YYYY-MM-DD'));
+
+                        const onClick: MenuProps['onClick'] = (e) => {
+                            setActiveMonth(e.key);
+                            onChange(dayjs(e.key));
+                        };
+
+                        return (
+                            <Menu
+                                className="b-calendar-header"
+                                onClick={onClick}
+                                selectedKeys={[activeMonth]}
+                                mode="horizontal"
+                                items={getCalendarMenu(start)}
+                            />
+                        );
+                    }}
+                />
+            )}
+            {mode === 'time' && (
+                <div className="b-schedule-time">
+                    <div className="b-schedule-time-header">
+                        <Button
+                            className="b-button-link-big"
+                            type="link"
+                            onClick={() => updateMode('data')}
+                            icon={<ArrowLeftOutlined />}
+                            iconPosition="start"
+                        >
+                            {selectDate.locale(locale).format('DD MMMM YYYY')}
+                        </Button>
+                    </div>
+                    <Form form={form}>
+                        <div className="b-schedule-select-tag">
+                            {tags && (
+                                <Form.Item
+                                    name="tagId"
+                                    rules={[{
+                                        required: true,
+                                        message: ''
+                                    }]}
+                                >
+                                    <CustomSelect
+                                        label={i18nText('selectTopic', locale)}
+                                        options={tags?.map(({id, name}) => ({value: id, label: name}))}
+                                    />
+                                </Form.Item>
+                            )}
+                        </div>
+                        <div className="b-schedule-radio-list">
+                            <Form.Item
+                                name="startAtUtc"
+                                rules={[{
+                                    required: true,
+                                    message: ''
+                                }]}
+                            >
+                                <Radio.Group>
+                                    {dates && dates[selectDate.format('YYYY-MM-DD')].map((el: any) => (
+                                        <Radio
+                                            key={el.startTime}
+                                            value={el.startTime}
+                                        >
+                                            {dayjs(el.startTime).format('HH:mm')} - {dayjs(el.endTime).format('HH:mm')}
+                                        </Radio>)
+                                    )}
+                                </Radio.Group>
+                            </Form.Item>
+                        </div>
+                        <Form.Item name="clientComment">
+                            <Input.TextArea
+                                className="b-textarea"
+                                rows={2}
+                                placeholder={i18nText('sessionWishes', locale)}
+                            />
+                        </Form.Item>
+                    </Form>
+                    <Button
+                        className="btn-apply"
+                        onClick={onValidate}
+                    >
+                        {i18nText('pay', locale)}
+                    </Button>
+                </div>
+            )}
+            {mode === 'pay' && (
+                <div className="b-schedule-payment">
+                    <Loader isLoading={isPayLoading}>
+                        <StripeElementsForm
+                            amount={sessionCost}
+                            locale={locale}
+                            sessionId={sessionId}
+                        />
+                    </Loader>
+                </div>
+            )}
+        </Modal>
+    );
+};

src/components/Modals/ScheduleModalResult.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { Modal, Result } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { Stripe } from 'stripe';
+import { getStripePaymentStatus } from '../../actions/stripe';
+import { sessionPaymentConfirm } from '../../actions/sessions';
+import { getStorageValue } from '../../hooks/useLocalStorage';
+import { AUTH_TOKEN_KEY } from '../../constants/common';
+import { Session, SessionState } from '../../types/sessions';
+import { i18nText } from '../../i18nKeys';
+
+export const ScheduleModalResult = ({ locale }: { locale: string }) => {
+    const searchParams = useSearchParams();
+    const [paymentStatus, setPaymentStatus] = useState<Stripe.PaymentIntent.Status | undefined>();
+    const [session, setSession] = useState<Session | undefined>();
+    const [error, setError] = useState<any>();
+    const router = useRouter();
+
+    useEffect(() => {
+        setError(undefined);
+        const payment_intent = searchParams.get('payment_intent') || false;
+        if (payment_intent) {
+            getStripePaymentStatus(payment_intent)
+                .then((result) => {
+                    setPaymentStatus(result?.status);
+                    if (result?.status === 'succeeded' && result?.metadata?.sessionId) {
+                        const jwt = getStorageValue(AUTH_TOKEN_KEY, '');
+                        sessionPaymentConfirm(locale, jwt, +result.metadata.sessionId)
+                            .then((session) => {
+                                setSession(session);
+                            })
+                            .catch((err: any) => {
+                                setError(err);
+                            });
+                    }
+                })
+                .catch((err: any) => {
+                    setError(err);
+                })
+        }
+    }, [searchParams]);
+
+    const onClose = () => {
+        const { origin, pathname } = window?.location || {};
+
+        router.push(`${origin}${pathname}`);
+        setPaymentStatus(undefined);
+        setSession(undefined);
+    };
+
+    return (
+        <Modal
+            className="b-modal"
+            open={paymentStatus === 'succeeded' && session?.state === SessionState.PAID}
+            title={undefined}
+            onOk={undefined}
+            onCancel={onClose}
+            footer={false}
+            width={498}
+            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
+        >
+            <div className="b-schedule-payment-result">
+                <Result
+                    status="success"
+                    title={i18nText('successPayment', locale)}
+                />
+            </div>
+        </Modal>
+    );
+}

src/components/Page/Header/HeaderAuthLinks.tsx

@@ -23,6 +23,31 @@ function HeaderAuthLinks ({
     const selectedLayoutSegment = useSelectedLayoutSegment();
     const pathname = selectedLayoutSegment || '';
     const [token, setToken] = useLocalStorage(AUTH_TOKEN_KEY, '');
+    const [isPayPath, setIsPayPath] = useState<boolean>(false);
+
+    const onOpen = (mode: 'enter' | 'register' | 'reset' | 'finish') => {
+        setMode(mode);
+        setIsOpenModal(true);
+    };
+
+    const handleAuthRegister = () => {
+        setIsPayPath(true);
+        onOpen('register');
+    };
+
+    const handleAuthEnter = () => {
+        setIsPayPath(true);
+        onOpen('enter');
+    };
+
+    useEffect(() => {
+        document.addEventListener('show_auth_register', handleAuthRegister);
+        document.addEventListener('show_auth_enter', handleAuthEnter);
+        return () => {
+            document.removeEventListener('show_auth_register', handleAuthRegister);
+            document.removeEventListener('show_auth_enter', handleAuthEnter);
+        };
+    }, []);
 
     useEffect(() => {
         if (!isOpenModal) {
@@ -30,9 +55,16 @@ function HeaderAuthLinks ({
         }
     }, [isOpenModal]);
 
-    const onOpen = (mode: 'enter' | 'register' | 'reset' | 'finish') => {
+    useEffect(() => {
-        setMode(mode);
+        if (token && isPayPath) {
-        setIsOpenModal(true);
+            const showPayForm = new Event('show_pay_form');
+            document.dispatchEvent(showPayForm);
+        }
+    }, [token]);
+
+    const addNewEvent = (name: 'show_auth_register' | 'show_auth_enter') => {
+        const evt = new Event(name);
+        document.dispatchEvent(evt);
     };
 
     return token
@@ -49,7 +81,7 @@ function HeaderAuthLinks ({
                     <Button
                         className="b-header__auth"
                         type="link"
-                        onClick={() => onOpen('register')}
+                        onClick={() => addNewEvent('show_auth_register')}
                     >
                         {i18nText('registration', locale)}
                     </Button>
@@ -61,7 +93,7 @@ function HeaderAuthLinks ({
                     <Button
                         className="b-header__auth"
                         type="link"
-                        onClick={() => onOpen('enter')}
+                        onClick={() => addNewEvent('show_auth_enter')}
                     >
                         {i18nText('enter', locale)}
                     </Button>

src/components/stripe/StripeElementsForm.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import React, { FC, useEffect, useState } from 'react';
+import type { StripeError } from '@stripe/stripe-js';
+import {
+    useStripe,
+    useElements,
+    PaymentElement,
+    Elements,
+} from '@stripe/react-stripe-js';
+import { Form, Button, message } from 'antd';
+import getStripe from '../../utils/get-stripe';
+import { createPaymentIntent} from '../../actions/stripe';
+import { Payment } from '../../types/payment';
+import { i18nText } from '../../i18nKeys';
+import { WithError } from '../view/WithError';
+
+type PaymentFormProps = {
+    amount: number,
+    sessionId?: string,
+    locale: string
+}
+
+type PaymentInfo = 'initial' | 'error' | 'processing' | 'requires_payment_method' | 'requires_confirmation' | 'requires_action' | 'succeeded';
+
+const PaymentStatus = ({ status }: { status?: PaymentInfo }) => {
+    switch (status) {
+        case 'processing':
+        case 'requires_payment_method':
+        case 'requires_confirmation':
+            return <h2>Processing...</h2>;
+
+        case 'requires_action':
+            return <h2>Authenticating...</h2>;
+
+        case 'succeeded':
+            return <h2>Payment Succeeded</h2>;
+
+        default:
+            return null;
+    }
+};
+
+export const CheckoutForm: FC<PaymentFormProps> = ({ amount, sessionId, locale }) => {
+    const [form] = Form.useForm<Payment>();
+    const formAmount = Form.useWatch('amount', form);
+    const [paymentType, setPaymentType] = useState<string>('');
+    const [payment, setPayment] = useState<{
+        status: PaymentInfo
+    }>({ status: 'initial' });
+    const [errorData, setErrorData] = useState<any>();
+    const stripe = useStripe();
+    const elements = useElements();
+
+    useEffect(() => {
+        elements?.update({ amount: formAmount * 100 });
+    }, [formAmount]);
+
+    const onSubmit = async () => {
+        try {
+            if (!elements || !stripe) return;
+
+            setErrorData(undefined);
+            setPayment({ status: "processing" });
+
+            const { error: submitError } = await elements.submit();
+
+            if (submitError) {
+                if (submitError.message) {
+                    message.error(submitError.message);
+                }
+
+                return;
+            }
+
+            const { client_secret: clientSecret } = await createPaymentIntent(
+                { amount, sessionId }
+            );
+
+            const { error: confirmError } = await stripe!.confirmPayment({
+                elements,
+                clientSecret,
+                confirmParams: {
+                    return_url: window.location.href,
+                    payment_method_data: {
+                        allow_redisplay: 'limited',
+                        // billing_details: {
+                        //     name: input.cardholderName,
+                        // },
+                    },
+                },
+            });
+
+            if (confirmError) {
+                setErrorData({
+                    title: i18nText('errorPayment', locale),
+                    message: confirmError.message ?? 'An unknown error occurred'
+                });
+            }
+        } catch (err) {
+            const { message } = err as StripeError;
+            setErrorData({
+                title: i18nText('errorPayment', locale),
+                message: message ?? 'An unknown error occurred'
+            });
+        }
+    };
+
+    return (
+        <WithError errorData={errorData}>
+            <Form form={form} onFinish={onSubmit} style={{ display: 'flex', overflow: 'hidden', flexDirection: 'column', gap: 16, justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ width: '100%' }}>
+                    <PaymentElement
+                        onChange={(e) => {
+                            setPaymentType(e.value.type);
+                        }}
+                    />
+                </div>
+                <div>
+                    <PaymentStatus status={payment.status}/>
+                </div>
+                <Button
+                    className="btn-apply"
+                    htmlType="submit"
+                    disabled={
+                        !["initial", "succeeded", "error"].includes(payment.status) ||
+                        !stripe
+                    }
+                >
+                    {`${i18nText('pay', locale)} ${amount}€`}
+                </Button>
+            </Form>
+        </WithError>
+    );
+}
+
+export const StripeElementsForm: FC<PaymentFormProps> = ({ amount, sessionId, locale }) => {
+    return (
+        <Elements
+            stripe={getStripe()}
+            options={{
+                fonts: [{
+                    cssSrc: 'https://fonts.googleapis.com/css2?family=Comfortaa&display=swap',
+                }],
+                appearance: {
+                    variables: {
+                        colorIcon: '#2c7873',
+                        fontSizeBase: '16px',
+                        colorPrimary: '#66A5AD',
+                        colorBackground: '#F8F8F7',
+                        colorText: '#000',
+                        colorDanger: '#ff4d4f',
+                        focusBoxShadow: 'none',
+                        borderRadius: '8px'
+                    },
+                },
+                currency: 'eur',
+                mode: "payment",
+                amount: amount*100,
+            }}
+        >
+            <CheckoutForm amount={amount} sessionId={sessionId} locale={locale} />
+        </Elements>
+    );
+};

src/components/view/WithError.tsx

@@ -16,8 +16,8 @@ export const WithError: FC<WithErrorProps> = ({
         return (
             <Result
                 status="error"
-                title="Submission Failed"
+                title={errorData?.title}
-                subTitle="Please check and modify the following information before resubmitting."
+                subTitle={errorData?.message}
                 extra={refresh ? (
                     <Button type="primary" onClick={refresh}>
                         Refresh page

src/constants/common.ts

@@ -1,6 +1,7 @@
 export const BASE_URL = process.env.NEXT_PUBLIC_SERVER_BASE_URL || 'https://api.bbuddy.expert/api';
 export const AUTH_TOKEN_KEY = 'bbuddy_token';
 export const AUTH_USER = 'bbuddy_auth_user';
+export const SESSION_DATA = 'bbuddy_session_data';
 
 export const DEFAULT_PAGE_SIZE = 5;
 export const DEFAULT_PAGE = 1;

src/hooks/useLocalStorage.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-function getStorageValue (key: string, defaultValue: any) {
+export function getStorageValue (key: string, defaultValue: any) {
     if (typeof window !== 'undefined') {
         const saved = localStorage.getItem(key);
         return saved || defaultValue;

src/i18nKeys/de.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Neuen Kommentar hinzufügen',
         commentPlaceholder: 'Ihr Kommentar',
         clientComments: 'Kundenkommentare',
-        coachComments: 'Trainerkommentare'
+        coachComments: 'Expertenkommentare'
     },
     room: {
         upcoming: 'Zukünftige Räume',
@@ -110,9 +110,9 @@ export default {
     seminars: 'Seminare',
     courses: 'Kurse',
     mba: 'MBA-Information',
-    aboutCoach: 'Über Coach',
+    aboutCoach: 'Über den Experten',
     education: 'Bildung',
-    coaching: 'Coaching',
+    coaching: 'Expertenprofil',
     experiences: 'Praktische Erfahrung',
     payInfo: 'Zahlungsdaten',
     sessionDuration: 'Sitzungsdauer',
@@ -146,6 +146,10 @@ export default {
     saturday: 'Sa',
     addNew: 'Neu hinzufügen',
     mExperiences: 'Führungserfahrung',
+    pay: 'Zahlung',
+    sessionWishes: 'Schreiben Sie Ihre Wünsche zur Sitzung',
+    successPayment: 'Erfolgreiche Zahlung',
+    errorPayment: 'Zahlungsfehler',
     errors: {
         invalidEmail: 'Die E-Mail-Adresse ist ungültig',
         emptyEmail: 'Bitte geben Sie Ihre E-Mail ein',

src/i18nKeys/en.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Add new',
         commentPlaceholder: 'Your comment',
         clientComments: 'Client Comments',
-        coachComments: 'Coach Comments'
+        coachComments: 'Expert Comments'
     },
     room: {
         upcoming: 'Upcoming Rooms',
@@ -109,10 +109,10 @@ export default {
     seminars: 'Seminars',
     courses: 'Courses',
     mba: 'MBA Information',
-    aboutCoach: 'About Coach',
+    aboutCoach: 'About Expert',
     skillsInfo: 'Skills Info',
     education: 'Education',
-    coaching: 'Coaching',
+    coaching: 'Expert profile',
     experiences: 'Practical experience',
     payInfo: 'Payment Info',
     sessionDuration: 'Session duration',
@@ -146,6 +146,10 @@ export default {
     saturday: 'Sa',
     addNew: 'Add New',
     mExperiences: 'Managerial Experience',
+    pay: 'Pay',
+    sessionWishes: 'Write your wishes about the session',
+    successPayment: 'Successful Payment',
+    errorPayment: 'Payment Error',
     errors: {
         invalidEmail: 'The email address is not valid',
         emptyEmail: 'Please enter your E-mail',

src/i18nKeys/es.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Añadir nuevo comentario',
         commentPlaceholder: 'Tu comentario',
         clientComments: 'Comentarios del cliente',
-        coachComments: 'Comentarios del entrenador'
+        coachComments: 'Comentarios del experto'
     },
     room: {
         upcoming: 'Próximas salas',
@@ -110,9 +110,9 @@ export default {
     seminars: 'Seminarios',
     courses: 'Cursos',
     mba: 'Información sobre máster en ADE (MBA)',
-    aboutCoach: 'Sobre el coach',
+    aboutCoach: 'Acerca del experto',
     education: 'Educación',
-    coaching: 'Coaching',
+    coaching: 'Perfil del experto',
     experiences: 'Experiencia práctica',
     payInfo: 'Información de pago',
     sessionDuration: 'Duración de la sesión',
@@ -146,6 +146,10 @@ export default {
     saturday: 'S',
     addNew: 'Añadir nuevo',
     mExperiences: 'Experiencia de dirección',
+    pay: 'Pago',
+    sessionWishes: 'Escribe tus deseos sobre la sesión',
+    successPayment: 'Pago Exitoso',
+    errorPayment: 'Error de Pago',
     errors: {
         invalidEmail: 'La dirección de correo electrónico no es válida',
         emptyEmail: 'Introduce tu correo electrónico',

src/i18nKeys/fr.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Ajouter un nouveau commentaire',
         commentPlaceholder: 'Votre commentaire',
         clientComments: 'Commentaires du client',
-        coachComments: 'Commentaires du coach'
+        coachComments: 'Commentaires de l\'expert'
     },
     room: {
         upcoming: 'Salles futures',
@@ -110,9 +110,9 @@ export default {
     seminars: 'Séminaires',
     courses: 'Cours',
     mba: 'Infos Maîtrise en gestion',
-    aboutCoach: 'À propos du coach',
+    aboutCoach: 'À propos de l\'expert',
     education: 'Éducation',
-    coaching: 'Coaching',
+    coaching: 'Profil de l\'expert',
     experiences: 'Expérience pratique',
     payInfo: 'Infos sur le paiement',
     sessionDuration: 'Durée de la session',
@@ -146,6 +146,10 @@ export default {
     saturday: 'Sa',
     addNew: 'Ajouter un nouveau',
     mExperiences: 'Expérience en gestion',
+    pay: 'Paiement',
+    sessionWishes: 'Écrivez vos souhaits concernant la session',
+    successPayment: 'Paiement Réussi',
+    errorPayment: 'Erreur de Paiement',
     errors: {
         invalidEmail: 'L\'adresse e-mail n\'est pas valide',
         emptyEmail: 'Veuillez saisir votre e-mail',

src/i18nKeys/it.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Aggiungi nuovo commento',
         commentPlaceholder: 'Il tuo commento',
         clientComments: 'Commenti del cliente',
-        coachComments: 'Commenti dell\'allenatore'
+        coachComments: 'Commenti dell\'esperto'
     },
     room: {
         upcoming: 'Prossime sale',
@@ -110,9 +110,9 @@ export default {
     seminars: 'Seminari',
     courses: 'Corsi',
     mba: 'Info sull\'MBA',
-    aboutCoach: 'Informazioni sul coach',
+    aboutCoach: 'Informazioni sull\'esperto',
     education: 'Istruzione',
-    coaching: 'Coaching',
+    coaching: 'Profilo dell\'esperto',
     experiences: 'Esperienza pratica',
     payInfo: 'Info pagamento',
     sessionDuration: 'Durata della sessione',
@@ -146,6 +146,10 @@ export default {
     saturday: 'Sa',
     addNew: 'Aggiungi nuovo',
     mExperiences: 'Esperienza manageriale',
+    pay: 'Pagamento',
+    sessionWishes: 'Scrivi i tuoi desideri riguardo alla sessione',
+    successPayment: 'Pagamento Riuscito',
+    errorPayment: 'Errore di Pagamento',
     errors: {
         invalidEmail: 'L\'indirizzo e-mail non è valido',
         emptyEmail: 'Inserisci l\'e-mail',

src/i18nKeys/ru.ts

@@ -42,7 +42,7 @@ export default {
         addComment: 'Добавить новый',
         commentPlaceholder: 'Ваш комментарий',
         clientComments: 'Комментарии клиента',
-        coachComments: 'Комментарии коуча'
+        coachComments: 'Комментарии эксперта'
     },
     room: {
         upcoming: 'Предстоящие комнаты',
@@ -111,9 +111,9 @@ export default {
     courses: 'Курсы',
     mba: 'Информация о MBA',
     experiences: 'Практический опыт',
-    aboutCoach: 'О коуче',
+    aboutCoach: 'Информация об эксперте',
     education: 'Образование',
-    coaching: 'Коучинг',
+    coaching: 'Профиль эксперта',
     payInfo: 'Платежная информация',
     sessionDuration: 'Продолжительность сессии',
     experienceHours: 'Общее количество часов практического опыта',
@@ -146,6 +146,10 @@ export default {
     saturday: 'Сб',
     addNew: 'Добавить',
     mExperiences: 'Управленческий опыт',
+    pay: 'Оплата',
+    sessionWishes: 'Напишите свои пожелания по поводу сессии',
+    successPayment: 'Успешная оплата',
+    errorPayment: 'Ошибка оплаты',
     errors: {
         invalidEmail: 'Адрес электронной почты недействителен',
         emptyEmail: 'Пожалуйста, введите ваш E-mail',

src/lib/stripe.ts

@@ -0,0 +1,11 @@
+import "server-only";
+
+import Stripe from "stripe";
+
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
+    apiVersion: "2024-06-20",
+    appInfo: {
+        name: "bbuddy-ui",
+        url: "",
+    },
+});

src/styles/view/_calendar.scss

@@ -0,0 +1,62 @@
+.b-calendar {
+  padding: 44px 40px !important;
+
+  &-month {
+    text-transform: capitalize;
+  }
+
+  &-header {
+    justify-content: center;
+    border-bottom: none !important;
+  }
+
+  &-cell {
+    span {
+      color: #66A5AD;
+    }
+
+    &__weekend {
+      span {
+        color: #FFBD00;
+      }
+    }
+  }
+
+  .ant-picker-body {
+    margin-bottom: -42px !important;
+  }
+
+  .ant-picker-panel {
+    border-top: none !important;
+    margin-top: 12px;
+  }
+
+  .ant-picker-cell {
+    opacity: 0 !important;
+
+    &-disabled {
+        &::before {
+          background: transparent !important;
+        }
+    
+        span {
+          color: rgba(0, 0, 0, 0.25) !important;
+        }
+      }
+
+    &.ant-picker-cell-in-view {
+      opacity: 1 !important;
+      background: transparent !important;
+    }
+    
+  }
+
+  th, td {
+    vertical-align: middle !important;
+    height: 40px !important;
+  }
+
+  th {
+    color: #66A5AD !important;
+  }
+}

src/styles/view/_radio.scss

@@ -0,0 +1,3 @@
+.ant-form-item-has-error .ant-radio-inner {
+  border-color: #ff4d4f !important;
+}

src/styles/view/_schedule.scss

@@ -0,0 +1,31 @@
+.b-schedule {
+  &-time {
+    padding: 44px 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .b-button-link-big {
+      font-size: 24px;
+      line-height: 32px;
+      color: #6FB98F !important;
+      font-family: var(--font-comfortaa);
+      padding: 0 !important;
+      border: none !important;
+      text-transform: capitalize;
+    }
+  }
+
+  &-radio-list {
+    .ant-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+
+  &-payment {
+    padding: 44px 40px;
+    min-height: 300px;
+  }
+}

src/styles/view/_select.scss

@@ -3,7 +3,7 @@
   height: 54px !important;
 
   .ant-select-selector {
-    background-color: #F8F8F7 !important;
+    background-color: transparent !important;
     border-color: #F8F8F7 !important;
     border-radius: 8px !important;
     padding: 22px 16px 8px !important;
@@ -17,6 +17,12 @@
     }
   }
 
+  &.ant-select-status-error {
+    .ant-select-selector {
+      border-color: #ff4d4f !important;
+    }
+  }
+
   .ant-select-selection-overflow-item {
     margin-right: 4px;
   }
@@ -35,6 +41,9 @@
   &-wrap {
     position: relative;
     width: 100%;
+    background-color: #F8F8F7;
+    border-radius: 8px;
+
     &.b-multiselect__active .b-multiselect-label {
       font-size: 12px;
       font-weight: 300;
@@ -49,7 +58,7 @@
     font-weight: 400;
     line-height: 24px;
     color: #000;
-    opacity: .3;
+    opacity: .4;
     position: absolute;
     left: 16px;
     top: 15px;
@@ -70,11 +79,12 @@
   height: 54px !important;
 
   .ant-select-selector {
-    background-color: #F8F8F7 !important;
+    background-color: transparent !important;
     border-color: #F8F8F7 !important;
     border-radius: 8px !important;
     padding: 22px 16px 8px !important;
     box-shadow: none !important;
+    z-index: 1;
 
     .ant-select-selection-item {
       font-size: 15px !important;
@@ -84,6 +94,12 @@
     }
   }
 
+  &.ant-select-status-error {
+    .ant-select-selector {
+      border-color: #ff4d4f !important;
+    }
+  }
+
   .ant-select-arrow {
     color: #2c7873 !important;
   }
@@ -98,6 +114,8 @@
   &-wrap {
     position: relative;
     width: 100%;
+    background-color: #F8F8F7;
+    border-radius: 8px;
 
     &.b-select__active .b-select-label {
       font-size: 12px;
@@ -113,7 +131,7 @@
     font-weight: 400;
     line-height: 24px;
     color: #000;
-    opacity: .3;
+    opacity: .4;
     position: absolute;
     left: 16px;
     top: 15px;

src/styles/view/style.scss

@@ -9,3 +9,6 @@
 @import "_practice.scss";
 @import "_collapse.scss";
 @import "_timepicker.scss";
+@import "_calendar.scss";
+@import "_schedule.scss";
+@import "_radio.scss";

src/types/experts.ts

@@ -70,3 +70,24 @@ export type ExpertDetails = {
     associations?: Association[];
     associationLevels?: AssociationLevel[];
 };
+
+export type Slot = {
+    startTime: string;
+    endTime: string;
+}
+
+export type ExpertScheduler = {
+    tags: Tag[],
+    availableSlots: Slot[];
+}
+
+export type ExpertSchedulerSession = {
+    sessionId: string
+};
+
+export type SignupSessionData = {
+    coachId: number,
+    tagId?: number,
+    startAtUtc?: string,
+    clientComment?: string
+};

src/types/payment.ts

@@ -0,0 +1,3 @@
+export type Payment = {
+    amount: number;
+}

src/utils/get-stripe.ts

@@ -0,0 +1,12 @@
+import { Stripe, loadStripe } from '@stripe/stripe-js';
+
+let stripePromise: Promise<Stripe | null>;
+
+export default function getStripe(): Promise<Stripe | null> {
+    if (!stripePromise)
+        stripePromise = loadStripe(
+            process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string,
+        );
+
+    return stripePromise;
+}

src/utils/stripe-helpers.ts

@@ -0,0 +1,30 @@
+export function formatAmountForDisplay(
+    amount: number,
+    currency: string,
+): string {
+    let numberFormat = new Intl.NumberFormat(["en-US"], {
+        style: "currency",
+        currency: currency,
+        currencyDisplay: "symbol",
+    });
+    return numberFormat.format(amount);
+}
+
+export function formatAmountForStripe(
+    amount: number,
+    currency: string,
+): number {
+    let numberFormat = new Intl.NumberFormat(["en-US"], {
+        style: "currency",
+        currency: currency,
+        currencyDisplay: "symbol",
+    });
+    const parts = numberFormat.formatToParts(amount);
+    let zeroDecimalCurrency: boolean = true;
+    for (let part of parts) {
+        if (part.type === "decimal") {
+            zeroDecimalCurrency = false;
+        }
+    }
+    return zeroDecimalCurrency ? amount : Math.round(amount * 100);
+}