Pi Bakery
+
+ 
+
+
+ {/* --- SEARCH BAR BARU --- */}
+
+
+
+
-
+ {/* Tombol Sign in/out */}
+
{props.user === null ? (
) : (
diff --git a/frontend/src/Shop/components/ProductCard.css b/frontend/src/Shop/components/ProductCard.css
new file mode 100644
index 00000000..0ac4b160
--- /dev/null
+++ b/frontend/src/Shop/components/ProductCard.css
@@ -0,0 +1,157 @@
+/* --- ProductCard.css (Lengkap & Diperbaiki) --- */
+
+:root {
+ --primary-blue: #0047ab;
+ --accent-yellow: #ffd700;
+ --white-bg: #ffffff;
+ --text-dark: #333333;
+ --text-medium: #666666;
+ --text-light: #999999;
+ --sale-red: #d9534f;
+}
+
+/* --- Keyframe DIHAPUS dari sini --- */
+
+.product-card {
+ font-family: Arial, sans-serif;
+ border: 1px solid #e0e0e0;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+ background: var(--white-bg);
+ display: flex;
+ flex-direction: column;
+
+ /* --- INI BAGIAN PENTING UNTUK HOVER --- */
+ /* State awal transform (tidak bergerak) */
+ transform: translateY(0);
+ /* Transisi untuk hover (TIDAK ADA KONFLIK LAGI) */
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+ /* Layout, Grid, dan Animasi Load DIHAPUS dari sini */
+
+ /* Pastikan kartu mengisi wrapper-nya */
+ height: 100%;
+ box-sizing: border-box;
+}
+
+/* --- Animasi Hover (SEKARANG AKAN BEKERJA) --- */
+.product-card:hover {
+ transform: translateY(-5px) scale(1.03);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+ z-index: 10;
+}
+
+/* --- Konten Kartu (TETAP SAMA) --- */
+.product-image-container {
+ position: relative;
+ width: 100%;
+ padding-top: 100%;
+ overflow: hidden;
+ border-bottom: 1px solid #eee;
+}
+
+.product-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.product-alert {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background-color: var(--accent-yellow);
+ color: var(--text-dark);
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-size: 0.8em;
+ font-weight: bold;
+ z-index: 1;
+ text-transform: uppercase;
+}
+
+.product-info {
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.product-type {
+ font-size: 0.8em;
+ color: var(--text-medium);
+ margin-bottom: 5px;
+ text-transform: capitalize;
+}
+
+.product-info h3 {
+ font-size: 1.2em;
+ font-weight: 600;
+ color: var(--text-dark);
+ margin: 0 0 8px 0;
+ min-height: 40px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.product-rating {
+ margin-bottom: 10px;
+ color: var(--accent-yellow);
+ font-size: 1em;
+ display: flex;
+ align-items: center;
+}
+.product-rating span {
+ margin-right: 2px;
+}
+.product-rating .rating-value {
+ color: var(--text-medium);
+ font-size: 0.9em;
+ margin-left: 5px;
+}
+
+.product-price {
+ margin-top: auto;
+ margin-bottom: 15px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+}
+
+.product-price-original {
+ font-size: 0.9em;
+ color: var(--text-light);
+ text-decoration: line-through;
+}
+
+.product-price-discount {
+ font-size: 1.4em;
+ font-weight: bold;
+ color: var(--sale-red);
+}
+
+.product-action-button {
+ background-color: var(--primary-blue);
+ color: var(--white-bg);
+ border: none;
+ padding: 12px;
+ border-radius: 5px;
+ font-size: 0.9em;
+ font-weight: bold;
+ cursor: pointer;
+ text-align: center;
+ transition: background-color 0.2s ease;
+ width: 100%;
+}
+
+.product-action-button:hover {
+ background-color: #003788;
+}
+
+/* --- Media Queries DIHAPUS dari sini --- */
diff --git a/frontend/src/Shop/components/ProductCard.tsx b/frontend/src/Shop/components/ProductCard.tsx
index db1c31ce..78b24539 100644
--- a/frontend/src/Shop/components/ProductCard.tsx
+++ b/frontend/src/Shop/components/ProductCard.tsx
@@ -1,34 +1,95 @@
-import React from 'react';
+// --- ProductCard.tsx ---
+
+import React from "react";
+import "./ProductCard.css";
interface Props {
- name: string,
- description: string,
- price: number,
- pictureCaption: string,
- pictureURL: string,
- onClickBuy: () => void,
+ name: string;
+ description: string;
+ pictureURL: string;
+ onClickBuy: () => void;
+ productType: string;
+ rating: number;
+ price: number;
+ originalPrice?: number;
+ alertText?: string;
+ buttonText?: string;
+
+ // --- TAMBAHKAN PROPS INI ---
+ style?: React.CSSProperties;
}
+// ... (Fungsi renderRating Anda tetap sama) ...
+const renderRating = (rating: number) => {
+ const totalStars = 5;
+ let stars = [];
+ for (let i = 1; i <= totalStars; i++) {
+ if (i <= Math.floor(rating)) {
+ stars.push(
+
+ ★
+
+ );
+ } else {
+ stars.push(
+
+ ★
+
+ );
+ }
+ }
+ return (
+ <>
+ {stars}
+ ({rating.toFixed(1)})
+
+ );
+};
+
export default function ProductCard(props: Props) {
+ const {
+ name,
+ pictureURL,
+ onClickBuy,
+ productType,
+ rating,
+ price,
+ originalPrice,
+ alertText,
+ buttonText,
+ // --- AMBIL PROPS STYLE ---
+ style,
+ } = props;
+
+ const displayPrice = price;
+ const displayOriginalPrice = originalPrice !== undefined ? originalPrice : undefined;
+
return (
-
- @{props.user.username}
+ @{props.user.username}{" "}
+
)}
-
-
- 
-
+ // --- TERAPKAN STYLE DI SINI ---
+
+
+ {/* ... (sisa kode Anda tetap sama) ... */}
+ {alertText && 
+
+
+ {alertText}
}
+
+ {/* ... (sisa kode Anda tetap sama) ... */}
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/Shop/components/SignIn.css b/frontend/src/Shop/components/SignIn.css
new file mode 100644
index 00000000..59c87c15
--- /dev/null
+++ b/frontend/src/Shop/components/SignIn.css
@@ -0,0 +1,100 @@
+/* --- SignIn.css --- */
+
+:root {
+ --primary-blue: #0047ab;
+ --accent-yellow: #ffd700;
+ --white-bg: #ffffff;
+ --text-dark: #333333;
+}
+
+/* Overlay gelap di belakang modal */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.6); /* Sedikit lebih gelap */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000; /* Pastikan di atas semua elemen lain */
+}
+
+/* Kontainer utama modal */
+.modal-content {
+ background-color: var(--white-bg);
+ padding: 30px;
+ border-radius: 12px; /* Sudut lebih bulat */
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Bayangan lebih dalam */
+ text-align: center;
+ max-width: 400px; /* Lebar maksimum modal */
+ width: 90%; /* Responsif */
+ transform: translateY(-20px); /* Sedikit geser ke atas untuk efek */
+ animation: modal-fade-in 0.3s forwards; /* Animasi muncul */
+}
+
+/* Animasi muncul modal */
+@keyframes modal-fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(-40px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.modal-content h2 {
+ color: var(--primary-blue); /* Judul warna biru */
+ font-size: 1.8em;
+ margin-bottom: 15px;
+}
+
+.modal-content p {
+ color: var(--text-dark);
+ font-size: 1.1em;
+ line-height: 1.5;
+ margin-bottom: 25px;
+}
+
+.modal-buttons {
+ display: flex;
+ gap: 15px; /* Jarak antar tombol */
+ justify-content: center;
+}
+
+.modal-button {
+ padding: 12px 25px;
+ border-radius: 8px;
+ font-size: 1em;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.2s ease, color 0.2s ease;
+ flex: 1; /* Agar tombol memiliki lebar yang sama */
+ max-width: 150px;
+}
+
+.modal-button.primary {
+ background-color: var(--primary-blue);
+ color: var(--white-bg);
+ border: 2px solid var(--primary-blue);
+}
+
+.modal-button.primary:hover {
+ background-color: #003788;
+ border-color: #003788;
+}
+
+.modal-button.secondary {
+ background-color: transparent;
+ color: var(--text-dark);
+ border: 2px solid #ccc;
+}
+
+.modal-button.secondary:hover {
+ background-color: #f0f0f0;
+ color: var(--text-dark);
+ border-color: #aaa;
+}
diff --git a/frontend/src/Shop/components/SignIn.tsx b/frontend/src/Shop/components/SignIn.tsx
index 1286a9b2..83044f8a 100644
--- a/frontend/src/Shop/components/SignIn.tsx
+++ b/frontend/src/Shop/components/SignIn.tsx
@@ -1,32 +1,32 @@
-import React, { CSSProperties } from 'react';
+// --- SignIn.tsx ---
-interface Props {
- onSignIn: () => void,
- onModalClose: () => void,
-}
+import React from "react";
+import "./SignIn.css"; // <- Impor file CSS baru Anda
-const modalStyle: CSSProperties = {
- background: 'white',
- position: 'absolute',
- left: '15vw',
- top: '40%',
- width: '70vw',
- height: '25vh',
- border: '1px solid black',
- textAlign: 'center',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center'
+interface Props {
+ onSignIn: () => void;
+ onModalClose: () => void;
}
export default function SignIn(props: Props) {
return (
- {productType}
+
+ {name}
+ +{renderRating(rating)}
-
-
- {props.name}
-{props.description}
+
+ {displayOriginalPrice !== undefined && {displayOriginalPrice} Test Coin}
+ {displayPrice} Test Coin
-
- {props.price} Test-π
- +
-
- {props.pictureCaption}
- +
-
You need to sign in first.
-
-
-
+ (null);
const [showModal, setShowModal] = useState(false);
+ const [searchQuery, setSearchQuery] = useState("");
+ // --- SEMUA FUNGSI (LENGKAP) ---
const signIn = async () => {
- const scopes = ['username', 'payments'];
+ const scopes = ["username", "payments"];
const authResult: AuthResult = await window.Pi.authenticate(scopes, onIncompletePaymentFound);
signInUser(authResult);
setUser(authResult.user);
- }
-
+ };
const signOut = () => {
setUser(null);
signOutUser();
- }
-
+ };
const signInUser = (authResult: AuthResult) => {
- axiosClient.post('/user/signin', {authResult});
+ axiosClient.post("/user/signin", { authResult });
return setShowModal(false);
- }
-
+ };
const signOutUser = () => {
- return axiosClient.get('/user/signout');
- }
-
+ return axiosClient.get("/user/signout");
+ };
const onModalClose = () => {
setShowModal(false);
- }
-
+ };
const orderProduct = async (memo: string, amount: number, paymentMetadata: MyPaymentMetadata) => {
- if(user === null) {
+ if (user === null) {
return setShowModal(true);
}
const paymentData = { amount, memo, metadata: paymentMetadata };
- const callbacks = {
- onReadyForServerApproval,
- onReadyForServerCompletion,
- onCancel,
- onError
- };
+ const callbacks = { onReadyForServerApproval, onReadyForServerCompletion, onCancel, onError };
const payment = await window.Pi.createPayment(paymentData, callbacks);
console.log(payment);
- }
-
+ };
const onIncompletePaymentFound = (payment: PaymentDTO) => {
console.log("onIncompletePaymentFound", payment);
- return axiosClient.post('/payments/incomplete', {payment});
- }
-
+ return axiosClient.post("/payments/incomplete", { payment });
+ };
const onReadyForServerApproval = (paymentId: string) => {
console.log("onReadyForServerApproval", paymentId);
- axiosClient.post('/payments/approve', {paymentId}, config);
- }
-
+ axiosClient.post("/payments/approve", { paymentId }, config);
+ };
const onReadyForServerCompletion = (paymentId: string, txid: string) => {
console.log("onReadyForServerCompletion", paymentId, txid);
- axiosClient.post('/payments/complete', {paymentId, txid}, config);
- }
-
+ axiosClient.post("/payments/complete", { paymentId, txid }, config);
+ };
const onCancel = (paymentId: string) => {
console.log("onCancel", paymentId);
- return axiosClient.post('/payments/cancelled_payment', {paymentId});
- }
-
+ return axiosClient.post("/payments/cancelled_payment", { paymentId });
+ };
const onError = (error: Error, payment?: PaymentDTO) => {
console.log("onError", error);
if (payment) {
console.log(payment);
- // handle the error accordingly
}
- }
+ };
+ const handleSearchChange = (event: React.ChangeEvent) => {
+ setSearchQuery(event.target.value);
+ };
+ const filteredProducts = allProducts.filter((product) => product.name.toLowerCase().includes(searchQuery.toLowerCase()) || product.productType.toLowerCase().includes(searchQuery.toLowerCase()));
+ // --- AKHIR DARI FUNGSI ---
return (
<>
-
-
- orderProduct("Order Apple Pie", 3, { productId: 'apple_pie_1' })}
- />
- orderProduct("Order Lemon Meringue Pie", 5, { productId: 'lemon_pie_1' })}
- />
-
- { showModal &&
,
- document.getElementById('root')
-);
\ No newline at end of file
+ document.getElementById("root")
+);
+ {" "}
+ {/* Klik di luar modal untuk menutup */}
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/frontend/src/Shop/index.tsx b/frontend/src/Shop/index.tsx
index da9ece8f..73794f64 100644
--- a/frontend/src/Shop/index.tsx
+++ b/frontend/src/Shop/index.tsx
@@ -1,152 +1,209 @@
-import React, {useState} from 'react';
-import axios from 'axios';
-import ProductCard from './components/ProductCard';
-import SignIn from './components/SignIn';
-import Header from './components/Header';
+// --- index.tsx ---
-type MyPaymentMetadata = {};
+import React, { useState } from "react";
+import axios from "axios";
+// Hapus impor motion jika masih ada
+
+import ProductCard from "./components/ProductCard";
+import SignIn from "./components/SignIn";
+import Header from "./components/Header";
+import "./App.css"; // Pastikan App.css diimpor
+// --- TIPE DATA LENGKAP ---
+type MyPaymentMetadata = {};
type AuthResult = {
- accessToken: string,
+ accessToken: string;
user: {
- uid: string,
- username: string
- }
+ uid: string;
+ username: string;
+ };
};
-
-export type User = AuthResult['user'];
-
+export type User = AuthResult["user"];
interface PaymentDTO {
- amount: number,
- user_uid: string,
- created_at: string,
- identifier: string,
- metadata: Object,
- memo: string,
+ amount: number;
+ user_uid: string;
+ created_at: string;
+ identifier: string;
+ metadata: Object;
+ memo: string;
status: {
- developer_approved: boolean,
- transaction_verified: boolean,
- developer_completed: boolean,
- cancelled: boolean,
- user_cancelled: boolean,
- },
- to_address: string,
+ developer_approved: boolean;
+ transaction_verified: boolean;
+ developer_completed: boolean;
+ cancelled: boolean;
+ user_cancelled: boolean;
+ };
+ to_address: string;
transaction: null | {
- txid: string,
- verified: boolean,
- _link: string,
- },
-};
-
-// Make TS accept the existence of our window.__ENV object - defined in index.html:
+ txid: string;
+ verified: boolean;
+ _link: string;
+ };
+}
interface WindowWithEnv extends Window {
__ENV?: {
- backendURL: string, // REACT_APP_BACKEND_URL environment variable
- sandbox: "true" | "false", // REACT_APP_SANDBOX_SDK environment variable - string, not boolean!
- }
+ backendURL: string;
+ sandbox: "true" | "false";
+ };
}
+// --- KONFIGURASI LENGKAP ---
const _window: WindowWithEnv = window;
const backendURL = _window.__ENV && _window.__ENV.backendURL;
-const axiosClient = axios.create({ baseURL: `${backendURL}`, timeout: 20000, withCredentials: true});
-const config = {headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}};
-
+const axiosClient = axios.create({ baseURL: `${backendURL}`, timeout: 20000, withCredentials: true });
+const config = { headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" } };
+
+// --- DATA PRODUK LENGKAP ---
+const allProducts = [
+ {
+ id: "camera_001",
+ name: "Camera DSLR Pro",
+ description: "Kamera DSLR profesional untuk hasil foto yang menakjubkan.",
+ pictureURL: "https://images.pexels.com/photos/1010492/pexels-photo-1010492.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+ productType: "Elektronik",
+ rating: 4.9,
+ price: 1000,
+ originalPrice: 1500,
+ alertText: "Sale!",
+ buttonText: "Add to Cart",
+ },
+ {
+ id: "pc_gaming_001",
+ name: "Gaming PC Ultimate",
+ description: "Komputer gaming berperforma tinggi dengan GPU terbaru.",
+ pictureURL: "https://images.pexels.com/photos/4096956/pexels-photo-4096956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+ productType: "Komputer",
+ rating: 4.8,
+ price: 4000,
+ originalPrice: 5000,
+ alertText: "Diskon 20%",
+ buttonText: "Add to Cart",
+ },
+ {
+ id: "earphone_001",
+ name: "Wireless Earphone",
+ description: "Earphone nirkabel dengan kualitas suara premium dan noise cancellation.",
+ pictureURL: "https://images.pexels.com/photos/3785084/pexels-photo-3785084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+ productType: "Aksesoris",
+ rating: 4.5,
+ price: 1500,
+ originalPrice: 2000,
+ alertText: "Sale!",
+ buttonText: "Add to Cart",
+ },
+ {
+ id: "laptop_001",
+ name: "Ultrabook Laptop",
+ description: "Laptop tipis dan ringan, cocok untuk produktivitas sehari-hari.",
+ pictureURL: "https://images.pexels.com/photos/7974/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+ productType: "Komputer",
+ rating: 4.6,
+ price: 2000,
+ originalPrice: 2500,
+ alertText: "Hemat!",
+ buttonText: "Add to Cart",
+ },
+];
export default function Shop() {
const [user, setUser] = useState e.stopPropagation()}>
+ {" "}
+ {/* Mencegah penutupan saat klik di dalam modal */}
+
Login Diperlukan
+Anda perlu masuk (sign in) terlebih dahulu untuk melanjutkan pembelian ini.
+
+
+
+
+ {filteredProducts.map((product, index) => (
+ /* --- INI PERUBAHANNYA --- */
+ /* Kita tambahkan wrapper div untuk menangani layout dan animasi load */
+
+
+ {showModal &&
+ orderProduct(`Order ${product.name}`, product.price, { productId: product.id })}
+ productType={product.productType}
+ rating={product.rating}
+ price={product.price}
+ originalPrice={product.originalPrice}
+ alertText={product.alertText}
+ buttonText={product.buttonText}
+ />
+
+ /* --- AKHIR PERUBAHAN --- */
+ ))}
+
+ {filteredProducts.length === 0 && (
+
+
+ )}
+ Produk tidak ditemukan
+Coba kata kunci lain untuk "{searchQuery}"
+