first commit

public/assets/js/thankyou.js

@@ -0,0 +1,171 @@
+jQuery(function($){
+
+    $(document).on('click', '.formipay-copy-button', function() {
+        var $this = $(this);
+        var copiedtext = $(this).prev('p').attr("data-copy-value");
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(copiedtext)
+                .then(() => {
+                    $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-copied-text'));
+                    setTimeout(() => {
+                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+                    }, 1200);
+                })
+                .catch((error) => {
+                    $this.html('<i class="bi bi-exclamation-circle-fill"></i> '+$this.attr('data-not-copied-text'));
+                    setTimeout(() => {
+                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+                    }, 1200);
+                });
+        } else {
+            $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-not-copied-text'));
+            setTimeout(() => {
+                $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+            }, 1200);
+        }
+
+    });
+
+    // Store a reference to the file input element
+    let fileInput;
+    let thumbnailPreview;
+    let previewImage;
+
+    function initializeUploadFunctionality() {
+        const dropzoneArea = $('#dropzoneArea');
+        fileInput = $('#fileInput');
+        thumbnailPreview = $('#thumbnailPreview');
+        previewImage = $('#previewImage');
+
+        fileInput.hide();
+        thumbnailPreview.hide();
+
+        // Click event to open file selector
+        dropzoneArea.on('click', function(event) {
+            if (!$(event.target).is(fileInput)) {
+                fileInput.trigger('click');
+            }
+        });
+
+        // Change event for file input
+        fileInput.on('change', handleFileSelect);
+
+        // Drag and drop events
+        dropzoneArea.on('dragover', function(e) {
+            e.preventDefault(); // Prevent default behavior
+            e.stopPropagation();
+            dropzoneArea.addClass('dragging'); // Add class to change style on drag
+        });
+
+        dropzoneArea.on('dragleave', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzoneArea.removeClass('dragging'); // Remove class on drag leave
+        });
+
+        dropzoneArea.on('drop', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropzoneArea.removeClass('dragging'); // Remove class on drop
+            const files = e.originalEvent.dataTransfer.files; // Get dropped files
+            if (files.length > 0) {
+                fileInput[0].files = files; // Assign files to input
+                handleFileSelect(); // Trigger file selection handling
+            }
+        });
+
+        // Submit event for the form
+        $('#uploadForm').on('submit', function(e) {
+            e.preventDefault();
+            const formData = new FormData(this);
+            
+            $.ajax({
+                url: formipay_thankyou.ajax_url, // Adjust if necessary
+                type: 'POST',
+                data: formData,
+                contentType: false,
+                processData: false,
+                beforeSend: function() {
+                    $('#uploadForm').block({ message: 'Uploading order receipt...' });
+                },
+                success: function(response) {
+                    // Handle success
+                    let timerInterval;
+                    Swal.fire({
+                        html: response.data.message,
+                        icon: response.data.icon,
+                        timer: 2500,
+                        timerProgressBar: true,
+                        didOpen: () => {
+                            Swal.showLoading();
+                            const timer = Swal.getPopup().querySelector("b");
+                            timerInterval = setInterval(() => {
+                            timer.textContent = `${Swal.getTimerLeft()}`;
+                            }, 100);
+                        },
+                        willClose: () => {
+                            clearInterval(timerInterval);
+                        },
+                        allowOutsideClick: false,
+                        allowEscapeKey: false,
+                        showCloseButton: false,
+                    }).then((result) => {
+                        if (result.dismiss === Swal.DismissReason.timer) {
+                            window.location.reload();
+                        }
+                    });
+                },
+                error: function(xhr, status, error) {
+                    // Handle error
+                    console.error('AJAX Error:', error);
+                }
+            });
+        });
+    }
+
+    // Function to handle file selection and preview
+    function handleFileSelect() {
+        const file = fileInput[0].files[0];
+        
+        if (file) {
+            const validTypes = ['image/jpeg', 'image/png'];
+            const maxFileSize = 1 * 1024 * 1024; // 1 MB in bytes
+
+            // Check file type and size
+            if (validTypes.indexOf(file.type) === -1) {
+                // alert('Please upload a JPG or PNG file.');
+                Swal.fire({
+                    icon: 'info',
+                    html: 'Please upload a JPG or PNG file.'
+                });
+                fileInput.val(''); // Clear the input
+                thumbnailPreview.hide();
+                thumbnailPreview.siblings('.bi').show();
+                return;
+            }
+
+            if (file.size > maxFileSize) {
+                // alert('File size must be less than 1 MB.');
+                Swal.fire({
+                    icon: 'info',
+                    html: 'File size must be less than 1 MB.'
+                });
+                fileInput.val(''); // Clear the input
+                thumbnailPreview.hide();
+                thumbnailPreview.siblings('.bi').show();
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                previewImage.attr('src', e.target.result);
+                thumbnailPreview.show();
+                thumbnailPreview.siblings('.bi').hide();
+            }
+            reader.readAsDataURL(file);
+        }
+    }
+
+    initializeUploadFunctionality();
+
+});