From b7c4a9da4dc8ab3b14790c526bca48fe1c2d3b08 Mon Sep 17 00:00:00 2001
From: Bohdan Chornokondratenko <bogdan.chornocondratenko@gmail.com>
Date: Sat, 11 Jan 2025 23:15:53 +0100
Subject: [PATCH 1/2] feat(app): add a prompt for the reason to take an extra

---
 src/components/ui/Input.tsx                   |  24 +++-
 src/components/ui/popovers/Dialog.tsx         |   3 +
 .../components/CurrentSolve.tsx               | 105 ++++++++++++++++--
 3 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 1961a8ab..469af688 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -5,10 +5,9 @@ export type InputProps = ComponentProps<'input'> & {
   error?: boolean
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type = 'text', error = false, ...props }, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, error = false, ...props }, ref) => {
   return (
     <input
-      type={type}
       className={cn(
         'text-large h-11 rounded-lg bg-black-100 px-4 placeholder-grey-40 ring-grey-40 transition-shadow duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-1',
         { 'ring-1 ring-red-80': error },
@@ -21,4 +20,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type = 'tex
 })
 Input.displayName = 'Input'
 
-export { Input }
+export type TextAreaProps = ComponentProps<'textarea'> & {
+  error?: boolean
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, error = false, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'text-large rounded-lg bg-black-100 px-4 py-[0.625rem] placeholder-grey-40 ring-grey-40 transition-shadow duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-1',
+        { 'ring-1 ring-red-80': error },
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+TextArea.displayName = 'TextArea'
+
+export { Input, TextArea }
diff --git a/src/components/ui/popovers/Dialog.tsx b/src/components/ui/popovers/Dialog.tsx
index 58a7484b..b6b5b048 100644
--- a/src/components/ui/popovers/Dialog.tsx
+++ b/src/components/ui/popovers/Dialog.tsx
@@ -19,6 +19,8 @@ const DialogTrigger = DialogPrimitive.Trigger
 
 const DialogPortal = DialogPrimitive.Portal
 
+const DialogDescription = DialogPrimitive.Description
+
 const DialogOverlay = forwardRef<
   ElementRef<typeof DialogPrimitive.Overlay>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & { withCubes?: boolean }
@@ -82,4 +84,5 @@ export {
   DialogContent,
   DialogFooter,
   DialogTitle,
+  DialogDescription,
 }
diff --git a/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx b/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
index 0ee452b8..6e7d7714 100644
--- a/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
+++ b/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
@@ -1,6 +1,25 @@
-import { PrimaryButton, SecondaryButton } from '@/components/ui'
+import {
+  PrimaryButton,
+  SecondaryButton,
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogCloseCross,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  TextArea,
+  DialogDescription,
+} from '@/components/ui'
 import { SolveContestStateDTO } from '../types'
 import { SolvePanel } from './SolvePanel'
+import { ReactNode, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { BaseDialogButton } from '@/components/ui/popovers/BaseDialog'
 
 export function CurrentSolve({
   areActionsDisabled,
@@ -33,14 +52,14 @@ export function CurrentSolve({
         ) : (
           <div className='flex gap-1'>
             {currentSolve.canChangeToExtra && (
-              <SecondaryButton
-                size='sm'
-                className='w-[5.25rem]'
-                onClick={onChangeToExtra}
-                disabled={areActionsDisabled}
-              >
-                Extra
-              </SecondaryButton>
+              <ExtraReasonPrompt
+                onChangeToExtra={onChangeToExtra}
+                trigger={
+                  <SecondaryButton size='sm' className='w-[5.25rem]' disabled={areActionsDisabled}>
+                    Extra
+                  </SecondaryButton>
+                }
+              />
             )}
             <PrimaryButton size='sm' className='w-[5.25rem]' onClick={onSolveSubmit} disabled={areActionsDisabled}>
               Submit
@@ -51,3 +70,71 @@ export function CurrentSolve({
     />
   )
 }
+
+const REASON_MIN_LENGTH = 3
+const reasonFormSchema = z.object({
+  reason: z.string().trim().min(REASON_MIN_LENGTH, 'The reason should be at least 3 characters long'),
+})
+type ReasonForm = z.infer<typeof reasonFormSchema>
+
+function ExtraReasonPrompt({
+  trigger,
+  onChangeToExtra,
+}: {
+  trigger: ReactNode
+  onChangeToExtra: (reason: string) => void
+}) {
+  const {
+    register,
+    handleSubmit,
+    reset: resetForm,
+    formState: { errors },
+  } = useForm<ReasonForm>({ resolver: zodResolver(reasonFormSchema) })
+
+  const [open, setOpen] = useState(false)
+
+  function onSubmit({ reason }: ReasonForm) {
+    onChangeToExtra(reason)
+    setOpen(false)
+  }
+
+  return (
+    <Dialog
+      onOpenChange={(newOpen) => {
+        resetForm()
+        setOpen(newOpen)
+      }}
+      open={open}
+    >
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay withCubes={false} className='bg-black-1000/25' />
+        <DialogContent className='max-w-[35rem] p-0'>
+          <form className='relative h-full w-full px-24 py-16' onSubmit={handleSubmit(onSubmit)}>
+            <DialogCloseCross className='absolute right-4 top-4' />
+            <DialogTitle className='mb-4'>Need an Extra attempt?</DialogTitle>
+            <DialogDescription className='mb-8 text-center text-[0.875rem] leading-[1.5] text-grey-20'>
+              To request an extra attempt, please tell us what went wrong. This helps ensure extras are used
+              thoughtfully
+            </DialogDescription>
+            <label className='mb-8 block'>
+              <TextArea
+                error={!!errors.reason}
+                {...register('reason')}
+                className='mb-1 h-24 w-full'
+                placeholder='Type your reason here'
+              />
+              <span className='caption'>{errors.reason?.message}</span>
+            </label>
+            <DialogFooter>
+              <DialogClose version='secondary'>Cancel</DialogClose>
+              <BaseDialogButton type='submit' version='primary' disabled={!!errors.reason}>
+                Submit
+              </BaseDialogButton>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  )
+}

From 0e739d6a60f0ac68763668e0d1e64fe5ed7e1de8 Mon Sep 17 00:00:00 2001
From: Bohdan Chornokondratenko <bogdan.chornocondratenko@gmail.com>
Date: Mon, 13 Jan 2025 20:10:11 +0100
Subject: [PATCH 2/2] fix(app): add todo

---
 .../pages/SolveContestPage/components/CurrentSolve.tsx   | 2 +-
 .../SolveContestPage/components/SolveContestForm.tsx     | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx b/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
index 6e7d7714..e9b77e06 100644
--- a/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
+++ b/src/features/contests/pages/SolveContestPage/components/CurrentSolve.tsx
@@ -32,7 +32,7 @@ export function CurrentSolve({
   areActionsDisabled: boolean
   number: number
   currentSolve: SolveContestStateDTO['currentSolve']
-  onChangeToExtra: () => void
+  onChangeToExtra: (reason: string) => void
   onSolveInit: () => void
   onSolveSubmit: () => void
 }) {
diff --git a/src/features/contests/pages/SolveContestPage/components/SolveContestForm.tsx b/src/features/contests/pages/SolveContestPage/components/SolveContestForm.tsx
index e9ea5211..40ae1d45 100644
--- a/src/features/contests/pages/SolveContestPage/components/SolveContestForm.tsx
+++ b/src/features/contests/pages/SolveContestPage/components/SolveContestForm.tsx
@@ -31,8 +31,9 @@ export function SolveContestForm({ state: { currentSolve, submittedSolveSet }, i
     initSolve(currentSolve.scramble.moves, (result) => void onSolveFinish(result))
   }
 
-  async function handleSolveAction(action: 'change_to_extra' | 'submit') {
-    await solveAction(action)
+  async function handleSolveAction(payload: { type: 'change_to_extra'; reason: string } | { type: 'submit' }) {
+    // TODO: also pass the reason for extras once backend is ready
+    await solveAction(payload.type)
   }
 
   const currentSolveNumber = (submittedSolveSet?.length ?? 0) + 1
@@ -61,9 +62,9 @@ export function SolveContestForm({ state: { currentSolve, submittedSolveSet }, i
             <CurrentSolve
               areActionsDisabled={isPending}
               currentSolve={currentSolve}
-              onChangeToExtra={() => handleSolveAction('change_to_extra')}
+              onChangeToExtra={(reason) => handleSolveAction({ type: 'change_to_extra', reason })}
               onSolveInit={handleInitSolve}
-              onSolveSubmit={() => handleSolveAction('submit')}
+              onSolveSubmit={() => handleSolveAction({ type: 'submit' })}
               number={currentSolveNumber}
             />
           </div>