@blocklet/payment-react 1.19.18 → 1.19.20

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,15 +68,22 @@ 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) {
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
@@ -87,19 +94,19 @@ export default function ProductItem({
   };
 
   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>
@@ -255,7 +262,7 @@ export default function ProductItem({
               <IconButton
                 size="small"
                 onClick={handleQuantityIncrease}
-                disabled={localQuantity >= maxQuantity}
+                disabled={localQuantityNum >= maxQuantity}
                 sx={{ minWidth: 32, width: 32, height: 32 }}>
                 <Add fontSize="small" />
               </IconButton>