main: added inital version of music shop

Signed-off-by: nfel <nfilsaraee@gmail.com>
2025-11-20 14:42:58 +03:30
commit 8a7842e263
25 changed files with 8820 additions and 0 deletions
@@ -0,0 +1,145 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { FaCheckCircle, FaTimes, FaDownload } from 'react-icons/fa';
+import { Album, Purchase } from '@/lib/types';
+
+interface PurchaseSuccessModalProps {
+  show: boolean;
+  album: Album | null;
+  purchase: Purchase | null;
+  onClose: () => void;
+}
+
+export default function PurchaseSuccessModal({ show, album, purchase, onClose }: PurchaseSuccessModalProps) {
+  if (!album || !purchase) return null;
+
+  const handleDownloadReceipt = () => {
+    // Create a simple text receipt
+    const receipt = `
+PURCHASE RECEIPT
+================
+
+Album: ${album.title}
+Artist: Parsa
+Price: $${album.price}
+Transaction ID: ${purchase.transactionId}
+Date: ${new Date(purchase.purchaseDate).toLocaleString()}
+
+Tracks Included:
+${album.songs.map((song, idx) => `${idx + 1}. ${song.title} (${song.duration})`).join('\n')}
+
+Thank you for your purchase!
+You now have full access to this album.
+`;
+
+    const blob = new Blob([receipt], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `receipt-${purchase.transactionId}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+          onClick={onClose}
+        >
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0, y: 20 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.9, opacity: 0, y: 20 }}
+            onClick={(e) => e.stopPropagation()}
+            className="glass-effect rounded-2xl max-w-lg w-full p-8 border-2 border-accent-cyan/30"
+          >
+            {/* Header */}
+            <div className="flex items-start justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-green-500/20 rounded-full">
+                  <FaCheckCircle className="text-3xl text-green-400" />
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-white">
+                    Purchase Successful!
+                  </h2>
+                  <p className="text-sm text-gray-400">Thank you for your purchase</p>
+                </div>
+              </div>
+              <button
+                onClick={onClose}
+                className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                aria-label="Close"
+              >
+                <FaTimes className="text-xl text-gray-400" />
+              </button>
+            </div>
+
+            {/* Receipt Details */}
+            <div className="space-y-4 mb-6">
+              <div className="p-4 bg-white/5 rounded-lg space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-400">Album</span>
+                  <span className="text-white font-semibold">{album.title}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-400">Artist</span>
+                  <span className="text-white font-semibold">Parsa</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-400">Tracks</span>
+                  <span className="text-white font-semibold">{album.songs.length} songs</span>
+                </div>
+                <div className="border-t border-white/10 pt-3 flex justify-between">
+                  <span className="text-gray-400">Total Paid</span>
+                  <span className="text-accent-orange font-bold text-xl">${album.price}</span>
+                </div>
+              </div>
+
+              <div className="p-4 bg-accent-cyan/10 border border-accent-cyan/30 rounded-lg">
+                <p className="text-xs text-gray-400 mb-1">Transaction ID</p>
+                <p className="text-sm font-mono text-accent-cyan">{purchase.transactionId}</p>
+                <p className="text-xs text-gray-500 mt-2">
+                  {new Date(purchase.purchaseDate).toLocaleString()}
+                </p>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="space-y-3">
+              <button
+                onClick={handleDownloadReceipt}
+                className="w-full py-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg font-semibold text-white transition-all flex items-center justify-center gap-2"
+              >
+                <FaDownload />
+                Download Receipt
+              </button>
+
+              <motion.button
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                onClick={onClose}
+                className="w-full py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan"
+              >
+                Start Listening
+              </motion.button>
+            </div>
+
+            {/* Info */}
+            <p className="text-xs text-gray-500 text-center mt-6">
+              You now have unlimited access to all tracks in this album
+            </p>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}