diff --git a/src/components/store/CollectionSlider/index.tsx b/src/components/store/CollectionSlider/index.tsx index 030c5970..f89ff046 100644 --- a/src/components/store/CollectionSlider/index.tsx +++ b/src/components/store/CollectionSlider/index.tsx @@ -1,10 +1,12 @@ import { Carousel } from '@/components/common'; import CreateButton from '@/components/store/CreateButton'; import EditButton from '@/components/store/EditButton'; +import HiddenIcon from '@/components/store/HiddenIcon'; import ItemCard from '@/components/store/ItemCard'; import { config } from '@/lib'; import { PublicMerchItem } from '@/lib/types/apiResponses'; import { getDefaultMerchItemPhoto } from '@/lib/utils'; +import Link from 'next/link'; import styles from './style.module.scss'; interface CollectionSliderProps { @@ -12,8 +14,9 @@ interface CollectionSliderProps { title: string; description: string; items: PublicMerchItem[]; - showEdit?: boolean; + canManageStore?: boolean; previewPublic?: boolean; + isHidden?: boolean; } const CollectionSlider = ({ @@ -21,32 +24,37 @@ const CollectionSlider = ({ title, description, items, - showEdit, + canManageStore, previewPublic, + isHidden, }: CollectionSliderProps) => { const preview = previewPublic ? '?preview=public' : ''; return (

- {title} - {showEdit && } + {title} + {canManageStore && } + {isHidden && }

{description}

- {items.map(item => ( - - {showEdit && } - - ))} - {showEdit && ( + {items + .filter(item => canManageStore || !item.hidden) + .map(item => ( + + {canManageStore && item.hidden && } + {canManageStore && } + + ))} + {canManageStore && ( Add an item diff --git a/src/components/store/CreateButton/index.tsx b/src/components/store/CreateButton/index.tsx index 48298781..0e07a13d 100644 --- a/src/components/store/CreateButton/index.tsx +++ b/src/components/store/CreateButton/index.tsx @@ -8,12 +8,14 @@ interface CreateButtonProps { className?: string; type: 'item' | 'collection'; collection?: string; + horizontal?: boolean; } const CreateButton = ({ className, type, collection, + horizontal, children, }: PropsWithChildren) => { return ( @@ -21,7 +23,7 @@ const CreateButton = ({ href={`${type === 'collection' ? config.store.collectionRoute : config.store.itemRoute}new${ collection ? `?collection=${collection}` : '' }`} - className={`${className} ${styles.itemCard}`} + className={`${className} ${styles.itemCard} ${horizontal ? styles.horizontal : ''}`} > {children} diff --git a/src/components/store/CreateButton/style.module.scss b/src/components/store/CreateButton/style.module.scss index e5dd5607..1c343042 100644 --- a/src/components/store/CreateButton/style.module.scss +++ b/src/components/store/CreateButton/style.module.scss @@ -10,6 +10,11 @@ justify-content: center; min-height: 8rem; + &.horizontal { + flex-direction: row; + min-height: 4rem; + } + .icon { height: 2rem; width: 2rem; diff --git a/src/components/store/CreateButton/style.module.scss.d.ts b/src/components/store/CreateButton/style.module.scss.d.ts index 5f75f541..0049e1dd 100644 --- a/src/components/store/CreateButton/style.module.scss.d.ts +++ b/src/components/store/CreateButton/style.module.scss.d.ts @@ -1,4 +1,5 @@ export type Styles = { + horizontal: string; icon: string; itemCard: string; }; diff --git a/src/components/store/EditButton/index.tsx b/src/components/store/EditButton/index.tsx index d3146690..ec29c374 100644 --- a/src/components/store/EditButton/index.tsx +++ b/src/components/store/EditButton/index.tsx @@ -9,14 +9,16 @@ interface EditButtonProps { } const EditButton = ({ type, uuid }: EditButtonProps) => { + const label = `Edit ${type}`; return ( - + ); }; diff --git a/src/components/store/EditButton/style.module.scss b/src/components/store/EditButton/style.module.scss index 2d575b19..084347ee 100644 --- a/src/components/store/EditButton/style.module.scss +++ b/src/components/store/EditButton/style.module.scss @@ -2,6 +2,7 @@ align-self: flex-start; background-color: var(--theme-primary-2); border-radius: 50%; + box-shadow: 0 2px 5px var(--theme-shadow); color: var(--theme-background); display: flex; flex: none; @@ -9,7 +10,7 @@ transition: box-shadow 0.2s; &:hover { - box-shadow: 0 2px 5px var(--theme-shadow); + box-shadow: 0 3px 10px var(--theme-shadow); } .icon { diff --git a/src/components/store/HiddenIcon/index.tsx b/src/components/store/HiddenIcon/index.tsx new file mode 100644 index 00000000..b975a892 --- /dev/null +++ b/src/components/store/HiddenIcon/index.tsx @@ -0,0 +1,13 @@ +import { BsEyeSlash } from 'react-icons/bs'; +import styles from './style.module.scss'; + +interface HiddenIconProps { + type: 'item' | 'collection'; +} + +const HiddenIcon = ({ type }: HiddenIconProps) => { + const label = type === 'collection' ? 'Archived collection' : 'Hidden item'; + return ; +}; + +export default HiddenIcon; diff --git a/src/components/store/HiddenIcon/style.module.scss b/src/components/store/HiddenIcon/style.module.scss new file mode 100644 index 00000000..1c54df0a --- /dev/null +++ b/src/components/store/HiddenIcon/style.module.scss @@ -0,0 +1,11 @@ +.icon { + align-self: flex-start; + background-color: var(--theme-shadow); + border-radius: 50%; + box-sizing: content-box; + display: flex; + flex: none; + height: 1.5rem; + padding: 0.5rem; + width: 1.5rem; +} diff --git a/src/components/store/HiddenIcon/style.module.scss.d.ts b/src/components/store/HiddenIcon/style.module.scss.d.ts new file mode 100644 index 00000000..ed718ba9 --- /dev/null +++ b/src/components/store/HiddenIcon/style.module.scss.d.ts @@ -0,0 +1,9 @@ +export type Styles = { + icon: string; +}; + +export type ClassNames = keyof Styles; + +declare const styles: Styles; + +export default styles; diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss index fd465765..0d20f797 100644 --- a/src/components/store/ItemCard/style.module.scss +++ b/src/components/store/ItemCard/style.module.scss @@ -37,6 +37,7 @@ flex-direction: column; gap: 0.5rem; padding: 0 1rem; + white-space: pre-wrap; word-break: break-word; .title { @@ -56,6 +57,8 @@ } .icons { + display: flex; + gap: 0.5rem; position: absolute; right: 0.5rem; top: 0.5rem; diff --git a/src/components/store/ItemHeader/index.tsx b/src/components/store/ItemHeader/index.tsx index c3341984..de5dcaa9 100644 --- a/src/components/store/ItemHeader/index.tsx +++ b/src/components/store/ItemHeader/index.tsx @@ -1,4 +1,4 @@ -import { EditButton } from '@/components/store'; +import { EditButton, HiddenIcon } from '@/components/store'; import Diamonds from '@/components/store/Diamonds'; import styles from './style.module.scss'; @@ -7,13 +7,15 @@ interface ItemHeaderProps { cost: number | undefined; uuid?: string; showEdit?: boolean; + isHidden?: boolean; } -const ItemHeader = ({ itemName, cost, uuid, showEdit }: ItemHeaderProps) => { +const ItemHeader = ({ itemName, cost, uuid, showEdit, isHidden }: ItemHeaderProps) => { return (

{itemName} {uuid && showEdit && } + {isHidden && }

{cost === undefined ? null : }
diff --git a/src/components/store/index.ts b/src/components/store/index.ts index 4d857bb2..6da9f5b7 100644 --- a/src/components/store/index.ts +++ b/src/components/store/index.ts @@ -4,6 +4,7 @@ export { default as Diamonds } from './Diamonds'; export { default as EditButton } from './EditButton'; export { default as HelpModal } from './HelpModal'; export { default as Hero } from './Hero'; +export { default as HiddenIcon } from './HiddenIcon'; export { default as ItemCard } from './ItemCard'; export { default as OrderCard } from './OrderCard'; export { default as OrdersDisplay } from './OrdersDisplay'; diff --git a/src/pages/store/collection/[uuid].tsx b/src/pages/store/collection/[uuid].tsx index 32cd98ec..d69595a8 100644 --- a/src/pages/store/collection/[uuid].tsx +++ b/src/pages/store/collection/[uuid].tsx @@ -1,5 +1,5 @@ import { Typography } from '@/components/common'; -import { CreateButton, EditButton, ItemCard, Navbar } from '@/components/store'; +import { CreateButton, EditButton, HiddenIcon, ItemCard, Navbar } from '@/components/store'; import { config } from '@/lib'; import { StoreAPI } from '@/lib/api'; import withAccessType from '@/lib/hoc/withAccessType'; @@ -20,7 +20,7 @@ interface CollectionProps { const CollectionsPage = ({ uuid, user: { credits, accessType }, - collection: { title, description, items = [] }, + collection: { title, description, items = [], archived }, previewPublic, }: CollectionProps) => { const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic; @@ -33,23 +33,27 @@ const CollectionsPage = ({ {title} {canManageStore && } + {canManageStore && archived && } {description}
- {items.map(item => ( - - {canManageStore && } - - ))} + {items + .filter(item => canManageStore || !item.hidden) + .map(item => ( + + {canManageStore && item.hidden && } + {canManageStore && } + + ))} {canManageStore && ( Add an item diff --git a/src/pages/store/index.tsx b/src/pages/store/index.tsx index 5a47dd60..6e9a3682 100644 --- a/src/pages/store/index.tsx +++ b/src/pages/store/index.tsx @@ -3,6 +3,7 @@ import { EditButton, HelpModal, Hero, + HiddenIcon, ItemCard, Navbar, } from '@/components/store'; @@ -49,6 +50,10 @@ const StoreHomePage = ({ const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic; const preview = previewPublic ? '?preview=public' : ''; + const visibleCollections = collections.filter( + collection => canManageStore || !collection.archived + ); + return ( <>
@@ -74,7 +79,7 @@ const StoreHomePage = ({
{view === 'collections' ? (
- {collections.map(collection => ( + {visibleCollections.map(collection => ( + {canManageStore && collection.archived && } {canManageStore && } ))} @@ -89,17 +95,22 @@ const StoreHomePage = ({
) : ( <> - {collections.map(collection => ( + {visibleCollections.map(collection => ( ))} - {canManageStore && Create a collection} + {canManageStore && ( + + Create a collection + + )} )}
diff --git a/src/pages/store/item/[uuid].tsx b/src/pages/store/item/[uuid].tsx index 6d2bcc2a..90a1c6e7 100644 --- a/src/pages/store/item/[uuid].tsx +++ b/src/pages/store/item/[uuid].tsx @@ -55,6 +55,7 @@ const StoreItemPage = ({ cost={currOption?.price} uuid={uuid} showEdit={canManageStore} + isHidden={canManageStore && item.hidden} /> {item.options.length > 1 ? (