Merge pull request #855 from karrioapi/hotfix/commodity-form-metadata-editor

hotfix/commodity form - metadata editor

Author: danh91

packages/core/modules/Orders/draft_order.tsx

@@ -70,6 +70,43 @@ export default function Page(pageProps: { params: Promise<{ id?: string }> }) {
       setKey(`${id}-${Date.now()}`);
     };
 
+    // Helper function to analyze currencies in line items
+    const analyzeCurrencies = () => {
+      if (!order?.line_items || order.line_items.length === 0) {
+        return { currencies: [], hasMixedCurrencies: false, hasValues: false };
+      }
+      
+      const itemsWithValues = order.line_items.filter(
+        item => item.value_currency && item.value_amount && item.value_amount > 0
+      );
+      
+      if (itemsWithValues.length === 0) {
+        return { currencies: [], hasMixedCurrencies: false, hasValues: false };
+      }
+      
+      const currencies = Array.from(new Set(
+        itemsWithValues.map(item => item.value_currency)
+      ));
+      
+      return {
+        currencies,
+        hasMixedCurrencies: currencies.length > 1,
+        hasValues: true
+      };
+    };
+
+    // Currency validation logic
+    const getCurrencyValidationErrors = () => {
+      const errors: string[] = [];
+      const { hasMixedCurrencies } = analyzeCurrencies();
+      
+      if (hasMixedCurrencies) {
+        errors.push("Please standardize currency - your order contains items with different currencies");
+      }
+      
+      return errors;
+    };
+
     // Validation logic
     const getValidationErrors = () => {
       const errors: string[] = [];
@@ -102,7 +139,7 @@ export default function Page(pageProps: { params: Promise<{ id?: string }> }) {
       return errors;
     };
 
-    const validationErrors = getValidationErrors();
+    const validationErrors = [...getValidationErrors(), ...getCurrencyValidationErrors()];
     useEffect(() => {
       if (
         !ready &&
@@ -416,18 +453,30 @@ export default function Page(pageProps: { params: Promise<{ id?: string }> }) {
                       <p className="font-semibold text-xs">
                         TOTAL:{" "}
                         {
-                          <span>
-                            {(order.line_items || []).reduce(
-                              (_, { quantity, value_amount }) =>
-                                _ +
+                          (() => {
+                            const { hasMixedCurrencies, hasValues, currencies } = analyzeCurrencies();
+                            
+                            // If no items have values, show 0
+                            if (!hasValues) {
+                              return <span>0</span>;
+                            }
+                            
+                            // If mixed currencies, show warning message
+                            if (hasMixedCurrencies) {
+                              return <span className="text-yellow-600">Mixed currencies</span>;
+                            }
+                            
+                            // Single currency - calculate normally
+                            const total = (order.line_items || []).reduce(
+                              (sum, { quantity, value_amount }) =>
+                                sum +
                                 (isNone(quantity) ? 1 : (quantity as any)) *
-                                (isNone(value_amount)
-                                  ? 1.0
-                                  : (value_amount as any)),
+                                (isNone(value_amount) ? 0 : (value_amount as any)),
                               0.0,
-                            )}{" "}
-                            {(order.line_items || [])[0]?.value_currency}
-                          </span>
+                            );
+                            
+                            return <span>{total} {currencies[0]}</span>;
+                          })()
                         }
                       </p>
                       <p className="font-semibold text-xs">

packages/ui/components/commodity-edit-dialog.tsx

@@ -9,13 +9,9 @@ import {
 import {
   CurrencyCodeEnum,
   DEFAULT_COMMODITY_CONTENT,
-  MetadataObjectTypeEnum,
   WeightUnitEnum,
 } from "@karrio/types";
-import {
-  MetadataEditor,
-  MetadataEditorContext,
-} from "@karrio/ui/core/forms/metadata-editor";
+import { EnhancedMetadataEditor } from "@karrio/ui/components/enhanced-metadata-editor";
 import { isEqual, isNone } from "@karrio/lib";
 import { CommodityType, CURRENCY_OPTIONS, WEIGHT_UNITS } from "@karrio/types";
 import { useAPIMetadata } from "@karrio/hooks/api-metadata";
@@ -26,8 +22,6 @@ import { Label } from "@karrio/ui/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@karrio/ui/components/ui/select";
 import { CountrySelect } from "@karrio/ui/components/country-select";
 import { Textarea } from "@karrio/ui/components/ui/textarea";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@karrio/ui/components/ui/collapsible";
-import { ChevronDown, ChevronUp } from "lucide-react";
 import { useOrders } from "@karrio/hooks/order";
 
 export interface CommodityEditDialogProps {
@@ -38,6 +32,7 @@ export interface CommodityEditDialogProps {
   disableOrderLinking?: boolean;
 }
 
+
 export const CommodityEditDialog = ({
   trigger,
   commodity: initialCommodity,
@@ -65,18 +60,16 @@ export const CommodityEditDialog = ({
     setCommodity(initialCommodity || DEFAULT_COMMODITY_CONTENT);
   }, [initialCommodity]);
 
+  // always provide fresh state for new operations
   React.useEffect(() => {
-    if (isOpen && !initialCommodity) {
-      const timestamp = Date.now();
-      const randomId = Math.random().toString(36).substr(2, 9);
-      const tempId = `temp_${timestamp}_${randomId}`;
-      
-      setCommodity({
-        ...DEFAULT_COMMODITY_CONTENT,
-        id: tempId, // Assign temporary ID to prevent unwanted merging
-      });
-      setMaxQty(undefined);
-      setAdvancedExpanded(false);
+    if (isOpen) {
+      // always set commodity state when opening
+      const commodityData = initialCommodity || DEFAULT_COMMODITY_CONTENT;
+      setCommodity(commodityData);
+      // Reset maxQty for new operations
+      if (!initialCommodity) {
+        setMaxQty(undefined);
+      }
     }
   }, [isOpen, initialCommodity]);
 
@@ -235,9 +228,7 @@ export const CommodityEditDialog = ({
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="origin_country" className="text-sm font-medium">
-                      Origin Country <span className="text-red-500">*</span>
-                    </Label>
+                    <Label htmlFor="origin_country" className="text-sm font-medium">Origin Country</Label>
                     <CountrySelect
                       value={commodity?.origin_country || ""}
                       onValueChange={(value) => handleChange("origin_country", value)}
@@ -354,56 +345,16 @@ export const CommodityEditDialog = ({
                   />
                 </div>
 
-                {/* Advanced Fields */}
-                <Collapsible open={advancedExpanded} onOpenChange={setAdvancedExpanded}>
-                  <CollapsibleTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      className="flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 p-0 h-auto"
-                    >
-                      Advanced Options
-                      {advancedExpanded ? (
-                        <ChevronUp className="h-4 w-4" />
-                      ) : (
-                        <ChevronDown className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent className="space-y-6 mt-6 pl-4 border-l-2 border-gray-200">
-                    <MetadataEditor
-                      id={commodity?.id}
-                      object_type={MetadataObjectTypeEnum.commodity}
-                      metadata={commodity?.metadata}
-                      onChange={(value) => handleChange("metadata", value)}
-                    >
-                      {(() => {
-                        const { isEditing, editMetadata } = React.useContext(
-                          MetadataEditorContext,
-                        );
-
-                        return (
-                          <>
-                            <div className="flex justify-between">
-                              <Label className="text-sm font-medium">Metadata</Label>
-
-                              <Button
-                                type="button"
-                                variant="link"
-                                size="sm"
-                                disabled={isEditing}
-                                onClick={() => editMetadata()}
-                                className="text-blue-600 hover:text-blue-800 p-1 h-auto"
-                              >
-                                Edit metadata
-                              </Button>
-                            </div>
-                          </>
-                        );
-                      })()}
-                    </MetadataEditor>
-                  </CollapsibleContent>
-                </Collapsible>
+                {/* Metadata Editor */}
+                <EnhancedMetadataEditor
+                  value={commodity?.metadata || {}}
+                  onChange={(metadata) => setCommodity({ ...commodity, metadata })}
+                  className="w-full"
+                  placeholder="No metadata configured"
+                  emptyStateMessage="Add key-value pairs to configure commodity metadata"
+                  showTypeInference={true}
+                  maxHeight="300px"
+                />
               </div>
             </div>
 
@@ -431,4 +382,4 @@ export const CommodityEditDialog = ({
   );
 };
 
-CommodityEditDialog.displayName = "CommodityEditDialog";
+CommodityEditDialog.displayName = "CommodityEditDialog";