frontend/pages/new/prices.tsx (view raw)
1import pageUtils from '../../lib/pageUtils';
2import Layout from '../../layouts/EventCreation';
3import {Box, Paper, Typography} from '@mui/material';
4import {
5 Module,
6 ModuleDocument,
7 Enum_Userspermissionsuser_Lang as SupportedLocales,
8} from '../../generated/graphql';
9import {useTranslation} from 'react-i18next';
10import Head from 'next/head';
11import {useRouter} from 'next/router';
12import {useSession} from 'next-auth/react';
13
14interface Props {
15 modulesSettings?: Module;
16 announcement?: string;
17}
18const PlusPrices = (props: Props) => {
19 const {modulesSettings} = props;
20 const {t} = useTranslation();
21 const session = useSession();
22 const profile = session?.data?.profile;
23 const router = useRouter();
24 const eventUUID = router.query.eventId;
25
26 if (
27 !modulesSettings?.caroster_plus_pricing_grid_id ||
28 !modulesSettings.caroster_plus_publishable_key ||
29 !eventUUID
30 )
31 return (
32 <Layout {...props}>
33 <Typography>{t`options.no_module`}</Typography>
34 </Layout>
35 );
36
37 return (
38 <Layout {...props} maxWidth="xl">
39 <Head>
40 <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
41 </Head>
42 <Box component={Paper} mb={4}>
43 {/* @ts-ignore */}
44 <stripe-pricing-table
45 pricing-table-id={modulesSettings.caroster_plus_pricing_grid_id}
46 publishable-key={modulesSettings.caroster_plus_publishable_key}
47 client-reference-id={eventUUID}
48 customer-email={profile?.email}
49 />
50 </Box>
51 </Layout>
52 );
53};
54
55export const getServerSideProps = pageUtils.getServerSideProps(
56 async (context, apolloClient) => {
57 let modulesSettings = null;
58
59 // Fetch module settings
60 try {
61 const {data} = await apolloClient.query({
62 query: ModuleDocument,
63 variables: {locale: context.locale},
64 });
65 modulesSettings = data?.module?.data?.attributes || {};
66
67 if (!modulesSettings?.caroster_plus_pricing_grid_id) {
68 console.warn(
69 'Module settings are not set for locale: ',
70 context.locale,
71 ' fallback to English'
72 );
73 const {data: enData} = await apolloClient.query({
74 query: ModuleDocument,
75 variables: {locale: SupportedLocales['en']},
76 });
77 modulesSettings = enData?.module?.data?.attributes;
78 }
79 } catch (error) {
80 console.error("Can't fetch config for module: ", error);
81 }
82
83 return {props: {modulesSettings}};
84 }
85);
86
87export default PlusPrices;