chore: [CM-638][Sale Widget] Improve menu items display (#1793)

immutable · May 17, 2024 · 78598ae · 78598ae
1 parent f15f368
commit 78598ae
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItem.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItem.tsx
@@ -1,4 +1,6 @@
-import { Heading, MenuItem, MenuItemSize } from '@biom3/react';
+import {
+  Heading, MenuItem, MenuItemSize, SxProps,
+} from '@biom3/react';
 import { SaleItem } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
 import { calculateCryptoToFiat, tokenValueFormat } from 'lib/utils';
@@ -14,6 +16,7 @@ export interface OrderItemProps<
   conversions: Map<string, number>;
   size?: MenuItemSize;
   rc?: RC;
+  sx?: SxProps;
 }
 
 export function OrderItem<RC extends ReactElement | undefined = undefined>({
@@ -22,6 +25,7 @@ export function OrderItem<RC extends ReactElement | undefined = undefined>({
   pricing,
   conversions,
   size,
+  sx,
   rc = <span />,
 }: OrderItemProps<RC>) {
   const { t } = useTranslation();
@@ -44,6 +48,7 @@ export function OrderItem<RC extends ReactElement | undefined = undefined>({
       sx={{
         pointerEvents: 'none',
         mb: 'base.spacing.x1',
+        ...sx,
       }}
     >
       <MenuItem.FramedImage imageUrl={item.image} />

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItems.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItems.tsx
@@ -1,24 +1,33 @@
-import { Box } from '@biom3/react';
+import { Box, SxProps } from '@biom3/react';
 import { SaleItem } from '@imtbl/checkout-sdk';
 import { listVariants, listItemVariants } from 'lib/animation/listAnimation';
 
 import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
 import { OrderItem } from './OrderItem';
 import { OrderQuoteProduct, FundingBalance } from '../types';
 import { getPricingBySymbol } from '../utils/pricing';
 
+const withFeesSx: SxProps = {
+  mb: '0',
+  bradbl: '0',
+  bradbr: '0',
+};
+
 type OrderItemsProps = {
   items: SaleItem[];
   balance: FundingBalance;
   pricing: Record<string, OrderQuoteProduct>;
   conversions: Map<string, number>;
+  children?: ReactNode;
 };
 
 export function OrderItems({
   items,
   balance,
   pricing,
   conversions,
+  children: feesChildren,
 }: OrderItemsProps) {
   return (
     <Box
@@ -32,15 +41,17 @@ export function OrderItems({
           item={item}
           balance={balance}
           conversions={conversions}
-          size={items.length > 1 ? 'small' : 'medium'}
+          size={items.length >= 3 ? 'small' : 'medium'}
           pricing={getPricingBySymbol(
             balance.fundingItem.token.symbol,
             pricing?.[item.productId]?.pricing,
             conversions,
           )}
+          sx={idx === items.length - 1 && feesChildren ? withFeesSx : undefined}
           rc={<motion.div variants={listItemVariants} custom={idx} />}
         />
       ))}
+      {feesChildren}
     </Box>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx
@@ -1,4 +1,4 @@
-import { IconProps, MenuItem } from '@biom3/react';
+import { IconProps, MenuItem, MenuItemSize } from '@biom3/react';
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,13 +11,15 @@ export interface PaymentOptionProps<
   onClick: (type: SalePaymentTypes) => void;
   disabled?: boolean;
   caption?: string;
+  size?: MenuItemSize;
 }
 
 export function PaymentOption<RC extends ReactElement | undefined = undefined>({
   type,
   onClick,
   disabled = false,
   caption,
+  size,
   rc = <span />,
 }: PaymentOptionProps<RC>) {
   const { t } = useTranslation();
@@ -39,7 +41,7 @@ export function PaymentOption<RC extends ReactElement | undefined = undefined>({
   return (
     <MenuItem
       rc={rc}
-      size="medium"
+      size={size || 'medium'}
       sx={{
         marginBottom: 'base.spacing.x1',
         userSelect: 'none',

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOptions.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOptions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@biom3/react';
+import { Box, MenuItemSize } from '@biom3/react';
 
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { listItemVariants, listVariants } from 'lib/animation/listAnimation';
@@ -16,11 +16,12 @@ export interface PaymentOptionsProps {
   disabledOptions?: SalePaymentTypes[];
   paymentOptions?: SalePaymentTypes[];
   captions?: Partial<Record<SalePaymentTypes, string>>;
+  size?: MenuItemSize;
 }
 
 export function PaymentOptions(props: PaymentOptionsProps) {
   const {
-    disabledOptions = [], paymentOptions, onClick, captions,
+    disabledOptions = [], paymentOptions, onClick, captions, size,
   } = props;
   const options = paymentOptions || defaultPaymentOptions;
 
@@ -42,6 +43,7 @@ export function PaymentOptions(props: PaymentOptionsProps) {
         <PaymentOption
           key={`payment-type-${type}`}
           type={type}
+          size={size}
           onClick={onClick}
           disabled={disabledOptions.includes(type)}
           caption={captions?.[type]}