Update voucher validator to point to store page

1 files changed, 35 insertions, 38 deletions

diff --git a/thallium-frontend/src/components/VoucherValidator.tsx b/thallium-frontend/src/components/VoucherValidator.tsx
index f3ccc3e..e05a509 100644
--- a/thallium-frontend/src/components/VoucherValidator.tsx
+++ b/thallium-frontend/src/components/VoucherValidator.tsx
@@ -1,32 +1,33 @@
 import Card from "./Card";
 import TextInput from "./forms/TextInput";
-import { useState } from "react";
 import styled from "styled-components";
-import { validateVoucher, getCurrentVoucher, type Voucher } from "../api/vouchers";
+import { useState } from "react";
+import { validateVoucher } from "../api/vouchers";
 import { APIError } from "../api/client";
+import { setVoucherToken } from "../slices/authorization";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../store";
+import { useNavigate } from "react-router-dom";
+import Button from "./forms/Button";
 
-const VoucherDetails = styled.div<{ $some: boolean }>`
-    transition: max-height 1.5s ease-in-out;
-    overflow: hidden;
-`;
-
-const VoucherID = styled.span`
-background-color: ${({ theme }) => theme.cardShadow};
-padding: 4px;
-font-weight: bold;
+const VoucherValidateContainer = styled.div`
+    margin-bottom: 1rem;
 `;
 
 const VoucherValidator = () => {
     const [voucherCode, setVoucherCode] = useState("");
-    const [foundVoucher, setFoundVoucher] = useState<Voucher | null>(null);
     const [error, setError] = useState<string | null>(null);
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken);
 
     const validate = async () => {
         try {
             const voucherClaim = await validateVoucher(voucherCode);
-            const voucher = await getCurrentVoucher(voucherClaim.jwt);
 
-            setFoundVoucher(voucher);
+            dispatch(setVoucherToken(voucherClaim.jwt));
+
             setError(null);
         } catch (e) {
             if (e instanceof APIError) {
@@ -38,36 +39,32 @@ const VoucherValidator = () => {
             } else {
                 setError("An unknown error occurred.");
             }
-            setFoundVoucher(null);
         }
     };
 
     return (
         <Card title="Voucher Validator">
-            <p>Enter your voucher code to view information.</p>
-            <TextInput
-                label="Voucher Code"
-                type="text"
-                value={voucherCode}
-                placeholder="Enter your voucher code"
-                onChange={setVoucherCode}
-                onSubmit={validate}
-                submitLabel="Validate Code"
-            />
+            <VoucherValidateContainer>
+                <p>Enter your voucher code to view information.</p>
+                <TextInput
+                    label="Voucher Code"
+                    type="text"
+                    value={voucherCode}
+                    placeholder="Enter your voucher code"
+                    onChange={setVoucherCode}
+                    onSubmit={validate}
+                    submitLabel="Validate Code"
+                />
+            </VoucherValidateContainer>
 
-            <VoucherDetails $some={foundVoucher !== null} style={{ maxHeight: foundVoucher ? "1000px" : "0px" }}>
-                {foundVoucher && (
-                    <>
-                        <h3>Voucher Information</h3>
-                        <p>ID: <VoucherID>{foundVoucher.id}</VoucherID></p>
-                        <p>Voucher Code: {foundVoucher.voucher_code}</p>
-                        <p>Active: {foundVoucher.active ? "Yes" : "No"}</p>
-                        <p>Balance: {foundVoucher.balance}</p>
-                        <p>Created At: {foundVoucher.created_at}</p>
-                        <p>Updated At: {foundVoucher.updated_at}</p>
-                    </>
-                )}
-            </VoucherDetails>
+            {voucherToken && (
+                <>
+                    <h3>Voucher successfully validated!</h3>
+                    <Button onClick={() => {
+                        navigate("/store");
+                    }}>Go to store</Button>
+                </>
+            )}
 
             {error && (
                 <div>