feat(mobile): integrate QrTemplate8 Emerald & Gold Special with 8.jpeg background and live editing

2026-08-21 01:10:40 +03:00
parent b0645c0ac3
commit 102a9a744b
6 changed files with 387 additions and 0 deletions
@@ -0,0 +1,209 @@
+import * as React from "react";
+import Svg, {
+  G,
+  Path,
+  Circle,
+  Rect,
+  Text,
+  Image,
+} from "react-native-svg";
+import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./index";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const template8Bg = require("../../../assets/templates/8.jpeg");
+
+const QrTemplate8 = ({
+  qrBase64,
+  fields,
+  ...props
+}: QrTemplateProps) => {
+  const rName = fields?.restaurantName;
+  const sub = fields?.subtitle;
+  const table = fields?.tableNo;
+  const cta = fields?.ctaText;
+  const wifi = fields?.wifiText;
+  const social = fields?.socialText;
+
+  const rNameFont = getFontFamily(rName?.fontId, "System, -apple-system, Roboto, sans-serif");
+  const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
+  const ctaFont = getFontFamily(cta?.fontId, "System, -apple-system, Roboto, sans-serif");
+  const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");
+
+  return (
+    <Svg width={300} height={300} viewBox="0 0 1024 1024" {...props}>
+      <Path fill="#0c4443" d="M0 0h1024v1024H0z" />
+      <Image
+        width={1024}
+        height={1024}
+        href={template8Bg}
+        preserveAspectRatio="none"
+      />
+
+      {/* QR Alanı (Merkez) */}
+      <G transform="translate(348 305)">
+        <Rect
+          width={328}
+          height={336}
+          fill="#f9f5eb"
+          stroke="#d1a752"
+          strokeWidth={1.5}
+          rx={16}
+        />
+        <Rect
+          width={304}
+          height={312}
+          x={12}
+          y={12}
+          fill="#faf8f2"
+          stroke="#0c4443"
+          strokeDasharray="6 4"
+          strokeOpacity={0.3}
+          strokeWidth={1.5}
+          rx={12}
+        />
+        {qrBase64 ? (
+          <Image
+            href={`data:image/png;base64,${qrBase64}`}
+            x={18}
+            y={18}
+            width={292}
+            height={300}
+          />
+        ) : (
+          <>
+            <Circle cx={164} cy={148} r={28} fill="#0c4443" />
+            <G fill="#d1a752">
+              <Path d="M164 132.6c4.4 6.6 4.4 15.4 0 24.2-4.4-8.8-4.4-17.6 0-24.2" />
+              <Path d="M161.8 150.2c-8.8-4.4-13.2 4.4-6.6 8.8 6.6 0 8.8-6.6 6.6-8.8m4.4 0c8.8-4.4 13.2 4.4 6.6 8.8-6.6 0-8.8-6.6-6.6-8.8" />
+            </G>
+            <Text
+              x={164}
+              y={218}
+              fill="#0c4443"
+              fontFamily="System, -apple-system, Roboto, sans-serif"
+              fontSize={14}
+              fontWeight={800}
+              letterSpacing={2}
+              textAnchor="middle"
+            >
+              {"QR KOD ALANI"}
+            </Text>
+          </>
+        )}
+      </G>
+
+      {/* Üst Çizgiler & OR Ayracı */}
+      <Path
+        stroke="#d1a752"
+        strokeLinecap="round"
+        strokeWidth={2}
+        d="M210 188h240"
+      />
+      <Text
+        x={512}
+        y={194}
+        fill="#d1a752"
+        fontFamily="System, -apple-system, Roboto, sans-serif"
+        fontSize={24}
+        fontWeight={900}
+        letterSpacing={2}
+        textAnchor="middle"
+      >
+        {"OR"}
+      </Text>
+      <Path
+        stroke="#d1a752"
+        strokeLinecap="round"
+        strokeWidth={2}
+        d="M574 188h240"
+      />
+
+      {/* Masa Numarası (En Üst) */}
+      {table?.visible !== false &&
+        renderSvgLines({
+          text: table?.text || "MASA NO: 01",
+          x: 512,
+          y: 70,
+          offsetY: table?.offsetY,
+          fill: "#d1a752",
+          fontFamily: infoFont,
+          fontSize: table?.fontSize ? table.fontSize * 1.8 : 22,
+          fontWeight: 800,
+          letterSpacing: 2,
+        })}
+
+      {/* Restoran Başlığı / Üst Başlık */}
+      {rName?.visible !== false &&
+        renderSvgLines({
+          text: rName?.text || "EXPLORE OUR MENU",
+          x: 512,
+          y: 136,
+          offsetY: rName?.offsetY,
+          fill: "#fff",
+          fontFamily: rNameFont,
+          fontSize: rName?.fontSize ? rName.fontSize * 1.8 : 50,
+          fontWeight: 900,
+          letterSpacing: 2,
+        })}
+
+      {/* Slogan / Alt Başlık */}
+      {sub?.visible !== false &&
+        renderSvgLines({
+          text: sub?.text || "THE DAILY SPECIALS",
+          x: 512,
+          y: 242,
+          offsetY: sub?.offsetY,
+          fill: "#d1a752",
+          fontFamily: subFont,
+          fontSize: sub?.fontSize ? sub.fontSize * 1.8 : 42,
+          fontWeight: 900,
+          letterSpacing: 2,
+        })}
+
+      {/* CTA Metni */}
+      {cta?.visible !== false &&
+        renderSvgLines({
+          text: cta?.text || "SCAN TO VIEW OUR\nFULL MENU & SPECIALS",
+          x: 512,
+          y: 730,
+          offsetY: cta?.offsetY,
+          fill: "#fff",
+          fontFamily: ctaFont,
+          fontSize: cta?.fontSize ? cta.fontSize * 1.8 : 28,
+          fontWeight: 900,
+          letterSpacing: 1,
+          lineHeight: 38,
+        })}
+
+      {/* WiFi / Sipariş Bilgisi */}
+      {wifi?.visible !== false &&
+        renderSvgLines({
+          text: wifi?.text || "SCAN TO ORDER & BROWSE",
+          x: 512,
+          y: 846,
+          offsetY: wifi?.offsetY,
+          fill: "#d1a752",
+          fontFamily: infoFont,
+          fontSize: wifi?.fontSize ? wifi.fontSize * 1.8 : 22,
+          fontWeight: 900,
+          letterSpacing: 1.5,
+        })}
+
+      {/* Sosyal Medya */}
+      {social?.visible !== false &&
+        renderSvgLines({
+          text: social?.text || "@menulio.app",
+          x: 512,
+          y: 916,
+          offsetY: social?.offsetY,
+          fill: "#e5c378",
+          fontFamily: infoFont,
+          fontSize: social?.fontSize ? social.fontSize * 1.8 : 20,
+          fontWeight: 700,
+          letterSpacing: 1,
+        })}
+    </Svg>
+  );
+};
+
+export default QrTemplate8;
@@ -6,8 +6,10 @@ import QrTemplate3 from "./QrTemplate3";
 import QrTemplate4 from "./QrTemplate4";
 import QrTemplate5 from "./QrTemplate5";
 import QrTemplate6 from "./QrTemplate6";
+import QrTemplate8 from "./QrTemplate8";

 export interface TextItemConfig {
+
  text: string;
  fontSize?: number;
  fontId?: string;
@@ -127,6 +129,7 @@ export const COMPONENT_TEMPLATES: Record<
  "qr-4": QrTemplate4,
  "qr-5": QrTemplate5,
  "qr-6": QrTemplate6,
+  "qr-8": QrTemplate8,
 };

 // Her template'in aspect ratio'su (width/height)
@@ -137,4 +140,6 @@ export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
  "qr-4": 400 / 580,     // 400x580 = zarif altın çerçeve
  "qr-5": 380 / 500,     // 380x500 = PNG arka planlı modern kart
  "qr-6": 400 / 580,     // 400x580 = taş & ızgara vintage stant
+  "qr-8": 1,            // 1024x1024 = 1:1 Emerald Gold Özel Tasarım
 };
+
@@ -0,0 +1,158 @@
+import Svg, {
+    SvgProps,
+    Path,
+    Image,
+    G,
+    Rect,
+    Circle,
+    Text,
+} from "react-native-svg"
+import { memo } from "react"
+const SvgComponent = (props: SvgProps) => (
+    <Svg width={1024} height={1024} {...props}>
+        <Path fill="#0c4443" d="M0 0h1024v1024H0z" />
+        <Image
+            width={1024}
+            height={1024}
+            href="8.jpeg"
+            preserveAspectRatio="none"
+        />
+        <G transform="translate(348 305)">
+            <Rect
+                width={328}
+                height={336}
+                fill="#f9f5eb"
+                stroke="#d1a752"
+                strokeWidth={1.5}
+                rx={16}
+            />
+            <Rect
+                width={304}
+                height={312}
+                x={12}
+                y={12}
+                fill="#faf8f2"
+                stroke="#0c4443"
+                strokeDasharray="6 4"
+                strokeOpacity={0.3}
+                strokeWidth={1.5}
+                rx={12}
+            />
+            <Circle cx={164} cy={148} r={28} fill="#0c4443" />
+            <G fill="#d1a752">
+                <Path d="M164 132.6c4.4 6.6 4.4 15.4 0 24.2-4.4-8.8-4.4-17.6 0-24.2" />
+                <Path d="M161.8 150.2c-8.8-4.4-13.2 4.4-6.6 8.8 6.6 0 8.8-6.6 6.6-8.8m4.4 0c8.8-4.4 13.2 4.4 6.6 8.8-6.6 0-8.8-6.6-6.6-8.8" />
+            </G>
+            <Text
+                x={164}
+                y={218}
+                fill="#0c4443"
+                fontFamily="Inter, Arial, sans-serif"
+                fontSize={14}
+                fontWeight={800}
+                letterSpacing={2}
+                textAnchor="middle"
+            >
+                {"QR KOD ALANI"}
+            </Text>
+        </G>
+        <Text
+            x={512}
+            y={142}
+            fill="#fff"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={52}
+            fontWeight={900}
+            letterSpacing={2}
+            textAnchor="middle"
+        >
+            {"EXPLORE OUR MENU"}
+        </Text>
+        <Path
+            stroke="#d1a752"
+            strokeLinecap="round"
+            strokeWidth={2}
+            d="M210 188h240"
+        />
+        <Text
+            x={512}
+            y={194}
+            fill="#d1a752"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={24}
+            fontWeight={900}
+            letterSpacing={2}
+            textAnchor="middle"
+        >
+            {"OR"}
+        </Text>
+        <Path
+            stroke="#d1a752"
+            strokeLinecap="round"
+            strokeWidth={2}
+            d="M574 188h240"
+        />
+        <Text
+            x={512}
+            y={242}
+            fill="#d1a752"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={44}
+            fontWeight={900}
+            letterSpacing={2}
+            textAnchor="middle"
+        >
+            {"THE DAILY SPECIALS"}
+        </Text>
+        <Text
+            x={512}
+            y={738}
+            fill="#fff"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={28}
+            fontWeight={900}
+            letterSpacing={1}
+            textAnchor="middle"
+        >
+            {"SCAN TO VIEW OUR"}
+        </Text>
+        <Text
+            x={512}
+            y={776}
+            fill="#fff"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={28}
+            fontWeight={900}
+            letterSpacing={1}
+            textAnchor="middle"
+        >
+            {"FULL MENU & SPECIALS"}
+        </Text>
+        <Text
+            x={512}
+            y={842}
+            fill="#d1a752"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={21}
+            fontWeight={900}
+            letterSpacing={1.5}
+            textAnchor="middle"
+        >
+            {"SCAN TO ORDER"}
+        </Text>
+        <Text
+            x={512}
+            y={872}
+            fill="#d1a752"
+            fontFamily="'Arial Black', 'Montserrat', sans-serif"
+            fontSize={21}
+            fontWeight={900}
+            letterSpacing={1.5}
+            textAnchor="middle"
+        >
+            {"& BROWSE"}
+        </Text>
+    </Svg>
+)
+const Memo = memo(SvgComponent)
+export default Memo
@@ -104,5 +104,20 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
    subText: "#c59b58",
    dividerColor: "rgba(197, 155, 88, 0.3)",
  },
+  "qr-8": {
+    key: "qr-8",
+    name: "Emerald & Gold Special (QR-8)",
+    categoryName: "Özel Kare Masa Kartı",
+    svgTemplateUrl: "/qr-8.svg",
+    aspectRatio: "1/1",
+    bgGradient: "radial-gradient(circle at 50% 50%, #0c4443 0%, #062423 100%)",
+    plaqueColor: "#f9f5eb",
+    borderAccent: "#d1a752",
+    accentText: "#d1a752",
+    headerText: "#ffffff",
+    subText: "#d1a752",
+    dividerColor: "rgba(209, 167, 82, 0.4)",
+  },
 };

+