From b31d2cf7000a0b964572a8b4478158ea88f53cc6 Mon Sep 17 00:00:00 2001 From: SD Date: Sat, 26 Oct 2024 00:38:30 +0400 Subject: [PATCH] feat: add styles for payment --- package-lock.json | 63 ++++++ package.json | 1 + src/actions/sessions.ts | 8 + src/actions/stripe.ts | 15 +- src/app/[locale]/(main)/@news/page.tsx | 10 +- .../account/(account)/expert-profile/page.tsx | 4 +- .../(simple)/sessions/[...slug]/page.tsx | 2 +- src/app/[locale]/bb-expert/page.tsx | 2 +- src/app/[locale]/blog/page.tsx | 1 - src/app/[locale]/payment/@payment/page.tsx | 20 -- src/app/[locale]/payment/page.tsx | 28 --- src/app/[locale]/payment/result/layout.tsx | 19 -- src/app/[locale]/payment/result/page.tsx | 27 --- src/components/Experts/ExpertDetails.tsx | 43 +++- src/components/Modals/ScheduleModal.tsx | 103 +++++---- src/components/Modals/ScheduleModalResult.tsx | 73 +++++++ .../Page/Header/HeaderAuthLinks.tsx | 42 +++- src/components/stripe/ElementsForm.tsx | 195 ------------------ src/components/stripe/PrintObject.tsx | 10 - src/components/stripe/StripeElementsForm.tsx | 159 ++++++++++++++ src/components/stripe/StripeTestCards.tsx | 19 -- src/constants/common.ts | 1 + src/hooks/useLocalStorage.ts | 2 +- src/i18nKeys/de.ts | 6 +- src/i18nKeys/en.ts | 2 + src/i18nKeys/es.ts | 6 +- src/i18nKeys/fr.ts | 6 +- src/i18nKeys/it.ts | 6 +- src/i18nKeys/ru.ts | 6 +- src/styles/view/_schedule.scss | 5 + src/styles/view/_select.scss | 14 +- src/utils/get-stripe.ts | 5 +- 32 files changed, 491 insertions(+), 412 deletions(-) delete mode 100644 src/app/[locale]/payment/@payment/page.tsx delete mode 100644 src/app/[locale]/payment/page.tsx delete mode 100644 src/app/[locale]/payment/result/layout.tsx delete mode 100644 src/app/[locale]/payment/result/page.tsx create mode 100644 src/components/Modals/ScheduleModalResult.tsx delete mode 100644 src/components/stripe/ElementsForm.tsx delete mode 100644 src/components/stripe/PrintObject.tsx create mode 100644 src/components/stripe/StripeElementsForm.tsx delete mode 100644 src/components/stripe/StripeTestCards.tsx diff --git a/package-lock.json b/package-lock.json index a9ddb6f..725febc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "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" @@ -5718,6 +5719,68 @@ "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-stripe-js": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/react-stripe-js/-/react-stripe-js-1.1.5.tgz", + "integrity": "sha512-4lIucgf/FZj6Uxvf/TH+QQa/Qi3FXigwN/QY6H7naPyoEfw9LOuTzdgPAmm7aeSXj8nZJXVoigiGzzFZchXjew==", + "license": "MIT", + "dependencies": { + "@stripe/react-stripe-js": "1.7.2", + "@stripe/stripe-js": "1.29.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/react-stripe-js/node_modules/@stripe/react-stripe-js": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.7.2.tgz", + "integrity": "sha512-IAVg2nPUPoSwI//XDRCO7D8mGeK4+N3Xg63fYZHmlfEWAuFVcuaqJKTT67uzIdKYZhHZ/NMdZw/ttz+GOjP/rQ==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@stripe/stripe-js": "^1.26.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/react-stripe-js/node_modules/@stripe/stripe-js": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.29.0.tgz", + "integrity": "sha512-OsUxk0VLlum8E2d6onlEdKuQcvLMs7qTrOXCnl/BGV3fAm65qr6h3e1IZ5AX4lgUlPRrzRcddSOA5DvkKKYLvg==", + "license": "MIT" + }, + "node_modules/react-stripe-js/node_modules/react-dom": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "license": "MIT", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, + "node_modules/react-stripe-js/node_modules/scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "node_modules/readable-stream": { "version": "1.0.34", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", diff --git a/package.json b/package.json index ddc0c3e..8339375 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "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" diff --git a/src/actions/sessions.ts b/src/actions/sessions.ts index 3ae9872..4bdc084 100644 --- a/src/actions/sessions.ts +++ b/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 => apiRequest({ + url: '/home/session_pay_confirm', + method: 'post', + data: { id: sessionId }, + locale, + token +}); diff --git a/src/actions/stripe.ts b/src/actions/stripe.ts index c0d2254..989796d 100644 --- a/src/actions/stripe.ts +++ b/src/actions/stripe.ts @@ -1,6 +1,6 @@ "use server"; -import {PaymentIntentCreateParams, Stripe} from "stripe"; +import { Stripe } from "stripe"; import { headers } from "next/headers"; @@ -52,20 +52,19 @@ export async function createCheckoutSession( } export async function createPaymentIntent( - data: any, + data: { amount: number, sessionId?: string }, ): Promise<{ client_secret: string }> { const params = { amount: formatAmountForStripe( - Number(data['amount'] as string), + data.amount, 'eur', ), automatic_payment_methods: { enabled: true }, currency: 'eur', - } as PaymentIntentCreateParams; + } as Stripe.PaymentIntentCreateParams; - // additional params - if (data.sessionId){ + if (data?.sessionId){ params.metadata = { sessionId : data.sessionId } @@ -75,4 +74,6 @@ export async function createPaymentIntent( await stripe.paymentIntents.create(params); return { client_secret: paymentIntent.client_secret as string }; -} \ No newline at end of file +} + +export const getStripePaymentStatus = async (payment_intent: string): Promise => await stripe.paymentIntents.retrieve(payment_intent); \ No newline at end of file diff --git a/src/app/[locale]/(main)/@news/page.tsx b/src/app/[locale]/(main)/@news/page.tsx index 2dadcf5..014a183 100644 --- a/src/app/[locale]/(main)/@news/page.tsx +++ b/src/app/[locale]/(main)/@news/page.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { useTranslations } from 'next-intl'; -import {getTranslations, unstable_setRequestLocale} from 'next-intl/server'; +// 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 Link from "next/link"; +import { fetchBlogPosts } from '../../../../lib/contentful/blogPosts'; export default async function News({params: {locale}}: { params: { locale: string } }) { unstable_setRequestLocale(locale); const t = await getTranslations('Main'); - const {data, total} = await fetchBlogPosts({preview: false, sticky: true}) + const { data, total } = await fetchBlogPosts({preview: false, sticky: true}) return (
diff --git a/src/app/[locale]/account/(account)/expert-profile/page.tsx b/src/app/[locale]/account/(account)/expert-profile/page.tsx index 7cda5f2..1a46bcf 100644 --- a/src/app/[locale]/account/(account)/expert-profile/page.tsx +++ b/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 ? ( - ); + ) : null; }; diff --git a/src/app/[locale]/account/(simple)/sessions/[...slug]/page.tsx b/src/app/[locale]/account/(simple)/sessions/[...slug]/page.tsx index 8a9ed64..59339bf 100644 --- a/src/app/[locale]/account/(simple)/sessions/[...slug]/page.tsx +++ b/src/app/[locale]/account/(simple)/sessions/[...slug]/page.tsx @@ -26,7 +26,7 @@ export default function SessionDetailItem({ params: { locale, slug } }: { params Loading...

}> diff --git a/src/app/[locale]/bb-expert/page.tsx b/src/app/[locale]/bb-expert/page.tsx index 40c2ede..3cdf5af 100644 --- a/src/app/[locale]/bb-expert/page.tsx +++ b/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', diff --git a/src/app/[locale]/blog/page.tsx b/src/app/[locale]/blog/page.tsx index f23d5f1..7569741 100644 --- a/src/app/[locale]/blog/page.tsx +++ b/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 } diff --git a/src/app/[locale]/payment/@payment/page.tsx b/src/app/[locale]/payment/@payment/page.tsx deleted file mode 100644 index c93d91d..0000000 --- a/src/app/[locale]/payment/@payment/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { Metadata } from "next"; - -import {ElementsForm} from "../../../../components/stripe/ElementsForm"; - -export const metadata: Metadata = { - title: "Payment", -}; - -export default function PaymentElementPage({ - searchParams, - }: { - searchParams?: { payment_intent_client_secret?: string }; -}) { - return ( -
-

Pay

- -
- ); -} \ No newline at end of file diff --git a/src/app/[locale]/payment/page.tsx b/src/app/[locale]/payment/page.tsx deleted file mode 100644 index 55064d7..0000000 --- a/src/app/[locale]/payment/page.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import type { Metadata } from 'next'; -import { unstable_setRequestLocale } from 'next-intl/server'; -import { useTranslations } from 'next-intl'; -import { GeneralTopSection } from '../../../components/Page'; -import PaymentElementPage from "./@payment/page"; - -export const metadata: Metadata = { - title: 'Bbuddy - Take the lead with BB', - description: 'Bbuddy desc Take the lead with BB' -}; - -export default function BbClientPage({ params: { locale } }: { params: { locale: string } }) { - unstable_setRequestLocale(locale); - const t = useTranslations('BbClient'); - - return ( - <> - -
- -
- - ); -}; diff --git a/src/app/[locale]/payment/result/layout.tsx b/src/app/[locale]/payment/result/layout.tsx deleted file mode 100644 index bea1996..0000000 --- a/src/app/[locale]/payment/result/layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata } from "next"; -import React from "react"; - -export const metadata: Metadata = { - title: "Payment Intent Result", -}; - -export default function ResultLayout({ - children, - }: { - children: React.ReactNode; -}) { - return ( -
-

Payment Intent Result

- {children} -
- ); -} \ No newline at end of file diff --git a/src/app/[locale]/payment/result/page.tsx b/src/app/[locale]/payment/result/page.tsx deleted file mode 100644 index dad26cd..0000000 --- a/src/app/[locale]/payment/result/page.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { Stripe } from "stripe"; - -import { stripe} from "../../../../lib/stripe"; -import PrintObject from "../../../../components/stripe/PrintObject"; - -export default async function ResultPage({ - searchParams, - }: { - searchParams: { payment_intent: string }; -}) { - if (!searchParams.payment_intent) - throw new Error("Please provide a valid payment_intent (`pi_...`)"); - - const paymentIntent: Stripe.PaymentIntent = - await stripe.paymentIntents.retrieve(searchParams.payment_intent); - - // Тут под идее тыкнуться в бек на тему того - прошла ли оплата. в зависимости от этого показать что все ок или нет - // также стоит расшить ссылкой КУДА переходить после того как показали что все ок. - - return ( - <> -

Status: {paymentIntent.status}

-

Payment Intent response:

- - - ); -} \ No newline at end of file diff --git a/src/components/Experts/ExpertDetails.tsx b/src/components/Experts/ExpertDetails.tsx index 842d538..4b27ce3 100644 --- a/src/components/Experts/ExpertDetails.tsx +++ b/src/components/Experts/ExpertDetails.tsx @@ -1,21 +1,20 @@ 'use client'; -import React, { FC, useState } from 'react'; +import React, { FC, useState, useEffect } from 'react'; import Image from 'next/image'; import { Tag, Image as AntdImage, Space, Button } from 'antd'; import { ZoomInOutlined, ZoomOutOutlined, StarFilled } from '@ant-design/icons'; -import { ExpertScheduler } from '../../types/experts'; +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 {getSchedulerByExpertId} from "../../actions/experts"; -import {useLocalStorage} from "../../hooks/useLocalStorage"; -import {AUTH_TOKEN_KEY} from "../../constants/common"; -import dayjs from "dayjs"; -import {ScheduleModal} from "../Modals/ScheduleModal"; +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; @@ -36,9 +35,35 @@ export const ExpertCard: FC = ({ expert, locale, expertId }) 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) + setShowSchedulerModal(true); }; return ( @@ -112,7 +137,9 @@ export const ExpertCard: FC = ({ expert, locale, expertId }) expertId={expertId as string} locale={locale as string} sessionCost={sessionCost} + checkSession={checkSession} /> + ); }; diff --git a/src/components/Modals/ScheduleModal.tsx b/src/components/Modals/ScheduleModal.tsx index b9d31bd..0ab0947 100644 --- a/src/components/Modals/ScheduleModal.tsx +++ b/src/components/Modals/ScheduleModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { FC, useEffect, useState } from 'react'; +import React, {FC, useEffect, useState} from 'react'; import classNames from 'classnames'; import { Modal, Menu, Calendar, Radio, Button, Input, message } from 'antd'; import type { CalendarProps, RadioChangeEvent, MenuProps } from 'antd'; @@ -12,7 +12,6 @@ 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 { RegisterContent, ResetContent, FinishContent, EnterContent } from './authModalContent'; import dayjs, { Dayjs } from 'dayjs'; import 'dayjs/locale/ru'; import 'dayjs/locale/en'; @@ -20,14 +19,15 @@ import 'dayjs/locale/de'; import 'dayjs/locale/it'; import 'dayjs/locale/fr'; import 'dayjs/locale/es'; -import { ExpertScheduler, SignupSessionData } from "../../types/experts"; -import { Tag } from "../../types/tags"; -import { useLocalStorage } from "../../hooks/useLocalStorage"; -import { AUTH_TOKEN_KEY } from "../../constants/common"; -import { getSchedulerByExpertId, getSchedulerSession } from "../../actions/experts"; -import { ElementsForm } from "../stripe/ElementsForm"; +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; @@ -37,6 +37,7 @@ type ScheduleModalProps = { sessionCost: number; expertId: string; locale: string; + checkSession: (data?: SignupSessionData) => void; }; type MenuItem = Required['items'][number]; @@ -79,20 +80,44 @@ export const ScheduleModal: FC = ({ sessionCost, locale, expertId, + checkSession, }) => { const [selectDate, setSelectDate] = useState(dayjs()); const [dates, setDates] = useState(); const [tags, setTags] = useState(); - const [sessionData, setSesssionData] = useState({ coachId: +expertId }); - const [sessionId, setSessionId] = useState(-1); + const [sessionData, setSessionData] = useState({ coachId: +expertId }); const [rawScheduler, setRawScheduler] = useState(null); - const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, ''); const [isPayLoading, setIsPayLoading] = useState(false); + const [sessionId, setSessionId] = useState(''); 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) { + if (open && mode !== 'pay') { + setSessionData({ coachId: +expertId }); getSchedulerByExpertId(expertId as string, locale as string) .then((data) => { setRawScheduler(data); @@ -103,6 +128,12 @@ export const ScheduleModal: FC = ({ } }, [open]); + useEffect(() => { + if (open && mode === 'pay') { + signupSession(); + } + }, [mode]); + useEffect(() => { const map = {} as any rawScheduler?.availableSlots.forEach((el) => { @@ -127,34 +158,9 @@ export const ScheduleModal: FC = ({ const disabledDate = (currentDate: Dayjs) => !dates || !dates[currentDate.format('YYYY-MM-DD')]; - const onChangeTimeSlot = (e: RadioChangeEvent) => setSesssionData({ ...sessionData, startAtUtc: e.target.value.startTime }); + const onChangeTimeSlot = (e: RadioChangeEvent) => setSessionData({ ...sessionData, startAtUtc: e.target.value.startTime }); - const onChangeTag = (tagId: number) => setSesssionData({ ...sessionData, tagId }); - - const singupSession = () => { - console.log(sessionData); - if (sessionData?.startAtUtc && sessionData?.tagId) { - if (jwt) { - setIsPayLoading(true); - getSchedulerSession(sessionData, locale, jwt) - .then((session) => { - console.log(session); - // тут должна быть проверка все ли с регистрацией сессии - setSessionId(+session?.sessionId); - updateMode('pay'); - }) - .catch((err) => { - console.log(err); - message.error('Не удалось провести оплату') - }) - .finally(() => { - setIsPayLoading(false); - }) - } else { - - } - } - } + const onChangeTag = (tagId: number) => setSessionData({ ...sessionData, tagId }); const cellRender: CalendarProps['fullCellRender'] = (date, info) => { const isWeekend = date.day() === 6 || date.day() === 0; @@ -243,7 +249,7 @@ export const ScheduleModal: FC = ({
- {dates[selectDate.format('YYYY-MM-DD')].map((el) => { + {dates[selectDate.format('YYYY-MM-DD')].map((el: any) => { return ({dayjs(el.startTime).format('HH:mm')} - {dayjs(el.endTime).format('HH:mm')}) })} @@ -251,23 +257,30 @@ export const ScheduleModal: FC = ({
setSesssionData({ ...sessionData, clientComment: e.target.value })} + onChange={(e) => setSessionData({ ...sessionData, clientComment: e.target.value })} />
)} {mode === 'pay' && ( - +
+ + + +
)} ); diff --git a/src/components/Modals/ScheduleModalResult.tsx b/src/components/Modals/ScheduleModalResult.tsx new file mode 100644 index 0000000..ff9f5e6 --- /dev/null +++ b/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(); + const [session, setSession] = useState(); + const [error, setError] = useState(); + 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 ( + } + > +
+ +
+ + ); +} \ No newline at end of file diff --git a/src/components/Page/Header/HeaderAuthLinks.tsx b/src/components/Page/Header/HeaderAuthLinks.tsx index 8d0fc7a..269ce98 100644 --- a/src/components/Page/Header/HeaderAuthLinks.tsx +++ b/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(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') => { - setMode(mode); - setIsOpenModal(true); + useEffect(() => { + if (token && isPayPath) { + 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 ({ @@ -61,7 +93,7 @@ function HeaderAuthLinks ({ diff --git a/src/components/stripe/ElementsForm.tsx b/src/components/stripe/ElementsForm.tsx deleted file mode 100644 index 0e3da2f..0000000 --- a/src/components/stripe/ElementsForm.tsx +++ /dev/null @@ -1,195 +0,0 @@ -"use client"; - -import type { StripeError } from "@stripe/stripe-js"; - -import * as React from "react"; -import { - useStripe, - useElements, - PaymentElement, - Elements, -} from "@stripe/react-stripe-js"; - -import StripeTestCards from "./StripeTestCards"; - -import getStripe from "../../utils/get-stripe"; -import { createPaymentIntent} from "../../actions/stripe"; -import {Form} from "antd"; -import {Payment} from "../../types/payment"; -import {CustomInput} from "../view/CustomInput"; -import {i18nText} from "../../i18nKeys"; -import {FC, useEffect} from "react"; -import {getPersonalData} from "../../actions/profile"; - -type PaymentFormProps = { - amount: number, - sessionId?: string -} - - -export const CheckoutForm: FC = ({amount, sessionId}) => { - const [input, setInput] = React.useState<{ - paySumm: number; - cardholderName: string; - }>({ - paySumm: 1, - cardholderName: "", - }); - const [form, ] = Form.useForm(); - const formAmount = Form.useWatch('amount', form); - const [paymentType, setPaymentType] = React.useState(""); - const [payment, setPayment] = React.useState<{ - status: "initial" | "processing" | "error"; - }>({ status: "initial" }); - const [errorMessage, setErrorMessage] = React.useState(""); - - const stripe = useStripe(); - const elements = useElements(); - - const PaymentStatus = ({ status }: { status: string }) => { - switch (status) { - case "processing": - case "requires_payment_method": - case "requires_confirmation": - return

Processing...

; - - case "requires_action": - return

Authenticating...

; - - case "succeeded": - return

Payment Succeeded 🥳

; - - case "error": - return ( - <> -

Error 😭

-

{errorMessage}

- - ); - - default: - return null; - } - }; - - useEffect(() => { - elements?.update({ amount: formAmount * 100 }); - }, [formAmount]); - - const handleInputChange: React.ChangeEventHandler = (e) => { - setInput({ - ...input, - [e.currentTarget.name]: e.currentTarget.value, - }); - }; - - const onSubmit = async (data) => { - try { - if (!elements || !stripe) return; - - setPayment({ status: "processing" }); - - const { error: submitError } = await elements.submit(); - - if (submitError) { - setPayment({ status: "error" }); - setErrorMessage(submitError.message ?? "An unknown error occurred"); - - return; - } - - // Create a PaymentIntent with the specified amount. - console.log('DATA', data); - const { client_secret: clientSecret } = await createPaymentIntent( - {amount: amount}, - ); - - // Use your card Element with other Stripe.js APIs - const { error: confirmError } = await stripe!.confirmPayment({ - elements, - clientSecret, - confirmParams: { - return_url: `${window.location.origin}/ru/payment/result`, - payment_method_data: { - allow_redisplay: 'limited', - billing_details: { - name: input.cardholderName, - }, - }, - }, - }); - - if (confirmError) { - setPayment({ status: "error" }); - setErrorMessage(confirmError.message ?? "An unknown error occurred"); - } - } catch (err) { - const { message } = err as StripeError; - - setPayment({ status: "error" }); - setErrorMessage(message ?? "An unknown error occurred"); - } - }; - - - - return ( - <> -
-
- - Your payment details: - {paymentType === "card" ? ( - - ) : null} -
- { - setPaymentType(e.value.type); - }} - /> -
-
- -
- - - ); -} - -export const ElementsForm: FC = ({amount, sessionId}) => { - return ( - - - - ) -} \ No newline at end of file diff --git a/src/components/stripe/PrintObject.tsx b/src/components/stripe/PrintObject.tsx deleted file mode 100644 index b7cd424..0000000 --- a/src/components/stripe/PrintObject.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { Stripe } from "stripe"; - -export default function PrintObject({ - content, - }: { - content: Stripe.PaymentIntent | Stripe.Checkout.Session; -}): JSX.Element { - const formattedContent: string = JSON.stringify(content, null, 2); - return 
{formattedContent}
; -} \ No newline at end of file diff --git a/src/components/stripe/StripeElementsForm.tsx b/src/components/stripe/StripeElementsForm.tsx new file mode 100644 index 0000000..fc51dc6 --- /dev/null +++ b/src/components/stripe/StripeElementsForm.tsx @@ -0,0 +1,159 @@ +'use client'; + +import { 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 } from 'antd'; +import getStripe from '../../utils/get-stripe'; +import { createPaymentIntent} from '../../actions/stripe'; +import { Payment } from '../../types/payment'; +import { i18nText } from '../../i18nKeys'; + +type PaymentFormProps = { + amount: number, + sessionId?: string, + locale: string +} + +export const CheckoutForm: FC = ({ amount, sessionId, locale }) => { + const [form] = Form.useForm(); + const formAmount = Form.useWatch('amount', form); + const [paymentType, setPaymentType] = useState(''); + const [payment, setPayment] = useState<{ + status: "initial" | "processing" | "error"; + }>({ status: "initial" }); + const [errorMessage, setErrorMessage] = useState(''); + const stripe = useStripe(); + const elements = useElements(); + + const PaymentStatus = ({ status }: { status: string }) => { + switch (status) { + case "processing": + case "requires_payment_method": + case "requires_confirmation": + return

Processing...

; + + case "requires_action": + return

Authenticating...

; + + case "succeeded": + return

Payment Succeeded

; + + case "error": + console.log('errorMessage', errorMessage); + return null; + + default: + return null; + } + }; + + useEffect(() => { + elements?.update({ amount: formAmount * 100 }); + }, [formAmount]); + + const onSubmit = async () => { + try { + if (!elements || !stripe) return; + + setPayment({ status: "processing" }); + + const { error: submitError } = await elements.submit(); + + if (submitError) { + setPayment({ status: "error" }); + setErrorMessage(submitError.message ?? "An unknown error occurred"); + + 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) { + setPayment({ status: "error" }); + setErrorMessage(confirmError.message ?? "An unknown error occurred"); + } + } catch (err) { + const { message } = err as StripeError; + + setPayment({ status: "error" }); + setErrorMessage(message ?? "An unknown error occurred"); + } + }; + + return ( +
+
+ { + setPaymentType(e.value.type); + }} + /> +
+
+ +
+ +
+ ); +} + +export const StripeElementsForm: FC = ({ amount, sessionId, locale }) => { + return ( + + + + ); +}; diff --git a/src/components/stripe/StripeTestCards.tsx b/src/components/stripe/StripeTestCards.tsx deleted file mode 100644 index cf40281..0000000 --- a/src/components/stripe/StripeTestCards.tsx +++ /dev/null @@ -1,19 +0,0 @@ -export default function StripeTestCards(): JSX.Element { - return ( -
- Use any of the{" "} - - Stripe test cards - {" "} - for demo, e.g.{" "} -
- 4242424242424242 -
- . -
- ); -} \ No newline at end of file diff --git a/src/constants/common.ts b/src/constants/common.ts index c5abf3b..ec7be9b 100644 --- a/src/constants/common.ts +++ b/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; diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index 9221a91..d746b67 100644 --- a/src/hooks/useLocalStorage.ts +++ b/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; diff --git a/src/i18nKeys/de.ts b/src/i18nKeys/de.ts index cc1bc64..0207b55 100644 --- a/src/i18nKeys/de.ts +++ b/src/i18nKeys/de.ts @@ -146,8 +146,10 @@ export default { saturday: 'Sa', addNew: 'Neu hinzufügen', mExperiences: 'Führungserfahrung', - pay: 'Pay', - sessionWishes: 'Write your wishes about the session', + pay: 'Zahlung', + sessionWishes: 'Schreiben Sie Ihre Wünsche zur Sitzung', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'Die E-Mail-Adresse ist ungültig', emptyEmail: 'Bitte geben Sie Ihre E-Mail ein', diff --git a/src/i18nKeys/en.ts b/src/i18nKeys/en.ts index c74544a..b4823ea 100644 --- a/src/i18nKeys/en.ts +++ b/src/i18nKeys/en.ts @@ -148,6 +148,8 @@ export default { mExperiences: 'Managerial Experience', pay: 'Pay', sessionWishes: 'Write your wishes about the session', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'The email address is not valid', emptyEmail: 'Please enter your E-mail', diff --git a/src/i18nKeys/es.ts b/src/i18nKeys/es.ts index b81773e..263078d 100644 --- a/src/i18nKeys/es.ts +++ b/src/i18nKeys/es.ts @@ -146,8 +146,10 @@ export default { saturday: 'S', addNew: 'Añadir nuevo', mExperiences: 'Experiencia de dirección', - pay: 'Pay', - sessionWishes: 'Write your wishes about the session', + pay: 'Pago', + sessionWishes: 'Escribe tus deseos sobre la sesión', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'La dirección de correo electrónico no es válida', emptyEmail: 'Introduce tu correo electrónico', diff --git a/src/i18nKeys/fr.ts b/src/i18nKeys/fr.ts index 21bc050..6ef4be4 100644 --- a/src/i18nKeys/fr.ts +++ b/src/i18nKeys/fr.ts @@ -146,8 +146,10 @@ export default { saturday: 'Sa', addNew: 'Ajouter un nouveau', mExperiences: 'Expérience en gestion', - pay: 'Pay', - sessionWishes: 'Write your wishes about the session', + pay: 'Paiement', + sessionWishes: 'Écrivez vos souhaits concernant la session', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'L\'adresse e-mail n\'est pas valide', emptyEmail: 'Veuillez saisir votre e-mail', diff --git a/src/i18nKeys/it.ts b/src/i18nKeys/it.ts index 06215a2..d2b0fdd 100644 --- a/src/i18nKeys/it.ts +++ b/src/i18nKeys/it.ts @@ -146,8 +146,10 @@ export default { saturday: 'Sa', addNew: 'Aggiungi nuovo', mExperiences: 'Esperienza manageriale', - pay: 'Pay', - sessionWishes: 'Write your wishes about the session', + pay: 'Pagamento', + sessionWishes: 'Scrivi i tuoi desideri riguardo alla sessione', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'L\'indirizzo e-mail non è valido', emptyEmail: 'Inserisci l\'e-mail', diff --git a/src/i18nKeys/ru.ts b/src/i18nKeys/ru.ts index 4d7c128..0a795f8 100644 --- a/src/i18nKeys/ru.ts +++ b/src/i18nKeys/ru.ts @@ -146,8 +146,10 @@ export default { saturday: 'Сб', addNew: 'Добавить', mExperiences: 'Управленческий опыт', - pay: 'Pay', - sessionWishes: 'Write your wishes about the session', + pay: 'Оплата', + sessionWishes: 'Напишите свои пожелания по поводу сессии', + successPayment: 'Success', + errorPayment: 'Error', errors: { invalidEmail: 'Адрес электронной почты недействителен', emptyEmail: 'Пожалуйста, введите ваш E-mail', diff --git a/src/styles/view/_schedule.scss b/src/styles/view/_schedule.scss index 5c8f75c..49cab71 100644 --- a/src/styles/view/_schedule.scss +++ b/src/styles/view/_schedule.scss @@ -23,4 +23,9 @@ gap: 12px; } } + + &-payment { + padding: 44px 40px; + min-height: 300px; + } } \ No newline at end of file diff --git a/src/styles/view/_select.scss b/src/styles/view/_select.scss index a68558e..3feaf85 100644 --- a/src/styles/view/_select.scss +++ b/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; @@ -35,6 +35,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 +52,7 @@ font-weight: 400; line-height: 24px; color: #000; - opacity: .3; + opacity: .4; position: absolute; left: 16px; top: 15px; @@ -70,11 +73,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; @@ -98,6 +102,8 @@ &-wrap { position: relative; width: 100%; + background-color: #F8F8F7; + border-radius: 8px; &.b-select__active .b-select-label { font-size: 12px; @@ -113,7 +119,7 @@ font-weight: 400; line-height: 24px; color: #000; - opacity: .3; + opacity: .4; position: absolute; left: 16px; top: 15px; diff --git a/src/utils/get-stripe.ts b/src/utils/get-stripe.ts index 6930d5b..e4cf2dd 100644 --- a/src/utils/get-stripe.ts +++ b/src/utils/get-stripe.ts @@ -1,7 +1,4 @@ -/** - * This is a singleton to ensure we only instantiate Stripe once. - */ -import { Stripe, loadStripe } from "@stripe/stripe-js"; +import { Stripe, loadStripe } from '@stripe/stripe-js'; let stripePromise: Promise;