|
|
@@ -16,6 +16,7 @@ import RHFDatePicker from "components/hook-form/RHFDatePicker"; |
|
|
import { useEffect, useMemo, useState } from "react"; |
|
|
import { useEffect, useMemo, useState } from "react"; |
|
|
import { useForm } from "react-hook-form"; |
|
|
import { useForm } from "react-hook-form"; |
|
|
import { dateTimeParse } from "utils/datetime"; |
|
|
import { dateTimeParse } from "utils/datetime"; |
|
|
|
|
|
import { calcInnerTax } from "utils/tax"; |
|
|
import * as Yup from "yup"; |
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
|
type AreaBoxProps = { |
|
|
type AreaBoxProps = { |
|
|
@@ -32,6 +33,7 @@ function AreaBox({ title, children }: AreaBoxProps) { |
|
|
|
|
|
|
|
|
type FormProps = { |
|
|
type FormProps = { |
|
|
amount: string; |
|
|
amount: string; |
|
|
|
|
|
tax_amount: string; |
|
|
date: Date | null; |
|
|
date: Date | null; |
|
|
memo: string; |
|
|
memo: string; |
|
|
}; |
|
|
}; |
|
|
@@ -46,6 +48,7 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
const form = useForm<FormProps>({ |
|
|
const form = useForm<FormProps>({ |
|
|
defaultValues: { |
|
|
defaultValues: { |
|
|
amount: "", |
|
|
amount: "", |
|
|
|
|
|
tax_amount: "", |
|
|
date: null, |
|
|
date: null, |
|
|
memo: "", |
|
|
memo: "", |
|
|
}, |
|
|
}, |
|
|
@@ -55,6 +58,7 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
.required("必須項目です") |
|
|
.required("必須項目です") |
|
|
.typeError("正しく入力してください"), |
|
|
.typeError("正しく入力してください"), |
|
|
amount: Yup.number().required("必須項目です"), |
|
|
amount: Yup.number().required("必須項目です"), |
|
|
|
|
|
tax_amount: Yup.number().required("必須項目です"), |
|
|
memo: Yup.string().nullable(), |
|
|
memo: Yup.string().nullable(), |
|
|
}) |
|
|
}) |
|
|
), |
|
|
), |
|
|
@@ -77,6 +81,17 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
_setAdjustData(data); |
|
|
_setAdjustData(data); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
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 readOnly = useMemo(() => { |
|
|
const readOnly = useMemo(() => { |
|
|
return adjustData !== null; |
|
|
return adjustData !== null; |
|
|
}, [adjustData]); |
|
|
}, [adjustData]); |
|
|
@@ -99,6 +114,27 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
readOnly={readOnly} |
|
|
readOnly={readOnly} |
|
|
/> |
|
|
/> |
|
|
</AreaBox> |
|
|
</AreaBox> |
|
|
|
|
|
<AreaBox title="消費税(内税)"> |
|
|
|
|
|
<Stack direction="row" spacing={2}> |
|
|
|
|
|
<RHFTextField |
|
|
|
|
|
type="number" |
|
|
|
|
|
name="tax_amount" |
|
|
|
|
|
size="small" |
|
|
|
|
|
InputProps={{ |
|
|
|
|
|
endAdornment: ( |
|
|
|
|
|
<div style={{ color: "black !important" }}>円</div> |
|
|
|
|
|
), |
|
|
|
|
|
}} |
|
|
|
|
|
sx={{ maxWidth: 150 }} |
|
|
|
|
|
readOnly={readOnly} |
|
|
|
|
|
/> |
|
|
|
|
|
{canCalcTax && ( |
|
|
|
|
|
<Button onClick={calcTax} variant="text"> |
|
|
|
|
|
計算 |
|
|
|
|
|
</Button> |
|
|
|
|
|
)} |
|
|
|
|
|
</Stack> |
|
|
|
|
|
</AreaBox> |
|
|
<AreaBox title="メモ"> |
|
|
<AreaBox title="メモ"> |
|
|
<RHFTextField name="memo" size="small" multiline rows={3} /> |
|
|
<RHFTextField name="memo" size="small" multiline rows={3} /> |
|
|
</AreaBox> |
|
|
</AreaBox> |
|
|
@@ -116,9 +152,11 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) { |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (adjustData) { |
|
|
if (adjustData) { |
|
|
form.setValue("amount", String(adjustData.amount)); |
|
|
form.setValue("amount", String(adjustData.amount)); |
|
|
|
|
|
form.setValue("tax_amount", String(adjustData.tax_charge)); |
|
|
form.setValue("date", dateTimeParse(adjustData.adjust_datetime)); |
|
|
form.setValue("date", dateTimeParse(adjustData.adjust_datetime)); |
|
|
} else { |
|
|
} else { |
|
|
form.setValue("amount", ""); |
|
|
form.setValue("amount", ""); |
|
|
|
|
|
form.setValue("tax_amount", ""); |
|
|
form.setValue("date", null); |
|
|
form.setValue("date", null); |
|
|
} |
|
|
} |
|
|
}, [adjustData]); |
|
|
}, [adjustData]); |
|
|
|