@eventlook/sdk 1.4.4 → 1.4.5-1.beta.2

package/src/form/PaymentOverviewBox.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Iconify, Image, TextIconLabel } from '@components';
-import { Box, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { Box, Divider, Grid, Stack, Typography } from '@mui/material';
+import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox.tsx';
 import locationIcon from '@iconify/icons-carbon/location';
 import { getPlaceAsString } from '@utils/place';
 import { LoadingButton } from '@mui/lab';
@@ -15,28 +16,26 @@ import FeeBox from '@form/payment/FeeBox';
 import { IPromoCode } from '@utils/types/promo-code.type';
 import { fCurrency } from '@utils/formatNumber';
 import { IEventProductForm, ISelectedProductVariant } from '@utils/types/product.type';
-import { isEqual } from 'lodash';
 import calendarIcon from '@iconify/icons-carbon/calendar';
 import userIcon from '@iconify/icons-carbon/user';
 import { EventType } from '@utils/data/event';
 import dayjs from 'dayjs';
 import useGlobal from '@hooks/useGlobal.ts';
-import { getCreateShoppingCart, recalculateCart } from '@modules/shopping-cart.ts';
-import { ICalculateShoppingCartDto, IShoppingCart } from '@utils/types/shopping-cart.type.ts';
+import { calculateCart, getCart } from '@modules/shopping-cart.ts';
+import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shopping-cart.type.ts';
 import { PromoCodeTypes } from '@utils/data/promo-code.ts';
-import { useFirstRender } from '@hooks/useFirstRender.ts';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import useDebounce from '@hooks/useDebounce';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 
 interface Props {
   event: IEvent;
+  withoutPadding?: boolean;
+  hideBuyButton?: boolean;
 }
 
-const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
+const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyButton }) => {
   const { t, lang, options } = useGlobal();
-  const firstRender = useFirstRender();
-  const secondRender = useRef(false);
-  const lastCartRef = useRef<IShoppingCart | null>(null);
   const xs = useResponsive('only', 'xs');
   const md = useResponsive('only', 'md');
   const isMobile = useResponsive('down', 'md');
@@ -57,6 +56,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     shipping,
     totalFee,
     isPaymentVerify,
+    ticketInsurance,
+    smsNotification,
+    smsNotificationPrice,
+    ticketInsurancePricePerUnit,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -134,44 +137,45 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
 
   const shoppingCartBody = useMemo<ICalculateShoppingCartDto>(
     () => ({
-      uuid: uuid,
+      uuid,
       eventId: event.id,
-      tickets: Object.entries(values.tickets).reduce(
-        (acc, [eventId, items]) => {
-          acc[Number(eventId)] = items
-            .filter((item) => !!item.quantity && !!item.releaseId)
+      tickets: Object.fromEntries(
+        Object.entries(values.tickets).map(([id, items]) => [
+          id,
+          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,
-              eventTimeslotId: Number(eventTimeslotId) || null,
-            }));
-          return acc;
-        },
-        {} as Record<number, ITicketFormTicket[]>
+              ...item,
+              eventTimeslotId: eventTimeslotId ?? null,
+            })),
+        ])
       ),
-      products: Object.entries(values.products).reduce(
-        (acc, [eventId, items]) => {
-          acc[Number(eventId)] = items.map((item) => ({
-            eventProductVariantId: item.eventProductVariantId,
-            productVariantId: item.productVariantId,
-            quantity: item.quantity,
-            price: item.price,
-            excludedShippingMethodIds: item.excludedShippingMethodIds,
-          }));
-          return acc;
-        },
-        {} as Record<number, IEventProductForm[]>
+      products: Object.fromEntries(
+        Object.entries(values.products).map(([id, items]) => [
+          id,
+          items.map(
+            ({
+              eventProductVariantId,
+              productVariantId,
+              quantity,
+              price,
+              excludedShippingMethodIds,
+            }) => ({
+              eventProductVariantId,
+              productVariantId,
+              quantity,
+              price,
+              excludedShippingMethodIds,
+            })
+          ),
+        ])
       ),
       shipping: {
-        shippingMethodId: shipping?.shippingMethodId ? Number(shipping.shippingMethodId) : null,
-        branchId: shipping?.branchId,
-        price: shipping?.price ? Number(shipping.price) : 0,
+        shippingMethodId: shipping?.shippingMethodId ?? null,
+        branchId: shipping?.branchId ?? null,
+        price: shipping?.price ?? 0,
       },
-      promoCodeIds: promoCodes?.map((p) => p.id) || null,
+      promoCodeIds: promoCodes?.map((p) => p.id) ?? null,
       language: lang,
       firstName,
       lastName,
@@ -179,17 +183,17 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
       phone,
       birthdate,
       gender,
-      paymentMethodId: paymentMethodId === null ? null : Number(paymentMethodId),
-      paymentMethodOptionId: paymentMethodOptionId === null ? null : Number(paymentMethodOptionId),
+      paymentMethodId: paymentMethodId ? Number(paymentMethodId) : null,
+      paymentMethodOptionId: paymentMethodOptionId ? Number(paymentMethodOptionId) : null,
+      ticketInsurance,
+      smsNotification,
     }),
     [
       uuid,
       event.id,
       tickets,
       products,
-      shipping.shippingMethodId,
-      shipping.branchId,
-      shipping.price,
+      shipping,
       promoCodes,
       lang,
       firstName,
@@ -201,18 +205,20 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
       paymentMethodId,
       paymentMethodOptionId,
       eventTimeslotId,
+      ticketInsurance,
+      smsNotification,
     ]
   );
 
   const debouncedShoppingCartBody = useDebounce(shoppingCartBody, 300);
 
-  const setShoppingCartValues = (data: IShoppingCart, recalculate = false) => {
+  const setShoppingCartValues = (data: IShoppingCartDto, recalculate = false) => {
     if (!recalculate) {
       const hasTickets =
         !!data.tickets && typeof data.tickets === 'object' && Object.keys(data.tickets).length > 0;
 
       if (hasTickets) {
-        setValue('tickets', { ...tickets, ...data.tickets });
+        setValue('tickets', data.tickets);
       }
 
       const hasProducts =
@@ -221,7 +227,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         Object.keys(data.products).length > 0;
 
       if (hasProducts) {
-        setValue('products', { ...products, ...data.products });
+        setValue('products', data.products);
       }
 
       setValue('promoCodes', data.promoCodes || []);
@@ -250,6 +256,11 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     setValue('totalFee', feeTotal);
 
     setShippingFee(data.shippingFee);
+    setValue('ticketInsurance', data.ticketInsurance.enabled);
+    setValue('ticketInsurancePrice', data.ticketInsurance.price);
+    setValue('ticketInsurancePricePerUnit', data.ticketInsurance.pricePerUnit);
+    setValue('smsNotification', data.smsNotification.enabled);
+    setValue('smsNotificationPrice', data.smsNotification.price);
   };
 
   const totalItemCount = useMemo(() => {
@@ -321,30 +332,16 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     return discount;
   }, [promoCodes, flatTickets, flatProducts]);
 
-  useEffect(() => {
-    if (!secondRender.current) {
-      secondRender.current = true;
-    } else {
-      return;
-    }
-
-    (async () => {
-      const existing = localStorage.getItem('cartToken');
-      const res = await getCreateShoppingCart(existing, event.id);
-      const data: IShoppingCart = res.data;
-
-      localStorage.setItem('cartToken', data.uuid);
-      setShoppingCartValues(data);
-    })();
+  const hasOrderId = useMemo(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has('id');
   }, []);
 
   useEffect(() => {
-    if (firstRender) {
-      return;
+    if (!hasOrderId) {
+      recalculateItems(debouncedShoppingCartBody);
     }
-
-    recalculateItems(debouncedShoppingCartBody);
-  }, [debouncedShoppingCartBody]);
+  }, [debouncedShoppingCartBody, hasOrderId]);
 
   /** Iframe code **/
   useEffect(() => {
@@ -364,53 +361,56 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
   };
   /** End Iframe code **/
 
-  const updateCartIfChanged = (newCart: IShoppingCart, recalculate = false) => {
-    if (isEqual(lastCartRef.current, newCart)) {
-      return;
-    }
-
-    lastCartRef.current = newCart;
-    setShoppingCartValues(newCart, recalculate);
-  };
-
   const recalculateItems = useCallback(async (body: ICalculateShoppingCartDto) => {
-    const { uuid } = body;
-    if (!uuid) return;
     try {
-      const response = await recalculateCart(body);
-      const cart = response?.data?.data;
+      const isInitial = !body.uuid;
+
+      let response: any;
+      if (isInitial) {
+        const existing = localStorage.getItem('cartToken');
+        const storedUuid =
+          existing && existing !== 'undefined' && existing !== 'null' ? existing : null;
+        response = await getCart(body.eventId, storedUuid);
+      } else {
+        response = await calculateCart(body);
+      }
+
+      const cart = response?.data;
 
       if (cart) {
-        updateCartIfChanged(cart, true);
+        if (cart.uuid) {
+          localStorage.setItem('cartToken', cart.uuid);
+        }
+        setShoppingCartValues(cart, !isInitial);
       }
     } catch (err) {
-      console.error('Error recalculating cart:', err);
+      console.error('Error calculating cart:', err);
     }
   }, []);
 
-  const removeProduct = (variant: ISelectedProductVariant) => {
-    const { eventId, variantId } = variant;
-    const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
+  // const removeProduct = (variant: ISelectedProductVariant) => {
+  //   const { eventId, variantId } = variant;
+  //   const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
 
-    const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
-    if (idx === -1) return;
-    const item = list[idx];
+  //   const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
+  //   if (idx === -1) return;
+  //   const item = list[idx];
 
-    if ((item.quantity ?? 0) <= 1) {
-      list.splice(idx, 1);
-    } else {
-      list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
-    }
+  //   if ((item.quantity ?? 0) <= 1) {
+  //     list.splice(idx, 1);
+  //   } else {
+  //     list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
+  //   }
 
-    const next = { ...products, [eventId]: list };
+  //   const next = { ...products, [eventId]: list };
 
-    if (list.length === 0) {
-      const { [eventId]: _removed, ...rest } = next;
-      setValue('products', rest);
-    } else {
-      setValue('products', next);
-    }
-  };
+  //   if (list.length === 0) {
+  //     const { [eventId]: _removed, ...rest } = next;
+  //     setValue('products', rest);
+  //   } else {
+  //     setValue('products', next);
+  //   }
+  // };
 
   return (
     <OverviewCard id="overview-card" stickyHeaderTop={options?.stickyHeaderTop || 0}>
@@ -449,7 +449,8 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
               />
             }
             sx={{
-              backgroundColor: (theme) => theme.palette.grey.A100,
+              backgroundColor: (theme) =>
+                theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
               borderRadius: 1,
             }}
           >
@@ -476,15 +477,49 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
           </Stack>
         </Stack>
       )}
-      <Stack className="overview-card__order-info" p={2} spacing={1}>
+      <Stack
+        className="overview-card__order-info"
+        sx={{ p: { xs: withoutPadding ? 0 : 2, md: 2 } }}
+        pt={{ xs: 0, sm: 2 }}
+        spacing={0.75}
+        useFlexGap
+      >
         {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
+
+        {!!selectedTickets.length && (
+          <Stack spacing={0.5}>
+            {/* TODO: Uncomment this when Colonnade response - must update terms and conditions and email info */}
+            {/*<PaymentOverviewCheckbox*/}
+            {/*  checkboxName="ticketInsurance"*/}
+            {/*  label={t('event.tickets.insurance.label')}*/}
+            {/*  value={*/}
+            {/*    <>*/}
+            {/*      {ticketInsurance && totalItemCount.totalTickets > 0 ? '' : '+ '}*/}
+            {/*      {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
+            {/*      {t('event.tickets.insurance.per_ticket')}*/}
+            {/*    </>*/}
+            {/*  }*/}
+            {/*/>*/}
+            <PaymentOverviewCheckbox
+              checkboxName="smsNotification"
+              label={t('event.tickets.sms_notification.label')}
+              value={
+                <>
+                  {smsNotification && totalItemCount.totalTickets > 0 ? '' : '+ '}
+                  {fCurrency(smsNotificationPrice, lang, event.currency)}
+                </>
+              }
+            />
+            <Divider sx={{ borderStyle: 'dashed' }} />
+          </Stack>
+        )}
         {selectedTickets.map((ticket, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {ticket.quantity}x {ticket.itemName}
               </Typography>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {fCurrency(
                   calculatePriceWithDiscount(
                     ticket.price,
@@ -504,10 +539,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
                 alignItems="center"
                 spacing={2}
               >
-                <Typography variant="caption">
+                <Typography variant="body2">
                   - {product.quantity}x {product.name}
                 </Typography>
-                <Typography variant="caption">
+                <Typography variant="body2">
                   {product.price > 0
                     ? fCurrency(
                         calculatePriceWithDiscount(
@@ -529,51 +564,55 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         {selectedVariants.map((variant, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="caption">
+              <Typography variant="body2">
                 {variant.quantity}x {variant.name}
               </Typography>
-              <Stack direction="row" spacing={1} alignItems="center">
-                <Typography variant="caption">
-                  {fCurrency(
-                    calculatePriceWithDiscount(
-                      variant.price,
-                      promoCodesValues.productDiscountPercent,
-                      promoCodesValues.fixedDevidedProducts
-                        ? promoCodesValues.fixedDevidedProducts * variant.quantity
-                        : 0
-                    ),
-                    lang,
-                    event.currency
-                  )}
-                </Typography>
-                <IconButton onClick={() => removeProduct(variant)} color="primary" size="small">
-                  <Iconify icon="carbon:trash-can" />
-                </IconButton>
-              </Stack>
+              <Typography variant="body2">
+                {fCurrency(
+                  calculatePriceWithDiscount(
+                    variant.price,
+                    promoCodesValues.productDiscountPercent,
+                    promoCodesValues.fixedDevidedProducts
+                      ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                      : 0
+                  ),
+                  lang,
+                  event.currency
+                )}
+              </Typography>
             </Stack>
           </Box>
         ))}
         {!!shippingFee && (
           <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.shipping_fee')}</Typography>
-            <Typography variant="caption">
-              {fCurrency(shippingFee, lang, event.currency)}
-            </Typography>
+            <Typography variant="body2">{t('form.labels.shipping_fee')}</Typography>
+            <Typography variant="body2">{fCurrency(shippingFee, lang, event.currency)}</Typography>
           </Stack>
         )}
         {!!total && !!totalFee && (
           <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.service_fee')}</Typography>
-            <Typography variant="caption">{getFee}</Typography>
+            <Typography variant="body2">{t('form.labels.service_fee')}</Typography>
+            <Typography variant="body2">{getFee}</Typography>
           </Stack>
         )}
         {((!!selectedTickets.length && isMobile) || !isMobile) && (
           <Divider sx={{ borderStyle: 'dashed' }} />
         )}
-        <FeeBox event={event} />
-        <LoadingButton type="submit" variant="contained" size="large" fullWidth>
-          {t(isPaymentVerify ? 'verify' : 'buy')}
-        </LoadingButton>
+        {!hideBuyButton && (
+          <>
+            <FeeBox event={event} />
+            <LoadingButton
+              type="submit"
+              form={EVENTLOOK_ORDER_FORM_ID}
+              variant="contained"
+              size="large"
+              fullWidth
+              sx={{ height: { xs: 36, md: 40 } }}
+            >
+              {t(isPaymentVerify ? 'verify' : 'buy')}
+            </LoadingButton>
+          </>
+        )}
       </Stack>
     </OverviewCard>
   );