adjust order items fit

immutable · May 16, 2024 · a474b22 · a474b22
1 parent 56c1640
commit a474b22
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 39 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItems.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/OrderItems.tsx
@@ -8,7 +8,7 @@ import { OrderItem } from './OrderItem';
 import { OrderQuoteProduct, FundingBalance } from '../types';
 import { getPricingBySymbol } from '../utils/pricing';
 
-const singleItemSx: SxProps = {
+const withFeesSx: SxProps = {
   mb: '0',
   bradbl: '0',
   bradbr: '0',
@@ -27,10 +27,8 @@ export function OrderItems({
   balance,
   pricing,
   conversions,
-  children,
+  children: feesChildren,
 }: OrderItemsProps) {
-  const singleItem = items.length === 1 && children;
-
   return (
     <Box
       rc={
@@ -43,17 +41,17 @@ export function OrderItems({
           item={item}
           balance={balance}
           conversions={conversions}
-          size={singleItem ? 'medium' : 'small'}
+          size={items.length >= 3 ? 'small' : 'medium'}
           pricing={getPricingBySymbol(
             balance.fundingItem.token.symbol,
             pricing?.[item.productId]?.pricing,
             conversions,
           )}
-          sx={singleItem ? singleItemSx : undefined}
+          sx={idx === items.length - 1 && feesChildren ? withFeesSx : undefined}
           rc={<motion.div variants={listItemVariants} custom={idx} />}
         />
       ))}
-      {children}
+      {feesChildren}
     </Box>
   );
 }
diff --git a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx
@@ -34,38 +34,38 @@ const defaultItems: SaleItem[] = [
       "https://iguanas.mystagingwebsite.com/wp-content/uploads/2024/02/img-Qq0Lek5jO8O9ueAZwDmdAImI-600x600-1.png",
     description: "Biker Iguana",
   },
-  // {
-  //   productId: "lab",
-  //   qty: 3,
-  //   name: "Lab Iguana",
-  //   image:
-  //     "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-IsR4OA7a9IStLeQ9cPo75tII.png",
-  //   description: "Lab Iguana",
-  // },
-  // {
-  //   productId: "baseball",
-  //   qty: 2,
-  //   name: "Baseball Iguana",
-  //   image:
-  //     "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-tGcvA5pnoUAA2oNANHpA5CXB.png",
-  //   description: "Baseball Iguana",
-  // },
-  // {
-  //   productId: "firefighter",
-  //   qty: 1,
-  //   name: "Fire Fighter Iguana",
-  //   image:
-  //     "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-NRXmr7k1jH9kZqXr029CEKt4.png",
-  //   description: "Fire Fighter Iguana",
-  // },
-  // {
-  //   productId: "soccer",
-  //   qty: 5,
-  //   name: "Soccer Iguana",
-  //   image:
-  //     "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-msXHlIXmyy6IhDaMkP2Dp0HY.png",
-  //   description: "Soccer Iguana",
-  // }
+  {
+    productId: "lab",
+    qty: 3,
+    name: "Lab Iguana",
+    image:
+      "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-IsR4OA7a9IStLeQ9cPo75tII.png",
+    description: "Lab Iguana",
+  },
+  {
+    productId: "baseball",
+    qty: 2,
+    name: "Baseball Iguana",
+    image:
+      "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-tGcvA5pnoUAA2oNANHpA5CXB.png",
+    description: "Baseball Iguana",
+  },
+  {
+    productId: "firefighter",
+    qty: 1,
+    name: "Fire Fighter Iguana",
+    image:
+      "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-NRXmr7k1jH9kZqXr029CEKt4.png",
+    description: "Fire Fighter Iguana",
+  },
+  {
+    productId: "soccer",
+    qty: 5,
+    name: "Soccer Iguana",
+    image:
+      "https://iguanas.mystagingwebsite.com/wp-content/uploads/2023/12/img-msXHlIXmyy6IhDaMkP2Dp0HY.png",
+    description: "Soccer Iguana",
+  }
 ];
 
 const useParams = () => {