BESCHREIBUNG
@@ -415,8 +446,20 @@ function ProductDetailContent({ perfumeSlug }) {
- SAMPLE BESTELLEN – CHF 12
- DISCOVERY SET – CHF 48
+
+ addToCart(`${perfume.slug}-sample`, 1, `${perfume.name} Sample added.`).catch(() => {})
+ }
+ >
+ SAMPLE BESTELLEN – {perfume.prices.sample}
+
+ addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {})}
+ >
+ DISCOVERY SET – CHF 48
+
@@ -430,4 +473,4 @@ function ProductDetailPage() {
return
;
}
-export default ProductDetailPage;
\ No newline at end of file
+export default ProductDetailPage;
diff --git a/parfum-shop/src/components/SharedNavbar.jsx b/parfum-shop/src/components/SharedNavbar.jsx
new file mode 100644
index 0000000..c722ab1
--- /dev/null
+++ b/parfum-shop/src/components/SharedNavbar.jsx
@@ -0,0 +1,33 @@
+import { Link } from "react-router";
+import { useShop } from "../shop/useShop";
+import "../style/navbar.css";
+
+function SharedNavbar({ variant = "light", active = "" }) {
+ const { cart, openCart, openProfile, user } = useShop();
+ const cartLabel =
+ cart.total_quantity > 0 ? `Cart ${cart.total_quantity}` : "Cart";
+
+ return (
+
+
+
+ {cartLabel}
+
+
+ {user ? "Profile" : "Profile"}
+
+
+
+ );
+}
+
+export default SharedNavbar;
diff --git a/parfum-shop/src/components/ShopDrawer.css b/parfum-shop/src/components/ShopDrawer.css
new file mode 100644
index 0000000..bb170ab
--- /dev/null
+++ b/parfum-shop/src/components/ShopDrawer.css
@@ -0,0 +1,495 @@
+.drawer-backdrop {
+ position: fixed;
+ inset: 0;
+ z-index: 80;
+ background: rgba(0, 0, 0, 0.58);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.22s ease;
+}
+
+.drawer-backdrop.open {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.shop-drawer {
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 90;
+ width: min(560px, 100%);
+ height: 100vh;
+ padding: 22px;
+ overflow-y: auto;
+ background: #f5f5f5;
+ border-left: 1px solid #d9d9d9;
+ color: #1f1f1f;
+ transform: translateX(100%);
+ transition: transform 0.24s ease;
+}
+
+.shop-drawer.open {
+ transform: translateX(0);
+}
+
+.drawer-top,
+.profile-section-header,
+.drawer-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 14px;
+}
+
+.drawer-top {
+ padding-bottom: 18px;
+ border-bottom: 1px solid #d9d9d9;
+ margin-bottom: 18px;
+ font-size: 12px;
+ letter-spacing: 0.24em;
+}
+
+.drawer-top button,
+.cart-toast-close {
+ width: 34px;
+ height: 34px;
+ border: 1px solid #d6d6d6;
+ background: #f1f1f1;
+ color: #1f1f1f;
+ cursor: pointer;
+}
+
+.drawer-stack,
+.auth-panel,
+.cart-items,
+.order-list,
+.requirements,
+.sample-credit-list,
+.subscription-list {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.drawer-section {
+ padding: 18px;
+ background: #f1f1f1;
+ border: 1px solid #dddddd;
+}
+
+.drawer-section h2,
+.drawer-section h3,
+.drawer-section p {
+ margin-top: 0;
+}
+
+.drawer-kicker {
+ display: block;
+ margin-bottom: 12px;
+ font-size: 10px;
+ letter-spacing: 0.22em;
+ color: #666;
+}
+
+.drawer-grid {
+ display: grid;
+ gap: 12px;
+}
+
+.drawer-grid--two,
+.profile-read-grid,
+.toggle-grid,
+.payment-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+}
+
+.shop-field {
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: #666;
+}
+
+.shop-field input {
+ width: 100%;
+ min-height: 42px;
+ border: 1px solid #d6d6d6;
+ border-radius: 0;
+ background: #f8f8f8;
+ padding: 10px 11px;
+ color: #1f1f1f;
+ font: inherit;
+ letter-spacing: 0;
+ text-transform: none;
+}
+
+.drawer-primary,
+.drawer-secondary,
+.cart-remove,
+.pref-toggle,
+.payment-card,
+.cart-controls button,
+.cart-toast button {
+ border-radius: 0;
+ cursor: pointer;
+ font: inherit;
+}
+
+.drawer-primary {
+ width: 100%;
+ min-height: 46px;
+ border: 1px solid #1f1f1f;
+ background: #1f1f1f;
+ color: #fff;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+}
+
+.drawer-primary:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.drawer-secondary {
+ min-height: 38px;
+ border: 1px solid #d6d6d6;
+ background: #f8f8f8;
+ color: #1f1f1f;
+ padding: 0 13px;
+}
+
+.drawer-link-primary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+}
+
+.cart-item,
+.order-card,
+.read-block,
+.status-box,
+.requirement-row {
+ background: #f8f8f8;
+ border: 1px solid #dddddd;
+}
+
+.cart-item {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto auto;
+ gap: 12px;
+ align-items: center;
+ padding: 14px;
+}
+
+.cart-item h3 {
+ margin-bottom: 4px;
+ font-size: 14px;
+}
+
+.cart-item p,
+.drawer-muted,
+.order-card p {
+ margin: 0;
+ color: #666;
+ font-size: 13px;
+ line-height: 1.45;
+}
+
+.cart-controls {
+ display: grid;
+ grid-template-columns: 32px 32px 32px;
+ align-items: center;
+ border: 1px solid #d6d6d6;
+ background: #f1f1f1;
+}
+
+.cart-controls button {
+ width: 32px;
+ height: 32px;
+ border: 0;
+ background: transparent;
+}
+
+.cart-controls span {
+ text-align: center;
+}
+
+.cart-remove {
+ min-height: 34px;
+ border: 1px solid #d6d6d6;
+ background: #f8f8f8;
+ padding: 0 10px;
+}
+
+.payment-card {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-height: 60px;
+ border: 1px solid #d6d6d6;
+ background: #f8f8f8;
+ padding: 12px;
+}
+
+.payment-card span {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ height: 28px;
+ background: #1f1f1f;
+ color: #fff;
+ font-size: 10px;
+ letter-spacing: 0.08em;
+}
+
+.payment-card.active {
+ border-color: #ff6a00;
+ background: rgba(255, 106, 0, 0.12);
+}
+
+.totals-box {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.totals-box > div,
+.requirement-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.totals-box .discount-explainer {
+ display: block;
+ padding: 12px;
+ border: 1px solid #dddddd;
+ background: #f8f8f8;
+}
+
+.discount-explainer span {
+ display: block;
+ margin-bottom: 8px;
+}
+
+.discount-explainer p {
+ margin: 0;
+ color: #1f1f1f;
+ font-size: 13px;
+ line-height: 1.45;
+}
+
+.discount-explainer p + p {
+ margin-top: 6px;
+}
+
+.total-row {
+ padding-top: 10px;
+ border-top: 1px solid #d6d6d6;
+ font-size: 18px;
+}
+
+.drawer-error {
+ margin: 0;
+ padding: 12px 14px;
+ border: 1px solid #dddddd;
+ background: #f8f8f8;
+ color: #1f1f1f;
+}
+
+.drawer-error {
+ border-color: #ff6a00;
+}
+
+.profile-head {
+ display: grid;
+ gap: 8px;
+}
+
+.profile-head h2 {
+ margin-bottom: 0;
+}
+
+.profile-read-grid {
+ margin-top: 14px;
+}
+
+.read-block {
+ padding: 13px;
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+}
+
+.read-block span,
+.requirement-row span,
+.totals-box span {
+ color: #666;
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.status-box {
+ padding: 14px;
+ font-weight: 700;
+}
+
+.sample-credit-list {
+ margin-top: 12px;
+}
+
+.sample-credit-list span {
+ padding: 10px;
+ background: #f8f8f8;
+ border: 1px solid #dddddd;
+ font-size: 13px;
+}
+
+.pref-toggle {
+ min-height: 58px;
+ padding: 12px;
+ border: 1px solid #d6d6d6;
+ background: #f8f8f8;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 6px;
+}
+
+.pref-toggle.active {
+ border-color: #ff6a00;
+ background: rgba(255, 106, 0, 0.12);
+}
+
+.subscription-list {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid #d6d6d6;
+}
+
+.subscription-list-title {
+ color: #666;
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+}
+
+.subscription-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 12px;
+ align-items: center;
+ padding: 12px;
+ border: 1px solid #dddddd;
+ background: #f8f8f8;
+}
+
+.subscription-row div {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.subscription-row span {
+ color: #666;
+ font-size: 12px;
+}
+
+.subscription-row button {
+ min-height: 34px;
+ border: 1px solid #d6d6d6;
+ border-radius: 0;
+ background: #f1f1f1;
+ color: #1f1f1f;
+ padding: 0 12px;
+ cursor: pointer;
+}
+
+.subscription-row button:hover {
+ border-color: #ff6a00;
+}
+
+.requirement-row {
+ padding: 12px;
+}
+
+.requirement-row strong.met {
+ color: #ff6a00;
+}
+
+.order-card {
+ padding: 14px;
+}
+
+.order-card div {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
+.cart-toast {
+ position: fixed;
+ right: 22px;
+ bottom: 22px;
+ z-index: 100;
+ width: min(360px, calc(100vw - 44px));
+ padding: 18px;
+ border: 1px solid #d6d6d6;
+ background: #f5f5f5;
+ color: #1f1f1f;
+ box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
+}
+
+.cart-toast p {
+ margin: 8px 38px 14px 0;
+ color: #666;
+}
+
+.cart-toast > button:last-child {
+ min-height: 40px;
+ width: 100%;
+ border: 1px solid #1f1f1f;
+ background: #1f1f1f;
+ color: #fff;
+}
+
+.cart-toast > button.cart-toast-close:last-child {
+ width: 34px;
+ min-height: 34px;
+ border: 1px solid #d6d6d6;
+ background: #f1f1f1;
+ color: #1f1f1f;
+}
+
+.cart-toast-close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+}
+
+@media (max-width: 640px) {
+ .shop-drawer {
+ padding: 16px;
+ }
+
+ .drawer-grid--two,
+ .profile-read-grid,
+ .toggle-grid,
+ .payment-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .cart-item {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/parfum-shop/src/components/ShopDrawer.jsx b/parfum-shop/src/components/ShopDrawer.jsx
new file mode 100644
index 0000000..30ebee3
--- /dev/null
+++ b/parfum-shop/src/components/ShopDrawer.jsx
@@ -0,0 +1,476 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { formatChf } from "../shop/money";
+import { useShop } from "../shop/useShop";
+import "./ShopDrawer.css";
+
+const paymentMethods = [
+ { key: "Bill", badge: "BILL", label: "Bill" },
+ { key: "Card", badge: "CARD", label: "Card" },
+ { key: "Twint", badge: "TW", label: "Twint" },
+ { key: "PayPal", badge: "PP", label: "PayPal" },
+];
+
+const notificationLabels = [
+ ["drops_enabled", "New Drops"],
+ ["restocks_enabled", "Restocks"],
+ ["small_batch_enabled", "Small Batch Releases"],
+ ["discovery_enabled", "Discovery Set Updates"],
+];
+
+function Field({ label, value, onChange, type = "text", readOnly = false }) {
+ return (
+
+ {label}
+
+ );
+}
+
+function AuthPanel() {
+ const { busy, error, login, register } = useShop();
+ const [mode, setMode] = useState("login");
+ const [form, setForm] = useState({
+ first_name: "",
+ surname: "",
+ email: "",
+ password: "",
+ });
+
+ const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+
+ const submit = (event) => {
+ event.preventDefault();
+ if (mode === "login") {
+ login({ email: form.email, password: form.password }).catch(() => {});
+ return;
+ }
+ register(form).catch(() => {});
+ };
+
+ return (
+
+ );
+}
+
+function CartPanel() {
+ const {
+ cart,
+ checkout,
+ removeCartItem,
+ updateCartQuantity,
+ busy,
+ error,
+ user,
+ } = useShop();
+ const [address, setAddress] = useState(() => ({
+ street_name: user?.street_name || "",
+ house_number: user?.house_number || "",
+ zip_code: user?.zip_code || "",
+ city: user?.city || "",
+ }));
+ const [paymentMethod, setPaymentMethod] = useState("Bill");
+
+ const updateAddress = (key, value) =>
+ setAddress((current) => ({ ...current, [key]: value }));
+
+ const submit = (event) => {
+ event.preventDefault();
+ checkout({ ...address, payment_method: paymentMethod }).catch(() => {});
+ };
+
+ return (
+
+ );
+}
+
+function RequirementRow({ label, met, children }) {
+ return (
+
+ {label}
+ {children || (met ? "met" : "open")}
+
+ );
+}
+
+function ProfilePanel() {
+ const {
+ busy,
+ error,
+ logout,
+ orders,
+ removeProductSubscription,
+ updateNotifications,
+ updateProfile,
+ user,
+ closePanel,
+ } = useShop();
+ const [editing, setEditing] = useState(false);
+ const [form, setForm] = useState(user || {});
+
+ const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+ const notifications = user?.notifications || {};
+ const restockSubscriptions = (user?.productSubscriptions || []).filter(
+ (subscription) => subscription.type === "restock"
+ );
+ const loyalty = user?.loyaltyStatus || {
+ hasDiscoverySet: false,
+ hasFullSize: false,
+ purchases: 0,
+ spent_cents: 0,
+ unlocked: false,
+ };
+
+ const save = () => {
+ updateProfile({
+ first_name: form.first_name,
+ surname: form.surname,
+ street_name: form.street_name,
+ house_number: form.house_number,
+ zip_code: form.zip_code,
+ city: form.city,
+ birthdate: form.birthdate,
+ })
+ .then(() => setEditing(false))
+ .catch(() => {});
+ };
+
+ const togglePreference = (key) => {
+ updateNotifications({ ...notifications, [key]: !notifications[key] }).catch(() => {});
+ };
+
+ return (
+
+
+ PROFILE
+ Hi, {user.first_name}
+
+ Logout
+
+
+
+
+
+ PROFILE INFORMATION
+ {!editing && (
+ setEditing(true)}>
+ Profil bearbeiten
+
+ )}
+
+
+ {editing ? (
+ <>
+
+ update("first_name", value)} />
+ update("surname", value)} />
+ update("street_name", value)} />
+ update("house_number", value)} />
+ update("zip_code", value)} />
+ update("city", value)} />
+ update("birthdate", value)} />
+
+
+
+ Save profile
+
+ {
+ setForm(user);
+ setEditing(false);
+ }}
+ >
+ Cancel
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ DISCOUNT STATUS
+ {user.discoveryStatus}
+ {user.sampleCredits?.length > 0 && (
+
+ {user.sampleCredits.map((credit) => (
+
+ {credit.slug}: {credit.status}
+
+ ))}
+
+ )}
+
+
+
+ DROP / RESTOCK PREFERENCES
+
+ {notificationLabels.map(([key, label]) => (
+ togglePreference(key)}
+ >
+ {label}
+ {notifications[key] ? "Active" : "Inactive"}
+
+ ))}
+
+
+
+
Subscribed Restocks
+ {restockSubscriptions.length === 0 ? (
+
No product-specific restock updates yet.
+ ) : (
+ restockSubscriptions.map((subscription) => (
+
+
+ {subscription.name}
+ {subscription.size_label}
+
+ removeProductSubscription(subscription.id).catch(() => {})}
+ >
+ Delete
+
+
+ ))
+ )}
+
+
+
+ SMALL BATCH ACCESS
+ {loyalty.unlocked ? "Unlocked" : "Locked"}
+
+ = 3}>
+ {loyalty.purchases}/3 Purchases
+
+ 50000}>
+ {formatChf(loyalty.spent_cents)} / CHF 500+
+
+
+
+
+
+ PURCHASES
+ {orders.length === 0 ? (
+ No orders yet.
+ ) : (
+
+ {orders.map((order) => (
+
+
+ Order #{order.id}
+ {new Date(order.created_at).toLocaleDateString("de-CH")}
+
+ {order.items.map((item) => `${item.quantity} x ${item.product.name}`).join(", ")}
+ {formatChf(order.total_cents)}
+
+ ))}
+
+
+ {error &&
{error}
}
+
+ );
+}
+
+function ReadBlock({ label, value }) {
+ return (
+
+ {label}
+ {value}
+
+ );
+}
+
+function ShopDrawer() {
+ const { closePanel, panelOpen, panelType, user } = useShop();
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default ShopDrawer;
diff --git a/parfum-shop/src/components/landing/HeroSection.jsx b/parfum-shop/src/components/landing/HeroSection.jsx
index 226f507..0407437 100644
--- a/parfum-shop/src/components/landing/HeroSection.jsx
+++ b/parfum-shop/src/components/landing/HeroSection.jsx
@@ -1,5 +1,6 @@
import { Link } from "react-router";
import IntroOverlay from "./IntroOverlay";
+import SharedNavbar from "../SharedNavbar";
function HeroSection({
heroImageWrapRef,
@@ -32,22 +33,7 @@ function HeroSection({
/>
-
-
-
+
diff --git a/parfum-shop/src/main.jsx b/parfum-shop/src/main.jsx
index aa01e08..2bf7f11 100644
--- a/parfum-shop/src/main.jsx
+++ b/parfum-shop/src/main.jsx
@@ -2,12 +2,15 @@ import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App";
+import { ShopProvider } from "./shop/ShopContext";
import "./App.css";
ReactDOM.createRoot(document.getElementById("root")).render(
-
+
-);
\ No newline at end of file
+);
diff --git a/parfum-shop/src/pages/AboutPage.jsx b/parfum-shop/src/pages/AboutPage.jsx
index c305484..973a3ec 100644
--- a/parfum-shop/src/pages/AboutPage.jsx
+++ b/parfum-shop/src/pages/AboutPage.jsx
@@ -1,26 +1,10 @@
-import { Link } from "react-router";
-import "../style/navbar.css";
+import SharedNavbar from "../components/SharedNavbar";
import "./AboutPage.css";
function AboutPage() {
return (
-
-
-
- atmos
-
-
- Düfte
-
-
- Testen
-
-
- Cart
-
-
+
@@ -314,4 +298,4 @@ function AboutPage() {
);
}
-export default AboutPage;
\ No newline at end of file
+export default AboutPage;
diff --git a/parfum-shop/src/pages/DatenschutzPage.jsx b/parfum-shop/src/pages/DatenschutzPage.jsx
index 5ea5b69..6fc2da0 100644
--- a/parfum-shop/src/pages/DatenschutzPage.jsx
+++ b/parfum-shop/src/pages/DatenschutzPage.jsx
@@ -1,26 +1,10 @@
-import { Link } from "react-router";
-import "../style/navbar.css";
+import SharedNavbar from "../components/SharedNavbar";
import "./DatenschutzPage.css";
function DatenschutzPage() {
return (
-
-
-
- atmos
-
-
- Düfte
-
-
- Testen
-
-
- Cart
-
-
+
@@ -227,4 +211,4 @@ function DatenschutzPage() {
);
}
-export default DatenschutzPage;
\ No newline at end of file
+export default DatenschutzPage;
diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx
index 0547cb3..4511946 100644
--- a/parfum-shop/src/pages/DiscoverySetPage.jsx
+++ b/parfum-shop/src/pages/DiscoverySetPage.jsx
@@ -1,6 +1,7 @@
-import { Link, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
import perfumes from "../data/perfumes";
-import "../style/navbar.css";
+import SharedNavbar from "../components/SharedNavbar";
+import { useShop } from "../shop/useShop";
import "./DiscoverySetPage.css";
const moodImages = [
@@ -14,25 +15,13 @@ const moodImages = [
function DiscoverySetPage() {
const navigate = useNavigate();
+ const { addToCart } = useShop();
+ const buyDiscoverySet = () =>
+ addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {});
return (
-
-
-
- atmos
-
-
- Düfte
-
-
- Testen
-
-
- Cart
-
-
+
@@ -75,8 +64,8 @@ function DiscoverySetPage() {
CHF 48 Gutschein automatisch im Set
- Wird beim späteren Full-Size-Kauf angerechnet – kein manuelles
- Einlösen nötig.
+ Nur das erste Discovery Set erstellt den einmaligen Rabatt.
+ Er wird bei einem späteren Full-Size-Kauf automatisch angerechnet.
-
+
DISCOVERY SET BESTELLEN – CHF 48.–
- Wird bei jedem Full-Size-Kauf angerechnet
+ Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt
1
Bestellen
- Discovery Set für CHF 48 bestellen. Der Gutschein-Code ist
- automatisch im Set enthalten.
+ Discovery Set für CHF 48 bestellen. Nur dein erstes Set erzeugt
+ automatisch einen einmaligen Rabatt.
@@ -176,8 +165,8 @@ function DiscoverySetPage() {
3
Entscheiden
- Full-Size bestellen. CHF 48 werden automatisch angerechnet.
- Kein Risiko, kein Verlust.
+ Full-Size bestellen. CHF 48 werden automatisch angerechnet,
+ sofern der Rabatt noch nicht genutzt wurde.
CHF 48 investieren, alle Düfte testen, bewusst entscheiden. Die
- Investition wird vollständig angerechnet – der Einstieg bleibt
- kontrolliert und nachvollziehbar.
+ erste Investition wird einmalig angerechnet – der Einstieg bleibt
+ kontrolliert, nachvollziehbar und fair.