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

package/src/form/TicketForm.tsx

@@ -1,657 +0,0 @@
-import OrderSuccess from '@form/OrderSuccess';
-import PaymentSuccess from '@form/PaymentSuccess';
-import FormProvider, { RHFCheckbox } from '@components/hook-form';
-import {
-  Box,
-  Grid,
-  Link,
-  LinkProps,
-  Stack,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-} from '@mui/material';
-import dayjs from 'dayjs';
-import TicketSelection from '@form/tickets/TicketSelection';
-import ContactPerson from '@form/ContactPerson';
-import Payment from '@form/Payment';
-import EmailConfirmation from '@form/EmailConfirmation';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { PropsWithChildren } from '@utils/types/global.type';
-import { getSearchParamsInObject } from '@utils/url';
-import { ITicketBody, ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
-import * as Yup from 'yup';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { postOrder } from '@modules/order';
-import { IEvent } from '@utils/types/event.type';
-import PaymentOverviewBox from '@form/PaymentOverviewBox';
-import { IEcommerce, IPixels } from '@utils/types/gtm.type';
-import {
-  getGtmAddPaymentInfo,
-  getGtmBeginCheckout,
-  getGtmPageView,
-  getGtmPurchase,
-  getGtmViewCart,
-  gtmAddPaymentInfo,
-  gtmBeginCheckout,
-  gtmPurchase,
-  gtmViewCart,
-  mapUserToUserData,
-} from '@utils/gtm';
-import ReleaseCountdown from '@form/ReleaseCountdown';
-import { cloneObject } from '@utils/global';
-import PaymentPending from '@form/PaymentPending';
-import MerchandiseSelection from '@form/merchandise/MerchandiseSelection';
-import TicketWithMerchandiseSelection from '@form/tickets/TicketWithMerchandiseSelection';
-import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
-import Shipping from '@form/Shipping';
-import useErrors from '@hooks/useErrors';
-import { EventType } from '@utils/data/event';
-import TimeslotSelection from '@form/TimeslotSelection';
-import useGlobal from '@hooks/useGlobal';
-import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
-import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
-import PaymentOverviewDrawer from './PaymentOverviewDrawer';
-import { getPlaceAsString } from '@utils/place';
-import Services from '@form/services';
-
-interface Props {
-  event: IEvent;
-  hasGopayIdSsr: boolean;
-  selectedReleaseId?: number;
-  isIframe?: boolean;
-  isInline?: boolean;
-  headerSlot?: React.ReactNode;
-}
-
-const TicketForm: React.FC<Props> = ({
-  event,
-  hasGopayIdSsr,
-  selectedReleaseId,
-  isIframe,
-  isInline,
-  headerSlot,
-}) => {
-  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
-    useGlobal();
-  const { transformErrors } = useErrors(t('event.tickets.error.order'));
-  const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
-  const [paymentRedirect, setPaymentRedirect] = useState<string | null>(null);
-  const [hasGopayId, setHasGopayId] = useState<boolean>(hasGopayIdSsr);
-  const [isPaying, setIsPaying] = useState<boolean>(false);
-  const [formStep, setFormStep] = useState<number>(1);
-  const [showReleaseDate, setShowReleaseDate] = useState(
-    dayjs(event.releaseDate).diff(dayjs()) > 0
-  );
-  const [matchIsValidTel, setMatchIsValidTel] = useState<(text: string) => boolean>(() => false);
-  const isNotReleased = dayjs(event.releaseDate).diff(dayjs()) > 0;
-  const hasFiredViewCart = useRef(false);
-  const hasFiredBeginCheckout = useRef(false);
-  const hasFiredPaymentMethod = useRef(false);
-  const item: IEcommerce = {
-    currency: event.currency,
-    items: [
-      {
-        item_id: `event_${event.id}`,
-        item_name: event.name,
-        quantity: 1,
-      },
-    ],
-  };
-  const pixels: IPixels = {
-    fb_pixel_id: event.facebookPixel?.facebookId,
-    tiktok_pixel_id: event.tiktokPixel?.tiktokId,
-  };
-
-  useEffect(() => {
-    import('mui-tel-input').then((mod) => {
-      setMatchIsValidTel(() => mod.matchIsValidTel);
-    });
-  }, []);
-
-  useEffect(() => {
-    setGlobal({
-      options: {
-        isIframe: isIframe === undefined ? false : isIframe,
-      },
-    });
-    if (
-      !isIframe &&
-      event &&
-      (isNotReleased ||
-        (!!event.releaseEndDate && dayjs(event.releaseEndDate).isBefore(dayjs())) ||
-        dayjs(event.endDate).isBefore(dayjs()) ||
-        event.isSoldout ||
-        event.dateUnknown ||
-        event.isCanceled)
-    ) {
-      callbacks.detail();
-    }
-
-    if (event && !hasGopayId && !hasFiredViewCart.current) {
-      if (isIframe) {
-        setTimeout(() => {
-          parent.postMessage(
-            {
-              type: 'eventlookFrameGtm',
-              item: getGtmPageView(location.href),
-            },
-            '*'
-          );
-          parent.postMessage(
-            {
-              type: 'eventlookFrameGtm',
-              item: getGtmViewCart(item, pixels),
-            },
-            '*'
-          );
-        }, 1000);
-      } else {
-        gtmViewCart(item, pixels);
-      }
-      hasFiredViewCart.current = true;
-    }
-    if (!hasFiredPaymentMethod.current) {
-      const item = {
-        currency: event.currency,
-        value: 0,
-        payment_type: 'PAYMENT_CARD',
-        items: [],
-      };
-      if (isIframe) {
-        setTimeout(() => {
-          parent.postMessage(
-            {
-              type: 'eventlookFrameGtm',
-              item: getGtmAddPaymentInfo(item, pixels, user ? mapUserToUserData(user) : undefined),
-            },
-            '*'
-          );
-        }, 1000);
-      } else {
-        gtmAddPaymentInfo(item, pixels);
-      }
-      hasFiredPaymentMethod.current = true;
-    }
-  }, [event]);
-
-  const defaultValues: ITicketForm = useMemo(() => {
-    const makeTicket = (overrides: Partial<ITicketFormTicket> = {}): ITicketFormTicket => ({
-      releaseId: '',
-      quantity: '',
-      itemName: '',
-      price: 0,
-      products: [],
-      extraFields: [],
-      ...overrides,
-    });
-
-    const tickets: Record<string, ITicketFormTicket[]> = {
-      [String(event.id)]: [
-        makeTicket({
-          releaseId: (selectedReleaseId as number) ?? '',
-        }),
-      ],
-    };
-
-    event.children?.forEach((child) => {
-      tickets[String(child.id)] = [makeTicket()];
-    });
-
-    return {
-      uuid: null,
-      eventId: event.id,
-      tickets,
-      total: 0,
-      originalPrice: 0,
-      firstName: user?.firstName || '',
-      lastName: user?.lastName || '',
-      email: user?.email || '',
-      phone: user?.phone || '',
-      birthdate: user?.birthdate ? dayjs(user.birthdate) : null,
-      gender: user?.gender || '',
-      callback: '',
-      paymentMethodId: null,
-      paymentMethodOptionId: null,
-      termsAndConditions: false,
-      ticketInsurance: false,
-      ticketInsurancePrice: 0,
-      ticketInsurancePricePerUnit: 0,
-      smsNotification: false,
-      smsNotificationPrice: 0,
-      iframeCampaignId: undefined,
-      promoCodes: [],
-      products: {},
-      shipping: {
-        shippingMethodId: null,
-        branchId: null,
-        price: 0,
-      },
-      extraFields:
-        event?.extraFields.map((field) => ({
-          eventExtraFieldId: field.id,
-          value: '',
-        })) || [],
-      selectedDate: null,
-      eventTimeslotId: null,
-      isPaymentVerify: false,
-    };
-  }, [user]);
-
-  const ValidationSchema = Yup.object().shape({
-    firstName: Yup.string().required(t('form.validation.required')),
-    lastName: Yup.string().required(t('form.validation.required')),
-    email: Yup.string().email(t('form.validation.email')).required(t('form.validation.required')),
-    phone: Yup.string()
-      .required(t('form.validation.required'))
-      .test('phone-checker', t('form.validation.phone'), (value) =>
-        value ? matchIsValidTel(value) : false
-      ),
-    birthdate: Yup.object()
-      .nullable()
-      .default(null)
-      .when([], {
-        is: () => !content?.form?.disableBirthDate,
-        then: (s) => s.required(t('form.validation.required')),
-        otherwise: (s) => s.notRequired(),
-      }),
-    gender: Yup.string().when([], {
-      is: () => !content?.form?.disableGender,
-      then: (schema) => schema.required(t('form.validation.required')),
-      otherwise: (schema) => schema.notRequired(),
-    }),
-    // tickets: Yup.object().test('tickets-validation', function (tickets) {
-    //   if (!tickets || typeof tickets !== 'object') return false;
-
-    //   for (const key of Object.keys(tickets)) {
-    //     const arr = tickets[key];
-    //     if (!Array.isArray(arr)) return false;
-    //     for (const t of arr) {
-    //       if (!t.releaseId || !t.quantity) {
-    //         return this.createError({ message: 'Invalid ticket selection' });
-    //       }
-    //     }
-    //   }
-    //   return true;
-    // }),
-    shipping: Yup.object().shape({
-      shippingMethodId: Yup.number().nullable(),
-      branchId: Yup.string().nullable(),
-      price: Yup.number(),
-    }),
-    paymentMethodId: Yup.number().nullable().required(t('form.validation.required')),
-    paymentMethodOptionId: Yup.number().nullable(),
-    termsAndConditions: Yup.boolean().isTrue(t('form.validation.terms_and_conditions')),
-    ticketInsurance: Yup.boolean(),
-    smsNotification: Yup.boolean(),
-    extraFields: Yup.array().of(
-      Yup.object().shape({
-        value: Yup.string().test('is-required', function (value) {
-          const options = this.options as { index: number };
-
-          if (event.extraFields[options.index].required && !value) {
-            return this.createError({
-              message: t('form.validation.required'),
-            });
-          }
-          return true;
-        }),
-      })
-    ),
-  });
-
-  const methods = useForm<ITicketForm>({
-    // @ts-ignore
-    resolver: yupResolver(ValidationSchema),
-    defaultValues,
-  });
-  const values = methods.watch();
-
-  const onSubmit = async (values: ITicketForm) => {
-    const allTickets = Object.values(values.tickets).flat();
-    if (
-      allTickets.length === 1 &&
-      !allTickets[0].releaseId &&
-      !allTickets[0].quantity &&
-      !values.products.length
-    ) {
-      showSnackbar(t('form.validation.count_tickets_or_products'), {
-        variant: 'error',
-      });
-      return;
-    }
-
-    if (formStep === 1 && !isIframe) {
-      setFormStep(2);
-    } else {
-      try {
-        const data: ITicketBody = cloneObject(values);
-        data.paymentMethodId = Number(values.paymentMethodId);
-        data.promoCodeIds = values.promoCodes?.map((item) => item.id);
-        const urlParams = new URLSearchParams(window.location.search);
-        const iframeCallback = urlParams.get('callback');
-        data.callback = isIframe && iframeCallback ? String(iframeCallback) : window.location.href;
-        data.tickets = Object.entries(values.tickets).reduce(
-          (acc, [eventId, items]) => {
-            acc[Number(eventId)] = items
-              .filter((item) => !!item.quantity && !!item.releaseId)
-              .map((item) => ({
-                releaseId: Number(item.releaseId),
-                quantity: Number(item.quantity),
-                price: Number(item.price),
-                itemName: item.itemName,
-                products: item.products,
-                extraFields: item.extraFields,
-                eventTimeslotId: item.eventTimeslotId,
-                location: item.location,
-              }));
-            return acc;
-          },
-          {} as Record<number, ITicketFormTicket[]>
-        );
-        const { data: orderData } = await postOrder(data);
-        localStorage.removeItem('cartToken');
-        const items = [
-          ...orderData.tickets.map((ticket) => ({
-            item_id: ticket.number,
-            item_name: `${orderData.orderEntity.event.name} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
-            price: ticket.price,
-            quantity: 1,
-          })),
-        ];
-
-        if (orderData.orderEntity.extraFee) {
-          items.push({
-            item_id: 'service_fee',
-            item_name: `Service fee`,
-            price: orderData.orderEntity.extraFee,
-            quantity: 1,
-          });
-        }
-
-        const item = {
-          uuid: values.uuid,
-          currency: orderData.orderEntity.currency,
-          value: orderData.orderEntity.totalPrice,
-          tax: 0,
-          payment_type: orderData.orderEntity.paymentType,
-          transaction_id: String(orderData.orderEntity.number),
-          coupon: orderData?.orderEntity?.promoCodes?.map((p) => p.code) || [],
-          items,
-        };
-        const userData = {
-          fn: orderData.customer.firstName,
-          ln: orderData.customer.lastName,
-          em: orderData.customer.email,
-          ph: orderData.customer.phone,
-        };
-        if (isIframe) {
-          parent.postMessage(
-            {
-              type: 'eventlookFrameGtm',
-              item: getGtmPurchase(null),
-            },
-            '*'
-          );
-          parent.postMessage(
-            {
-              type: 'eventlookFrameGtm',
-              item: getGtmPurchase(item, pixels, userData),
-            },
-            '*'
-          );
-        } else {
-          gtmPurchase(null);
-          gtmPurchase(item, pixels, userData);
-        }
-        setPaymentRedirect(orderData.gwUrl);
-        methods.reset();
-      } catch (err: any) {
-        transformErrors(err.message);
-      }
-    }
-  };
-
-  const showShippingMethods = () => {
-    const hasProducts = Object.values(values.products ?? {}).some((arr) => arr.length > 0);
-
-    const ticketArrays = Object.values(values.tickets ?? {});
-    const allTickets = ticketArrays.flat();
-
-    const hasTicketProducts = allTickets.some((t) => (t.products?.length ?? 0) > 0);
-
-    const showShippingMethods = hasProducts || hasTicketProducts;
-
-    if (values.shipping.shippingMethodId !== null && !showShippingMethods) {
-      methods.setValue('shipping', { shippingMethodId: null, branchId: null, price: 0 });
-    }
-
-    return showShippingMethods;
-  };
-
-  useEffect(() => {
-    methods.reset(defaultValues);
-  }, [user, defaultValues]);
-
-  useEffect(() => {
-    const searchParams = getSearchParamsInObject(window.location.search);
-    const paymentId = searchParams.id;
-    const iframeCampaignId = Number(searchParams.iframeCampaignId);
-    setHasGopayId(!!paymentId);
-    if (!isNaN(iframeCampaignId)) {
-      methods.setValue('iframeCampaignId', iframeCampaignId);
-    }
-  }, [window.location.search]);
-
-  useEffect(() => {
-    const subscription = methods.watch((value) => {
-      if (
-        JSON.stringify(defaultValues) !== JSON.stringify(value) &&
-        !hasFiredBeginCheckout.current
-      ) {
-        if (isIframe) {
-          setTimeout(() => {
-            parent.postMessage(
-              {
-                type: 'eventlookFrameGtm',
-                item: getGtmBeginCheckout(item, pixels),
-              },
-              '*'
-            );
-          }, 1000);
-        } else {
-          gtmBeginCheckout(item, pixels, user ? mapUserToUserData(user) : undefined);
-        }
-        hasFiredBeginCheckout.current = true;
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [methods.watch, defaultValues]);
-
-  useEffect(() => {
-    if (hasGopayId || isPaying || paymentRedirect) {
-      if (options?.autoscrollAfterViewChange) {
-        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
-        if (orderForm) {
-          orderForm.scrollIntoView({ behavior: 'smooth' });
-        }
-      }
-    }
-  }, [hasGopayId, isPaying, paymentRedirect]);
-
-  if (isIframe && isNotReleased && showReleaseDate)
-    return <ReleaseCountdown event={event} setShowReleaseDate={setShowReleaseDate} />;
-
-  return (
-    <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
-      {hasGopayId ? (
-        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
-      ) : isPaying ? (
-        <PaymentPending />
-      ) : paymentRedirect ? (
-        <OrderSuccess
-          gwUrl={paymentRedirect}
-          isIframe={isIframe}
-          setIsPaying={setIsPaying}
-          isInline={isInline}
-        />
-      ) : (
-        <FormProvider
-          methods={methods}
-          // @ts-ignore
-          onSubmit={methods.handleSubmit(onSubmit)}
-          formId={EVENTLOOK_ORDER_FORM_ID}
-        >
-          <Stack
-            className="overview-card__event-info"
-            display={{ md: 'none' }}
-            sx={{
-              mb: 2,
-            }}
-          >
-            <Typography variant="h3" component="h1">
-              {event.name}
-            </Typography>
-            <Typography variant="h4" component="h2">
-              {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-            </Typography>
-            <Typography variant="body2">{getPlaceAsString(event.place)}</Typography>
-            {headerSlot ? <>{headerSlot}</> : null}
-          </Stack>
-          <Grid container spacing={2}>
-            <Grid item xs={12} md={8}>
-              <Stepper
-                orientation="vertical"
-                sx={(theme) => ({
-                  [theme.breakpoints.down('sm')]: {
-                    '& .MuiStepContent-root': {
-                      borderLeftWidth: 0,
-                      paddingLeft: 0,
-                      marginLeft: 0,
-                    },
-                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
-                  },
-                })}
-              >
-                {event.type === EventType.RECURRING && (
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
-                    <StepContent>
-                      <TimeslotSelection event={event} />
-                    </StepContent>
-                  </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                  <StepContent>
-                    {event.mapId && seatingIframeUrl ? (
-                      <TicketSelectionMap event={event} />
-                    ) : event.hasMerchandise ? (
-                      <TicketWithMerchandiseSelection event={event} />
-                    ) : (
-                      <TicketSelection event={event} />
-                    )}
-                  </StepContent>
-                </Step>
-                {event.hasMerchandise && eventProducts.length && (
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
-                    <StepContent>
-                      <MerchandiseSelection
-                        eventProducts={eventProducts}
-                        eventId={event.id}
-                        isLoading={isLoading}
-                      />
-                    </StepContent>
-                  </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
-                  <StepContent>
-                    <Services event={event} />
-                  </StepContent>
-                </Step>
-                {event.children.length && (
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
-                    <StepContent>
-                      <ChildEventSection events={event.children} />
-                    </StepContent>
-                  </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                  <StepContent>
-                    <ContactPerson event={event} />
-                  </StepContent>
-                </Step>
-                {event.hasMerchandise && showShippingMethods() && (
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
-                    <StepContent>
-                      <Shipping event={event} />
-                    </StepContent>
-                  </Step>
-                )}
-                <Step active>
-                  <StepLabel>
-                    {t(
-                      `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
-                    )}
-                  </StepLabel>
-                  <StepContent>
-                    <Payment event={event} />
-                  </StepContent>
-                </Step>
-              </Stepper>
-              <Stack mt={2} ml={{ xs: 1, md: 4 }}>
-                <RHFCheckbox
-                  name="termsAndConditions"
-                  label={
-                    <Trans
-                      text="event.tickets.terms_and_conditions"
-                      values={{
-                        termsAndConditionsCompanies: options?.termsAndConditionsCompanies
-                          ? options.termsAndConditionsCompanies.join(t('and'))
-                          : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
-                      }}
-                      components={{
-                        0: <CustomLink key={2} href={links.termsAndConditions} target="_blank" />,
-                        1: <CustomLink key={1} href={links.gdpr} target="_blank" />,
-                      }}
-                    />
-                  }
-                />
-              </Stack>
-            </Grid>
-            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
-              <PaymentOverviewBox event={event} />
-            </Grid>
-          </Grid>
-
-          <PaymentOverviewDrawer event={event} totalPrice={values.total} />
-
-          <EmailConfirmation
-            open={formStep === 2 && !isIframe}
-            onClose={() => setFormStep(1)}
-            // @ts-ignore
-            onConfirm={methods.handleSubmit(onSubmit)}
-          />
-        </FormProvider>
-      )}
-    </Box>
-  );
-};
-
-const CustomLink: React.FC<PropsWithChildren<LinkProps>> = ({ href = '', children, ...other }) => (
-  <Link href={href} {...other}>
-    {children}
-  </Link>
-);
-
-export default TicketForm;