diff --git a/apps/mobile/src/app/menu/qr.tsx b/apps/mobile/src/app/menu/qr.tsx index 464d04c..3decb99 100644 --- a/apps/mobile/src/app/menu/qr.tsx +++ b/apps/mobile/src/app/menu/qr.tsx @@ -33,21 +33,29 @@ export default function QrScreen() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [copied, setCopied] = useState(false); - const [selectedKey, setSelectedKey] = useState("qr-4"); + const availablePresets = Object.values(QR_STAND_PRESETS).filter( + (p) => !!COMPONENT_TEMPLATES[p.key] + ); + const [selectedKey, setSelectedKey] = useState( + availablePresets[0]?.key || "qr-lumiere" + ); const [exportingPng, setExportingPng] = useState(false); const [exportingPdf, setExportingPdf] = useState(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any const viewShotRef = useRef(null); - const activePreset: QrStandPreset = (QR_STAND_PRESETS[selectedKey] || Object.values(QR_STAND_PRESETS)[0])!; + const activePreset: QrStandPreset = + QR_STAND_PRESETS[selectedKey] || availablePresets[0] || Object.values(QR_STAND_PRESETS)[0]!; // Component-based template sistemi - const TemplateComponent = COMPONENT_TEMPLATES[selectedKey] ?? Object.values(COMPONENT_TEMPLATES)[0]; + const TemplateComponent = + COMPONENT_TEMPLATES[selectedKey] ?? Object.values(COMPONENT_TEMPLATES)[0]; const aspectRatio = TEMPLATE_ASPECT_RATIOS[selectedKey] ?? 1; const displayWidth = 300; const displayHeight = Math.round(displayWidth / aspectRatio); + useEffect(() => { (async () => { const activeRest = await getActiveRestaurant(); @@ -230,14 +238,15 @@ export default function QrScreen() { {/* Horizontal Theme Selector */} - {Object.values(QR_STAND_PRESETS).length > 1 && ( + {availablePresets.length > 1 && ( - {Object.values(QR_STAND_PRESETS).map((preset) => { + {availablePresets.map((preset) => { const isSelected = preset.key === selectedKey; + return ( ( + + {/* Arka Plan */} + + + {/* Ana Kart */} + + + + + {/* Sol Üst Botanik Dal */} + + + + + + {/* Sağ Üst Kahve İkonu */} + + + + + + + + + + {/* Sol Orta Kahve Bardağı */} + + + + + + + + {/* Sağ Dal */} + + + + + + {/* Dekoratif Çizgi */} + + + {/* Sol Alt Dal */} + + + + + + {/* Kahve Çekirdekleri (arka plan süsü) */} + + + + + + + + + + + + + + {/* Sağ Alt Fincan */} + + + + + + + + + {/* QR Köşe Çerçeveleri */} + + + + {/* QR Placeholder / Gerçek QR */} + + + {qrBase64 ? ( + + ) : ( + <> + + + + + + + + {"QR KOD ALANI"} + + + )} + + + {/* Metinler */} + + + {"THE"} + + + {"The Daily Grind"} + + + {"COFFEE & KITCHEN"} + + + {"SCAN TO VIEW MENU"} + + + {"DAILY GRIND CAFE | WIFI: DAILY_GRIND_GUEST"} + + + {"\u015E\u0130FRE: coffee2026 \u2022 MASA NO: 04"} + + + {"EST. 2018"} + + + +); + +export default QrTemplate2; diff --git a/apps/mobile/src/components/qr-templates/index.ts b/apps/mobile/src/components/qr-templates/index.ts index aba7447..4017705 100644 --- a/apps/mobile/src/components/qr-templates/index.ts +++ b/apps/mobile/src/components/qr-templates/index.ts @@ -1,6 +1,7 @@ import type React from "react"; import type { SvgProps } from "react-native-svg"; import QrTemplateLumiere from "./QrTemplateLumiere"; +import QrTemplate2 from "./QrTemplate2"; import QrTemplate3 from "./QrTemplate3"; export interface QrTemplateProps extends SvgProps { @@ -13,11 +14,14 @@ export const COMPONENT_TEMPLATES: Record< React.FC > = { "qr-lumiere": QrTemplateLumiere, + "qr-2": QrTemplate2, "qr-3": QrTemplate3, }; // Her template'in aspect ratio'su (width/height) export const TEMPLATE_ASPECT_RATIOS: Record = { "qr-lumiere": 1, // 600x600 = 1:1 + "qr-2": 400 / 650, // 400x650 = standart kart "qr-3": 400 / 650, // 400x650 = standart kart }; + diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts index 2988572..9d7988b 100644 --- a/packages/shared/src/qr-stands.ts +++ b/packages/shared/src/qr-stands.ts @@ -91,6 +91,20 @@ export const QR_STAND_PRESETS: Record = { subText: "#e5c378", dividerColor: "rgba(212, 175, 55, 0.3)", }, + "qr-2": { + key: "qr-2", + name: "The Daily Grind (QR-2)", + categoryName: "Özel Masa Kartı", + svgTemplateUrl: "/qr-2.svg", + aspectRatio: "400/650", + bgGradient: "radial-gradient(circle at 50% 50%, #252c36 0%, #171c22 100%)", + plaqueColor: "#f6efe2", + borderAccent: "#3a2312", + accentText: "#8c6239", + headerText: "#2c1a0e", + subText: "#3a2312", + dividerColor: "rgba(140, 98, 57, 0.3)", + }, "qr-3": { key: "qr-3", name: "Pizzeria Bella Napoli (QR-3)", @@ -108,3 +122,4 @@ export const QR_STAND_PRESETS: Record = { }; +