set memo

1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/SetMemo.svelte b/src/components/SetMemo.svelte
new file mode 100644
index 00000000..f11bf780
--- /dev/null
+++ b/src/components/SetMemo.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { focus } from "$lib/utils";
+
+  let {
+    submit = $bindable(),
+    settingMemo,
+    setMemo,
+    memo = $bindable(),
+    toggleMemo,
+    t,
+  } = $props();
+</script>
+
+{#if settingMemo}
+  <div
+    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+  >
+    <div
+      class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
+    >
+      <form onsubmit={setMemo} class="space-y-5">
+        <input use:focus placeholder={t("invoice.memo")} bind:value={memo} />
+        <div class="w-full flex flex-wrap gap-2">
+          <button
+            bind:this={submit}
+            type="submit"
+            onclick={setMemo}
+            class="btn btn-accent"
+          >
+            <div class="my-auto">{t("payments.ok")}</div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            onclick={toggleMemo}
+            onkeydown={toggleMemo}
+          >
+            <div class="my-auto">{t("payments.cancel")}</div>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+{/if}