scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(LOY-63): add promo code badge to campaign redeem

Browse Source
This commit is contained in:
Christian Andolf
2025-01-08 16:05:07 +01:00
parent 6941c1d006
commit 9452f24df9
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -5,23 +5,17 @@ import { useIntl } from "react-intl"
import CopyIcon from "@/components/Icons/Copy" import CopyIcon from "@/components/Icons/Copy"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts" import { toast } from "@/components/TempDesignSystem/Toasts"
import { RewardIcon } from "../../RewardIcon" import { RewardIcon } from "../../RewardIcon"
import MembershipNumberBadge from "../MembershipNumberBadge"
import styles from "../redeem.module.css" import styles from "../redeem.module.css"
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output" import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
export default function Campaign({ export default function Campaign({ reward }: { reward: RewardWithRedeem }) {
reward,
membershipNumber,
}: {
reward: RewardWithRedeem
membershipNumber: string
}) {
const intl = useIntl() const intl = useIntl()
function handleCopy() { function handleCopy() {
@@ -37,9 +31,14 @@ export default function Campaign({
{reward.label} {reward.label}
</Title> </Title>
<Body textAlign="center">{reward.description}</Body> <Body textAlign="center">{reward.description}</Body>
{membershipNumber && ( <div className={styles.rewardBadge}>
<MembershipNumberBadge membershipNumber={membershipNumber} /> <Caption textAlign="center" color="uiTextHighContrast" type="bold">
)} {intl.formatMessage({ id: "Promo code" })}
</Caption>
<Caption textAlign="center" color="uiTextHighContrast">
{reward.operaRewardId}
</Caption>
</div>
</div> </div>
<footer className={styles.modalFooter}> <footer className={styles.modalFooter}>
<Button <Button

2
components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
View File

@@ -12,7 +12,7 @@ export default function MembershipNumberBadge({
const intl = useIntl() const intl = useIntl()
return ( return (
<div className={styles.membershipNumberBadge}> <div className={styles.rewardBadge}>
<Caption textAlign="center" color="uiTextHighContrast"> <Caption textAlign="center" color="uiTextHighContrast">
{intl.formatMessage({ id: "Membership ID:" })} {membershipNumber} {intl.formatMessage({ id: "Membership ID:" })} {membershipNumber}
</Caption> </Caption>

2
components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
View File

@@ -120,7 +120,7 @@ const variants = {
function getRedeemFlow(reward: RewardWithRedeem, membershipNumber: string) { function getRedeemFlow(reward: RewardWithRedeem, membershipNumber: string) {
switch (reward.rewardType) { switch (reward.rewardType) {
case "Campaign": case "Campaign":
return <Campaign reward={reward} membershipNumber={membershipNumber} /> return <Campaign reward={reward} />
case "Surprise": case "Surprise":
case "Tier": case "Tier":
return <Tier reward={reward} membershipNumber={membershipNumber} /> return <Tier reward={reward} membershipNumber={membershipNumber} />

4
components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -108,8 +108,10 @@
color: var(--UI-Semantic-Success); color: var(--UI-Semantic-Success);
} }
.membershipNumberBadge { .rewardBadge {
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
background: var(--Base-Surface-Secondary-light-Normal); background: var(--Base-Surface-Secondary-light-Normal);
display: grid;
gap: var(--Spacing-x-half);
} }