@blocklet/payment-react 1.19.17 → 1.19.19

package/src/payment/product-item.tsx

@@ -54,7 +54,7 @@ export default function ProductItem({
   onQuantityChange = () => {},
 }: Props) {
   const { t, locale } = useLocaleContext();
-  const { settings } = usePaymentContext();
+  const { settings, setPayable } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
@@ -68,38 +68,45 @@ export default function ProductItem({
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || 'days';
 
-  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+  const [localQuantity, setLocalQuantity] = useState<number | undefined>(item.quantity);
   const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
   const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
   const maxQuantity = quantityAvailable
     ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable)
     : adjustableQuantity.maximum || Infinity;
+  const localQuantityNum = localQuantity || 0;
 
   const handleQuantityChange = (newQuantity: number) => {
+    if (!newQuantity) {
+      setLocalQuantity(undefined);
+      setPayable(false);
+      return;
+    }
+    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
-      setLocalQuantity(newQuantity);
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+      setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
     }
   };
 
   const handleQuantityIncrease = () => {
-    if (localQuantity < maxQuantity) {
-      handleQuantityChange(localQuantity + 1);
+    if (localQuantityNum < maxQuantity) {
+      handleQuantityChange(localQuantityNum + 1);
     }
   };
 
   const handleQuantityDecrease = () => {
-    if (localQuantity > minQuantity) {
-      handleQuantityChange(localQuantity - 1);
+    if (localQuantityNum > minQuantity) {
+      handleQuantityChange(localQuantityNum - 1);
     }
   };
 
   const handleQuantityInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value, 10);
+    const value = parseInt(event.target.value || '0', 10);
     if (!Number.isNaN(value)) {
       handleQuantityChange(value);
     }
@@ -110,7 +117,7 @@ export default function ProductItem({
     if (!isCreditProduct) return null;
 
     const isRecurring = item.price.type === 'recurring';
-    const totalCredit = formatNumber(creditAmount * localQuantity);
+    const totalCredit = formatNumber(creditAmount * (localQuantity || 0));
 
     let message = '';
     if (isRecurring) {
@@ -145,7 +152,7 @@ export default function ProductItem({
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
 
-  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantityNum, locale);
 
   return (
     <Stack
@@ -235,7 +242,7 @@ export default function ProductItem({
               <IconButton
                 size="small"
                 onClick={handleQuantityDecrease}
-                disabled={localQuantity <= minQuantity}
+                disabled={localQuantityNum <= minQuantity}
                 sx={{ minWidth: 32, width: 32, height: 32 }}>
                 <Remove fontSize="small" />
               </IconButton>
@@ -248,14 +255,14 @@ export default function ProductItem({
                   htmlInput: {
                     min: minQuantity,
                     max: maxQuantity,
-                    style: { textAlign: 'center', padding: '4px' },
+                    style: { textAlign: 'center', padding: '4px', minWidth: 80 },
                   },
                 }}
               />
               <IconButton
                 size="small"
                 onClick={handleQuantityIncrease}
-                disabled={localQuantity >= maxQuantity}
+                disabled={localQuantityNum >= maxQuantity}
                 sx={{ minWidth: 32, width: 32, height: 32 }}>
                 <Add fontSize="small" />
               </IconButton>