@eventlook/sdk 1.5.0-beta.6 → 1.5.0-beta.7

package/src/form/PaymentOverviewBox.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Iconify, Image, TextIconLabel } from '@components';
-import { Box, Button, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { Box, Button, Divider, Grid, Stack, Typography } from '@mui/material';
 import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox';
 import locationIcon from '@iconify/icons-carbon/location';
 import { getPlaceAsString } from '@utils/place';
@@ -25,12 +25,15 @@ import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shoppi
 import { PromoCodeTypes } from '@utils/data/promo-code';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import useDebounce from '@hooks/useDebounce';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global';
 
 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 xs = useResponsive('only', 'xs');
   const md = useResponsive('only', 'md');
@@ -53,9 +56,9 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     totalFee,
     isPaymentVerify,
     ticketInsurance,
-    ticketInsurancePricePerUnit,
     smsNotification,
     smsNotificationPrice,
+    ticketInsurancePricePerUnit,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -384,29 +387,29 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     }
   }, []);
 
-  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}>
@@ -445,7 +448,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,
             }}
           >
@@ -472,15 +476,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,
@@ -500,10 +538,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(
@@ -525,120 +563,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>
-          </Stack>
-        )}
-        {ticketInsurance && totalItemCount.totalTickets > 0 && (
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.ticket_insurance')}</Typography>
-            <Typography variant="caption">
-              {fCurrency(values.ticketInsurancePrice, lang, event.currency)}
-            </Typography>
-          </Stack>
-        )}
-        {smsNotification && totalItemCount.totalTickets > 0 && (
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="caption">{t('form.labels.sms_notification')}</Typography>
-            <Typography variant="caption">
-              {fCurrency(values.smsNotificationPrice, 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' }} />
         )}
-        {!!selectedTickets.length && (
+        {!hideBuyButton && (
           <>
-            {/* TODO: Uncomment this when Colonnade response - must update terms and conditions and email info */}
-            {/*<PaymentOverviewCheckbox*/}
-            {/*  checkboxName="ticketInsurance"*/}
-            {/*  label={t('event.tickets.insurance.label')}*/}
-            {/*  value={*/}
-            {/*    <>*/}
-            {/*      + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
-            {/*      {t('event.tickets.insurance.per_ticket')}*/}
-            {/*    </>*/}
-            {/*  }*/}
-            {/*  modal={{*/}
-            {/*    title: t('event.tickets.insurance.label'),*/}
-            {/*    description: (*/}
-            {/*      <>*/}
-            {/*        <Typography variant="body2" paragraph>*/}
-            {/*          {t('event.tickets.insurance.modal.description')}*/}
-            {/*        </Typography>*/}
-            {/*        <Typography variant="body2" paragraph>*/}
-            {/*          {t('event.tickets.insurance.modal.coverage')}*/}
-            {/*        </Typography>*/}
-            {/*        <Typography variant="body2" sx={{ fontWeight: 600 }}>*/}
-            {/*          {t('event.tickets.insurance.modal.price')}:{' '}*/}
-            {/*          {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
-            {/*          {t('event.tickets.insurance.per_ticket')}*/}
-            {/*        </Typography>*/}
-            {/*      </>*/}
-            {/*    ),*/}
-            {/*  }}*/}
-            {/*/>*/}
-            <PaymentOverviewCheckbox
-              checkboxName="smsNotification"
-              label={t('event.tickets.sms_notification.label')}
-              value={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-              modal={{
-                title: t('event.tickets.sms_notification.label'),
-                description: (
-                  <>
-                    <Typography variant="body2" paragraph>
-                      {t('event.tickets.sms_notification.modal.description')}
-                    </Typography>
-                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                      {t('event.tickets.sms_notification.modal.price')}:{' '}
-                      {fCurrency(smsNotificationPrice, lang, event.currency)}
-                    </Typography>
-                  </>
-                ),
-              }}
-            />
-            <Divider sx={{ borderStyle: 'dashed' }} />
+            <FeeBox event={event} />
+            <Button
+              type="submit"
+              form={EVENTLOOK_ORDER_FORM_ID}
+              variant="contained"
+              size="large"
+              fullWidth
+              sx={{ height: { xs: 36, md: 40 } }}
+            >
+              {t(isPaymentVerify ? 'verify' : 'buy')}
+            </Button>
           </>
         )}
-        <FeeBox event={event} />
-        <Button type="submit" variant="contained" size="large" fullWidth>
-          {t(isPaymentVerify ? 'verify' : 'buy')}
-        </Button>
       </Stack>
     </OverviewCard>
   );