pennyteenycat
GitHub
commit
f6a9fd606b
@ -222,6 +222,13 @@
|
||||
"required_field": "This field is required"
|
||||
},
|
||||
"AdditionalPurchases": {
|
||||
"banner": {
|
||||
"title": "Amazing!",
|
||||
"description": "Your journey begins now"
|
||||
},
|
||||
"Progress": {
|
||||
"final_step": "Access Your Results"
|
||||
},
|
||||
"caution": {
|
||||
"title": "Caution!",
|
||||
"description": "To prevent double charges please don`t close the page and don`t go back."
|
||||
@ -238,7 +245,8 @@
|
||||
"save": "Save {discount}%",
|
||||
"get_my_consultation": "Get my consultation",
|
||||
"skip_this_offer": "Skip this offer",
|
||||
"payment_error": "Something went wrong. Please try again later."
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US"
|
||||
},
|
||||
"add-guides": {
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
@ -248,6 +256,7 @@
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"select_product_error": "Please select a product",
|
||||
"skip_offer": "Skip offer",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"products": {
|
||||
"main_ultra_pack": {
|
||||
"title": "ULTRA PACK",
|
||||
@ -288,6 +297,17 @@
|
||||
"emoji": "rised_hand.webp"
|
||||
}
|
||||
}
|
||||
},
|
||||
"video-guides": {
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
"subtitle": "Available only now",
|
||||
"description": "* You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment.",
|
||||
"button": "Continue",
|
||||
"skip_button": "Skip this offer and proceed further",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"now": "Now",
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"select_product_error": "Please select a product"
|
||||
}
|
||||
},
|
||||
"Chat": {
|
||||
@ -398,4 +418,4 @@
|
||||
},
|
||||
"Soulmate": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -229,6 +229,13 @@
|
||||
"required_field": "This field is required"
|
||||
},
|
||||
"AdditionalPurchases": {
|
||||
"banner": {
|
||||
"title": "Amazing!",
|
||||
"description": "Your journey begins now"
|
||||
},
|
||||
"Progress": {
|
||||
"final_step": "Access Your Results"
|
||||
},
|
||||
"caution": {
|
||||
"title": "Caution!",
|
||||
"description": "To prevent double charges please don`t close the page and don`t go back."
|
||||
@ -245,7 +252,8 @@
|
||||
"save": "Save {discount}%",
|
||||
"get_my_consultation": "Get my consultation",
|
||||
"skip_this_offer": "Skip this offer",
|
||||
"payment_error": "Something went wrong. Please try again later."
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US"
|
||||
},
|
||||
"add-guides": {
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
@ -255,6 +263,7 @@
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"select_product_error": "Please select a product",
|
||||
"skip_offer": "Skip offer",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"products": {
|
||||
"main_ultra_pack": {
|
||||
"title": "ULTRA PACK",
|
||||
@ -297,54 +306,22 @@
|
||||
}
|
||||
},
|
||||
"video-guides": {
|
||||
"banner": {
|
||||
"title": "Amazing!",
|
||||
"description": "Your journey begins now"
|
||||
},
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
"subtitle": "Available only now",
|
||||
"description": "* You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment.",
|
||||
"button": "Continue",
|
||||
"skip_button": "Skip this offer and proceed further",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"products": {
|
||||
"main_ultra_pack": {
|
||||
"title": "Ultra Pack",
|
||||
"subtitle": "3 in 1+2 secret bonus readings",
|
||||
"discount": "{discount}% OFF",
|
||||
"price": "Now <price></price> <oldPrice></oldPrice>",
|
||||
"emoji": "star_struck.webp"
|
||||
},
|
||||
"main_numerology_analysis": {
|
||||
"title": "Relationship plan",
|
||||
"subtitle": "Discover the future without losing yourself",
|
||||
"discount": "{discount}% OFF",
|
||||
"price": "Now <price></price> <oldPrice></oldPrice>",
|
||||
"emoji": "ring.webp"
|
||||
},
|
||||
"main_tarot_reading": {
|
||||
"title": "Healthy compatibility",
|
||||
"subtitle": "Balance between closeness and freedom",
|
||||
"discount": "{discount}% OFF",
|
||||
"price": "Now <price></price> <oldPrice></oldPrice>",
|
||||
"emoji": "rose.webp"
|
||||
},
|
||||
"main_palmistry_guide": {
|
||||
"title": "How to talk about feelings",
|
||||
"subtitle": "Express your emotions and be understood",
|
||||
"discount": "{discount}% OFF",
|
||||
"price": "Now <price></price> <oldPrice></oldPrice>",
|
||||
"emoji": "heart_from_hands.webp"
|
||||
}
|
||||
}
|
||||
"now": "Now"
|
||||
}
|
||||
},
|
||||
"Dashboard": {
|
||||
"adviser": {
|
||||
"title": "Talk to an Astrologer"
|
||||
},
|
||||
"Progress": {
|
||||
"items": {
|
||||
"1": "Your Soulmate Portrait",
|
||||
"2": "Video Guides",
|
||||
"3": "Add Consultation",
|
||||
"4": "Access Your Results"
|
||||
}
|
||||
"videoGuides": {
|
||||
"now": "Now",
|
||||
"purchaseFor": "Buy for {price}"
|
||||
}
|
||||
},
|
||||
"Chat": {
|
||||
|
||||
@ -222,6 +222,13 @@
|
||||
"required_field": "This field is required"
|
||||
},
|
||||
"AdditionalPurchases": {
|
||||
"banner": {
|
||||
"title": "Amazing!",
|
||||
"description": "Your journey begins now"
|
||||
},
|
||||
"Progress": {
|
||||
"final_step": "Access Your Results"
|
||||
},
|
||||
"caution": {
|
||||
"title": "Caution!",
|
||||
"description": "To prevent double charges please don`t close the page and don`t go back."
|
||||
@ -238,7 +245,8 @@
|
||||
"save": "Save {discount}%",
|
||||
"get_my_consultation": "Get my consultation",
|
||||
"skip_this_offer": "Skip this offer",
|
||||
"payment_error": "Something went wrong. Please try again later."
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US"
|
||||
},
|
||||
"add-guides": {
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
@ -248,6 +256,7 @@
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"select_product_error": "Please select a product",
|
||||
"skip_offer": "Skip offer",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"products": {
|
||||
"main_ultra_pack": {
|
||||
"title": "ULTRA PACK",
|
||||
@ -288,6 +297,17 @@
|
||||
"emoji": "rised_hand.webp"
|
||||
}
|
||||
}
|
||||
},
|
||||
"video-guides": {
|
||||
"title": "Choose your sign-up offer 🔥",
|
||||
"subtitle": "Available only now",
|
||||
"description": "* You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment.",
|
||||
"button": "Continue",
|
||||
"skip_button": "Skip this offer and proceed further",
|
||||
"copyright": "© 2025, Wit Lab LLC, California, US",
|
||||
"now": "Now",
|
||||
"payment_error": "Something went wrong. Please try again later.",
|
||||
"select_product_error": "Please select a product"
|
||||
}
|
||||
},
|
||||
"Chat": {
|
||||
@ -398,4 +418,4 @@
|
||||
},
|
||||
"Soulmate": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { MultiPageNavigationProvider } from "@/components/domains/additional-purchases";
|
||||
import {
|
||||
MultiPageNavigationProvider,
|
||||
ProgressLayout,
|
||||
} from "@/components/domains/additional-purchases";
|
||||
import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
|
||||
import { ROUTES } from "@/shared/constants/client-routes";
|
||||
import { ELocalesPlacement } from "@/types";
|
||||
@ -30,7 +33,7 @@ export default async function MultiPageLayout({
|
||||
|
||||
return (
|
||||
<MultiPageNavigationProvider data={allProducts} currentType={pageType}>
|
||||
{children}
|
||||
<ProgressLayout>{children}</ProgressLayout>
|
||||
</MultiPageNavigationProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
PalmSection,
|
||||
PalmSectionSkeleton,
|
||||
PortraitsSection,
|
||||
VideoGuidesSection,
|
||||
} from "@/components/domains/dashboard";
|
||||
import { loadChatsList } from "@/entities/chats/loaders";
|
||||
import {
|
||||
@ -19,18 +20,25 @@ import {
|
||||
loadMeditations,
|
||||
loadPalms,
|
||||
loadPortraits,
|
||||
loadVideoGuides,
|
||||
} from "@/entities/dashboard/loaders";
|
||||
|
||||
import styles from "./page.module.scss";
|
||||
|
||||
// Force dynamic to always get fresh data
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function Home() {
|
||||
const chatsPromise = loadChatsList();
|
||||
const portraits = await loadPortraits();
|
||||
const videoGuides = await loadVideoGuides();
|
||||
|
||||
return (
|
||||
<section className={styles.page}>
|
||||
<PortraitsSection portraits={portraits} />
|
||||
|
||||
<VideoGuidesSection videoGuides={videoGuides} />
|
||||
|
||||
<HoroscopeSection />
|
||||
|
||||
<Suspense fallback={<AdvisersSectionSkeleton />}>
|
||||
|
||||
7
src/app/[locale]/(core)/video-guides/[id]/layout.tsx
Normal file
7
src/app/[locale]/(core)/video-guides/[id]/layout.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
export default function VideoGuideLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
22
src/app/[locale]/(core)/video-guides/[id]/loading.tsx
Normal file
22
src/app/[locale]/(core)/video-guides/[id]/loading.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Spinner } from "@/components/ui";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "var(--background)",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Spinner size={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/app/[locale]/(core)/video-guides/[id]/page.tsx
Normal file
38
src/app/[locale]/(core)/video-guides/[id]/page.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { VideoGuideView } from "@/components/domains/video-guides";
|
||||
import { DashboardData, DashboardSchema } from "@/entities/dashboard/types";
|
||||
import { http } from "@/shared/api/httpClient";
|
||||
import { API_ROUTES } from "@/shared/constants/api-routes";
|
||||
|
||||
// Force dynamic to always get fresh data
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function VideoGuidePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
|
||||
// Get fresh dashboard data without cache
|
||||
const dashboard = await http.get<DashboardData>(API_ROUTES.dashboard(), {
|
||||
cache: "no-store",
|
||||
schema: DashboardSchema,
|
||||
});
|
||||
|
||||
const videoGuide = dashboard.videoGuides?.find(v => v.id === id);
|
||||
|
||||
if (!videoGuide || !videoGuide.isPurchased || !videoGuide.videoLink) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<VideoGuideView
|
||||
id={videoGuide.id}
|
||||
name={videoGuide.name}
|
||||
description={videoGuide.description}
|
||||
videoLink={videoGuide.videoLink}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -34,7 +34,10 @@ function getUsernameFromEmail(email: string): string {
|
||||
|
||||
export default async function EmailMarketingSoulmateV1Landing() {
|
||||
const [payment, user] = await Promise.all([
|
||||
loadFunnelPaymentById(payload, "main") as Promise<IFunnelPaymentPlacement | null>,
|
||||
loadFunnelPaymentById(
|
||||
payload,
|
||||
"main"
|
||||
) as Promise<IFunnelPaymentPlacement | null>,
|
||||
loadUser(),
|
||||
]);
|
||||
|
||||
|
||||
@ -1,26 +1,45 @@
|
||||
.container.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
max-width: 560px;
|
||||
.container {
|
||||
position: fixed;
|
||||
bottom: 0dvh;
|
||||
bottom: calc(0dvh + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 0px;
|
||||
padding-bottom: 20px;
|
||||
padding-inline: 15px;
|
||||
z-index: 5;
|
||||
}
|
||||
width: 100%;
|
||||
padding-inline: 24px;
|
||||
max-width: 560px;
|
||||
height: fit-content;
|
||||
|
||||
.button.button {
|
||||
padding-block: 16px;
|
||||
}
|
||||
& > .button {
|
||||
padding-block: 20px;
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0px 5px 14px 0px #3b82f666,
|
||||
0px 4px 6px 0px #3b82f61a;
|
||||
|
||||
.skipButton.skipButton {
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
& > .text {
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .skipButton {
|
||||
padding: 0;
|
||||
min-height: none;
|
||||
margin-top: 13px;
|
||||
|
||||
& > .text {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #1f2937;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
& > .copyright {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #9ca3af;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Button, Spinner, Typography } from "@/components/ui";
|
||||
@ -17,12 +18,14 @@ export default function AddConsultantButton() {
|
||||
const { addToast } = useToast();
|
||||
const { navigation } = useMultiPageNavigationContext();
|
||||
const data = navigation.currentItem;
|
||||
const [isNavigating, setIsNavigating] = useState(false);
|
||||
|
||||
const product = data?.variants?.[0];
|
||||
|
||||
const { handleSingleCheckout, isLoading } = useSingleCheckout({
|
||||
onSuccess: () => {
|
||||
navigation.goToNext();
|
||||
onSuccess: async () => {
|
||||
setIsNavigating(true);
|
||||
await navigation.goToNext();
|
||||
},
|
||||
onError: _error => {
|
||||
addToast({
|
||||
@ -57,30 +60,36 @@ export default function AddConsultantButton() {
|
||||
navigation.goToNext();
|
||||
};
|
||||
|
||||
const isButtonDisabled = isLoading || isNavigating || !product;
|
||||
|
||||
return (
|
||||
<BlurComponent isActiveBlur={true} className={styles.container}>
|
||||
<Button
|
||||
className={styles.button}
|
||||
onClick={handleGetConsultation}
|
||||
disabled={isLoading || !product}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{isLoading ? (
|
||||
{isLoading || isNavigating ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Typography weight="semiBold" color="white">
|
||||
<Typography color="white" className={styles.text}>
|
||||
{t("get_my_consultation")}
|
||||
</Typography>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className={styles.skipButton}
|
||||
variant="ghost"
|
||||
onClick={handleSkipOffer}
|
||||
disabled={isLoading}
|
||||
disabled={isLoading || isNavigating}
|
||||
>
|
||||
<Typography size="sm" color="black">
|
||||
<Typography as="p" className={styles.text}>
|
||||
{t("skip_this_offer")}
|
||||
</Typography>
|
||||
</Button>
|
||||
<Typography as="p" className={styles.copyright}>
|
||||
{t("copyright")}
|
||||
</Typography>
|
||||
</BlurComponent>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
import {
|
||||
AddConsultantButton,
|
||||
Caution,
|
||||
ConsultationTable,
|
||||
} from "@/components/domains/additional-purchases";
|
||||
import { Card, Typography } from "@/components/ui";
|
||||
|
||||
import styles from "./AddConsultantPage.module.scss";
|
||||
|
||||
export default function AddConsultantPage() {
|
||||
const t = useTranslations("AdditionalPurchases.add-consultant");
|
||||
export default async function AddConsultantPage() {
|
||||
const t = await getTranslations("AdditionalPurchases.add-consultant");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Caution />
|
||||
<Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
|
||||
{t("title")}
|
||||
</Typography>
|
||||
|
||||
@ -7,8 +7,26 @@
|
||||
padding-inline: 24px;
|
||||
max-width: 560px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding-block: 16px;
|
||||
& > .button {
|
||||
padding-block: 20px;
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0px 5px 14px 0px #3b82f666,
|
||||
0px 4px 6px 0px #3b82f61a;
|
||||
|
||||
& > .text {
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
line-height: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
& > .copyright {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #9ca3af;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Button, Spinner, Typography } from "@/components/ui";
|
||||
@ -18,10 +19,12 @@ export default function AddGuidesButton() {
|
||||
const { addToast } = useToast();
|
||||
const { selectedProduct } = useProductSelection();
|
||||
const { navigation } = useMultiPageNavigationContext();
|
||||
const [isNavigating, setIsNavigating] = useState(false);
|
||||
|
||||
const { handleSingleCheckout, isLoading } = useSingleCheckout({
|
||||
onSuccess: () => {
|
||||
navigation.goToNext();
|
||||
onSuccess: async () => {
|
||||
setIsNavigating(true);
|
||||
await navigation.goToNext();
|
||||
},
|
||||
onError: _error => {
|
||||
addToast({
|
||||
@ -58,21 +61,26 @@ export default function AddGuidesButton() {
|
||||
|
||||
const isSkipOffer = selectedProduct?.id === "main_skip_offer";
|
||||
|
||||
const isButtonDisabled = isLoading || isNavigating;
|
||||
|
||||
return (
|
||||
<BlurComponent isActiveBlur={true} className={styles.container}>
|
||||
<Button
|
||||
className={styles.button}
|
||||
onClick={isSkipOffer ? handleSkipOffer : handlePurchase}
|
||||
disabled={isLoading}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{isLoading ? (
|
||||
{isButtonDisabled ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Typography weight="semiBold" color="white">
|
||||
<Typography color="white" className={styles.text}>
|
||||
{isSkipOffer ? t("skip_offer") : t("button")}
|
||||
</Typography>
|
||||
)}
|
||||
</Button>
|
||||
<Typography as="p" className={styles.copyright}>
|
||||
{t("copyright")}
|
||||
</Typography>
|
||||
</BlurComponent>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { Suspense } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
import {
|
||||
AddGuidesButton,
|
||||
Caution,
|
||||
Offers,
|
||||
OffersSkeleton,
|
||||
ProductSelectionProvider,
|
||||
@ -12,12 +11,11 @@ import { Typography } from "@/components/ui";
|
||||
|
||||
import styles from "./AddGuidesPage.module.scss";
|
||||
|
||||
export default function AddGuidesPage() {
|
||||
const t = useTranslations("AdditionalPurchases.add-guides");
|
||||
export default async function AddGuidesPage() {
|
||||
const t = await getTranslations("AdditionalPurchases.add-guides");
|
||||
|
||||
return (
|
||||
<ProductSelectionProvider>
|
||||
<Caution />
|
||||
<Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
|
||||
{t("title")}
|
||||
</Typography>
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 18px 20px 25px 25px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(78, 205, 196, 0.1) 0%,
|
||||
rgba(102, 126, 234, 0.1) 100%
|
||||
);
|
||||
border: 1px solid #4ecdc433;
|
||||
border-radius: 32px;
|
||||
margin-top: 34px;
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr;
|
||||
gap: 16px;
|
||||
|
||||
& > .iconContainer {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background-color: #4ecdc433;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > .textContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
& > .title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
& > .description {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #525252;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Typography } from "@/components/ui";
|
||||
|
||||
import HeartIcon from "./HeartIcon.svg";
|
||||
|
||||
import styles from "./AdditionalPurchaseBanner.module.scss";
|
||||
|
||||
export default function AdditionalPurchaseBanner() {
|
||||
const t = useTranslations("AdditionalPurchases.banner");
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.iconContainer}>
|
||||
<HeartIcon />
|
||||
</div>
|
||||
<div className={styles.textContainer}>
|
||||
<Typography as="h4" align="left" className={styles.title}>
|
||||
{t("title")}
|
||||
</Typography>
|
||||
<Typography as="p" align="left" className={styles.description}>
|
||||
{t("description")}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.85938 10.0879L8.91797 16.6777C9.21094 16.9511 9.59766 17.1035 10 17.1035C10.4023 17.1035 10.7891 16.9511 11.082 16.6777L18.1406 10.0879C19.3281 8.98239 20 7.43161 20 5.81051V5.58395C20 2.85348 18.0273 0.525356 15.3359 0.0761369C13.5547 -0.220738 11.7422 0.361293 10.4688 1.63473L10 2.10348L9.53125 1.63473C8.25781 0.361293 6.44531 -0.220738 4.66406 0.0761369C1.97266 0.525356 0 2.85348 0 5.58395V5.81051C0 7.43161 0.671875 8.98239 1.85938 10.0879Z" fill="#4ECDC4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 581 B |
@ -1,13 +1,22 @@
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
z-index: 7777;
|
||||
|
||||
& > .blurGradient {
|
||||
background: rgb(247 247 247 / 42%);
|
||||
rotate: 180deg;
|
||||
left: -24px;
|
||||
right: -24px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
z-index: 1;
|
||||
z-index: 8888;
|
||||
}
|
||||
|
||||
& > .item {
|
||||
@ -15,6 +24,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
max-width: 80px;
|
||||
|
||||
& > .marker {
|
||||
width: 32px;
|
||||
@ -93,6 +103,6 @@
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
height: 2px;
|
||||
z-index: 0;
|
||||
z-index: 7777;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,34 +4,46 @@ import { useTranslations } from "next-intl";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { Icon, IconName, Typography } from "@/components/ui";
|
||||
import { BlurComponent } from "@/components/widgets";
|
||||
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
|
||||
|
||||
import styles from "./Progress.module.scss";
|
||||
|
||||
interface IProgressProps {
|
||||
items: string[];
|
||||
activeItemIndex: number;
|
||||
}
|
||||
|
||||
export default function Progress({ activeItemIndex }: IProgressProps) {
|
||||
export default function Progress({ items, activeItemIndex }: IProgressProps) {
|
||||
const t = useTranslations("AdditionalPurchases.Progress");
|
||||
|
||||
const finalStep = t("final_step");
|
||||
const allItems = [...items, finalStep];
|
||||
|
||||
const { width: containerWidth, elementRef } = useDynamicSize<HTMLDivElement>({
|
||||
defaultWidth: 327,
|
||||
});
|
||||
|
||||
const items = Object.values(t.raw("items") as Record<string, string>);
|
||||
|
||||
const firstChild = elementRef.current?.childNodes[0] as HTMLElement;
|
||||
|
||||
const lastChild = elementRef.current?.childNodes[
|
||||
items.length - 1
|
||||
allItems.length - 1
|
||||
] as HTMLElement;
|
||||
|
||||
const leftIndent =
|
||||
((firstChild?.getBoundingClientRect().width || 100) - 32) / 2;
|
||||
|
||||
const rightIndent =
|
||||
((lastChild?.getBoundingClientRect().width || 76) - 32) / 2;
|
||||
|
||||
return (
|
||||
<div className={styles.container} ref={elementRef}>
|
||||
{items.map((item, index) => (
|
||||
<BlurComponent
|
||||
isActiveBlur={true}
|
||||
className={styles.container}
|
||||
gradientClassName={styles.blurGradient}
|
||||
ref={elementRef}
|
||||
>
|
||||
{allItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={clsx(
|
||||
@ -68,7 +80,8 @@ export default function Progress({ activeItemIndex }: IProgressProps) {
|
||||
background: activeItemIndex
|
||||
? `
|
||||
linear-gradient(
|
||||
90deg, #2866ed 0%,
|
||||
90deg,
|
||||
#2866ed 0%,
|
||||
#2866ed ${((activeItemIndex - 1) / items.length) * 100}%,
|
||||
#c4d9fc ${(activeItemIndex / items.length) * containerWidth + 16}px,
|
||||
#E2E8F0 100%)
|
||||
@ -76,6 +89,6 @@ export default function Progress({ activeItemIndex }: IProgressProps) {
|
||||
: "#E2E8F0",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BlurComponent>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";
|
||||
|
||||
import { Progress, useMultiPageNavigationContext } from "..";
|
||||
|
||||
interface IProgressLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function ProgressLayout({ children }: IProgressLayoutProps) {
|
||||
const { navigation } = useMultiPageNavigationContext();
|
||||
|
||||
const progressItems = navigation.data.map((item: IFunnelPaymentPlacement) => {
|
||||
return item.title || item.type || "";
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Progress
|
||||
items={progressItems}
|
||||
activeItemIndex={navigation.currentIndex}
|
||||
/>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Button, Spinner, Typography } from "@/components/ui";
|
||||
@ -18,10 +19,12 @@ export default function VideoGuidesButton() {
|
||||
const { addToast } = useToast();
|
||||
const { selectedProduct } = useProductSelection();
|
||||
const { navigation } = useMultiPageNavigationContext();
|
||||
const [isNavigating, setIsNavigating] = useState(false);
|
||||
|
||||
const { handleSingleCheckout, isLoading } = useSingleCheckout({
|
||||
onSuccess: () => {
|
||||
navigation.goToNext();
|
||||
onSuccess: async () => {
|
||||
setIsNavigating(true);
|
||||
await navigation.goToNext();
|
||||
},
|
||||
onError: _error => {
|
||||
addToast({
|
||||
@ -56,14 +59,16 @@ export default function VideoGuidesButton() {
|
||||
navigation.goToNext();
|
||||
};
|
||||
|
||||
const isButtonDisabled = isLoading || isNavigating;
|
||||
|
||||
return (
|
||||
<BlurComponent isActiveBlur={true} className={styles.container}>
|
||||
<Button
|
||||
className={styles.button}
|
||||
onClick={handlePurchase}
|
||||
disabled={isLoading}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{isLoading ? (
|
||||
{isButtonDisabled ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Typography color="white" className={styles.text}>
|
||||
|
||||
@ -7,6 +7,25 @@
|
||||
box-shadow: 0px 0px 30px 0px #0000001f;
|
||||
gap: 4px;
|
||||
|
||||
& > .topBadge {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: 49px;
|
||||
background: #ff3737;
|
||||
box-shadow: 0px 1px 11.98px 0px #ff44448c;
|
||||
border: 2px solid #ffffff4d;
|
||||
padding: 8px 12px;
|
||||
border-radius: 9999px;
|
||||
z-index: 10;
|
||||
|
||||
& > .topBadgeText {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .content {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 20px;
|
||||
@ -109,23 +128,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.main_ultra_pack {
|
||||
& > .footer {
|
||||
& > .discount {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: 49px;
|
||||
background: #ff3737;
|
||||
box-shadow: 0px 1px 11.98px 0px #ff44448c;
|
||||
border: 2px solid #ffffff4d;
|
||||
padding: 8px 12px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,30 +11,25 @@ import styles from "./VideoGuidesOffer.module.scss";
|
||||
interface VideoGuidesOfferProps {
|
||||
offer: IFunnelPaymentVariant;
|
||||
isActive: boolean;
|
||||
isFirstOffer?: boolean;
|
||||
className?: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
||||
const { offer, isActive, className, onClick } = props;
|
||||
const { offer, isActive, isFirstOffer, className, onClick } = props;
|
||||
|
||||
const { key, price, oldPrice } = offer;
|
||||
const { key, name, description, emoji, price, oldPrice } = offer;
|
||||
|
||||
const productKey = key.replaceAll(".", "_");
|
||||
|
||||
const t = useTranslations(
|
||||
`AdditionalPurchases.video-guides.products.${productKey}`
|
||||
);
|
||||
|
||||
const currency = Currency.USD;
|
||||
|
||||
const subtitle = t.has("subtitle") ? t("subtitle") : undefined;
|
||||
|
||||
const discount = Math.ceil(
|
||||
const discount = Math.round(
|
||||
(((oldPrice || 0) - price) / (oldPrice || 0)) * 100
|
||||
);
|
||||
|
||||
const emoji = t.has("emoji") ? t("emoji") : undefined;
|
||||
const t = useTranslations("AdditionalPurchases.video-guides");
|
||||
|
||||
return (
|
||||
<Card
|
||||
@ -46,6 +41,11 @@ export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{isFirstOffer && (
|
||||
<div className={styles.topBadge}>
|
||||
<span className={styles.topBadgeText}>{discount}% OFF</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.content}>
|
||||
<div className={styles.emojiContainer}>
|
||||
<span
|
||||
@ -55,11 +55,11 @@ export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
||||
</div>
|
||||
<div className={styles.textContainer}>
|
||||
<Typography as="h5" align="left" className={styles.title}>
|
||||
{t("title")}
|
||||
{name}
|
||||
</Typography>
|
||||
{subtitle && (
|
||||
{description && (
|
||||
<Typography as="p" align="left" className={styles.subtitle}>
|
||||
{subtitle}
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
@ -76,24 +76,18 @@ export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<Typography className={styles.price}>
|
||||
{t.rich("price", {
|
||||
price: () => (
|
||||
<Typography className={styles.currentPrice}>
|
||||
{getFormattedPrice(price, currency)}
|
||||
</Typography>
|
||||
),
|
||||
oldPrice: () => (
|
||||
<Typography className={styles.oldPrice}>
|
||||
{getFormattedPrice(oldPrice || 0, currency)}
|
||||
</Typography>
|
||||
),
|
||||
})}
|
||||
</Typography>
|
||||
<Typography className={styles.discount}>
|
||||
{t("discount", {
|
||||
discount: discount || 0,
|
||||
})}
|
||||
{t("now")}{" "}
|
||||
<Typography className={styles.currentPrice}>
|
||||
{getFormattedPrice(price, currency)}
|
||||
</Typography>
|
||||
{" "}
|
||||
<Typography className={styles.oldPrice}>
|
||||
{getFormattedPrice(oldPrice || 0, currency)}
|
||||
</Typography>
|
||||
</Typography>
|
||||
{!isFirstOffer && (
|
||||
<Typography className={styles.discount}>{discount}% OFF</Typography>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@ -10,42 +10,28 @@ import { useProductSelection } from "../ProductSelectionProvider";
|
||||
|
||||
import styles from "./VideoGuidesOffers.module.scss";
|
||||
|
||||
// Зашитые проценты скидки: первый товар - 50%, остальные - 45%
|
||||
const FIRST_PRODUCT_DISCOUNT = 50;
|
||||
const OTHER_PRODUCTS_DISCOUNT = 45;
|
||||
|
||||
export default function VideoGuidesOffers() {
|
||||
const { navigation } = useMultiPageNavigationContext();
|
||||
const data = navigation.currentItem;
|
||||
|
||||
const offers = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
id: "1",
|
||||
key: "main_ultra_pack",
|
||||
type: "sdv",
|
||||
price: 1939,
|
||||
oldPrice: 3499,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
key: "main_numerology_analysis",
|
||||
type: "sdv",
|
||||
price: 938,
|
||||
oldPrice: 1999,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
key: "main_tarot_reading",
|
||||
type: "sdv",
|
||||
price: 937,
|
||||
oldPrice: 1999,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
key: "main_palmistry_guide",
|
||||
type: "sdv",
|
||||
price: 936,
|
||||
oldPrice: 1999,
|
||||
},
|
||||
];
|
||||
return data?.variants ?? [];
|
||||
// Используем данные с сервера и добавляем oldPrice на основе зашитого процента скидки
|
||||
const serverOffers = data?.variants ?? [];
|
||||
return serverOffers.map((offer: IFunnelPaymentVariant, index: number) => {
|
||||
// Первый товар имеет скидку 50%, остальные - 45%
|
||||
const discountPercent =
|
||||
index === 0 ? FIRST_PRODUCT_DISCOUNT : OTHER_PRODUCTS_DISCOUNT;
|
||||
// Рассчитываем oldPrice: если price это цена со скидкой X%, то oldPrice = price / (1 - X/100)
|
||||
const oldPrice = Math.round(offer.price / (1 - discountPercent / 100));
|
||||
return {
|
||||
...offer,
|
||||
oldPrice,
|
||||
};
|
||||
});
|
||||
}, [data]);
|
||||
const [activeOffer, setActiveOffer] = useState<string>("");
|
||||
const { setSelectedProduct } = useProductSelection();
|
||||
@ -64,11 +50,12 @@ export default function VideoGuidesOffers() {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{offers.map(offer => (
|
||||
{offers.map((offer, index) => (
|
||||
<VideoGuidesOffer
|
||||
offer={offer}
|
||||
key={offer.id}
|
||||
isActive={activeOffer === offer.id}
|
||||
isFirstOffer={index === 0}
|
||||
onClick={() => handleOfferClick(offer)}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { Suspense } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
import {
|
||||
AdditionalPurchaseBanner,
|
||||
ProductSelectionProvider,
|
||||
Progress,
|
||||
VideoGuidesBanner,
|
||||
VideoGuidesButton,
|
||||
VideoGuidesOffers,
|
||||
VideoGuidesOffersSkeleton,
|
||||
@ -13,13 +12,12 @@ import { Typography } from "@/components/ui";
|
||||
|
||||
import styles from "./VideoGuidesPage.module.scss";
|
||||
|
||||
export default function VideoGuidesPage() {
|
||||
const t = useTranslations("AdditionalPurchases.video-guides");
|
||||
export default async function VideoGuidesPage() {
|
||||
const t = await getTranslations("AdditionalPurchases.video-guides");
|
||||
|
||||
return (
|
||||
<ProductSelectionProvider>
|
||||
<Progress activeItemIndex={1} />
|
||||
<VideoGuidesBanner />
|
||||
<AdditionalPurchaseBanner />
|
||||
<Typography as="h1" className={styles.title}>
|
||||
{t("title")}
|
||||
</Typography>
|
||||
|
||||
@ -2,6 +2,7 @@ export { default as AddConsultantButton } from "./AddConsultantButton/AddConsult
|
||||
export { default as AddConsultantPage } from "./AddConsultantPage/AddConsultantPage";
|
||||
export { default as AddGuidesButton } from "./AddGuidesButton/AddGuidesButton";
|
||||
export { default as AddGuidesPage } from "./AddGuidesPage/AddGuidesPage";
|
||||
export { default as AdditionalPurchaseBanner } from "./AdditionalPurchaseBanner/AdditionalPurchaseBanner";
|
||||
export { default as Caution } from "./Caution/Caution";
|
||||
export { default as ConsultationTable } from "./ConsultationTable/ConsultationTable";
|
||||
export {
|
||||
@ -15,6 +16,7 @@ export {
|
||||
useProductSelection,
|
||||
} from "./ProductSelectionProvider";
|
||||
export { default as Progress } from "./Progress/Progress";
|
||||
export { default as ProgressLayout } from "./ProgressLayout/ProgressLayout";
|
||||
export { default as VideoGuidesBanner } from "./VideoGuidesBanner/VideoGuidesBanner";
|
||||
export { default as VideoGuidesButton } from "./VideoGuidesButton/VideoGuidesButton";
|
||||
export { default as VideoGuidesOffer } from "./VideoGuidesOffer/VideoGuidesOffer";
|
||||
|
||||
@ -17,7 +17,7 @@ export default function GlobalNewMessagesBanner() {
|
||||
const { unreadChats } = useChats();
|
||||
const { balance } = useBalance();
|
||||
|
||||
// Exclude banner on chat-related, settings (profile), retention funnel, and portraits pages
|
||||
// Exclude banner on chat-related, settings (profile), retention funnel, portraits, and video guides pages
|
||||
const pathname = usePathname();
|
||||
const locale = useLocale();
|
||||
const pathnameWithoutLocale = stripLocale(pathname, locale);
|
||||
@ -25,7 +25,8 @@ export default function GlobalNewMessagesBanner() {
|
||||
pathnameWithoutLocale.startsWith(ROUTES.chat()) ||
|
||||
pathnameWithoutLocale.startsWith(ROUTES.profile()) ||
|
||||
pathnameWithoutLocale.startsWith("/retaining") ||
|
||||
pathnameWithoutLocale.startsWith("/portraits");
|
||||
pathnameWithoutLocale.startsWith("/portraits") ||
|
||||
pathnameWithoutLocale.startsWith("/video-guides");
|
||||
|
||||
const hasHydrated = useAppUiStore(state => state._hasHydrated);
|
||||
const { isVisibleAll } = useAppUiStore(state => state.home.newMessages);
|
||||
|
||||
@ -82,7 +82,10 @@ export default function MessageInput({
|
||||
aria-label="Send"
|
||||
className={styles.sendButton}
|
||||
>
|
||||
<Icon name={IconName.PaperAirplane} size={{ height: 14, width: 14 }} />
|
||||
<Icon
|
||||
name={IconName.PaperAirplane}
|
||||
size={{ height: 14, width: 14 }}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
@ -102,14 +104,14 @@
|
||||
}
|
||||
|
||||
.statusDone {
|
||||
color: #16A34A;
|
||||
color: #16a34a;
|
||||
|
||||
.statusText {
|
||||
color: #16A34A;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
color: #16A34A;
|
||||
color: #16a34a;
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,7 +160,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.1s ease;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
transform 0.1s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
|
||||
@ -12,13 +12,22 @@ import styles from "./PortraitCard.module.scss";
|
||||
type PortraitCardProps = PartnerPortrait;
|
||||
|
||||
const HeartCheckIcon = () => (
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_2443_1886)">
|
||||
<path d="M1.78594 8.96384L6.72695 13.5767C6.93203 13.7681 7.20273 13.8748 7.48438 13.8748C7.76602 13.8748 8.03672 13.7681 8.2418 13.5767L13.1828 8.96384C14.0141 8.19001 14.4844 7.10447 14.4844 5.9697V5.81111C14.4844 3.89978 13.1035 2.27009 11.2195 1.95564C9.97266 1.74783 8.70391 2.15525 7.8125 3.04666L7.48438 3.37478L7.15625 3.04666C6.26484 2.15525 4.99609 1.74783 3.74922 1.95564C1.86523 2.27009 0.484375 3.89978 0.484375 5.81111V5.9697C0.484375 7.10447 0.954687 8.19001 1.78594 8.96384Z" fill="#16A34A"/>
|
||||
<path
|
||||
d="M1.78594 8.96384L6.72695 13.5767C6.93203 13.7681 7.20273 13.8748 7.48438 13.8748C7.76602 13.8748 8.03672 13.7681 8.2418 13.5767L13.1828 8.96384C14.0141 8.19001 14.4844 7.10447 14.4844 5.9697V5.81111C14.4844 3.89978 13.1035 2.27009 11.2195 1.95564C9.97266 1.74783 8.70391 2.15525 7.8125 3.04666L7.48438 3.37478L7.15625 3.04666C6.26484 2.15525 4.99609 1.74783 3.74922 1.95564C1.86523 2.27009 0.484375 3.89978 0.484375 5.81111V5.9697C0.484375 7.10447 0.954687 8.19001 1.78594 8.96384Z"
|
||||
fill="#16A34A"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2443_1886">
|
||||
<path d="M0.484375 0.75H14.4844V14.75H0.484375V0.75Z" fill="white"/>
|
||||
<path d="M0.484375 0.75H14.4844V14.75H0.484375V0.75Z" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -35,21 +44,39 @@ const getStatusConfig = (status: PartnerPortrait["status"]) => {
|
||||
};
|
||||
case "processing":
|
||||
return {
|
||||
icon: <Icon name={IconName.Loader} className={styles.iconProcessing} size={{ width: 16, height: 16 }} />,
|
||||
icon: (
|
||||
<Icon
|
||||
name={IconName.Loader}
|
||||
className={styles.iconProcessing}
|
||||
size={{ width: 16, height: 16 }}
|
||||
/>
|
||||
),
|
||||
text: "Processing...",
|
||||
showCheckmark: false,
|
||||
className: styles.statusProcessing,
|
||||
};
|
||||
case "queued":
|
||||
return {
|
||||
icon: <Icon name={IconName.Clock} className={styles.iconQueued} size={{ width: 16, height: 16 }} />,
|
||||
icon: (
|
||||
<Icon
|
||||
name={IconName.Clock}
|
||||
className={styles.iconQueued}
|
||||
size={{ width: 16, height: 16 }}
|
||||
/>
|
||||
),
|
||||
text: "In Queue",
|
||||
showCheckmark: false,
|
||||
className: styles.statusQueued,
|
||||
};
|
||||
case "error":
|
||||
return {
|
||||
icon: <Icon name={IconName.AlertCircle} className={styles.iconError} size={{ width: 16, height: 16 }} />,
|
||||
icon: (
|
||||
<Icon
|
||||
name={IconName.AlertCircle}
|
||||
className={styles.iconError}
|
||||
size={{ width: 16, height: 16 }}
|
||||
/>
|
||||
),
|
||||
text: "Error",
|
||||
showCheckmark: false,
|
||||
className: styles.statusError,
|
||||
@ -66,7 +93,10 @@ export default function PortraitCard({
|
||||
const router = useRouter();
|
||||
|
||||
// Use polling hook to update status in real-time
|
||||
const { status, imageUrl: polledImageUrl } = useGenerationStatus(_id, initialStatus);
|
||||
const { status, imageUrl: polledImageUrl } = useGenerationStatus(
|
||||
_id,
|
||||
initialStatus
|
||||
);
|
||||
|
||||
// Use polled imageUrl if available, otherwise use initial
|
||||
const imageUrl = polledImageUrl || initialImageUrl;
|
||||
@ -84,7 +114,7 @@ export default function PortraitCard({
|
||||
<Card
|
||||
className={`${styles.card} ${!isReady ? styles.disabled : ""}`}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: isReady ? 'pointer' : 'default' }}
|
||||
style={{ cursor: isReady ? "pointer" : "default" }}
|
||||
>
|
||||
<div className={styles.imageContainer}>
|
||||
{imageUrl ? (
|
||||
@ -98,17 +128,32 @@ export default function PortraitCard({
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.placeholderImage}>
|
||||
<Icon name={IconName.Loader} className={styles.placeholderLoader} size={{ width: 48, height: 48 }} />
|
||||
<Icon
|
||||
name={IconName.Loader}
|
||||
className={styles.placeholderLoader}
|
||||
size={{ width: 48, height: 48 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.textContent}>
|
||||
<Typography as="h3" size="lg" weight="semiBold" align="left" className={styles.title}>
|
||||
<Typography
|
||||
as="h3"
|
||||
size="lg"
|
||||
weight="semiBold"
|
||||
align="left"
|
||||
className={styles.title}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography size="sm" color="secondary" align="left" className={styles.subtitle}>
|
||||
<Typography
|
||||
size="sm"
|
||||
color="secondary"
|
||||
align="left"
|
||||
className={styles.subtitle}
|
||||
>
|
||||
Finding the One Guide
|
||||
</Typography>
|
||||
</div>
|
||||
@ -120,13 +165,21 @@ export default function PortraitCard({
|
||||
{statusConfig.text}
|
||||
</Typography>
|
||||
{statusConfig.showCheckmark && (
|
||||
<Icon name={IconName.Check} className={styles.checkmark} size={{ width: 14, height: 14 }} />
|
||||
<Icon
|
||||
name={IconName.Check}
|
||||
className={styles.checkmark}
|
||||
size={{ width: 14, height: 14 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{status === "done" && (
|
||||
<button className={styles.actionButton} aria-label="View portrait">
|
||||
<Icon name={IconName.ChevronRight} size={{ width: 20, height: 20 }} color="white" />
|
||||
<Icon
|
||||
name={IconName.ChevronRight}
|
||||
size={{ width: 20, height: 20 }}
|
||||
color="white"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,273 @@
|
||||
.container.container {
|
||||
display: flex;
|
||||
min-width: 260px;
|
||||
min-height: 280px;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border-radius: 24px;
|
||||
border: 0 solid #e5e7eb;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
box-shadow:
|
||||
0 4px 6px 0 rgba(0, 0, 0, 0.1),
|
||||
0 10px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
// Hover effect only for purchased cards (wrapped in Link)
|
||||
:global(a):hover & {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 6px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 12px 18px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.processing {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.processingOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Image section
|
||||
.image {
|
||||
display: flex;
|
||||
min-height: 160px;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
border: 0 solid #e5e7eb;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: lightgray 50% / cover no-repeat;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.imageContent {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.playIcon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 64px;
|
||||
height: 65px;
|
||||
|
||||
svg {
|
||||
width: 64px;
|
||||
height: 65px;
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content section
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-self: stretch;
|
||||
background: #fff;
|
||||
flex: 1;
|
||||
|
||||
.purchased & {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Top section
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
align-self: stretch;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 3px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.arrowButton {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 9999px;
|
||||
border: 0 solid #e5e7eb;
|
||||
background: #f5f5f7;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
svg {
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: stretch;
|
||||
color: #1d1d1f;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
align-self: stretch;
|
||||
color: #6b7280;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Bottom section
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.bottomText {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.duration {
|
||||
display: flex;
|
||||
width: 49px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
color: #6b7280;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.durationPurchased {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-self: stretch;
|
||||
color: #6b7280;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.discountBadge {
|
||||
display: flex;
|
||||
padding: 6px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
border-radius: 9999px;
|
||||
border: 0 solid #e5e7eb;
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
}
|
||||
|
||||
.discountText {
|
||||
color: #ff6b6b;
|
||||
text-align: center;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
|
||||
.oldPrice {
|
||||
color: #8b8b8b;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.buyButton.buyButton {
|
||||
display: flex;
|
||||
padding: 8px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
border: 0 solid #e5e7eb;
|
||||
background: #2563eb;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
width: auto;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { Button, Card, Spinner, Typography } from "@/components/ui";
|
||||
import { getFormattedPrice } from "@/shared/utils/price";
|
||||
import { Currency } from "@/types";
|
||||
|
||||
import styles from "./VideoGuideCard.module.scss";
|
||||
|
||||
interface VideoGuideCardProps {
|
||||
name: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
duration: string;
|
||||
price: number;
|
||||
oldPrice: number;
|
||||
discount: number;
|
||||
isPurchased: boolean;
|
||||
isCheckoutLoading?: boolean;
|
||||
isProcessingPurchase?: boolean;
|
||||
onPurchaseClick?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function VideoGuideCard(props: VideoGuideCardProps) {
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
imageUrl,
|
||||
duration,
|
||||
price,
|
||||
oldPrice,
|
||||
discount,
|
||||
isPurchased,
|
||||
isCheckoutLoading,
|
||||
isProcessingPurchase,
|
||||
onPurchaseClick,
|
||||
className,
|
||||
} = props;
|
||||
|
||||
const tCommon = useTranslations("Dashboard.videoGuides");
|
||||
|
||||
const currency = Currency.USD;
|
||||
|
||||
// Если идет обработка покупки - показываем только лоадер на всей карточке
|
||||
if (isProcessingPurchase) {
|
||||
return (
|
||||
<Card className={clsx(styles.container, className, styles.processing)}>
|
||||
<div className={styles.processingOverlay}>
|
||||
<Spinner size={40} />
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={clsx(
|
||||
styles.container,
|
||||
className,
|
||||
isPurchased && styles.purchased
|
||||
)}
|
||||
>
|
||||
{/* Image with Play Icon */}
|
||||
<div className={styles.image}>
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={name}
|
||||
width={260}
|
||||
height={160}
|
||||
unoptimized
|
||||
className={styles.imageContent}
|
||||
/>
|
||||
<div className={styles.playIcon}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="65"
|
||||
viewBox="0 0 64 65"
|
||||
fill="none"
|
||||
>
|
||||
<g filter="url(#filter0_d_2540_2312)">
|
||||
<path
|
||||
d="M48.25 31C48.25 26.7247 46.538 22.6246 43.4905 19.6015C40.443 16.5784 36.3098 14.88 32 14.88C27.6902 14.88 23.557 16.5784 20.5095 19.6015C17.462 22.6246 15.75 26.7247 15.75 31C15.75 35.2753 17.462 39.3755 20.5095 42.3986C23.557 45.4217 27.6902 47.12 32 47.12C36.3098 47.12 40.443 45.4217 43.4905 42.3986C46.538 39.3755 48.25 35.2753 48.25 31ZM12 31C12 25.7381 14.1071 20.6918 17.8579 16.971C21.6086 13.2503 26.6957 11.16 32 11.16C37.3043 11.16 42.3914 13.2503 46.1421 16.971C49.8929 20.6918 52 25.7381 52 31C52 36.2619 49.8929 41.3083 46.1421 45.029C42.3914 48.7498 37.3043 50.84 32 50.84C26.6957 50.84 21.6086 48.7498 17.8579 45.029C14.1071 41.3083 12 36.2619 12 31ZM26.7109 22.5603C27.3047 22.2348 28.0234 22.2425 28.6094 22.599L39.8594 29.419C40.4141 29.76 40.7578 30.3568 40.7578 31.0078C40.7578 31.6588 40.4141 32.2555 39.8594 32.5965L28.6094 39.4165C28.0313 39.7653 27.3047 39.7808 26.7109 39.4553C26.1172 39.1298 25.75 38.5098 25.75 37.8355V24.18C25.75 23.5058 26.1172 22.8858 26.7109 22.5603Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_2540_2312"
|
||||
x="-8.75"
|
||||
y="-10"
|
||||
width="84"
|
||||
height="86"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="2" />
|
||||
<feGaussianBlur stdDeviation="6" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2540_2312"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_2540_2312"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className={styles.content}>
|
||||
{/* Top Section */}
|
||||
<div className={styles.top}>
|
||||
<div className={styles.text}>
|
||||
<Typography as="h4" className={styles.title} align="left">
|
||||
{name}
|
||||
</Typography>
|
||||
<Typography as="p" className={styles.subtitle} align="left">
|
||||
{description}
|
||||
</Typography>
|
||||
</div>
|
||||
{isPurchased && (
|
||||
<button className={styles.arrowButton}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="8"
|
||||
height="14"
|
||||
viewBox="0 0 8 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.70859 6.29609C8.09922 6.68672 8.09922 7.32109 7.70859 7.71172L1.70859 13.7117C1.31797 14.1023 0.683594 14.1023 0.292969 13.7117C-0.0976562 13.3211 -0.0976562 12.6867 0.292969 12.2961L5.58672 7.00234L0.296094 1.70859C-0.0945313 1.31797 -0.0945313 0.683594 0.296094 0.292969C0.686719 -0.0976562 1.32109 -0.0976562 1.71172 0.292969L7.71172 6.29297L7.70859 6.29609Z"
|
||||
fill="#A0A7B5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className={styles.bottom}>
|
||||
{!isPurchased ? (
|
||||
<>
|
||||
<div className={styles.bottomText}>
|
||||
<Typography className={styles.duration} align="left">
|
||||
{duration}
|
||||
</Typography>
|
||||
<div className={styles.discountBadge}>
|
||||
<Typography className={styles.discountText}>
|
||||
{discount}% OFF{" "}
|
||||
<span className={styles.oldPrice}>
|
||||
{getFormattedPrice(oldPrice, currency)}
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className={styles.buyButton}
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onPurchaseClick?.();
|
||||
}}
|
||||
disabled={isCheckoutLoading}
|
||||
>
|
||||
{isCheckoutLoading ? (
|
||||
<Spinner size={20} />
|
||||
) : (
|
||||
tCommon("purchaseFor", {
|
||||
price: getFormattedPrice(price, currency),
|
||||
})
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Typography className={styles.durationPurchased} align="right">
|
||||
{duration}
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export { default as VideoGuideCard } from "./VideoGuideCard";
|
||||
@ -3,3 +3,4 @@ export { default as CompatibilityCard } from "./CompatibilityCard/CompatibilityC
|
||||
export { default as MeditationCard } from "./MeditationCard/MeditationCard";
|
||||
export { default as PalmCard } from "./PalmCard/PalmCard";
|
||||
export { default as PortraitCard } from "./PortraitCard/PortraitCard";
|
||||
export { default as VideoGuideCard } from "./VideoGuideCard/VideoGuideCard";
|
||||
|
||||
@ -31,7 +31,12 @@ export default function AdvisersSection({
|
||||
}: AdvisersSectionProps) {
|
||||
const assistants = use(promiseAssistants);
|
||||
const chats = use(promiseChats);
|
||||
const columns = getOptimalColumns(assistants?.length || 0);
|
||||
|
||||
if (!assistants || assistants.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const columns = getOptimalColumns(assistants.length);
|
||||
|
||||
return (
|
||||
<Section title="Advisers" contentClassName={styles.sectionContent}>
|
||||
|
||||
@ -22,7 +22,12 @@ export default function CompatibilitySection({
|
||||
gridDisplayMode = "horizontal",
|
||||
}: CompatibilitySectionProps) {
|
||||
const compatibilities = use(promise);
|
||||
const columns = Math.ceil(compatibilities?.length / 2);
|
||||
|
||||
if (!compatibilities || compatibilities.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const columns = Math.ceil(compatibilities.length / 2);
|
||||
|
||||
return (
|
||||
<Section title="Compatibility" contentClassName={styles.sectionContent}>
|
||||
|
||||
@ -20,7 +20,12 @@ export default function MeditationSection({
|
||||
gridDisplayMode = "horizontal",
|
||||
}: MeditationSectionProps) {
|
||||
const meditations = use(promise);
|
||||
const columns = meditations?.length;
|
||||
|
||||
if (!meditations || meditations.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const columns = meditations.length;
|
||||
|
||||
return (
|
||||
<Section title="Meditations" contentClassName={styles.sectionContent}>
|
||||
|
||||
@ -15,7 +15,12 @@ export default function PalmSection({
|
||||
promise: Promise<Action[]>;
|
||||
}) {
|
||||
const palms = use(promise);
|
||||
const columns = palms?.length;
|
||||
|
||||
if (!palms || palms.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const columns = palms.length;
|
||||
|
||||
return (
|
||||
<Section title="Palm" contentClassName={styles.sectionContent}>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
.sectionContent.sectionContent {
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: calc(100% + 32px);
|
||||
padding: 20px 16px 24px 16px;
|
||||
padding-right: 0;
|
||||
margin: -20px -16px -24px -16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
padding-right: 16px;
|
||||
grid-auto-rows: 1fr;
|
||||
|
||||
a,
|
||||
> div {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
import { Grid, Section } from "@/components/ui";
|
||||
import { VideoGuide } from "@/entities/dashboard/types";
|
||||
import { useVideoGuidePurchase } from "@/hooks/video-guides/useVideoGuidePurchase";
|
||||
|
||||
import { VideoGuideCard } from "../../cards";
|
||||
|
||||
import styles from "./VideoGuidesSection.module.scss";
|
||||
|
||||
interface VideoGuidesSectionProps {
|
||||
videoGuides: VideoGuide[];
|
||||
}
|
||||
|
||||
function VideoGuideCardWrapper({ videoGuide }: { videoGuide: VideoGuide }) {
|
||||
const { handlePurchase, isCheckoutLoading, isProcessingPurchase } =
|
||||
useVideoGuidePurchase({
|
||||
videoGuideId: videoGuide.id,
|
||||
productId: videoGuide.id,
|
||||
productKey: videoGuide.key,
|
||||
});
|
||||
|
||||
// Для купленных видео - ссылка на страницу просмотра
|
||||
const href =
|
||||
videoGuide.isPurchased && videoGuide.videoLink
|
||||
? `/video-guides/${videoGuide.id}`
|
||||
: "#";
|
||||
|
||||
const isClickable = videoGuide.isPurchased && videoGuide.videoLink;
|
||||
|
||||
const cardElement = (
|
||||
<VideoGuideCard
|
||||
name={videoGuide.name}
|
||||
description={videoGuide.description}
|
||||
imageUrl={videoGuide.imageUrl}
|
||||
duration={videoGuide.duration}
|
||||
price={videoGuide.price}
|
||||
oldPrice={videoGuide.oldPrice}
|
||||
discount={videoGuide.discount}
|
||||
isPurchased={videoGuide.isPurchased}
|
||||
isCheckoutLoading={isCheckoutLoading}
|
||||
isProcessingPurchase={isProcessingPurchase}
|
||||
onPurchaseClick={!videoGuide.isPurchased ? handlePurchase : undefined}
|
||||
/>
|
||||
);
|
||||
|
||||
if (isClickable) {
|
||||
return (
|
||||
<Link href={href} key={`video-guide-${videoGuide.id}`}>
|
||||
{cardElement}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return <div key={`video-guide-${videoGuide.id}`}>{cardElement}</div>;
|
||||
}
|
||||
|
||||
export default function VideoGuidesSection({
|
||||
videoGuides,
|
||||
}: VideoGuidesSectionProps) {
|
||||
if (!videoGuides || videoGuides.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const columns = videoGuides.length;
|
||||
|
||||
return (
|
||||
<Section title="Video Guides" contentClassName={styles.sectionContent}>
|
||||
<Grid columns={columns} className={styles.grid}>
|
||||
{videoGuides.map(videoGuide => (
|
||||
<VideoGuideCardWrapper
|
||||
key={`video-guide-${videoGuide.id}`}
|
||||
videoGuide={videoGuide}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export { default as VideoGuidesSection } from "./VideoGuidesSection";
|
||||
@ -20,3 +20,4 @@ export {
|
||||
PalmSectionSkeleton,
|
||||
} from "./PalmSection/PalmSection";
|
||||
export { default as PortraitsSection } from "./PortraitsSection/PortraitsSection";
|
||||
export { default as VideoGuidesSection } from "./VideoGuidesSection/VideoGuidesSection";
|
||||
|
||||
@ -12,9 +12,7 @@ import styles from "./DetailedPortraitCard.module.scss";
|
||||
|
||||
export default function DetailedPortraitCard() {
|
||||
const t = useTranslations(
|
||||
translatePathEmailMarketingSoulmateV1(
|
||||
"Landing.what-get.detailed-portrait"
|
||||
)
|
||||
translatePathEmailMarketingSoulmateV1("Landing.what-get.detailed-portrait")
|
||||
);
|
||||
const { user } = useUser();
|
||||
const gender = user?.profile?.gender;
|
||||
|
||||
@ -8,9 +8,7 @@ import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/transl
|
||||
import styles from "./GuaranteedSecurityPayments.module.scss";
|
||||
|
||||
export default function GuaranteedSecurityPayments() {
|
||||
const t = useTranslations(
|
||||
translatePathEmailMarketingSoulmateV1("Landing")
|
||||
);
|
||||
const t = useTranslations(translatePathEmailMarketingSoulmateV1("Landing"));
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Image
|
||||
|
||||
@ -22,9 +22,7 @@ type TMessagesKey = "me" | "advisor";
|
||||
|
||||
export default async function IndividualAdviceCard() {
|
||||
const t = await getTranslations(
|
||||
translatePathEmailMarketingSoulmateV1(
|
||||
"Landing.what-get.individual-advice"
|
||||
)
|
||||
translatePathEmailMarketingSoulmateV1("Landing.what-get.individual-advice")
|
||||
);
|
||||
|
||||
const messages = t.raw("messages") as Record<TMessagesKey, IMessage>;
|
||||
|
||||
@ -12,9 +12,7 @@ import styles from "./LandingButtonWrapper.module.scss";
|
||||
|
||||
export default function LandingButtonWrapper() {
|
||||
const router = useRouter();
|
||||
const t = useTranslations(
|
||||
translatePathEmailMarketingSoulmateV1("Landing")
|
||||
);
|
||||
const t = useTranslations(translatePathEmailMarketingSoulmateV1("Landing"));
|
||||
|
||||
const handleContinue = () => {
|
||||
router.push(ROUTES.emailMarketingSoulmateV1SpecialOffer());
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import {
|
||||
emailMarketingCompV2Images,
|
||||
} from "@/shared/constants/images";
|
||||
import { emailMarketingCompV2Images } from "@/shared/constants/images";
|
||||
|
||||
import styles from "./Payments.module.scss";
|
||||
|
||||
|
||||
@ -19,9 +19,7 @@ export default async function TrialIntervalOffer({
|
||||
newTrialInterval,
|
||||
}: ITrialIntervalOfferProps) {
|
||||
const t = await getTranslations(
|
||||
translatePathEmailMarketingSoulmateV1(
|
||||
"Landing.special-offer.trial-offer"
|
||||
)
|
||||
translatePathEmailMarketingSoulmateV1("Landing.special-offer.trial-offer")
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@ -14,7 +14,11 @@ interface PortraitViewProps {
|
||||
result?: string | null;
|
||||
}
|
||||
|
||||
export default function PortraitView({ title, imageUrl, result }: PortraitViewProps) {
|
||||
export default function PortraitView({
|
||||
title,
|
||||
imageUrl,
|
||||
result,
|
||||
}: PortraitViewProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleDownload = async () => {
|
||||
@ -42,7 +46,12 @@ export default function PortraitView({ title, imageUrl, result }: PortraitViewPr
|
||||
<button className={styles.backButton} onClick={() => router.back()}>
|
||||
<Icon name={IconName.ChevronLeft} size={{ width: 24, height: 24 }} />
|
||||
</button>
|
||||
<Typography as="h1" size="xl" weight="semiBold" className={styles.title}>
|
||||
<Typography
|
||||
as="h1"
|
||||
size="xl"
|
||||
weight="semiBold"
|
||||
className={styles.title}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</div>
|
||||
@ -67,28 +76,87 @@ export default function PortraitView({ title, imageUrl, result }: PortraitViewPr
|
||||
onClick={handleDownload}
|
||||
aria-label="Download portrait"
|
||||
>
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
width="52"
|
||||
height="52"
|
||||
viewBox="0 0 52 52"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g filter="url(#filter0_dd_2449_3797)">
|
||||
<path d="M6 22C6 10.9543 14.9543 2 26 2C37.0457 2 46 10.9543 46 22C46 33.0457 37.0457 42 26 42C14.9543 42 6 33.0457 6 22Z" fill="white" fillOpacity="0.75"/>
|
||||
<path d="M25 13.0124C24.9983 12.4601 25.4446 12.011 25.9969 12.0093C26.5492 12.0076 26.9983 12.4539 27 13.0061L25 13.0124Z" fill="#646464"/>
|
||||
<path d="M28.3158 20.2952L27.0269 21.5921L27 13.0063L25 13.0126L25.0269 21.5984L23.7301 20.3096C23.3383 19.9203 22.7051 19.9222 22.3158 20.314C21.9265 20.7057 21.9285 21.3389 22.3203 21.7282L22.3228 21.7307L22.3238 21.7317L26.039 25.4237L29.7206 21.7188L29.7262 21.7132L29.727 21.7124L29.7278 21.7116L29.7337 21.7057L28.3158 20.2952Z" fill="#646464"/>
|
||||
<path d="M29.7345 21.7049C30.1238 21.3131 30.1218 20.6799 29.7301 20.2906C29.3383 19.9014 28.7051 19.9034 28.3159 20.2951L29.7345 21.7049Z" fill="#646464"/>
|
||||
<path d="M18 22C18 20.8954 18.8954 20 20 20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18C17.7909 18 16 19.7909 16 22V28C16 30.2091 17.7909 32 20 32H31C33.7614 32 36 29.7614 36 27V22C36 19.7909 34.2091 18 32 18C31.4477 18 31 18.4477 31 19C31 19.5523 31.4477 20 32 20C33.1046 20 34 20.8954 34 22V27C34 28.6569 32.6569 30 31 30H20C18.8954 30 18 29.1046 18 28V22Z" fill="#646464"/>
|
||||
<path
|
||||
d="M6 22C6 10.9543 14.9543 2 26 2C37.0457 2 46 10.9543 46 22C46 33.0457 37.0457 42 26 42C14.9543 42 6 33.0457 6 22Z"
|
||||
fill="white"
|
||||
fillOpacity="0.75"
|
||||
/>
|
||||
<path
|
||||
d="M25 13.0124C24.9983 12.4601 25.4446 12.011 25.9969 12.0093C26.5492 12.0076 26.9983 12.4539 27 13.0061L25 13.0124Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
<path
|
||||
d="M28.3158 20.2952L27.0269 21.5921L27 13.0063L25 13.0126L25.0269 21.5984L23.7301 20.3096C23.3383 19.9203 22.7051 19.9222 22.3158 20.314C21.9265 20.7057 21.9285 21.3389 22.3203 21.7282L22.3228 21.7307L22.3238 21.7317L26.039 25.4237L29.7206 21.7188L29.7262 21.7132L29.727 21.7124L29.7278 21.7116L29.7337 21.7057L28.3158 20.2952Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
<path
|
||||
d="M29.7345 21.7049C30.1238 21.3131 30.1218 20.6799 29.7301 20.2906C29.3383 19.9014 28.7051 19.9034 28.3159 20.2951L29.7345 21.7049Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
<path
|
||||
d="M18 22C18 20.8954 18.8954 20 20 20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18C17.7909 18 16 19.7909 16 22V28C16 30.2091 17.7909 32 20 32H31C33.7614 32 36 29.7614 36 27V22C36 19.7909 34.2091 18 32 18C31.4477 18 31 18.4477 31 19C31 19.5523 31.4477 20 32 20C33.1046 20 34 20.8954 34 22V27C34 28.6569 32.6569 30 31 30H20C18.8954 30 18 29.1046 18 28V22Z"
|
||||
fill="#646464"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_2449_3797" x="0" y="0" width="52" height="52" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2449_3797"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_2449_3797" result="effect2_dropShadow_2449_3797"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2449_3797" result="shape"/>
|
||||
<filter
|
||||
id="filter0_dd_2449_3797"
|
||||
x="0"
|
||||
y="0"
|
||||
width="52"
|
||||
height="52"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="4" />
|
||||
<feGaussianBlur stdDeviation="3" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2449_3797"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="2" />
|
||||
<feGaussianBlur stdDeviation="2" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect1_dropShadow_2449_3797"
|
||||
result="effect2_dropShadow_2449_3797"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect2_dropShadow_2449_3797"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding-right: 40px; // Compensate for back button width
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.videoInner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.descriptionWrapper {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #646464;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { Icon, IconName, Typography } from "@/components/ui";
|
||||
|
||||
import styles from "./VideoGuideView.module.scss";
|
||||
|
||||
interface VideoGuideViewProps {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
videoLink: string;
|
||||
}
|
||||
|
||||
export default function VideoGuideView({
|
||||
name,
|
||||
description,
|
||||
videoLink,
|
||||
}: VideoGuideViewProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// Extract video ID from various YouTube URL formats
|
||||
const getYouTubeVideoId = (url: string): string | null => {
|
||||
const patterns = [
|
||||
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
|
||||
/^([a-zA-Z0-9_-]{11})$/, // Direct video ID
|
||||
];
|
||||
|
||||
for (const pattern of patterns) {
|
||||
const match = url.match(pattern);
|
||||
if (match) return match[1];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const videoId = getYouTubeVideoId(videoLink);
|
||||
const embedUrl = videoId
|
||||
? `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1`
|
||||
: videoLink;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* Header with back button and title */}
|
||||
<div className={styles.header}>
|
||||
<button className={styles.backButton} onClick={() => router.back()}>
|
||||
<Icon name={IconName.ChevronLeft} size={{ width: 24, height: 24 }} />
|
||||
</button>
|
||||
<Typography
|
||||
as="h1"
|
||||
size="xl"
|
||||
weight="semiBold"
|
||||
className={styles.title}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{/* Video and Description */}
|
||||
<div className={styles.contentWrapper}>
|
||||
{/* Video Player */}
|
||||
<div className={styles.videoContainer}>
|
||||
<div className={styles.videoInner}>
|
||||
<iframe
|
||||
src={embedUrl}
|
||||
title={name}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className={styles.video}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{description && (
|
||||
<div className={styles.descriptionWrapper}>
|
||||
<Typography as="p" size="md" className={styles.description}>
|
||||
{description}
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/components/domains/video-guides/index.ts
Normal file
1
src/components/domains/video-guides/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as VideoGuideView } from "./VideoGuideView/VideoGuideView";
|
||||
@ -35,10 +35,11 @@ export default function Header({
|
||||
const locale = useLocale();
|
||||
const pathnameWithoutLocale = stripLocale(pathname, locale);
|
||||
|
||||
// Hide header on portraits page
|
||||
// Hide header on portraits and video-guides pages
|
||||
const isPortraitsPage = pathnameWithoutLocale.startsWith("/portraits");
|
||||
const isVideoGuidesPage = pathnameWithoutLocale.startsWith("/video-guides");
|
||||
|
||||
if (isPortraitsPage) return null;
|
||||
if (isPortraitsPage || isVideoGuidesPage) return null;
|
||||
|
||||
const handleBack = () => {
|
||||
router.back();
|
||||
|
||||
@ -6,13 +6,15 @@
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
// Height: tab bar height + moderate overlap above tab bar
|
||||
height: calc(14px + 60px + 20px); // bottom offset + tab bar height + overlap above
|
||||
height: calc(
|
||||
14px + 60px + 20px
|
||||
); // bottom offset + tab bar height + overlap above
|
||||
z-index: 9994; // Just below the tab bar
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
pointer-events: none; // Don't block interactions
|
||||
|
||||
|
||||
// Fallback for browsers that don't support backdrop-filter
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
|
||||
@ -24,11 +24,12 @@ export default function NavigationBar() {
|
||||
const pathnameWithoutLocale = stripLocale(pathname, locale);
|
||||
const { totalUnreadCount } = useChats();
|
||||
|
||||
// Hide navigation bar on retaining funnel and portraits pages
|
||||
// Hide navigation bar on retaining funnel, portraits pages, and video guides pages
|
||||
const isRetainingFunnel = pathnameWithoutLocale.startsWith("/retaining");
|
||||
const isPortraitsPage = pathnameWithoutLocale.startsWith("/portraits");
|
||||
const isVideoGuidesPage = pathnameWithoutLocale.startsWith("/video-guides");
|
||||
|
||||
if (isRetainingFunnel || isPortraitsPage) return null;
|
||||
if (isRetainingFunnel || isPortraitsPage || isVideoGuidesPage) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -11,25 +11,9 @@ export default function AlertCircleIcon(props: SVGProps<SVGSVGElement>) {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M12 8V12"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="16"
|
||||
r="1"
|
||||
fill={color}
|
||||
/>
|
||||
<circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2" />
|
||||
<path d="M12 8V12" stroke={color} strokeWidth="2" strokeLinecap="round" />
|
||||
<circle cx="12" cy="16" r="1" fill={color} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@ -33,7 +33,13 @@ export default function MarkdownText({
|
||||
if (headerMatch) {
|
||||
const level = headerMatch[1].length;
|
||||
const text = headerMatch[2];
|
||||
const HeaderTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
||||
const HeaderTag = `h${level}` as
|
||||
| "h1"
|
||||
| "h2"
|
||||
| "h3"
|
||||
| "h4"
|
||||
| "h5"
|
||||
| "h6";
|
||||
elements.push(
|
||||
React.createElement(
|
||||
HeaderTag,
|
||||
|
||||
@ -8,7 +8,10 @@ export { default as FullScreenBlurModal } from "./FullScreenBlurModal/FullScreen
|
||||
export { default as GPTAnimationText } from "./GPTAnimationText/GPTAnimationText";
|
||||
export { default as Grid } from "./Grid/Grid";
|
||||
export { default as Icon, IconName, type IconProps } from "./Icon/Icon";
|
||||
export { default as IconLabel, type IconLabelProps } from "./IconLabel/IconLabel";
|
||||
export {
|
||||
default as IconLabel,
|
||||
type IconLabelProps,
|
||||
} from "./IconLabel/IconLabel";
|
||||
export { default as MarkdownText } from "./MarkdownText/MarkdownText";
|
||||
export { default as MetaLabel } from "./MetaLabel/MetaLabel";
|
||||
export { default as Modal, type ModalProps } from "./Modal/Modal";
|
||||
|
||||
38
src/entities/dashboard/actions.ts
Normal file
38
src/entities/dashboard/actions.ts
Normal file
@ -0,0 +1,38 @@
|
||||
"use server";
|
||||
|
||||
import { z } from "zod";
|
||||
|
||||
import { http } from "@/shared/api/httpClient";
|
||||
import { API_ROUTES } from "@/shared/constants/api-routes";
|
||||
import { ActionResponse } from "@/types";
|
||||
|
||||
const CheckVideoGuidePurchaseResponseSchema = z.object({
|
||||
isPurchased: z.boolean(),
|
||||
videoLink: z.string().nullable(),
|
||||
});
|
||||
|
||||
export type CheckVideoGuidePurchaseResponse = z.infer<
|
||||
typeof CheckVideoGuidePurchaseResponseSchema
|
||||
>;
|
||||
|
||||
export async function checkVideoGuidePurchase(
|
||||
productKey: string
|
||||
): Promise<ActionResponse<CheckVideoGuidePurchaseResponse>> {
|
||||
try {
|
||||
const response = await http.get<CheckVideoGuidePurchaseResponse>(
|
||||
API_ROUTES.checkVideoGuidePurchase(productKey),
|
||||
{
|
||||
cache: "no-store",
|
||||
schema: CheckVideoGuidePurchaseResponseSchema,
|
||||
}
|
||||
);
|
||||
|
||||
return { data: response, error: null };
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Failed to check video guide purchase:", error);
|
||||
const errorMessage =
|
||||
error instanceof Error ? error.message : "Something went wrong.";
|
||||
return { data: null, error: errorMessage };
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@ import { DashboardData, DashboardSchema } from "./types";
|
||||
|
||||
export const getDashboard = async () => {
|
||||
return http.get<DashboardData>(API_ROUTES.dashboard(), {
|
||||
tags: ["dashboard"],
|
||||
cache: "no-store", // Всегда свежие данные
|
||||
schema: DashboardSchema,
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
import { cache } from "react";
|
||||
|
||||
import { getDashboard } from "./api";
|
||||
|
||||
export const loadDashboard = cache(getDashboard);
|
||||
// Убран cache() для всегда свежих данных
|
||||
export const loadDashboard = getDashboard;
|
||||
|
||||
export const loadAssistants = cache(() =>
|
||||
loadDashboard().then(d => d.assistants)
|
||||
);
|
||||
export const loadCompatibility = cache(() =>
|
||||
loadDashboard().then(d => d.compatibilityActions)
|
||||
);
|
||||
export const loadMeditations = cache(() =>
|
||||
loadDashboard().then(d => d.meditations)
|
||||
);
|
||||
export const loadPalms = cache(() => loadDashboard().then(d => d.palmActions));
|
||||
export const loadPortraits = cache(() =>
|
||||
loadDashboard().then(d => d.partnerPortraits || [])
|
||||
);
|
||||
export const loadAssistants = () =>
|
||||
loadDashboard().then(d => d.assistants || []);
|
||||
|
||||
export const loadCompatibility = () =>
|
||||
loadDashboard().then(d => d.compatibilityActions || []);
|
||||
|
||||
export const loadMeditations = () =>
|
||||
loadDashboard().then(d => d.meditations || []);
|
||||
|
||||
export const loadPalms = () => loadDashboard().then(d => d.palmActions || []);
|
||||
|
||||
export const loadPortraits = () =>
|
||||
loadDashboard().then(d => d.partnerPortraits || []);
|
||||
|
||||
export const loadVideoGuides = () =>
|
||||
loadDashboard().then(d => d.videoGuides || []);
|
||||
|
||||
@ -61,12 +61,30 @@ export const PartnerPortraitSchema = z.object({
|
||||
});
|
||||
export type PartnerPortrait = z.infer<typeof PartnerPortraitSchema>;
|
||||
|
||||
/* ---------- Video Guide ---------- */
|
||||
export const VideoGuideSchema = z.object({
|
||||
id: z.string(),
|
||||
key: z.string(),
|
||||
type: z.string(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
imageUrl: z.string(),
|
||||
duration: z.string(),
|
||||
price: z.number(),
|
||||
oldPrice: z.number(),
|
||||
discount: z.number(),
|
||||
isPurchased: z.boolean(),
|
||||
videoLink: z.string().optional(),
|
||||
});
|
||||
export type VideoGuide = z.infer<typeof VideoGuideSchema>;
|
||||
|
||||
/* ---------- Итоговый ответ /dashboard ---------- */
|
||||
export const DashboardSchema = z.object({
|
||||
assistants: z.array(AssistantSchema),
|
||||
compatibilityActions: z.array(ActionSchema),
|
||||
palmActions: z.array(ActionSchema),
|
||||
meditations: z.array(ActionSchema),
|
||||
assistants: z.array(AssistantSchema).optional(),
|
||||
compatibilityActions: z.array(ActionSchema).optional(),
|
||||
palmActions: z.array(ActionSchema).optional(),
|
||||
meditations: z.array(ActionSchema).optional(),
|
||||
partnerPortraits: z.array(PartnerPortraitSchema).optional(),
|
||||
videoGuides: z.array(VideoGuideSchema).optional(),
|
||||
});
|
||||
export type DashboardData = z.infer<typeof DashboardSchema>;
|
||||
|
||||
@ -17,6 +17,9 @@ export const FunnelPaymentVariantSchema = z.object({
|
||||
id: z.string(),
|
||||
key: z.string(),
|
||||
type: z.string(),
|
||||
name: z.string().optional(),
|
||||
description: z.string().optional(),
|
||||
emoji: z.string().optional(),
|
||||
price: z.number(),
|
||||
oldPrice: z.number().optional(),
|
||||
trialPrice: z.number().optional(),
|
||||
@ -35,6 +38,7 @@ export const FunnelPaymentPlacementSchema = z.object({
|
||||
variants: z.array(FunnelPaymentVariantSchema).optional(),
|
||||
paymentUrl: z.string().optional(),
|
||||
type: z.string().optional(),
|
||||
title: z.string().optional(),
|
||||
});
|
||||
|
||||
export const FunnelSchema = z.object({
|
||||
|
||||
@ -144,7 +144,9 @@ export const useChatSocket = (
|
||||
autoTopUp: false,
|
||||
});
|
||||
// eslint-disable-next-line no-console
|
||||
console.info("Auto top-up disabled successfully after payment failure");
|
||||
console.info(
|
||||
"Auto top-up disabled successfully after payment failure"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
|
||||
@ -16,6 +16,7 @@ interface PageNavigationOptions<T> {
|
||||
}
|
||||
|
||||
interface PageNavigationReturn<T> {
|
||||
data: T[];
|
||||
currentItem: T | undefined;
|
||||
currentIndex: number;
|
||||
isFirst: boolean;
|
||||
@ -124,6 +125,7 @@ export function useMultiPageNavigation<T>({
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
data,
|
||||
currentItem,
|
||||
nextItem,
|
||||
currentIndex,
|
||||
@ -141,6 +143,7 @@ export function useMultiPageNavigation<T>({
|
||||
totalPages,
|
||||
}),
|
||||
[
|
||||
data,
|
||||
currentItem,
|
||||
nextItem,
|
||||
currentIndex,
|
||||
|
||||
@ -21,6 +21,7 @@ export function useSingleCheckout(options: UseSingleCheckoutOptions = {}) {
|
||||
if (isLoading) return;
|
||||
|
||||
setIsLoading(true);
|
||||
let shouldResetLoading = true;
|
||||
|
||||
try {
|
||||
const payload: SingleCheckoutRequest = {
|
||||
@ -45,11 +46,18 @@ export function useSingleCheckout(options: UseSingleCheckoutOptions = {}) {
|
||||
const { status, paymentUrl } = response.data.payment;
|
||||
|
||||
if (paymentUrl) {
|
||||
return window.location.replace(paymentUrl);
|
||||
// При редиректе на внешний платеж не сбрасываем isLoading
|
||||
shouldResetLoading = false;
|
||||
window.location.replace(paymentUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === "paid") {
|
||||
onSuccess?.();
|
||||
// При успешной покупке НЕ сбрасываем isLoading
|
||||
// onSuccess callback сам будет управлять состоянием через isNavigating
|
||||
shouldResetLoading = false;
|
||||
await onSuccess?.();
|
||||
return;
|
||||
} else {
|
||||
onError?.("Payment status is not paid");
|
||||
}
|
||||
@ -62,7 +70,10 @@ export function useSingleCheckout(options: UseSingleCheckoutOptions = {}) {
|
||||
error instanceof Error ? error.message : "Payment failed";
|
||||
onError?.(errorMessage);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
// Сбрасываем isLoading только если не было успешного платежа или редиректа
|
||||
if (shouldResetLoading) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[isLoading, returnUrl, onError, onSuccess]
|
||||
|
||||
@ -22,7 +22,7 @@ export function useTimer({
|
||||
|
||||
// Load from localStorage after mount (client-only)
|
||||
useEffect(() => {
|
||||
if (persist && storageKey && typeof window !== 'undefined') {
|
||||
if (persist && storageKey && typeof window !== "undefined") {
|
||||
const saved = localStorage.getItem(storageKey);
|
||||
if (saved !== null) {
|
||||
const parsed = parseInt(saved, 10);
|
||||
@ -36,7 +36,7 @@ export function useTimer({
|
||||
|
||||
// Save to localStorage when seconds change
|
||||
useEffect(() => {
|
||||
if (persist && storageKey && typeof window !== 'undefined') {
|
||||
if (persist && storageKey && typeof window !== "undefined") {
|
||||
localStorage.setItem(storageKey, seconds.toString());
|
||||
}
|
||||
}, [seconds, persist, storageKey]);
|
||||
@ -61,7 +61,7 @@ export function useTimer({
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setSeconds(initialSeconds);
|
||||
if (persist && storageKey && typeof window !== 'undefined') {
|
||||
if (persist && storageKey && typeof window !== "undefined") {
|
||||
localStorage.setItem(storageKey, initialSeconds.toString());
|
||||
}
|
||||
}, [initialSeconds, persist, storageKey]);
|
||||
|
||||
1
src/hooks/video-guides/index.ts
Normal file
1
src/hooks/video-guides/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { useVideoGuidePurchase } from "./useVideoGuidePurchase";
|
||||
122
src/hooks/video-guides/useVideoGuidePurchase.ts
Normal file
122
src/hooks/video-guides/useVideoGuidePurchase.ts
Normal file
@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { checkVideoGuidePurchase } from "@/entities/dashboard/actions";
|
||||
import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
|
||||
import { useToast } from "@/providers/toast-provider";
|
||||
import { ROUTES } from "@/shared/constants/client-routes";
|
||||
|
||||
interface UseVideoGuidePurchaseOptions {
|
||||
videoGuideId: string;
|
||||
productId: string;
|
||||
productKey: string;
|
||||
}
|
||||
|
||||
export function useVideoGuidePurchase(options: UseVideoGuidePurchaseOptions) {
|
||||
const { productId, productKey } = options;
|
||||
const { addToast } = useToast();
|
||||
const router = useRouter();
|
||||
const [isProcessingPurchase, setIsProcessingPurchase] = useState(false);
|
||||
const [isCheckingPurchase, setIsCheckingPurchase] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const { handleSingleCheckout, isLoading: isCheckoutLoading } =
|
||||
useSingleCheckout({
|
||||
onSuccess: async () => {
|
||||
// Показываем toast о успешной покупке
|
||||
addToast({
|
||||
variant: "success",
|
||||
message: "Video guide purchased successfully!",
|
||||
duration: 3000,
|
||||
});
|
||||
|
||||
// Включаем лоадер на всей карточке
|
||||
setIsProcessingPurchase(true);
|
||||
|
||||
// Ждем 4 секунды
|
||||
await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
|
||||
// Обновляем данные dashboard в transition
|
||||
// isPending будет true пока данные загружаются
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
|
||||
// Убираем наш флаг, но isPending продолжит показывать loader
|
||||
setIsProcessingPurchase(false);
|
||||
},
|
||||
onError: error => {
|
||||
addToast({
|
||||
variant: "error",
|
||||
message: error || "Purchase failed. Please try again.",
|
||||
duration: 5000,
|
||||
});
|
||||
},
|
||||
returnUrl: new URL(
|
||||
ROUTES.home(),
|
||||
process.env.NEXT_PUBLIC_APP_URL || ""
|
||||
).toString(),
|
||||
});
|
||||
|
||||
const handlePurchase = useCallback(async () => {
|
||||
// Сначала проверяем, не куплен ли уже продукт
|
||||
setIsCheckingPurchase(true);
|
||||
|
||||
try {
|
||||
const result = await checkVideoGuidePurchase(productKey);
|
||||
|
||||
if (result.data && result.data.isPurchased) {
|
||||
// Продукт уже куплен! Показываем сообщение и обновляем страницу
|
||||
addToast({
|
||||
variant: "success",
|
||||
message: "You already own this video guide!",
|
||||
duration: 3000,
|
||||
});
|
||||
|
||||
setIsCheckingPurchase(false);
|
||||
|
||||
// Включаем лоадер на всей карточке
|
||||
setIsProcessingPurchase(true);
|
||||
|
||||
// Даем небольшую задержку для плавного UX
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Обновляем данные dashboard в transition
|
||||
// isPending будет true пока данные загружаются
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
|
||||
// Убираем наш флаг, но isPending продолжит показывать loader
|
||||
setIsProcessingPurchase(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Продукт не куплен, продолжаем с checkout
|
||||
setIsCheckingPurchase(false);
|
||||
handleSingleCheckout({
|
||||
productId,
|
||||
key: productKey,
|
||||
});
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Error checking purchase status:", error);
|
||||
setIsCheckingPurchase(false);
|
||||
|
||||
// Даже если проверка не удалась, продолжаем с checkout
|
||||
// чтобы не блокировать покупку
|
||||
handleSingleCheckout({
|
||||
productId,
|
||||
key: productKey,
|
||||
});
|
||||
}
|
||||
}, [handleSingleCheckout, productId, productKey, addToast, router]);
|
||||
|
||||
return {
|
||||
handlePurchase,
|
||||
isCheckoutLoading: isCheckoutLoading || isCheckingPurchase, // Загрузка на кнопке (во время checkout или проверки)
|
||||
isProcessingPurchase: isProcessingPurchase || isPending, // Загрузка на всей карточке (включая transition)
|
||||
};
|
||||
}
|
||||
@ -13,6 +13,8 @@ const createRoute = (
|
||||
|
||||
export const API_ROUTES = {
|
||||
dashboard: () => createRoute(["dashboard"]),
|
||||
checkVideoGuidePurchase: (productKey: string) =>
|
||||
createRoute(["products", "video-guides", productKey, "check-purchase"]),
|
||||
subscriptions: () => createRoute(["payment", "subscriptions"], ROOT_ROUTE_V3),
|
||||
paymentCheckout: () => createRoute(["payment", "checkout"], ROOT_ROUTE_V2),
|
||||
paymentSingleCheckout: () => createRoute(["payment", "checkout"]),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user