From dd8df1d922cc82fab7e93b4bf68dd406bae67f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Sat, 16 Nov 2024 12:17:11 -0300
Subject: [PATCH 1/2] feat(request): allow attachment download on receipt

---
 .../Views/GeneralViews/AlreadyPaid.view.tsx   | 43 +++++++++++++++----
 .../Request/Pay/Views/Success.view.tsx        | 23 ++++++++++
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
index 962d1c93b..20e424b1c 100644
--- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
+++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
@@ -7,22 +7,45 @@ import * as utils from '@/utils'
 import Link from 'next/link'
 
 export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _consts.IRequestLinkData | undefined }) => {
-
-    const chainName = consts.supportedPeanutChains && consts.supportedPeanutChains.find((chain) => chain.chainId == requestLinkData?.chainId)?.name
+    const chainName =
+        consts.supportedPeanutChains &&
+        consts.supportedPeanutChains.find((chain) => chain.chainId == requestLinkData?.chainId)?.name
     const tokenSymbolAvailable: boolean = !!requestLinkData?.tokenSymbol
     const tokenAmountAvailable: boolean = !!requestLinkData?.tokenAmount
     const chainAvailable: boolean = !!requestLinkData?.chainId
     const recipientAddressAvailable: boolean = !!requestLinkData?.recipientAddress
-    const dataAvailable: boolean = tokenSymbolAvailable || tokenAmountAvailable || chainAvailable || recipientAddressAvailable
-    
+    const dataAvailable: boolean =
+        tokenSymbolAvailable || tokenAmountAvailable || chainAvailable || recipientAddressAvailable
+
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
+            {(requestLinkData?.reference || requestLinkData?.attachmentUrl) && (
+                <>
+                    <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
+                        {requestLinkData!.reference && (
+                            <label className="max-w-full text-h8">
+                                Ref: <span className="font-normal"> {requestLinkData!.reference} </span>
+                            </label>
+                        )}
+                        {requestLinkData!.attachmentUrl && (
+                            <a
+                                href={requestLinkData!.attachmentUrl}
+                                download
+                                target="_blank"
+                                className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                            >
+                                <Icon name={'download'} />
+                                Download attachment
+                            </a>
+                        )}
+                    </div>
+                    <div className="flex w-full border-t border-dotted border-black" />
+                </>
+            )}
             <label className="text-h2">Sorry, this link has already been paid.</label>
             {dataAvailable && (
                 <div className="flex w-full flex-col items-center justify-center gap-2">
-                    <label className="text-h8 ">
-                        This link previously contained:
-                    </label>
+                    <label className="text-h8 ">This link previously contained:</label>
                     {tokenSymbolAvailable && (
                         <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
                             <div className="flex w-max  flex-row items-center justify-center gap-1">
@@ -50,8 +73,10 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
                             </div>
                             <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
                                 <img
-                                    src={consts.supportedPeanutChains.find((detail) => detail.chainId === requestLinkData?.chainId)?.icon
-                                                .url
+                                    src={
+                                        consts.supportedPeanutChains.find(
+                                            (detail) => detail.chainId === requestLinkData?.chainId
+                                        )?.icon.url
                                     }
                                     className="h-6 w-6"
                                 />
diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 4f0da8f00..81e115936 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -80,6 +80,29 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
 
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
+            {(requestLinkData?.reference || requestLinkData?.attachmentUrl) && (
+                <>
+                    <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
+                        {requestLinkData!.reference && (
+                            <label className="max-w-full text-h8">
+                                Ref: <span className="font-normal"> {requestLinkData!.reference} </span>
+                            </label>
+                        )}
+                        {requestLinkData!.attachmentUrl && (
+                            <a
+                                href={requestLinkData!.attachmentUrl}
+                                download
+                                target="_blank"
+                                className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                            >
+                                <Icon name={'download'} />
+                                Download attachment
+                            </a>
+                        )}
+                    </div>
+                    <div className="flex w-full border-t border-dotted border-black" />
+                </>
+            )}
             {isLoading ? (
                 <>
                     <div className="animate-spin">

From 5b3abadf68c297736898b5645cd4f91c64bb4e70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= <artjjrn@gmail.com>
Date: Mon, 18 Nov 2024 10:12:46 -0300
Subject: [PATCH 2/2] refactor(request): abstracted reference and attachment to
 a component

---
 .../Components/ReferenceAndAttachment.tsx     | 34 +++++++++++++++++++
 .../Views/GeneralViews/AlreadyPaid.view.tsx   | 28 +++------------
 .../Request/Pay/Views/Initial.view.tsx        | 29 +++-------------
 .../Request/Pay/Views/Success.view.tsx        | 28 +++------------
 4 files changed, 49 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Request/Components/ReferenceAndAttachment.tsx

diff --git a/src/components/Request/Components/ReferenceAndAttachment.tsx b/src/components/Request/Components/ReferenceAndAttachment.tsx
new file mode 100644
index 000000000..5696fb0c2
--- /dev/null
+++ b/src/components/Request/Components/ReferenceAndAttachment.tsx
@@ -0,0 +1,34 @@
+import Icon from '@/components/Global/Icon'
+
+export const ReferenceAndAttachment = ({
+    reference,
+    attachmentUrl,
+}: {
+    reference?: string | null
+    attachmentUrl?: string | null
+}) => {
+    if (!reference && !attachmentUrl) return null
+    return (
+        <>
+            <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
+                {reference && (
+                    <label className="max-w-full text-h8">
+                        Ref: <span className="font-normal"> {reference} </span>
+                    </label>
+                )}
+                {attachmentUrl && (
+                    <a
+                        href={attachmentUrl}
+                        download
+                        target="_blank"
+                        className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
+                    >
+                        <Icon name={'download'} />
+                        Download attachment
+                    </a>
+                )}
+            </div>
+            <div className="flex w-full border-t border-dotted border-black" />
+        </>
+    )
+}
diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
index 20e424b1c..fdc339f54 100644
--- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
+++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx
@@ -5,6 +5,7 @@ import * as consts from '@/constants'
 import * as _consts from '../../Pay.consts'
 import * as utils from '@/utils'
 import Link from 'next/link'
+import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'
 
 export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _consts.IRequestLinkData | undefined }) => {
     const chainName =
@@ -19,29 +20,10 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con
 
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
-            {(requestLinkData?.reference || requestLinkData?.attachmentUrl) && (
-                <>
-                    <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
-                        {requestLinkData!.reference && (
-                            <label className="max-w-full text-h8">
-                                Ref: <span className="font-normal"> {requestLinkData!.reference} </span>
-                            </label>
-                        )}
-                        {requestLinkData!.attachmentUrl && (
-                            <a
-                                href={requestLinkData!.attachmentUrl}
-                                download
-                                target="_blank"
-                                className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
-                            >
-                                <Icon name={'download'} />
-                                Download attachment
-                            </a>
-                        )}
-                    </div>
-                    <div className="flex w-full border-t border-dotted border-black" />
-                </>
-            )}
+            <ReferenceAndAttachment
+                reference={requestLinkData?.reference}
+                attachmentUrl={requestLinkData?.attachmentUrl}
+            />
             <label className="text-h2">Sorry, this link has already been paid.</label>
             {dataAvailable && (
                 <div className="flex w-full flex-col items-center justify-center gap-2">
diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx
index 3d06d7d11..b7e51126c 100644
--- a/src/components/Request/Pay/Views/Initial.view.tsx
+++ b/src/components/Request/Pay/Views/Initial.view.tsx
@@ -22,6 +22,7 @@ import { peanut, interfaces } from '@squirrel-labs/peanut-sdk'
 import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
 import { switchNetwork as switchNetworkUtil } from '@/utils/general.utils'
 import { type ITokenPriceData } from '@/interfaces'
+import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'
 
 const ERR_NO_ROUTE = 'No route found to pay in this chain and token'
 
@@ -321,30 +322,10 @@ export const InitialView = ({
 
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 text-center">
-            {(requestLinkData.reference || requestLinkData.attachmentUrl) && (
-                <>
-                    <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
-                        {requestLinkData.reference && (
-                            <label className="max-w-full text-h8">
-                                Ref: <span className="font-normal"> {requestLinkData.reference} </span>
-                            </label>
-                        )}
-                        {requestLinkData.attachmentUrl && (
-                            <a
-                                href={requestLinkData.attachmentUrl}
-                                download
-                                target="_blank"
-                                className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
-                            >
-                                <Icon name={'download'} />
-                                Download attachment
-                            </a>
-                        )}
-                    </div>
-                    <div className="flex w-full border-t border-dotted border-black" />
-                </>
-            )}
-
+            <ReferenceAndAttachment
+                reference={requestLinkData?.reference}
+                attachmentUrl={requestLinkData?.attachmentUrl}
+            />
             <div className="flex w-full flex-col items-center justify-center gap-2">
                 <label className="text-h4">
                     <AddressLink address={requestLinkData.recipientAddress} /> is requesting
diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx
index 81e115936..beeee6b88 100644
--- a/src/components/Request/Pay/Views/Success.view.tsx
+++ b/src/components/Request/Pay/Views/Success.view.tsx
@@ -9,6 +9,7 @@ import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
 import { peanut } from '@squirrel-labs/peanut-sdk'
 import { useAccount } from 'wagmi'
+import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'
 
 export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }: _consts.IPayScreenProps) => {
     const { selectedChainID, selectedTokenAddress } = useContext(context.tokenSelectorContext)
@@ -80,29 +81,10 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
 
     return (
         <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center">
-            {(requestLinkData?.reference || requestLinkData?.attachmentUrl) && (
-                <>
-                    <div className={`flex w-full flex-col items-center justify-center  gap-2`}>
-                        {requestLinkData!.reference && (
-                            <label className="max-w-full text-h8">
-                                Ref: <span className="font-normal"> {requestLinkData!.reference} </span>
-                            </label>
-                        )}
-                        {requestLinkData!.attachmentUrl && (
-                            <a
-                                href={requestLinkData!.attachmentUrl}
-                                download
-                                target="_blank"
-                                className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline "
-                            >
-                                <Icon name={'download'} />
-                                Download attachment
-                            </a>
-                        )}
-                    </div>
-                    <div className="flex w-full border-t border-dotted border-black" />
-                </>
-            )}
+            <ReferenceAndAttachment
+                reference={requestLinkData?.reference}
+                attachmentUrl={requestLinkData?.attachmentUrl}
+            />
             {isLoading ? (
                 <>
                     <div className="animate-spin">