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

refactor(LOY-62): implement code review feedback

Browse Source
This commit is contained in:
Chuma McPhoy
2025-01-13 13:45:13 +01:00
parent e0d8315565
commit da31539610
10 changed files with 61 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
View File

@@ -1,98 +0,0 @@
"use client"
import { trpc } from "@/lib/trpc/client"
import { Reward } from "@/server/routers/contentstack/reward/output"
import Image from "@/components/Image"
import LoadingSpinner from "@/components/LoadingSpinner"
import Grids from "@/components/TempDesignSystem/Grids"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
import ScriptedRewardText from "../ScriptedRewardText"
import Redeem from "./Redeem"
import styles from "./current.module.css"
import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
export default function ClientCurrentRewards({
initialCurrentRewards,
showRedeem,
}: CurrentRewardsClientProps) {
const lang = useLang()
const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
trpc.contentstack.rewards.current.useInfiniteQuery(
{
limit: 3,
lang,
},
{
getNextPageParam: (lastPage) => lastPage?.nextCursor,
initialData: {
pageParams: [undefined, 1],
pages: [initialCurrentRewards],
},
}
)
function loadMoreData() {
if (hasNextPage) {
fetchNextPage()
}
}
const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
const rewards = filteredRewards
.flatMap((page) => page?.rewards)
.filter((reward): reward is Reward => !!reward)
if (isLoading) {
return <LoadingSpinner />
}
if (!rewards.length) {
return null
}
return (
<div>
<Grids.Stackable>
{rewards.map((reward, idx) => (
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
<div className={styles.content}>
<Image
src="/_static/img/loyalty-award.png"
width={113}
height={125}
alt={reward.label || ""}
/>
<ScriptedRewardText
rewardType={reward.rewardType}
rewardTierLevel={reward.rewardTierLevel}
/>
<Title
as="h4"
level="h3"
textAlign="center"
textTransform="regular"
>
{reward.label}
</Title>
</div>
{showRedeem && (
<div className={styles.btnContainer}>
<Redeem reward={reward} />
</div>
)}
</article>
))}
</Grids.Stackable>
{hasNextPage &&
(isFetching ? (
<LoadingSpinner />
) : (
<ShowMoreButton loadMoreData={loadMoreData} />
))}
</div>
)
}

5
components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
View File

@@ -3,6 +3,7 @@
import { useRef, useState } from "react"
import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/ScriptedRewardText"
import Pagination from "@/components/MyPages/Pagination"
import Grids from "@/components/TempDesignSystem/Grids"
import Title from "@/components/TempDesignSystem/Text/Title"
@@ -45,6 +46,10 @@ export default function ClientCurrentRewards({
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
<div className={styles.content}>
<RewardIcon rewardId={reward.reward_id} />
<ScriptedRewardText
rewardType={reward.rewardType}
rewardTierLevel={reward.rewardTierLevel}
/>
<Title
as="h4"
level="h3"

54
components/Blocks/DynamicContent/Rewards/ScriptedRewardText/index.tsx
View File

@@ -1,23 +1,13 @@
import { useIntl } from "react-intl"
import {
isMembershipLevel,
MembershipLevelEnum,
} from "@/constants/membershipLevels"
import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { isMembershipLevel } from "@/utils/membershipLevels"
import { isCouponRewardType } from "@/utils/rewards"
import type { ScriptedRewardTextProps } from "@/types/components/myPages/myPage/accountPage"
const TIER_TO_FRIEND_MAP: Record<MembershipLevelEnum, string> = {
[MembershipLevelEnum.L1]: "New Friend",
[MembershipLevelEnum.L2]: "Good Friend",
[MembershipLevelEnum.L3]: "Close Friend",
[MembershipLevelEnum.L4]: "Dear Friend",
[MembershipLevelEnum.L5]: "Loyal Friend",
[MembershipLevelEnum.L6]: "True Friend",
[MembershipLevelEnum.L7]: "Best Friend",
}
import type { CouponRewardType } from "@/types/components/myPages/rewards"
export default function ScriptedRewardText({
rewardType,
@@ -25,31 +15,21 @@ export default function ScriptedRewardText({
}: ScriptedRewardTextProps) {
const intl = useIntl()
let label: string | null = null
switch (rewardType) {
case "Tier":
if (rewardTierLevel && isMembershipLevel(rewardTierLevel)) {
label = TIER_TO_FRIEND_MAP[rewardTierLevel]
}
break
case "Campaign":
label = intl.formatMessage({ id: "Campaign" })
break
case "Surprise":
label = intl.formatMessage({ id: "Surprise!" })
break
case "Member-voucher":
label = intl.formatMessage({ id: "Voucher" })
break
default:
label = null
const couponLabelMap: Record<CouponRewardType, string> = {
Campaign: intl.formatMessage({ id: "Campaign" }),
Surprise: intl.formatMessage({ id: "Surprise!" }),
"Member-voucher": intl.formatMessage({ id: "Voucher" }),
}
const label =
rewardTierLevel && isMembershipLevel(rewardTierLevel)
? TIER_TO_FRIEND_MAP[rewardTierLevel]
: isCouponRewardType(rewardType)
? couponLabelMap[rewardType]
: null
if (!label) return null
return (
<BiroScript type="two" color="red" tilted="small">
{label}