147 lines
3.8 KiB
TypeScript
147 lines
3.8 KiB
TypeScript
/* eslint-disable react-hooks/set-state-in-effect */
|
|
import { useEffect, useState } from "react";
|
|
import { saveMerchant, getMerchant, clearDevice } from "../../utils/storage";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
|
|
export default function SettingsFeature() {
|
|
const navigate = useNavigate();
|
|
|
|
const [form, setForm] = useState<MerchantForm>({
|
|
merchantName: "",
|
|
tower: "",
|
|
floor: "",
|
|
unit: "",
|
|
credential: "",
|
|
});
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
function isObjectValueDifferent(a: MerchantForm, b: MerchantForm): boolean {
|
|
return (Object.keys(a) as (keyof MerchantForm)[]).some(
|
|
(key) => a[key] !== b[key],
|
|
);
|
|
}
|
|
|
|
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const { name, value } = e.target;
|
|
setForm((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
|
|
const merchant = getMerchant();
|
|
|
|
if (merchant) {
|
|
const isDifferent = isObjectValueDifferent(merchant, form);
|
|
if (isDifferent) {
|
|
clearDevice(); // reset device kalau merchant berubah
|
|
}
|
|
}
|
|
|
|
setLoading(true);
|
|
saveMerchant(form);
|
|
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate({ to: "/" });
|
|
}, 200);
|
|
}
|
|
|
|
useEffect(() => {
|
|
const merchant = getMerchant();
|
|
if (merchant) {
|
|
setForm(merchant);
|
|
}
|
|
}, []);
|
|
|
|
const isFormValid =
|
|
form.merchantName?.trim() &&
|
|
form.tower?.trim() &&
|
|
form.floor?.trim() &&
|
|
form.unit?.trim();
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="p-4">
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<label className="mb-1 text-neutral-900 block font-semibold">
|
|
Merchant Name
|
|
</label>
|
|
<input
|
|
name="merchantName"
|
|
value={form.merchantName}
|
|
onChange={handleChange}
|
|
className="p-2 border border-neutral-200 w-full rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 text-neutral-900 block font-semibold">
|
|
Tower
|
|
</label>
|
|
<input
|
|
name="tower"
|
|
value={form.tower}
|
|
onChange={handleChange}
|
|
className="p-2 border border-neutral-200 w-full rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="mb-1 text-neutral-900 block font-semibold">
|
|
Floor
|
|
</label>
|
|
<input
|
|
name="floor"
|
|
value={form.floor}
|
|
onChange={handleChange}
|
|
className="p-2 border border-neutral-200 w-full rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 text-neutral-900 block font-semibold">
|
|
Unit
|
|
</label>
|
|
<input
|
|
name="unit"
|
|
value={form.unit}
|
|
onChange={handleChange}
|
|
className="p-2 border border-neutral-200 w-full rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1 text-neutral-900 block font-semibold">
|
|
Credential
|
|
</label>
|
|
<input
|
|
name="credential"
|
|
value={form.credential}
|
|
onChange={handleChange}
|
|
className="p-2 border border-neutral-200 w-full rounded-md"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!isFormValid || loading}
|
|
className="
|
|
w-full py-2 rounded-lg mt-8 text-white cursor-pointer
|
|
bg-orange-500
|
|
disabled:bg-neutral-400
|
|
disabled:cursor-not-allowed
|
|
"
|
|
>
|
|
{loading ? "Saving..." : "Save"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|