@blocklet/payment-react 1.14.20 → 1.14.22

package/es/payment/product-donation.js

@@ -5,6 +5,7 @@ import { useSetState } from "ahooks";
 import { useEffect } from "react";
 import Switch from "../components/switch-button.js";
 import { formatAmountPrecisionLimit } from "../libs/util.js";
+import { usePaymentContext } from "../contexts/payment.js";
 export default function ProductDonation({
   item,
   settings,
@@ -12,6 +13,7 @@ export default function ProductDonation({
   currency
 }) {
   const { t, locale } = useLocaleContext();
+  const { setPayable } = usePaymentContext();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = useSetState({
     selected: preset,
@@ -39,12 +41,15 @@ export default function ProductDonation({
     const precision = currency?.maximum_precision || 6;
     if (formatAmountPrecisionLimit(value, locale)) {
       setState({ input: value, error: formatAmountPrecisionLimit(value, locale, precision) });
+      setPayable(false);
       return;
     }
     if (value < min || value > max) {
       setState({ input: value, error: t("payment.checkout.donation.between", { min, max }) });
+      setPayable(false);
       return;
     }
+    setPayable(true);
     setState({ error: "", input: value });
     onChange({ priceId: item.price_id, amount: value });
   };
@@ -61,7 +66,7 @@ export default function ProductDonation({
       {
         control: /* @__PURE__ */ jsx(Switch, { checked: state.custom, sx: { marginRight: 0.4 }, onChange: handleToggle }),
         label: state.custom ? t("payment.checkout.donation.select") : t("payment.checkout.donation.custom"),
-        sx: { marginRight: 2, marginLeft: 0.5, color: "text.secondary" }
+        sx: { marginRight: 2, marginLeft: 0.5, color: "text.lighter" }
       }
     ),
     !state.custom && /* @__PURE__ */ jsx(Box, { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, children: settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map((amount) => /* @__PURE__ */ jsx(
@@ -69,7 +74,7 @@ export default function ProductDonation({
       {
         variant: "outlined",
         sx: {
-          minWidth: 120,
+          minWidth: 115,
           textAlign: "center",
           ...state.selected === amount && !state.custom ? { borderColor: "primary.main" } : {}
         },

package/es/payment/product-item.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import React from 'react';
 type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
@@ -10,7 +10,7 @@ type Props = {
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): import("react").JSX.Element;
+declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;

package/es/payment/product-item.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Stack, Typography } from "@mui/material";
+import { useMemo } from "react";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
 import {
@@ -30,13 +31,22 @@ export default function ProductItem({
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", sx: { width: "100%" }, children: [
+  const primaryText = useMemo(() => {
+    const price = item.upsell_price || item.price || {};
+    const isRecurring = price?.type === "recurring" && price?.recurring;
+    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== "metered") {
+      return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, "slash", locale) : ""}`;
+    }
+    return pricing.primary;
+  }, [trialInDays, pricing, item, locale]);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, className: "product-item", children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", sx: { width: "100%" }, className: "product-item-content", children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {
           direction: "row",
-          alignItems: "flex-start",
+          alignItems: "center",
+          flexWrap: "wrap",
           spacing: 0.5,
           justifyContent: "space-between",
           sx: { width: "100%" },
@@ -46,94 +56,123 @@ export default function ProductItem({
               {
                 logo: item.price.product?.images[0],
                 name: item.price.product?.name,
-                description: item.price.product?.description,
-                extra: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-                  item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity,
-                  formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.85rem", color: "red" }, children: [
-                    "\uFF08",
-                    formatQuantityInventory(item.price, item.quantity, locale),
-                    "\uFF09"
-                  ] }) : ""
-                ] })
+                extra: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity })
               }
             ),
             /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500 }, gutterBottom: true, children: pricing.primary }),
-              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.secondary" }, children: pricing.secondary })
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500, whiteSpace: "nowrap" }, gutterBottom: true, children: primaryText }),
+              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.lighter" }, children: pricing.secondary })
             ] })
           ]
         }
       ),
-      children
-    ] }),
-    canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs(
-        Typography,
+      formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsx(
+        Status,
         {
-          component: "label",
-          htmlFor: "upsell-switch",
+          label: formatQuantityInventory(item.price, item.quantity, locale),
+          variant: "outlined",
           sx: {
-            fontSize: 12,
-            cursor: "pointer",
-            color: "text.primary"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Switch,
-              {
-                id: "upsell-switch",
-                sx: { mr: 1 },
-                variant: "success",
-                checked: false,
-                onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
-              }
-            ),
-            t("payment.checkout.upsell.save", {
-              recurring: formatRecurring(item.price.upsell.upsells_to.recurring, true, "per", locale)
-            }),
-            /* @__PURE__ */ jsx(
-              Status,
-              {
-                label: t("payment.checkout.upsell.off", { saving }),
-                color: "primary",
-                variant: "outlined",
-                sx: { ml: 1 }
-              }
-            )
-          ]
+            mt: 1,
+            borderColor: "var(--tags-tag-red-border, #FFC8D3)",
+            background: "var(--tags-tag-red-bg, #FFE2E6)",
+            color: "var(--tags-tag-red-text, #E40031)"
+          }
         }
-      ),
-      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale) })
+      ) : null,
+      children
     ] }),
-    canUpsell && item.upsell_price_id && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          component: "label",
-          htmlFor: "upsell-switch",
-          sx: {
-            fontSize: 12,
-            cursor: "pointer",
-            color: "text.secondary"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Switch,
-              {
-                id: "upsell-switch",
-                sx: { mr: 1 },
-                variant: "success",
-                checked: true,
-                onChange: () => onDownsell(item.upsell_price_id)
-              }
-            ),
-            t("payment.checkout.upsell.revert", {
-              recurring: t(`common.${formatRecurring(item.price.recurring)}`)
-            })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale) })
-    ] })
+    canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        sx: { width: "100%" },
+        className: "product-item-upsell",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              component: "label",
+              htmlFor: "upsell-switch",
+              sx: {
+                fontSize: 12,
+                cursor: "pointer",
+                color: "text.secondary"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: "upsell-switch",
+                    sx: { mr: 1 },
+                    variant: "success",
+                    checked: false,
+                    onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
+                  }
+                ),
+                t("payment.checkout.upsell.save", {
+                  recurring: formatRecurring(item.price.upsell.upsells_to.recurring, true, "per", locale)
+                }),
+                /* @__PURE__ */ jsx(
+                  Status,
+                  {
+                    label: t("payment.checkout.upsell.off", { saving }),
+                    variant: "outlined",
+                    sx: {
+                      ml: 1,
+                      borderColor: " var(--tags-tag-orange-border, #FFE467)",
+                      background: "var(--tags-tag-orange-bg, #FFF4BC)",
+                      color: "var(--tags-tag-orange-text, #D24000)"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale) })
+        ]
+      }
+    ),
+    canUpsell && item.upsell_price_id && /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        sx: { width: "100%" },
+        className: "product-item-upsell",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              component: "label",
+              htmlFor: "upsell-switch",
+              sx: {
+                fontSize: 12,
+                cursor: "pointer",
+                color: "text.secondary"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: "upsell-switch",
+                    sx: { mr: 1 },
+                    variant: "success",
+                    checked: true,
+                    onChange: () => onDownsell(item.upsell_price_id)
+                  }
+                ),
+                t("payment.checkout.upsell.revert", {
+                  recurring: t(`common.${formatRecurring(item.price.recurring)}`)
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale) })
+        ]
+      }
+    )
   ] });
 }