🌀 refactor Use async/await for generating the PIN also changed the Di…

…gitalSignature modal body to display the pin URL the client should use

src/components/Pages/ListGroups/CheckoutListGroup.tsx

@@ -26,12 +26,23 @@ const CheckoutListGroup = (props: IProps) => {
     const [signIn] = useGlobal('signIn');
     const organization = signIn?.organization?.trim();
     const [signatureImage, setSignatureImage] = useState<null | string>(null);
+
+    /**
+     * Handle when the user clicks the Digital Signature button
+     */
     const handleDigitalSignature = () => {
-        pinProvider.generate(clientRecord.Id as number).then((pinData) => {
-            setPinData(pinData);
-        });
+        /**
+         * Call the API to generate a new PIN for the given client.
+         * @param {number} clientId The client PK
+         */
+        const generatePin = async (clientId: number) => {
+            setPinData(await pinProvider.generate(clientId));
+        };
+        generatePin(clientRecord.Id as number);
     };
 
+    if (!clientRecord.Id) return null;
+
     return (
         <>
             <ListGroup>

src/components/Pages/Modals/DigitalSignature.tsx

@@ -67,6 +67,10 @@ const DigitalSignature = (props: IProps) => {
         <Modal backdrop="static" centered show={show} size="lg">
             <Modal.Body>
                 <h1>PIN: {pinData.pin.toString()}</h1>
+                <h2>
+                    Direct the client to <span style={{color: 'blue'}}>{window.location.href + 'pin'}</span>
+                </h2>
+                <br />
                 <h2>Waiting on client signature</h2>
             </Modal.Body>