payment-kit 1.18.44 → 1.18.45

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.18.44
+version: 1.18.45
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.44",
+  "version": "1.18.45",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -47,17 +47,17 @@
     "@abtnode/cron": "^1.16.43",
     "@arcblock/did": "^1.20.11",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.36",
+    "@arcblock/did-connect": "^2.13.40",
     "@arcblock/did-util": "^1.20.11",
     "@arcblock/jwt": "^1.20.11",
-    "@arcblock/ux": "^2.13.36",
+    "@arcblock/ux": "^2.13.40",
     "@arcblock/validator": "^1.20.11",
     "@blocklet/did-space-js": "^1.0.53",
     "@blocklet/js-sdk": "^1.16.43",
     "@blocklet/logger": "^1.16.43",
-    "@blocklet/payment-react": "1.18.44",
+    "@blocklet/payment-react": "1.18.45",
     "@blocklet/sdk": "^1.16.43",
-    "@blocklet/ui-react": "^2.13.36",
+    "@blocklet/ui-react": "^2.13.40",
     "@blocklet/uploader": "^0.1.91",
     "@blocklet/xss": "^0.1.35",
     "@mui/icons-material": "^5.16.6",
@@ -123,7 +123,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.43",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.44",
+    "@blocklet/payment-types": "1.18.45",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -169,5 +169,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "88004667b15d54fd198448255fda732cedfda970"
+  "gitHead": "572fcb416607935c8eb338e7904b30f8a3e42306"
 }

package/src/components/payment-link/preview.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
 import { useTheme } from '@mui/material';
@@ -9,6 +9,7 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
   const innerRef = useRef(null);
   const size = useSize(innerRef);
   const scale = (size?.width || 0) / 1280;
+  const [mode, setMode] = useState(theme.palette.mode);
   const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
 
   useImperativeHandle(ref, () => ({
@@ -17,13 +18,20 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
     toggleFullscreen,
   }));
 
+  useEffect(() => {
+    if (theme.palette.mode !== mode) {
+      setMode(theme.palette.mode);
+    }
+  }, [theme.palette.mode, mode]);
+
+  const iframeSrc = `${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}&theme=${mode}`;
   return (
     <div ref={innerRef}>
       {fullscreen ? (
         <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
-            src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
+            src={iframeSrc}
           />
         </div>
       ) : (
@@ -36,7 +44,7 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
               transformOrigin: 'top left',
               border: 'none',
             }}
-            src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
+            src={iframeSrc}
           />
         </Chrome>
       )}

package/src/components/pricing-table/preview.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
 import { useTheme } from '@mui/material';
@@ -8,6 +8,7 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
   const innerRef = useRef(null);
   const size = useSize(innerRef);
   const theme = useTheme();
+  const [mode, setMode] = useState(theme.palette.mode);
   const scale = (size?.width || 0) / 1280;
   const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
 
@@ -17,13 +18,20 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
     toggleFullscreen,
   }));
 
+  useEffect(() => {
+    if (theme.palette.mode !== mode) {
+      setMode(theme.palette.mode);
+    }
+  }, [theme.palette.mode, mode]);
+  const iframeSrc = `${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}&theme=${mode}`;
+
   return (
     <div ref={innerRef}>
       {fullscreen ? (
         <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
-            src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
+            src={iframeSrc}
           />
         </div>
       ) : (
@@ -36,7 +44,7 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
               transformOrigin: 'top left',
               border: 'none',
             }}
-            src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
+            src={iframeSrc}
           />
         </Chrome>
       )}

package/src/pages/customer/index.tsx

@@ -524,13 +524,12 @@ export default function CustomerHome() {
       )}
       <Root>
         {SummaryCard}
-        <Divider />
+        {SummaryCard && <Divider />}
         {SubscriptionCard}
-        <Divider />
+        {SubscriptionCard && <Divider />}
         {InvoiceCard}
-        <Divider />
+        {InvoiceCard && <Divider />}
         {RevenueCard}
-        {/* {DetailCard} */}
       </Root>
     </Content>
   );