(null);
+
+ return (
+ <>
+ {!!chats.length && (
+ {
+ setMaxVisibleChats(prev => (prev ? null : chats.length));
+ },
+ }}
+ >
+
+
+ )}
+
+ );
+}
+
+export const CorrespondenceStartedSkeleton = () => {
+ return ;
+};
diff --git a/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.module.scss b/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.module.scss
index 36b7d1b..0a0eeb0 100644
--- a/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.module.scss
+++ b/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.module.scss
@@ -1,4 +1,4 @@
-.option {
+.option.option {
position: relative;
background-color: #ffffff;
box-shadow:
@@ -14,12 +14,12 @@
min-width: 100px;
width: fit-content;
- &.selected {
+ &.selected.selected {
border-color: #3b82f6;
}
}
-.popularBadge {
+.popularBadge.popularBadge {
padding: 4px 12px;
background-color: #3b82f6;
border-radius: 16px;
@@ -29,30 +29,30 @@
transform: translate(-50%, 0);
}
-.checkIcon {
+.checkIcon.checkIcon {
border: 2px solid #b8babf;
border-radius: 50%;
position: relative;
- &.selected {
+ &.selected.selected {
border-color: #3b82f6;
background-color: #3b82f6;
}
}
-.credits {
+.credits.credits {
font-size: 20px;
margin-top: 12px;
}
-.bonus {
+.bonus.bonus {
background-color: #22c55e;
padding: 2px 17px;
border-radius: 999px;
margin-top: 8px;
}
-.price {
+.price.price {
color: #111827;
margin-top: 16px;
}
diff --git a/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.tsx b/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.tsx
index bd53ded..fdc977e 100644
--- a/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.tsx
+++ b/src/components/domains/chat/CreditsModals/RefillOption/RefillOption.tsx
@@ -2,13 +2,13 @@ import { useTranslations } from "next-intl";
import clsx from "clsx";
import { Button, Icon, IconName, Typography } from "@/components/ui";
+import { IRefillModalsProduct } from "@/services/socket/events";
+import { getFormattedPrice } from "@/shared/utils/price";
import styles from "./RefillOption.module.scss";
interface RefillOptionProps {
- credits: number;
- price: string;
- bonus?: number;
+ product: IRefillModalsProduct;
selected?: boolean;
popular?: boolean;
onClick?: () => void;
@@ -16,15 +16,14 @@ interface RefillOptionProps {
}
export default function RefillOption({
- credits,
- price,
- bonus,
+ product,
selected = false,
popular = false,
onClick,
className,
}: RefillOptionProps) {
const t = useTranslations("RefillOptionsModal.refill_option");
+ const { credits, price, bonus, currency } = product;
return (
);
diff --git a/src/components/domains/chat/CreditsModals/RefillOptions/RefillOptions.tsx b/src/components/domains/chat/CreditsModals/RefillOptions/RefillOptions.tsx
index d8424c5..5a3bf77 100644
--- a/src/components/domains/chat/CreditsModals/RefillOptions/RefillOptions.tsx
+++ b/src/components/domains/chat/CreditsModals/RefillOptions/RefillOptions.tsx
@@ -1,47 +1,39 @@
"use client";
-import { useState } from "react";
import clsx from "clsx";
+import { IRefillModalsProduct } from "@/services/socket/events";
+
import RefillOption from "../RefillOption/RefillOption";
import styles from "./RefillOptions.module.scss";
-interface Option {
- credits: number;
- price: string;
- bonus?: number;
- popular?: boolean;
-}
-
interface RefillOptionsProps {
- options: Option[];
- defaultIndex?: number;
- onChange?: (selected: Option, index: number) => void;
+ options: IRefillModalsProduct[];
+ selectedOption?: IRefillModalsProduct;
+ onChange?: (selected: IRefillModalsProduct) => void;
className?: string;
}
export default function RefillOptions({
options,
- defaultIndex = 0,
+ selectedOption,
onChange,
className,
}: RefillOptionsProps) {
- const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
-
- const handleSelect = (index: number) => {
- setSelectedIndex(index);
- onChange?.(options[index], index);
+ const handleSelect = (option: IRefillModalsProduct) => {
+ onChange?.(option);
};
return (
{options.map((option, idx) => (
handleSelect(idx)}
+ key={option.id}
+ product={option}
+ popular={idx === 1}
+ selected={selectedOption?.id === option.id}
+ onClick={() => handleSelect(option)}
/>
))}
diff --git a/src/components/domains/chat/CreditsModals/RefillOptionsHeader/RefillOptionsHeader.tsx b/src/components/domains/chat/CreditsModals/RefillOptionsHeader/RefillOptionsHeader.tsx
index d109c75..e1a6499 100644
--- a/src/components/domains/chat/CreditsModals/RefillOptionsHeader/RefillOptionsHeader.tsx
+++ b/src/components/domains/chat/CreditsModals/RefillOptionsHeader/RefillOptionsHeader.tsx
@@ -1,19 +1,37 @@
"use client";
+import { useEffect } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { Typography } from "@/components/ui";
import { useTimer } from "@/hooks/timer/useTimer";
+import { useChatStore } from "@/providers/chat-store-provider";
+import { useUser } from "@/providers/user-provider";
import styles from "./RefillOptionsHeader.module.scss";
-export default function RefillOptionsHeader() {
+interface RefillOptionsHeaderProps {
+ onTimerLeft?: () => void;
+}
+
+export default function RefillOptionsHeader({
+ onTimerLeft,
+}: RefillOptionsHeaderProps) {
const t = useTranslations("RefillOptionsModal.header");
- const { time } = useTimer({
+ const { time, isFinished } = useTimer({
initialSeconds: 60,
});
+ const currentChat = useChatStore(state => state.currentChat);
+ const { user } = useUser();
+
+ useEffect(() => {
+ if (isFinished) {
+ onTimerLeft?.();
+ }
+ }, [isFinished, onTimerLeft]);
+
return (
- {t("title", { name: "Olivia" })}
+ {t("title", { name: currentChat?.assistantName || "" })}
- {t("subtitle", { name: "Victor" })}
+ {t("subtitle", { name: user?.profile.name || "" })}
diff --git a/src/components/domains/chat/CreditsModals/RefillOptionsModal/RefillOptionsModal.tsx b/src/components/domains/chat/CreditsModals/RefillOptionsModal/RefillOptionsModal.tsx
index 055ff05..9063c4a 100644
--- a/src/components/domains/chat/CreditsModals/RefillOptionsModal/RefillOptionsModal.tsx
+++ b/src/components/domains/chat/CreditsModals/RefillOptionsModal/RefillOptionsModal.tsx
@@ -1,8 +1,12 @@
+"use client";
+
+import { useState } from "react";
import { useTranslations } from "next-intl";
-import { Button, Typography } from "@/components/ui";
-import { getFormattedPrice } from "@/shared/utils/price";
-import { Currency } from "@/types";
+import { Button, Spinner, Typography } from "@/components/ui";
+import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
+import { useChatStore } from "@/providers/chat-store-provider";
+import { IRefillModals, IRefillModalsProduct } from "@/services/socket/events";
import BenefitsList from "../BenefitsList/BenefitsList";
import RefillOptions from "../RefillOptions/RefillOptions";
@@ -10,41 +14,63 @@ import RefillOptionsHeader from "../RefillOptionsHeader/RefillOptionsHeader";
import styles from "./RefillOptionsModal.module.scss";
-const currency = Currency.USD;
+interface RefillOptionsModalProps {
+ data: NonNullable
;
+ onTimerLeft?: () => void;
+ onPaymentSuccess?: () => void;
+ onPaymentError?: (error?: string) => void;
+}
-const OPTIONS = [
- { credits: 100, price: getFormattedPrice(999, currency) },
- {
- credits: 250,
- price: getFormattedPrice(1999, currency),
- bonus: 50,
- popular: true,
- },
- { credits: 1500, price: getFormattedPrice(9999, currency), bonus: 500 },
-];
-
-export default function RefillOptionsModal() {
+export default function RefillOptionsModal({
+ data,
+ onTimerLeft,
+ onPaymentSuccess,
+ onPaymentError,
+}: RefillOptionsModalProps) {
const t = useTranslations("RefillOptionsModal");
+ const isAutoTopUp = useChatStore(state => state.isAutoTopUp);
+
+ const { handleSingleCheckout, isLoading } = useSingleCheckout({
+ onSuccess: onPaymentSuccess,
+ onError: onPaymentError,
+ });
+
+ const [selectedOption, setSelectedOption] = useState(
+ data[1] ?? data[0]
+ );
+
+ const handlePayment = () => {
+ if (isLoading) return;
+ handleSingleCheckout({
+ productId: selectedOption.id,
+ key: selectedOption.key,
+ isAutoTopUp,
+ });
+ };
+
return (
-
+
console.log(option, idx)}
- defaultIndex={1}
+ options={data}
+ selectedOption={selectedOption}
+ onChange={option => setSelectedOption(option)}
/>
-