From 9635303656c577d435827cf34d1a1d951bf7860b Mon Sep 17 00:00:00 2001
From: Bartlomiej Tarczynski <bartlomiej.tarczynski1@gmail.com>
Date: Fri, 26 Apr 2024 16:06:10 +0200
Subject: [PATCH] Handle voucher claiming

---
 .../notifications/ErrorNotifications.tsx         | 10 +++++-----
 .../notifications/NotificationToast.tsx          | 13 +++++--------
 .../userActious/claim/ClaimVoucherSection.tsx    | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/notifications/ErrorNotifications.tsx b/packages/frontend/src/components/notifications/ErrorNotifications.tsx
index 00618826..553b2e4e 100644
--- a/packages/frontend/src/components/notifications/ErrorNotifications.tsx
+++ b/packages/frontend/src/components/notifications/ErrorNotifications.tsx
@@ -3,15 +3,15 @@ import styled from 'styled-components'
 import { NotificationToast } from '@/components/notifications/NotificationToast'
 
 interface Props {
-  error: string | undefined
-  setError: (str?: string) => void
-  onClick: () => Promise<void>
+  error: Error | undefined
+  reset: () => void
+  onClick: () => Promise<void> | void
 }
 
-export const ErrorNotifications = ({ error, setError, onClick }: Props) => {
+export const ErrorNotifications = ({ error, reset, onClick }: Props) => {
   return (
     <ToastPrimitive.Provider>
-      {error && <NotificationToast message={error} setError={setError} onClick={onClick} />}
+      {error && <NotificationToast message={error.message} reset={reset} onClick={onClick} />}
       <NotificationsList />
     </ToastPrimitive.Provider>
   )
diff --git a/packages/frontend/src/components/notifications/NotificationToast.tsx b/packages/frontend/src/components/notifications/NotificationToast.tsx
index 95f3b4a0..cb93bd42 100644
--- a/packages/frontend/src/components/notifications/NotificationToast.tsx
+++ b/packages/frontend/src/components/notifications/NotificationToast.tsx
@@ -1,5 +1,4 @@
 import * as ToastPrimitive from '@radix-ui/react-toast'
-import { useCallback } from 'react'
 import styled from 'styled-components'
 import { ErrorIcon } from '@/components/icons/ErrorIcon'
 import { Colors } from '@/styles/colors'
@@ -7,15 +6,13 @@ import { CrossIcon } from '@/components/icons'
 
 interface Props {
   message: string
-  setError: (str?: string) => void
-  onClick: () => Promise<void>
+  reset: () => void
+  onClick: () => Promise<void> | void
 }
 
-export const NotificationToast = ({ message, setError, onClick }: Props) => {
-  const removeNotification = useCallback(() => setError(undefined), [setError])
-
+export const NotificationToast = ({ message, reset, onClick }: Props) => {
   return (
-    <Toast onOpenChange={(open) => open || removeNotification()} duration={5000}>
+    <Toast duration={5000}>
       <NotificationIconWrapper>
         <ErrorIcon color={Colors.Red} size={24} />
       </NotificationIconWrapper>
@@ -26,7 +23,7 @@ export const NotificationToast = ({ message, setError, onClick }: Props) => {
           Try Again
         </NotificationActionText>
       </ToastContent>
-      <Close>
+      <Close onClick={reset}>
         <CrossIcon size={24} color={Colors.Grey} />
       </Close>
     </Toast>
diff --git a/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx b/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx
index c68bbae1..d5aee0a2 100644
--- a/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx
+++ b/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import styled from 'styled-components'
 
 import { VoucherTimeLeft } from './VoucherTimeLeft'
@@ -6,6 +5,7 @@ import { useAuctionState } from '@/blockchain/hooks/useAuctionState'
 import { Button } from '@/components/buttons'
 import { ErrorNotifications } from '@/components/notifications/ErrorNotifications'
 import { Colors } from '@/styles/colors'
+import { useMutation } from '@tanstack/react-query'
 
 interface ClaimVoucherSectionProps {
   setVoucher: (val: string) => void
@@ -13,13 +13,19 @@ interface ClaimVoucherSectionProps {
 
 export const ClaimVoucherSection = ({ setVoucher }: ClaimVoucherSectionProps) => {
   const state = useAuctionState()
-  const [error, setError] = useState<string>()
-  const handleError = async () => {}
+
+  const { mutate, isPending, error, reset } = useMutation({
+    mutationFn: async () => {
+      await new Promise((r) => setTimeout(r, 2000))
+      return 'YOUR VOUCHER CODE'
+    },
+    onSuccess: (data) => setVoucher(data),
+  })
 
   return (
     <VoucherOption>
-      {error && <ErrorNotifications error={error} onClick={handleError} setError={setError} />}
-      <Button view="primary" wide>
+      {error && <ErrorNotifications error={error} onClick={mutate} reset={reset} />}
+      <Button view="primary" wide onClick={mutate} isLoading={isPending}>
         Claim voucher code
       </Button>
       {state !== 'ClaimingClosed' && <VoucherTimeLeft />}