HT 消費税計算のUIを修正

計算ボタン削除
リアルタイムで元の金額から計算するように対応

src/pages/dashboard/receipt-issuing-order/custom/hello-techno/hooks/useInputReceiptStep.tsx

@@ -76,6 +76,8 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
     ),
   });
 
+  const amount = form.watch("amount");
+
   const handleSubmit = (data: FormProps) => {
     console.log(data);
     if (onNext) {
@@ -89,15 +91,13 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
     }
   };
 
-  const canCalcTax = useMemo(() => {
-    return !adjustData;
-  }, [adjustData]);
-
-  const calcTax = () => {
-    if (!canCalcTax) return;
-    const amount = Number(form.getValues("amount"));
-    if (!amount) return;
-    form.setValue("tax_amount", String(calcInnerTax(amount)));
+  const setTax = () => {
+    const tax = String(calcInnerTax(Number(amount)));
+    if (tax) {
+      form.setValue("tax_amount", tax);
+    } else {
+      form.setValue("tax_amount", "");
+    }
   };
 
   const adjustDataAPI = useAPICall({
@@ -153,6 +153,10 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
     form.setValue("memo", "");
   };
 
+  useEffect(() => {
+    setTax();
+  }, [amount]);
+
   const element = (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2} sx={{ p: 1, m: 1 }}>
@@ -202,7 +206,7 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
           </Box>
         </AreaBox>
         <AreaBox title="消費税(内税)" require>
-          <Stack direction="row" spacing={2}>
+          <StackRow spacing={2}>
             <RHFTextField
               type="number"
               name="tax_amount"
@@ -215,12 +219,7 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
               sx={{ maxWidth: 150 }}
               readOnly={readOnly}
             />
-            {canCalcTax && (
-              <Button onClick={calcTax} variant="text">
-                計算
-              </Button>
-            )}
-          </Stack>
+          </StackRow>
         </AreaBox>
         <AreaBox title="メモ">
           <RHFTextField name="memo" size="small" multiline rows={3} />