fix: temp disable features using unavailable data

components/MyPages/AccountPage/Content.tsx

@@ -37,7 +37,9 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
     case DynamicContentComponents.my_points:
       return <CurrentPointsBalance />
     case DynamicContentComponents.expiring_points:
-      return <ExpiringPoints />
+      // TODO: Add once available
+      // return <ExpiringPoints />
+      return null
     case DynamicContentComponents.earn_and_burn:
       return <EarnAndBurn lang={props.lang} />
     default:

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,16 +1,18 @@
 import { _ } from "@/lib/translation"
+import { serverClient } from "@/lib/trpc/server"
 
 import styles from "./currentPointsBalance.module.css"
 
-function CurrentPointsBalance() {
-  const points = 30000
-
+async function CurrentPointsBalance() {
+  const user = await serverClient().user.get()
   return (
     <div className={styles.card}>
-      <h2>{_("Total points*")}</h2>
-      <p className={styles.points}>{`${_("Points")}: ${points}`}</p>
+      <h2>{`${_("Total points")}*`}</h2>
+      <p
+        className={styles.points}
+      >{`${_("Points")}: ${user.membership.currentPoints}`}</p>
       <p className={styles.disclaimer}>
-        {_("*Points may take up to 10 days to be displayed.")}
+        {`*${_("Points may take up to 10 days to be displayed.")}`}
       </p>
     </div>
   )

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -30,3 +30,13 @@
   text-align: left;
   padding: 16px 32px;
 }
+
+.emptyPlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  font-size: var(--typography-Title5-Desktop-fontSize);
+  border: 1px solid var(--Base-Fill-Normal);
+  border-top: none;
+}

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -38,8 +38,7 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
   }
 
   const transactions = data?.pages.flatMap((page) => page.data) ?? []
-
-  return (
+  return transactions.length ? (
     <div className={styles.container}>
       <table className={styles.table}>
         <thead className={styles.thead}>
@@ -61,7 +60,8 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
           ))}
         </tbody>
       </table>
-      <Button
+      {/* TODO: add once pagination is available through API */}
+      {/* <Button
         disabled={isFetching}
         intent="primary"
         bgcolor="white"
@@ -69,7 +69,24 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
         onClick={loadMoreData}
       >
         {_("See more transactions")}
-      </Button>
+      </Button> */}
+    </div>
+  ) : (
+    <div>
+      <table className={styles.table}>
+        <thead className={styles.thead}>
+          <tr>
+            {tableHeadings.map((heading) => (
+              <th key={heading} className={styles.th}>
+                {heading}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+      <div className={styles.emptyPlaceholder}>
+        {_("No transactions available")}
+      </div>
     </div>
   )
 }