import { useSelector } from "react-redux"; import { RootState } from "../store"; import { useEffect, useState } from "react"; import { Template, getTemplates } from "../api/templates"; import { APIError, APIMissingTokenError } from "../api/client"; import StoreItem from "../components/StoreItem"; import styled from "styled-components"; import { Link } from "react-router-dom"; import Card from "../components/Card"; import LoadingBar from "../components/LoadingBar"; import CartStatus from "../components/CartStatus"; import { getCurrentVoucher, Voucher } from "../api/vouchers"; import VoucherDisplay from "../components/Voucher"; import { setMaxPrice } from "../slices/cart"; import store from "../store"; const StoreGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 2rem; margin-left: 1rem; margin-right: 1rem; margin-top: 2rem; width: 80%; `; const StorePage = () => { const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken); const [storeItems, setStoreItems] = useState(null); const [permissionDenied, setPermissionDenied] = useState(false); const [loading, setLoading] = useState(true); const [currentVoucher, setCurrentVoucher] = useState(null); useEffect(() => { getTemplates(true).then((items) => { setStoreItems(items); setLoading(false); }).catch((err: unknown) => { setStoreItems([]); setLoading(false); if (err instanceof APIMissingTokenError) { setPermissionDenied(true); } else if (err instanceof APIError) { if ([401, 403].includes(err.status)) { setPermissionDenied(true); } } }); if (voucherToken) { getCurrentVoucher().then((voucher) => { setCurrentVoucher(voucher); store.dispatch(setMaxPrice(parseFloat(voucher.balance))); }).catch((err: unknown) => { if (err instanceof APIMissingTokenError) { setPermissionDenied(true); } else if (err instanceof APIError) { if ([401, 403].includes(err.status)) { setPermissionDenied(true); } } } ); } }, [voucherToken]); return ( <>

Giveaway Store

{!(loading || permissionDenied) && } {currentVoucher && } {loading && } {storeItems?.map((item) => ( ))} {permissionDenied && ( <>

You need to have a valid voucher code to access the store.

Redeem a voucher )} ); }; export default StorePage;