AW-493-additional-purchases

add api using

messages/en.json

@@ -230,15 +230,19 @@
       "one_time_price_offer": "One time price offer: <price></price>",
       "choose_from": "Choose from 80+ experts astrologers.",
       "original_price": "Original price: {oldPrice} ",
-      "save": "Economisez 50",
+      "save": "Economisez {discount}%",
       "get_my_consultation": "Get my consultation",
-      "skip_this_offer": "Skip this offer"
+      "skip_this_offer": "Skip this offer",
+      "payment_error": "Something went wrong. Please try again later."
     },
     "add-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": "Get my copy",
+      "payment_error": "Something went wrong. Please try again later.",
+      "select_product_error": "Please select a product",
+      "skip_offer": "Skip offer",
 
       "products": {
         "main_ultra_pack": {

src/app/[locale]/(additional-purchases)/add-consultant/loading.module.scss

@@ -0,0 +1,6 @@
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100dvh;
+}

src/app/[locale]/(additional-purchases)/add-consultant/loading.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from "@/components/ui";
+
+import styles from "./loading.module.scss";
+
+export default function AddConsultantLoading() {
+  return (
+    <div className={styles.loading}>
+      <Spinner />
+    </div>
+  );
+}

src/app/[locale]/(additional-purchases)/add-consultant/page.module.scss

@@ -12,3 +12,7 @@
   border-radius: 8px;
   line-height: 125%;
 }
+
+.consultationTable.consultationTable {
+  margin-top: 16px;
+}

src/app/[locale]/(additional-purchases)/add-consultant/page.tsx

@@ -1,14 +1,25 @@
+import { Suspense } from "react";
 import { useTranslations } from "next-intl";
 
 import {
   AddConsultantButton,
   Caution,
   ConsultationTable,
+  ConsultationTableSkeleton,
 } from "@/components/domains/additional-purchases";
-import { Typography } from "@/components/ui";
+import { Card, Typography } from "@/components/ui";
+import {
+  loadFunnelProducts,
+  loadFunnelProperties,
+} from "@/entities/session/funnel/loaders";
+import { ELocalesPlacement } from "@/types";
 
 import styles from "./page.module.scss";
 
+const payload = {
+  funnel: ELocalesPlacement.CompatibilityV2,
+};
+
 export default function AddConsultant() {
   const t = useTranslations("AdditionalPurchases.add-consultant");
 
@@ -26,8 +37,17 @@ export default function AddConsultant() {
       >
         {t("exclusive_offer")}
       </Typography>
-      <ConsultationTable />
-      <AddConsultantButton />
+      <Suspense fallback={<ConsultationTableSkeleton />}>
+        <Card className={styles.consultationTable}>
+          <ConsultationTable
+            products={loadFunnelProducts(payload, "add_consultant")}
+            properties={loadFunnelProperties(payload, "add_consultant")}
+          />
+        </Card>
+      </Suspense>
+      <AddConsultantButton
+        products={loadFunnelProducts(payload, "add_consultant")}
+      />
     </>
   );
 }

src/app/[locale]/(additional-purchases)/add-guides/page.tsx

@@ -1,58 +1,28 @@
+import { Suspense } from "react";
 import { useTranslations } from "next-intl";
 
 import {
   AddGuidesButton,
   Caution,
-  IOffer,
   Offers,
+  OffersSkeleton,
+  ProductSelectionProvider,
 } from "@/components/domains/additional-purchases";
 import { Typography } from "@/components/ui";
+import { loadFunnelProducts } from "@/entities/session/funnel/loaders";
+import { ELocalesPlacement } from "@/types";
 
 import styles from "./page.module.scss";
 
-const PRODUCTS: (Omit<IOffer, "productKey"> & { key: string })[] = [
-  {
-    id: "67ae7c05b29427c9ae695039",
-    key: "main.ultra.pack",
-    type: "one_time",
-    price: 4999,
-    oldPrice: 2499.5,
-  },
-  {
-    id: "67ae7c05b29427c9ae69503c",
-    key: "main.numerology.analysis",
-    type: "one_time",
-    price: 1499,
-    oldPrice: 749.5,
-  },
-  {
-    id: "67ae7c05b29427c9ae69503e",
-    key: "main.tarot.reading",
-    type: "one_time",
-    price: 1999,
-    oldPrice: 999.5,
-  },
-  {
-    id: "6839ece6960824e7bba3e7bb",
-    key: "main.money.reading",
-    type: "one_time",
-    price: 1999,
-    oldPrice: 999.5,
-  },
-  {
-    id: "main_skip_offer",
-    key: "main.skip.offer",
-    type: "one_time",
-    price: 0,
-    oldPrice: 0,
-  },
-];
+const payload = {
+  funnel: ELocalesPlacement.CompatibilityV2,
+};
 
 export default function AddGuides() {
   const t = useTranslations("AdditionalPurchases.add-guides");
 
   return (
-    <>
+    <ProductSelectionProvider>
       <Caution />
       <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
         {t("title")}
@@ -60,11 +30,13 @@ export default function AddGuides() {
       <Typography as="h3" size="sm" className={styles.subtitle}>
         {t("subtitle")}
       </Typography>
-      <Offers products={PRODUCTS} />
+      <Suspense fallback={<OffersSkeleton />}>
+        <Offers products={loadFunnelProducts(payload, "add_guides")} />
+      </Suspense>
       <Typography align="left" color="secondary" className={styles.description}>
         {t("description")}
       </Typography>
       <AddGuidesButton />
-    </>
+    </ProductSelectionProvider>
   );
 }

src/components/domains/additional-purchases/AddConsultantButton/AddConsultantButton.tsx

@@ -1,17 +1,59 @@
 "use client";
 
+import { use } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
-import { Button, Typography } from "@/components/ui";
+import { Button, Spinner, Typography } from "@/components/ui";
 import { BlurComponent } from "@/components/widgets";
+import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
+import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
+import { useToast } from "@/providers/toast-provider";
 import { ROUTES } from "@/shared/constants/client-routes";
 
 import styles from "./AddConsultantButton.module.scss";
 
-export default function AddConsultantButton() {
+interface AddConsultantButtonProps {
+  products: Promise<IFunnelPaymentVariant[]>;
+}
+
+export default function AddConsultantButton({
+  products,
+}: AddConsultantButtonProps) {
   const router = useRouter();
   const t = useTranslations("AdditionalPurchases.add-consultant");
+  const { addToast } = useToast();
+
+  const product = use(products)?.[0];
+
+  const { handleSingleCheckout, isLoading } = useSingleCheckout({
+    onSuccess: () => {
+      router.push(ROUTES.addGuides());
+    },
+    onError: _error => {
+      addToast({
+        variant: "error",
+        message: t("payment_error"),
+        duration: 5000,
+      });
+    },
+  });
+
+  const handleGetConsultation = () => {
+    if (!product) {
+      addToast({
+        variant: "error",
+        message: t("payment_error"),
+        duration: 5000,
+      });
+      return;
+    }
+
+    handleSingleCheckout({
+      productId: product.id,
+      key: product.key,
+    });
+  };
 
   const handleSkipOffer = () => {
     router.push(ROUTES.addGuides());
@@ -19,12 +61,24 @@ export default function AddConsultantButton() {
 
   return (
     <BlurComponent isActiveBlur={true} className={styles.container}>
-      <Button className={styles.button}>
-        <Typography weight="semiBold" color="white">
-          {t("get_my_consultation")}
-        </Typography>
+      <Button
+        className={styles.button}
+        onClick={handleGetConsultation}
+        disabled={isLoading || !product}
+      >
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <Typography weight="semiBold" color="white">
+            {t("get_my_consultation")}
+          </Typography>
+        )}
       </Button>
-      <Button className={styles.skipButton} onClick={handleSkipOffer}>
+      <Button
+        className={styles.skipButton}
+        onClick={handleSkipOffer}
+        disabled={isLoading}
+      >
         <Typography size="sm" color="black">
           {t("skip_this_offer")}
         </Typography>

src/components/domains/additional-purchases/AddGuidesButton/AddGuidesButton.tsx

@@ -1,19 +1,73 @@
+"use client";
+
+import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
-import { Button, Typography } from "@/components/ui";
+import { Button, Spinner, Typography } from "@/components/ui";
 import { BlurComponent } from "@/components/widgets";
+import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
+import { useToast } from "@/providers/toast-provider";
+import { ROUTES } from "@/shared/constants/client-routes";
+
+import { useProductSelection } from "../ProductSelectionContext";
 
 import styles from "./AddGuidesButton.module.scss";
 
 export default function AddGuidesButton() {
   const t = useTranslations("AdditionalPurchases.add-guides");
+  const router = useRouter();
+  const { addToast } = useToast();
+  const { selectedProduct } = useProductSelection();
+
+  const { handleSingleCheckout, isLoading } = useSingleCheckout({
+    onSuccess: () => {
+      router.push(ROUTES.home());
+    },
+    onError: _error => {
+      addToast({
+        variant: "error",
+        message: t("payment_error"),
+        duration: 5000,
+      });
+    },
+  });
+
+  const handlePurchase = () => {
+    if (!selectedProduct) {
+      addToast({
+        variant: "error",
+        message: t("select_product_error"),
+        duration: 5000,
+      });
+      return;
+    }
+
+    handleSingleCheckout({
+      productId: selectedProduct.id,
+      key: selectedProduct.key,
+    });
+  };
+
+  const handleSkipOffer = () => {
+    router.push(ROUTES.home());
+  };
+
+  const isSkipOffer = selectedProduct?.id === "main_skip_offer";
 
   return (
     <BlurComponent isActiveBlur={true} className={styles.container}>
-      <Button className={styles.button}>
-        <Typography weight="semiBold" color="white">
-          {t("button")}
-        </Typography>
+      <Button
+        className={styles.button}
+        onClick={isSkipOffer ? handleSkipOffer : handlePurchase}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <Typography weight="semiBold" color="white">
+            {isSkipOffer ? t("skip_offer") : t("button")}
+          </Typography>
+        )}
       </Button>
     </BlurComponent>
   );

src/components/domains/additional-purchases/ConsultationTable/ConsultationTable.module.scss

@@ -1,5 +1,4 @@
 .container {
-  margin: 12px auto 0;
   display: flex;
   flex-direction: column;
   -webkit-box-align: center;

src/components/domains/additional-purchases/ConsultationTable/ConsultationTable.tsx

@@ -1,17 +1,37 @@
 import Image from "next/image";
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 
-import { Typography } from "@/components/ui";
+import { Skeleton, Typography } from "@/components/ui";
+import {
+  IFunnelPaymentProperty,
+  IFunnelPaymentVariant,
+} from "@/entities/session/funnel/types";
 import { getFormattedPrice } from "@/shared/utils/price";
 import { Currency } from "@/types";
 
 import styles from "./ConsultationTable.module.scss";
 
-export default function ConsultationTable() {
-  const t = useTranslations("AdditionalPurchases.add-consultant");
+interface ConsultationTableProps {
+  products: Promise<IFunnelPaymentVariant[]>;
+  properties: Promise<IFunnelPaymentProperty[]>;
+}
+
+export default async function ConsultationTable({
+  products,
+  properties,
+}: ConsultationTableProps) {
+  const t = await getTranslations("AdditionalPurchases.add-consultant");
   const currency = Currency.USD;
 
-  const price = getFormattedPrice(4985, currency);
+  const product = (await products)?.[0];
+  const discount =
+    (await properties)?.find(p => p.key === "discount")?.value ?? 0;
+
+  const price = getFormattedPrice(product?.price ?? 0, currency);
+  const oldPrice = getFormattedPrice(
+    (Number(product?.price) / (Number(discount) || 100)) * 100,
+    currency
+  );
 
   return (
     <div className={styles.container}>
@@ -64,10 +84,12 @@ export default function ConsultationTable() {
           className={styles.oldPrice}
         >
           {t("original_price", {
-            oldPrice: getFormattedPrice(9999, currency),
+            oldPrice: oldPrice,
           })}
           <Typography weight="bold" className={styles.save}>
-            {t("save")}
+            {t("save", {
+              discount: discount,
+            })}
           </Typography>
         </Typography>
         <div className={styles.line} />
@@ -87,3 +109,7 @@ export default function ConsultationTable() {
     </div>
   );
 }
+
+export function ConsultationTableSkeleton() {
+  return <Skeleton style={{ height: "300px", marginTop: "24px" }} />;
+}

src/components/domains/additional-purchases/Offer/Offer.tsx

@@ -2,31 +2,28 @@ import Image from "next/image";
 import { useTranslations } from "next-intl";
 
 import { Card, Typography } from "@/components/ui";
+import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
 import { getFormattedPrice } from "@/shared/utils/price";
 import { Currency } from "@/types";
 
 import styles from "./Offer.module.scss";
 
-export interface IOffer {
-  id: string;
-  productKey: string;
-  type: "one_time" | string;
-  price: number;
-  oldPrice: number;
-}
-
-interface OfferProps extends IOffer {
+interface OfferProps {
+  offer: IFunnelPaymentVariant;
   isActive: boolean;
   className?: string;
   onClick: () => void;
 }
 
 export default function Offer(props: OfferProps) {
-  const { id, productKey, isActive, price, oldPrice, className, onClick } =
-    props;
+  const { offer, isActive, className, onClick } = props;
+
+  const { key, price, oldPrice } = offer;
+
+  const productKey = key.replaceAll(".", "_");
 
   const t = useTranslations(
-    `AdditionalPurchases.add-guides.products.${productKey?.replaceAll(".", "_")}`
+    `AdditionalPurchases.add-guides.products.${productKey}`
   );
 
   const currency = Currency.USD;
@@ -67,7 +64,7 @@ export default function Offer(props: OfferProps) {
         >
           {t("title")}
         </Typography>
-        {!!subtitle?.length && id !== "main_skip_offer" && (
+        {!!subtitle?.length && productKey !== "main_skip_offer" && (
           <Typography
             align="left"
             size="sm"
@@ -78,7 +75,7 @@ export default function Offer(props: OfferProps) {
           </Typography>
         )}
         <div className={styles.priceContainer}>
-          {id !== "main_skip_offer" && (
+          {productKey !== "main_skip_offer" && (
             <Typography
               align="left"
               color={typographyColor}
@@ -111,7 +108,7 @@ export default function Offer(props: OfferProps) {
             </Typography>
           )}
 
-          {id === "main_skip_offer" && (
+          {productKey === "main_skip_offer" && (
             <Typography
               align="left"
               size="xs"
@@ -122,7 +119,7 @@ export default function Offer(props: OfferProps) {
             </Typography>
           )}
 
-          {id !== "ultra_pack" && (
+          {productKey !== "ultra_pack" && (
             <div className={styles.discountContainer}>
               <Typography
                 size="xs"

src/components/domains/additional-purchases/Offers/Offers.tsx

@@ -1,29 +1,64 @@
 "use client";
 
-import { useState } from "react";
+import { use, useEffect, useState } from "react";
+
+import { Skeleton } from "@/components/ui";
+import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
+
+import { useProductSelection } from "../ProductSelectionContext";
 
 import styles from "./Offers.module.scss";
 
-import { IOffer, Offer } from "..";
+import { Offer } from "..";
 
 interface OffersProps {
-  products: (Omit<IOffer, "productKey"> & { key: string })[];
+  products: Promise<IFunnelPaymentVariant[]>;
 }
 
 export default function Offers({ products }: OffersProps) {
-  const [activeOffer, setActiveOffer] = useState<string>(products[0].id);
+  const offers = use(products);
+  const [allOffers, setAllOffers] = useState<IFunnelPaymentVariant[]>([]);
+  const [activeOffer, setActiveOffer] = useState<string>("");
+  const { setSelectedProduct } = useProductSelection();
+
+  useEffect(() => {
+    const skipOffer: IFunnelPaymentVariant = {
+      id: "main_skip_offer",
+      key: "main.skip.offer",
+      type: "one_time",
+      price: 0,
+      oldPrice: 0,
+    };
+
+    const offersWithSkip = [...offers, skipOffer];
+    setAllOffers(offersWithSkip);
+    setActiveOffer(offers[0]?.id || skipOffer.id);
+
+    // Устанавливаем первый продукт как выбранный по умолчанию
+    if (offers[0]) {
+      setSelectedProduct(offers[0]);
+    }
+  }, [offers, setSelectedProduct]);
+
+  const handleOfferClick = (offer: IFunnelPaymentVariant) => {
+    setActiveOffer(offer.id);
+    setSelectedProduct(offer);
+  };
 
   return (
     <div className={styles.container}>
-      {products.map(product => (
+      {allOffers.map(offer => (
         <Offer
-          {...product}
-          key={product.id}
-          productKey={product.key}
-          isActive={activeOffer === product.id}
-          onClick={() => setActiveOffer(product.id)}
+          offer={offer}
+          key={offer.id}
+          isActive={activeOffer === offer.id}
+          onClick={() => handleOfferClick(offer)}
         />
       ))}
     </div>
   );
 }
+
+export function OffersSkeleton() {
+  return <Skeleton style={{ height: "400px" }} />;
+}

src/components/domains/additional-purchases/ProductSelectionContext.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+
+import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
+
+interface ProductSelectionContextType {
+  selectedProduct: IFunnelPaymentVariant | null;
+  setSelectedProduct: (product: IFunnelPaymentVariant | null) => void;
+}
+
+const ProductSelectionContext = createContext<
+  ProductSelectionContextType | undefined
+>(undefined);
+
+interface ProductSelectionProviderProps {
+  children: ReactNode;
+}
+
+export function ProductSelectionProvider({
+  children,
+}: ProductSelectionProviderProps) {
+  const [selectedProduct, setSelectedProduct] =
+    useState<IFunnelPaymentVariant | null>(null);
+
+  return (
+    <ProductSelectionContext.Provider
+      value={{ selectedProduct, setSelectedProduct }}
+    >
+      {children}
+    </ProductSelectionContext.Provider>
+  );
+}
+
+export function useProductSelection() {
+  const context = useContext(ProductSelectionContext);
+  if (!context) {
+    throw new Error(
+      "useProductSelection must be used within ProductSelectionProvider"
+    );
+  }
+  return context;
+}

src/components/domains/additional-purchases/index.ts

@@ -1,6 +1,13 @@
 export { default as AddConsultantButton } from "./AddConsultantButton/AddConsultantButton";
 export { default as AddGuidesButton } from "./AddGuidesButton/AddGuidesButton";
 export { default as Caution } from "./Caution/Caution";
-export { default as ConsultationTable } from "./ConsultationTable/ConsultationTable";
-export { type IOffer, default as Offer } from "./Offer/Offer";
-export { default as Offers } from "./Offers/Offers";
+export {
+  default as ConsultationTable,
+  ConsultationTableSkeleton,
+} from "./ConsultationTable/ConsultationTable";
+export { default as Offer } from "./Offer/Offer";
+export { default as Offers, OffersSkeleton } from "./Offers/Offers";
+export {
+  ProductSelectionProvider,
+  useProductSelection,
+} from "./ProductSelectionContext";

src/entities/payment/actions.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+import { ActionResponse } from "@/types";
+
+import {
+  SingleCheckoutRequest,
+  SingleCheckoutResponse,
+  SingleCheckoutResponseSchema,
+} from "./types";
+
+export async function performSingleCheckout(
+  payload: SingleCheckoutRequest
+): Promise<ActionResponse<SingleCheckoutResponse>> {
+  try {
+    const response = await http.post<SingleCheckoutResponse>(
+      API_ROUTES.paymentSingleCheckout(),
+      payload,
+      {
+        schema: SingleCheckoutResponseSchema,
+        revalidate: 0,
+      }
+    );
+
+    return { data: response, error: null };
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Failed to perform single checkout:", error);
+    const errorMessage =
+      error instanceof Error ? error.message : "Something went wrong.";
+    return { data: null, error: errorMessage };
+  }
+}

src/entities/payment/api.ts

@@ -5,6 +5,9 @@ import {
   CheckoutRequest,
   CheckoutResponse,
   CheckoutResponseSchema,
+  SingleCheckoutRequest,
+  SingleCheckoutResponse,
+  SingleCheckoutResponseSchema,
 } from "./types";
 
 export async function createPaymentCheckout(payload: CheckoutRequest) {
@@ -13,3 +16,16 @@ export async function createPaymentCheckout(payload: CheckoutRequest) {
     revalidate: 0,
   });
 }
+
+export async function createSinglePaymentCheckout(
+  payload: SingleCheckoutRequest
+) {
+  return http.post<SingleCheckoutResponse>(
+    API_ROUTES.paymentSingleCheckout(),
+    payload,
+    {
+      schema: SingleCheckoutResponseSchema,
+      revalidate: 0,
+    }
+  );
+}

src/entities/payment/types.ts

@@ -13,3 +13,37 @@ export const CheckoutResponseSchema = z.object({
   paymentUrl: z.string().url(),
 });
 export type CheckoutResponse = z.infer<typeof CheckoutResponseSchema>;
+
+export const PaymentInfoSchema = z.object({
+  productId: z.string(),
+  key: z.string(),
+});
+export type PaymentInfo = z.infer<typeof PaymentInfoSchema>;
+
+export const SingleCheckoutRequestSchema = z.object({
+  paymentInfo: PaymentInfoSchema,
+  return_url: z.string().optional(),
+});
+export type SingleCheckoutRequest = z.infer<typeof SingleCheckoutRequestSchema>;
+
+export const SingleCheckoutSuccessSchema = z.object({
+  payment: z.object({
+    status: z.string(),
+    invoiceId: z.string(),
+  }),
+});
+export type SingleCheckoutSuccess = z.infer<typeof SingleCheckoutSuccessSchema>;
+
+export const SingleCheckoutErrorSchema = z.object({
+  status: z.string(),
+  message: z.string(),
+});
+export type SingleCheckoutError = z.infer<typeof SingleCheckoutErrorSchema>;
+
+export const SingleCheckoutResponseSchema = z.union([
+  SingleCheckoutSuccessSchema,
+  SingleCheckoutErrorSchema,
+]);
+export type SingleCheckoutResponse = z.infer<
+  typeof SingleCheckoutResponseSchema
+>;

src/entities/session/funnel/api.ts

@@ -0,0 +1,12 @@
+import { http } from "@/shared/api/httpClient";
+import { API_ROUTES } from "@/shared/constants/api-routes";
+
+import { FunnelRequest, FunnelResponse, FunnelResponseSchema } from "./types";
+
+export const getFunnel = async (payload: FunnelRequest) => {
+  return http.post<FunnelResponse>(API_ROUTES.funnel(), payload, {
+    tags: ["funnel"],
+    schema: FunnelResponseSchema,
+    revalidate: 0,
+  });
+};

src/entities/session/funnel/loaders.ts

@@ -0,0 +1,41 @@
+import { cache } from "react";
+
+import { getFunnel } from "./api";
+import type { FunnelRequest } from "./types";
+
+export const loadFunnel = cache((payload: FunnelRequest) => getFunnel(payload));
+
+export const loadFunnelData = cache((payload: FunnelRequest) =>
+  loadFunnel(payload).then(d => d.data)
+);
+
+export const loadFunnelStatus = cache((payload: FunnelRequest) =>
+  loadFunnel(payload).then(d => d.status)
+);
+
+export const loadFunnelCurrency = cache((payload: FunnelRequest) =>
+  loadFunnelData(payload).then(d => d.currency)
+);
+
+export const loadFunnelLocale = cache((payload: FunnelRequest) =>
+  loadFunnelData(payload).then(d => d.locale)
+);
+
+export const loadFunnelPayment = cache((payload: FunnelRequest) =>
+  loadFunnelData(payload).then(d => d.payment)
+);
+
+export const loadFunnelPaymentById = cache(
+  (payload: FunnelRequest, paymentId: string) =>
+    loadFunnelData(payload).then(d => d.payment[paymentId])
+);
+
+export const loadFunnelProducts = cache(
+  (payload: FunnelRequest, paymentId: string) =>
+    loadFunnelPaymentById(payload, paymentId).then(d => d?.variants ?? [])
+);
+
+export const loadFunnelProperties = cache(
+  (payload: FunnelRequest, paymentId: string) =>
+    loadFunnelPaymentById(payload, paymentId).then(d => d?.properties ?? [])
+);

src/entities/session/funnel/types.ts

@@ -0,0 +1,61 @@
+import { z } from "zod";
+
+import { Currency, ELocalesPlacement } from "../../../types";
+
+// Request schemas
+export const FunnelRequestSchema = z.object({
+  funnel: z.nativeEnum(ELocalesPlacement),
+});
+
+// Response schemas
+export const FunnelPaymentPropertySchema = z.object({
+  key: z.string(),
+  value: z.union([z.string(), z.number()]),
+});
+
+export const FunnelPaymentVariantSchema = z.object({
+  id: z.string(),
+  key: z.string(),
+  type: z.string(),
+  price: z.number(),
+  oldPrice: z.number().optional(),
+  trialPrice: z.number().optional(),
+});
+
+export const FunnelPaymentPlacementSchema = z.object({
+  price: z.number().optional(),
+  currency: z.nativeEnum(Currency).optional(),
+  billingPeriod: z.enum(["DAY", "WEEK", "MONTH", "YEAR"]).optional(),
+  billingInterval: z.number().optional(),
+  trialPeriod: z.enum(["DAY", "WEEK", "MONTH", "YEAR"]).optional(),
+  trialInterval: z.number().optional(),
+  placementId: z.string().optional(),
+  paywallId: z.string().optional(),
+  properties: z.array(FunnelPaymentPropertySchema).optional(),
+  variants: z.array(FunnelPaymentVariantSchema).optional(),
+  paymentUrl: z.string().optional(),
+});
+
+export const FunnelSchema = z.object({
+  currency: z.nativeEnum(Currency),
+  funnel: z.nativeEnum(ELocalesPlacement),
+  locale: z.string(),
+  payment: z.record(z.string(), FunnelPaymentPlacementSchema.nullable()),
+});
+
+export const FunnelResponseSchema = z.object({
+  status: z.union([z.literal("success"), z.string()]),
+  data: FunnelSchema,
+});
+
+// Type exports
+export type FunnelRequest = z.infer<typeof FunnelRequestSchema>;
+export type IFunnelPaymentProperty = z.infer<
+  typeof FunnelPaymentPropertySchema
+>;
+export type IFunnelPaymentVariant = z.infer<typeof FunnelPaymentVariantSchema>;
+export type IFunnelPaymentPlacement = z.infer<
+  typeof FunnelPaymentPlacementSchema
+>;
+export type IFunnel = z.infer<typeof FunnelSchema>;
+export type FunnelResponse = z.infer<typeof FunnelResponseSchema>;

src/hooks/payment/useSingleCheckout.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { performSingleCheckout } from "@/entities/payment/actions";
+import { PaymentInfo, SingleCheckoutRequest } from "@/entities/payment/types";
+
+interface UseSingleCheckoutOptions {
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}
+
+export function useSingleCheckout(options: UseSingleCheckoutOptions = {}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { onSuccess, onError } = options;
+
+  const handleSingleCheckout = useCallback(
+    async (paymentInfo: PaymentInfo) => {
+      if (isLoading) return;
+
+      setIsLoading(true);
+
+      try {
+        const payload: SingleCheckoutRequest = {
+          paymentInfo,
+        };
+
+        const response = await performSingleCheckout(payload);
+
+        if (response.error) {
+          onError?.(response.error);
+          return;
+        }
+
+        if (!response.data) {
+          onError?.("Payment failed");
+          return;
+        }
+
+        if ("payment" in response.data) {
+          const { status } = response.data.payment;
+
+          if (status === "paid") {
+            onSuccess?.();
+          } else {
+            onError?.("Payment status is not paid");
+          }
+        } else {
+          const errorMessage = response.data.message || "Payment failed";
+          onError?.(errorMessage);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Payment failed";
+        onError?.(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onSuccess, onError, isLoading]
+  );
+
+  return useMemo(
+    () => ({
+      handleSingleCheckout,
+      isLoading,
+    }),
+    [handleSingleCheckout, isLoading]
+  );
+}

src/shared/constants/api-routes.ts

@@ -15,6 +15,7 @@ export const API_ROUTES = {
   dashboard: () => createRoute(["dashboard"]),
   subscriptions: () => createRoute(["payment", "subscriptions"], ROOT_ROUTE_V3),
   paymentCheckout: () => createRoute(["payment", "checkout"], ROOT_ROUTE_V2),
+  paymentSingleCheckout: () => createRoute(["payment", "checkout"]),
   usersMe: () => createRoute(["users", "me"], ROOT_ROUTE),
   compatibilityActionFields: (id: string) =>
     createRoute(["dashboard", "compatibility-actions", id, "fields"]),
@@ -28,4 +29,7 @@ export const API_ROUTES = {
       ["payment", "subscriptions", subscriptionId, action],
       ROOT_ROUTE_V3
     ),
+
+  // session
+  funnel: () => createRoute(["session", "funnel"], ROOT_ROUTE_V2),
 };

src/types/index.ts

@@ -60,3 +60,26 @@ export type ActionResponse<T> = {
   data: T | null;
   error: string | null;
 };
+
+export enum ELocalesPlacement {
+  V0 = "v0", // Main site version
+  V1 = "v1",
+  PalmistryV0 = "palmistry-v0",
+  PalmistryV01 = "palmistry-v0_1",
+  PalmistryV1 = "palmistry-v1",
+  PalmistryV11 = "palmistry-v1_1",
+  Chats = "chats",
+  EmailMarketingCompatibilityV1 = "email-marketing-comp-v1",
+  EmailMarketingPalmistryV2 = "email-marketing-palmistry-v2",
+  EmailMarketingCompatibilityV2 = "email-marketing-comp-v2",
+  EmailMarketingCompatibilityV3 = "email-marketing-comp-v3",
+  EmailMarketingCompatibilityV4 = "email-marketing-comp-v4",
+  CompatibilityV2 = "compatibility-v2",
+  CompatibilityV3 = "compatibility-v3",
+  CompatibilityV4 = "compatibility-v4",
+  EmailGenerator = "email-generator",
+  Profile = "profile",
+  RetainingFunnel = "retaining-funnel",
+}
+
+export type PeriodType = "DAY" | "WEEK" | "MONTH" | "YEAR";