ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/consent/pdf-signature.js

@@ -0,0 +1,299 @@
+// src/components/PDFSignature.js
+import { useState, useEffect } from 'react';
+
+import SignatureCanvasComponent from './signature-pad';
+
+import { Skeleton, Button, message } from 'antd';
+
+import { PdfViewer, useTranslation } from '../../../lib';
+
+const PDFSignature = ({ app_id, callback, preview }) => {
+    const states = {
+        input: 'input',
+        result: 'result',
+    };
+
+    const [pdfData, setPdfData] = useState(null);
+
+    const [signedPdfUrl, setSignedPdfUrl] = useState(null);
+
+    const [signature, setSignature] = useState(null);
+
+    const [loading, setLoading] = useState(true);
+
+    const [btnloading, setBtnLoading] = useState(false);
+
+    const [currentState, setCurrentState] = useState(states.input);
+
+    const [pdfBase64Data, setpdfBase64Data] = useState([]);
+
+    const { t, i18n } = useTranslation(); // To Translate to another language
+
+    useEffect(async () => {
+
+        await fetchPdf();
+
+    }, []);
+
+
+    // Function to show consent pdf file
+    /**
+     * 
+     */
+    async function fetchPdf() {
+        try {
+            let url = 'consent/get-file'
+
+            const response = await fetch(process.env.REACT_APP_endpoint + url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ' + localStorage.access_token,
+                    db_ptr: localStorage.db_ptr ? localStorage.db_ptr : process.env.REACT_APP_DB_PTR,
+                },
+                body: JSON.stringify({
+                    id: app_id,
+                }),
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to fetch PDF');
+            }
+
+            const arrayBuffer = await response.arrayBuffer();
+
+            setPdfData(new Uint8Array(arrayBuffer));
+
+        } catch (error) {
+            console.error('Error fetching PDF:', error);
+        } finally {
+            setLoading(false);
+        }
+    }
+    /**
+     * 
+     * @param {*} signatureData 
+     * @returns 
+     */
+
+    const onSaveAndAddSignature = async (signatureData) => {
+        // Save the signature immediately
+        if (signatureData) {
+            setSignature(signatureData); // Save the signature immediately
+            message.success(t('Signature added successfully'));
+        }
+        // setSignature(signatureData);
+
+        try {
+            const url = 'consent/add-signature';
+            setBtnLoading(true);
+
+            const response = await fetch(process.env.REACT_APP_endpoint + url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: 'Bearer ' + localStorage.access_token,
+                    db_ptr: localStorage.db_ptr ? localStorage.db_ptr : process.env.REACT_APP_DB_PTR,
+                },
+                body: JSON.stringify({
+                    // Remove the data URL prefix
+                    signature: signatureData.split(',')[1],
+                    id: app_id,
+                }),
+            });
+
+            if (!response.ok) {
+                throw new Error(t('Failed to add signature to PDF'));
+            }
+
+            const blob = await response.blob();
+            const arrayBuffer = await blob.arrayBuffer();
+            const base64String = arrayBufferToBase64(arrayBuffer);
+
+            setpdfBase64Data(base64String);
+
+            setSignedPdfUrl(URL.createObjectURL(blob), { type: 'application/pdf' });
+            setCurrentState(states.result);
+        } catch (error) {
+            console.error('Error adding signature to PDF:', error);
+        }
+        finally {
+            setBtnLoading(false);
+        }
+    };
+
+    /**
+     * Reset signature state when clear is applied
+     */
+    const handleClearSignature = () => {
+        // Reset signature to null
+        setSignature(null); 
+        // message.info(t('Signature cleared'));
+    };
+
+    /**
+     * Helper function to convert ArrayBuffer to Base64 in chunks
+     * 
+     * @param {*} buffer 
+     * @returns 
+     */
+    function arrayBufferToBase64(buffer) {
+        let binary = '';
+
+        const bytes = new Uint8Array(buffer);
+
+        const chunkSize = 0x8000; // arbitrary number of bytes per chunk
+
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            binary += String.fromCharCode.apply(null, bytes.subarray(i, i + chunkSize));
+        }
+
+        return window.btoa(binary);
+    }
+
+    /**
+     * Function to upload consent form
+     *
+     * @param {*} dataUri
+     */
+
+    /**
+     * 
+     * @param {*} selectedData 
+     * @param {*} baseIndex 
+     */
+    const onConsentUpload = (selectedData, baseIndex = 0) => {
+        message.loading(t('Uploading Consent Document'));
+
+        setBtnLoading(true)
+
+        let data = [{
+            file: selectedData,
+        }
+        ]
+
+        // var formData = new FormData();
+        Promise.all(
+            data.map(async (ele, index) => {
+
+                // setting body
+                let formBody = {
+                    files: ele.file,
+                    document_type: 'pdf',
+                    appointment_id: app_id,
+                    index: baseIndex + (index + 1),
+                    document_code: 'CST',
+                    docdet_refmode: 'APPOINTMENT'
+                }
+                let url = 'doc-details/document-upload'
+                let result = await fetch(process.env.REACT_APP_endpoint + url, {
+                    // Your POST endpoint
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: 'Bearer ' + localStorage.access_token,
+                        db_ptr: localStorage.db_ptr ? localStorage.db_ptr : process.env.REACT_APP_DB_PTR,
+
+                        // db_ptr: localStorage.db_ptr,
+                    },
+                    body: formBody ? JSON.stringify(formBody) : null
+                }).then(
+                    (result) => {
+                        return result.json();
+                    },
+                    (error) => {
+                        console.log(error);
+                        return error;
+                    },
+                    (progress) => {
+                        console.log(progress);
+                        return progress;
+                    }
+                );
+
+                if (result.message === 'success') {
+                    return result;
+                }
+            })
+        ).then((result) => {
+            // refreshing page after consent upload
+            if (result && result[0] && result[0].success) {
+                setBtnLoading(false)
+                preview(false)
+                message.success(t('File Uploaded SuccessFully'));
+                callback();
+            } else {
+                preview(false)
+                message.error(t('File Upload Failed'));
+                callback();
+            }
+        });
+    };
+
+    /**
+     * 
+     * @returns 
+     */
+    const renderContent = () => {
+        switch (currentState) {
+            case states.input:
+                return (
+                    <div>
+                        {loading ? (
+                            <Skeleton height={500} width={600} />
+                        ) : (
+                            pdfData && (
+                                <PdfViewer url={URL.createObjectURL(new Blob([pdfData], { type: 'application/pdf' }))} />
+                                // <embed src={URL.createObjectURL(new Blob([pdfData], { type: 'application/pdf' }))} width="100%" height="500" />
+                            )
+                        )}
+                        <SignatureCanvasComponent
+                            state={setCurrentState}
+                            onClear={handleClearSignature}
+                            onSaveAndAddSignature={onSaveAndAddSignature} 
+                            btnloading={btnloading}
+                        />
+
+                    </div>
+                );
+
+            case states.result:
+                return (
+                    <div>
+                        {signedPdfUrl && (
+                            <div>
+                                <h3>{t('Signed Consent')}:</h3>
+
+                                <PdfViewer url={signedPdfUrl} />
+
+                                <p>
+                                    <small><strong>Upload</strong> the signed document to complete the process </small>
+                                </p>
+
+
+                                {/* <embed src={signedPdfUrl} width="600" height="500" /> */}
+                                <Button
+                                    loading={btnloading}
+                                    style={{ borderRadius: '2px' }}
+                                    type="primary"
+                                    size="medium"
+                                    onClick={() => { onConsentUpload(pdfBase64Data) }}
+                                >
+                                    {t('Upload')}
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className="">{renderContent()}</div>
+    );
+};
+
+export default PDFSignature;

package/core/lib/components/consent/signature-pad.js

@@ -0,0 +1,90 @@
+// src/components/SignatureCanvas.js
+import { useRef } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import { Button, message } from 'antd';
+import { useTranslation } from '../../../lib';
+
+import './signature-pad.scss';
+
+
+
+const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }) => {
+    const sigCanvas = useRef({});
+    const { t, i18n } = useTranslation(); // To Translate to another language
+
+    const clear = () => {
+        sigCanvas.current.clear()
+        if (onClear) onClear();
+    };
+
+    /**
+     * 
+     * @returns 
+     */
+    const saveAndAddSignature = () => {
+        if (sigCanvas.current.isEmpty()) {
+            message.error(t('No signature found'));
+            return;
+        }
+        // Get the signature as a data URL
+        const signatureData = sigCanvas.current.toDataURL('image/png');
+        if (onSaveAndAddSignature) {
+            // Pass the signature data immediately
+            onSaveAndAddSignature(signatureData);
+        }
+    };
+
+    return (
+        <div className='signature-pad'>
+            <SignatureCanvas
+                ref={sigCanvas}
+                canvasProps={{
+                    width: 600,
+                    height: 200,
+                    className: 'sigCanvas',
+                    style: { border: '1px solid black' }
+                }}
+            />
+
+            <p>
+                <small>Click<strong> Save </strong>to add signature and save the document</small>
+            </p>
+
+            <div className='signature-actions'>
+                <div className='left'>
+                    <Button
+                        loading={btnloading}
+                        style={{ borderRadius: '2px', marginRight: '4px' }}
+                        type="primary"
+                        size="medium"
+                        onClick={saveAndAddSignature}
+                    >
+                        {t('Save')}
+                    </Button>
+                    <Button
+                        style={{ borderRadius: '2px' }}
+                        type="secondary"
+                        size="medium"
+                        onClick={clear}
+                    >
+                        {t('Clear')}
+                    </Button>
+
+                </div>
+                {/* 
+                <Button
+                    loading={btnloading}
+                    style={{ borderRadius: '2px' }}
+                    type="primary"
+                    size="medium"
+                    onClick={addSignatureToPdf}
+                >
+                    {t('Add Signature')}
+                </Button> */}
+            </div>
+        </div>
+
+    );
+};
+
+export default SignatureCanvasComponent;

package/core/lib/components/consent/signature-pad.scss

@@ -0,0 +1,14 @@
+.signature-pad {
+    padding: 20px;
+
+    .signature-actions {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        margin-top: 10px;
+        .left {
+            display: flex;
+            gap: 10px;
+        }
+    }
+}

package/core/lib/components/file-upload/file-upload.js

@@ -0,0 +1,133 @@
+/**
+ * @author Hasna
+ * @description Handles upload of file
+ * @version
+ *
+ * autoUpload:true - We use the flag to control if the files has to be auto uploaded to any cloud storage - For use in firebase projects.
+ * server:'firebase/s3/local'
+ * path:'',
+ * multiple:true,
+ *
+ *
+ */
+import React, { useState } from 'react'
+
+import { message, Upload } from 'antd'
+
+import { PlusOutlined } from '@ant-design/icons'
+
+import FirebaseUtils from './../../utils/firebase.utils'
+
+export default function FileUpload({
+  callback,
+  maxSize = 3,
+  initial = [],
+  onChange,
+  autoUpload,
+}) {
+  // Variable to save the files
+  const [files, setFiles] = useState(initial)
+
+  /**
+   * '
+   */
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  )
+
+  /**
+   *
+   */
+  const uploadProps = {
+    onRemove: (file) => {
+      var index = files.indexOf(file)
+
+      var newFileList = files.slice()
+
+      newFileList.splice(index, 1)
+
+      setFiles(newFileList)
+    },
+    onChange(info) {
+      if (info.file.status !== 'uploading') {
+        // console.log(info.file, info.fileList);
+      }
+
+      if (info.file.status === 'done' && autoUpload) {
+        message.success(`${info.file.name} file uploaded successfully`)
+      } else if (info.file.status === 'error' && autoUpload) {
+        message.error(`${info.file.name} file upload failed.`)
+      }
+    },
+    beforeUpload: (file) => {
+      // Uploading to firebase
+
+      if (autoUpload) {
+        var random = {
+          customerName:
+            'CustomerDocument' + Math.round(Math.random() * 1000000),
+        }
+
+        FirebaseUtils.uploadAttachment(file, random, '/collections').then(
+          (result) => {
+            let file = {
+              uid: random.customerName,
+              name: random.customerName,
+              status: 'done',
+              url: result.url,
+              type: result.meta.contentType,
+            }
+
+            files.push(file)
+
+            if (callback) {
+              if (maxSize > 1) {
+                callback(files)
+              } else {
+                callback(files[0])
+              }
+            } else {
+              if (maxSize > 1) {
+                onChange(files)
+              } else {
+                onChange(files[0])
+              }
+            }
+
+            setFiles([...files])
+          },
+        )
+        return false
+      }
+      // Uploading to aws or localpath
+      else {
+        files.push(file)
+
+        // onChange(files)
+
+        setFiles([...files])
+
+        callback(files)
+      }
+    },
+    files,
+  }
+
+  return (
+    <div>
+      <>
+        <Upload
+          {...uploadProps}
+          listType="picture-card"
+          fileList={files}
+          // onChange={handleChange}
+        >
+          {files.length >= maxSize ? null : uploadButton}
+        </Upload>
+      </>
+    </div>
+  )
+}