fix(LOY-89): add a more user friendly error message for when unwrapping surprises

components/MyPages/Surprises/Client.tsx

@@ -6,6 +6,7 @@ import React, { useState } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { customerService } from "@/constants/currentWebHrefs"
 import { benefits } from "@/constants/routes/myPages"
 import { trpc } from "@/lib/trpc/client"
 
@@ -62,7 +63,18 @@ export default function SurprisesNotification({
       console.error("Failed to unwrap surprise", error)
       toast.error(
         <>
-          {intl.formatMessage({ id: "An error occurred. Please try again." })}
+          {intl.formatMessage<React.ReactNode>(
+            {
+              id: "Oops! Something went wrong while showing your surprise. Please refresh the page or try again later. If the issue persists, <link>contact the support.</link>",
+            },
+            {
+              link: (str) => (
+                <Link textDecoration="underline" href={customerService[lang]}>
+                  {str}
+                </Link>
+              ),
+            }
+          )}
         </>
       )
     },