@blocklet/payment-react 1.23.10 → 1.23.11

package/es/payment/product-item.js

@@ -95,42 +95,76 @@ export default function ProductItem({
       refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
     }
   );
-  const getInitialQuantity = () => {
+  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 getMinQuantityForPending = useMemo(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new BN(pendingAmount || "0");
+    if (!pendingAmountBN.gt(new BN(0))) return null;
+    const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+  const initialQuantity = useMemo(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
-    return item.quantity;
-  };
-  const [localQuantity, setLocalQuantity] = useState(getInitialQuantity());
-  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;
+    let baseQuantity = item.quantity;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+  const [localQuantity, setLocalQuantity] = useState(initialQuantity);
   const localQuantityNum = localQuantity || 0;
   useEffect(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
   const handleQuantityChange = (newQuantity) => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
       setPayable(false);
       return;
     }
-    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
       if (userDid && newQuantity > 0) {
@@ -204,7 +238,7 @@ export default function ProductItem({
     }
     const pendingAmountBN = new BN(pendingAmount || "0");
     const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new BN(actualAvailable).gt(new BN(0))) {

package/lib/payment/product-item.js

@@ -103,42 +103,76 @@ function ProductItem({
   }, {
     refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
   });
-  const getInitialQuantity = () => {
+  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 getMinQuantityForPending = (0, _react.useMemo)(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new _util.BN(pendingAmount || "0");
+    if (!pendingAmountBN.gt(new _util.BN(0))) return null;
+    const creditAmountBN = (0, _util.fromTokenToUnit)(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+  const initialQuantity = (0, _react.useMemo)(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
-    return item.quantity;
-  };
-  const [localQuantity, setLocalQuantity] = (0, _react.useState)(getInitialQuantity());
-  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;
+    let baseQuantity = item.quantity;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(initialQuantity);
   const localQuantityNum = localQuantity || 0;
   (0, _react.useEffect)(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
   const handleQuantityChange = newQuantity => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
       setPayable(false);
       return;
     }
-    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if ((0, _util2.formatQuantityInventory)(item.price, newQuantity, locale)) {
         return;
       }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
       if (userDid && newQuantity > 0) {
@@ -204,7 +238,7 @@ function ProductItem({
     }
     const pendingAmountBN = new _util.BN(pendingAmount || "0");
     const creditAmountBN = (0, _util.fromTokenToUnit)(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new _util.BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new _util.BN(actualAvailable).gt(new _util.BN(0))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.23.10",
+  "version": "1.23.11",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.23.10",
+    "@blocklet/payment-types": "1.23.11",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "9d058650e81ae43ffafb3e1253b50b6245d510ac"
+  "gitHead": "72af80fc6e91e88058665212985002966f55787c"
 }

package/src/payment/product-item.tsx

@@ -127,40 +127,69 @@ export default function ProductItem({
     }
   );
 
-  // calculate initial quantity: priority URL recommendation > user preference > item.quantity
-  const getInitialQuantity = (): number | undefined => {
+  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 getMinQuantityForPending = useMemo(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new BN(pendingAmount || '0');
+    if (!pendingAmountBN.gt(new BN(0))) return null;
+    const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+
+  const initialQuantity = useMemo(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
 
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
 
-    return item.quantity;
-  };
+    let baseQuantity = item.quantity;
 
-  const [localQuantity, setLocalQuantity] = useState<number | undefined>(getInitialQuantity());
-  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;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+
+  const [localQuantity, setLocalQuantity] = useState<number | undefined>(initialQuantity);
   const localQuantityNum = localQuantity || 0;
 
   useEffect(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      // need update checkout session
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
 
   const handleQuantityChange = (newQuantity: number) => {
     if (!newQuantity) {
@@ -168,11 +197,22 @@ export default function ProductItem({
       setPayable(false);
       return;
     }
-    setPayable(true);
+
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
 
@@ -259,7 +299,7 @@ export default function ProductItem({
 
     const pendingAmountBN = new BN(pendingAmount || '0');
     const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();