fix(SW-556): add membership number, remove some unused code

components/Blocks/DynamicContent/Rewards/Surprises/index.tsx

@@ -22,7 +22,10 @@ import styles from "./surprises.module.css"
 
 import type { SurprisesProps } from "@/types/components/blocks/surprises"
 
-export default function Surprises({ surprises }: SurprisesProps) {
+export default function Surprises({
+  surprises,
+  membershipNumber,
+}: SurprisesProps) {
   const lang = useLang()
   const [open, setOpen] = useState(true)
   const [selectedSurprise, setSelectedSurprise] = useState(0)
@@ -54,7 +57,7 @@ export default function Surprises({ surprises }: SurprisesProps) {
           { amount: surprises.length }
         )}
         <br />
-        <Link href={benefits[lang]}>
+        <Link href={benefits[lang]} variant="underscored" color="burgundy">
           {intl.formatMessage({ id: "Go to My Benefits" })}
         </Link>
       </>
@@ -105,7 +108,10 @@ export default function Surprises({ surprises }: SurprisesProps) {
                         </Body>
                         <div className={styles.badge}>
                           <Caption>Valid through DD M YYYY</Caption>
-                          <Caption>Member ID 000000</Caption>
+                          <Caption>
+                            {intl.formatMessage({ id: "Membership ID" })}{" "}
+                            {membershipNumber}
+                          </Caption>
                         </div>
                       </Surprise>
                     </div>

components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css

@@ -1,7 +1,3 @@
-.icon {
-  align-self: center;
-}
-
 @keyframes modal-fade {
   from {
     opacity: 0;
@@ -55,7 +51,6 @@
   position: absolute;
   left: 0;
   bottom: 0;
-  transition: height 200ms ease-in-out;
 
   &[data-entering] {
     animation: slide-up 200ms;