feat(payment): sync plans and add coins rules

src/app/sidebar/components/sidebar-wallet-card.tsx

@@ -7,6 +7,7 @@ import styles from "./sidebar-wallet-card.module.css";
 export interface SidebarWalletCardProps {
   creditBalance: number;
   onTopUp: () => void;
+  onRulesClick: () => void;
 }
 
 const formatCoins = (value: number): string =>
@@ -15,6 +16,7 @@ const formatCoins = (value: number): string =>
 export function SidebarWalletCard({
   creditBalance,
   onTopUp,
+  onRulesClick,
 }: SidebarWalletCardProps) {
   return (
     <section className={styles.card} aria-label="My wallet">
@@ -31,7 +33,11 @@ export function SidebarWalletCard({
           <span className={styles.balanceUnit}> coins</span>
         </p>
 
-        <button type="button" className={styles.rulesButton}>
+        <button
+          type="button"
+          className={styles.rulesButton}
+          onClick={onRulesClick}
+        >
           Coins 消耗规则
         </button>
       </div>