pricing tiers

frontend/src/pages/CreateItem.tsx

@@ -18,6 +18,8 @@ interface ItemFormData {
   inPlaceUseAvailable: boolean;
   pricePerHour?: number | string;
   pricePerDay?: number | string;
+  pricePerWeek?: number | string;
+  pricePerMonth?: number | string;
   replacementCost: number | string;
   address1: string;
   address2: string;
@@ -28,7 +30,6 @@ interface ItemFormData {
   latitude?: number;
   longitude?: number;
   rules?: string;
-  minimumRentalDays: number;
   needsTraining: boolean;
   generalAvailableAfter: string;
   generalAvailableBefore: string;
@@ -62,7 +63,6 @@ const CreateItem: React.FC = () => {
     state: "",
     zipCode: "",
     country: "US",
-    minimumRentalDays: 1,
     needsTraining: false,
     generalAvailableAfter: "09:00",
     generalAvailableBefore: "17:00",
@@ -79,11 +79,18 @@ const CreateItem: React.FC = () => {
   });
   const [imageFiles, setImageFiles] = useState<File[]>([]);
   const [imagePreviews, setImagePreviews] = useState<string[]>([]);
-  const [priceType, setPriceType] = useState<"hour" | "day">("day");
   const [userAddresses, setUserAddresses] = useState<Address[]>([]);
   const [selectedAddressId, setSelectedAddressId] = useState<string>("");
   const [addressesLoading, setAddressesLoading] = useState(true);
-  
+  const [selectedPricingUnit, setSelectedPricingUnit] = useState<string>("day");
+  const [showAdvancedPricing, setShowAdvancedPricing] = useState<boolean>(false);
+  const [enabledPricingTiers, setEnabledPricingTiers] = useState({
+    hour: false,
+    day: false,
+    week: false,
+    month: false,
+  });
+
   // Reference to LocationForm geocoding function
   const geocodeLocationRef = useRef<(() => Promise<boolean>) | null>(null);
 
@@ -187,6 +194,12 @@ const CreateItem: React.FC = () => {
         pricePerHour: formData.pricePerHour
           ? parseFloat(formData.pricePerHour.toString())
           : undefined,
+        pricePerWeek: formData.pricePerWeek
+          ? parseFloat(formData.pricePerWeek.toString())
+          : undefined,
+        pricePerMonth: formData.pricePerMonth
+          ? parseFloat(formData.pricePerMonth.toString())
+          : undefined,
         replacementCost: formData.replacementCost
           ? parseFloat(formData.replacementCost.toString())
           : 0,
@@ -355,6 +368,21 @@ const CreateItem: React.FC = () => {
     setImagePreviews((prev) => prev.filter((_, i) => i !== index));
   };
 
+  const handlePricingUnitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedPricingUnit(e.target.value);
+  };
+
+  const handleToggleAdvancedPricing = () => {
+    setShowAdvancedPricing((prev) => !prev);
+  };
+
+  const handleTierToggle = (tier: string) => {
+    setEnabledPricingTiers((prev) => ({
+      ...prev,
+      [tier]: !prev[tier as keyof typeof prev],
+    }));
+  };
+
   return (
     <div className="container mt-4">
       <div className="row justify-content-center">
@@ -430,13 +458,18 @@ const CreateItem: React.FC = () => {
             </div>
 
             <PricingForm
-              priceType={priceType}
               pricePerHour={formData.pricePerHour || ""}
               pricePerDay={formData.pricePerDay || ""}
+              pricePerWeek={formData.pricePerWeek || ""}
+              pricePerMonth={formData.pricePerMonth || ""}
               replacementCost={formData.replacementCost}
-              minimumRentalDays={formData.minimumRentalDays}
-              onPriceTypeChange={setPriceType}
+              selectedPricingUnit={selectedPricingUnit}
+              showAdvancedPricing={showAdvancedPricing}
+              enabledTiers={enabledPricingTiers}
               onChange={handleChange}
+              onPricingUnitChange={handlePricingUnitChange}
+              onToggleAdvancedPricing={handleToggleAdvancedPricing}
+              onTierToggle={handleTierToggle}
             />
 
             <RulesForm