@eventlook/sdk 1.7.3 → 1.7.4

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/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.3",
+  "version": "1.7.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -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/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);
@@ -480,15 +487,21 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
       )}
       <Stack
         className="overview-card__order-info"
-        sx={{ p: { xs: withoutPadding ? 0 : 2, md: 2 } }}
-        pt={{ xs: 0, sm: 2 }}
-        spacing={0.75}
+        // Keep horizontal padding on mobile even when `withoutPadding` — that
+        // flag is only meant to drop the vertical gap under the header, not let
+        // the rows run into the card edge.
+        sx={{
+          px: 2,
+          pt: { xs: 1.5, sm: 2 },
+          pb: { xs: withoutPadding ? 0 : 2, md: 2 },
+        }}
+        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 +528,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 +613,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 && (
           <>