feat: loosen up the zod validations and return null instead of throwing

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

@@ -0,0 +1,35 @@
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import styles from "./row.module.css"
+
+import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
+
+export default function Row({ transaction, lang }: RowProps) {
+  const { formatMessage } = useIntl()
+  const description =
+    transaction.hotelName && transaction.city
+      ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
+      : `${transaction.nights} ${formatMessage({ id: "nights" })}`
+  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+  const departure = dt(transaction.checkoutDate)
+    .locale(lang)
+    .format("DD MMM YYYY")
+  const values = [
+    arrival,
+    description,
+    transaction.confirmationNumber,
+    departure,
+    transaction.awardPoints,
+  ]
+  return (
+    <tr className={styles.tr}>
+      {values.map((value, idx) => (
+        <td key={`value-${idx}`} className={styles.td}>
+          {value}
+        </td>
+      ))}
+    </tr>
+  )
+}