fix(LOY-39): refetch rewards when redeemed

update expiration date text

possible to redeem rewards with coupon code

components/MyPages/Surprises/Client.tsx

@@ -36,8 +36,11 @@ export default function SurprisesNotification({
   const [open, setOpen] = useState(true)
   const [[selectedSurprise, direction], setSelectedSurprise] = useState([0, 0])
   const [showSurprises, setShowSurprises] = useState(false)
+  const utils = trpc.useUtils()
   const unwrap = trpc.contentstack.rewards.unwrap.useMutation({
     onSuccess: () => {
+      utils.contentstack.rewards.current.invalidate({ lang })
+
       if (pathname.indexOf(benefits[lang]) !== 0) {
         toast.success(
           <>
@@ -57,6 +60,11 @@ export default function SurprisesNotification({
     },
     onError: (error) => {
       console.error("Failed to unwrap surprise", error)
+      toast.error(
+        <>
+          {intl.formatMessage({ id: "An error occurred. Please try again." })}
+        </>
+      )
     },
   })
 
@@ -77,7 +85,7 @@ export default function SurprisesNotification({
   async function viewRewards() {
     const updates = surprises
       .map((surprise) => {
-        const coupons = surprise.coupons
+        const coupons = surprise.coupon
           ?.map((coupon) => {
             if (coupon?.couponCode) {
               return {

components/MyPages/Surprises/Slide.tsx

@@ -16,7 +16,7 @@ export default function Slide({ surprise, membershipNumber }: SlideProps) {
   const lang = useLang()
   const intl = useIntl()
 
-  const earliestExpirationDate = surprise.coupons?.reduce(
+  const earliestExpirationDate = surprise.coupon?.reduce(
     (earliestDate, coupon) => {
       const expiresAt = dt(coupon.expiresAt)
       return earliestDate.isBefore(expiresAt) ? earliestDate : expiresAt
@@ -30,7 +30,7 @@ export default function Slide({ surprise, membershipNumber }: SlideProps) {
       <div className={styles.badge}>
         <Caption>
           {intl.formatMessage(
-            { id: "Expires at the earliest {expirationDate}" },
+            { id: "Valid through {expirationDate}" },
             {
               expirationDate: dt(earliestExpirationDate)
                 .locale(lang)