@eventlook/sdk 1.7.2-beta.0 → 1.7.3-beta.0

package/dist/types/form/Payment.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IEvent } from '@utils/types/event.type';
 interface Props {
     event: IEvent;
+    stripeReady?: boolean;
 }
 declare const Payment: React.FC<Props>;
 export default Payment;

package/dist/types/form/payment/StripeCheckoutProvider.d.ts

@@ -0,0 +1,36 @@
+import React, { MutableRefObject } from 'react';
+/**
+ * Imperative handle the order form uses to drive the inline Stripe payment from
+ * its own submit handler (which lives outside the <Elements> tree).
+ */
+export interface StripeCheckoutApi {
+    ready: boolean;
+    /** Validate + collect the card fields. Returns an error message, or null. */
+    submit: () => Promise<string | null>;
+    /** Confirm the server-created PaymentIntent. */
+    confirm: (clientSecret: string, returnUrl: string) => Promise<{
+        ok: boolean;
+        error?: string;
+    }>;
+}
+interface Props {
+    /** Mount Elements only when a Stripe method is offered and the key is loaded. */
+    active: boolean;
+    publishableKey: string | null;
+    /** 'payment' for paid orders, 'setup' for free (0-amount) card verification. */
+    mode: 'payment' | 'setup';
+    /** Charge amount in minor units (used by Elements; the server intent is authoritative). */
+    amount: number;
+    currency: string;
+    locale: string;
+    apiRef: MutableRefObject<StripeCheckoutApi | null>;
+    children: React.ReactNode;
+}
+/**
+ * Wraps the order form in a deferred-mode <Elements> provider so the Payment
+ * Element can be shown inline (expanded under the selected method) before the
+ * order — and its PaymentIntent — exists. When no Stripe method is on offer it
+ * renders children untouched and loads nothing.
+ */
+declare const StripeCheckoutProvider: React.FC<Props>;
+export default StripeCheckoutProvider;

package/dist/types/hooks/data/useStripeConfig.d.ts

@@ -0,0 +1,3 @@
+export default function useStripeConfig(enabled: boolean): {
+    publishableKey: string | null;
+};

package/dist/types/locales/cs.d.ts

@@ -44,6 +44,9 @@ declare const cs: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/locales/en.d.ts

@@ -44,6 +44,9 @@ declare const en: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/locales/es.d.ts

@@ -44,6 +44,9 @@ declare const es: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/locales/pl.d.ts

@@ -44,6 +44,9 @@ declare const pl: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/locales/sk.d.ts

@@ -44,6 +44,9 @@ declare const sk: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/locales/uk.d.ts

@@ -44,6 +44,9 @@ declare const uk: {
             total: string;
             with_fee: string;
             service_fee: string;
+            payment_processing_fee: string;
+            card_payment_title: string;
+            card_payment_error: string;
             shipping_fee: string;
             ticket_insurance: string;
             price_including_service_fee: string;

package/dist/types/modules/order.d.ts

@@ -5,3 +5,6 @@ import { Currencies } from '@utils/data/currency';
 export declare const postOrder: (data: ITicketBody) => Promise<IResponse<IOrderCreate>>;
 export declare const getAllowedPaymentMethods: (currency: Currencies, eventId?: number) => Promise<any>;
 export declare const postOrderPaid: (data: IOrderPaidData) => Promise<IResponse<IOrderPaid>>;
+export declare const getStripeConfig: () => Promise<{
+    publishableKey: string | null;
+}>;

package/dist/types/utils/data/ticket.d.ts

@@ -1 +1,2 @@
 export declare const MAX_TICKETS_PER_ORDER = 10;
+export declare const getMaxTicketsPerOrder: (eventId?: number) => number;

package/dist/types/utils/types/order.type.d.ts

@@ -21,6 +21,8 @@ export interface IOrder extends IBase {
 }
 export interface IOrderCreate {
     gwUrl: string;
+    clientSecret: string | null;
+    publishableKey: string | null;
     tickets: ICreateTicket[];
     orderEntity: IOrder;
     customer: ICustomer;

package/dist/types/utils/types/payment-method.type.d.ts

@@ -12,6 +12,7 @@ export interface IPaymentMethod extends IBase {
     image: IFile;
     feeType: string;
     feeValue: number;
+    feeFixedValue: number;
 }
 export interface IPaymentOption extends IBase {
     category: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.7.2-beta.0",
+  "version": "1.7.3-beta.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -22,7 +22,7 @@
     "watch:push": "chokidar 'dist/**/*' -c 'yalc push --changed --force'",
     "dev": "concurrently --kill-others-on-fail --kill-others \"yarn watch:rollup\" \"yarn watch:types\" \"yarn watch:push\"",
     "dev:simple": "concurrently --kill-others-on-fail \"yarn watch:rollup\" \"yarn watch:types\"",
-    "publish": "npm publish",
+    "release": "npm publish",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
@@ -56,6 +56,8 @@
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@seat-picker/seat-picker-sdk": "^1.2.0",
+    "@stripe/react-stripe-js": "^6.6.0",
+    "@stripe/stripe-js": "^9.7.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.24",
     "@types/numeral": "^2.0.5",

package/src/form/ChildEventCard.tsx

@@ -40,31 +40,34 @@ const ChildEventCard: React.FC<Props> = ({ event }) => {
   return (
     <>
       <Card sx={{ p: 2 }}>
-        <Grid container spacing={6} alignItems="stretch">
-          {/* LEFT SIDE: Image + Button */}
-          <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
-            <Button
-              variant="contained"
-              onClick={() => setOpenVariantDialog(true)}
-              fullWidth
-              startIcon={
-                eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
-              }
-              sx={{ mt: 2 }}
-            >
-              {eventNotEmpty ? t('change') : t('add')}
-            </Button>
-          </Grid>
-
-          {/* RIGHT SIDE: Info block with bottom aligned date + organizer */}
-          <Grid
-            size={{ xs: 12, md: 6 }}
-            sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
-          >
-            <Stack spacing={2}>
-              <Typography variant="h6">{event.name}</Typography>
+        <Stack spacing={2}>
+          <Typography variant="h6">{event.name}</Typography>
+          <Grid container spacing={6} alignItems="stretch">
+            {/* LEFT SIDE: Image + Button */}
+            <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', flexDirection: 'column' }}>
+              <Image src={event.image.url} alt={event.name} ratio="16/9" borderRadius={2} />
+              <Button
+                variant="contained"
+                onClick={() => setOpenVariantDialog(true)}
+                fullWidth
+                startIcon={
+                  eventNotEmpty ? (
+                    <Iconify icon="eva:edit-fill" />
+                  ) : (
+                    <Iconify icon="eva:plus-fill" />
+                  )
+                }
+                sx={{ mt: 2 }}
+              >
+                {eventNotEmpty ? t('change') : t('add')}
+              </Button>
+            </Grid>
 
+            {/* RIGHT SIDE: Info block with bottom aligned date + organizer */}
+            <Grid
+              size={{ xs: 12, md: 6 }}
+              sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
+            >
               <TextIconLabel
                 icon={
                   <Iconify
@@ -75,48 +78,51 @@ const ChildEventCard: React.FC<Props> = ({ event }) => {
                 value={<Box>{getPlaceAsString(event.place)}</Box>}
                 sx={{ typography: 'body3', color: 'text.secondary', alignItems: 'flex-start' }}
               />
-            </Stack>
 
-            {/* Bottom: Date & Organizer */}
-            <Stack
-              direction={{ xs: 'column', sm: 'row', md: 'column', lg: 'row' }}
-              spacing={2}
-              p={2}
-              divider={
-                <Divider
-                  orientation={xs || md ? 'horizontal' : 'vertical'}
-                  flexItem
-                  sx={{ borderStyle: 'dashed' }}
-                />
-              }
-              sx={{
-                backgroundColor: (theme) => theme.palette.grey.A100,
-                borderRadius: 1,
-              }}
-            >
-              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
-                <TextIconLabel
-                  icon={<Iconify icon={calendarIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
-                  value={t('form.labels.start_date')}
-                  sx={{ color: 'text.secondary' }}
-                />
-                <Typography variant="body2" fontWeight={700}>
-                  {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-                </Typography>
-              </Box>
-              <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
-                <TextIconLabel
-                  icon={<Iconify icon={userIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
-                  value={t('form.labels.organizer')}
-                  sx={{ color: 'text.secondary' }}
-                />
-                <Typography variant="body2" fontWeight={700}>
-                  {event.company.displayName}
-                </Typography>
-              </Box>
-            </Stack>
+              {/* Bottom: Date & Organizer */}
+              <Stack
+                direction={{ xs: 'column', sm: 'row', md: 'column', lg: 'row' }}
+                spacing={2}
+                p={2}
+                divider={
+                  <Divider
+                    orientation={xs || md ? 'horizontal' : 'vertical'}
+                    flexItem
+                    sx={{ borderStyle: 'dashed' }}
+                  />
+                }
+                sx={{
+                  backgroundColor: (theme) =>
+                    theme.palette.mode === 'light'
+                      ? theme.palette.grey[100]
+                      : theme.palette.grey[900],
+                  borderRadius: 1,
+                }}
+              >
+                <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
+                  <TextIconLabel
+                    icon={<Iconify icon={calendarIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
+                    value={t('form.labels.start_date')}
+                    sx={{ color: 'text.secondary' }}
+                  />
+                  <Typography variant="body2" fontWeight={700}>
+                    {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+                  </Typography>
+                </Box>
+                <Box width={{ sm: '50%', md: '100%', lg: '50%' }}>
+                  <TextIconLabel
+                    icon={<Iconify icon={userIcon} sx={{ minWidth: 20, height: 20, mr: 1 }} />}
+                    value={t('form.labels.organizer')}
+                    sx={{ color: 'text.secondary' }}
+                  />
+                  <Typography variant="body2" fontWeight={700}>
+                    {event.company.displayName}
+                  </Typography>
+                </Box>
+              </Stack>
+            </Grid>
           </Grid>
-        </Grid>
+        </Stack>
       </Card>
 
       <ChildEventDialog

package/src/form/Payment.tsx

@@ -2,6 +2,7 @@ import React, { KeyboardEvent, useEffect, useMemo, useState } from 'react';
 import {
   Box,
   Button,
+  CircularProgress,
   Divider,
   FormControl,
   FormControlLabel,
@@ -19,6 +20,7 @@ import { PaymentItem, PaymentWrapper, PaymentSwiftWrapper } from '@form/style';
 import Image from '@components/Image';
 import Label from '@components/Label';
 import PaymentSkeleton from '@form/payment/PaymentSkeleton';
+import { PaymentElement } from '@stripe/react-stripe-js';
 import { RHFRadioGroup } from '@components/hook-form';
 import { postPromoCodeApply } from '@modules/promo-code';
 import { IEvent } from '@utils/types/event.type';
@@ -32,9 +34,12 @@ import { IEventProductForm } from '@utils/types/product.type';
 
 interface Props {
   event: IEvent;
+  // True once the Stripe Elements provider is mounted (key loaded), so the
+  // inline Payment Element can render under the selected Stripe method.
+  stripeReady?: boolean;
 }
 
-const Payment: React.FC<Props> = ({ event }) => {
+const Payment: React.FC<Props> = ({ event, stripeReady }) => {
   const { t, lang } = useGlobal();
   const { showSnackbar } = useGlobal();
   const { data, isLoading } = useAllowedPaymentMethods(event.currency, event.id);
@@ -174,8 +179,12 @@ const Payment: React.FC<Props> = ({ event }) => {
 
     if (total === 0 && (hasTickets || hasProducts)) {
       setValue('isPaymentVerify', true);
-      return data.filter((payment) =>
-        ['PAYMENT_CARD', 'APPLE_PAY', 'GPAY', 'CLICK_TO_PAY'].includes(payment.type)
+      // Free orders only offer card-verification methods (incl. Stripe, which
+      // verifies via a SetupIntent) — bot protection without a charge.
+      return data.filter(
+        (payment) =>
+          ['PAYMENT_CARD', 'APPLE_PAY', 'GPAY', 'CLICK_TO_PAY'].includes(payment.type) ||
+          payment.provider === 'STRIPE'
       );
     } else {
       setValue('isPaymentVerify', false);
@@ -334,6 +343,36 @@ const Payment: React.FC<Props> = ({ event }) => {
                             />
                           </PaymentSwiftWrapper>
                         )}
+                      {payment.provider === 'STRIPE' &&
+                        !!paymentMethodId &&
+                        Number(paymentMethodId) === payment.id && (
+                          <PaymentSwiftWrapper sx={{ pb: 3 }}>
+                            <Divider sx={{ mb: 2 }} />
+                            {stripeReady ? (
+                              <PaymentElement options={{ layout: 'tabs' }} />
+                            ) : Number(total) > 0 ? (
+                              <Stack alignItems="center" sx={{ py: 3 }}>
+                                <CircularProgress size={26} />
+                              </Stack>
+                            ) : (
+                              <Stack
+                                alignItems="center"
+                                spacing={1}
+                                sx={{ py: 3, px: 2, textAlign: 'center' }}
+                              >
+                                <Iconify
+                                  icon="carbon:shopping-cart"
+                                  width={28}
+                                  height={28}
+                                  sx={{ color: 'text.disabled' }}
+                                />
+                                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                                  {t('form.validation.count_tickets_or_products')}
+                                </Typography>
+                              </Stack>
+                            )}
+                          </PaymentSwiftWrapper>
+                        )}
                     </PaymentItem>
                   ))}
                 </RadioGroup>

package/src/form/PaymentOverviewBox.tsx

@@ -42,6 +42,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
   const insuranceAvailable = isInsuranceAvailable(event.currency);
   const { data: eventProducts } = useActiveEventProducts(event.id, true);
   const [shippingFee, setShippingFee] = useState(0);
+  const [paymentMethodFee, setPaymentMethodFee] = useState(0);
   const { setValue, watch } = useFormContext<ITicketForm>();
   const values = watch();
   const {
@@ -135,6 +136,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
   }, [event, flatProducts]);
 
   const getFee = useMemo(() => fCurrency(totalFee ?? 0, lang, event.currency), [totalFee]);
+  const getPaymentMethodFee = useMemo(
+    () => fCurrency(paymentMethodFee ?? 0, lang, event.currency),
+    [paymentMethodFee]
+  );
 
   const shoppingCartBody = useMemo<ICalculateShoppingCartDto>(
     () => ({
@@ -253,8 +258,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
     setValue('originalPrice', data.originalPrice);
     setValue('total', data.totalPrice || 0);
 
-    const feeTotal = (data.serviceFee ?? 0) + (data.paymentMethodFee ?? 0);
-    setValue('totalFee', feeTotal);
+    // The Stripe processing surcharge is shown as its own line, so keep the
+    // service fee and the payment-method fee separate.
+    setValue('totalFee', data.serviceFee ?? 0);
+    setPaymentMethodFee(data.paymentMethodFee ?? 0);
 
     setShippingFee(data.shippingFee);
     setValue('ticketInsurance', data.ticketInsurance.enabled);
@@ -482,13 +489,13 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
         className="overview-card__order-info"
         sx={{ p: { xs: withoutPadding ? 0 : 2, md: 2 } }}
         pt={{ xs: 0, sm: 2 }}
-        spacing={0.75}
+        spacing={1.25}
         useFlexGap
       >
-        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
+        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed', my: 1 }} />}
 
         {!!selectedTickets.length && (
-          <Stack spacing={0.5}>
+          <Stack spacing={1}>
             {insuranceAvailable && (
               <PaymentOverviewCheckbox
                 checkboxName="ticketInsurance"
@@ -515,7 +522,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
                 </>
               }
             />
-            <Divider sx={{ borderStyle: 'dashed' }} />
+            <Divider sx={{ borderStyle: 'dashed', mt: 0.5 }} />
           </Stack>
         )}
         {selectedTickets.map((ticket, index) => (
@@ -600,8 +607,14 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
             <Typography variant="body2">{getFee}</Typography>
           </Stack>
         )}
+        {!!total && !!paymentMethodFee && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="body2">{t('form.labels.payment_processing_fee')}</Typography>
+            <Typography variant="body2">{getPaymentMethodFee}</Typography>
+          </Stack>
+        )}
         {((!!selectedTickets.length && isMobile) || !isMobile) && (
-          <Divider sx={{ borderStyle: 'dashed' }} />
+          <Divider sx={{ borderStyle: 'dashed', my: 1 }} />
         )}
         {!hideBuyButton && (
           <>