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 ? (