@eventlook/sdk 1.4.1 → 1.4.3

package/src/form/Payment.tsx

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, useEffect, useState } from 'react';
+import React, { KeyboardEvent, useEffect, useMemo, useState } from 'react';
 import {
   Box,
   Button,
@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import useAllowedPaymentMethods from '@hooks/data/useAllowedPaymentMethods';
-import { Controller, useFormContext } from 'react-hook-form';
+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';
@@ -22,12 +22,13 @@ 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 } from '@utils/types/ticket.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;
@@ -36,7 +37,7 @@ interface Props {
 const Payment: React.FC<Props> = ({ event }) => {
   const { t, lang } = useGlobal();
   const { showSnackbar } = useGlobal();
-  const { data, isLoading } = useAllowedPaymentMethods(event.currency);
+  const { data, isLoading } = useAllowedPaymentMethods(event.currency, event.id);
   const { control, watch, setValue } = useFormContext<ITicketForm>();
   const paymentMethodId = watch('paymentMethodId');
   const paymentMethodOptionId = watch('paymentMethodOptionId');
@@ -154,6 +155,36 @@ const Payment: React.FC<Props> = ({ event }) => {
     }
   }, [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">
@@ -236,81 +267,77 @@ const Payment: React.FC<Props> = ({ event }) => {
             render={({ field, fieldState: { error } }) => (
               <FormControl component="fieldset">
                 <RadioGroup {...field}>
-                  {data &&
-                    data?.length &&
-                    data?.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>
-                    ))}
+                  {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 && (

package/src/form/PaymentOverviewBox.tsx

@@ -56,6 +56,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     promoCodes,
     shipping,
     totalFee,
+    isPaymentVerify,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -571,7 +572,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         )}
         <FeeBox event={event} />
         <LoadingButton type="submit" variant="contained" size="large" fullWidth>
-          {t('buy')}
+          {t(isPaymentVerify ? 'verify' : 'buy')}
         </LoadingButton>
       </Stack>
     </OverviewCard>

package/src/form/TicketForm.tsx

@@ -13,7 +13,7 @@ import {
   Stepper,
   Typography,
 } from '@mui/material';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import TicketSelection from '@form/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
@@ -228,6 +228,7 @@ const TicketForm: React.FC<Props> = ({
         })) || [],
       selectedDate: null,
       eventTimeslotId: null,
+      isPaymentVerify: false,
     };
   }, [user]);
 
@@ -551,7 +552,11 @@ const TicketForm: React.FC<Props> = ({
                   </Step>
                 )}
                 <Step active>
-                  <StepLabel>{t('event.tickets.stepper.3.title')}</StepLabel>
+                  <StepLabel>
+                    {t(
+                      `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
+                    )}
+                  </StepLabel>
                   <StepContent>
                     <Payment event={event} />
                   </StepContent>

package/src/form/TicketSelection.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
@@ -23,7 +23,6 @@ import useResponsive from '@hooks/useResponsive';
 import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
 import { EventType } from '@utils/data/event';
 import useGlobal from '@hooks/useGlobal.ts';
-import { isEqual } from 'lodash';
 
 interface Props {
   event: IEvent;

package/src/locales/cs.tsx

@@ -3,6 +3,7 @@ const cs = {
   choose: 'Vyberte',
   apply: 'Použít',
   buy: 'Zakoupit',
+  verify: 'Ověřit',
   add: 'Přidat',
   confirm: 'Potvrdit',
   cancel: 'Zrušit',
@@ -79,6 +80,7 @@ const cs = {
         },
         3: {
           title: 'Způsoby platby',
+          title_verify: 'Způsoby ověření',
           subtitle: 'Platební metody',
         },
         4: {

package/src/locales/en.tsx

@@ -3,6 +3,7 @@ const en = {
   choose: 'Choose',
   apply: 'Apply',
   buy: 'Buy',
+  verify: 'Verify',
   add: 'Add',
   confirm: 'Confirm',
   cancel: 'Cancel',
@@ -79,6 +80,7 @@ const en = {
         },
         3: {
           title: 'Payment methods',
+          title_verify: 'Verification methods',
           subtitle: 'Payment methods',
         },
         4: {

package/src/locales/es.tsx

@@ -3,6 +3,7 @@ const es = {
   choose: 'Elegir',
   apply: 'Aplicar',
   buy: 'Comprar',
+  verify: 'Verificar',
   add: 'Añadir',
   confirm: 'Confirmar',
   cancel: 'Cancelar',
@@ -79,6 +80,7 @@ const es = {
         },
         3: {
           title: 'Métodos de pago',
+          title_verify: 'Métodos de verificación',
           subtitle: 'Métodos de pago',
         },
         4: {

package/src/locales/pl.tsx

@@ -3,6 +3,7 @@ const pl = {
   choose: 'Wybierz',
   apply: 'Zastosuj',
   buy: 'Kup',
+  verify: 'Zweryfikuj',
   add: 'Dodaj',
   confirm: 'Potwierdź',
   cancel: 'Anuluj',
@@ -79,6 +80,7 @@ const pl = {
         },
         3: {
           title: 'Metody płatności',
+          title_verify: 'Metody weryfikacji',
           subtitle: 'Metody płatności',
         },
         4: {

package/src/locales/sk.tsx

@@ -3,6 +3,7 @@ const sk = {
   choose: 'Vybrať',
   apply: 'Použiť',
   buy: 'Kúpiť',
+  verify: 'Overiť',
   add: 'Pridať',
   confirm: 'Potvrdiť',
   cancel: 'Zrušiť',
@@ -79,6 +80,7 @@ const sk = {
         },
         3: {
           title: 'Spôsoby platby',
+          title_verify: 'Spôsoby overenia',
           subtitle: 'Spôsoby platby',
         },
         4: {

package/src/locales/uk.tsx

@@ -3,6 +3,7 @@ const uk = {
   choose: 'Вибрати',
   apply: 'Застосувати',
   buy: 'Купити',
+  verify: 'Підтвердити',
   add: 'Додати',
   confirm: 'Підтвердити',
   cancel: 'Скасувати',
@@ -79,6 +80,7 @@ const uk = {
         },
         3: {
           title: 'Способи оплати',
+          title_verify: 'Способи підтвердження',
           subtitle: 'Способи оплати',
         },
         4: {

package/src/utils/types/ticket.type.ts

@@ -64,6 +64,7 @@ export interface ITicketForm {
   eventTimeslotId: number | null;
   promoCodes: IPromoCode[];
   totalFee?: number | null;
+  isPaymentVerify: boolean;
 }
 
 export interface ITicketBody extends Omit<ITicketForm, 'promoCode'> {