@eventlook/sdk 1.4.46-beta.2 → 1.4.46-beta.3

package/src/form/Payment.tsx

@@ -1,355 +0,0 @@
-import React, { KeyboardEvent, useEffect, useMemo, useState } from 'react';
-import {
-  Box,
-  Button,
-  Divider,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  IconButton,
-  Radio,
-  RadioGroup,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import useAllowedPaymentMethods from '@hooks/data/useAllowedPaymentMethods';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
-import { PaymentItem, PaymentWrapper, PaymentSwiftWrapper } from '@form/style';
-import Image from '@components/Image';
-import Label from '@components/Label';
-import PaymentSkeleton from '@form/payment/PaymentSkeleton';
-import { RHFRadioGroup } from '@components/hook-form';
-import { postPromoCodeApply } from '@modules/promo-code';
-import { IEvent } from '@utils/types/event.type';
-import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import useGlobal from '@hooks/useGlobal.ts';
-import { IPromoCode } from '@utils/types/promo-code.type';
-import { PromoCodeTypes } from '@utils/data/promo-code';
-import { throttle } from 'lodash';
-import { Iconify } from '@components';
-import { IEventProductForm } from '@utils/types/product.type';
-
-interface Props {
-  event: IEvent;
-}
-
-const Payment: React.FC<Props> = ({ event }) => {
-  const { t, lang } = useGlobal();
-  const { showSnackbar } = useGlobal();
-  const { data, isLoading } = useAllowedPaymentMethods(event.currency, event.id);
-  const { control, watch, setValue } = useFormContext<ITicketForm>();
-  const paymentMethodId = watch('paymentMethodId');
-  const paymentMethodOptionId = watch('paymentMethodOptionId');
-  const [promoCode, setPromoCode] = useState<string>('');
-  const [promoCodeError, setPromoCodeError] = useState<string | null>(null);
-  const [combine, setCombine] = useState<boolean>(true);
-  const promoCodes: IPromoCode[] = watch('promoCodes');
-  const originalPrice: number = watch('originalPrice');
-
-  const handleSubmit = throttle(
-    async () => {
-      if (!promoCode) {
-        setPromoCodeError(t('form.validation.required'));
-        return;
-      }
-
-      try {
-        if (promoCodes.find((i) => i.code === promoCode)) {
-          setPromoCodeError(t('form.validation.promo_code_applied'));
-          return;
-        }
-        if (!combine) {
-          setPromoCodeError(t('form.validation.promo_code_cant_combine'));
-          return;
-        }
-
-        const res = await postPromoCodeApply(promoCode, event.id);
-        const promo = res.data.data;
-
-        if (promo && promo.minPurchaseAmount && promo.minPurchaseAmount > originalPrice) {
-          setPromoCodeError(
-            t('form.validation.min_purchase_not_met') +
-              promo.minPurchaseAmount +
-              ' ' +
-              event.currency
-          );
-          return;
-        }
-
-        if (!promo.combine && promoCodes.length === 0) {
-          setCombine(false);
-        } else if (!promo.combine) {
-          setPromoCodeError(t('form.validation.promo_code_cant_combine'));
-          return;
-        }
-
-        setValue('promoCodes', [...promoCodes, promo]);
-        showSnackbar(res.message);
-        setPromoCodeError(null);
-        setPromoCode('');
-      } catch (err) {
-        setPromoCodeError(t('form.validation.promo_code_invalid'));
-        console.error(err);
-      }
-    },
-    1000,
-    { leading: true, trailing: false } // Allow immediate execution but prevent spam
-  );
-
-  const removePromoCode = (promoCodeToRemove: string) => {
-    const newPromoCodes: IPromoCode[] = promoCodes.filter(
-      (promoC) => promoC.code !== promoCodeToRemove
-    );
-
-    if (!newPromoCodes.find((promoC) => promoC.combine)) setCombine(true);
-
-    setValue('promoCodes', newPromoCodes);
-  };
-
-  const handleKeyDown = async (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      if (promoCode) await handleSubmit();
-    }
-  };
-
-  useEffect(() => {
-    if (promoCodes.length === 0) return;
-
-    const highest = promoCodes.sort((a, b) => b.minPurchaseAmount - a.minPurchaseAmount)[0]
-      .minPurchaseAmount;
-
-    if (originalPrice < highest) {
-      const newPromoCodes = promoCodes.filter(
-        (promoCode) => promoCode.minPurchaseAmount <= originalPrice
-      );
-      if (newPromoCodes.length === 0) {
-        setCombine(true);
-      }
-      setValue('promoCodes', newPromoCodes);
-    }
-  }, [originalPrice]);
-
-  useEffect(() => {
-    if (data) {
-      if (!paymentMethodId && !!data.length) {
-        setValue('paymentMethodId', data[0].id);
-      }
-      const selectedPayment =
-        data && data?.length && data.find((payment) => payment.id === Number(paymentMethodId));
-      if (selectedPayment && !!selectedPayment.options.length && !paymentMethodOptionId) {
-        setValue('paymentMethodOptionId', selectedPayment.options[0].id);
-      } else if (selectedPayment && !!selectedPayment.options.length && !!paymentMethodOptionId) {
-        const existingOption = selectedPayment.options.find(
-          (option) => option.id === Number(paymentMethodOptionId)
-        );
-        if (!existingOption) {
-          setValue('paymentMethodOptionId', selectedPayment.options[0].id);
-        }
-      } else if (selectedPayment && !selectedPayment?.options.length) {
-        setValue('paymentMethodOptionId', null);
-      }
-    }
-  }, [data, paymentMethodId, paymentMethodOptionId]);
-
-  const tickets: Record<string, ITicketFormTicket[]> = useWatch({
-    name: 'tickets',
-    defaultValue: {},
-  });
-  const products: Record<string, IEventProductForm[]> = useWatch({
-    name: 'products',
-    defaultValue: {},
-  });
-  const total: number = useWatch({ name: 'total' });
-
-  const paymentMethods = useMemo(() => {
-    if (!data) return [];
-
-    const hasTickets =
-      Object.values(tickets)
-        .flat()
-        .filter((t) => t.quantity).length > 0;
-    const hasProducts = Object.values(products).flat().length > 0;
-
-    if (total === 0 && (hasTickets || hasProducts)) {
-      setValue('isPaymentVerify', true);
-      return data.filter((payment) =>
-        ['PAYMENT_CARD', 'APPLE_PAY', 'GPAY', 'CLICK_TO_PAY'].includes(payment.type)
-      );
-    } else {
-      setValue('isPaymentVerify', false);
-      return data;
-    }
-  }, [data, total, tickets, products]);
-
-  return (
-    <Box>
-      <Box className="payment__promo-code">
-        <Stack direction="row" spacing={2}>
-          <TextField
-            name="promoCode"
-            size="small"
-            label={t('form.labels.promo_code')}
-            value={promoCode}
-            onChange={(e) => setPromoCode(e.target.value)}
-            onBlur={(e) => {
-              if (!e.target.value.trim()) setPromoCodeError(null);
-            }}
-            onKeyDown={handleKeyDown}
-            error={!!promoCodeError}
-            helperText={promoCodeError}
-            fullWidth
-          />
-          <Box>
-            <Button
-              size="large"
-              type="button"
-              variant="contained"
-              onClick={handleSubmit}
-              disabled={!promoCode}
-              sx={{ height: 51 }}
-            >
-              {t('apply')}
-            </Button>
-          </Box>
-        </Stack>
-        <Stack paddingTop={3} direction="column" spacing={1}>
-          {promoCodes.length > 0 &&
-            promoCodes.map((item: IPromoCode) => (
-              <Stack
-                marginTop={3}
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-                spacing={2}
-                key={item.code}
-              >
-                <>
-                  <Stack direction="row" alignItems="center">
-                    <Label variant="filled" sx={{ textTransform: 'none', cursor: 'pointer' }}>
-                      {item.code}
-                    </Label>
-                    <Typography variant="subtitle2" sx={{ ml: 1 }}>
-                      -{' '}
-                      {item.value +
-                        `${item.type === PromoCodeTypes.FIXED ? ' ' + event.currency : '%'}`}
-                    </Typography>
-                  </Stack>
-                  <Box>
-                    <IconButton
-                      color="primary"
-                      onClick={() => removePromoCode(item.code)}
-                      aria-label="delete"
-                    >
-                      <Iconify icon="carbon:trash-can" />
-                    </IconButton>
-                  </Box>
-                </>
-              </Stack>
-            ))}
-        </Stack>
-      </Box>
-
-      <Typography variant="h4" mt={2}>
-        {t('event.tickets.stepper.3.subtitle')}
-      </Typography>
-
-      {isLoading ? (
-        <PaymentSkeleton sx={{ marginTop: 1 }} />
-      ) : (
-        <PaymentWrapper>
-          <Controller
-            name="paymentMethodId"
-            control={control}
-            render={({ field, fieldState: { error } }) => (
-              <FormControl component="fieldset">
-                <RadioGroup {...field}>
-                  {paymentMethods.map((payment) => (
-                    <PaymentItem
-                      key={payment.type}
-                      active={!!paymentMethodId && Number(paymentMethodId) === payment.id}
-                    >
-                      <FormControlLabel
-                        value={payment.id}
-                        control={<Radio />}
-                        label={
-                          <Stack direction="row" alignItems="center">
-                            <Typography
-                              sx={{
-                                marginRight: 2,
-                              }}
-                            >
-                              {payment.label[lang]}
-                            </Typography>
-                            <Image
-                              src={payment.image.url}
-                              sx={{
-                                height: '20px',
-                                '& .wrapper img': {
-                                  objectFit: 'contain',
-                                },
-                              }}
-                            />
-                          </Stack>
-                        }
-                        sx={{
-                          '&:not(:last-of-type)': {
-                            mb: 0,
-                          },
-                        }}
-                      />
-                      {!!payment.options.length &&
-                        !!paymentMethodId &&
-                        Number(paymentMethodId) === payment.id && (
-                          <PaymentSwiftWrapper>
-                            <Divider sx={{ mb: 2 }} />
-                            <RHFRadioGroup
-                              name="paymentMethodOptionId"
-                              row
-                              options={payment.options
-                                .filter((item) => !item.label.en.includes('eshop.api.swifts'))
-                                .map((option) => ({
-                                  label: (
-                                    <Stack direction="row" alignItems="center">
-                                      <Image
-                                        src={option.image.url}
-                                        sx={{
-                                          width: 'auto',
-                                          height: '15px',
-                                          maxWidth: '70px',
-                                          display: 'inline-block',
-                                          marginRight: 1,
-                                          '& .wrapper img': {
-                                            objectFit: 'contain',
-                                            objectPosition: 'left',
-                                          },
-                                        }}
-                                      />
-                                      <Typography variant="body2">{option.label[lang]}</Typography>
-                                    </Stack>
-                                  ),
-                                  value: option.id,
-                                }))}
-                            />
-                          </PaymentSwiftWrapper>
-                        )}
-                    </PaymentItem>
-                  ))}
-                </RadioGroup>
-
-                {!!error && (
-                  <FormHelperText error={!!error} sx={{ mx: 0 }}>
-                    {error?.message}
-                  </FormHelperText>
-                )}
-              </FormControl>
-            )}
-          />
-        </PaymentWrapper>
-      )}
-    </Box>
-  );
-};
-
-export default Payment;