feat: modal for update gacha roll item

- Sesuaikan modal untuk update gacha roll item
- Refactor custom hook untuk tambah dan update gacha roll item

apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { useAddItem, useConfirmAddItem } from '../_hook/use-add-item';
+import { useItem, useConfirmItem } from '../_hook/use-item';
 
 interface IModalAddItem {
   isOpen: boolean;
@@ -18,7 +18,6 @@ const ModalAddItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleAddItem,
 }: IModalAddItem) => {
@@ -50,7 +49,7 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const { form, onSubmit } = useAddItem(nextStep);
+  const { form, onSubmit } = useItem(nextStep);
 
   return (
     <>
@@ -115,7 +114,11 @@ interface IStepTwoProps {
 }
 
 const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
-  const { onConfirm, onCancel } = useConfirmAddItem(onClose, resetStep);
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem
+  );
 
   return (
     <>

apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useState } from 'react';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
 interface IModalUpdateItem {
   isOpen: boolean;
@@ -17,7 +18,6 @@ const ModalUpdateItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleUpdateItem,
 }: IModalUpdateItem) => {
@@ -49,9 +49,13 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const [itemName, setItemName] = useState('Hoodie IMPHNEN Official 2025');
+  const initialValues = {
-  const [quantity, setQuantity] = useState('10');
+    itemName: 'Hoodie IMPHNEN Official 2025',
-  const [chanceRate, setChanceRate] = useState('0.1');
+    quantity: 10,
+    chanceRate: 0.1,
+  };
+
+  const { form, onSubmit } = useItem(nextStep, initialValues);
 
   return (
     <>
@@ -60,45 +64,52 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
           Update Item Roll Gacha
         </h2>
       </Modal.Header>
-      <Modal.Content className="flex flex-col gap-8">
+      <Modal.Content>
-        <div className="flex flex-col gap-4">
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
-          <InputField
+          <div className="flex flex-col gap-4">
-            label="Pilih Item"
+            <ControlledInputField
-            type="text"
+              control={form.control}
-            placeholder="Pilih item yang dimasukkan ke roll"
+              label="Pilih Item"
-            value={itemName}
+              name="itemName"
-            onChange={(e) => setItemName(e.target.value)}
+              type="text"
-            size="lg"
+              placeholder="Pilih item yang dimasukkan ke roll"
-            className="w-full"
+              size="lg"
-          />
+              className="w-full"
-          <InputField
+            />
-            label="Quantity"
+            <ControlledInputField
-            type="text"
+              control={form.control}
-            placeholder="Masukkan Kuantitas Item"
+              label="Quantity"
-            value={quantity}
+              name="quantity"
-            onChange={(e) => setQuantity(e.target.value)}
+              type="number"
-            size="lg"
+              min={1}
-            className="w-full"
+              placeholder="Masukkan Kuantitas Item"
-          />
+              size="lg"
-          <InputField
+              className="w-full"
-            label="Chance Rate"
+            />
-            type="text"
+            <ControlledInputField
-            placeholder="Masukkan Chance Rate (0.1 - 1)"
+              control={form.control}
-            value={chanceRate}
+              label="Chance Rate"
-            onChange={(e) => setChanceRate(e.target.value)}
+              name="chanceRate"
-            size="lg"
+              type="number"
-            className="w-full"
+              value={0.1}
-          />
+              min={0.1}
-        </div>
+              step={0.1}
+              max={1}
+              placeholder="Masukkan Chance Rate (0,1 - 1)"
+              size="lg"
+              className="w-full"
+            />
+          </div>
 
-        <Button
+          <Button
-          variant="primary"
+            variant="primary"
-          size="lg"
+            size="lg"
-          className="w-full"
+            className="w-full"
-          onClick={nextStep}
+            onClick={nextStep}
-        >
+          >
-          Perbarui Item
+            Perbarui Item
-        </Button>
+          </Button>
+        </form>
       </Modal.Content>
     </>
   );
@@ -110,43 +121,44 @@ interface IStepTwoProps {
   resetStep: () => void;
 }
 
-const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => (
+const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => {
-  <>
+  const { onConfirm, onCancel } = useConfirmItem(
-    <Modal.Header className="mb-0 text-center items-center">
+    onClose,
-      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+    resetStep,
-        Update Item
+    handleUpdateItem
-      </h2>
+  );
-      <p className="text-p3 text-neutral-400">
+
-        Apakah kamu yakin dengan
+  return (
-        <br /> perubahan yang dilakukan?
+    <>
-      </p>
+      <Modal.Header className="mb-0 text-center items-center">
-    </Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-    <Modal.Content className="flex gap-4">
+          Update Item
-      <Button
+        </h2>
-        variant="bordered"
+        <p className="text-p3 text-neutral-400">
-        size="lg"
+          Apakah kamu yakin dengan
-        className="w-full"
+          <br /> perubahan yang dilakukan?
-        onClick={() => {
+        </p>
-          onClose();
+      </Modal.Header>
-          resetStep();
+      <Modal.Content className="flex gap-4">
-        }}
+        <Button
-      >
+          variant="bordered"
-        Batal
+          size="lg"
-      </Button>
+          className="w-full"
-      <Button
+          onClick={onCancel}
-        variant="primary"
+        >
-        size="lg"
+          Batal
-        className="w-full"
+        </Button>
-        onClick={() => {
+        <Button
-          handleUpdateItem && handleUpdateItem();
+          variant="primary"
-          onClose();
+          size="lg"
-          resetStep();
+          className="w-full"
-        }}
+          onClick={onConfirm}
-      >
+        >
-        Update
+          Update
-      </Button>
+        </Button>
-    </Modal.Content>
+      </Modal.Content>
-  </>
+    </>
-);
+  );
+};
 
 export default ModalUpdateItem;

apps/backoffice/src/app/gacha-roll/_hook/use-item.ts

@@ -5,10 +5,14 @@ import {
   TGachaRollItem
 } from '@imphnen-frontend-service/service';
 
-export const useAddItem = (nextStep: () => void) => {
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: TGachaRollItem
+) => {
   const form = useForm<TGachaRollItem>({
     resolver: zodResolver(gachaRollItemSchema),
     mode: 'all',
+    defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
@@ -22,13 +26,13 @@ export const useAddItem = (nextStep: () => void) => {
   };
 };
 
-export const useConfirmAddItem = (
+export const useConfirmItem = (
   onClose: () => void,
   resetStep: () => void,
-  handleAddItem?: () => void,
+  actionFunction?: () => void,
 ) => {
   const onConfirm = () => {
-    handleAddItem?.();
+    actionFunction?.();
     onClose();
     resetStep();
   };