handle remove devices on change setuo

src/features/settings/index.tsx

@@ -1,12 +1,8 @@
 /* eslint-disable react-hooks/set-state-in-effect */
 import { useEffect, useState } from "react";
-import {
-  saveMerchant,
-  getMerchant,
-} from "../../utils/storage";
+import { saveMerchant, getMerchant, clearDevice } from "../../utils/storage";
 import { useNavigate } from "@tanstack/react-router";
 
-
 export default function SettingsFeature() {
   const navigate = useNavigate();
 
@@ -18,10 +14,16 @@ export default function SettingsFeature() {
   });
   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>
-  ) {
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = e.target;
     setForm((prev) => ({
       ...prev,
@@ -29,19 +31,28 @@ export default function SettingsFeature() {
     }));
   }
 
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!isFormValid) return;
+function handleSubmit(e: React.FormEvent) {
+  e.preventDefault();
 
-    setLoading(true);
-    saveMerchant(form);
+  const merchant = getMerchant();
+  if (!merchant || !form) return;
+  if (!isFormValid) return;
 
-    setTimeout(() => {
-      setLoading(false);
-      navigate({ to: "/" });
-    }, 200);
+  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) {
@@ -113,13 +124,13 @@ export default function SettingsFeature() {
         type="submit"
         disabled={!isFormValid || loading}
         className="
-          w-full py-2 rounded-lg mt-8 text-white
+          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 Device"}
+        {loading ? "Saving..." : "Save"}
       </button>
     </form>
   );