[ENG-887] Fix internal and external delivery batch failure and refine supply delivery limit UI

.example.env

@@ -198,5 +198,9 @@ REACT_DECIMAL_ROUNDING_METHOD=ROUND_HALF_UP
 # Maximum number of forms that can be favorited in the forms dialog (default: 5)
 REACT_MAX_FORM_DIALOG_FAVORITES=5
 
+# Maximum number of datapoints allowed in a single upsert request (default: 100)
+# Must not exceed the backend limit
+REACT_MAX_DATAPOINTS_PER_UPSERT=100
+
 # Default tab for medication selector. Valid values: product, valueset
 REACT_MEDICATION_VALUE_SET_SELECT_DEFAULT_TAB=product

care.config.ts

@@ -421,6 +421,14 @@ const careConfig = {
   maxFormDialogFavorites: env.REACT_MAX_FORM_DIALOG_FAVORITES
     ? parseInt(env.REACT_MAX_FORM_DIALOG_FAVORITES, 10)
     : 5,
+
+  /**
+   * Maximum number of datapoints allowed in a single upsert request.
+   * This should be set with whatever backend sets.
+   */
+  maxDatapointsPerUpsert: env.REACT_MAX_DATAPOINTS_PER_UPSERT
+    ? parseInt(env.REACT_MAX_DATAPOINTS_PER_UPSERT, 10)
+    : 100,
 } as const;
 
 export default careConfig;

public/locale/en.json

@@ -3107,6 +3107,7 @@
   "issuer_type": "Issuer Type",
   "item": "Item",
   "item_condition": "Item Condition?",
+  "item_limit_reached": "Item limit reached",
   "item_location": "Item Location",
   "item_marked_as_abandoned": "Item marked as abandoned successfully",
   "item_marked_as_entered_in_error": "Item marked as entered in error successfully",
@@ -3227,7 +3228,7 @@
   "live": "Live",
   "live_monitoring": "Live Monitoring",
   "live_patients_total_beds": "Live Patients / Total beds",
-  "load_from_order": "Load from order",
+  "load_from_order_with_items": "Load from order ({{count}} items)",
   "load_more": "Load More",
   "loading": "Loading...",
   "loading_appointment_details": "Loading appointment details...",
@@ -3457,6 +3458,7 @@
   "max": "Max",
   "max_applicable_discounts": "Maximum Applicable Discounts",
   "max_applicable_discounts_description": "The maximum number of discount components that can be applied to a single invoice. Set to 0 for no discount.",
+  "max_datapoints_per_upsert_limit": "You cannot add more than {{count}} items in a single delivery.",
   "max_dosage_24_hrs": "Max. dosage in 24 hrs.",
   "max_dosage_in_24hrs_gte_base_dosage_error": "Max. dosage in 24 hours must be greater than or equal to base dosage",
   "max_favorites_reached": "You've reached the limit. Only {{count}} forms can be favourited.",

scripts/validate-env.ts

@@ -178,6 +178,7 @@ const envSchema = z
         message: `Must be one of: ${VALID_ROUNDING_METHODS.join(", ")}`,
       })
       .optional(),
+    REACT_MAX_DATAPOINTS_PER_UPSERT: numberAsString.optional(),
     REACT_MAX_FORM_DIALOG_FAVORITES: positiveNumberAsString.optional(),
   })
   .superRefine(async (data, ctx) => {

src/CAREUI/display/Callout.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
 interface CalloutProps {
   variant?: "primary" | "secondary" | "warning" | "alert" | "danger";
   className?: string;
-  badge: string;
+  badge: ReactNode;
   children: React.ReactNode;
 }
 
@@ -27,20 +27,7 @@ export default function Callout({
         props.className,
       )}
     >
-      <div
-        className={cn(
-          "h-min rounded-full border bg-white px-2",
-          {
-            primary: "border-primary-200",
-            secondary: "border-secondary-300",
-            warning: "border-warning-300",
-            alert: "border-purple-300",
-            danger: "border-danger-300",
-          }[variant],
-        )}
-      >
-        <span className="font-medium">{props.badge}</span>
-      </div>
+      <span className="font-medium">{props.badge}</span>
       <div className="flex-1">
         <span className="font-medium">{props.children}</span>
       </div>

src/pages/Facility/services/inventory/externalSupply/deliveryOrder/AddSupplyDeliveryForm.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { PlusCircle, Trash2 } from "lucide-react";
+import { PlusCircle, Trash2, TriangleAlert } from "lucide-react";
 import { useQueryParams } from "raviger";
 import { useCallback, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -43,6 +43,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+import Callout from "@/CAREUI/display/Callout";
 import {
   getExtensionFieldsWithName,
   processExtensions,
@@ -129,6 +130,8 @@ interface Props {
   origin?: string;
   destination: string;
   onSuccess: () => void;
+  supplyDeliveriesCount: number;
+  isFetchingSupplyDeliveries: boolean;
 }
 
 export function AddSupplyDeliveryForm({
@@ -137,6 +140,8 @@ export function AddSupplyDeliveryForm({
   origin,
   destination,
   onSuccess,
+  supplyDeliveriesCount,
+  isFetchingSupplyDeliveries,
 }: Props) {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -237,6 +242,12 @@ export function AddSupplyDeliveryForm({
     name: "items",
   });
 
+  const hasReachedUpsertLimit =
+    supplyDeliveriesCount >= careConfig.maxDatapointsPerUpsert;
+
+  const disableAddItem =
+    isProcessing || hasReachedUpsertLimit || isFetchingSupplyDeliveries;
+
   const loadFromSupplyRequests = () => {
     setIsSelectDialogOpen(true);
     handleSelectAll(true);
@@ -269,6 +280,7 @@ export function AddSupplyDeliveryForm({
       noOptionsMessage={t("no_orders_found")}
       className="px-10"
       popoverContentClassName="w-auto"
+      disabled={disableAddItem}
     />
   );
 
@@ -897,29 +909,47 @@ export function AddSupplyDeliveryForm({
                     </div>
                   </div>
 
-                  <div className="flex flex-row gap-2 mt-4 items-end">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={handleAddAnotherItem}
+                  {supplyDeliveriesCount + fields.length >=
+                  careConfig.maxDatapointsPerUpsert ? (
+                    <Callout
+                      variant="warning"
+                      className="border border-amber-300 bg-amber-50 text-amber-800"
+                      badge={
+                        <TriangleAlert className="size-4 shrink-0 text-amber-600" />
+                      }
                     >
-                      <PlusCircle className="mr-2 size-4" />
-                      {t("add_another")}
-                    </Button>
-                    {supplyRequests?.results?.length &&
-                      supplyRequests?.results?.length > 0 && (
+                      <span className="flex items-center gap-2">
+                        {t("max_datapoints_per_upsert_limit", {
+                          count: careConfig.maxDatapointsPerUpsert,
+                        })}
+                      </span>
+                    </Callout>
+                  ) : (
+                    <div className="flex flex-row gap-2 mt-4 items-end">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleAddAnotherItem}
+                        disabled={disableAddItem}
+                      >
+                        <PlusCircle className="mr-2 size-4" />
+                        {t("add_another")}
+                      </Button>
+                      {!!supplyRequests?.results?.length && (
                         <Button
                           type="button"
                           variant="secondary"
                           onClick={loadFromSupplyRequests}
+                          disabled={disableAddItem}
                         >
-                          {t("load_from_order")} ({supplyRequests?.count}{" "}
-                          {t("items")}
-                          )
+                          {t("load_from_order_with_items", {
+                            count: supplyRequests.count,
+                          })}
                           <ShortcutBadge actionId="load-from-order" />
                         </Button>
                       )}
-                  </div>
+                    </div>
+                  )}
 
                   <div className="flex justify-between">
                     <Button
@@ -945,17 +975,17 @@ export function AddSupplyDeliveryForm({
                 <p>{t("add_items_to_delivery_description")}</p>
                 <div className="flex flex-row gap-2 items-center mt-2">
                   {qParams.supplyOrder ? (
-                    supplyRequests?.results?.length &&
-                    supplyRequests?.results?.length > 0 && (
+                    !!supplyRequests?.results?.length && (
                       <>
                         <Button
                           type="button"
                           variant="outline_primary"
                           onClick={loadFromSupplyRequests}
+                          disabled={disableAddItem}
                         >
-                          {t("load_from_order")} ({supplyRequests?.count}{" "}
-                          {t("items")}
-                          )
+                          {t("load_from_order_with_items", {
+                            count: supplyRequests.count,
+                          })}
                           <ShortcutBadge actionId="load-from-order" />
                         </Button>
                         <p>- {t("or")} -</p>
@@ -971,6 +1001,7 @@ export function AddSupplyDeliveryForm({
                     type="button"
                     variant="outline_primary"
                     onClick={() => handleAddAnotherItem()}
+                    disabled={disableAddItem}
                   >
                     <PlusCircle className="mr-2 size-4" />
                     {t("add_item")}
@@ -1007,7 +1038,7 @@ export function AddSupplyDeliveryForm({
                   {t("select_all")}
                 </label>
               </div>
-              <div className="border rounded-md divide-y">
+              <div className="border rounded-md divide-y max-h-[50vh] overflow-y-auto">
                 {supplyRequests.results.map((request) => (
                   <div
                     key={request.id}