Update Kiosk.tsx

zktx-io · Feb 21, 2025 · b4df25e · b4df25e
1 parent e7f8b06
commit b4df25e
Showing 1 changed file with 87 additions and 26 deletions.
diff --git a/packages/demo/src/pages/Kiosk.tsx b/packages/demo/src/pages/Kiosk.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 import { Transaction } from '@mysten/sui/transactions';
 import { useWalrusWallet } from '@zktx.io/walrus-wallet';
-import { enqueueSnackbar } from 'notistack';
 
 interface Item {
   id: number;
@@ -20,6 +20,9 @@ const menuItems: Item[] = [
 
 export const Kiosk = () => {
   const [cart, setCart] = useState<Item[]>([]);
+  const [orderedItems, setOrderedItems] = useState<Item[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [txDigest, setTxDigest] = useState<string | null>(null);
   const { pay } = useWalrusWallet();
 
   const addToCart = (item: Item) => {
@@ -46,34 +49,24 @@ export const Kiosk = () => {
           ),
         ],
       });
+
       const txResult = await pay('Pay', 'Please scan the QR code to pay.', {
         transactions: [transaction],
         isSponsored: true,
       });
-      enqueueSnackbar(txResult[0].digest, {
-        variant: 'success',
-        style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
-      });
+
+      setTxDigest(txResult[0].digest);
+      setOrderedItems(cart); // 결제 완료 후 주문 내역 저장
+      setIsModalOpen(true);
       setCart([]);
     } catch (error) {
-      enqueueSnackbar(`${error}`, {
-        variant: 'error',
-        style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
-      });
+      alert(`Payment failed: ${error}`);
     }
   };
 
   return (
     <div className="flex flex-col items-center p-4">
-      <h1 className="text-2xl font-bold mb-4">McDonald's Kiosk</h1>
+      <h1 className="text-2xl font-bold text-black mb-4">McDonald's Kiosk</h1>
       <div className="grid grid-cols-2 gap-4 mb-6">
         {menuItems.map((item) => (
           <button
@@ -86,21 +79,29 @@ export const Kiosk = () => {
               alt={item.name}
               className="w-[829px] object-contain mb-4 transform transition-transform duration-300 hover:scale-105"
             />
-            <span>{item.name}</span>
-            <span>{item.price.toLocaleString()} KRW</span>
+            <span className="text-black">{item.name}</span>
+            <span className="text-gray-600">
+              {item.price.toLocaleString()} KRW
+            </span>
           </button>
         ))}
       </div>
       <div className="w-full max-w-md p-4 border rounded-lg shadow-md">
-        <h2 className="text-xl font-bold">Cart</h2>
+        <h2 className="text-xl font-bold text-black">Cart</h2>
         {cart.length === 0 ? (
-          <p className="text-gray-500">Your cart is empty.</p>
+          <p className="text-gray-600">Your cart is empty.</p>
         ) : (
           <ul>
             {cart.map((item, index) => (
-              <li key={index} className="flex justify-between items-center">
+              <li
+                key={index}
+                className="flex justify-between items-center text-black"
+              >
                 <span>
-                  {item.name} - {item.price.toLocaleString()} KRW
+                  {item.name} -{' '}
+                  <span className="text-gray-600">
+                    {item.price.toLocaleString()} KRW
+                  </span>
                 </span>
                 <button
                   className="ml-2 px-2 py-1 cursor-pointer border border-transparent transition-all duration-300 hover:border-red-500 hover:bg-transparent hover:text-red-500"
@@ -112,8 +113,11 @@ export const Kiosk = () => {
             ))}
           </ul>
         )}
-        <p className="font-bold mt-2">
-          Total: {getTotalPrice().toLocaleString()} KRW
+        <p className="font-bold mt-2 text-black">
+          Total:{' '}
+          <span className="text-gray-600">
+            {getTotalPrice().toLocaleString()} KRW
+          </span>
         </p>
         <button
           disabled={cart.length === 0}
@@ -123,6 +127,63 @@ export const Kiosk = () => {
           Checkout
         </button>
       </div>
+
+      <AnimatePresence>
+        {isModalOpen && (
+          <div
+            className="fixed inset-0 flex items-center justify-center"
+            style={{
+              backgroundColor: '#00000099',
+              backdropFilter: 'blur(4px)',
+            }}
+          >
+            <motion.div
+              initial={{ y: 100, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: 100, opacity: 0 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+              className="bg-white p-6 rounded-lg shadow-lg text-center max-w-md"
+            >
+              <h2 className="text-xl font-bold text-black mb-4">
+                Payment Successful!
+              </h2>
+              <p className="text-black">Transaction ID:</p>
+              <p className="text-sm break-all text-gray-600 mb-4">{txDigest}</p>
+              <h3 className="text-lg font-semibold text-black mb-2">
+                Your Order
+              </h3>
+              <ul className="text-left mb-4">
+                {orderedItems.map((item, index) => (
+                  <li
+                    key={index}
+                    className="flex justify-between items-center border-b py-2 text-black"
+                  >
+                    <span>{item.name}</span>
+                    <span className="text-gray-600">
+                      {item.price.toLocaleString()} KRW
+                    </span>
+                  </li>
+                ))}
+              </ul>
+              <p className="font-bold text-lg text-black">
+                Total:{' '}
+                <span className="text-gray-600">
+                  {orderedItems
+                    .reduce((acc, item) => acc + item.price, 0)
+                    .toLocaleString()}{' '}
+                  KRW
+                </span>
+              </p>
+              <button
+                className="mt-4 bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-all duration-300"
+                onClick={() => setIsModalOpen(false)}
+              >
+                Close
+              </button>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };