feat(pcc): copy values

Author: eriandev

apps/paypal-commission-calculator/package.json

@@ -19,5 +19,8 @@
   },
   "devDependencies": {
     "shared": "workspace:*"
+  },
+  "dependencies": {
+    "wc-toast": "1.3.1"
   }
 }

apps/paypal-commission-calculator/src/app.astro

@@ -57,5 +57,6 @@ const body: BodyProps = {
     <script src="@/logic/declare-refs.ts"></script>
     <script src="@/logic/events.ts"></script>
   </Fragment>
+  <wc-toast></wc-toast>
   <slot />
 </BaseLayout>

apps/paypal-commission-calculator/src/logic/events.ts

@@ -1,3 +1,4 @@
+import { toast } from 'wc-toast'
 import { getParsedValues, getRecieveValues, getSendValues } from './calculator-actions'
 import { $send, $amount, $receive, $sendCommission, $receiveCommission } from './declare-refs'
 
@@ -8,6 +9,31 @@ function isOnlyNumberOrDot({ key }: KeyboardEvent): boolean {
   return pattern.test(key)
 }
 
+document.addEventListener('click', (event: MouseEvent) => {
+  const target = event.target
+
+  if (!(target instanceof Element)) return
+
+  const svg = target.closest('svg[id^="copy-btn-"]')
+  if (svg === null) return
+
+  const targetId = svg.id.replace('copy-btn-', '')
+  const input = document.getElementById(targetId)
+
+  if (!(input instanceof HTMLInputElement)) return
+
+  void navigator.clipboard
+    .writeText(input.value)
+    .then(() => {
+      toast('Copied value!')
+    })
+    .catch((err: unknown) => {
+      if (err instanceof Error) {
+        console.error('Error coying:', err.message)
+      }
+    })
+})
+
 $amount?.addEventListener('input', ({ target }) => {
   const { value } = target as HTMLInputElement
   const { parsedAmount, parsedFixedCommision, parsedPercentCommision } = getParsedValues(value)