@eventlook/sdk 1.4.0

package/src/form/TicketForm.tsx

@@ -0,0 +1,597 @@
+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, { Dayjs } from 'dayjs';
+import TicketSelection from '@form/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/MerchandiseSelection';
+import TicketWithMerchandiseSelection from '@form/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 } from '@utils/data/global.ts';
+import ChildEventSection from './ChildEvents';
+
+interface Props {
+  event: IEvent;
+  hasGopayIdSsr: boolean;
+  selectedReleaseId?: number;
+  isIframe?: boolean;
+  isInline?: boolean;
+}
+
+const TicketForm: React.FC<Props> = ({
+  event,
+  hasGopayIdSsr,
+  selectedReleaseId,
+  isIframe,
+  isInline,
+}) => {
+  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content } = 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,
+      iframeCampaignId: undefined,
+      promoCode: null,
+      promoCodes: [],
+      products: {},
+      shipping: {
+        shippingMethodId: null,
+        branchId: null,
+        price: 0,
+      },
+      extraFields:
+        event?.extraFields.map((field) => ({
+          eventExtraFieldId: field.id,
+          value: '',
+        })) || [],
+      selectedDate: null,
+      eventTimeslotId: null,
+    };
+  }, [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')),
+    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.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,
+              }));
+            return acc;
+          },
+          {} as Record<number, ITicketFormTicket[]>
+        );
+        const { data: orderData } = await postOrder(data);
+        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: [
+            ...orderData.tickets.map((ticket) => ({
+              item_id: ticket.number,
+              item_name: `${orderData.orderEntity.event.name} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+              price: ticket.price,
+              quantity: 1,
+            })),
+            {
+              item_id: 'service_fee',
+              item_name: `Service fee`,
+              price: orderData.orderEntity.extraFee,
+              quantity: 1,
+            },
+          ],
+        };
+        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, { name }) => {
+      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_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_ID}>
+      {hasGopayId ? (
+        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} />
+      ) : isPaying ? (
+        <PaymentPending />
+      ) : paymentRedirect ? (
+        <OrderSuccess
+          gwUrl={paymentRedirect}
+          isIframe={isIframe}
+          setIsPaying={setIsPaying}
+          isInline={isInline}
+        />
+      ) : (
+        // @ts-ignore
+        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
+          <Typography
+            className="overview-card__event-info"
+            display={{ md: 'none' }}
+            variant="h4"
+            sx={{
+              mb: 2,
+            }}
+          >
+            {event.name} - {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+          </Typography>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={8}>
+              <Stepper orientation="vertical">
+                {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.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>
+                )}
+                {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.title')}</StepLabel>
+                  <StepContent>
+                    <Payment event={event} />
+                  </StepContent>
+                </Step>
+              </Stepper>
+              <Stack mt={2} ml={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}>
+              <PaymentOverviewBox event={event} />
+            </Grid>
+          </Grid>
+          <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;