(Online shop) Sales Item: Updating Stock-level

src/app/[locale]/seller/sale-items/[id]/page.tsx

@@ -21,7 +21,8 @@ import {
   IUser, 
   SellerItem, 
   PaymentDataType,  
-  PaymentType 
+  PaymentType, 
+  StockLevelType
 } from '@/constants/types';
 import { fetchSellerItems, fetchSingleSeller } from '@/services/sellerApi';
 import { fetchSingleUserSettings } from '@/services/userSettingsApi';
@@ -247,18 +248,23 @@ export default function BuyFromSellerForm({ params }: { params: { id: string } }
             header={t('SCREEN.SELLER_REGISTRATION.SELLER_ONLINE_SHOPPING_ITEMS_LIST_LABEL')}
             open={false}>
             <div className="overflow-x-auto mb-7 mt-3 flex p-2 gap-x-5 w-full">
-              {dbSellerItems && dbSellerItems.length > 0 && 
-                dbSellerItems.map((item) => (
+              {dbSellerItems && dbSellerItems.length > 0 && dbSellerItems
+                .filter(item => {
+                  const isSold = item.stock_level === StockLevelType.sold;
+                  const isExpired = item.expired_by && new Date(item.expired_by) < new Date();
+                  return !isSold && !isExpired;
+                })
+                .map(item => (
                   <ListItem
                     key={item._id}
                     item={item}
                     pickedItems={pickedItems}
                     setPickedItems={setPickedItems}
-                    refCallback={handleShopItemRef} // Attach observer
+                    refCallback={handleShopItemRef}
                     totalAmount={totalAmount}
                     setTotalAmount={setTotalAmount}
-                  /> 
-                ))            
+                  />
+                ))
               }
             </div>
             <div>

src/components/shared/Seller/ShopItem.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import { ConfirmDialogX, Notification } from "../confirm";
 import { Button } from "../Forms/Buttons/Buttons";
 import { TextArea, Input, FileInput, Select } from "../Forms/Inputs/Inputs";
-import { ISeller, PickedItems, SellerItem, StockLevelType } from "@/constants/types";
+import { ISeller, PickedItems, SellerItem, ShopItemData, StockLevelType } from "@/constants/types";
 import { addOrUpdateSellerItem, deleteSellerItem, fetchSellerItems } from "@/services/sellerApi";
 import removeUrls from "@/utils/sanitize";
 import { getStockLevelOptions } from "@/utils/translate";
@@ -139,12 +139,12 @@ export const ShopItem: React.FC<{
   const locale = useLocale();
   const t = useTranslations();
 
-  const [formData, setFormData] = useState<SellerItem>({
+  const [formData, setFormData] = useState<ShopItemData>({
     seller_id: item.seller_id || '',
     name: item.name || '',
     description: item.description || '',
     duration: item.duration || 1,
-    price: { $numberDecimal: item.price?.$numberDecimal?.toString()},
+    price: item.price?.$numberDecimal?.toString(),
     image: item.image || '',
     stock_level: item.stock_level || getStockLevelOptions(t)[0].name,
     expired_by: item.expired_by, 
@@ -264,8 +264,7 @@ export const ShopItem: React.FC<{
     formDataToSend.append('duration', formData.duration?.toString() || '1');
     formDataToSend.append('seller_id', formData.seller_id || '');
     formDataToSend.append('stock_level', formData.stock_level || '1 available');
-    const price = (formData.price as unknown as string) || '0.01';
-    formDataToSend.append('price', parseFloat(price).toFixed(2));
+    formDataToSend.append('price', parseFloat(formData.price).toFixed(3).toString() || '0.01');
 
     // Add file if provided
     if (file) {
@@ -343,7 +342,7 @@ export const ShopItem: React.FC<{
                   label={t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.PRICE_LABEL') + ':'}
                   name="price"
                   type="number"
-                  value={formData.price.$numberDecimal}
+                  value={formData.price}
                   onChange={handleChange}
                   disabled={!isActive} // Disable if not active
                 />
@@ -502,9 +501,22 @@ export const ListItem: React.FC<{
       }
     });
   };
+
+  const quantityLimit = (stockLevel: StockLevelType) => {
+    switch (stockLevel) {
+      case StockLevelType.available_1:
+        return 1;
+      case StockLevelType.available_2:
+        return 2;
+      case StockLevelType.available_3:
+        return 3;
+      default:
+        return 9999; // Default value if no stock level matches
+    }
+  };
 
   const handleIncrement = () => {
-    setQuantity((prev) => prev + 1);
+    setQuantity((prev) => Math.min(quantityLimit(item.stock_level), prev + 1));
   };
 
   const handleDecrement = () => {

src/config/payment.ts

@@ -16,7 +16,7 @@ const onReadyForServerCompletion = (paymentId: string, txid: string) => {
 }
 
 const onCancel = (paymentId: string) => {
-  return axiosClient.post('/payments/cancelled_payment', { paymentId }, config);
+  return axiosClient.post('/payments/cancelled-payment', { paymentId }, config);
 }
 
 const onError = (error: Error, paymentDTO?: PaymentDTO) => {

src/constants/types.ts

@@ -110,6 +110,20 @@ export type SellerItem = {
   expired_by?: Date;
 };
 
+export type ShopItemData = {
+  _id: string;
+  seller_id: string;
+  name: string;
+  description?: string;
+  duration: number;
+  stock_level: StockLevelType;
+  image?: string;
+  price:  string;
+  created_at?: Date;
+  updated_at?: Date;
+  expired_by?: Date;
+};
+
 // ========================
 // REVIEW / FEEDBACK MODELS
 // ========================