chore: remove unused filter modal
remove old cms model refactor reward types
This commit is contained in:
Christian Andolf
@@ -19,10 +19,7 @@ import Redeem from "../Redeem"
|
||||
import styles from "./current.module.css"
|
||||
|
||||
import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
|
||||
import {
|
||||
type Reward,
|
||||
type RewardWithRedeem,
|
||||
} from "@/types/components/myPages/rewards"
|
||||
import type { Reward } from "@/types/components/myPages/rewards"
|
||||
|
||||
export default function ClientCurrentRewards({
|
||||
rewards: initialData,
|
||||
@@ -34,7 +31,7 @@ export default function ClientCurrentRewards({
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
|
||||
const { data } = trpc.contentstack.rewards.current.useQuery<{
|
||||
rewards: (Reward | RewardWithRedeem)[]
|
||||
rewards: Reward[]
|
||||
}>(
|
||||
{
|
||||
lang,
|
||||
@@ -70,7 +67,7 @@ export default function ClientCurrentRewards({
|
||||
<div ref={containerRef} className={styles.container}>
|
||||
<Grids.Stackable>
|
||||
{paginatedRewards.map((reward, idx) => {
|
||||
const earliestExpirationDate = getEarliestExpirationDate(reward.data)
|
||||
const earliestExpirationDate = getEarliestExpirationDate(reward)
|
||||
|
||||
return (
|
||||
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
|
||||
|
||||
@@ -1,175 +0,0 @@
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: var(--visual-viewport-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modalHeader {
|
||||
--button-height: 32px;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--button-height);
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
border-bottom: 1px solid var(--Border-Divider-Subtle);
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x4);
|
||||
padding: var(--Spacing-x3);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-bottom-left-radius: var(--Corner-radius-Medium);
|
||||
border-bottom-right-radius: var(--Corner-radius-Medium);
|
||||
}
|
||||
|
||||
.modalClose {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: var(--Spacing-x3);
|
||||
width: 32px;
|
||||
height: var(--button-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filterSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkboxGroup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.checkboxGroup > * {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
place-self: flex-start;
|
||||
}
|
||||
|
||||
.filterCount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--Base-Text-Inverted);
|
||||
background-color: var(--Base-Text-Accent);
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: var(--typography-Footnote-Regular-fontSize);
|
||||
}
|
||||
|
||||
.customFormCheckbox {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.customCheckbox {
|
||||
display: flex;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.customCheckbox[data-selected] .checkbox {
|
||||
border: none;
|
||||
background: var(--UI-Input-Controls-Fill-Selected);
|
||||
}
|
||||
|
||||
.customCheckbox[data-disabled] .checkbox {
|
||||
border: 1px solid var(--UI-Input-Controls-Border-Disabled);
|
||||
background: var(--UI-Input-Controls-Surface-Disabled);
|
||||
}
|
||||
|
||||
.customCheckbox[data-focus-visible="true"] {
|
||||
outline: 2px solid var(--UI-Input-Controls-Fill-Selected);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
background: var(--UI-Input-Controls-Surface-Normal);
|
||||
border: 1px solid var(--UI-Input-Controls-Border-Normal);
|
||||
border-radius: 4px;
|
||||
transition: all 200ms;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: min(933px, 80vw);
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.checkboxGroup {
|
||||
gap: var(--Spacing-x5);
|
||||
}
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
import { useState } from "react"
|
||||
import {
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
} from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import {
|
||||
type MembershipLevelEnum,
|
||||
TIER_TO_FRIEND_MAP,
|
||||
} from "@/constants/membershipLevels"
|
||||
|
||||
import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
|
||||
import CheckIcon from "@/components/Icons/Check"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import styles from "./filterRewardsModal.module.css"
|
||||
|
||||
import type {
|
||||
FilterRewardsModalProps,
|
||||
RewardCategory,
|
||||
} from "@/types/components/myPages/rewards"
|
||||
|
||||
type ModalState = "visible" | "hidden" | "unmounted"
|
||||
|
||||
export default function FilterRewardsModal({
|
||||
selectedCategories,
|
||||
selectedLevels,
|
||||
onCategoriesChange,
|
||||
onLevelsChange,
|
||||
availableTierLevels,
|
||||
availableCategories,
|
||||
}: FilterRewardsModalProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
const [animation, setAnimation] = useState<ModalState>("unmounted")
|
||||
const [tempCategories, setTempCategories] =
|
||||
useState<RewardCategory[]>(selectedCategories)
|
||||
const [tempLevels, setTempLevels] =
|
||||
useState<MembershipLevelEnum[]>(selectedLevels)
|
||||
|
||||
const categoryTranslations: Record<RewardCategory, string> = {
|
||||
Restaurants: intl.formatMessage({ id: "Restaurants" }),
|
||||
Bar: intl.formatMessage({ id: "Bar" }),
|
||||
Voucher: intl.formatMessage({ id: "Voucher" }),
|
||||
"Services and rooms": intl.formatMessage({ id: "Services and rooms" }),
|
||||
"Spa and gym": intl.formatMessage({ id: "Spa and gym" }),
|
||||
}
|
||||
|
||||
function handleClearAll() {
|
||||
setTempCategories([])
|
||||
setTempLevels([])
|
||||
}
|
||||
|
||||
function handleApply(close: () => void) {
|
||||
onCategoriesChange(tempCategories)
|
||||
onLevelsChange(tempLevels)
|
||||
close()
|
||||
}
|
||||
|
||||
function handleOpenChange(isOpen: boolean) {
|
||||
setAnimation(isOpen ? "visible" : "hidden")
|
||||
if (isOpen) {
|
||||
setTempCategories(selectedCategories)
|
||||
setTempLevels(selectedLevels)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogTrigger onOpenChange={handleOpenChange}>
|
||||
<Button intent="text" theme="base" className={styles.filterButton}>
|
||||
<FilterIcon color="burgundy" />
|
||||
{intl.formatMessage({ id: "Filter and sort" })}
|
||||
{(selectedCategories.length > 0 || selectedLevels.length > 0) && (
|
||||
<span className={styles.filterCount}>
|
||||
{selectedCategories.length + selectedLevels.length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<MotionOverlay
|
||||
className={styles.overlay}
|
||||
isExiting={animation === "hidden"}
|
||||
onAnimationComplete={(state) => {
|
||||
if (state === "hidden") {
|
||||
setAnimation("unmounted")
|
||||
}
|
||||
}}
|
||||
variants={variants.fade}
|
||||
initial="hidden"
|
||||
animate={animation}
|
||||
>
|
||||
<MotionModal
|
||||
className={styles.modal}
|
||||
variants={variants.slideInOut}
|
||||
initial="hidden"
|
||||
animate={animation}
|
||||
>
|
||||
<Dialog className={styles.dialog}>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<header className={styles.modalHeader}>
|
||||
<Body textTransform="bold" color="black">
|
||||
{intl.formatMessage({ id: "Filter and sort" })}
|
||||
</Body>
|
||||
<button
|
||||
onClick={close}
|
||||
type="button"
|
||||
className={styles.modalClose}
|
||||
>
|
||||
<CloseLargeIcon />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className={styles.modalContent}>
|
||||
{availableCategories.length > 0 && (
|
||||
<div className={styles.filterSection}>
|
||||
<Subtitle type="two" color="black">
|
||||
{intl.formatMessage({ id: "Category" })}
|
||||
</Subtitle>
|
||||
<div className={styles.checkboxGroup} role="group">
|
||||
{availableCategories.map((category) => (
|
||||
<Checkbox
|
||||
key={category}
|
||||
value={category}
|
||||
isSelected={tempCategories.includes(category)}
|
||||
onChange={(isSelected) => {
|
||||
setTempCategories(
|
||||
isSelected
|
||||
? [...tempCategories, category]
|
||||
: tempCategories.filter((c) => c !== category)
|
||||
)
|
||||
}}
|
||||
className={styles.customCheckbox}
|
||||
>
|
||||
{({ isSelected }) => (
|
||||
<span className={styles.checkboxContainer}>
|
||||
<span className={styles.checkbox}>
|
||||
{isSelected && <CheckIcon color="white" />}
|
||||
</span>
|
||||
{categoryTranslations[category]}
|
||||
</span>
|
||||
)}
|
||||
</Checkbox>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{availableTierLevels.length > 0 && (
|
||||
<div className={styles.filterSection}>
|
||||
<Subtitle type="two" color="black">
|
||||
{intl.formatMessage({ id: "Level benefit" })}
|
||||
</Subtitle>
|
||||
<div className={styles.checkboxGroup} role="group">
|
||||
{availableTierLevels.map((level) => (
|
||||
<Checkbox
|
||||
key={level}
|
||||
value={level}
|
||||
isSelected={tempLevels.includes(level)}
|
||||
onChange={(isSelected) => {
|
||||
setTempLevels(
|
||||
isSelected
|
||||
? [...tempLevels, level]
|
||||
: tempLevels.filter((l) => l !== level)
|
||||
)
|
||||
}}
|
||||
className={styles.customCheckbox}
|
||||
>
|
||||
{({ isSelected }) => (
|
||||
<span className={styles.checkboxContainer}>
|
||||
<span className={styles.checkbox}>
|
||||
{isSelected && <CheckIcon color="white" />}
|
||||
</span>
|
||||
{TIER_TO_FRIEND_MAP[level]}
|
||||
</span>
|
||||
)}
|
||||
</Checkbox>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<footer className={styles.modalFooter}>
|
||||
<Button
|
||||
onClick={handleClearAll}
|
||||
intent="text"
|
||||
theme="base"
|
||||
className={styles.clearButton}
|
||||
>
|
||||
{intl.formatMessage({ id: "Clear all filters" })}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleApply(close)}
|
||||
intent="secondary"
|
||||
theme="base"
|
||||
className={styles.applyButton}
|
||||
>
|
||||
{intl.formatMessage({ id: "Apply" })}
|
||||
</Button>
|
||||
</footer>
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</MotionModal>
|
||||
</MotionOverlay>
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
const MotionOverlay = motion(ModalOverlay)
|
||||
const MotionModal = motion(Modal)
|
||||
|
||||
const variants = {
|
||||
fade: {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
transition: { duration: 0.4, ease: "easeInOut" },
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { duration: 0.4, ease: "easeInOut" },
|
||||
},
|
||||
},
|
||||
|
||||
slideInOut: {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 32,
|
||||
transition: { duration: 0.4, ease: "easeInOut" },
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: "easeInOut" },
|
||||
},
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user