From 68b5aebc1796332855aa19be2fe6723d2a03c9b6 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Mon, 21 Apr 2025 14:37:00 +0100
Subject: [PATCH] Update page.tsx

---
 app/dashboard/storefront/page.tsx | 350 ++++++++++++++++--------------
 1 file changed, 185 insertions(+), 165 deletions(-)

diff --git a/app/dashboard/storefront/page.tsx b/app/dashboard/storefront/page.tsx
index 35c1c38..c174b0d 100644
--- a/app/dashboard/storefront/page.tsx
+++ b/app/dashboard/storefront/page.tsx
@@ -10,6 +10,7 @@ import { Save, Send, Key, MessageSquare, Shield, Globe, Wallet } from "lucide-re
 import { apiRequest } from "@/lib/api";
 import { toast, Toaster } from "sonner";
 import BroadcastDialog from "@/components/modals/broadcast-dialog";
+import Dashboard from "@/components/dashboard/dashboard";
 import {
   Select,
   SelectContent,
@@ -33,6 +34,7 @@ interface Storefront {
   telegramToken: string;
   shipsFrom: typeof SHIPPING_REGIONS[number]["value"];
   shipsTo: typeof SHIPPING_REGIONS[number]["value"];
+  storePolicy: string;
   wallets: {
     bitcoin?: string;
     litecoin: string;
@@ -80,6 +82,7 @@ export default function StorefrontPage() {
     telegramToken: "",
     shipsFrom: "UK",
     shipsTo: "WW",
+    storePolicy: "",
     wallets: {
       bitcoin: '',
       litecoin: '',
@@ -117,6 +120,7 @@ export default function StorefrontPage() {
           telegramToken: data.telegramToken || "",
           shipsFrom: data.shipsFrom || "UK",
           shipsTo: data.shipsTo || "WW",
+          storePolicy: data.storePolicy || "",
           wallets: {
             bitcoin: data.wallets?.bitcoin || '',
             litecoin: data.wallets?.litecoin || '',
@@ -157,10 +161,13 @@ export default function StorefrontPage() {
   };
 
   return (
-    <Layout>
-      <div>
-        <div className="flex items-center justify-between border-b border-zinc-800 h-14 px-4">
-          <h1 className="text-xl font-medium">Storefront Settings</h1>
+    <Dashboard>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Globe className="mr-2 h-6 w-6" />
+            Storefront Settings
+          </h1>
           <div className="flex gap-2">
             <Button
               variant="outline"
@@ -183,176 +190,189 @@ export default function StorefrontPage() {
           </div>
         </div>
 
-        <div className="p-3">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-            {/* Security Settings */}
-            <div className="space-y-3">
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
-                <div className="flex items-center gap-2 mb-3">
-                  <Shield className="h-4 w-4 text-purple-400" />
-                  <h2 className="text-base font-medium text-zinc-100">
-                    Security
-                  </h2>
-                </div>
-                <div className="space-y-3">
-                  <div>
-                    <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
-                    <Textarea
-                      value={storefront.pgpKey}
-                      onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
-                      placeholder="Enter your PGP public key"
-                      className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
-                    <Input
-                      type="password"
-                      value={storefront.telegramToken}
-                      onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
-                      placeholder="Enter your Telegram bot token"
-                      className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
-                    />
-                  </div>
-                </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Security Settings */}
+          <div className="space-y-3">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <Shield className="h-4 w-4 text-purple-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Security
+                </h2>
               </div>
-
-              {/* Shipping Settings */}
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
-                <div className="flex items-center gap-2 mb-3">
-                  <Globe className="h-4 w-4 text-blue-400" />
-                  <h2 className="text-base font-medium text-zinc-100">
-                    Shipping
-                  </h2>
+              <div className="space-y-3">
+                <div>
+                  <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
+                  <Textarea
+                    value={storefront.pgpKey}
+                    onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
+                    placeholder="Enter your PGP public key"
+                    className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
+                  />
                 </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div>
-                    <label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
-                    <Select
-                      value={storefront.shipsFrom}
-                      onValueChange={(value) =>
-                        setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
-                      }
-                    >
-                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {SHIPPING_REGIONS.map((region) => (
-                          <SelectItem key={region.value} value={region.value}>
-                            {region.emoji} {region.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div>
-                    <label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
-                    <Select
-                      value={storefront.shipsTo}
-                      onValueChange={(value) =>
-                        setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
-                      }
-                    >
-                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {SHIPPING_REGIONS.map((region) => (
-                          <SelectItem key={region.value} value={region.value}>
-                            {region.emoji} {region.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
+                <div>
+                  <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
+                  <Input
+                    type="password"
+                    value={storefront.telegramToken}
+                    onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
+                    placeholder="Enter your Telegram bot token"
+                    className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
+                  />
                 </div>
               </div>
             </div>
 
-            {/* Messaging and Payments */}
-            <div className="space-y-3">
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
-                <div className="flex items-center gap-2 mb-3">
-                  <MessageSquare className="h-4 w-4 text-emerald-400" />
-                  <h2 className="text-base font-medium text-zinc-100">
-                    Welcome Message
-                  </h2>
-                </div>
-                <Textarea
-                  value={storefront.welcomeMessage}
-                  onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
-                  placeholder="Enter the welcome message for new customers"
-                  className="h-24 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
-                />
+            {/* Shipping Settings */}
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <Globe className="h-4 w-4 text-blue-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Shipping
+                </h2>
               </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
+                  <Select
+                    value={storefront.shipsFrom}
+                    onValueChange={(value) =>
+                      setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
+                    }
+                  >
+                    <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {SHIPPING_REGIONS.map((region) => (
+                        <SelectItem key={region.value} value={region.value}>
+                          {region.emoji} {region.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
+                  <Select
+                    value={storefront.shipsTo}
+                    onValueChange={(value) =>
+                      setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
+                    }
+                  >
+                    <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {SHIPPING_REGIONS.map((region) => (
+                        <SelectItem key={region.value} value={region.value}>
+                          {region.emoji} {region.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
 
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
-                <div className="flex items-center gap-2 mb-3">
-                  <Wallet className="h-4 w-4 text-yellow-400" />
-                  <h2 className="text-base font-medium text-zinc-100">
-                    Payment Methods
-                  </h2>
-                </div>
-                <div className="space-y-2">
-                  {WALLET_OPTIONS.map((wallet) => (
-                    <div key={wallet.id} className="space-y-1.5">
-                      <div className="flex items-center justify-between">
-                        <label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
-                          <span>{wallet.emoji}</span>
-                          {wallet.name}
-                          {wallet.comingSoon && (
-                            <span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
-                              Coming Soon
-                            </span>
+          {/* Messaging and Payments */}
+          <div className="space-y-3">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <MessageSquare className="h-4 w-4 text-emerald-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Welcome Message
+                </h2>
+              </div>
+              <Textarea
+                value={storefront.welcomeMessage}
+                onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
+                placeholder="Enter the welcome message for new customers"
+                className="h-36 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
+              />
+            </div>
+
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <Shield className="h-4 w-4 text-orange-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Store Policy
+                </h2>
+              </div>
+              <Textarea
+                value={storefront.storePolicy}
+                onChange={(e) => setStorefront(prev => ({ ...prev, storePolicy: e.target.value }))}
+                placeholder="Enter your store's policies, terms, and conditions"
+                className="h-48 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
+              />
+            </div>
+
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <Wallet className="h-4 w-4 text-yellow-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Payment Methods
+                </h2>
+              </div>
+              <div className="space-y-2">
+                {WALLET_OPTIONS.map((wallet) => (
+                  <div key={wallet.id} className="space-y-1.5">
+                    <div className="flex items-center justify-between">
+                      <label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
+                        <span>{wallet.emoji}</span>
+                        {wallet.name}
+                        {wallet.comingSoon && (
+                          <span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
+                            Coming Soon
+                          </span>
+                        )}
+                      </label>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div>
+                              <Switch
+                                checked={storefront.enabledWallets[wallet.id]}
+                                onCheckedChange={(checked) =>
+                                  setStorefront((prev) => ({
+                                    ...prev,
+                                    enabledWallets: {
+                                      ...prev.enabledWallets,
+                                      [wallet.id]: checked,
+                                    },
+                                  }))
+                                }
+                                disabled={wallet.disabled}
+                              />
+                            </div>
+                          </TooltipTrigger>
+                          {wallet.disabled && (
+                            <TooltipContent>
+                              <p>Coming soon</p>
+                            </TooltipContent>
                           )}
-                        </label>
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <div>
-                                <Switch
-                                  checked={storefront.enabledWallets[wallet.id]}
-                                  onCheckedChange={(checked) =>
-                                    setStorefront((prev) => ({
-                                      ...prev,
-                                      enabledWallets: {
-                                        ...prev.enabledWallets,
-                                        [wallet.id]: checked,
-                                      },
-                                    }))
-                                  }
-                                  disabled={wallet.disabled}
-                                />
-                              </div>
-                            </TooltipTrigger>
-                            {wallet.disabled && (
-                              <TooltipContent>
-                                <p>Coming soon</p>
-                              </TooltipContent>
-                            )}
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                      {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
-                        <Input
-                          value={storefront.wallets[wallet.id]}
-                          onChange={(e) =>
-                            setStorefront((prev) => ({
-                              ...prev,
-                              wallets: {
-                                ...prev.wallets,
-                                [wallet.id]: e.target.value,
-                              },
-                            }))
-                          }
-                          placeholder={wallet.placeholder}
-                          className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
-                        />
-                      )}
+                        </Tooltip>
+                      </TooltipProvider>
                     </div>
-                  ))}
-                </div>
+                    {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
+                      <Input
+                        value={storefront.wallets[wallet.id]}
+                        onChange={(e) =>
+                          setStorefront((prev) => ({
+                            ...prev,
+                            wallets: {
+                              ...prev.wallets,
+                              [wallet.id]: e.target.value,
+                            },
+                          }))
+                        }
+                        placeholder={wallet.placeholder}
+                        className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
+                      />
+                    )}
+                  </div>
+                ))}
               </div>
             </div>
           </div>
@@ -361,6 +381,6 @@ export default function StorefrontPage() {
 
       <BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} />
       <Toaster position="bottom-right" />
-    </Layout>
+    </Dashboard>
   );
 }