From 6009fbdbd7b19c5b4ab7db73661e216d101296c1 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 29 May 2024 21:37:26 -0300
Subject: [PATCH] feat: create ZapInvoiceModal and use it

---
 src/features/ui/components/modal-root.tsx     |  2 +
 .../ui/components/modals/zap-invoice.tsx      | 46 +++++++++++++++++++
 src/features/ui/util/async-components.ts      |  1 +
 .../zap/components/zap-pay-request-form.tsx   |  3 +-
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/features/ui/components/modals/zap-invoice.tsx

diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 3f0743df2..3bda6fd3e 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -43,6 +43,7 @@ import {
   VideoModal,
   EditRuleModal,
   ZapPayRequestModal,
+  ZapInvoiceModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import ModalLoading from './modal-loading';
@@ -89,6 +90,7 @@ const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
   'SELECT_BOOKMARK_FOLDER': SelectBookmarkFolderModal,
   'UNAUTHORIZED': UnauthorizedModal,
   'VIDEO': VideoModal,
+  'ZAP_INVOICE': ZapInvoiceModal,
   'ZAP_PAY_REQUEST': ZapPayRequestModal,
 };
 
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
new file mode 100644
index 000000000..962f0ce1c
--- /dev/null
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -0,0 +1,46 @@
+import { QRCodeCanvas } from 'qrcode.react';
+import React  from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { closeModal } from 'soapbox/actions/modals';
+import CopyableInput from 'soapbox/components/copyable-input';
+import { Modal, Button } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
+});
+
+interface IZapInvoice{
+  account: AccountEntity;
+  invoice: string;
+  onClose:(type?: string) => void;
+}
+
+const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onClickClose = () => {
+    onClose('ZAP_INVOICE');
+    dispatch(closeModal('ZAP_PAY_REQUEST'));
+  };
+
+  const renderTitle = () => {
+    return <FormattedMessage id='zap.send_to' defaultMessage='Send zaps to {target}' values={{ target: account.display_name }} />;
+  };
+
+  return (
+    <Modal title={renderTitle()} onClose={onClickClose}>
+      <QRCodeCanvas value={invoice} />
+      <CopyableInput value={invoice} />
+      <a href={'lightning:' + invoice}>
+        <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+      </a>
+    </Modal>
+  );
+};
+
+export default ZapInvoiceModal;
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index d358c3bd3..85d1b9bb9 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -177,3 +177,4 @@ export const Rules = lazy(() => import('soapbox/features/admin/rules'));
 export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
 export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
 export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request'));
+export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice'));
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 5242d5994..9b34da7f6 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { zap } from 'soapbox/actions/interactions';
-import { closeModal } from 'soapbox/actions/modals';
+import { openModal, closeModal } from 'soapbox/actions/modals';
 import Account from 'soapbox/components/account';
 import { Stack, Button, Select } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
@@ -36,6 +36,7 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
         return;
       }
       // open QR code modal
+      dispatch(openModal('ZAP_INVOICE', { invoice, account }));
     }
   };