43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { Suspense } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import {
|
|
AddGuidesButton,
|
|
Caution,
|
|
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 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")}
|
|
</Typography>
|
|
<Typography as="h3" size="sm" className={styles.subtitle}>
|
|
{t("subtitle")}
|
|
</Typography>
|
|
<Suspense fallback={<OffersSkeleton />}>
|
|
<Offers products={loadFunnelProducts(payload, "add_guides")} />
|
|
</Suspense>
|
|
<Typography align="left" color="secondary" className={styles.description}>
|
|
{t("description")}
|
|
</Typography>
|
|
<AddGuidesButton />
|
|
</ProductSelectionProvider>
|
|
);
|
|
}
|