@eventlook/sdk 1.4.5 → 1.4.8

package/dist/types/utils/gtm.d.ts

@@ -1,4 +1,4 @@
-import { IPageView, IPageType, ISearchShow, IViewItem, IEcommerce, ICheckout, IEcommerceCartItems, IAddPaymentInfo, IPurchase, IEcommercePurchase, IUserData, IPixels, IViewItemList, ISelectItem, IAddToCart, IRemoveFromCart } from '@utils/types/gtm.type';
+import { IPageView, IPageType, ISearchShow, IViewItem, IEcommerce, ICheckout, IEcommerceCartItems, IAddPaymentInfo, IPurchase, IEcommercePurchase, IUserData, IPixels, IViewItemList, ISelectItem, IAddToCart, IRemoveFromCart, IPurchasePaid } from '@utils/types/gtm.type';
 import { IUser } from '@utils/types/user.type';
 export declare const getGtmPageView: (url: string, userData?: IUserData) => IPageView;
 export declare const gtmPageView: (url: string, userData?: IUserData) => IPageView;
@@ -18,6 +18,8 @@ export declare const getGtmAddPaymentInfo: (item: IEcommerceCartItems, pixels?:
 export declare const gtmAddPaymentInfo: (item: IEcommerceCartItems, pixels?: IPixels) => IAddPaymentInfo & IPixels;
 export declare const getGtmPurchase: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchase & IPixels;
 export declare const gtmPurchase: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchase & IPixels;
+export declare const getGtmPurchasePaid: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchasePaid & IPixels;
+export declare const gtmPurchasePaid: (item: IEcommercePurchase | null, pixels?: IPixels, userData?: IUserData) => IPurchasePaid & IPixels;
 export declare const mapUserToUserData: (user: IUser) => {
     em: string;
     ph: string;

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

@@ -78,6 +78,11 @@ export interface IPurchase extends IBase {
     ecommerce: IEcommercePurchase | null;
     user_data: IUserData | null;
 }
+export interface IPurchasePaid extends IBase {
+    event: 'purchase_paid';
+    ecommerce: IEcommercePurchase | null;
+    user_data: IUserData | null;
+}
 export interface IPixels {
     fb_pixel_id?: number | string;
     tiktok_pixel_id?: number | string;

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

@@ -38,6 +38,7 @@ export interface IOrderPaid {
     products: IPaidProduct[];
     extraFee: number;
     currency: Currencies;
+    promoCodes: IPromoCode[] | null;
 }
 export interface IAllowedPaymentMethod {
     enabledPaymentInstruments: IPaymentInstrument[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.4.5",
+  "version": "1.4.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

package/src/form/PaymentSuccess.tsx

@@ -9,20 +9,23 @@ import { PropsWithChildren } from '@utils/types/global.type';
 import { IPaidTicket } from '@utils/types/ticket.type';
 import useResponsive from '@hooks/useResponsive';
 import { getPlaceAsString } from '@utils/place';
-import { fCurrency, fData } from '@utils/formatNumber';
+import { fCurrency } from '@utils/formatNumber';
 import { useTheme } from '@mui/material/styles';
 import { IPaidProduct } from '@utils/types/product.type';
 import dayjs from 'dayjs';
 import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
+import { getGtmPurchasePaid, gtmPurchasePaid, mapUserToUserData } from '@utils/gtm.ts';
+import { IPixels } from '@utils/types/gtm.type.ts';
 
 interface Props {
   setIsPaying: Dispatch<SetStateAction<boolean>>;
   isIframe?: boolean;
+  pixels?: IPixels;
 }
 
-const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
-  const { showSnackbar, t, lang, callbacks, content } = useGlobal();
+const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
+  const { showSnackbar, t, lang, callbacks, content, user } = useGlobal();
   const theme = useTheme();
   const defaultState = 'PROCESSING';
   const errorState = 'ERROR';
@@ -53,9 +56,49 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe }) => {
       setProducts(products);
       setState(data.state);
       setGwUrl(data.gwUrl);
+
+      const items = [
+        ...data.tickets.map((ticket) => ({
+          item_id: ticket.number,
+          item_name: `${ticket.eventName} - ${ticket.releaseCategoryName} - ${ticket.releaseName}`,
+          price: ticket.price,
+          quantity: 1,
+        })),
+      ];
+      if (data.extraFee) {
+        items.push({
+          item_id: 'service_fee',
+          item_name: `Service fee`,
+          price: data.extraFee,
+          quantity: 1,
+        });
+      }
+      const item = {
+        currency: data.currency,
+        value: data.totalPrice,
+        tax: 0,
+        payment_type: data.paymentType,
+        transaction_id: String(data.orderNumber),
+        coupon: data?.promoCodes?.map((p) => p.code) || [],
+        items,
+      };
+
       switch (data.state) {
         case GopayState.PAID:
           setTitle('event.tickets.payment_success.paid.title');
+          if (isIframe) {
+            setTimeout(() => {
+              parent.postMessage(
+                {
+                  type: 'eventlookFrameGtm',
+                  item: getGtmPurchasePaid(item, pixels),
+                },
+                '*'
+              );
+            }, 1000);
+          } else {
+            gtmPurchasePaid(item, pixels, user ? mapUserToUserData(user) : undefined);
+          }
           break;
         default:
           setTitle('event.tickets.payment_success.unpaid');

package/src/form/TicketForm.tsx

@@ -324,17 +324,16 @@ const TicketForm: React.FC<Props> = ({
         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,
-                })) || [];
+            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[]>
@@ -474,7 +473,7 @@ const TicketForm: React.FC<Props> = ({
   return (
     <Box id={EVENTLOOK_ORDER_FORM_ID}>
       {hasGopayId ? (
-        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} />
+        <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
         <PaymentPending />
       ) : paymentRedirect ? (

package/src/form/extra-field/ExtraField.tsx

@@ -8,7 +8,9 @@ import useGlobal from '@hooks/useGlobal.ts';
 
 interface Props {
   extraField: IEventExtraField;
-  name: `extraFields.${number}.value` | `tickets.${number}.extraFields.${number}.${number}.value`;
+  name:
+    | `extraFields.${number}.value`
+    | `tickets.${number}.${number}.extraFields.${number}.${number}.value`;
   size?: 'small' | 'medium';
 }
 

package/src/form/extra-field/ReleaseExtraFields.tsx

@@ -78,7 +78,7 @@ const ReleaseExtraFields: React.FC<Props> = ({ release, eventId, releaseIndex, q
                 <Grid key={field.id} item xs={12} md={6}>
                   <ExtraField
                     extraField={field}
-                    name={`tickets.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}
+                    name={`tickets.${eventId}.${releaseIndex}.extraFields.${rowIdx}.${colIdx}.value`}
                     size="small"
                   />
                 </Grid>

package/src/utils/gtm.ts

@@ -17,6 +17,7 @@ import {
   ISelectItem,
   IAddToCart,
   IRemoveFromCart,
+  IPurchasePaid,
 } from '@utils/types/gtm.type';
 import { UserIpCookie } from '@utils/data/cookie';
 import { IUser } from '@utils/types/user.type';
@@ -225,6 +226,34 @@ export const gtmPurchase = (
   return pageEvent;
 };
 
+export const getGtmPurchasePaid = (
+  item: IEcommercePurchase | null,
+  pixels?: IPixels,
+  userData?: IUserData
+) => {
+  const userIp = Cookies.get(UserIpCookie);
+  const pageEvent: IPurchasePaid & IPixels = {
+    event: 'purchase_paid',
+    fb_pixel_id: pixels?.fb_pixel_id || '',
+    tiktok_pixel_id: pixels?.tiktok_pixel_id || '',
+    ecommerce: item,
+    user_data: userData || null,
+    ip: userIp || '',
+  };
+
+  return pageEvent;
+};
+
+export const gtmPurchasePaid = (
+  item: IEcommercePurchase | null,
+  pixels?: IPixels,
+  userData?: IUserData
+) => {
+  const pageEvent = getGtmPurchasePaid(item, pixels, userData);
+  if (isBrowser() && window.dataLayer) setTimeout(() => window.dataLayer.push(pageEvent), 500);
+  return pageEvent;
+};
+
 export const mapUserToUserData = (user: IUser) => ({
   em: user.email,
   ph: user.phone,

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

@@ -96,6 +96,12 @@ export interface IPurchase extends IBase {
   user_data: IUserData | null;
 }
 
+export interface IPurchasePaid extends IBase {
+  event: 'purchase_paid';
+  ecommerce: IEcommercePurchase | null;
+  user_data: IUserData | null;
+}
+
 export interface IPixels {
   fb_pixel_id?: number | string;
   tiktok_pixel_id?: number | string;

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

@@ -42,6 +42,7 @@ export interface IOrderPaid {
   products: IPaidProduct[];
   extraFee: number;
   currency: Currencies;
+  promoCodes: IPromoCode[] | null;
 }
 
 export interface IAllowedPaymentMethod {