@blocklet/payment-react 1.25.10 → 1.26.0

package/es/checkout-v2/checkout-v2.d.ts

@@ -0,0 +1,2 @@
+import type { CheckoutV2Props } from './types';
+export default function CheckoutV2({ id, onPaid, onError, theme, mode, extraParams, }: CheckoutV2Props): import("react").JSX.Element;

package/es/checkout-v2/checkout-v2.js

@@ -0,0 +1,121 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useRequest } from "ahooks";
+import { joinURL } from "ufo";
+import { Box } from "@mui/material";
+import { CheckoutProvider, useSessionContext, useSubmitFeature } from "@blocklet/payment-react-headless";
+import api from "../libs/api.js";
+import { getPrefix, mergeExtraParams } from "../libs/util.js";
+import { PaymentThemeProvider } from "../theme/index.js";
+import { useMobile } from "../hooks/mobile.js";
+import CheckoutLayout from "./layouts/checkout-layout.js";
+import ScenarioRouter from "./panels/left/scenario-router.js";
+import PaymentPanel from "./panels/right/payment-panel.js";
+import CheckoutDialogs from "./components/dialogs/checkout-dialogs.js";
+import LoadingView from "./views/loading-view.js";
+import ErrorView from "./views/error-view.js";
+import SuccessView from "./views/success-view.js";
+const plinkPromises = {};
+function startFromPaymentLink(id, params) {
+  if (!plinkPromises[id]) {
+    plinkPromises[id] = api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`).then((res) => res?.data).finally(() => {
+      setTimeout(() => {
+        delete plinkPromises[id];
+      }, 3e3);
+    });
+  }
+  return plinkPromises[id];
+}
+function CheckoutRouter({
+  onPaid = void 0,
+  onError = void 0,
+  mode = "inline"
+}) {
+  const { isLoading, error, errorCode, session } = useSessionContext();
+  const submit = useSubmitFeature();
+  const { isMobile } = useMobile();
+  useEffect(() => {
+    if (error && onError) {
+      onError(new Error(error));
+    }
+  }, [error, onError]);
+  useEffect(() => {
+    if (submit.status === "completed" && submit.result && onPaid) {
+      onPaid(submit.result);
+    }
+  }, [submit.status, submit.result, onPaid]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingView, { mode });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(ErrorView, { error, errorCode, mode });
+  }
+  const isCompleted = submit.status === "completed";
+  const mobileCompleted = isCompleted && isMobile;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CheckoutLayout,
+      {
+        left: mobileCompleted ? null : /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              ...isCompleted ? { opacity: 0.45, pointerEvents: "none", filter: "grayscale(0.3)", transition: "all 0.5s ease" } : {}
+            },
+            children: /* @__PURE__ */ jsx(ScenarioRouter, {})
+          }
+        ),
+        right: isCompleted ? /* @__PURE__ */ jsx(SuccessView, { submit, session }) : /* @__PURE__ */ jsx(PaymentPanel, {}),
+        mode
+      }
+    ),
+    !isCompleted && /* @__PURE__ */ jsx(CheckoutDialogs, {})
+  ] });
+}
+export default function CheckoutV2({
+  id,
+  onPaid,
+  onError,
+  theme = "default",
+  mode = "inline",
+  extraParams = {}
+}) {
+  if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
+    throw new Error("Either a checkoutSession or a paymentLink id is required.");
+  }
+  const isPaymentLink = id.startsWith("plink_");
+  const [resolvedSessionId, setResolvedSessionId] = useState(isPaymentLink ? null : id);
+  useRequest(
+    async () => {
+      if (!isPaymentLink) return null;
+      const data = await startFromPaymentLink(id, extraParams);
+      const csId = data?.checkoutSession?.id;
+      if (csId) {
+        setResolvedSessionId(csId);
+        if (mode === "standalone") {
+          window.history.replaceState(
+            null,
+            "",
+            joinURL(getPrefix(), `/checkout/pay/${csId}?${mergeExtraParams(extraParams)}`)
+          );
+        }
+      }
+      return data;
+    },
+    { ready: isPaymentLink }
+  );
+  if (!resolvedSessionId) {
+    return /* @__PURE__ */ jsx(LoadingView, { mode });
+  }
+  const content = /* @__PURE__ */ jsx(CheckoutProvider, { sessionId: resolvedSessionId, children: /* @__PURE__ */ jsx(CheckoutRouter, { onPaid, onError, mode }) });
+  if (theme === "inherit") {
+    return content;
+  }
+  if (theme && typeof theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme, children: content });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: content });
+}

package/es/checkout-v2/components/dialogs/checkout-dialogs.d.ts

@@ -0,0 +1 @@
+export default function CheckoutDialogs(): import("react").JSX.Element;

package/es/checkout-v2/components/dialogs/checkout-dialogs.js

@@ -0,0 +1,106 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Divider, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import {
+  useSessionContext,
+  usePaymentMethodContext,
+  useSubmitFeature,
+  useCustomerFormFeature
+} from "@blocklet/payment-react-headless";
+import StripeForm from "../../../payment/form/stripe/index.js";
+import ConfirmDialog from "../../../components/confirm.js";
+import PriceChangeConfirm from "../../../components/price-change-confirm.js";
+import { formatTokenAmount } from "../../utils/format.js";
+function getRedirectUrl(session) {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get("redirect");
+    if (redirect) return decodeURIComponent(redirect);
+  } catch {
+  }
+  if (session?.success_url) return session.success_url;
+  if (session?.payment_link?.after_completion?.redirect?.url) {
+    return session.payment_link.after_completion.redirect.url;
+  }
+  return void 0;
+}
+export default function CheckoutDialogs() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { currency, stripe } = usePaymentMethodContext();
+  const submit = useSubmitFeature();
+  const form = useCustomerFormFeature();
+  const mode = session?.mode || "payment";
+  const stripeContext = submit.context?.type === "stripe" ? submit.context : null;
+  const showStripeDialog = submit.status === "waiting_stripe" && stripeContext?.clientSecret;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showStripeDialog && /* @__PURE__ */ jsx(
+      StripeForm,
+      {
+        clientSecret: stripeContext.clientSecret,
+        intentType: stripeContext.intentType || "payment_intent",
+        publicKey: stripe?.publishableKey || "",
+        mode,
+        customer: {
+          name: form.values.customer_name,
+          email: form.values.customer_email,
+          phone: form.values.customer_phone,
+          address: form.values.billing_address
+        },
+        returnUrl: getRedirectUrl(session),
+        onConfirm: submit.stripeConfirm,
+        onCancel: submit.stripeCancel
+      }
+    ),
+    submit.status === "confirming_price" && submit.context?.type === "price_change" && /* @__PURE__ */ jsx(
+      PriceChangeConfirm,
+      {
+        open: true,
+        changePercent: submit.context.changePercent,
+        onConfirm: submit.confirm,
+        onCancel: submit.cancel,
+        loading: false
+      }
+    ),
+    submit.status === "confirming_fast_pay" && submit.context?.type === "fast_pay" && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        onConfirm: submit.confirm,
+        onCancel: submit.cancel,
+        title: submit.context.payType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+        message: submit.context.payType === "credit" ? /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+          available: `${formatTokenAmount(submit.context.amount || "0", currency)} ${currency?.symbol || ""}`
+        }) }) : /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
+          /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
+          /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+            /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: submit.context.payer ? `${submit.context.payer.slice(0, 10)}...${submit.context.payer.slice(-6)}` : "" })
+            ] }),
+            /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary" }, children: t("payment.checkout.fastPay.amount") }),
+              /* @__PURE__ */ jsxs(Typography, { children: [
+                formatTokenAmount(submit.context.amount || "0", currency),
+                " ",
+                currency?.symbol || ""
+              ] })
+            ] })
+          ] })
+        ] }),
+        loading: false,
+        color: "primary"
+      }
+    ),
+    submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        onConfirm: submit.cancel,
+        onCancel: submit.cancel,
+        title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+        message: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.insufficientMessage") }),
+        confirm: t("common.confirm")
+      }
+    )
+  ] });
+}

package/es/checkout-v2/components/left/billing-toggle.d.ts

@@ -0,0 +1,6 @@
+import type { BillingIntervalData } from '@blocklet/payment-react-headless';
+interface BillingToggleProps {
+    billingInterval: BillingIntervalData | null;
+}
+export default function BillingToggle({ billingInterval }: BillingToggleProps): import("react").JSX.Element | null;
+export {};

package/es/checkout-v2/components/left/billing-toggle.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import TrendingDownIcon from "@mui/icons-material/TrendingDown";
+import { Box, CircularProgress, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { INTERVAL_LOCALE_KEY } from "../../utils/format.js";
+export default function BillingToggle({ billingInterval }) {
+  const { t } = useLocaleContext();
+  if (!billingInterval?.available?.length || billingInterval.available.length <= 1) {
+    return null;
+  }
+  const best = billingInterval.available.reduce(
+    (a, b) => Number(b.savings || 0) > Number(a.savings || 0) ? b : a
+  );
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, sx: { mb: 3 }, children: [
+    /* @__PURE__ */ jsx(
+      Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        sx: {
+          bgcolor: "background.paper",
+          borderRadius: "9999px",
+          border: "1px solid",
+          borderColor: "divider",
+          p: "4px",
+          display: "inline-flex",
+          boxShadow: (theme) => theme.palette.mode === "dark" ? "0 1px 2px 0 rgba(0,0,0,0.3)" : "0 1px 2px 0 rgba(0,0,0,0.05)"
+        },
+        children: billingInterval.available.map((option) => {
+          const isSelected = option.interval === billingInterval.current;
+          const selectedSx = {
+            bgcolor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.25)" : "rgba(156,106,222,0.15)",
+            color: "primary.main",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            boxShadow: (th) => th.palette.mode === "dark" ? "0 2px 8px rgba(156,106,222,0.2), inset 0 1px 0 rgba(255,255,255,0.06)" : "0 2px 8px rgba(156,106,222,0.15), inset 0 1px 0 rgba(255,255,255,0.5)",
+            border: "1px solid",
+            borderColor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.3)" : "rgba(156,106,222,0.2)"
+          };
+          const unselectedSx = {
+            color: "text.secondary",
+            border: "1px solid transparent",
+            "&:hover": { color: "text.primary" }
+          };
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => {
+                if (option.interval !== billingInterval.current && !billingInterval.switching) {
+                  billingInterval.switch(option.interval);
+                }
+              },
+              sx: {
+                px: 3.5,
+                py: 1,
+                borderRadius: "9999px",
+                cursor: "pointer",
+                transition: "all 0.3s ease",
+                userSelect: "none",
+                ...isSelected ? selectedSx : unselectedSx
+              },
+              children: billingInterval.switching && isSelected ? /* @__PURE__ */ jsx(CircularProgress, { size: 14, color: "inherit", sx: { my: "1px" } }) : /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  sx: {
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: "inherit",
+                    lineHeight: 1
+                  },
+                  children: t(INTERVAL_LOCALE_KEY[option.interval] || option.interval)
+                }
+              )
+            },
+            option.interval
+          );
+        })
+      }
+    ),
+    best.savings && Number(best.savings) > 0 && /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.75,
+        sx: {
+          px: 1.5,
+          py: 0.75,
+          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
+          color: "#12b886",
+          fontSize: 11,
+          fontWeight: 700,
+          borderRadius: "9999px",
+          border: "1px solid",
+          borderColor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        children: [
+          /* @__PURE__ */ jsx(TrendingDownIcon, { sx: { fontSize: 14 } }),
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              component: "span",
+              sx: { fontSize: "inherit", fontWeight: "inherit", color: "inherit", lineHeight: 1 },
+              children: [
+                "SAVE ",
+                best.savings,
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}

package/es/checkout-v2/components/left/cross-sell-card.d.ts

@@ -0,0 +1,10 @@
+import type { TPaymentCurrency, TPrice } from '@blocklet/payment-types';
+interface CrossSellCardProps {
+    crossSellItem: TPrice;
+    currency: TPaymentCurrency | null;
+    exchangeRate: string | null;
+    crossSellRequired: boolean;
+    onAdd: () => Promise<void>;
+}
+export default function CrossSellCard({ crossSellItem, currency, exchangeRate, crossSellRequired, onAdd, }: CrossSellCardProps): import("react").JSX.Element | null;
+export {};

package/es/checkout-v2/components/left/cross-sell-card.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
+import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
+import { Avatar, Box, Button, Chip, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY } from "../../utils/format.js";
+export default function CrossSellCard({
+  crossSellItem,
+  currency,
+  exchangeRate,
+  crossSellRequired,
+  onAdd
+}) {
+  const { t } = useLocaleContext();
+  if (!crossSellItem) return null;
+  const { product } = crossSellItem;
+  const productImage = product?.images?.[0] || "";
+  const productName = product?.name || t("payment.checkout.cross_sell.add");
+  const { recurring } = crossSellItem;
+  const intervalKey = recurring?.interval ? INTERVAL_LOCALE_KEY[recurring.interval] : null;
+  const rawDescription = product?.description || "";
+  const subtitle = (() => {
+    if (rawDescription && rawDescription !== productName) return rawDescription;
+    return intervalKey ? t(intervalKey) : "";
+  })();
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    crossSellRequired && /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: tSafe(t, "payment.checkout.cross_sell.recommended", "RECOMMENDED"),
+        size: "small",
+        sx: {
+          position: "absolute",
+          top: 0,
+          right: 40,
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          height: 22,
+          fontSize: 9,
+          fontWeight: 900,
+          letterSpacing: "0.12em",
+          bgcolor: "primary.main",
+          color: "#fff",
+          boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
+          "& .MuiChip-label": { px: 1.5 }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          p: { xs: 2, md: 3 },
+          bgcolor: "background.paper",
+          borderRadius: { xs: "16px", md: "24px" },
+          border: "2px dashed",
+          borderColor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.15)" : "rgba(45,124,243,0.25)",
+          boxShadow: (theme) => theme.palette.mode === "dark" ? "0 12px 40px -8px rgba(0,0,0,0.3)" : "0 12px 40px -8px rgba(0,0,0,0.06)",
+          transition: "all 0.3s ease",
+          cursor: "pointer",
+          "&:hover": {
+            borderColor: "primary.main",
+            boxShadow: "0 12px 40px -8px rgba(0,0,0,0.1)"
+          }
+        },
+        onClick: onAdd,
+        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: { xs: 1.5, md: 2.5 }, sx: { alignItems: "center", width: "100%" }, children: [
+          productImage ? /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: productImage,
+              variant: "rounded",
+              sx: {
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: "12px", md: "16px" },
+                flexShrink: 0
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              variant: "rounded",
+              sx: {
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: "12px", md: "16px" },
+                bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "#eff6ff",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(ShoppingCartCheckoutIcon, { sx: { fontSize: { xs: 22, md: 28 }, color: "primary.main", opacity: 0.45 } })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { mb: 0.25 }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: { fontWeight: 800, fontSize: { xs: 15, md: 18 }, color: "text.primary", lineHeight: 1.3 },
+                  children: productName
+                }
+              ),
+              /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-end", sx: { flexShrink: 0, ml: { xs: 1, md: 2 } }, children: [
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    sx: { fontWeight: 800, color: "text.primary", whiteSpace: "nowrap", fontSize: { xs: 15, md: 18 } },
+                    children: [
+                      formatDynamicUnitPrice(crossSellItem, currency, exchangeRate),
+                      " ",
+                      currency?.symbol
+                    ]
+                  }
+                ),
+                exchangeRate && crossSellItem.base_amount && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 10, color: "text.disabled", fontWeight: 700, lineHeight: 1 }, children: [
+                  "\u2248 $",
+                  Number(crossSellItem.base_amount || 0).toFixed(2)
+                ] })
+              ] })
+            ] }),
+            subtitle && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: { fontSize: { xs: 12, md: 14 }, color: "text.secondary", fontWeight: 500, lineHeight: 1.4 },
+                noWrap: true,
+                children: subtitle
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { sx: { pt: { xs: 1.5, md: 2 } }, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "outlined",
+                startIcon: /* @__PURE__ */ jsx(AddShoppingCartIcon, { sx: { fontSize: "14px !important" } }),
+                sx: {
+                  textTransform: "none",
+                  fontSize: { xs: 11, md: 12 },
+                  fontWeight: 700,
+                  borderRadius: "8px",
+                  border: "1px solid",
+                  borderColor: "divider",
+                  color: "primary.main",
+                  bgcolor: "background.paper",
+                  boxShadow: 1,
+                  px: 1.5,
+                  py: 0.5,
+                  transition: "all 0.2s",
+                  "&:hover": {
+                    bgcolor: "primary.main",
+                    color: "#fff",
+                    borderColor: "primary.main"
+                  },
+                  "&:active": { transform: "scale(0.95)" }
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onAdd();
+                },
+                children: tSafe(t, "payment.checkout.cross_sell.addToOrder", "Add to order")
+              }
+            ) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}

package/es/checkout-v2/components/left/product-item-card.d.ts

@@ -0,0 +1,26 @@
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+interface ProductItemCardProps {
+    item: TLineItemExpanded & {
+        adjustable_quantity?: {
+            enabled: boolean;
+            minimum?: number;
+            maximum?: number;
+        };
+    };
+    currency: TPaymentCurrency | null;
+    discounts: any[];
+    exchangeRate: string | null;
+    onQuantityChange: (itemId: string, qty: number) => Promise<void>;
+    onUpsell: (fromId: string, toId: string) => Promise<void>;
+    onDownsell: (priceId: string) => Promise<void>;
+    trialActive: boolean;
+    trialDays: number;
+    t: (key: string, params?: any) => string;
+    recommended?: boolean;
+    hideUpsell?: boolean;
+    isRateLoading?: boolean;
+    showFeatures?: boolean;
+    children?: React.ReactNode;
+}
+export default function ProductItemCard({ item, currency, discounts, exchangeRate, onQuantityChange, onUpsell, onDownsell, trialActive, trialDays, t, recommended, hideUpsell, isRateLoading, showFeatures, children, }: ProductItemCardProps): import("react").JSX.Element;
+export {};