@eventlook/sdk 1.7.2 → 1.7.3-beta.0

package/src/form/paydroid/PaydroidCashlessSection.tsx

@@ -0,0 +1,311 @@
+import { Image, varBounce } from '@components';
+import FormProvider, { RHFTextField, RHFCheckbox } from '@components/hook-form';
+import { Box, InputAdornment, Link, Stack, Typography, useTheme } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { m } from 'motion/react';
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
+import useGlobal from '@hooks/useGlobal';
+import { Currencies } from '@utils/data/currency';
+import { Page } from '@utils/data/page';
+import { postPaydroidCreateAccount, postPaydroidTopupAccount } from '@modules/paydroid';
+import {
+  getRedirectUrl,
+  transformToCreateAccountData,
+  transformToTopupAccountData,
+} from '@utils/paydroid';
+import { IOrderPaid } from '@utils/types/order.type';
+
+const PAYDROID_FONT = "'InterVariable', sans-serif";
+
+interface Props {
+  data: IOrderPaid;
+}
+
+interface PaydroidForm {
+  amount: string;
+  terms: boolean;
+}
+
+const PaydroidCashlessSection: React.FC<Props> = ({ data }) => {
+  const { t, showSnackbar, options } = useGlobal();
+  const theme = useTheme();
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const fonts = [
+      {
+        id: 'paydroid-inter-font',
+        href: 'https://eventigo.s3-central.vshosting.cloud/production/external/fonts/inter/inter.css',
+      },
+    ];
+
+    fonts.forEach(({ id, href }) => {
+      if (!document.getElementById(id)) {
+        const link = document.createElement('link');
+        link.id = id;
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.head.appendChild(link);
+      }
+    });
+  }, []);
+
+  const schema = Yup.object().shape({
+    amount: Yup.string().required(t('form.validation.required')),
+    terms: Yup.boolean().oneOf([true], t('form.validation.terms_and_conditions')).required(),
+  });
+
+  const methods = useForm<PaydroidForm>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      amount: '800',
+      terms: false,
+    },
+  });
+
+  const { handleSubmit, watch } = methods;
+  const termsAccepted = watch('terms');
+
+  const onSubmit = async (values: PaydroidForm) => {
+    if (!options?.paydroidApiKey) {
+      showSnackbar(t('event.tickets.payment_success.paydroid.missing_api_key'), {
+        variant: 'error',
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await postPaydroidCreateAccount(options.paydroidApiKey, transformToCreateAccountData(data));
+
+      const { data: topupData } = await postPaydroidTopupAccount(
+        options.paydroidApiKey,
+        transformToTopupAccountData(values.amount, data)
+      );
+
+      window.location.href = topupData.url;
+    } catch (error: any) {
+      console.log(error);
+      showSnackbar(error, { variant: 'error' });
+      setLoading(false);
+      window.location.href = getRedirectUrl(Page.PAYDROID_ERROR_TICKET);
+    }
+  };
+
+  const handleSkip = async () => {
+    if (!options?.paydroidApiKey) {
+      showSnackbar(t('event.tickets.payment_success.paydroid.missing_api_key'), {
+        variant: 'error',
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await postPaydroidCreateAccount(options.paydroidApiKey, transformToCreateAccountData(data));
+      window.location.href = getRedirectUrl(Page.PAYDROID_SUCCESS);
+    } catch (error: any) {
+      showSnackbar(error, { variant: 'error' });
+      setLoading(false);
+      window.location.href = getRedirectUrl(Page.PAYDROID_ERROR_ACCOUNT);
+    }
+  };
+
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  const termsLabel = (
+    <Typography component="span" variant="body2" color="text.secondary">
+      {tp('terms_prefix')}{' '}
+      <Link
+        href="https://www.paydroid.cz/obchodni-podminky"
+        target="_blank"
+        rel="noopener"
+        color="inherit"
+      >
+        {tp('terms_conditions')}
+      </Link>{' '}
+      {tp('terms_middle')}{' '}
+      <Link
+        href="https://www.paydroid.cz/ochrana-osobnich-udaju"
+        target="_blank"
+        rel="noopener"
+        color="inherit"
+      >
+        {tp('terms_privacy')}
+      </Link>
+    </Typography>
+  );
+
+  return (
+    <m.div variants={varBounce().in}>
+      <Box
+        py={6}
+        sx={{
+          bgcolor: 'background.neutral',
+          width: '100vw',
+          position: 'relative',
+          left: '50%',
+          ml: '-50vw',
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          justifyContent="center"
+          alignItems="center"
+          sx={{ mb: 4 }}
+        >
+          <Image
+            src={`https://eventigo.s3-central.vshosting.cloud/production/eventlook-logo${theme.palette.mode === 'dark' ? '-white.svg' : '.png'}`}
+            alt="EventLook"
+            sx={{ height: 32 }}
+          />
+          <Typography component="span" fontSize={20} fontWeight={500} color="text.secondary">
+            +
+          </Typography>
+          <Image
+            src={`https://eventigo.s3-central.vshosting.cloud/production/external/logo-paydroid-horizontal-${theme.palette.mode === 'dark' ? 'white' : 'black'}.svg`}
+            alt="Paydroid Cashless"
+            sx={{ height: 32 }}
+          />
+        </Stack>
+
+        <Box
+          sx={{
+            maxWidth: 520,
+            mx: 'auto',
+            bgcolor: 'background.paper',
+            borderRadius: 3,
+            px: { xs: 3, sm: 5 },
+            py: { xs: 4, sm: 5 },
+            textAlign: 'center',
+          }}
+        >
+          <Typography
+            sx={{
+              fontFamily: PAYDROID_FONT,
+              fontWeight: 900,
+              fontSize: { xs: 24, sm: 32 },
+              lineHeight: 1.15,
+              textTransform: 'uppercase',
+              wordSpacing: '0.15em',
+            }}
+          >
+            {tp('heading')}
+          </Typography>
+
+          <Typography
+            sx={{
+              fontFamily: PAYDROID_FONT,
+              fontWeight: 900,
+              fontSize: { xs: 24, sm: 32 },
+              lineHeight: 1.15,
+              textTransform: 'uppercase',
+              color: 'primary.main',
+              mb: 2,
+            }}
+          >
+            {tp('heading_cta')}
+          </Typography>
+
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ maxWidth: 380, mx: 'auto', mb: 4 }}
+          >
+            {tp('subtitle')}
+          </Typography>
+
+          <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+            <Typography variant="subtitle1" fontWeight={700} mb={1.5} textAlign="left">
+              {tp('amount_label')}
+            </Typography>
+
+            <RHFTextField
+              name="amount"
+              label={tp('amount_placeholder')}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">{Currencies[data.currency]}</InputAdornment>
+                  ),
+                },
+              }}
+              onChange={(e) => {
+                methods.setValue('amount', e.target.value.replace(/\D/g, ''));
+              }}
+              sx={{
+                width: '100%',
+                mb: 3,
+                '& .MuiInputBase-root': {
+                  borderRadius: 2,
+                },
+              }}
+            />
+
+            <Box textAlign="left">
+              <RHFCheckbox name="terms" label={termsLabel} />
+            </Box>
+
+            <Stack
+              flexDirection={{ xs: 'column', sm: 'row' }}
+              gap={2}
+              justifyContent="center"
+              mt={3}
+            >
+              <LoadingButton
+                variant="outlined"
+                color="inherit"
+                size="large"
+                onClick={handleSkip}
+                loading={loading}
+                disabled={!termsAccepted}
+                sx={{
+                  textTransform: 'none',
+                  color: 'text.secondary',
+                  borderColor: 'divider',
+                  borderRadius: 2,
+                  fontSize: 12,
+                }}
+              >
+                {tp('skip')}
+              </LoadingButton>
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                size="large"
+                disabled={!termsAccepted}
+                loading={loading}
+                sx={{
+                  bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.200' : '#1A1A1A'),
+                  color: (theme) => (theme.palette.mode === 'dark' ? 'grey.800' : 'white'),
+                  textTransform: 'none',
+                  borderRadius: 2,
+                  px: 5,
+                  fontSize: 12,
+                  fontWeight: 600,
+                  '&:hover': {
+                    bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : '#333'),
+                  },
+                  '&.Mui-disabled': {
+                    bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.200' : '#1A1A1A'),
+                    opacity: 0.5,
+                    color: (theme) => (theme.palette.mode === 'dark' ? 'grey.800' : 'white'),
+                  },
+                }}
+              >
+                {tp('submit')}
+              </LoadingButton>
+            </Stack>
+          </FormProvider>
+        </Box>
+      </Box>
+    </m.div>
+  );
+};
+
+export default PaydroidCashlessSection;

package/src/form/paydroid/PaydroidError.tsx

@@ -0,0 +1,26 @@
+import { Iconify } from '@components/iconify';
+import React from 'react';
+import useGlobal from '@hooks/useGlobal';
+import PaydroidStatusCard from './PaydroidStatusCard';
+
+const PaydroidError: React.FC = () => {
+  const { t } = useGlobal();
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  return (
+    <PaydroidStatusCard
+      icon={
+        <Iconify
+          icon="eva:close-circle-fill"
+          sx={{ color: 'error.main', width: 120, height: 120 }}
+        />
+      }
+      heading={tp('error_title')}
+      subtitle={tp('error_subtitle')}
+      buttonLabel={tp('retry_button')}
+      onButtonClick={() => window.history.back()}
+    />
+  );
+};
+
+export default PaydroidError;

package/src/form/paydroid/PaydroidErrorAccount.tsx

@@ -0,0 +1,26 @@
+import { Iconify } from '@components/iconify';
+import React from 'react';
+import useGlobal from '@hooks/useGlobal';
+import PaydroidStatusCard from './PaydroidStatusCard';
+
+const PaydroidErrorAccount: React.FC = () => {
+  const { t } = useGlobal();
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  return (
+    <PaydroidStatusCard
+      icon={
+        <Iconify
+          icon="eva:alert-triangle-fill"
+          sx={{ color: 'warning.main', width: 120, height: 120 }}
+        />
+      }
+      heading={tp('error_account_title')}
+      subtitle={tp('error_account_subtitle')}
+      buttonLabel={tp('error_account_button')}
+      onButtonClick={() => window.open('https://app.paydroid.cz', '_blank')}
+    />
+  );
+};
+
+export default PaydroidErrorAccount;

package/src/form/paydroid/PaydroidErrorTicket.tsx

@@ -0,0 +1,26 @@
+import { Iconify } from '@components/iconify';
+import React from 'react';
+import useGlobal from '@hooks/useGlobal';
+import PaydroidStatusCard from './PaydroidStatusCard';
+
+const PaydroidErrorTicket: React.FC = () => {
+  const { t } = useGlobal();
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  return (
+    <PaydroidStatusCard
+      icon={
+        <Iconify
+          icon="eva:close-circle-fill"
+          sx={{ color: 'error.main', width: 120, height: 120 }}
+        />
+      }
+      heading={tp('error_ticket_title')}
+      subtitle={tp('error_ticket_subtitle')}
+      buttonLabel={tp('retry_button')}
+      onButtonClick={() => window.history.back()}
+    />
+  );
+};
+
+export default PaydroidErrorTicket;

package/src/form/paydroid/PaydroidPage.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Page } from '@utils/data/page';
+import PaydroidSuccess from './PaydroidSuccess';
+import PaydroidSuccessTopup from './PaydroidSuccessTopup';
+import PaydroidError from './PaydroidError';
+import PaydroidErrorAccount from './PaydroidErrorAccount';
+import PaydroidErrorTicket from './PaydroidErrorTicket';
+
+interface Props {
+  page: string | null;
+}
+
+const PaydroidPage: React.FC<Props> = ({ page }) => {
+  if (page === Page.PAYDROID_SUCCESS) return <PaydroidSuccess />;
+  if (page === Page.PAYDROID_TOPUP_SUCCESS) return <PaydroidSuccessTopup />;
+  if (page === Page.PAYDROID_ERROR) return <PaydroidError />;
+  if (page === Page.PAYDROID_ERROR_ACCOUNT) return <PaydroidErrorAccount />;
+  if (page === Page.PAYDROID_ERROR_TICKET) return <PaydroidErrorTicket />;
+  return null;
+};
+
+export default PaydroidPage;

package/src/form/paydroid/PaydroidStatusCard.tsx

@@ -0,0 +1,91 @@
+import { Image } from '@components';
+import { Box, Button, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+const PAYDROID_FONT = "'InterVariable', sans-serif";
+
+interface Props {
+  icon: React.ReactNode;
+  heading: string;
+  subtitle: string;
+  buttonLabel: string;
+  onButtonClick: () => void;
+}
+
+const PaydroidStatusCard: React.FC<Props> = ({
+  icon,
+  heading,
+  subtitle,
+  buttonLabel,
+  onButtonClick,
+}) => {
+  const theme = useTheme();
+  const logoVariant = theme.palette.mode === 'dark' ? 'white' : 'black';
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+      <Box
+        sx={{
+          bgcolor: 'background.paper',
+          borderRadius: 4,
+          px: { xs: 4, sm: 6 },
+          py: { xs: 5, sm: 6 },
+          maxWidth: 480,
+          width: '100%',
+          textAlign: 'center',
+        }}
+      >
+        <Box sx={{ mb: 3 }}>{icon}</Box>
+
+        <Typography
+          sx={{
+            fontFamily: PAYDROID_FONT,
+            fontWeight: 900,
+            fontSize: { xs: 22, sm: 28 },
+            lineHeight: 1.15,
+            textTransform: 'uppercase',
+            letterSpacing: '-0.02em',
+            mb: 2,
+          }}
+        >
+          {heading}
+        </Typography>
+
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{ maxWidth: 340, mx: 'auto', mb: 4 }}
+        >
+          {subtitle}
+        </Typography>
+
+        <Button
+          onClick={onButtonClick}
+          variant="outlined"
+          color="inherit"
+          sx={{
+            borderColor: 'divider',
+            color: 'text.secondary',
+            textTransform: 'none',
+            borderRadius: 2,
+            mb: 4,
+            fontSize: 13,
+          }}
+        >
+          {buttonLabel}
+        </Button>
+
+        <Box>
+          <Image
+            src={`https://eventigo.s3-central.vshosting.cloud/production/external/logo-paydroid-horizontal-${logoVariant}.svg`}
+            alt="Paydroid Cashless"
+            objectFit="contain"
+            sx={{ height: 32 }}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default PaydroidStatusCard;

package/src/form/paydroid/PaydroidSuccess.tsx

@@ -0,0 +1,26 @@
+import { Iconify } from '@components/iconify';
+import React from 'react';
+import useGlobal from '@hooks/useGlobal';
+import PaydroidStatusCard from './PaydroidStatusCard';
+
+const PaydroidSuccess: React.FC = () => {
+  const { t } = useGlobal();
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  return (
+    <PaydroidStatusCard
+      icon={
+        <Iconify
+          icon="ion:ticket"
+          sx={{ color: '#1A237E', width: 120, height: 120, transform: 'rotate(15deg)' }}
+        />
+      }
+      heading={tp('success_title')}
+      subtitle={tp('success_subtitle')}
+      buttonLabel={tp('faq_button')}
+      onButtonClick={() => window.open('https://www.paydroid.cz/nejcastejsi-dotazy', '_blank')}
+    />
+  );
+};
+
+export default PaydroidSuccess;

package/src/form/paydroid/PaydroidSuccessTopup.tsx

@@ -0,0 +1,26 @@
+import { Iconify } from '@components/iconify';
+import React from 'react';
+import useGlobal from '@hooks/useGlobal';
+import PaydroidStatusCard from './PaydroidStatusCard';
+
+const PaydroidSuccessTopup: React.FC = () => {
+  const { t } = useGlobal();
+  const tp = (key: string) => t(`event.tickets.payment_success.paydroid.${key}`);
+
+  return (
+    <PaydroidStatusCard
+      icon={
+        <Iconify
+          icon="eva:checkmark-circle-2-fill"
+          sx={{ color: 'success.main', width: 120, height: 120 }}
+        />
+      }
+      heading={tp('topup_success_title')}
+      subtitle={tp('topup_success_subtitle')}
+      buttonLabel={tp('faq_button')}
+      onButtonClick={() => window.open('https://www.paydroid.cz/nejcastejsi-dotazy', '_blank')}
+    />
+  );
+};
+
+export default PaydroidSuccessTopup;